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

refactor: use ToolContent

Browse Source
This commit is contained in:
Ibrahima G. Coulibaly
2025-03-09 18:06:27 +00:00
parent 04832bd104
commit 37154c6461
13 changed files with 791 additions and 845 deletions
Download Patch File Download Diff File Expand all files Collapse all files

121
src/pages/tools/number/generate/index.tsx
View File

@@ -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<string>('');
const compute = (optionsValues: typeof initialValues) => {
const { firstValue, numberOfNumbers, separator, step } = optionsValues;
setResult(
listOfIntegers(
Number(firstValue),
Number(numberOfNumbers),
Number(step),
separator
)
);
};
return (
<Box>
<ToolInputAndResult
result={<ToolTextResult title={'Total'} value={result} />}
/>
<ToolOptions
getGroups={({ values, updateField }) => [
{
title: 'Arithmetic sequence option',
component: (
<Box>
<TextFieldWithDesc
description={'Start sequence from this number.'}
value={values.firstValue}
onOwnChange={(val) => updateField('firstValue', val)}
type={'number'}
/>
<TextFieldWithDesc
description={'Increase each element by this amount'}
value={values.step}
onOwnChange={(val) => updateField('step', val)}
type={'number'}
/>
<TextFieldWithDesc
description={'Number of elements in sequence.'}
value={values.numberOfNumbers}
onOwnChange={(val) => updateField('numberOfNumbers', val)}
type={'number'}
/>
</Box>
)
},
{
title: 'Separator',
component: (
<ToolContent
title={title}
initialValues={initialValues}
getGroups={({ values, updateField }) => [
{
title: 'Arithmetic sequence option',
component: (
<Box>
<TextFieldWithDesc
description={
'Separate elements in the arithmetic sequence by this character.'
}
value={values.separator}
onOwnChange={(val) => 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}
/>
</Box>
<TextFieldWithDesc
description={'Increase each element by this amount'}
value={values.step}
onOwnChange={(val) => updateField('step', val)}
type={'number'}
/>
<TextFieldWithDesc
description={'Number of elements in sequence.'}
value={values.numberOfNumbers}
onOwnChange={(val) => updateField('numberOfNumbers', val)}
type={'number'}
/>
</Box>
)
},
{
title: 'Separator',
component: (
<TextFieldWithDesc
description={
'Separate elements in the arithmetic sequence by this character.'
}
value={values.separator}
onOwnChange={(val) => updateField('separator', val)}
/>
)
}
]}
compute={compute}
resultComponent={
<ToolTextResult title={'Generated numbers'} value={result} />
}
/>
);
}