fix: formik updateField

iib0011 · Jun 27, 2024 · ac63c0e · ac63c0e
1 parent da93452
commit ac63c0e
Show file tree

Hide file tree

Showing 10 changed files with 89 additions and 58 deletions.
diff --git a/.idea/workspace.xml b/.idea/workspace.xml
diff --git a/src/components/options/ToolOptions.tsx b/src/components/options/ToolOptions.tsx
@@ -30,6 +30,43 @@ const FormikListenerComponent = <T,>({
 
   return null; // This component doesn't render anything
 };
+
+interface FormikHelperProps<T> {
+  compute: (optionsValues: T, input: any) => void;
+  input: any;
+  children?: ReactNode;
+  getGroups: (
+    formikProps: FormikProps<T> & { updateField: UpdateField<T> }
+  ) => ToolOptionGroup[];
+  formikProps: FormikProps<T>;
+}
+
+const ToolBody = <T,>({
+  compute,
+  input,
+  children,
+  getGroups,
+  formikProps
+}: FormikHelperProps<T>) => {
+  const { values, setFieldValue } = useFormikContext<T>();
+
+  const updateField: UpdateField<T> = (field, value) => {
+    // @ts-ignore
+    setFieldValue(field, value);
+  };
+
+  return (
+    <Stack direction={'row'} spacing={2}>
+      <FormikListenerComponent<T>
+        compute={compute}
+        input={input}
+        initialValues={values}
+      />
+      <ToolOptionGroups groups={getGroups({ ...formikProps, updateField })} />
+      {children}
+    </Stack>
+  );
+};
 export default function ToolOptions<T extends FormikValues>({
   children,
   initialValues,
@@ -50,10 +87,6 @@ export default function ToolOptions<T extends FormikValues>({
   formRef?: RefObject<FormikProps<T>>;
 }) {
   const theme = useTheme();
-  const updateField: UpdateField<T> = (field, value) => {
-    // @ts-ignore
-    formRef?.current?.setFieldValue(field, value);
-  };
   return (
     <Box
       sx={{
@@ -76,17 +109,14 @@ export default function ToolOptions<T extends FormikValues>({
           onSubmit={() => {}}
         >
           {(formikProps) => (
-            <Stack direction={'row'} spacing={2}>
-              <FormikListenerComponent
-                compute={compute}
-                input={input}
-                initialValues={initialValues}
-              />
-              <ToolOptionGroups
-                groups={getGroups({ ...formikProps, updateField })}
-              />
+            <ToolBody
+              compute={compute}
+              input={input}
+              getGroups={getGroups}
+              formikProps={formikProps}
+            >
               {children}
-            </Stack>
+            </ToolBody>
           )}
         </Formik>
       </Box>

diff --git a/src/pages/image/png/change-colors-in-png/index.tsx b/src/pages/image/png/change-colors-in-png/index.tsx
@@ -22,6 +22,7 @@ export default function ChangeColorsInPng() {
   const [result, setResult] = useState<File | null>(null);
 
   const compute = (optionsValues: typeof initialValues, input: any) => {
+    if (!input) return;
     const { fromColor, toColor, similarity } = optionsValues;
     let fromRgb: [number, number, number];
     let toRgb: [number, number, number];
@@ -117,24 +118,24 @@ export default function ChangeColorsInPng() {
       />
       <ToolOptions
         compute={compute}
-        getGroups={({ values, setFieldValue }) => [
+        getGroups={({ values, updateField }) => [
           {
             title: 'From color and to color',
             component: (
               <Box>
                 <ColorSelector
                   value={values.fromColor}
-                  onChange={(val) => setFieldValue('fromColor', val)}
+                  onChange={(val) => updateField('fromColor', val)}
                   description={'Replace this color (from color)'}
                 />
                 <ColorSelector
                   value={values.toColor}
-                  onChange={(val) => setFieldValue('toColor', val)}
+                  onChange={(val) => updateField('toColor', val)}
                   description={'With this color (to color)'}
                 />
                 <TextFieldWithDesc
                   value={values.similarity}
-                  onOwnChange={(val) => setFieldValue('similarity', val)}
+                  onOwnChange={(val) => updateField('similarity', val)}
                   description={
                     'Match this % of similar colors of the from color. For example, 10% white will match white and a little bit of gray.'
                   }

diff --git a/src/pages/image/png/create-transparent/index.tsx b/src/pages/image/png/create-transparent/index.tsx
@@ -21,6 +21,7 @@ export default function ChangeColorsInPng() {
   const [result, setResult] = useState<File | null>(null);
 
   const compute = (optionsValues: typeof initialValues, input: any) => {
+    if (!input) return;
     const { fromColor, similarity } = optionsValues;
 
     let fromRgb: [number, number, number];
@@ -110,19 +111,19 @@ export default function ChangeColorsInPng() {
       />
       <ToolOptions
         compute={compute}
-        getGroups={({ values, setFieldValue }) => [
+        getGroups={({ values, updateField }) => [
           {
             title: 'From color and similarity',
             component: (
               <Box>
                 <ColorSelector
                   value={values.fromColor}
-                  onChange={(val) => setFieldValue('fromColor', val)}
+                  onChange={(val) => updateField('fromColor', val)}
                   description={'Replace this color (from color)'}
                 />
                 <TextFieldWithDesc
                   value={values.similarity}
-                  onOwnChange={(val) => setFieldValue('similarity', val)}
+                  onOwnChange={(val) => updateField('similarity', val)}
                   description={
                     'Match this % of similar colors of the from color. For example, 10% white will match white and a little bit of gray.'
                   }

diff --git a/src/pages/number/generate/index.tsx b/src/pages/number/generate/index.tsx
@@ -26,27 +26,27 @@ export default function SplitText() {
         result={<ToolTextResult title={'Total'} value={result} />}
       />
       <ToolOptions
-        getGroups={({ values, setFieldValue }) => [
+        getGroups={({ values, updateField }) => [
           {
             title: 'Arithmetic sequence option',
             component: (
               <Box>
                 <TextFieldWithDesc
                   description={'Start sequence from this number.'}
                   value={values.firstValue}
-                  onOwnChange={(val) => setFieldValue('firstValue', val)}
+                  onOwnChange={(val) => updateField('firstValue', val)}
                   type={'number'}
                 />
                 <TextFieldWithDesc
                   description={'Increase each element by this amount'}
                   value={values.step}
-                  onOwnChange={(val) => setFieldValue('step', val)}
+                  onOwnChange={(val) => updateField('step', val)}
                   type={'number'}
                 />
                 <TextFieldWithDesc
                   description={'Number of elements in sequence.'}
                   value={values.numberOfNumbers}
-                  onOwnChange={(val) => setFieldValue('numberOfNumbers', val)}
+                  onOwnChange={(val) => updateField('numberOfNumbers', val)}
                   type={'number'}
                 />
               </Box>
@@ -60,7 +60,7 @@ export default function SplitText() {
                   'Separate elements in the arithmetic sequence by this character.'
                 }
                 value={values.separator}
-                onOwnChange={(val) => setFieldValue('separator', val)}
+                onOwnChange={(val) => updateField('separator', val)}
               />
             )
           }

diff --git a/src/pages/number/sum/index.tsx b/src/pages/number/sum/index.tsx
@@ -53,7 +53,7 @@ export default function SplitText() {
         result={<ToolTextResult title={'Total'} value={result} />}
       />
       <ToolOptions
-        getGroups={({ values, setFieldValue }) => [
+        getGroups={({ values, updateField }) => [
           {
             title: 'Number extraction',
             component: extractionTypes.map(
@@ -76,17 +76,17 @@ export default function SplitText() {
                         ? values[textValueAccessor].toString()
                         : ''
                     }
-                    onRadioClick={() => setFieldValue('extractionType', type)}
+                    onRadioClick={() => updateField('extractionType', type)}
                     onTextChange={(val) =>
                       textValueAccessor
-                        ? setFieldValue(textValueAccessor, val)
+                        ? updateField(textValueAccessor, val)
                         : null
                     }
                   />
                 ) : (
                   <SimpleRadio
                     key={title}
-                    onClick={() => setFieldValue('extractionType', type)}
+                    onClick={() => updateField('extractionType', type)}
                     checked={values.extractionType === type}
                     description={description}
                     title={title}
@@ -101,7 +101,7 @@ export default function SplitText() {
                 title={'Print Running Sum'}
                 description={"Display the sum as it's calculated step by step."}
                 checked={values.printRunningSum}
-                onChange={(value) => setFieldValue('printRunningSum', value)}
+                onChange={(value) => updateField('printRunningSum', value)}
               />
             )
           }

diff --git a/src/pages/string/join/index.tsx b/src/pages/string/join/index.tsx
@@ -142,15 +142,15 @@ export default function JoinText() {
       />
       <ToolOptions
         compute={compute}
-        getGroups={({ values, setFieldValue }) => [
+        getGroups={({ values, updateField }) => [
           {
             title: 'Text Merged Options',
             component: (
               <TextFieldWithDesc
                 placeholder={mergeOptions.placeholder}
                 value={values['joinCharacter']}
                 onOwnChange={(value) =>
-                  setFieldValue(mergeOptions.accessor, value)
+                  updateField(mergeOptions.accessor, value)
                 }
                 description={mergeOptions.description}
               />
@@ -163,7 +163,7 @@ export default function JoinText() {
                 key={option.accessor}
                 title={option.title}
                 checked={!!values[option.accessor]}
-                onChange={(value) => setFieldValue(option.accessor, value)}
+                onChange={(value) => updateField(option.accessor, value)}
                 description={option.description}
               />
             ))

diff --git a/src/pages/string/split/index.tsx b/src/pages/string/split/index.tsx
@@ -116,7 +116,7 @@ export default function SplitText() {
       />
       <ToolOptions
         compute={computeExternal}
-        getGroups={({ values, setFieldValue }) => [
+        getGroups={({ values, updateField }) => [
           {
             title: 'Split separator options',
             component: splitOperators.map(({ title, description, type }) => (
@@ -127,8 +127,8 @@ export default function SplitText() {
                 fieldName={'splitSeparatorType'}
                 description={description}
                 value={values[`${type}Value`]}
-                onRadioClick={() => setFieldValue('splitSeparatorType', type)}
-                onTextChange={(val) => setFieldValue(`${type}Value`, val)}
+                onRadioClick={() => updateField('splitSeparatorType', type)}
+                onTextChange={(val) => updateField(`${type}Value`, val)}
               />
             ))
           },
@@ -138,7 +138,7 @@ export default function SplitText() {
               <TextFieldWithDesc
                 key={option.accessor}
                 value={values[option.accessor]}
-                onOwnChange={(value) => setFieldValue(option.accessor, value)}
+                onOwnChange={(value) => updateField(option.accessor, value)}
                 description={option.description}
               />
             ))

diff --git a/src/pages/string/to-morse/index.tsx b/src/pages/string/to-morse/index.tsx
@@ -33,7 +33,7 @@ export default function ToMorse() {
       />
       <ToolOptions
         compute={computeOptions}
-        getGroups={({ values, setFieldValue }) => [
+        getGroups={({ values, updateField }) => [
           {
             title: 'Short Signal',
             component: (
@@ -42,7 +42,7 @@ export default function ToMorse() {
                   'Symbol that will correspond to the dot in Morse code.'
                 }
                 value={values.dotSymbol}
-                onOwnChange={(val) => setFieldValue('dotSymbol', val)}
+                onOwnChange={(val) => updateField('dotSymbol', val)}
               />
             )
           },
@@ -54,7 +54,7 @@ export default function ToMorse() {
                   'Symbol that will correspond to the dash in Morse code.'
                 }
                 value={values.dashSymbol}
-                onOwnChange={(val) => setFieldValue('dashSymbol', val)}
+                onOwnChange={(val) => updateField('dashSymbol', val)}
               />
             )
           }