chore: formik updateField

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

Hide file tree

Showing 12 changed files with 66 additions and 49 deletions.
diff --git a/.idea/workspace.xml b/.idea/workspace.xml
diff --git a/src/components/options/RadioWithTextField.tsx b/src/components/options/RadioWithTextField.tsx
@@ -31,10 +31,7 @@ const RadioWithTextField = ({
       />
       <TextFieldWithDesc
         value={value}
-        onChange={(val) => {
-          if (typeof val === 'string') onTextChange(val);
-          else onTextChange(val.target.value);
-        }}
+        onOwnChange={onTextChange}
         description={description}
       />
     </Box>

diff --git a/src/components/options/TextFieldWithDesc.tsx b/src/components/options/TextFieldWithDesc.tsx
@@ -5,13 +5,13 @@ import React from 'react';
 type OwnProps = {
   description?: string;
   value: string | number;
-  onChange: (value: string) => void;
+  onOwnChange: (value: string) => void;
   placeholder?: string;
 };
 const TextFieldWithDesc = ({
   description,
   value,
-  onChange,
+  onOwnChange,
   placeholder,
   ...props
 }: TextFieldProps & OwnProps) => {
@@ -21,7 +21,7 @@ const TextFieldWithDesc = ({
         placeholder={placeholder}
         sx={{ backgroundColor: 'white' }}
         value={value}
-        onChange={(event) => onChange(event.target.value)}
+        onChange={(event) => onOwnChange(event.target.value)}
         {...props}
       />
       {description && (

diff --git a/src/components/options/ToolOptions.tsx b/src/components/options/ToolOptions.tsx
@@ -6,6 +6,8 @@ import { Formik, FormikProps, FormikValues, useFormikContext } from 'formik';
 import ToolOptionGroups, { ToolOptionGroup } from './ToolOptionGroups';
 import { CustomSnackBarContext } from '../../contexts/CustomSnackBarContext';
 
+type UpdateField<T> = <Y extends keyof T>(field: Y, value: T[Y]) => void;
+
 const FormikListenerComponent = <T,>({
   initialValues,
   input,
@@ -42,11 +44,16 @@ export default function ToolOptions<T extends FormikValues>({
   validationSchema: any | (() => any);
   compute: (optionsValues: T, input: any) => void;
   input?: any;
-  getGroups: (formikProps: FormikProps<T>) => ToolOptionGroup[];
+  getGroups: (
+    formikProps: FormikProps<T> & { updateField: UpdateField<T> }
+  ) => ToolOptionGroup[];
   formRef?: RefObject<FormikProps<T>>;
 }) {
   const theme = useTheme();
-
+  const updateField: UpdateField<T> = (field, value) => {
+    // @ts-ignore
+    formRef?.current?.setFieldValue(field, value);
+  };
   return (
     <Box
       sx={{
@@ -75,7 +82,9 @@ export default function ToolOptions<T extends FormikValues>({
                 input={input}
                 initialValues={initialValues}
               />
-              <ToolOptionGroups groups={getGroups(formikProps)} />
+              <ToolOptionGroups
+                groups={getGroups({ ...formikProps, updateField })}
+              />
               {children}
             </Stack>
           )}

diff --git a/src/pages/image/png/change-colors-in-png/index.tsx b/src/pages/image/png/change-colors-in-png/index.tsx
@@ -134,7 +134,7 @@ export default function ChangeColorsInPng() {
                 />
                 <TextFieldWithDesc
                   value={values.similarity}
-                  onChange={(val) => setFieldValue('similarity', val)}
+                  onOwnChange={(val) => setFieldValue('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
@@ -122,7 +122,7 @@ export default function ChangeColorsInPng() {
                 />
                 <TextFieldWithDesc
                   value={values.similarity}
-                  onChange={(val) => setFieldValue('similarity', val)}
+                  onOwnChange={(val) => setFieldValue('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/list/sort/index.tsx b/src/pages/list/sort/index.tsx
@@ -7,6 +7,7 @@ import ToolOptions from '../../../components/options/ToolOptions';
 import { Sort, SortingMethod, SplitOperatorType } from './service';
 import ToolInputAndResult from '../../../components/ToolInputAndResult';
 import SimpleRadio from '../../../components/options/SimpleRadio';
+import TextFieldWithDesc from '../../../components/options/TextFieldWithDesc';
 
 const initialValues = {
   splitSeparatorType: 'symbol' as SplitOperatorType,
@@ -80,18 +81,27 @@ export default function SplitText() {
       />
       <ToolOptions
         compute={computeExternal}
-        getGroups={({ values, setFieldValue, handleChange }) => [
+        getGroups={({ values, updateField }) => [
           {
             title: 'Input item separator',
-            component: splitOperators.map(({ title, description, type }) => (
-              <SimpleRadio
-                key={type}
-                onClick={() => setFieldValue('splitSeparatorType', type)}
-                title={title}
-                description={description}
-                checked={values.splitSeparatorType === type}
-              />
-            ))
+            component: (
+              <Box>
+                {splitOperators.map(({ title, description, type }) => (
+                  <SimpleRadio
+                    key={type}
+                    onClick={() => updateField('splitSeparatorType', type)}
+                    title={title}
+                    description={description}
+                    checked={values.splitSeparatorType === type}
+                  />
+                ))}
+                <TextFieldWithDesc
+                  description={'Set a delimiting symbol or regular expression.'}
+                  value={values.splitSeparator}
+                  onOwnChange={(val) => updateField('splitSeparator', val)}
+                />
+              </Box>
+            )
           },
           {
             title: 'Sort method',

diff --git a/src/pages/number/generate/index.tsx b/src/pages/number/generate/index.tsx
@@ -34,19 +34,19 @@ export default function SplitText() {
                 <TextFieldWithDesc
                   description={'Start sequence from this number.'}
                   value={values.firstValue}
-                  onChange={(val) => setFieldValue('firstValue', val)}
+                  onOwnChange={(val) => setFieldValue('firstValue', val)}
                   type={'number'}
                 />
                 <TextFieldWithDesc
                   description={'Increase each element by this amount'}
                   value={values.step}
-                  onChange={(val) => setFieldValue('step', val)}
+                  onOwnChange={(val) => setFieldValue('step', val)}
                   type={'number'}
                 />
                 <TextFieldWithDesc
                   description={'Number of elements in sequence.'}
                   value={values.numberOfNumbers}
-                  onChange={(val) => setFieldValue('numberOfNumbers', val)}
+                  onOwnChange={(val) => setFieldValue('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}
-                onChange={(val) => setFieldValue('separator', val)}
+                onOwnChange={(val) => setFieldValue('separator', val)}
               />
             )
           }

diff --git a/src/pages/string/join/index.tsx b/src/pages/string/join/index.tsx
@@ -149,7 +149,7 @@ export default function JoinText() {
               <TextFieldWithDesc
                 placeholder={mergeOptions.placeholder}
                 value={values['joinCharacter']}
-                onChange={(value) =>
+                onOwnChange={(value) =>
                   setFieldValue(mergeOptions.accessor, value)
                 }
                 description={mergeOptions.description}

diff --git a/src/pages/string/split/index.tsx b/src/pages/string/split/index.tsx
@@ -138,7 +138,7 @@ export default function SplitText() {
               <TextFieldWithDesc
                 key={option.accessor}
                 value={values[option.accessor]}
-                onChange={(value) => setFieldValue(option.accessor, value)}
+                onOwnChange={(value) => setFieldValue(option.accessor, value)}
                 description={option.description}
               />
             ))

diff --git a/src/pages/string/to-morse/index.tsx b/src/pages/string/to-morse/index.tsx
@@ -42,7 +42,7 @@ export default function ToMorse() {
                   'Symbol that will correspond to the dot in Morse code.'
                 }
                 value={values.dotSymbol}
-                onChange={(val) => setFieldValue('dotSymbol', val)}
+                onOwnChange={(val) => setFieldValue('dotSymbol', val)}
               />
             )
           },
@@ -54,7 +54,7 @@ export default function ToMorse() {
                   'Symbol that will correspond to the dash in Morse code.'
                 }
                 value={values.dashSymbol}
-                onChange={(val) => setFieldValue('dashSymbol', val)}
+                onOwnChange={(val) => setFieldValue('dashSymbol', val)}
               />
             )
           }

diff --git a/src/pages/video/gif/change-speed/index.tsx b/src/pages/video/gif/change-speed/index.tsx
@@ -130,7 +130,7 @@ export default function ChangeSpeed() {
               <Box>
                 <TextFieldWithDesc
                   value={values.newSpeed}
-                  onChange={(val) => setFieldValue('newSpeed', val)}
+                  onOwnChange={(val) => setFieldValue('newSpeed', val)}
                   description={'Default new GIF speed.'}
                   InputProps={{ endAdornment: <Typography>ms</Typography> }}
                   type={'number'}