devexpress-reporting-react
Version:
DevExpress Reporting React provides the capability to develop a reporting application to create and customize reports.
24 lines (23 loc) • 1.32 kB
JavaScript
import React from 'react';
import { DateBox } from 'devextreme-react/date-box';
import { initializeChildStyleBinding } from 'devexpress-reporting/viewer/internal/_bindings';
const TextEditingField = ({ data }) => {
const dateBoxRef = React.useRef();
const [dropDownOptions, setDropDownOptions] = React.useState({});
React.useEffect(() => {
const element = dateBoxRef.current.instance().element();
const container = data.getPopupContainer(element);
initializeChildStyleBinding(element, { style: data.textStyle, selector: '.dx-texteditor-input' });
setDropDownOptions({
container,
position: {
at: 'left bottom',
collision: 'flipfit fit',
my: 'left top',
boundary: container, of: element
}
});
}, [data.textStyle]);
return (React.createElement(DateBox, { ref: dateBoxRef, className: 'dxrp-editing-field-mask', dropDownOptions: dropDownOptions, value: data.options.value, onValueChanged: data.options.onValueChanged, onFocusOut: data.options.onFocusOut, onInitialized: data.options.onInitialized, onKeyUp: data.options.onKeyUp, onKeyDown: data.options.onKeyDown, onFocusIn: data.options.onFocusIn, onPaste: data.options.onPaste }));
};
export default TextEditingField;