devexpress-reporting-react
Version:
DevExpress Reporting React provides the capability to develop a reporting application to create and customize reports.
35 lines (34 loc) • 2.01 kB
JavaScript
import React from 'react';
import { SelectBox } from 'devextreme-react/select-box';
import Validator from 'devextreme-react/validator';
import { useDropDownOptions, useEditorOptions, useValidatorOptions } from '../editorHooks';
import { noDataText } from '@devexpress/analytics-core/property-grid/localization/_localization';
export const SelectBoxEditorBase = (getEditorOptions) => ({ data }) => {
const selectBoxRef = React.useRef();
const args = {
getEditorOptions,
getPrivateWidgetOptions: () => ({
allowClearing: data.editorOptions?.allowClearing,
displayCustomValue: true,
encodeNoDataText: true,
}),
};
const options = useEditorOptions(selectBoxRef, data, args);
const dropDownOptions = useDropDownOptions(selectBoxRef, ({ container }) => ({ container }));
const validatorOptions = useValidatorOptions(data);
return (React.createElement(SelectBox, { ref: selectBoxRef, dataSource: options.dataSource, value: options.value, valueExpr: options.valueExpr, displayExpr: options.displayExpr, disabled: options.disabled, onValueChanged: options.onValueChanged, useItemTextAsTitle: options.useItemTextAsTitle, noDataText: options.noDataText, dropDownOptions: dropDownOptions, inputAttr: options.inputAttr, placeholder: options.placeholder, showClearButton: options.showClearButton, searchEnabled: options.searchEnabled }, data.validationRules && React.createElement(Validator, { validationRules: validatorOptions.validationRules })));
};
const SelectBoxEditor = ({ data }) => {
const getEditorOptions = () => ({
dataSource: data.values,
value: data.value,
valueExpr: 'value',
displayExpr: 'displayValue',
disabled: data.disabled,
useItemTextAsTitle: true,
noDataText: noDataText(),
inputAttr: { 'aria-label': data.displayName, id: data.editorInputId }
});
return SelectBoxEditorBase(getEditorOptions)({ data });
};
export default SelectBoxEditor;