wip

lama_cleaner/app/src/components/shared/NumberInput.tsx

@@ -1,31 +1,44 @@
-import React, { FormEvent, InputHTMLAttributes } from 'react'
+import React, { FormEvent, InputHTMLAttributes, useState } from 'react'
+import TextInput from './Input'
 
 interface NumberInputProps extends InputHTMLAttributes<HTMLInputElement> {
   value: string
+  allowFloat?: boolean
   onValue?: (val: string) => void
 }
 
 const NumberInput = React.forwardRef<HTMLInputElement, NumberInputProps>(
   (props: NumberInputProps, forwardedRef) => {
-    const { value, onValue, ...itemProps } = props
+    const { value, allowFloat, onValue, ...itemProps } = props
+    const [innerValue, setInnerValue] = useState(value)
 
     const handleOnInput = (evt: FormEvent<HTMLInputElement>) => {
       const target = evt.target as HTMLInputElement
-      const val = target.value.replace(/\D/g, '')
-      onValue?.(val)
+      let val = target.value
+      if (allowFloat) {
+        val = val.replace(/[^0-9.]/g, '').replace(/(\..*?)\..*/g, '$1')
+        onValue?.(val)
+      } else {
+        val = val.replace(/\D/g, '')
+        onValue?.(val)
+      }
+      setInnerValue(val)
     }
 
     return (
-      <input
-        value={value}
+      <TextInput
+        value={innerValue}
         onInput={handleOnInput}
         className="number-input"
         {...itemProps}
         ref={forwardedRef}
-        type="text"
       />
     )
   }
 )
 
+NumberInput.defaultProps = {
+  allowFloat: false,
+}
+
 export default NumberInput