Merge pull request #71 from DouglasNeuroInformatics/dynamic-field-change

feat: add new subscribe option for form

Author: joshunrau

src/components/Form/Form.stories.tsx

@@ -1,8 +1,8 @@
 /* eslint-disable perfectionist/sort-objects */
 
-import { useEffect, useState } from 'react';
+import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
 
-import { sleep } from '@douglasneuroinformatics/libjs';
+import { filterObject, sleep } from '@douglasneuroinformatics/libjs';
 import type { ZodTypeLike } from '@douglasneuroinformatics/libjs';
 import type { FormFields } from '@douglasneuroinformatics/libui-form-types';
 import type FormTypes from '@douglasneuroinformatics/libui-form-types';
@@ -535,6 +535,86 @@ export const WithSuspend: StoryObj<typeof Form<ZodTypeLike<FormTypes.Data>, { de
   }
 };
 
+export const WithSubscribe: StoryObj<
+  typeof Form<ZodTypeLike<FormTypes.Data>, { options: string; searchTerm: string }>
+> = {
+  decorators: [
+    (Story) => {
+      const defaultOptions = useMemo<{ [key: string]: string }>(
+        () => ({
+          a: 'Option A',
+          b: 'Option B',
+          c: 'Option C',
+          d: 'Option D'
+        }),
+        []
+      );
+      const timeoutRef = useRef<ReturnType<typeof setTimeout> | undefined>(undefined);
+      const [options, setOptions] = useState<typeof defaultOptions>(defaultOptions);
+
+      const handleChange = useCallback(
+        (
+          values: Partial<{ options: string; searchTerm: string }>,
+          setValues: React.Dispatch<React.SetStateAction<Partial<{ options: string; searchTerm: string }>>>
+        ) => {
+          clearTimeout(timeoutRef.current);
+          const lowerCaseSearch = values.searchTerm?.toLowerCase();
+          if (!lowerCaseSearch) {
+            setOptions(defaultOptions);
+            return;
+          }
+          timeoutRef.current = setTimeout(() => {
+            const updatedOptions = filterObject(defaultOptions, (value) =>
+              value.toLowerCase().includes(lowerCaseSearch)
+            ) as {
+              [key: string]: string;
+            };
+            setOptions(updatedOptions);
+            if (values.options !== undefined && !Object.keys(updatedOptions).includes(values.options)) {
+              setValues((prevValues) => ({
+                ...prevValues,
+                options: undefined
+              }));
+            }
+          }, 500);
+        },
+        []
+      );
+
+      return (
+        <Story
+          args={{
+            content: {
+              searchTerm: {
+                kind: 'string',
+                label: 'Search Term',
+                variant: 'input'
+              },
+              options: {
+                kind: 'string',
+                label: 'Options',
+                options,
+                variant: 'select'
+              }
+            },
+            subscribe: {
+              onChange: handleChange,
+              selector: (values) => values.searchTerm
+            },
+            onSubmit: (data) => {
+              alert(JSON.stringify(data, (_key, value) => (value instanceof Set ? [...value] : (value as unknown)), 2));
+            },
+            validationSchema: z.object({
+              searchTerm: z.string().min(1),
+              options: z.enum(['a', 'b', 'c', 'd'])
+            })
+          }}
+        />
+      );
+    }
+  ]
+};
+
 export const WithError: StoryObj<typeof Form> = {
   args: {
     content: {

src/components/Form/Form.tsx

@@ -47,10 +47,18 @@ type FormProps<TSchema extends ZodTypeLike<FormDataType>, TData extends TSchema[
   onError?: (error: ZodErrorLike) => void;
   onSubmit: FormSubmitHandler<NoInfer<TData>>;
   preventResetValuesOnReset?: boolean;
+
   readOnly?: boolean;
   resetBtn?: boolean;
   revalidateOnBlur?: boolean;
   submitBtnLabel?: string;
+  subscribe?: {
+    onChange: (
+      values: PartialFormDataType<TData>,
+      setValues: React.Dispatch<React.SetStateAction<PartialFormDataType<TData>>>
+    ) => Promisable<void>;
+    selector: (values: PartialFormDataType<TData>) => unknown;
+  };
   suspendWhileSubmitting?: boolean;
   validationSchema: ZodTypeLike<TData>;
 };
@@ -71,6 +79,7 @@ const Form = <TSchema extends ZodTypeLike<FormDataType>, TData extends TSchema['
   resetBtn,
   revalidateOnBlur,
   submitBtnLabel,
+  subscribe,
   suspendWhileSubmitting,
   validationSchema,
   ...props
@@ -105,6 +114,13 @@ const Form = <TSchema extends ZodTypeLike<FormDataType>, TData extends TSchema['
     }
   };
 
+  useEffect(() => {
+    if (!subscribe) {
+      return;
+    }
+    subscribe.onChange(values, setValues);
+  }, [subscribe?.selector(values)]);
+
   const reset = () => {
     setRootErrors([]);
     setErrors({});