From fca5af5073ad8fe33b01d7d095815fd345a0def1 Mon Sep 17 00:00:00 2001
From: Joel <iamjoel007@gmail.com>
Date: Tue, 6 Aug 2024 15:25:53 +0800
Subject: [PATCH] feat: max number with slider

---
 .../_base/components/file-upload-setting.tsx  | 22 ++++++-
 .../components/input-number-with-slider.tsx   | 57 +++++++++++++++++++
 web/i18n/en-US/app-debug.ts                   |  2 +
 3 files changed, 79 insertions(+), 2 deletions(-)
 create mode 100644 web/app/components/workflow/nodes/_base/components/input-number-with-slider.tsx

diff --git a/web/app/components/workflow/nodes/_base/components/file-upload-setting.tsx b/web/app/components/workflow/nodes/_base/components/file-upload-setting.tsx
index c657b53f85..095909f3e8 100644
--- a/web/app/components/workflow/nodes/_base/components/file-upload-setting.tsx
+++ b/web/app/components/workflow/nodes/_base/components/file-upload-setting.tsx
@@ -2,10 +2,12 @@
 import type { FC } from 'react'
 import React, { useCallback } from 'react'
 import produce from 'immer'
+import { useTranslation } from 'react-i18next'
 import type { UploadFileSetting } from '../../../types'
 import { SupportUploadFileTypes } from '../../../types'
 import OptionCard from './option-card'
 import FileTypeItem from './file-type-item'
+import InputNumberWithSlider from './input-number-with-slider'
 import Field from '@/app/components/app/configuration/config-var/config-modal/field'
 import { TransferMethod } from '@/types/app'
 
@@ -20,6 +22,8 @@ const FileUploadSetting: FC<Props> = ({
   isMultiple,
   onChange,
 }) => {
+  const { t } = useTranslation()
+
   const {
     uploadMethod,
     maxUploadNumLimit,
@@ -54,6 +58,13 @@ const FileUploadSetting: FC<Props> = ({
     onChange(newPayload)
   }, [onChange, payload])
 
+  const handleMaxUploadNumLimitChange = useCallback((value: number) => {
+    const newPayload = produce(payload, (draft) => {
+      draft.maxUploadNumLimit = value
+    })
+    onChange(newPayload)
+  }, [onChange, payload])
+
   return (
     <div>
       <Field
@@ -103,10 +114,17 @@ const FileUploadSetting: FC<Props> = ({
       </Field>
       {isMultiple && (
         <Field
-          title='Max number of uploads'
+          className='mt-4'
+          title={t('appDebug.variableConig.maxNumberOfUploads')!}
         >
           <div>
-            <span>Max number of uploads</span>
+            <div className='mb-1.5 text-text-tertiary body-xs-regular'>{t('appDebug.variableConig.maxNumberTip')}</div>
+            <InputNumberWithSlider
+              value={maxUploadNumLimit || 1}
+              min={1}
+              max={10}
+              onChange={handleMaxUploadNumLimitChange}
+            />
           </div>
         </Field>
       )}
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
new file mode 100644
index 0000000000..e5d9b35613
--- /dev/null
+++ b/web/app/components/workflow/nodes/_base/components/input-number-with-slider.tsx
@@ -0,0 +1,57 @@
+'use client'
+import type { FC } from 'react'
+import React, { useCallback } from 'react'
+import Slider from '@/app/components/base/slider'
+
+type Props = {
+  value: number
+  defaultValue?: number
+  min?: number
+  max?: number
+  readonly?: boolean
+  onChange: (value: number) => void
+}
+
+const InputNumberWithSlider: FC<Props> = ({
+  value,
+  defaultValue = 0,
+  min,
+  max,
+  readonly,
+  onChange,
+}) => {
+  const handleBlur = useCallback(() => {
+    if (value === undefined || value === null)
+      onChange(defaultValue)
+  }, [defaultValue, onChange, value])
+
+  const handleChange = useCallback((e: React.ChangeEvent<HTMLInputElement>) => {
+    onChange(parseFloat(e.target.value))
+  }, [onChange])
+
+  return (
+    <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'
+        type='number'
+        min={min}
+        max={max}
+        step={1}
+        onChange={handleChange}
+        onBlur={handleBlur}
+        disabled={readonly}
+      />
+      <Slider
+        className='grow'
+        value={value}
+        min={min}
+        max={max}
+        step={1}
+        onChange={onChange}
+        disabled={readonly}
+      />
+    </div>
+  )
+}
+export default React.memo(InputNumberWithSlider)
diff --git a/web/i18n/en-US/app-debug.ts b/web/i18n/en-US/app-debug.ts
index 1e4879e687..7e92acf48c 100644
--- a/web/i18n/en-US/app-debug.ts
+++ b/web/i18n/en-US/app-debug.ts
@@ -343,6 +343,8 @@ const translation = {
         createPlaceholder: 'File extension, e.g .doc',
       },
     },
+    'maxNumberOfUploads': 'Max number of uploads',
+    'maxNumberTip': 'Max 15MB each',
     'errorMsg': {
       varNameRequired: 'Variable name is required',
       labelNameRequired: 'Label name is required',