devexpress-reporting-react/dx-report-viewer/components/reporting/Editing/TextField/Mask/EditingFieldMask.js

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

import React from 'react';
import { TextBox } from 'devextreme-react/text-box';
import { initializeChildStyleBinding } from 'devexpress-reporting/viewer/internal/_bindings';
const MaskEditingField = ({ data }) => {
    const textBoxRef = React.useRef();
    React.useEffect(() => {
        initializeChildStyleBinding(textBoxRef.current.instance().element(), { style: data.textStyle, selector: '.dx-texteditor-input' });
    }, [data.textStyle]);
    return (React.createElement(TextBox, { ref: textBoxRef, className: 'dxrp-editing-field-mask', 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 MaskEditingField;