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

chore: formik updateField

Browse Source
This commit is contained in:
Ibrahima G. Coulibaly
2024-06-27 21:25:11 +01:00
parent a6eb5d59e9
commit da93452bd3
12 changed files with 66 additions and 49 deletions
Download Patch File Download Diff File Expand all files Collapse all files

37
.idea/workspace.xml generated
View File

@@ -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/sum/index.tsx" beforeDir="false" afterPath="$PROJECT_DIR$/src/pages/number/sum/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/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 />

5
src/components/options/RadioWithTextField.tsx
View File

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

6
src/components/options/TextFieldWithDesc.tsx
View File

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

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

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

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

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

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

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

18
src/pages/list/sort/index.tsx
View File

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

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

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

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

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

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

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

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

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

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

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