From 53a3c199ec1f984862d2a87282b4290b6106874e Mon Sep 17 00:00:00 2001
From: Joel <iamjoel007@gmail.com>
Date: Tue, 6 Aug 2024 15:33:38 +0800
Subject: [PATCH] chore: input slider

---
 .../components/input-number-with-slider.tsx   | 14 +++++--
 .../list-filter/components/limit-config.tsx   | 40 ++++---------------
 2 files changed, 19 insertions(+), 35 deletions(-)

diff --git a/web/app/components/workflow/nodes/_base/components/input-number-with-slider.tsx b/web/app/components/workflow/nodes/_base/components/input-number-with-slider.tsx
index e5d9b35613..c64f98093a 100644
--- a/web/app/components/workflow/nodes/_base/components/input-number-with-slider.tsx
+++ b/web/app/components/workflow/nodes/_base/components/input-number-with-slider.tsx
@@ -21,9 +21,17 @@ const InputNumberWithSlider: FC<Props> = ({
   onChange,
 }) => {
   const handleBlur = useCallback(() => {
-    if (value === undefined || value === null)
+    if (value === undefined || value === null) {
       onChange(defaultValue)
-  }, [defaultValue, onChange, value])
+      return
+    }
+    if (max !== undefined && value > max) {
+      onChange(max)
+      return
+    }
+    if (min !== undefined && value < min)
+      onChange(min)
+  }, [defaultValue, max, min, onChange, value])
 
   const handleChange = useCallback((e: React.ChangeEvent<HTMLInputElement>) => {
     onChange(parseFloat(e.target.value))
@@ -33,7 +41,7 @@ const InputNumberWithSlider: FC<Props> = ({
     <div className='flex justify-between items-center h-8 space-x-2'>
       <input
         value={value}
-        className='shrink-0 block pl-3 w-12 h-8 appearance-none outline-none rounded-lg bg-gray-100 text-[13px] text-gra-900'
+        className='shrink-0 block pl-3 w-12 h-8 appearance-none outline-none rounded-lg bg-components-input-bg-normal text-[13px] text-components-input-text-filled'
         type='number'
         min={min}
         max={max}
diff --git a/web/app/components/workflow/nodes/list-filter/components/limit-config.tsx b/web/app/components/workflow/nodes/list-filter/components/limit-config.tsx
index 10a5493f6a..f245e07c12 100644
--- a/web/app/components/workflow/nodes/list-filter/components/limit-config.tsx
+++ b/web/app/components/workflow/nodes/list-filter/components/limit-config.tsx
@@ -3,10 +3,10 @@ import type { FC } from 'react'
 import React, { useCallback } from 'react'
 import { useTranslation } from 'react-i18next'
 import type { Limit } from '../types'
+import InputNumberWithSlider from '../../_base/components/input-number-with-slider'
 import cn from '@/utils/classnames'
 import Field from '@/app/components/workflow/nodes/_base/components/field'
 import Switch from '@/app/components/base/switch'
-import Slider from '@/app/components/base/slider'
 
 const i18nPrefix = 'workflow.nodes.listFilter'
 const LIMIT_SIZE_MIN = 1
@@ -49,15 +49,6 @@ const LimitConfig: FC<Props> = ({
     })
   }, [onChange, config])
 
-  const handleBlur = useCallback(() => {
-    const payload = config
-    if (!payload)
-      return
-
-    if (payload.size === undefined || payload.size === null)
-      handleLimitSizeChange(LIMIT_SIZE_DEFAULT)
-  }, [handleLimitSizeChange, config])
-
   return (
     <div className={cn(className)}>
       <Field
@@ -73,28 +64,13 @@ const LimitConfig: FC<Props> = ({
       >
         {payload?.enabled
           ? (
-            <div className='flex justify-between items-center h-8 space-x-2'>
-              <input
-                value={(payload?.size || LIMIT_SIZE_DEFAULT) as number}
-                className='shrink-0 block pl-3 w-12 h-8 appearance-none outline-none rounded-lg bg-gray-100 text-[13px] text-gra-900'
-                type='number'
-                min={LIMIT_SIZE_MIN}
-                max={LIMIT_SIZE_MAX}
-                step={1}
-                onChange={e => handleLimitSizeChange(e.target.value)}
-                onBlur={handleBlur}
-                disabled={readonly || !payload?.enabled}
-              />
-              <Slider
-                className='grow'
-                value={(payload?.size || LIMIT_SIZE_DEFAULT) as number}
-                min={LIMIT_SIZE_MIN}
-                max={LIMIT_SIZE_MAX}
-                step={1}
-                onChange={handleLimitSizeChange}
-                disabled={readonly || !payload?.enabled}
-              />
-            </div>
+            <InputNumberWithSlider
+              value={payload?.size || LIMIT_SIZE_DEFAULT}
+              min={LIMIT_SIZE_MIN}
+              max={LIMIT_SIZE_MAX}
+              onChange={handleLimitSizeChange}
+              readonly={readonly || !payload?.enabled}
+            />
           )
           : null}
       </Field>