Number Input for Material UI v5 (mark 1)

NumberInputv1.js

// Copyright 2022 Ali Sherief
//
// Licensed under the Apache License, Version 2.0 (the "License");
// you may not use this file except in compliance with the License.
// You may obtain a copy of the License at
//
//    http://www.apache.org/licenses/LICENSE-2.0
//
// Unless required by applicable law or agreed to in writing, software
// distributed under the License is distributed on an "AS IS" BASIS,
// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
// See the License for the specific language governing permissions and
// limitations under the License.

import InputAdornment from '@mui/material/InputAdornment';
import IconButton from '@mui/material/IconButton';
import TextField from '@mui/material/TextField';
import {useState } from 'react';
import AddIcon from '@mui/icons-material/Add';
import RemoveIcon from '@mui/icons-material/Remove';

const isNumeric = (n) => {
    if (typeof n == "number") {
        return true;
    }
    else if (/^(\d+)\.?(\d*)$/.test(n)) {
        return true;
    }
    else {
        return false;
    }

}

const handleStep = (number, min, max, step, direction, setNumberValue) => {
    number = Number(number);
    if (isNumeric(min) && number + step*direction < min) {
        setNumberValue(min);
    }
    else if (isNumeric(max) && number + step*direction > max) {
        setNumberValue(max);
    }
    else {
        setNumberValue(number + step*direction);
    }
}

const handleNumberChange = (number, min, max, step, _default, prefix, suffix,
     setNumberValue, setError) => {
    prefix = prefix.replace(/[.*+?^${}()|[\]\\]/g, '\\$&');
    suffix = suffix.replace(/[.*+?^${}()|[\]\\]/g, '\\$&');
    number = number.replace(RegExp(`${prefix}(.*)${suffix}`), "$1");
    if (number === "") {
        if (_default) {
            setNumberValue(_default);
        }
        else {
            setNumberValue(0);
        }
    }
    if (!isNumeric(number)) {
        return;
    }
    setNumberValue(number);
    let tmpnumber = Number(number);
    if (isNumeric(min) && tmpnumber < min) {
        setError(true);
        return;
    }
    else if (isNumeric(max) && tmpnumber > max) {
        setError(true);
        return;
    }
    let tempnum = tmpnumber;
    if (isNumeric(step) && step > 0) {
        while (Math.abs(step) < 1) {
            tempnum *= 10;
            step *= 10;
        }
        if (tempnum % step !== 0) {
            setError(true);
            return;
        }
    }
    setError(false);
    return;
}

export default function NumberComponent(props){
  const [numberValue, setNumberValue] = useState(props.default || 0);
  const [error, setError] = useState(false);

  
  let step = props.step;
  if (step === undefined) {
    step = 1;
  }

  let prefix = "";
  let suffix = "";
  if (props.prefix) {
    prefix = props.prefix + " ";
  }
  if (props.suffix) {
    suffix = " " + props.suffix;
  }

  return (
    <TextField
    InputProps={{
        readOnly: (typeof(props.inputProps) === "object") ? props.inputProps.readOnly : false,
        startAdornment: (
            <InputAdornment position='start'>
            <IconButton onClick={
                (e) => handleStep(numberValue, props.min, props.max, step, -1, setNumberValue)
                }>
                    <RemoveIcon/>
              </IconButton>
            </InputAdornment>
          ),
        endAdornment: (
            <InputAdornment position='end'>
              <IconButton onClick={
                (e) => handleStep(numberValue, props.min, props.max, step, 1, setNumberValue)
                }>
                <AddIcon/>
              </IconButton>
            </InputAdornment>
          ),
        inputProps: {
            step: step,
            min: props.min,
            max: props.max,
            type: 'text',
            onChange: (e) => {
                handleNumberChange(e.target.value,
                    props.min, props.max, step, props.default, prefix, suffix, setNumberValue, setError)
                },
        }}}
        autocomplete={props.autoComplete}
        autoFocus={props.autoFocus}
        classes={props.classes}
        color={props.color}
        disabled={props.disabled}
        error={error}
        FormHelperTextProps={props.FormHelperTextProps}
        helperText={props.helperText}
        id={props.id}
        InputLabelProps={props.InputLabelProps}
        inputRef={props.inputRef}
        label={props.label}
        margin={props.margin}
        name={props.name}
        placeholder={props.placeholder}
        required={props.required}
        sx={{...props.sx}}
        value={prefix + numberValue + suffix}
        variant={props.variant}
    />
  )
}