devexpress-reporting-react/dx-report-viewer/components/reporting/Widgets/SizeOptions/PictureEditingSizeOptions.js

DevExpress Reporting React provides the capability to develop a reporting application to create and customize reports.

import React from 'react';
import Template from '../../../core/Template';
const PictureEditingSizeOptions = ({ data }) => {
    return (React.createElement("div", { className: "dx-picture-editing-sizemode-alignment" },
        React.createElement("div", { className: "dx-picture-editing-sizemode" },
            React.createElement("div", { className: "dx-picture-editing-text" }, data.sizeModeText),
            React.createElement("div", { className: "dx-picture-editing-sizemode-values" }, data.sizeModeValues.map((sizeModeValue, index) => (React.createElement(Template, { key: index, className: `dx-picture-editing-sizemode-alignment-value ${sizeModeValue.isSelected ? 'selected' : ''}`, template: sizeModeValue.iconTemplate, title: sizeModeValue.attrTitle, onClick: sizeModeValue.action }))))),
        React.createElement("div", { className: "dx-picture-editing-alignment" },
            React.createElement("div", { className: "dx-picture-editing-text" }, data.alignmentText),
            React.createElement("div", { className: "dx-picture-editing-alignment-values" }, data.alignmentValues.map((alignmentValue, index) => (React.createElement(Template, { key: index, className: `dx-picture-editing-sizemode-alignment-value ${alignmentValue.isSelected ? 'selected' : ''}`, template: alignmentValue.iconTemplate, title: alignmentValue.attrTitle, onClick: alignmentValue.action })))))));
};
export default PictureEditingSizeOptions;