External/omni-tools
1
0
Fork 0
mirror of https://github.com/iib0011/omni-tools.git synced 2025-12-29 16:16:02 +00:00
Code Issues Packages Projects Releases Wiki Activity

refactor: use ToolContent

Browse Source
This commit is contained in:
Ibrahima G. Coulibaly
2025-03-09 17:22:14 +00:00
parent b4322335cc
commit b168edea82
8 changed files with 250 additions and 271 deletions
Download Patch File Download Diff File Expand all files Collapse all files

127
src/pages/tools/list/shuffle/index.tsx
View File

@@ -2,12 +2,11 @@ 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 ToolContent from '@components/ToolContent';
import { shuffleList, SplitOperatorType } from './service';
import ToolInputAndResult from '@components/ToolInputAndResult';
import SimpleRadio from '@components/options/SimpleRadio';
import TextFieldWithDesc from '@components/options/TextFieldWithDesc';
import { isNumber } from '../../../../utils/string';
import { isNumber } from '@utils/string';
const initialValues = {
splitOperatorType: 'symbol' as SplitOperatorType,
@@ -51,69 +50,65 @@ export default function Shuffle() {
};
return (
<Box>
<ToolInputAndResult
input={
<ToolTextInput
title={'Input list'}
value={input}
onChange={setInput}
/>
<ToolContent
title="Shuffle"
initialValues={initialValues}
compute={compute}
input={input}
setInput={setInput}
inputComponent={
<ToolTextInput title={'Input list'} value={input} onChange={setInput} />
}
resultComponent={
<ToolTextResult title={'Shuffled list'} value={result} />
}
getGroups={({ values, updateField }) => [
{
title: 'Input list separator',
component: (
<Box>
{splitOperators.map(({ title, description, type }) => (
<SimpleRadio
key={type}
onClick={() => updateField('splitOperatorType', type)}
title={title}
description={description}
checked={values.splitOperatorType === type}
/>
))}
<TextFieldWithDesc
description={'Set a delimiting symbol or regular expression.'}
value={values.splitSeparator}
onOwnChange={(val) => updateField('splitSeparator', val)}
/>
</Box>
)
},
{
title: 'Shuffled List Length',
component: (
<Box>
<TextFieldWithDesc
description={'Output this many random items'}
value={values.length}
onOwnChange={(val) => updateField('length', val)}
/>
</Box>
)
},
{
title: 'Shuffled List Separator',
component: (
<Box>
<TextFieldWithDesc
value={values.joinSeparator}
onOwnChange={(value) => updateField('joinSeparator', value)}
description={'Use this separator in the randomized list.'}
/>
</Box>
)
}
result={<ToolTextResult title={'Shuffled list'} value={result} />}
/>
<ToolOptions
compute={compute}
getGroups={({ values, updateField }) => [
{
title: 'Input list separator',
component: (
<Box>
{splitOperators.map(({ title, description, type }) => (
<SimpleRadio
key={type}
onClick={() => updateField('splitOperatorType', type)}
title={title}
description={description}
checked={values.splitOperatorType === type}
/>
))}
<TextFieldWithDesc
description={'Set a delimiting symbol or regular expression.'}
value={values.splitSeparator}
onOwnChange={(val) => updateField('splitSeparator', val)}
/>
</Box>
)
},
{
title: 'Shuffled List Length',
component: (
<Box>
<TextFieldWithDesc
description={'Output this many random items'}
value={values.length}
onOwnChange={(val) => updateField('length', val)}
/>
</Box>
)
},
{
title: 'Shuffled List Separator',
component: (
<Box>
<TextFieldWithDesc
value={values.joinSeparator}
onOwnChange={(value) => updateField('joinSeparator', value)}
description={'Use this separator in the randomized list.'}
/>
</Box>
)
}
]}
initialValues={initialValues}
input={input}
/>
</Box>
]}
/>
);
}