devexpress-reporting-react/dx-report-viewer/components/reporting/Editing/TextField/Number/EditingFieldNumber.js

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

import React from 'react';
import { NumberBox } from 'devextreme-react/number-box';
import { initializeChildStyleBinding } from 'devexpress-reporting/viewer/internal/_bindings';
const NumberEditingField = ({ data }) => {
    const numberBoxRef = React.useRef();
    React.useEffect(() => {
        initializeChildStyleBinding(numberBoxRef.current.instance().element(), { style: data.textStyle, selector: '.dx-texteditor-input' });
    }, [data.textStyle]);
    return (React.createElement(NumberBox, { ref: numberBoxRef, 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 NumberEditingField;