From 1843f6ccb60d50a6c5edbbe6fe5b3f92e933d2fd Mon Sep 17 00:00:00 2001
From: AkaraChen <akarachen@outlook.com>
Date: Tue, 26 Nov 2024 15:29:31 +0800
Subject: [PATCH] refactor: input number component

---
 web/app/components/base/input-number/index.tsx     | 14 ++++++--------
 web/app/components/base/param-item/index.tsx       |  4 +---
 .../components/datasets/create/step-two/index.tsx  |  9 ++++-----
 3 files changed, 11 insertions(+), 16 deletions(-)

diff --git a/web/app/components/base/input-number/index.tsx b/web/app/components/base/input-number/index.tsx
index 222686a0a8..e9792f48ef 100644
--- a/web/app/components/base/input-number/index.tsx
+++ b/web/app/components/base/input-number/index.tsx
@@ -1,4 +1,3 @@
-import { useState } from 'react'
 import type { FC, SetStateAction } from 'react'
 import { RiArrowDownSLine, RiArrowUpSLine } from '@remixicon/react'
 import Input, { type InputProps } from '../input'
@@ -6,35 +5,34 @@ import classNames from '@/utils/classnames'
 
 export type InputNumberProps = {
   unit?: string
+  value: number
   onChange: (value: number) => void
   amount?: number
   size?: 'sm' | 'md'
 } & Omit<InputProps, 'value' | 'onChange' | 'size'>
 
 export const InputNumber: FC<InputNumberProps> = (props) => {
-  const { unit, className, onChange, defaultValue = 0, amount = 1, size = 'sm', max, min, ...rest } = props
-  const [val, setVal] = useState<number>(defaultValue as number)
-  const update = (value: SetStateAction<number>) => {
-    const current = typeof value === 'function' ? value(val) : value as number
+  const { unit, className, onChange, amount = 1, value, size = 'sm', max, min, ...rest } = props
+  const update = (input: SetStateAction<number>) => {
+    const current = typeof input === 'function' ? input(value) : input as number
     if (max && current >= (max as number))
       return
     if (min && current <= (min as number))
       return
-    setVal(value)
+    onChange(current)
   }
   const inc = () => update(val => val + amount)
   const dec = () => update(val => val - amount)
   return <div className='flex'>
     <Input {...rest}
       className={classNames('rounded-r-none', className)}
-      value={val}
+      value={value}
       max={max}
       min={min}
       onChange={(e) => {
         const parsed = Number(e.target.value)
         if (Number.isNaN(parsed))
           return
-        setVal(parsed)
         onChange(parsed)
       }}
     />
diff --git a/web/app/components/base/param-item/index.tsx b/web/app/components/base/param-item/index.tsx
index bd18d35ebc..771893b6a1 100644
--- a/web/app/components/base/param-item/index.tsx
+++ b/web/app/components/base/param-item/index.tsx
@@ -55,10 +55,8 @@ const ParamItem: FC<Props> = ({ className, id, name, noTooltip, tip, step = 0.1,
             max={max}
             step={step}
             size='sm'
+            value={value}
             onChange={(value) => {
-              if (value < min || value > max)
-                return
-
               onChange(id, value)
             }}
           />
diff --git a/web/app/components/datasets/create/step-two/index.tsx b/web/app/components/datasets/create/step-two/index.tsx
index fb2c47ca89..f42261b348 100644
--- a/web/app/components/datasets/create/step-two/index.tsx
+++ b/web/app/components/datasets/create/step-two/index.tsx
@@ -672,11 +672,11 @@ const StepTwo = ({
                       onChange={e => setSegmentIdentifier(e.target.value)}
                     />
                     <MaxLengthInput
-                      defaultValue={max}
+                      value={max}
                       onChange={setMax}
                     />
                     <OverlapInput
-                      defaultValue={overlap}
+                      value={overlap}
                       min={1}
                       onChange={setOverlap}
                     />
@@ -749,7 +749,7 @@ const StepTwo = ({
                             })}
                           />
                           <MaxLengthInput
-                            defaultValue={parentChildConfig.parent.maxLength}
+                            value={parentChildConfig.parent.maxLength}
                             onChange={value => setParentChildConfig({
                               ...parentChildConfig,
                               parent: {
@@ -791,8 +791,7 @@ const StepTwo = ({
                         })}
                       />
                       <MaxLengthInput
-                        defaultValue={parentChildConfig.child.maxLength}
-
+                        value={parentChildConfig.child.maxLength}
                         onChange={value => setParentChildConfig({
                           ...parentChildConfig,
                           child: {