fix: formik updateField

.idea/workspace.xml

@@ -4,15 +4,13 @@
     <option name="autoReloadType" value="SELECTIVE" />
   </component>
   <component name="ChangeListManager">
-    <list default="true" id="b30e2810-c4c1-4aad-b134-794e52cc1c7d" name="Changes" comment="fix: radio and list sort init">
+    <list default="true" id="b30e2810-c4c1-4aad-b134-794e52cc1c7d" name="Changes" comment="chore: formik updateField">
       <change beforePath="$PROJECT_DIR$/.idea/workspace.xml" beforeDir="false" afterPath="$PROJECT_DIR$/.idea/workspace.xml" afterDir="false" />
-      <change beforePath="$PROJECT_DIR$/src/components/options/RadioWithTextField.tsx" beforeDir="false" afterPath="$PROJECT_DIR$/src/components/options/RadioWithTextField.tsx" afterDir="false" />
-      <change beforePath="$PROJECT_DIR$/src/components/options/TextFieldWithDesc.tsx" beforeDir="false" afterPath="$PROJECT_DIR$/src/components/options/TextFieldWithDesc.tsx" afterDir="false" />
       <change beforePath="$PROJECT_DIR$/src/components/options/ToolOptions.tsx" beforeDir="false" afterPath="$PROJECT_DIR$/src/components/options/ToolOptions.tsx" afterDir="false" />
       <change beforePath="$PROJECT_DIR$/src/pages/image/png/change-colors-in-png/index.tsx" beforeDir="false" afterPath="$PROJECT_DIR$/src/pages/image/png/change-colors-in-png/index.tsx" afterDir="false" />
       <change beforePath="$PROJECT_DIR$/src/pages/image/png/create-transparent/index.tsx" beforeDir="false" afterPath="$PROJECT_DIR$/src/pages/image/png/create-transparent/index.tsx" afterDir="false" />
-      <change beforePath="$PROJECT_DIR$/src/pages/list/sort/index.tsx" beforeDir="false" afterPath="$PROJECT_DIR$/src/pages/list/sort/index.tsx" afterDir="false" />
       <change beforePath="$PROJECT_DIR$/src/pages/number/generate/index.tsx" beforeDir="false" afterPath="$PROJECT_DIR$/src/pages/number/generate/index.tsx" afterDir="false" />
+      <change beforePath="$PROJECT_DIR$/src/pages/number/sum/index.tsx" beforeDir="false" afterPath="$PROJECT_DIR$/src/pages/number/sum/index.tsx" afterDir="false" />
       <change beforePath="$PROJECT_DIR$/src/pages/string/join/index.tsx" beforeDir="false" afterPath="$PROJECT_DIR$/src/pages/string/join/index.tsx" afterDir="false" />
       <change beforePath="$PROJECT_DIR$/src/pages/string/split/index.tsx" beforeDir="false" afterPath="$PROJECT_DIR$/src/pages/string/split/index.tsx" afterDir="false" />
       <change beforePath="$PROJECT_DIR$/src/pages/string/to-morse/index.tsx" beforeDir="false" afterPath="$PROJECT_DIR$/src/pages/string/to-morse/index.tsx" afterDir="false" />
@@ -211,14 +209,6 @@
       <workItem from="1719492452780" duration="8000" />
       <workItem from="1719496624579" duration="6148000" />
     </task>
-    <task id="LOCAL-00026" summary="fix: deploy message">
-      <option name="closed" value="true" />
-      <created>1719096551866</created>
-      <option name="number" value="00026" />
-      <option name="presentableId" value="LOCAL-00026" />
-      <option name="project" value="LOCAL" />
-      <updated>1719096551866</updated>
-    </task>
     <task id="LOCAL-00027" summary="chore: tools by category">
       <option name="closed" value="true" />
       <created>1719102365836</created>
@@ -603,7 +593,15 @@
       <option name="project" value="LOCAL" />
       <updated>1719516424652</updated>
     </task>
-    <option name="localTasksCounter" value="75" />
+    <task id="LOCAL-00075" summary="chore: formik updateField">
+      <option name="closed" value="true" />
+      <created>1719519913328</created>
+      <option name="number" value="00075" />
+      <option name="presentableId" value="LOCAL-00075" />
+      <option name="project" value="LOCAL" />
+      <updated>1719519913328</updated>
+    </task>
+    <option name="localTasksCounter" value="76" />
     <servers />
   </component>
   <component name="TypeScriptGeneratedFilesManager">
@@ -636,7 +634,6 @@
     <option name="CHECK_CODE_SMELLS_BEFORE_PROJECT_COMMIT" value="false" />
     <option name="CHECK_NEW_TODO" value="false" />
     <option name="ADD_EXTERNAL_FILES_SILENTLY" value="true" />
-    <MESSAGE value="feat: change color in png finished" />
     <MESSAGE value="feat: string to morse" />
     <MESSAGE value="feat: sum numbers init" />
     <MESSAGE value="fix: compilation" />
@@ -661,7 +658,8 @@
     <MESSAGE value="style: lint" />
     <MESSAGE value="fix: misc" />
     <MESSAGE value="fix: radio and list sort init" />
-    <option name="LAST_COMMIT_MESSAGE" value="fix: radio and list sort init" />
+    <MESSAGE value="chore: formik updateField" />
+    <option name="LAST_COMMIT_MESSAGE" value="chore: formik updateField" />
   </component>
   <component name="XSLT-Support.FileAssociations.UIState">
     <expand />

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}>
+            <ToolBody
-              <FormikListenerComponent
+              compute={compute}
-                compute={compute}
+              input={input}
-                input={input}
+              getGroups={getGroups}
-                initialValues={initialValues}
+              formikProps={formikProps}
-              />
+            >
-              <ToolOptionGroups
-                groups={getGroups({ ...formikProps, updateField })}
-              />
               {children}
-            </Stack>
+            </ToolBody>
           )}
         </Formik>
       </Box>

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.'
                   }

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.'
                   }

src/pages/number/generate/index.tsx

@@ -26,7 +26,7 @@ export default function SplitText() {
         result={<ToolTextResult title={'Total'} value={result} />}
       />
       <ToolOptions
-        getGroups={({ values, setFieldValue }) => [
+        getGroups={({ values, updateField }) => [
           {
             title: 'Arithmetic sequence option',
             component: (
@@ -34,19 +34,19 @@ export default function SplitText() {
                 <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)}
               />
             )
           }

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)}
               />
             )
           }

src/pages/string/join/index.tsx

@@ -142,7 +142,7 @@ export default function JoinText() {
       />
       <ToolOptions
         compute={compute}
-        getGroups={({ values, setFieldValue }) => [
+        getGroups={({ values, updateField }) => [
           {
             title: 'Text Merged Options',
             component: (
@@ -150,7 +150,7 @@ export default function JoinText() {
                 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}
               />
             ))

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)}
+                onRadioClick={() => updateField('splitSeparatorType', type)}
-                onTextChange={(val) => setFieldValue(`${type}Value`, val)}
+                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}
               />
             ))

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)}
               />
             )
           }

src/pages/video/gif/change-speed/index.tsx

@@ -21,6 +21,7 @@ export default function ChangeSpeed() {
   const [result, setResult] = useState<File | null>(null);
 
   const compute = (optionsValues: typeof initialValues, input: File) => {
+    if (!input) return;
     const { newSpeed } = optionsValues;
 
     const processImage = async (file: File, newSpeed: number) => {
@@ -123,14 +124,14 @@ export default function ChangeSpeed() {
       />
       <ToolOptions
         compute={compute}
-        getGroups={({ values, setFieldValue }) => [
+        getGroups={({ values, updateField }) => [
           {
             title: 'New GIF speed',
             component: (
               <Box>
                 <TextFieldWithDesc
                   value={values.newSpeed}
-                  onOwnChange={(val) => setFieldValue('newSpeed', val)}
+                  onOwnChange={(val) => updateField('newSpeed', Number(val))}
                   description={'Default new GIF speed.'}
                   InputProps={{ endAdornment: <Typography>ms</Typography> }}
                   type={'number'}