NumberEditor

import React, {
  forwardRef, useRef, useState, useImperativeHandle,
} from 'react';
import PropTypes from 'prop-types';
import { TextField } from '@mui/material';

const NumberEditor = forwardRef((props, ref) => {
  const [number, setNumber] = useState(props.value);
  const inputRef = useRef(null);

  const handleChange = (event) => {
    setNumber(event.target.value);
  };

  useImperativeHandle(ref, () => ({
    getValue: () => number,
    isCancelBeforeStart: () => false,
    isCancelAfterEnd: () => {
      if (number < 0) {
        return true;
      }
      return false;
    },

    afterGuiAttached: () => {
      if (inputRef.current) {
        setTimeout(() => inputRef.current.focus(), 100);
      }
    },
  }));

  return (
    <TextField
      type="number"
      value={number}
      onChange={handleChange}
      ref={inputRef}
      InputLabelProps={{
        shrink: true,
      }}
      variant="outlined"
      size="small"
      fullWidth
      style={{ height: '100%' }}
    />
  );
});

NumberEditor.defaultProps = {
  value: 0,
};

NumberEditor.propTypes = {
  value: PropTypes.oneOfType([
    PropTypes.string,
    PropTypes.number,
  ]),
};
export default NumberEditor;