devexpress-reporting-react
Version:
DevExpress Reporting React provides the capability to develop a reporting application to create and customize reports.
14 lines (13 loc) • 1.34 kB
JavaScript
import React from 'react';
import Slider from 'devextreme-react/slider';
const PictureEditingBrushOptions = ({ data }) => {
return (React.createElement("div", { className: "dx-picture-editing-brush-options" },
React.createElement("div", { className: "dx-picture-editing-line-width" },
React.createElement("div", { className: "dx-picture-editing-text" }, data.brushWidthText),
React.createElement(Slider, { className: "dx-picture-editing-line-width-slider", min: 1, max: 9, value: data.lineWidth, label: { visible: true }, tooltip: { enabled: true, showMode: 'always', position: 'bottom' }, onValueChanged: data.onLineWidthChanged })),
React.createElement("div", { className: "dx-picture-editing-line-color" },
React.createElement("div", { className: "dx-picture-editing-text" }, data.brushColorText),
React.createElement("div", { className: "dx-picture-editing-brush-options-colors" }, data.colors.map((color, index) => (React.createElement("div", { key: index, className: `dx-picture-editing-brush-options-color ${color.isSelected ? 'selected' : ''}` },
React.createElement("div", { className: "dx-picture-editing-brush-options-color-cell", style: { background: color.value }, onClick: color.action }))))))));
};
export default PictureEditingBrushOptions;