feat: change gif speed

src/components/options/RadioWithTextField.tsx

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

src/components/options/TextFieldWithDesc.tsx

@@ -1,18 +1,20 @@
-import { Box, TextField } from '@mui/material';
+import { Box, TextField, TextFieldProps } from '@mui/material';
 import Typography from '@mui/material/Typography';
 import React from 'react';
 
+type OwnProps = {
+  description: string;
+  value: string | number;
+  onChange: (value: string) => void;
+  placeholder?: string;
+};
 const TextFieldWithDesc = ({
   description,
   value,
   onChange,
-  placeholder
-}: {
-  description: string;
-  value: string;
-  onChange: (value: string) => void;
-  placeholder?: string;
-}) => {
+  placeholder,
+  ...props
+}: TextFieldProps & OwnProps) => {
   return (
     <Box>
       <TextField
@@ -20,6 +22,7 @@ const TextFieldWithDesc = ({
         sx={{ backgroundColor: 'white' }}
         value={value}
         onChange={(event) => onChange(event.target.value)}
+        {...props}
       />
       <Typography fontSize={12} mt={1}>
         {description}

src/components/options/ToolOptions.tsx

@@ -6,6 +6,28 @@ import { Formik, FormikProps, FormikValues, useFormikContext } from 'formik';
 import ToolOptionGroups, { ToolOptionGroup } from './ToolOptionGroups';
 import { CustomSnackBarContext } from '../../contexts/CustomSnackBarContext';
 
+const FormikListenerComponent = <T,>({
+  initialValues,
+  input,
+  compute
+}: {
+  initialValues: T;
+  input: any;
+  compute: (optionsValues: T, input: any) => void;
+}) => {
+  const { values } = useFormikContext<typeof initialValues>();
+  const { showSnackBar } = useContext(CustomSnackBarContext);
+
+  useEffect(() => {
+    try {
+      if (values && input) compute(values, input);
+    } catch (exception: unknown) {
+      if (exception instanceof Error) showSnackBar(exception.message, 'error');
+    }
+  }, [values, input]);
+
+  return null; // This component doesn't render anything
+};
 export default function ToolOptions<T extends FormikValues>({
   children,
   initialValues,
@@ -24,21 +46,7 @@ export default function ToolOptions<T extends FormikValues>({
   formRef?: RefObject<FormikProps<T>>;
 }) {
   const theme = useTheme();
-  const FormikListenerComponent = () => {
-    const { values } = useFormikContext<typeof initialValues>();
-    const { showSnackBar } = useContext(CustomSnackBarContext);
 
-    useEffect(() => {
-      try {
-        compute(values, input);
-      } catch (exception: unknown) {
-        if (exception instanceof Error)
-          showSnackBar(exception.message, 'error');
-      }
-    }, [values, showSnackBar]);
-
-    return null; // This component doesn't render anything
-  };
   return (
     <Box
       sx={{
@@ -62,7 +70,11 @@ export default function ToolOptions<T extends FormikValues>({
         >
           {(formikProps) => (
             <Stack direction={'row'} spacing={2}>
-              <FormikListenerComponent />
+              <FormikListenerComponent
+                compute={compute}
+                input={input}
+                initialValues={initialValues}
+              />
               <ToolOptionGroups groups={getGroups(formikProps)} />
               {children}
             </Stack>