Merge pull request #99 from dev-family/ADM-177

ADM-177; (Feat) Connect onChange in Form inputs
dev-family · Sep 28, 2023 · 3c75514 · 3c75514
2 parents 76ccc1b + 026bcf8
commit 3c75514
Show file tree

Hide file tree

Showing 13 changed files with 130 additions and 55 deletions.
diff --git a/admiral/form/fields/AjaxSelectInput.tsx b/admiral/form/fields/AjaxSelectInput.tsx
@@ -43,10 +43,13 @@ export const AjaxSelectInput: InputComponentWithName<React.FC<AjaxSelectInputPro
         if (Array.isArray(optionsByName) && !fetched.current) setOptions(optionsByName)
     }, [optionsByName])
 
-    const _onChange = useCallback((value) => {
-        setValues((values: any) => ({ ...values, [name]: value }))
-        if (onChange) onChange(value)
-    }, [])
+    const _onChange = useCallback(
+        (value) => {
+            setValues((values: any) => ({ ...values, [name]: value }))
+            if (onChange) onChange(value)
+        },
+        [onChange],
+    )
 
     const fetchResults = async (query = '') => {
         setLoading(true)

diff --git a/admiral/form/fields/BooleanInput.tsx b/admiral/form/fields/BooleanInput.tsx
@@ -8,26 +8,32 @@ import { InputComponentWithName } from '../interfaces'
 
 export interface BooleanInputProps extends SwitchProps, FormItemProps {
     name: string
+    onChange?: (value: boolean) => void
 }
 
 export const BooleanInput: InputComponentWithName<React.FC<BooleanInputProps>> = ({
     name,
     label,
     required,
     columnSpan,
+    onChange,
     ...switchProps
 }) => {
     const { values, errors, setValues } = useForm()
     const checked = values[name]
     const error = errors[name]?.[0]
 
-    const onChange = useCallback((checked) => {
-        setValues((values: any) => ({ ...values, [name]: checked }))
-    }, [])
+    const _onChange = useCallback(
+        (checked: boolean) => {
+            setValues((values: any) => ({ ...values, [name]: checked }))
+            onChange?.(checked)
+        },
+        [onChange],
+    )
 
     return (
         <Form.Item label={label} required={required} error={error} columnSpan={columnSpan}>
-            <Switch {...switchProps} checked={checked} onChange={onChange} />
+            <Switch {...switchProps} checked={checked} onChange={_onChange} />
         </Form.Item>
     )
 }

diff --git a/admiral/form/fields/ColorPickerInput.tsx b/admiral/form/fields/ColorPickerInput.tsx
@@ -10,6 +10,7 @@ import { usePopupContainer } from '../../crud/PopupContainerContext'
 export interface ColorPickerInputProps extends ColorPickerProps, FormItemProps {
     name: string
     outputValue?: keyof ColorPickerResult
+    onChange?: (value: any) => void
 }
 
 export const ColorPickerInput: InputComponentWithName<React.FC<ColorPickerInputProps>> = ({
@@ -19,16 +20,21 @@ export const ColorPickerInput: InputComponentWithName<React.FC<ColorPickerInputP
     columnSpan,
     showError,
     outputValue = 'rgbString',
+    onChange,
     ...colorPickerProps
 }) => {
     const getPopupContainer = usePopupContainer()
     const { values, errors, setValues } = useForm()
     const value = values[name]
     const error = errors[name]?.[0]
 
-    const onChange = useCallback((value: ColorPickerResult) => {
-        setValues((values: any) => ({ ...values, [name]: value[outputValue] }))
-    }, [])
+    const _onChange = useCallback(
+        (value: ColorPickerResult) => {
+            setValues((values: any) => ({ ...values, [name]: value[outputValue] }))
+            onChange?.(value[outputValue])
+        },
+        [onChange],
+    )
 
     // prevent reopen when close picker by clicking on label
     const onLabelClick = useCallback((e) => {
@@ -48,7 +54,7 @@ export const ColorPickerInput: InputComponentWithName<React.FC<ColorPickerInputP
                 appendTo={getPopupContainer}
                 {...colorPickerProps}
                 value={value}
-                onChange={onChange}
+                onChange={_onChange}
                 alert={!!error}
             />
         </Form.Item>

diff --git a/admiral/form/fields/DatePickerInput.tsx b/admiral/form/fields/DatePickerInput.tsx
@@ -10,13 +10,15 @@ import { usePopupContainer } from '../../crud/PopupContainerContext'
 
 export type DatePickerInputProps = FormItemProps & {
     name: string
+    onChange?: (value: any) => void
 } & PickerProps<Date>
 
 export const DatePickerInput: InputComponentWithName<React.FC<DatePickerInputProps>> = ({
     name,
     label,
     required,
     columnSpan,
+    onChange,
     ...pickerProps
 }) => {
     const getPopupContainer = usePopupContainer()
@@ -26,9 +28,13 @@ export const DatePickerInput: InputComponentWithName<React.FC<DatePickerInputPro
     let value = values[name] ? parseISO(values[name]) : null
     const error = errors[name]?.[0]
 
-    const onChange = useCallback((value: Date | null) => {
-        setValues((values: any) => ({ ...values, [name]: value?.toISOString() }))
-    }, [])
+    const _onChange = useCallback(
+        (value: Date | null) => {
+            setValues((values: any) => ({ ...values, [name]: value?.toISOString() }))
+            onChange?.(value?.toISOString())
+        },
+        [onChange],
+    )
 
     return (
         <Form.Item label={label} required={required} error={error} columnSpan={columnSpan}>
@@ -37,7 +43,7 @@ export const DatePickerInput: InputComponentWithName<React.FC<DatePickerInputPro
                 locale={locale}
                 {...pickerProps}
                 value={value}
-                onChange={onChange}
+                onChange={_onChange}
                 alert={!!error}
             />
         </Form.Item>

diff --git a/admiral/form/fields/DraggerInput.tsx b/admiral/form/fields/DraggerInput.tsx
@@ -8,6 +8,7 @@ import { InputComponentWithName } from '../interfaces'
 
 export type DraggerInputProps = FormItemProps & {
     name: string
+    onChange?: (value: any) => void
 } & UploadProps
 
 export const DraggerInput: InputComponentWithName<React.FC<DraggerInputProps>> = ({
@@ -17,6 +18,7 @@ export const DraggerInput: InputComponentWithName<React.FC<DraggerInputProps>> =
     columnSpan,
     children,
     disabled,
+    onChange,
     ...uploadProps
 }) => {
     const { values, errors, setValues, locale: formLocale } = useForm()
@@ -27,10 +29,14 @@ export const DraggerInput: InputComponentWithName<React.FC<DraggerInputProps>> =
 
     const error = errors[name]?.[0]
 
-    const onChange = useCallback(({ fileList }) => {
-        const files = fileList ?? []
-        setValues((values: any) => ({ ...values, [name]: files }))
-    }, [])
+    const _onChange = useCallback(
+        ({ fileList }) => {
+            const files = fileList ?? []
+            setValues((values: any) => ({ ...values, [name]: files }))
+            onChange?.(files)
+        },
+        [onChange],
+    )
 
     const onLabelClick = useCallback((e) => {
         e?.preventDefault()
@@ -48,7 +54,7 @@ export const DraggerInput: InputComponentWithName<React.FC<DraggerInputProps>> =
                 {...uploadProps}
                 locale={locale}
                 fileList={arrayValue}
-                onChange={onChange}
+                onChange={_onChange}
             />
         </Form.Item>
     )

diff --git a/admiral/form/fields/EditorInput.tsx b/admiral/form/fields/EditorInput.tsx
@@ -8,13 +8,15 @@ import { InputComponentWithName } from '../interfaces'
 
 export interface EditorInputProps extends EditorProps, FormItemProps {
     name: string
+    onChange?: (value: any) => void
 }
 
 export const EditorInput: InputComponentWithName<React.FC<EditorInputProps>> = ({
     name,
     label,
     required,
     columnSpan,
+    onChange,
     ...editorProps
 }) => {
     const { values, errors, setValues, locale: formLocale } = useForm()
@@ -23,17 +25,21 @@ export const EditorInput: InputComponentWithName<React.FC<EditorInputProps>> = (
     const value = values[name]
     const error = errors[name]?.[0]
 
-    const onChange = useCallback((value: string) => {
-        setValues((values: any) => ({ ...values, [name]: value }))
-    }, [])
+    const _onChange = useCallback(
+        (value: string) => {
+            setValues((values: any) => ({ ...values, [name]: value }))
+            onChange?.(value)
+        },
+        [onChange],
+    )
 
     return (
         <Form.Item label={label} required={required} error={error} columnSpan={columnSpan}>
             <Editor
                 {...editorProps}
                 value={value}
                 locale={locale}
-                onChange={onChange}
+                onChange={_onChange}
                 alert={!!error}
             />
         </Form.Item>

diff --git a/admiral/form/fields/MultilineTextInput.tsx b/admiral/form/fields/MultilineTextInput.tsx
@@ -8,30 +8,36 @@ import { InputComponentWithName } from '../interfaces'
 
 export interface MultilineTextInputProps extends TextareaProps, FormItemProps {
     name: string
+    onChange?: (value: any) => void
 }
 
 export const MultilineTextInput: InputComponentWithName<React.FC<MultilineTextInputProps>> = ({
     name,
     label,
     required,
     columnSpan,
+    onChange,
     ...textareaProps
 }) => {
     const { values, errors, setValues } = useForm()
     const value = values[name]
     const error = errors[name]?.[0]
 
-    const onChange = useCallback((e) => {
-        setValues((values: any) => ({ ...values, [name]: e.target.value }))
-    }, [])
+    const _onChange = useCallback(
+        (e) => {
+            setValues((values: any) => ({ ...values, [name]: e.target.value }))
+            onChange?.(e.target.value)
+        },
+        [onChange],
+    )
 
     return (
         <Form.Item label={label} required={required} error={error} columnSpan={columnSpan}>
             <Textarea
                 {...textareaProps}
                 name={name}
                 value={value}
-                onChange={onChange}
+                onChange={_onChange}
                 alert={!!error}
             />
         </Form.Item>

diff --git a/admiral/form/fields/PasswordInput.tsx b/admiral/form/fields/PasswordInput.tsx
@@ -8,22 +8,28 @@ import { InputComponentWithName } from '../interfaces'
 
 export interface PasswordInputProps extends InputProps, FormItemProps {
     name: string
+    onChange?: (value: any) => void
 }
 
 export const PasswordInput: InputComponentWithName<React.FC<PasswordInputProps>> = ({
     name,
     label,
     required,
     columnSpan,
+    onChange,
     ...inputProps
 }) => {
     const { values, errors, setValues } = useForm()
     const value = values[name]
     const error = errors[name]?.[0]
 
-    const onChange = useCallback((e) => {
-        setValues((values: any) => ({ ...values, [name]: e.target.value }))
-    }, [])
+    const _onChange = useCallback(
+        (e) => {
+            setValues((values: any) => ({ ...values, [name]: e.target.value }))
+            onChange?.(e.target.value)
+        },
+        [onChange],
+    )
 
     return (
         <Form.Item label={label} required={required} error={error} columnSpan={columnSpan}>
@@ -32,7 +38,7 @@ export const PasswordInput: InputComponentWithName<React.FC<PasswordInputProps>>
                 {...inputProps}
                 name={name}
                 value={value}
-                onChange={onChange}
+                onChange={_onChange}
                 alert={!!error}
             />
         </Form.Item>

diff --git a/admiral/form/fields/RadioInput.tsx b/admiral/form/fields/RadioInput.tsx
@@ -8,23 +8,29 @@ import { InputComponentWithName } from '../interfaces'
 
 export interface RadioInputProps extends RadioGroupProps, FormItemProps {
     name: string
+    onChange?: (value: any) => void
 }
 
 export const RadioInput: InputComponentWithName<React.FC<RadioInputProps>> = ({
     name,
     label,
     required,
     columnSpan,
+    onChange,
     ...inputProps
 }) => {
     const { values, errors, options, setValues } = useForm()
     const value = values[name]
     const error = errors[name]?.[0]
     const opts = options[name]
 
-    const onChange = useCallback((e) => {
-        setValues((values: any) => ({ ...values, [name]: e.target.value }))
-    }, [])
+    const _onChange = useCallback(
+        (e) => {
+            setValues((values: any) => ({ ...values, [name]: e.target.value }))
+            onChange?.(e.target.value)
+        },
+        [onChange],
+    )
 
     return (
         <Form.Item label={label} required={required} error={error} columnSpan={columnSpan}>
@@ -33,7 +39,7 @@ export const RadioInput: InputComponentWithName<React.FC<RadioInputProps>> = ({
                 {...inputProps}
                 name={name}
                 value={value}
-                onChange={onChange}
+                onChange={_onChange}
             />
         </Form.Item>
     )

diff --git a/admiral/form/fields/SelectInput.tsx b/admiral/form/fields/SelectInput.tsx
@@ -11,6 +11,7 @@ const { OptGroup, Option } = Select
 
 export interface SelectInputProps extends SelectProps, FormItemProps {
     name: string
+    onChange?: (value: any) => void
 }
 
 const InternalSelectInput: InputComponentWithName<React.FC<SelectInputProps>> = ({
@@ -19,6 +20,7 @@ const InternalSelectInput: InputComponentWithName<React.FC<SelectInputProps>> =
     required = false,
     columnSpan,
     children,
+    onChange,
     ...selectProps
 }) => {
     const getPopupContainer = usePopupContainer()
@@ -29,9 +31,13 @@ const InternalSelectInput: InputComponentWithName<React.FC<SelectInputProps>> =
     const error = errors[name]?.[0]
     const opts = options[name]
 
-    const onChange = useCallback((value) => {
-        setValues((values: any) => ({ ...values, [name]: value }))
-    }, [])
+    const _onChange = useCallback(
+        (value) => {
+            setValues((values: any) => ({ ...values, [name]: value }))
+            onChange?.(value)
+        },
+        [onChange],
+    )
 
     const renderChildren = useCallback(() => {
         if (children) return children
@@ -56,7 +62,7 @@ const InternalSelectInput: InputComponentWithName<React.FC<SelectInputProps>> =
                 {...selectProps}
                 locale={locale}
                 value={value}
-                onChange={onChange}
+                onChange={_onChange}
                 alert={!!error}
             >
                 {renderChildren()}