diff --git a/.idea/workspace.xml b/.idea/workspace.xml
index 0c44556..3b6a75e 100644
--- a/.idea/workspace.xml
+++ b/.idea/workspace.xml
@@ -4,9 +4,16 @@
-
+
-
+
+
+
+
+
+
+
+
@@ -193,15 +200,8 @@
-
-
-
-
- 1719006829016
-
-
-
- 1719006829016
+
+
@@ -587,7 +587,15 @@
1719360545177
-
+
+
+ 1719363656541
+
+
+
+ 1719363656541
+
+
@@ -608,7 +616,6 @@
-
@@ -633,7 +640,8 @@
-
+
+
diff --git a/src/components/options/ToolOptionGroups.tsx b/src/components/options/ToolOptionGroups.tsx
index 465adc4..5f1d4a6 100644
--- a/src/components/options/ToolOptionGroups.tsx
+++ b/src/components/options/ToolOptionGroups.tsx
@@ -1,9 +1,8 @@
import Typography from '@mui/material/Typography';
import React, { ReactNode } from 'react';
-import { Box, Stack } from '@mui/material';
import Grid from '@mui/material/Grid';
-interface ToolOptionGroup {
+export interface ToolOptionGroup {
title: string;
component: ReactNode;
}
diff --git a/src/components/options/ToolOptions.tsx b/src/components/options/ToolOptions.tsx
index f6c5955..92b0260 100644
--- a/src/components/options/ToolOptions.tsx
+++ b/src/components/options/ToolOptions.tsx
@@ -1,10 +1,44 @@
import { Box, Stack, useTheme } from '@mui/material';
import SettingsIcon from '@mui/icons-material/Settings';
import Typography from '@mui/material/Typography';
-import React, { ReactNode } from 'react';
+import React, { ReactNode, RefObject, useContext, useEffect } from 'react';
+import { Formik, FormikProps, FormikValues, useFormikContext } from 'formik';
+import ToolOptionGroups, { ToolOptionGroup } from './ToolOptionGroups';
+import { CustomSnackBarContext } from '../../contexts/CustomSnackBarContext';
-export default function ToolOptions({ children }: { children: ReactNode }) {
+export default function ToolOptions({
+ children,
+ initialValues,
+ validationSchema,
+ compute,
+ input,
+ getGroups,
+ formRef
+}: {
+ children?: ReactNode;
+ initialValues: T;
+ validationSchema: any | (() => any);
+ compute: (optionsValues: T, input: any) => void;
+ input: any;
+ getGroups: (formikProps: FormikProps) => ToolOptionGroup[];
+ formRef?: RefObject>;
+}) {
const theme = useTheme();
+ const FormikListenerComponent = () => {
+ const { values } = useFormikContext();
+ 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 (
Tool options
- {children}
+
+ {}}
+ >
+ {(formikProps) => (
+
+
+
+ {children}
+
+ )}
+
+
);
}
diff --git a/src/pages/image/png/change-colors-in-png/index.tsx b/src/pages/image/png/change-colors-in-png/index.tsx
index 621a259..6c83e1d 100644
--- a/src/pages/image/png/change-colors-in-png/index.tsx
+++ b/src/pages/image/png/change-colors-in-png/index.tsx
@@ -1,15 +1,13 @@
import { Box } from '@mui/material';
-import React, { useEffect, useState } from 'react';
+import React, { useState } from 'react';
import * as Yup from 'yup';
import ToolFileInput from '../../../../components/input/ToolFileInput';
import ToolFileResult from '../../../../components/result/ToolFileResult';
import ToolOptions from '../../../../components/options/ToolOptions';
-import { Formik, useFormikContext } from 'formik';
import ColorSelector from '../../../../components/options/ColorSelector';
import Color from 'color';
import TextFieldWithDesc from 'components/options/TextFieldWithDesc';
import ToolInputAndResult from '../../../../components/ToolInputAndResult';
-import ToolOptionGroups from '../../../../components/options/ToolOptionGroups';
const initialValues = {
fromColor: 'white',
@@ -23,86 +21,81 @@ export default function ChangeColorsInPng() {
const [input, setInput] = useState(null);
const [result, setResult] = useState(null);
- const FormikListenerComponent = ({ input }: { input: File }) => {
- const { values } = useFormikContext();
- const { fromColor, toColor, similarity } = values;
+ const compute = (optionsValues: typeof initialValues, input: any) => {
+ const { fromColor, toColor, similarity } = optionsValues;
+ let fromRgb: [number, number, number];
+ let toRgb: [number, number, number];
+ try {
+ //@ts-ignore
+ fromRgb = Color(fromColor).rgb().array();
+ //@ts-ignore
+ toRgb = Color(toColor).rgb().array();
+ } catch (err) {
+ return;
+ }
+ const processImage = async (
+ file: File,
+ fromColor: [number, number, number],
+ toColor: [number, number, number],
+ similarity: number
+ ) => {
+ const canvas = document.createElement('canvas');
+ const ctx = canvas.getContext('2d');
+ if (ctx == null) return;
+ const img = new Image();
- useEffect(() => {
- let fromRgb: [number, number, number];
- let toRgb: [number, number, number];
- try {
- //@ts-ignore
- fromRgb = Color(fromColor).rgb().array();
- //@ts-ignore
- toRgb = Color(toColor).rgb().array();
- } catch (err) {
- return;
- }
- const processImage = async (
- file: File,
- fromColor: [number, number, number],
- toColor: [number, number, number],
- similarity: number
+ img.src = URL.createObjectURL(file);
+ await img.decode();
+
+ canvas.width = img.width;
+ canvas.height = img.height;
+ ctx.drawImage(img, 0, 0);
+
+ const imageData = ctx.getImageData(0, 0, canvas.width, canvas.height);
+ const data: Uint8ClampedArray = imageData.data;
+
+ const colorDistance = (
+ c1: [number, number, number],
+ c2: [number, number, number]
) => {
- const canvas = document.createElement('canvas');
- const ctx = canvas.getContext('2d');
- if (ctx == null) return;
- const img = new Image();
-
- img.src = URL.createObjectURL(file);
- await img.decode();
-
- canvas.width = img.width;
- canvas.height = img.height;
- ctx.drawImage(img, 0, 0);
-
- const imageData = ctx.getImageData(0, 0, canvas.width, canvas.height);
- const data: Uint8ClampedArray = imageData.data;
-
- const colorDistance = (
- c1: [number, number, number],
- c2: [number, number, number]
- ) => {
- return Math.sqrt(
- Math.pow(c1[0] - c2[0], 2) +
- Math.pow(c1[1] - c2[1], 2) +
- Math.pow(c1[2] - c2[2], 2)
- );
- };
- const maxColorDistance = Math.sqrt(
- Math.pow(255, 2) + Math.pow(255, 2) + Math.pow(255, 2)
+ return Math.sqrt(
+ Math.pow(c1[0] - c2[0], 2) +
+ Math.pow(c1[1] - c2[1], 2) +
+ Math.pow(c1[2] - c2[2], 2)
);
- const similarityThreshold = (similarity / 100) * maxColorDistance;
-
- for (let i = 0; i < data.length; i += 4) {
- const currentColor: [number, number, number] = [
- data[i],
- data[i + 1],
- data[i + 2]
- ];
- if (colorDistance(currentColor, fromColor) <= similarityThreshold) {
- data[i] = toColor[0]; // Red
- data[i + 1] = toColor[1]; // Green
- data[i + 2] = toColor[2]; // Blue
- }
- }
-
- ctx.putImageData(imageData, 0, 0);
-
- canvas.toBlob((blob) => {
- if (blob) {
- const newFile = new File([blob], file.name, { type: 'image/png' });
- setResult(newFile);
- }
- }, 'image/png');
};
+ const maxColorDistance = Math.sqrt(
+ Math.pow(255, 2) + Math.pow(255, 2) + Math.pow(255, 2)
+ );
+ const similarityThreshold = (similarity / 100) * maxColorDistance;
- processImage(input, fromRgb, toRgb, Number(similarity));
- }, [input, fromColor, toColor]);
+ for (let i = 0; i < data.length; i += 4) {
+ const currentColor: [number, number, number] = [
+ data[i],
+ data[i + 1],
+ data[i + 2]
+ ];
+ if (colorDistance(currentColor, fromColor) <= similarityThreshold) {
+ data[i] = toColor[0]; // Red
+ data[i + 1] = toColor[1]; // Green
+ data[i + 2] = toColor[2]; // Blue
+ }
+ }
- return null;
+ ctx.putImageData(imageData, 0, 0);
+
+ canvas.toBlob((blob) => {
+ if (blob) {
+ const newFile = new File([blob], file.name, {
+ type: 'image/png'
+ });
+ setResult(newFile);
+ }
+ }, 'image/png');
+ };
+
+ processImage(input, fromRgb, toRgb, Number(similarity));
};
-
return (
}
/>
-
- {}}
- >
- {({ setFieldValue, values }) => (
-
- {input && }
-
- setFieldValue('fromColor', val)}
- description={'Replace this color (from color)'}
- />
- setFieldValue('toColor', val)}
- description={'With this color (to color)'}
- />
- 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.'
- }
- />
-
- )
+ [
+ {
+ title: 'From color and to color',
+ component: (
+
+ setFieldValue('fromColor', val)}
+ description={'Replace this color (from color)'}
+ />
+ setFieldValue('toColor', val)}
+ description={'With this color (to color)'}
+ />
+ 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.'
}
- ]}
- />
-
- )}
-
-
+ />
+
+ )
+ }
+ ]}
+ initialValues={initialValues}
+ input={input}
+ validationSchema={validationSchema}
+ />
);
}
diff --git a/src/pages/image/png/create-transparent/index.tsx b/src/pages/image/png/create-transparent/index.tsx
index fd9e3a7..726c728 100644
--- a/src/pages/image/png/create-transparent/index.tsx
+++ b/src/pages/image/png/create-transparent/index.tsx
@@ -1,15 +1,13 @@
import { Box } from '@mui/material';
-import React, { useEffect, useState } from 'react';
+import React, { useState } from 'react';
import * as Yup from 'yup';
import ToolFileInput from '../../../../components/input/ToolFileInput';
import ToolFileResult from '../../../../components/result/ToolFileResult';
import ToolOptions from '../../../../components/options/ToolOptions';
-import { Formik, useFormikContext } from 'formik';
import ColorSelector from '../../../../components/options/ColorSelector';
import Color from 'color';
import TextFieldWithDesc from 'components/options/TextFieldWithDesc';
import ToolInputAndResult from '../../../../components/ToolInputAndResult';
-import ToolOptionGroups from '../../../../components/options/ToolOptionGroups';
const initialValues = {
fromColor: 'white',
@@ -22,78 +20,73 @@ export default function ChangeColorsInPng() {
const [input, setInput] = useState(null);
const [result, setResult] = useState(null);
- const FormikListenerComponent = ({ input }: { input: File }) => {
- const { values } = useFormikContext();
- const { fromColor, similarity } = values;
+ const compute = (optionsValues: typeof initialValues, input: any) => {
+ const { fromColor, similarity } = optionsValues;
- useEffect(() => {
- let fromRgb: [number, number, number];
- try {
- //@ts-ignore
- fromRgb = Color(fromColor).rgb().array();
- } catch (err) {
- return;
- }
- const processImage = async (
- file: File,
- fromColor: [number, number, number],
- similarity: number
+ let fromRgb: [number, number, number];
+ try {
+ //@ts-ignore
+ fromRgb = Color(fromColor).rgb().array();
+ } catch (err) {
+ return;
+ }
+ const processImage = async (
+ file: File,
+ fromColor: [number, number, number],
+ similarity: number
+ ) => {
+ const canvas = document.createElement('canvas');
+ const ctx = canvas.getContext('2d');
+ if (ctx == null) return;
+ const img = new Image();
+
+ img.src = URL.createObjectURL(file);
+ await img.decode();
+
+ canvas.width = img.width;
+ canvas.height = img.height;
+ ctx.drawImage(img, 0, 0);
+
+ const imageData = ctx.getImageData(0, 0, canvas.width, canvas.height);
+ const data: Uint8ClampedArray = imageData.data;
+
+ const colorDistance = (
+ c1: [number, number, number],
+ c2: [number, number, number]
) => {
- const canvas = document.createElement('canvas');
- const ctx = canvas.getContext('2d');
- if (ctx == null) return;
- const img = new Image();
-
- img.src = URL.createObjectURL(file);
- await img.decode();
-
- canvas.width = img.width;
- canvas.height = img.height;
- ctx.drawImage(img, 0, 0);
-
- const imageData = ctx.getImageData(0, 0, canvas.width, canvas.height);
- const data: Uint8ClampedArray = imageData.data;
-
- const colorDistance = (
- c1: [number, number, number],
- c2: [number, number, number]
- ) => {
- return Math.sqrt(
- Math.pow(c1[0] - c2[0], 2) +
- Math.pow(c1[1] - c2[1], 2) +
- Math.pow(c1[2] - c2[2], 2)
- );
- };
- const maxColorDistance = Math.sqrt(
- Math.pow(255, 2) + Math.pow(255, 2) + Math.pow(255, 2)
+ return Math.sqrt(
+ Math.pow(c1[0] - c2[0], 2) +
+ Math.pow(c1[1] - c2[1], 2) +
+ Math.pow(c1[2] - c2[2], 2)
);
- const similarityThreshold = (similarity / 100) * maxColorDistance;
-
- for (let i = 0; i < data.length; i += 4) {
- const currentColor: [number, number, number] = [
- data[i],
- data[i + 1],
- data[i + 2]
- ];
- if (colorDistance(currentColor, fromColor) <= similarityThreshold) {
- data[i + 3] = 0; // Set alpha to 0 (transparent)
- }
- }
-
- ctx.putImageData(imageData, 0, 0);
-
- canvas.toBlob((blob) => {
- if (blob) {
- const newFile = new File([blob], file.name, { type: 'image/png' });
- setResult(newFile);
- }
- }, 'image/png');
};
+ const maxColorDistance = Math.sqrt(
+ Math.pow(255, 2) + Math.pow(255, 2) + Math.pow(255, 2)
+ );
+ const similarityThreshold = (similarity / 100) * maxColorDistance;
- processImage(input, fromRgb, Number(similarity));
- }, [input, fromColor]);
+ for (let i = 0; i < data.length; i += 4) {
+ const currentColor: [number, number, number] = [
+ data[i],
+ data[i + 1],
+ data[i + 2]
+ ];
+ if (colorDistance(currentColor, fromColor) <= similarityThreshold) {
+ data[i + 3] = 0; // Set alpha to 0 (transparent)
+ }
+ }
- return null;
+ ctx.putImageData(imageData, 0, 0);
+
+ canvas.toBlob((blob) => {
+ if (blob) {
+ const newFile = new File([blob], file.name, { type: 'image/png' });
+ setResult(newFile);
+ }
+ }, 'image/png');
+ };
+
+ processImage(input, fromRgb, Number(similarity));
};
return (
@@ -115,42 +108,33 @@ export default function ChangeColorsInPng() {
/>
}
/>
-
- {}}
- >
- {({ setFieldValue, values }) => (
-
- {input && }
-
- setFieldValue('fromColor', val)}
- description={'Replace this color (from color)'}
- />
- 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.'
- }
- />
-
- )
+ [
+ {
+ title: 'From color and similarity',
+ component: (
+
+ setFieldValue('fromColor', val)}
+ description={'Replace this color (from color)'}
+ />
+ 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.'
}
- ]}
- />
-
- )}
-
-
+ />
+
+ )
+ }
+ ]}
+ initialValues={initialValues}
+ input={input}
+ validationSchema={validationSchema}
+ />
);
}
diff --git a/src/pages/number/sum/index.tsx b/src/pages/number/sum/index.tsx
index 4a054f6..eff2e54 100644
--- a/src/pages/number/sum/index.tsx
+++ b/src/pages/number/sum/index.tsx
@@ -1,14 +1,11 @@
-import { Box, Stack } from '@mui/material';
-import React, { useContext, useEffect, useState } from 'react';
+import { Box } from '@mui/material';
+import React, { useState } from 'react';
import ToolTextInput from '../../../components/input/ToolTextInput';
import ToolTextResult from '../../../components/result/ToolTextResult';
-import { Formik, useFormikContext } from 'formik';
import * as Yup from 'yup';
import ToolOptions from '../../../components/options/ToolOptions';
import { compute, NumberExtractionType } from './service';
-import { CustomSnackBarContext } from '../../../contexts/CustomSnackBarContext';
import RadioWithTextField from '../../../components/options/RadioWithTextField';
-import ToolOptionGroups from '../../../components/options/ToolOptionGroups';
import SimpleRadio from '../../../components/options/SimpleRadio';
import CheckboxWithDesc from '../../../components/options/CheckboxWithDesc';
import ToolInputAndResult from '../../../components/ToolInputAndResult';
@@ -44,25 +41,7 @@ const extractionTypes: {
export default function SplitText() {
const [input, setInput] = useState('');
const [result, setResult] = useState('');
- // const formRef = useRef>(null);
- const { showSnackBar } = useContext(CustomSnackBarContext);
- const FormikListenerComponent = () => {
- const { values } = useFormikContext();
-
- useEffect(() => {
- try {
- const { extractionType, printRunningSum, separator } = values;
-
- setResult(compute(input, extractionType, printRunningSum, separator));
- } catch (exception: unknown) {
- if (exception instanceof Error)
- showSnackBar(exception.message, 'error');
- }
- }, [values, input]);
-
- return null; // This component doesn't render anything
- };
const validationSchema = Yup.object({
// splitSeparator: Yup.string().required('The separator is required')
});
@@ -73,81 +52,71 @@ export default function SplitText() {
input={}
result={}
/>
-
- {}}
- >
- {({ setFieldValue, values }) => (
-
-
-
- withTextField ? (
-
- setFieldValue('extractionType', type)
- }
- onTextChange={(val) =>
- setFieldValue(textValueAccessor ?? '', val)
- }
- />
- ) : (
-
- setFieldValue('extractionType', type)
- }
- fieldName={'extractionType'}
- value={values.extractionType}
- description={description}
- title={title}
- />
- )
- )
- },
- {
- title: 'Running Sum',
- component: (
-
- setFieldValue('printRunningSum', value)
- }
- />
- )
- }
- ]}
+ [
+ {
+ title: 'Number extraction',
+ component: extractionTypes.map(
+ ({
+ title,
+ description,
+ type,
+ withTextField,
+ textValueAccessor
+ }) =>
+ withTextField ? (
+
+ setFieldValue('extractionType', type)
+ }
+ onTextChange={(val) =>
+ textValueAccessor
+ ? setFieldValue(textValueAccessor, val)
+ : null
+ }
+ />
+ ) : (
+ setFieldValue('extractionType', type)}
+ fieldName={'extractionType'}
+ value={values.extractionType}
+ description={description}
+ title={title}
+ />
+ )
+ )
+ },
+ {
+ title: 'Running Sum',
+ component: (
+ setFieldValue('printRunningSum', value)}
/>
-
- )}
-
-
+ )
+ }
+ ]}
+ compute={(optionsValues, input) => {
+ const { extractionType, printRunningSum, separator } = optionsValues;
+ setResult(compute(input, extractionType, printRunningSum, separator));
+ }}
+ initialValues={initialValues}
+ input={input}
+ validationSchema={validationSchema}
+ />
);
}
diff --git a/src/pages/string/join/index.tsx b/src/pages/string/join/index.tsx
index 33fa5df..11ba287 100644
--- a/src/pages/string/join/index.tsx
+++ b/src/pages/string/join/index.tsx
@@ -16,6 +16,7 @@ import Info from './Info';
import Separator from '../../../tools/Separator';
import AllTools from '../../../components/allTools/AllTools';
import Examples from '../../../components/examples/Examples';
+import ColorSelector from '../../../components/options/ColorSelector';
const initialValues = {
joinCharacter: '',
@@ -115,23 +116,11 @@ s
export default function JoinText() {
const [input, setInput] = useState('');
- const { showSnackBar } = useContext(CustomSnackBarContext);
const [result, setResult] = useState('');
- const FormikListenerComponent = ({ input }: { input: string }) => {
- const { values } = useFormikContext();
- const { joinCharacter, deleteBlank, deleteTrailing } = values;
-
- useEffect(() => {
- try {
- setResult(mergeText(input, deleteBlank, deleteTrailing, joinCharacter));
- } catch (exception: unknown) {
- if (exception instanceof Error)
- showSnackBar(exception.message, 'error');
- }
- }, [values, input]);
-
- return null;
+ const compute = (optionsValues: typeof initialValues, input: any) => {
+ const { joinCharacter, deleteBlank, deleteTrailing } = optionsValues;
+ setResult(mergeText(input, deleteBlank, deleteTrailing, joinCharacter));
};
function changeInputResult(input: string, result: string) {
@@ -156,50 +145,39 @@ export default function JoinText() {
}
result={}
/>
-
- {}}
- >
- {({ setFieldValue, values }) => (
-
-
-
- setFieldValue(mergeOptions.accessor, value)
- }
- description={mergeOptions.description}
- />
- )
- },
- {
- title: 'Blank Lines and Trailing Spaces',
- component: blankTrailingOptions.map((option) => (
-
- setFieldValue(option.accessor, value)
- }
- description={option.description}
- />
- ))
- }
- ]}
+ [
+ {
+ title: 'Text Merged Options',
+ component: (
+
+ setFieldValue(mergeOptions.accessor, value)
+ }
+ description={mergeOptions.description}
/>
-
- )}
-
-
+ )
+ },
+ {
+ title: 'Blank Lines and Trailing Spaces',
+ component: blankTrailingOptions.map((option) => (
+ setFieldValue(option.accessor, value)}
+ description={option.description}
+ />
+ ))
+ }
+ ]}
+ initialValues={initialValues}
+ input={input}
+ validationSchema={validationSchema}
+ />
('');
const [result, setResult] = useState('');
// const formRef = useRef>(null);
- const { showSnackBar } = useContext(CustomSnackBarContext);
+ const computeExternal = (optionsValues: typeof initialValues, input: any) => {
+ const {
+ splitSeparatorType,
+ outputSeparator,
+ charBeforeChunk,
+ charAfterChunk,
+ chunksValue,
+ symbolValue,
+ regexValue,
+ lengthValue
+ } = optionsValues;
- const FormikListenerComponent = () => {
- const { values } = useFormikContext();
-
- useEffect(() => {
- try {
- const {
- splitSeparatorType,
- outputSeparator,
- charBeforeChunk,
- charAfterChunk,
- chunksValue,
- symbolValue,
- regexValue,
- lengthValue
- } = values;
-
- setResult(
- compute(
- splitSeparatorType,
- input,
- symbolValue,
- regexValue,
- Number(lengthValue),
- Number(chunksValue),
- charBeforeChunk,
- charAfterChunk,
- outputSeparator
- )
- );
- } catch (exception: unknown) {
- if (exception instanceof Error)
- showSnackBar(exception.message, 'error');
- }
- }, [values, input]);
-
- return null; // This component doesn't render anything
+ setResult(
+ compute(
+ splitSeparatorType,
+ input,
+ symbolValue,
+ regexValue,
+ Number(lengthValue),
+ Number(chunksValue),
+ charBeforeChunk,
+ charAfterChunk,
+ outputSeparator
+ )
+ );
};
const validationSchema = Yup.object({
// splitSeparator: Yup.string().required('The separator is required')
@@ -131,57 +119,42 @@ export default function SplitText() {
input={}
result={}
/>
-
- {}}
- >
- {({ setFieldValue, values }) => (
-
-
- (
-
- setFieldValue('splitSeparatorType', type)
- }
- onTextChange={(val) =>
- setFieldValue(`${type}Value`, val)
- }
- />
- )
- )
- },
- {
- title: 'Output separator options',
- component: outputOptions.map((option) => (
-
- setFieldValue(option.accessor, value)
- }
- description={option.description}
- />
- ))
- }
- ]}
+ [
+ {
+ title: 'Split separator options',
+ component: splitOperators.map(({ title, description, type }) => (
+
+ setFieldValue('splitSeparatorType', type)
+ }
+ onTextChange={(val) => setFieldValue(`${type}Value`, val)}
/>
-
- )}
-
-
+ ))
+ },
+ {
+ title: 'Output separator options',
+ component: outputOptions.map((option) => (
+ setFieldValue(option.accessor, value)}
+ description={option.description}
+ />
+ ))
+ }
+ ]}
+ initialValues={initialValues}
+ input={input}
+ validationSchema={validationSchema}
+ />
);
}
diff --git a/src/pages/string/to-morse/index.tsx b/src/pages/string/to-morse/index.tsx
index 3894e9d..c06d1aa 100644
--- a/src/pages/string/to-morse/index.tsx
+++ b/src/pages/string/to-morse/index.tsx
@@ -1,15 +1,11 @@
-import { Box, Stack } from '@mui/material';
-import Grid from '@mui/material/Grid';
-import React, { useContext, useEffect, useState } from 'react';
+import { Box } from '@mui/material';
+import React, { useState } from 'react';
import ToolTextInput from '../../../components/input/ToolTextInput';
import ToolTextResult from '../../../components/result/ToolTextResult';
-import { Formik, useFormikContext } from 'formik';
import * as Yup from 'yup';
import ToolOptions from '../../../components/options/ToolOptions';
import { compute } from './service';
-import { CustomSnackBarContext } from '../../../contexts/CustomSnackBarContext';
import TextFieldWithDesc from '../../../components/options/TextFieldWithDesc';
-import ToolOptionGroups from '../../../components/options/ToolOptionGroups';
import ToolInputAndResult from '../../../components/ToolInputAndResult';
const initialValues = {
@@ -21,23 +17,9 @@ export default function ToMorse() {
const [input, setInput] = useState('');
const [result, setResult] = useState('');
// const formRef = useRef>(null);
- const { showSnackBar } = useContext(CustomSnackBarContext);
-
- const FormikListenerComponent = () => {
- const { values } = useFormikContext();
-
- useEffect(() => {
- try {
- const { dotSymbol, dashSymbol } = values;
-
- setResult(compute(input, dotSymbol, dashSymbol));
- } catch (exception: unknown) {
- if (exception instanceof Error)
- showSnackBar(exception.message, 'error');
- }
- }, [values, input]);
-
- return null; // This component doesn't render anything
+ const computeOptions = (optionsValues: typeof initialValues, input: any) => {
+ const { dotSymbol, dashSymbol } = optionsValues;
+ setResult(compute(input, dotSymbol, dashSymbol));
};
const validationSchema = Yup.object({
// splitSeparator: Yup.string().required('The separator is required')
@@ -49,47 +31,38 @@ export default function ToMorse() {
input={}
result={}
/>
-
- {}}
- >
- {({ setFieldValue, values }) => (
-
-
- setFieldValue('dotSymbol', val)}
- />
- )
- },
- {
- title: 'Long Signal',
- component: (
- setFieldValue('dashSymbol', val)}
- />
- )
- }
- ]}
+ [
+ {
+ title: 'Short Signal',
+ component: (
+ setFieldValue('dotSymbol', val)}
/>
-
- )}
-
-
+ )
+ },
+ {
+ title: 'Long Signal',
+ component: (
+ setFieldValue('dashSymbol', val)}
+ />
+ )
+ }
+ ]}
+ initialValues={initialValues}
+ input={input}
+ validationSchema={validationSchema}
+ />
);
}