devexpress-reporting-react
Version:
DevExpress Reporting React provides the capability to develop a reporting application to create and customize reports.
36 lines (35 loc) • 2.55 kB
JavaScript
import React from 'react';
import Template from '../../../core/Template';
import Validator from 'devextreme-react/validator';
import { SelectBox } from 'devextreme-react/select-box';
import { noDataText } from '@devexpress/analytics-core/property-grid/localization/_localization';
import { useDropDownOptions, useEditorOptions, useValidatorOptions } from '../../../analytics/Properties/Editors/editorHooks';
const SignatureEditor = ({ data }) => {
const selectBoxRef = React.useRef();
const getEditorOptions = () => ({
dataSource: data.values,
onValueChanged: (event) => data.onValueChanged(event),
itemTemplate: 'item',
displayExpr: 'displayName',
valueExpr: 'key',
showClearButton: true,
noDataText: noDataText(),
inputAttr: { 'aria-label': data.displayName, id: data.editorInputId }
});
const args = {
getEditorOptions,
getPrivateWidgetOptions: () => ({
encodeNoDataText: true,
}),
};
const options = useEditorOptions(selectBoxRef, data, args);
const dropDownOptions = useDropDownOptions(selectBoxRef, ({ container }) => ({ minWidth: '300px', container }));
const validatorOptions = useValidatorOptions(data);
const renderItem = signature => (React.createElement("div", { className: "dxrdv-signature-editor-item" },
React.createElement("div", { className: "dxrdv-signature-editor-item-image" }, signature.image ? React.createElement("img", { src: signature.image }) : React.createElement(Template, { template: "dxrd-svg-preview-signature_img_placeholder" })),
React.createElement("div", { className: "dxrdv-signature-editor-item-info" }, signature.fields.map(({ label, value }) => (React.createElement("div", { key: `${label}-${value}`, className: "dxrdv-signature-editor-item-info-field", title: value },
React.createElement("span", { className: "dxrdv-signature-editor-item-info-field-label" }, label),
React.createElement("span", null, value)))))));
return (React.createElement(SelectBox, { ref: selectBoxRef, dataSource: options.dataSource, onValueChanged: options.onValueChanged, itemTemplate: options.itemTemplate, displayExpr: options.displayExpr, valueExpr: options.valueExpr, showClearButton: options.showClearButton, noDataText: options.noDataText, dropDownOptions: dropDownOptions, itemRender: renderItem }, !!data.validationRules && React.createElement(Validator, { validationRules: validatorOptions.validationRules })));
};
export default SignatureEditor;