افزایش تجربه کاربر با یک مؤلفه ورودی شماره سفارشی در React

import { CustomNumberInput } from './CustomNumberInput';

function App() {
  const handleNumberChange = (value: string | null) => {
    console.log("Entered value:", value);
  };

  return (
    
  );
}

export default App;

if (formatted.includes("-")) {
  formatted = formatted.replace(/-/g, "")
  formatted = formatted.startsWith("-") ? formatted : `-${formatted}`
}

if (formatted.includes(".") || formatted.includes(",")) {
  formatted = formatted.replace(".", DECIMAL_SEPARATOR)
  formatted = formatted.replace(",", DECIMAL_SEPARATOR)

  const [intPart, ...rest] = formatted.split(DECIMAL_SEPARATOR)
  const decPart = rest.join("")

  const limitedDecPart = decPart.slice(0, decimalPrecision.decimalDigits)
  const formattedIntPart = !intPart || intPart === "-" ? `0${intPart}` : intPart

  formatted = `${formattedIntPart}${DECIMAL_SEPARATOR}${limitedDecPart}`
}

const isNegative = formatted.startsWith("-")
const digits = isNegative ? formatted.slice(1) : formatted
if (digits.length > decimalPrecision.integerDigits) {
  formatted = isNegative
    ? `-${digits.slice(0, decimalPrecision.integerDigits)}`
    : digits.slice(0, decimalPrecision.integerDigits)
}

const handleKeyDown = (e: React.KeyboardEvent) => {
  const allowedKeys = [
    "Backspace", "Delete", "ArrowLeft", "ArrowRight",
    "Tab", "Home", "End", "-", "+", ".", ",", "0",
    "1", "2", "3", "4", "5", "6", "7", "8", "9"
  ]

  if (!allowedKeys.includes(e.key)) {
    e.preventDefault()
  } else if (valueInput.includes(DECIMAL_SEPARATOR) && (e.key === "." || e.key === ",")) {
    e.preventDefault()
  }
}

const handleChange = (e: React.ChangeEvent) => {
  const newValue = formatValue(e.target.value)
  setValueInput(newValue)
  onChange?.(newValue === '' ? null : newValue)
}

import * as React from "react"
import { type ClassValue, clsx } from "clsx";
import { twMerge } from "tailwind-merge";

type DecimalPrecision = {
  integerDigits: number
  decimalDigits: number
}

export interface CustomNumberInputProps
  extends Omit, 'onChange'> {
    className?: string,
    decimalPrecision?: DecimalPrecision
    onChange?: (value: string | null) => void
}

const DEFAULT_PRECISION: DecimalPrecision = {
  integerDigits: 10,
  decimalDigits: 2
}

const DECIMAL_SEPARATOR = "."

const CustomNumberInput = React.forwardRef(
  ({
    className,
    decimalPrecision = DEFAULT_PRECISION,
    onChange,
    ...props
  }, ref) => {
    const [valueInput, setValueInput] = React.useState("")

    const formatValue = React.useCallback((input: string): string => {
      let formatted = input.replace(/[^\d-+,.]/, "")

      if (formatted.includes("-")) {
        formatted = formatted.replace(/-/g, "")
        formatted = formatted.startsWith("-") ? formatted : `-${formatted}`
      }

      if (formatted.includes("+")) {
        formatted = formatted.replace(/-/g, "")
        formatted = formatted.replace(/\+/g, "")
      }

      if (formatted.includes(".") || formatted.includes(",")) {
        formatted = formatted.replace(".", DECIMAL_SEPARATOR)
        formatted = formatted.replace(",", DECIMAL_SEPARATOR)

        const [intPart, ...rest] = formatted.split(DECIMAL_SEPARATOR)
        const decPart = rest.join("")

        const limitedDecPart = decPart.slice(0, decimalPrecision.decimalDigits)
        const formattedIntPart = !intPart || intPart === "-" ? `0${intPart}` : intPart

        formatted = `${formattedIntPart}${DECIMAL_SEPARATOR}${limitedDecPart}`
      } else {
        const isNegative = formatted.startsWith("-")
        const digits = isNegative ? formatted.slice(1) : formatted
        if (digits.length > decimalPrecision.integerDigits) {
          formatted = isNegative
            ? `-${digits.slice(0, decimalPrecision.integerDigits)}`
            : digits.slice(0, decimalPrecision.integerDigits)
        }
      }

      return formatted
    }, [decimalPrecision])

    const handleKeyDown = (e: React.KeyboardEvent) => {
      const allowedKeys = [
        "Backspace", "Delete", "ArrowLeft", "ArrowRight",
        "Tab", "Home", "End", "-", "+", ".", ",", "0",
        "1", "2", "3", "4", "5", "6", "7", "8", "9"
      ]

      if (!allowedKeys.includes(e.key)) {
        e.preventDefault()
      } else if (valueInput.includes(DECIMAL_SEPARATOR) && (e.key === "." || e.key === ",")) {
        e.preventDefault()
      }
    }

    const handleChange = (e: React.ChangeEvent) => {
      const newValue = formatValue(e.target.value)
      setValueInput(newValue)
      onChange?.(newValue === '' ? null : newValue)
    }

    const cn = (...inputs: ClassValue[]) => {
      return twMerge(clsx(inputs));
    }

    return (
      
    )
  }
)

CustomNumberInput.displayName = "CustomNumberInput"

export { CustomNumberInput }