diff --git a/.idea/workspace.xml b/.idea/workspace.xml
index d9ee357..7dc080b 100644
--- a/.idea/workspace.xml
+++ b/.idea/workspace.xml
@@ -4,18 +4,20 @@
-
+
-
-
-
-
-
-
-
-
-
-
+
+
+
+
+
+
+
+
+
+
+
+
@@ -343,15 +345,7 @@
-
-
-
-
- 1740324026721
-
-
-
- 1740324026721
+
@@ -737,7 +731,15 @@
1741540939154
-
+
+
+ 1741542318259
+
+
+
+ 1741542318259
+
+
@@ -784,7 +786,6 @@
-
@@ -809,7 +810,8 @@
-
+
+
diff --git a/src/pages/tools/image/png/compress-png/index.tsx b/src/pages/tools/image/png/compress-png/index.tsx
index 1208521..a6939bb 100644
--- a/src/pages/tools/image/png/compress-png/index.tsx
+++ b/src/pages/tools/image/png/compress-png/index.tsx
@@ -3,11 +3,11 @@ 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 TextFieldWithDesc from 'components/options/TextFieldWithDesc';
-import ToolInputAndResult from '@components/ToolInputAndResult';
import imageCompression from 'browser-image-compression';
import Typography from '@mui/material/Typography';
+import ToolContent from '@components/ToolContent';
+import { ToolComponentProps } from '@tools/defineTool';
const initialValues = {
rate: '50'
@@ -16,7 +16,7 @@ const validationSchema = Yup.object({
// splitSeparator: Yup.string().required('The separator is required')
});
-export default function ChangeColorsInPng() {
+export default function ChangeColorsInPng({ title }: ToolComponentProps) {
const [input, setInput] = useState(null);
const [result, setResult] = useState(null);
const [originalSize, setOriginalSize] = useState(null); // Store original file size
@@ -52,62 +52,60 @@ export default function ChangeColorsInPng() {
};
return (
-
-
- }
- result={
-
- }
- />
- [
- {
- title: 'Compression options',
- component: (
+
+ }
+ resultComponent={
+
+ }
+ initialValues={initialValues}
+ getGroups={({ values, updateField }) => [
+ {
+ title: 'Compression options',
+ component: (
+
+ updateField('rate', val)}
+ description={'Compression rate (1-100)'}
+ />
+
+ )
+ },
+ {
+ title: 'File sizes',
+ component: (
+
- updateField('rate', val)}
- description={'Compression rate (1-100)'}
- />
+ {originalSize !== null && (
+
+ Original Size: {(originalSize / 1024).toFixed(2)} KB
+
+ )}
+ {compressedSize !== null && (
+
+ Compressed Size: {(compressedSize / 1024).toFixed(2)} KB
+
+ )}
- )
- },
- {
- title: 'File sizes',
- component: (
-
-
- {originalSize !== null && (
-
- Original Size: {(originalSize / 1024).toFixed(2)} KB
-
- )}
- {compressedSize !== null && (
-
- Compressed Size: {(compressedSize / 1024).toFixed(2)} KB
-
- )}
-
-
- )
- }
- ]}
- initialValues={initialValues}
- input={input}
- />
-
+
+ )
+ }
+ ]}
+ compute={compute}
+ setInput={setInput}
+ />
);
}
diff --git a/src/pages/tools/image/png/convert-jgp-to-png/index.tsx b/src/pages/tools/image/png/convert-jgp-to-png/index.tsx
index 1d213bf..881f387 100644
--- a/src/pages/tools/image/png/convert-jgp-to-png/index.tsx
+++ b/src/pages/tools/image/png/convert-jgp-to-png/index.tsx
@@ -1,15 +1,15 @@
import { Box } from '@mui/material';
-import ToolInputAndResult from 'components/ToolInputAndResult';
import ToolFileInput from 'components/input/ToolFileInput';
import CheckboxWithDesc from 'components/options/CheckboxWithDesc';
import ColorSelector from 'components/options/ColorSelector';
import TextFieldWithDesc from 'components/options/TextFieldWithDesc';
-import ToolOptions from 'components/options/ToolOptions';
import ToolFileResult from 'components/result/ToolFileResult';
import Color from 'color';
import React, { useState } from 'react';
import * as Yup from 'yup';
import { areColorsSimilar } from 'utils/color';
+import ToolContent from '@components/ToolContent';
+import { ToolComponentProps } from '@tools/defineTool';
const initialValues = {
enableTransparency: false,
@@ -19,7 +19,7 @@ const initialValues = {
const validationSchema = Yup.object({
// splitSeparator: Yup.string().required('The separator is required')
});
-export default function ConvertJgpToPng() {
+export default function ConvertJgpToPng({ title }: ToolComponentProps) {
const [input, setInput] = useState(null);
const [result, setResult] = useState(null);
@@ -97,58 +97,52 @@ export default function ConvertJgpToPng() {
};
return (
-
-
+
+ }
+ resultComponent={
+
+ }
+ initialValues={initialValues}
+ getGroups={({ values, updateField }) => [
+ {
+ title: 'PNG Transparency Color',
+ component: (
+
+ updateField('enableTransparency', value)}
+ description="Make the color below transparent."
+ />
+ updateField('color', val)}
+ description={'With this color (to color)'}
+ inputProps={{ 'data-testid': 'color-input' }}
+ />
+ updateField('similarity', val)}
+ description={
+ 'Match this % of similar. For example, 10% white will match white and a little bit of gray.'
+ }
+ />
+
+ )
}
- result={
-
- }
- />
- [
- {
- title: 'PNG Transparency Color',
- component: (
-
- updateField('enableTransparency', value)}
- description="Make the color below transparent."
- />
- updateField('color', val)}
- description={'With this color (to color)'}
- inputProps={{ 'data-testid': 'color-input' }}
- />
- updateField('similarity', val)}
- description={
- 'Match this % of similar. For example, 10% white will match white and a little bit of gray.'
- }
- />
-
- )
- }
- ]}
- initialValues={initialValues}
- input={input}
- />
-
+ ]}
+ compute={compute}
+ setInput={setInput}
+ />
);
}
diff --git a/src/pages/tools/image/png/create-transparent/index.tsx b/src/pages/tools/image/png/create-transparent/index.tsx
index 9021c58..9976810 100644
--- a/src/pages/tools/image/png/create-transparent/index.tsx
+++ b/src/pages/tools/image/png/create-transparent/index.tsx
@@ -3,21 +3,24 @@ 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 ColorSelector from '@components/options/ColorSelector';
import Color from 'color';
import TextFieldWithDesc from 'components/options/TextFieldWithDesc';
-import ToolInputAndResult from '@components/ToolInputAndResult';
import { areColorsSimilar } from 'utils/color';
+import ToolContent from '@components/ToolContent';
+import { ToolComponentProps } from '@tools/defineTool';
+import { GetGroupsType } from '@components/options/ToolOptions';
const initialValues = {
fromColor: 'white',
similarity: '10'
};
+
const validationSchema = Yup.object({
// splitSeparator: Yup.string().required('The separator is required')
});
-export default function ChangeColorsInPng() {
+
+export default function CreateTransparent({ title }: ToolComponentProps) {
const [input, setInput] = useState(null);
const [result, setResult] = useState(null);
@@ -76,52 +79,60 @@ export default function ChangeColorsInPng() {
processImage(input, fromRgb, Number(similarity));
};
+ const getGroups: GetGroupsType = ({
+ values,
+ updateField
+ }) => [
+ {
+ title: 'From color and similarity',
+ component: (
+
+ updateField('fromColor', val)}
+ description={'Replace this color (from color)'}
+ inputProps={{ 'data-testid': 'color-input' }}
+ />
+ 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.'
+ }
+ />
+
+ )
+ }
+ ];
+
return (
-
-
- }
- result={
-
- }
- />
- [
- {
- title: 'From color and similarity',
- component: (
-
- updateField('fromColor', val)}
- description={'Replace this color (from color)'}
- inputProps={{ 'data-testid': 'color-input' }}
- />
- 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.'
- }
- />
-
- )
- }
- ]}
- initialValues={initialValues}
- input={input}
- />
-
+
+ }
+ resultComponent={
+
+ }
+ initialValues={initialValues}
+ getGroups={getGroups}
+ compute={compute}
+ input={input}
+ validationSchema={validationSchema}
+ toolInfo={{
+ title: 'Create Transparent PNG',
+ description:
+ 'This tool allows you to make specific colors in a PNG image transparent. You can select the color to replace and adjust the similarity threshold to include similar colors.'
+ }}
+ />
);
}
diff --git a/src/pages/tools/json/prettify/index.tsx b/src/pages/tools/json/prettify/index.tsx
index e1c21cc..ce777ab 100644
--- a/src/pages/tools/json/prettify/index.tsx
+++ b/src/pages/tools/json/prettify/index.tsx
@@ -2,10 +2,7 @@ import { Box } from '@mui/material';
import React, { useRef, useState } from 'react';
import ToolTextInput from '@components/input/ToolTextInput';
import ToolTextResult from '@components/result/ToolTextResult';
-import ToolOptions, { GetGroupsType } from '@components/options/ToolOptions';
import { beautifyJson } from './service';
-import ToolInputAndResult from '@components/ToolInputAndResult';
-
import ToolInfo from '@components/ToolInfo';
import Separator from '@components/Separator';
import ToolExamples, {
@@ -16,6 +13,7 @@ import { ToolComponentProps } from '@tools/defineTool';
import RadioWithTextField from '@components/options/RadioWithTextField';
import SimpleRadio from '@components/options/SimpleRadio';
import { isNumber, updateNumberField } from '../../../../utils/string';
+import ToolContent from '@components/ToolContent';
type InitialValuesType = {
indentationType: 'tab' | 'space';
@@ -119,72 +117,63 @@ const exampleCards: CardExampleType[] = [
export default function PrettifyJson({ title }: ToolComponentProps) {
const [input, setInput] = useState('');
const [result, setResult] = useState('');
- const formRef = useRef>(null);
+
const compute = (optionsValues: InitialValuesType, input: any) => {
const { indentationType, spacesCount } = optionsValues;
if (input) setResult(beautifyJson(input, indentationType, spacesCount));
};
- const getGroups: GetGroupsType = ({
- values,
- updateField
- }) => [
- {
- title: 'Indentation',
- component: (
-
- updateField('indentationType', 'space')}
- onTextChange={(val) =>
- updateNumberField(val, 'spacesCount', updateField)
- }
- />
- updateField('indentationType', 'tab')}
- checked={values.indentationType === 'tab'}
- description={'Indent output with tabs.'}
- title={'Use Tabs'}
- />
-
- )
- }
- ];
return (
-
}
- result={}
- />
-
+ }
initialValues={initialValues}
- input={input}
+ getGroups={({ values, updateField }) => [
+ {
+ title: 'Indentation',
+ component: (
+
+ updateField('indentationType', 'space')}
+ onTextChange={(val) =>
+ updateNumberField(val, 'spacesCount', updateField)
+ }
+ />
+ updateField('indentationType', 'tab')}
+ checked={values.indentationType === 'tab'}
+ description={'Indent output with tabs.'}
+ title={'Use Tabs'}
+ />
+
+ )
+ }
+ ]}
+ compute={compute}
+ setInput={setInput}
+ exampleCards={exampleCards}
/>
-
);
}
diff --git a/src/pages/tools/list/find-most-popular/index.tsx b/src/pages/tools/list/find-most-popular/index.tsx
index c3a746d..7e2f597 100644
--- a/src/pages/tools/list/find-most-popular/index.tsx
+++ b/src/pages/tools/list/find-most-popular/index.tsx
@@ -2,18 +2,18 @@ import { Box } from '@mui/material';
import React, { useState } from 'react';
import ToolTextInput from '@components/input/ToolTextInput';
import ToolTextResult from '@components/result/ToolTextResult';
-import ToolOptions from '@components/options/ToolOptions';
import {
DisplayFormat,
SortingMethod,
SplitOperatorType,
TopItemsList
} from './service';
-import ToolInputAndResult from '@components/ToolInputAndResult';
import SimpleRadio from '@components/options/SimpleRadio';
import TextFieldWithDesc from '@components/options/TextFieldWithDesc';
import CheckboxWithDesc from '@components/options/CheckboxWithDesc';
import SelectWithDesc from '@components/options/SelectWithDesc';
+import ToolContent from '@components/ToolContent';
+import { ToolComponentProps } from '@tools/defineTool';
const initialValues = {
splitSeparatorType: 'symbol' as SplitOperatorType,
@@ -41,7 +41,7 @@ const splitOperators: {
}
];
-export default function FindMostPopular() {
+export default function FindMostPopular({ title }: ToolComponentProps) {
const [input, setInput] = useState('');
const [result, setResult] = useState('');
const compute = (optionsValues: typeof initialValues, input: any) => {
@@ -70,98 +70,94 @@ export default function FindMostPopular() {
};
return (
-
-
+
+ }
+ resultComponent={
+
+ }
+ initialValues={initialValues}
+ getGroups={({ values, updateField }) => [
+ {
+ title: 'How to Extract List Items?',
+ component: (
+
+ {splitOperators.map(({ title, description, type }) => (
+ updateField('splitSeparatorType', type)}
+ title={title}
+ description={description}
+ checked={values.splitSeparatorType === type}
+ />
+ ))}
+ updateField('splitSeparator', val)}
+ />
+
+ )
+ },
+ {
+ title: 'Item comparison',
+ component: (
+
+ updateField('deleteEmptyItems', value)}
+ />
+ updateField('trimItems', value)}
+ />
+ updateField('ignoreItemCase', value)}
+ />
+
+ )
+ },
+ {
+ title: 'Top item output format',
+ component: (
+
+ updateField('displayFormat', value)}
+ description={'How to display the most popular list items?'}
+ />
+ updateField('sortingMethod', value)}
+ description={'Select a sorting method.'}
+ />
+
+ )
}
- result={}
- />
- [
- {
- title: 'How to Extract List Items?',
- component: (
-
- {splitOperators.map(({ title, description, type }) => (
- updateField('splitSeparatorType', type)}
- title={title}
- description={description}
- checked={values.splitSeparatorType === type}
- />
- ))}
- updateField('splitSeparator', val)}
- />
-
- )
- },
- {
- title: 'Item comparison',
- component: (
-
- updateField('deleteEmptyItems', value)}
- />
- updateField('trimItems', value)}
- />
- updateField('ignoreItemCase', value)}
- />
-
- )
- },
- {
- title: 'Top item output format',
- component: (
-
- updateField('displayFormat', value)}
- description={'How to display the most popular list items?'}
- />
- updateField('sortingMethod', value)}
- description={'Select a sorting method.'}
- />
-
- )
- }
- ]}
- initialValues={initialValues}
- input={input}
- />
-
+ ]}
+ compute={compute}
+ setInput={setInput}
+ />
);
}
diff --git a/src/pages/tools/list/group/index.tsx b/src/pages/tools/list/group/index.tsx
index 23c9576..e7f70e6 100644
--- a/src/pages/tools/list/group/index.tsx
+++ b/src/pages/tools/list/group/index.tsx
@@ -2,13 +2,13 @@ import { Box } from '@mui/material';
import React, { useState } from 'react';
import ToolTextInput from '@components/input/ToolTextInput';
import ToolTextResult from '@components/result/ToolTextResult';
-import ToolOptions from '@components/options/ToolOptions';
import { groupList, SplitOperatorType } from './service';
-import ToolInputAndResult from '@components/ToolInputAndResult';
import SimpleRadio from '@components/options/SimpleRadio';
import TextFieldWithDesc from '@components/options/TextFieldWithDesc';
import CheckboxWithDesc from '@components/options/CheckboxWithDesc';
import { formatNumber } from '../../../../utils/number';
+import ToolContent from '@components/ToolContent';
+import { ToolComponentProps } from '@tools/defineTool';
const initialValues = {
splitOperatorType: 'symbol' as SplitOperatorType,
@@ -39,7 +39,7 @@ const splitOperators: {
}
];
-export default function FindUnique() {
+export default function FindUnique({ title }: ToolComponentProps) {
const [input, setInput] = useState('');
const [result, setResult] = useState('');
const compute = (optionsValues: typeof initialValues, input: any) => {
@@ -74,110 +74,106 @@ export default function FindUnique() {
};
return (
-
-
+
+ }
+ resultComponent={
+
+ }
+ initialValues={initialValues}
+ getGroups={({ values, updateField }) => [
+ {
+ title: 'Input Item Separator',
+ component: (
+
+ {splitOperators.map(({ title, description, type }) => (
+ updateField('splitOperatorType', type)}
+ title={title}
+ description={description}
+ checked={values.splitOperatorType === type}
+ />
+ ))}
+ updateField('splitSeparator', val)}
+ />
+
+ )
+ },
+ {
+ title: 'Group Size and Separators',
+ component: (
+
+
+ updateField('groupNumber', formatNumber(value, 1))
+ }
+ />
+ updateField('itemSeparator', value)}
+ />
+ updateField('groupSeparator', value)}
+ />
+ updateField('leftWrap', value)}
+ />
+ updateField('rightWrap', value)}
+ />
+
+ )
+ },
+ {
+ title: 'Empty Items and Padding',
+ component: (
+
+ updateField('deleteEmptyItems', value)}
+ />
+ updateField('padNonFullGroup', value)}
+ />
+ updateField('paddingChar', value)}
+ />
+
+ )
}
- result={}
- />
- [
- {
- title: 'Input Item Separator',
- component: (
-
- {splitOperators.map(({ title, description, type }) => (
- updateField('splitOperatorType', type)}
- title={title}
- description={description}
- checked={values.splitOperatorType === type}
- />
- ))}
- updateField('splitSeparator', val)}
- />
-
- )
- },
- {
- title: 'Group Size and Separators',
- component: (
-
-
- updateField('groupNumber', formatNumber(value, 1))
- }
- />
- updateField('itemSeparator', value)}
- />
- updateField('groupSeparator', value)}
- />
- updateField('leftWrap', value)}
- />
- updateField('rightWrap', value)}
- />
-
- )
- },
- {
- title: 'Empty Items and Padding',
- component: (
-
- updateField('deleteEmptyItems', value)}
- />
- updateField('padNonFullGroup', value)}
- />
- updateField('paddingChar', value)}
- />
-
- )
- }
- ]}
- initialValues={initialValues}
- input={input}
- />
-
+ ]}
+ compute={compute}
+ setInput={setInput}
+ />
);
}
diff --git a/src/pages/tools/list/rotate/index.tsx b/src/pages/tools/list/rotate/index.tsx
index bca71d6..1535e9f 100644
--- a/src/pages/tools/list/rotate/index.tsx
+++ b/src/pages/tools/list/rotate/index.tsx
@@ -2,12 +2,12 @@ import { Box } from '@mui/material';
import React, { useState } from 'react';
import ToolTextInput from '@components/input/ToolTextInput';
import ToolTextResult from '@components/result/ToolTextResult';
-import ToolOptions from '@components/options/ToolOptions';
import { rotateList, SplitOperatorType } from './service';
-import ToolInputAndResult from '@components/ToolInputAndResult';
import SimpleRadio from '@components/options/SimpleRadio';
import TextFieldWithDesc from '@components/options/TextFieldWithDesc';
import { formatNumber } from '../../../../utils/number';
+import ToolContent from '@components/ToolContent';
+import { ToolComponentProps } from '@tools/defineTool';
const initialValues = {
splitOperatorType: 'symbol' as SplitOperatorType,
@@ -52,7 +52,7 @@ const rotationDirections: {
}
];
-export default function Rotate() {
+export default function Rotate({ title }: ToolComponentProps) {
const [input, setInput] = useState('');
const [result, setResult] = useState('');
const compute = (optionsValues: typeof initialValues, input: any) => {
@@ -72,82 +72,74 @@ export default function Rotate() {
};
return (
-
-
+
+ }
+ resultComponent={}
+ initialValues={initialValues}
+ getGroups={({ values, updateField }) => [
+ {
+ title: 'Item split mode',
+ component: (
+
+ {splitOperators.map(({ title, description, type }) => (
+ updateField('splitOperatorType', type)}
+ title={title}
+ description={description}
+ checked={values.splitOperatorType === type}
+ />
+ ))}
+ updateField('splitSeparator', val)}
+ />
+
+ )
+ },
+ {
+ title: 'Rotation Direction and Count',
+ component: (
+
+ {rotationDirections.map(({ title, description, value }) => (
+ updateField('right', value)}
+ title={title}
+ description={description}
+ checked={values.right === value}
+ />
+ ))}
+ updateField('step', formatNumber(val, 1))}
+ />
+
+ )
+ },
+ {
+ title: 'Rotated List Joining Symbol',
+ component: (
+
+ updateField('joinSeparator', value)}
+ description={
+ 'Enter the character that goes between items in the rotated list.'
+ }
+ />
+
+ )
}
- result={}
- />
- [
- {
- title: 'Item split mode',
- component: (
-
- {splitOperators.map(({ title, description, type }) => (
- updateField('splitOperatorType', type)}
- title={title}
- description={description}
- checked={values.splitOperatorType === type}
- />
- ))}
- updateField('splitSeparator', val)}
- />
-
- )
- },
- {
- title: 'Rotation Direction and Count',
- component: (
-
- {rotationDirections.map(({ title, description, value }) => (
- updateField('right', value)}
- title={title}
- description={description}
- checked={values.right === value}
- />
- ))}
-
- updateField('step', formatNumber(val, 1))
- }
- />
-
- )
- },
- {
- title: 'Rotated List Joining Symbol',
- component: (
-
- updateField('joinSeparator', value)}
- description={
- 'Enter the character that goes between items in the rotated list.'
- }
- />
-
- )
- }
- ]}
- initialValues={initialValues}
- input={input}
- />
-
+ ]}
+ compute={compute}
+ setInput={setInput}
+ />
);
}
diff --git a/src/pages/tools/list/sort/index.tsx b/src/pages/tools/list/sort/index.tsx
index 46b7df4..81e4414 100644
--- a/src/pages/tools/list/sort/index.tsx
+++ b/src/pages/tools/list/sort/index.tsx
@@ -2,13 +2,13 @@ import { Box } from '@mui/material';
import React, { useState } from 'react';
import ToolTextInput from '@components/input/ToolTextInput';
import ToolTextResult from '@components/result/ToolTextResult';
-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';
import CheckboxWithDesc from '@components/options/CheckboxWithDesc';
import SelectWithDesc from '@components/options/SelectWithDesc';
+import ToolContent from '@components/ToolContent';
+import { ToolComponentProps } from '@tools/defineTool';
const initialValues = {
splitSeparatorType: 'symbol' as SplitOperatorType,
@@ -36,7 +36,7 @@ const splitOperators: {
}
];
-export default function SplitText() {
+export default function SplitText({ title }: ToolComponentProps) {
const [input, setInput] = useState('');
const [result, setResult] = useState('');
const compute = (optionsValues: typeof initialValues, input: any) => {
@@ -65,101 +65,95 @@ export default function SplitText() {
};
return (
-
-
+
+ }
+ resultComponent={}
+ initialValues={initialValues}
+ getGroups={({ values, updateField }) => [
+ {
+ title: 'Input item separator',
+ component: (
+
+ {splitOperators.map(({ title, description, type }) => (
+ updateField('splitSeparatorType', type)}
+ title={title}
+ description={description}
+ checked={values.splitSeparatorType === type}
+ />
+ ))}
+ updateField('splitSeparator', val)}
+ />
+
+ )
+ },
+ {
+ title: 'Sort method',
+ component: (
+
+ updateField('sortingMethod', value)}
+ description={'Select a sorting method.'}
+ />
+ {
+ updateField('increasing', value);
+ }}
+ description={'Select a sorting order.'}
+ />
+ updateField('caseSensitive', val)}
+ />
+
+ )
+ },
+ {
+ title: 'Sorted item properties',
+ component: (
+
+ updateField('joinSeparator', val)}
+ />
+ updateField('removeDuplicated', val)}
+ />
+
+ )
}
- result={}
- />
- [
- {
- title: 'Input item separator',
- component: (
-
- {splitOperators.map(({ title, description, type }) => (
- updateField('splitSeparatorType', type)}
- title={title}
- description={description}
- checked={values.splitSeparatorType === type}
- />
- ))}
- updateField('splitSeparator', val)}
- />
-
- )
- },
- {
- title: 'Sort method',
- component: (
-
- updateField('sortingMethod', value)}
- description={'Select a sorting method.'}
- />
- {
- updateField('increasing', value);
- }}
- description={'Select a sorting order.'}
- />
- updateField('caseSensitive', val)}
- />
-
- )
- },
- {
- title: 'Sorted item properties',
- component: (
-
- updateField('joinSeparator', val)}
- />
- updateField('removeDuplicated', val)}
- />
-
- )
- }
- ]}
- initialValues={initialValues}
- input={input}
- />
-
+ ]}
+ compute={compute}
+ setInput={setInput}
+ />
);
}
diff --git a/src/pages/tools/number/generate/index.tsx b/src/pages/tools/number/generate/index.tsx
index e643764..7f99d62 100644
--- a/src/pages/tools/number/generate/index.tsx
+++ b/src/pages/tools/number/generate/index.tsx
@@ -1,10 +1,10 @@
import { Box } from '@mui/material';
import React, { useState } from 'react';
import ToolTextResult from '@components/result/ToolTextResult';
-import ToolOptions from '@components/options/ToolOptions';
import { listOfIntegers } from './service';
-import ToolInputAndResult from '@components/ToolInputAndResult';
import TextFieldWithDesc from '@components/options/TextFieldWithDesc';
+import ToolContent from '@components/ToolContent';
+import { ToolComponentProps } from '@tools/defineTool';
const initialValues = {
firstValue: '1',
@@ -12,68 +12,69 @@ const initialValues = {
step: '1',
separator: '\\n'
};
-export default function SplitText() {
+
+export default function GenerateNumbers({ title }: ToolComponentProps) {
const [result, setResult] = useState('');
+ const compute = (optionsValues: typeof initialValues) => {
+ const { firstValue, numberOfNumbers, separator, step } = optionsValues;
+ setResult(
+ listOfIntegers(
+ Number(firstValue),
+ Number(numberOfNumbers),
+ Number(step),
+ separator
+ )
+ );
+ };
+
return (
-
- }
- />
- [
- {
- title: 'Arithmetic sequence option',
- component: (
-
- updateField('firstValue', val)}
- type={'number'}
- />
- updateField('step', val)}
- type={'number'}
- />
- updateField('numberOfNumbers', val)}
- type={'number'}
- />
-
- )
- },
- {
- title: 'Separator',
- component: (
+ [
+ {
+ title: 'Arithmetic sequence option',
+ component: (
+
updateField('separator', val)}
+ description={'Start sequence from this number.'}
+ value={values.firstValue}
+ onOwnChange={(val) => updateField('firstValue', val)}
+ type={'number'}
/>
- )
- }
- ]}
- compute={(optionsValues) => {
- const { firstValue, numberOfNumbers, separator, step } =
- optionsValues;
- setResult(
- listOfIntegers(
- Number(firstValue),
- Number(numberOfNumbers),
- Number(step),
- separator
- )
- );
- }}
- initialValues={initialValues}
- />
-
+ updateField('step', val)}
+ type={'number'}
+ />
+ updateField('numberOfNumbers', val)}
+ type={'number'}
+ />
+
+ )
+ },
+ {
+ title: 'Separator',
+ component: (
+ updateField('separator', val)}
+ />
+ )
+ }
+ ]}
+ compute={compute}
+ resultComponent={
+
+ }
+ />
);
}
diff --git a/src/pages/tools/string/remove-duplicate-lines/index.tsx b/src/pages/tools/string/remove-duplicate-lines/index.tsx
index 06a6caf..9bb2f56 100644
--- a/src/pages/tools/string/remove-duplicate-lines/index.tsx
+++ b/src/pages/tools/string/remove-duplicate-lines/index.tsx
@@ -2,10 +2,8 @@ import { Box } from '@mui/material';
import React, { useRef, useState } from 'react';
import ToolTextInput from '@components/input/ToolTextInput';
import ToolTextResult from '@components/result/ToolTextResult';
-import ToolOptions, { GetGroupsType } from '@components/options/ToolOptions';
import SimpleRadio from '@components/options/SimpleRadio';
import CheckboxWithDesc from '@components/options/CheckboxWithDesc';
-import ToolInputAndResult from '@components/ToolInputAndResult';
import ToolExamples, {
CardExampleType
} from '@components/examples/ToolExamples';
@@ -16,6 +14,7 @@ import removeDuplicateLines, {
DuplicateRemoverOptions,
NewlineOption
} from './service';
+import ToolContent from '@components/ToolContent';
// Initial values for our form
const initialValues: DuplicateRemoverOptions = {
@@ -174,7 +173,6 @@ Elderberry`,
export default function RemoveDuplicateLines({ title }: ToolComponentProps) {
const [input, setInput] = useState('');
const [result, setResult] = useState('');
- const formRef = useRef>(null);
const computeExternal = (
optionsValues: typeof initialValues,
@@ -183,78 +181,65 @@ export default function RemoveDuplicateLines({ title }: ToolComponentProps) {
setResult(removeDuplicateLines(inputText, optionsValues));
};
- const getGroups: GetGroupsType = ({
- values,
- updateField
- }) => [
- {
- title: 'Operation Mode',
- component: operationModes.map(({ title, description, value }) => (
- updateField('mode', value)}
- />
- ))
- },
- {
- title: 'Newlines, Tabs and Spaces',
- component: [
- ...newlineOptions.map(({ title, description, value }) => (
- updateField('newlines', value)}
- />
- )),
- updateField('trimTextLines', checked)}
- />
- ]
- },
- {
- title: 'Sort Lines',
- component: [
- updateField('sortLines', checked)}
- />
- ]
- }
- ];
-
return (
-
- }
- result={
-
+ }
+ resultComponent={
+
+ }
+ initialValues={initialValues}
+ getGroups={({ values, updateField }) => [
+ {
+ title: 'Operation Mode',
+ component: operationModes.map(({ title, description, value }) => (
+ updateField('mode', value)}
+ />
+ ))
+ },
+ {
+ title: 'Newlines, Tabs and Spaces',
+ component: [
+ ...newlineOptions.map(({ title, description, value }) => (
+ updateField('newlines', value)}
+ />
+ )),
+ updateField('trimTextLines', checked)}
+ />
+ ]
+ },
+ {
+ title: 'Sort Lines',
+ component: [
+ updateField('sortLines', checked)}
+ />
+ ]
}
- />
-
-
-
+ ]}
+ compute={computeExternal}
+ setInput={setInput}
+ exampleCards={exampleCards}
+ />
);
}
diff --git a/src/pages/tools/string/split/index.tsx b/src/pages/tools/string/split/index.tsx
index 4c847ad..b147e32 100644
--- a/src/pages/tools/string/split/index.tsx
+++ b/src/pages/tools/string/split/index.tsx
@@ -2,16 +2,15 @@ import { Box } from '@mui/material';
import React, { useRef, useState } from 'react';
import ToolTextInput from '@components/input/ToolTextInput';
import ToolTextResult from '@components/result/ToolTextResult';
-import ToolOptions, { GetGroupsType } from '@components/options/ToolOptions';
import { compute, SplitOperatorType } from './service';
import RadioWithTextField from '@components/options/RadioWithTextField';
import TextFieldWithDesc from '@components/options/TextFieldWithDesc';
-import ToolInputAndResult from '@components/ToolInputAndResult';
import ToolExamples, {
CardExampleType
} from '@components/examples/ToolExamples';
import { ToolComponentProps } from '@tools/defineTool';
import { FormikProps } from 'formik';
+import ToolContent from '@components/ToolContent';
const initialValues = {
splitSeparatorType: 'symbol' as SplitOperatorType,
@@ -135,8 +134,11 @@ easy`,
export default function SplitText({ title }: ToolComponentProps) {
const [input, setInput] = useState('');
const [result, setResult] = useState('');
- const formRef = useRef>(null);
- const computeExternal = (optionsValues: typeof initialValues, input: any) => {
+
+ const computeExternal = (
+ optionsValues: typeof initialValues,
+ input: string
+ ) => {
const {
splitSeparatorType,
outputSeparator,
@@ -163,56 +165,44 @@ export default function SplitText({ title }: ToolComponentProps) {
);
};
- const getGroups: GetGroupsType = ({
- values,
- updateField
- }) => [
- {
- title: 'Split separator options',
- component: splitOperators.map(({ title, description, type }) => (
- updateField('splitSeparatorType', type)}
- onTextChange={(val) => updateField(`${type}Value`, val)}
- />
- ))
- },
- {
- title: 'Output separator options',
- component: outputOptions.map((option) => (
- updateField(option.accessor, value)}
- description={option.description}
- />
- ))
- }
- ];
return (
-
- }
- result={}
- />
-
-
-
+ }
+ resultComponent={}
+ initialValues={initialValues}
+ getGroups={({ values, updateField }) => [
+ {
+ title: 'Split separator options',
+ component: splitOperators.map(({ title, description, type }) => (
+ updateField('splitSeparatorType', type)}
+ onTextChange={(val) => updateField(`${type}Value`, val)}
+ />
+ ))
+ },
+ {
+ title: 'Output separator options',
+ component: outputOptions.map((option) => (
+ updateField(option.accessor, value)}
+ description={option.description}
+ />
+ ))
+ }
+ ]}
+ compute={computeExternal}
+ setInput={setInput}
+ exampleCards={exampleCards}
+ />
);
}
diff --git a/src/pages/tools/video/gif/change-speed/index.tsx b/src/pages/tools/video/gif/change-speed/index.tsx
index 7600960..a4c2e58 100644
--- a/src/pages/tools/video/gif/change-speed/index.tsx
+++ b/src/pages/tools/video/gif/change-speed/index.tsx
@@ -3,12 +3,12 @@ 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 TextFieldWithDesc from 'components/options/TextFieldWithDesc';
-import ToolInputAndResult from '@components/ToolInputAndResult';
import Typography from '@mui/material/Typography';
import { FrameOptions, GifReader, GifWriter } from 'omggif';
-import { gifBinaryToFile } from '../../../../../utils/gif';
+import { gifBinaryToFile } from '@utils/gif';
+import ToolContent from '@components/ToolContent';
+import { ToolComponentProps } from '@tools/defineTool';
const initialValues = {
newSpeed: 200
@@ -16,11 +16,11 @@ const initialValues = {
const validationSchema = Yup.object({
// splitSeparator: Yup.string().required('The separator is required')
});
-export default function ChangeSpeed() {
+export default function ChangeSpeed({ title }: ToolComponentProps) {
const [input, setInput] = useState(null);
const [result, setResult] = useState(null);
- const compute = (optionsValues: typeof initialValues, input: File) => {
+ const compute = (optionsValues: typeof initialValues, input: File | null) => {
if (!input) return;
const { newSpeed } = optionsValues;
@@ -104,45 +104,43 @@ export default function ChangeSpeed() {
processImage(input, newSpeed);
};
return (
-
-
+
+ }
+ resultComponent={
+
+ }
+ initialValues={initialValues}
+ getGroups={({ values, updateField }) => [
+ {
+ title: 'New GIF speed',
+ component: (
+
+ updateField('newSpeed', Number(val))}
+ description={'Default new GIF speed.'}
+ InputProps={{ endAdornment: ms }}
+ type={'number'}
+ />
+
+ )
}
- result={
-
- }
- />
- [
- {
- title: 'New GIF speed',
- component: (
-
- updateField('newSpeed', Number(val))}
- description={'Default new GIF speed.'}
- InputProps={{ endAdornment: ms }}
- type={'number'}
- />
-
- )
- }
- ]}
- initialValues={initialValues}
- input={input}
- />
-
+ ]}
+ compute={compute}
+ setInput={setInput}
+ />
);
}