devexpress-reporting-react
Version:
DevExpress Reporting React provides the capability to develop a reporting application to create and customize reports.
35 lines (34 loc) • 1.6 kB
JavaScript
import React from 'react';
import { DateBox } from 'devextreme-react/date-box';
import Validator from 'devextreme-react/validator';
import { useDropDownOptions, useEditorOptions, useValidatorOptions } from '../editorHooks';
const DateEditor = ({ data }) => {
const dateBoxRef = React.useRef();
const args = {
getEditorOptions: () => ({
value: data.value,
type: 'datetime',
disabled: data.disabled,
inputAttr: { 'aria-label': data.displayName, id: data.editorInputId },
})
};
const options = useEditorOptions(dateBoxRef, data, args);
const dropDownOptions = useDropDownOptions(dateBoxRef, ({ element, container }) => {
const dropDownOptions = {
container,
position: {
at: 'left bottom',
collision: 'flipfit flip',
my: 'left top',
boundary: container,
of: element
}
};
return dropDownOptions;
});
const validatorOptions = useValidatorOptions(data);
return (React.createElement("div", { className: "dx-datebox-container" },
React.createElement(DateBox, { ref: dateBoxRef, value: options.value, type: options.type, disabled: options.disabled, onValueChanged: options.onValueChanged, inputAttr: options.inputAttr, placeholder: options.placeholder, showClearButton: options.showClearButton, dropDownOptions: dropDownOptions },
React.createElement(Validator, { validationRules: validatorOptions.validationRules }))));
};
export default DateEditor;