mirror of
https://github.com/iib0011/omni-tools.git
synced 2025-09-20 06:29:32 +02:00
feat: sort list
This commit is contained in:
46
src/components/options/SelectWithDesc.tsx
Normal file
46
src/components/options/SelectWithDesc.tsx
Normal file
@@ -0,0 +1,46 @@
|
||||
import React from 'react';
|
||||
import {
|
||||
Box,
|
||||
MenuItem,
|
||||
Select,
|
||||
SelectChangeEvent,
|
||||
Typography
|
||||
} from '@mui/material';
|
||||
|
||||
interface Option<T extends string | boolean> {
|
||||
label: string;
|
||||
value: T;
|
||||
}
|
||||
|
||||
const SelectWithDesc = <T extends string | boolean>({
|
||||
selected,
|
||||
options,
|
||||
onChange,
|
||||
description
|
||||
}: {
|
||||
selected: T;
|
||||
options: Option<T>[];
|
||||
onChange: (value: T) => void;
|
||||
description: string;
|
||||
}) => {
|
||||
const handleChange = (event: SelectChangeEvent<T>) => {
|
||||
onChange(event.target.value as T);
|
||||
};
|
||||
|
||||
return (
|
||||
<Box>
|
||||
<Select value={selected} onChange={handleChange}>
|
||||
{options.map((option) => (
|
||||
<MenuItem key={option.label} value={option.value.toString()}>
|
||||
{option.label}
|
||||
</MenuItem>
|
||||
))}
|
||||
</Select>
|
||||
<Typography fontSize={12} mt={1}>
|
||||
{description}
|
||||
</Typography>
|
||||
</Box>
|
||||
);
|
||||
};
|
||||
|
||||
export default SelectWithDesc;
|
@@ -15,7 +15,7 @@ export default function ToolOptionGroups({
|
||||
return (
|
||||
<Grid container spacing={2}>
|
||||
{groups.map((group) => (
|
||||
<Grid item xs={12} md={6} key={group.title}>
|
||||
<Grid item xs={12} md={4} key={group.title}>
|
||||
<Typography mb={1} fontSize={22}>
|
||||
{group.title}
|
||||
</Typography>
|
||||
|
@@ -9,4 +9,15 @@ import { tool as listTruncate } from './truncate/meta';
|
||||
import { tool as listShuffle } from './shuffle/meta';
|
||||
import { tool as listSort } from './sort/meta';
|
||||
|
||||
export const listTools = [listSort];
|
||||
export const listTools = [
|
||||
listSort,
|
||||
listUnwrap,
|
||||
listReverse,
|
||||
listFindUnique,
|
||||
listFindMostPopular,
|
||||
listGroup,
|
||||
listWrap,
|
||||
listRotate,
|
||||
listShuffle,
|
||||
listTruncate
|
||||
];
|
||||
|
@@ -8,6 +8,8 @@ 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';
|
||||
|
||||
const initialValues = {
|
||||
splitSeparatorType: 'symbol' as SplitOperatorType,
|
||||
@@ -105,7 +107,57 @@ export default function SplitText() {
|
||||
},
|
||||
{
|
||||
title: 'Sort method',
|
||||
component: <Box></Box>
|
||||
component: (
|
||||
<Box>
|
||||
<SelectWithDesc
|
||||
selected={values.sortingMethod}
|
||||
options={[
|
||||
{ label: 'Sort Alphabetically', value: 'alphabetic' },
|
||||
{ label: 'Sort Numerically', value: 'numeric' },
|
||||
{ label: 'Sort by Length', value: 'length' }
|
||||
]}
|
||||
onChange={(value) => updateField('sortingMethod', value)}
|
||||
description={'Select a sorting method.'}
|
||||
/>
|
||||
<SelectWithDesc
|
||||
selected={values.increasing}
|
||||
options={[
|
||||
{ label: 'Increasing order', value: true },
|
||||
{ label: 'Decreasing order', value: false }
|
||||
]}
|
||||
onChange={(value) => updateField('increasing', value)}
|
||||
description={'Select a sorting order.'}
|
||||
/>
|
||||
<CheckboxWithDesc
|
||||
title={'Case Sensitive Sort'}
|
||||
description={
|
||||
'Sort uppercase and lowercase items separately. Capital letters precede lowercase letters in an ascending list. (Works only in alphabetical sorting mode.)'
|
||||
}
|
||||
checked={values.caseSensitive}
|
||||
onChange={(val) => updateField('caseSensitive', val)}
|
||||
/>
|
||||
</Box>
|
||||
)
|
||||
},
|
||||
{
|
||||
title: 'Sorted item properties',
|
||||
component: (
|
||||
<Box>
|
||||
<TextFieldWithDesc
|
||||
description={
|
||||
'Use this symbol as a joiner between items in a sorted list.'
|
||||
}
|
||||
value={values.joinSeparator}
|
||||
onOwnChange={(val) => updateField('joinSeparator', val)}
|
||||
/>
|
||||
<CheckboxWithDesc
|
||||
title={'Remove duplicates'}
|
||||
description={'Delete duplicate list items.'}
|
||||
checked={values.removeDuplicated}
|
||||
onChange={(val) => updateField('removeDuplicated', val)}
|
||||
/>
|
||||
</Box>
|
||||
)
|
||||
}
|
||||
]}
|
||||
initialValues={initialValues}
|
||||
|
Reference in New Issue
Block a user