feat: oauth config init

web/app/components/base/form/components/base/base-field.tsx

@@ -15,6 +15,17 @@ import { useRenderI18nObject } from '@/hooks/use-i18n'
 import Radio from '@/app/components/base/radio'
 import RadioE from '@/app/components/base/radio/ui'
 
+const getInputType = (type: FormTypeEnum) => {
+  switch (type) {
+    case FormTypeEnum.secretInput:
+      return 'password'
+    case FormTypeEnum.textNumber:
+      return 'number'
+    default:
+      return 'text'
+  }
+}
+
 export type BaseFieldProps = {
   fieldClassName?: string
   labelClassName?: string
@@ -24,6 +35,7 @@ export type BaseFieldProps = {
   field: AnyFieldApi
   disabled?: boolean
 }
+
 const BaseField = ({
   fieldClassName,
   labelClassName,
@@ -42,19 +54,19 @@ const BaseField = ({
     labelClassName: formLabelClassName,
     show_on = [],
     disabled: formSchemaDisabled,
+    showRadioUI,
+    type: formItemType,
   } = formSchema
   const disabled = propsDisabled || formSchemaDisabled
 
   const memorizedLabel = useMemo(() => {
-    if (isValidElement(label))
-      return label
-
-    if (typeof label === 'string')
+    if (isValidElement(label) || typeof label === 'string')
       return label
 
     if (typeof label === 'object' && label !== null)
       return renderI18nObject(label as Record<string, string>)
   }, [label, renderI18nObject])
+
   const memorizedPlaceholder = useMemo(() => {
     if (typeof placeholder === 'string')
       return placeholder
@@ -62,25 +74,36 @@ const BaseField = ({
     if (typeof placeholder === 'object' && placeholder !== null)
       return renderI18nObject(placeholder as Record<string, string>)
   }, [placeholder, renderI18nObject])
-  const optionValues = useStore(field.form.store, (s) => {
+
+  const watchedVariables = useMemo(() => {
+    const variables = new Set<string>()
+
+    for (const option of options || []) {
+      for (const condition of option.show_on || [])
+        variables.add(condition.variable)
+    }
+
+    for (const condition of show_on || [])
+      variables.add(condition.variable)
+
+    return Array.from(variables)
+  }, [options, show_on])
+
+  const watchedValues = useStore(field.form.store, (s) => {
     const result: Record<string, any> = {}
-    options?.forEach((option) => {
-      if (option.show_on?.length) {
-        option.show_on.forEach((condition) => {
-          result[condition.variable] = s.values[condition.variable]
-        })
-      }
-    })
+    for (const variable of watchedVariables)
+      result[variable] = s.values[variable]
+
     return result
   })
+
   const memorizedOptions = useMemo(() => {
     return options?.filter((option) => {
-      if (!option.show_on || option.show_on.length === 0)
+      if (!option.show_on?.length)
         return true
 
       return option.show_on.every((condition) => {
-        const conditionValue = optionValues[condition.variable]
-        return conditionValue === condition.value
+        return watchedValues[condition.variable] === condition.value
       })
     }).map((option) => {
       return {
@@ -88,20 +111,15 @@ const BaseField = ({
         value: option.value,
       }
     }) || []
-  }, [options, renderI18nObject, optionValues])
+  }, [options, renderI18nObject, watchedValues])
+
   const value = useStore(field.form.store, s => s.values[field.name])
-  const values = useStore(field.form.store, (s) => {
-    return show_on.reduce((acc, condition) => {
-      acc[condition.variable] = s.values[condition.variable]
-      return acc
-    }, {} as Record<string, any>)
-  })
+
   const show = useMemo(() => {
     return show_on.every((condition) => {
-      const conditionValue = values[condition.variable]
-      return conditionValue === condition.value
+      return watchedValues[condition.variable] === condition.value
     })
-  }, [values, show_on])
+  }, [watchedValues, show_on])
 
   const booleanRadioValue = useMemo(() => {
     if (value === null || value === undefined)
@@ -124,7 +142,7 @@ const BaseField = ({
       </div>
       <div className={cn(inputContainerClassName)}>
         {
-          formSchema.type === FormTypeEnum.textInput && (
+          [FormTypeEnum.textInput, FormTypeEnum.secretInput, FormTypeEnum.textNumber].includes(formItemType) && (
             <Input
               id={field.name}
               name={field.name}
@@ -134,41 +152,12 @@ const BaseField = ({
               onBlur={field.handleBlur}
               disabled={disabled}
               placeholder={memorizedPlaceholder}
+              type={getInputType(formItemType)}
             />
           )
         }
         {
-          formSchema.type === FormTypeEnum.secretInput && (
-            <Input
-              id={field.name}
-              name={field.name}
-              type='password'
-              className={cn(inputClassName)}
-              value={value || ''}
-              onChange={e => field.handleChange(e.target.value)}
-              onBlur={field.handleBlur}
-              disabled={disabled}
-              placeholder={memorizedPlaceholder}
-            />
-          )
-        }
-        {
-          formSchema.type === FormTypeEnum.textNumber && (
-            <Input
-              id={field.name}
-              name={field.name}
-              type='number'
-              className={cn(inputClassName)}
-              value={value || ''}
-              onChange={e => field.handleChange(e.target.value)}
-              onBlur={field.handleBlur}
-              disabled={disabled}
-              placeholder={memorizedPlaceholder}
-            />
-          )
-        }
-        {
-          formSchema.type === FormTypeEnum.select && (
+          formItemType === FormTypeEnum.select && (
             <PureSelect
               value={value}
               onChange={v => field.handleChange(v)}
@@ -180,7 +169,7 @@ const BaseField = ({
           )
         }
         {
-          formSchema.type === FormTypeEnum.radio && (
+          formItemType === FormTypeEnum.radio && (
             <div className={cn(
               memorizedOptions.length < 3 ? 'flex items-center space-x-2' : 'space-y-2',
             )}>
@@ -189,21 +178,14 @@ const BaseField = ({
                   <div
                     key={option.value}
                     className={cn(
-                      'system-sm-regular hover:bg-components-option-card-option-hover-bg hover:border-components-option-card-option-hover-border flex h-8 flex-[1] grow cursor-pointer items-center justify-center rounded-lg border border-components-option-card-option-border bg-components-option-card-option-bg p-2 text-text-secondary',
+                      'system-sm-regular hover:bg-components-option-card-option-hover-bg hover:border-components-option-card-option-hover-border flex h-8 flex-[1] grow cursor-pointer items-center justify-center gap-2 rounded-lg border border-components-option-card-option-border bg-components-option-card-option-bg p-2 text-text-secondary',
                       value === option.value && 'border-components-option-card-option-selected-border bg-components-option-card-option-selected-bg text-text-primary shadow-xs',
                       disabled && 'cursor-not-allowed opacity-50',
                       inputClassName,
                     )}
                     onClick={() => !disabled && field.handleChange(option.value)}
                   >
-                    {
-                      formSchema.showRadioUI && (
-                        <RadioE
-                          className='mr-2'
-                          isChecked={value === option.value}
-                        />
-                      )
-                    }
+                    {showRadioUI && <RadioE isChecked={value === option.value} />}
                     {option.label}
                   </div>
                 ))
@@ -212,13 +194,13 @@ const BaseField = ({
           )
         }
         {
-          formSchema.type === FormTypeEnum.boolean && (
+          formItemType === FormTypeEnum.boolean && (
             <Radio.Group
-              className='flex w-fit items-center'
+              className='flex w-fit items-center gap-1'
               value={booleanRadioValue}
               onChange={val => field.handleChange(val === 1)}
             >
-              <Radio value={1} className='!mr-1'>True</Radio>
+              <Radio value={1}>True</Radio>
               <Radio value={0}>False</Radio>
             </Radio.Group>
           )
@@ -233,9 +215,7 @@ const BaseField = ({
               <span className='break-all'>
                 {renderI18nObject(formSchema?.help as any)}
               </span>
-              {
-                <RiExternalLinkLine className='ml-1 h-3 w-3' />
-              }
+              <RiExternalLinkLine className='ml-1 h-3 w-3' />
             </a>
           )
         }