chore: formik updateField

.idea/workspace.xml

@@ -4,18 +4,19 @@
     <option name="autoReloadType" value="SELECTIVE" />
   </component>
   <component name="ChangeListManager">
-    <list default="true" id="b30e2810-c4c1-4aad-b134-794e52cc1c7d" name="Changes" comment="style: lint">
+    <list default="true" id="b30e2810-c4c1-4aad-b134-794e52cc1c7d" name="Changes" comment="fix: radio and list sort init">
       <change beforePath="$PROJECT_DIR$/.idea/workspace.xml" beforeDir="false" afterPath="$PROJECT_DIR$/.idea/workspace.xml" afterDir="false" />
-      <change beforePath="$PROJECT_DIR$/src/components/Hero.tsx" beforeDir="false" afterPath="$PROJECT_DIR$/src/components/Hero.tsx" 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/SimpleRadio.tsx" beforeDir="false" afterPath="$PROJECT_DIR$/src/components/options/SimpleRadio.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/pages/list/index.ts" beforeDir="false" afterPath="$PROJECT_DIR$/src/pages/list/index.ts" 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/list/sort/meta.ts" beforeDir="false" afterPath="$PROJECT_DIR$/src/pages/list/sort/meta.ts" 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/tools/index.ts" beforeDir="false" afterPath="$PROJECT_DIR$/src/tools/index.ts" 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" />
+      <change beforePath="$PROJECT_DIR$/src/pages/video/gif/change-speed/index.tsx" beforeDir="false" afterPath="$PROJECT_DIR$/src/pages/video/gif/change-speed/index.tsx" afterDir="false" />
     </list>
     <option name="SHOW_DIALOG" value="false" />
     <option name="HIGHLIGHT_CONFLICTS" value="true" />
@@ -210,14 +211,6 @@
       <workItem from="1719492452780" duration="8000" />
       <workItem from="1719496624579" duration="6148000" />
     </task>
-    <task id="LOCAL-00025" summary="fix: deploy message">
-      <option name="closed" value="true" />
-      <created>1719096461432</created>
-      <option name="number" value="00025" />
-      <option name="presentableId" value="LOCAL-00025" />
-      <option name="project" value="LOCAL" />
-      <updated>1719096461432</updated>
-    </task>
     <task id="LOCAL-00026" summary="fix: deploy message">
       <option name="closed" value="true" />
       <created>1719096551866</created>
@@ -602,7 +595,15 @@
       <option name="project" value="LOCAL" />
       <updated>1719510922051</updated>
     </task>
-    <option name="localTasksCounter" value="74" />
+    <task id="LOCAL-00074" summary="fix: radio and list sort init">
+      <option name="closed" value="true" />
+      <created>1719516424652</created>
+      <option name="number" value="00074" />
+      <option name="presentableId" value="LOCAL-00074" />
+      <option name="project" value="LOCAL" />
+      <updated>1719516424652</updated>
+    </task>
+    <option name="localTasksCounter" value="75" />
     <servers />
   </component>
   <component name="TypeScriptGeneratedFilesManager">
@@ -635,7 +636,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="chore: ResultFooter" />
     <MESSAGE value="feat: change color in png finished" />
     <MESSAGE value="feat: string to morse" />
     <MESSAGE value="feat: sum numbers init" />
@@ -660,7 +660,8 @@
     <MESSAGE value="chore: remove unused deps" />
     <MESSAGE value="style: lint" />
     <MESSAGE value="fix: misc" />
-    <option name="LAST_COMMIT_MESSAGE" value="fix: misc" />
+    <MESSAGE value="fix: radio and list sort init" />
+    <option name="LAST_COMMIT_MESSAGE" value="fix: radio and list sort init" />
   </component>
   <component name="XSLT-Support.FileAssociations.UIState">
     <expand />

src/components/options/RadioWithTextField.tsx

@@ -31,10 +31,7 @@ const RadioWithTextField = ({
       />
       <TextFieldWithDesc
         value={value}
-        onChange={(val) => {
+        onOwnChange={onTextChange}
-          if (typeof val === 'string') onTextChange(val);
-          else onTextChange(val.target.value);
-        }}
         description={description}
       />
     </Box>

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 && (

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

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

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

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 }) => (
+            component: (
-              <SimpleRadio
+              <Box>
-                key={type}
+                {splitOperators.map(({ title, description, type }) => (
-                onClick={() => setFieldValue('splitSeparatorType', type)}
+                  <SimpleRadio
-                title={title}
+                    key={type}
-                description={description}
+                    onClick={() => updateField('splitSeparatorType', type)}
-                checked={values.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',

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

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}

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

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

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