marcel/omni-tools
1
0
Fork 0
mirror of https://github.com/iib0011/omni-tools.git synced 2025-09-19 14:09:31 +02:00
Code Issues Packages Projects Releases Wiki Activity

fix: formik updateField

Browse Source
This commit is contained in:
Ibrahima G. Coulibaly
2024-06-27 21:52:41 +01:00
parent da93452bd3
commit ac63c0e357
10 changed files with 89 additions and 58 deletions
Download Patch File Download Diff File Expand all files Collapse all files

58
src/components/options/ToolOptions.tsx
View File

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

9
src/pages/image/png/change-colors-in-png/index.tsx
View File

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

7
src/pages/image/png/create-transparent/index.tsx
View File

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

10
src/pages/number/generate/index.tsx
View File

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

10
src/pages/number/sum/index.tsx
View File

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

6
src/pages/string/join/index.tsx
View File

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

8
src/pages/string/split/index.tsx
View File

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

6
src/pages/string/to-morse/index.tsx
View File

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

5
src/pages/video/gif/change-speed/index.tsx
View File

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