mirror of
https://github.com/iib0011/omni-tools.git
synced 2025-09-20 22:49:33 +02:00
Merge branch 'main' into truncate
This commit is contained in:
Chesterkxng
149
.idea/workspace.xml
generated
149
.idea/workspace.xml
generated
@@ -4,7 +4,14 @@
|
||||
<option name="autoReloadType" value="SELECTIVE" />
|
||||
</component>
|
||||
<component name="ChangeListManager">
|
||||
<list default="true" id="b30e2810-c4c1-4aad-b134-794e52cc1c7d" name="Changes" comment="feat: playwright report" />
|
||||
<list default="true" id="b30e2810-c4c1-4aad-b134-794e52cc1c7d" name="Changes" comment="feat: find most popular ui">
|
||||
<change beforePath="$PROJECT_DIR$/.idea/workspace.xml" beforeDir="false" afterPath="$PROJECT_DIR$/.idea/workspace.xml" afterDir="false" />
|
||||
<change beforePath="$PROJECT_DIR$/src/components/options/SelectWithDesc.tsx" beforeDir="false" afterPath="$PROJECT_DIR$/src/components/options/SelectWithDesc.tsx" afterDir="false" />
|
||||
<change beforePath="$PROJECT_DIR$/src/components/result/ToolTextResult.tsx" beforeDir="false" afterPath="$PROJECT_DIR$/src/components/result/ToolTextResult.tsx" afterDir="false" />
|
||||
<change beforePath="$PROJECT_DIR$/src/pages/list/find-most-popular/find-most-popular.service.test.ts" beforeDir="false" afterPath="$PROJECT_DIR$/src/pages/list/find-most-popular/find-most-popular.service.test.ts" 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/utils/string.ts" beforeDir="false" afterPath="$PROJECT_DIR$/src/utils/string.ts" afterDir="false" />
|
||||
</list>
|
||||
<option name="SHOW_DIALOG" value="false" />
|
||||
<option name="HIGHLIGHT_CONFLICTS" value="true" />
|
||||
<option name="HIGHLIGHT_NON_ACTIVE_CHANGELIST" value="false" />
|
||||
@@ -40,44 +47,44 @@
|
||||
<option name="hideEmptyMiddlePackages" value="true" />
|
||||
<option name="showLibraryContents" value="true" />
|
||||
</component>
|
||||
<component name="PropertiesComponent"><![CDATA[{
|
||||
"keyToString": {
|
||||
"ASKED_ADD_EXTERNAL_FILES": "true",
|
||||
"ASKED_SHARE_PROJECT_CONFIGURATION_FILES": "true",
|
||||
"Playwright.JoinText Component.executor": "Run",
|
||||
"Playwright.JoinText Component.should merge text pieces with specified join character.executor": "Run",
|
||||
"RunOnceActivity.OpenProjectViewOnStart": "true",
|
||||
"RunOnceActivity.ShowReadmeOnStart": "true",
|
||||
"Vitest.compute function (1).executor": "Run",
|
||||
"Vitest.compute function.executor": "Run",
|
||||
"Vitest.mergeText.executor": "Run",
|
||||
"Vitest.mergeText.should merge lines and preserve blank lines when deleteBlankLines is false.executor": "Run",
|
||||
"Vitest.mergeText.should merge lines, preserve blank lines and trailing spaces when both deleteBlankLines and deleteTrailingSpaces are false.executor": "Run",
|
||||
"git-widget-placeholder": "main",
|
||||
"ignore.virus.scanning.warn.message": "true",
|
||||
"kotlin-language-version-configured": "true",
|
||||
"last_opened_file_path": "C:/Users/HP/IdeaProjects/omni-tools/src/assets",
|
||||
"node.js.detected.package.eslint": "true",
|
||||
"node.js.detected.package.tslint": "true",
|
||||
"node.js.selected.package.eslint": "(autodetect)",
|
||||
"node.js.selected.package.tslint": "(autodetect)",
|
||||
"nodejs_package_manager_path": "npm",
|
||||
"npm.dev.executor": "Run",
|
||||
"npm.lint.executor": "Run",
|
||||
"npm.prebuild.executor": "Run",
|
||||
"npm.script:create:tool.executor": "Run",
|
||||
"npm.test.executor": "Run",
|
||||
"npm.test:e2e.executor": "Run",
|
||||
"npm.test:e2e:run.executor": "Run",
|
||||
"prettierjs.PrettierConfiguration.Package": "C:\\Users\\HP\\IdeaProjects\\omni-tools\\node_modules\\prettier",
|
||||
"project.structure.last.edited": "Problems",
|
||||
"project.structure.proportion": "0.0",
|
||||
"project.structure.side.proportion": "0.2",
|
||||
"settings.editor.selected.configurable": "settings.typescriptcompiler",
|
||||
"ts.external.directory.path": "C:\\Users\\HP\\IdeaProjects\\omni-tools\\node_modules\\typescript\\lib",
|
||||
"vue.rearranger.settings.migration": "true"
|
||||
<component name="PropertiesComponent">{
|
||||
"keyToString": {
|
||||
"ASKED_ADD_EXTERNAL_FILES": "true",
|
||||
"ASKED_SHARE_PROJECT_CONFIGURATION_FILES": "true",
|
||||
"Playwright.JoinText Component.executor": "Run",
|
||||
"Playwright.JoinText Component.should merge text pieces with specified join character.executor": "Run",
|
||||
"RunOnceActivity.OpenProjectViewOnStart": "true",
|
||||
"RunOnceActivity.ShowReadmeOnStart": "true",
|
||||
"Vitest.compute function (1).executor": "Run",
|
||||
"Vitest.compute function.executor": "Run",
|
||||
"Vitest.mergeText.executor": "Run",
|
||||
"Vitest.mergeText.should merge lines and preserve blank lines when deleteBlankLines is false.executor": "Run",
|
||||
"Vitest.mergeText.should merge lines, preserve blank lines and trailing spaces when both deleteBlankLines and deleteTrailingSpaces are false.executor": "Run",
|
||||
"git-widget-placeholder": "main",
|
||||
"ignore.virus.scanning.warn.message": "true",
|
||||
"kotlin-language-version-configured": "true",
|
||||
"last_opened_file_path": "C:/Users/HP/IdeaProjects/omni-tools/src/components/options",
|
||||
"node.js.detected.package.eslint": "true",
|
||||
"node.js.detected.package.tslint": "true",
|
||||
"node.js.selected.package.eslint": "(autodetect)",
|
||||
"node.js.selected.package.tslint": "(autodetect)",
|
||||
"nodejs_package_manager_path": "npm",
|
||||
"npm.dev.executor": "Run",
|
||||
"npm.lint.executor": "Run",
|
||||
"npm.prebuild.executor": "Run",
|
||||
"npm.script:create:tool.executor": "Run",
|
||||
"npm.test.executor": "Run",
|
||||
"npm.test:e2e.executor": "Run",
|
||||
"npm.test:e2e:run.executor": "Run",
|
||||
"prettierjs.PrettierConfiguration.Package": "C:\\Users\\HP\\IdeaProjects\\omni-tools\\node_modules\\prettier",
|
||||
"project.structure.last.edited": "Problems",
|
||||
"project.structure.proportion": "0.0",
|
||||
"project.structure.side.proportion": "0.2",
|
||||
"settings.editor.selected.configurable": "settings.typescriptcompiler",
|
||||
"ts.external.directory.path": "C:\\Users\\HP\\IdeaProjects\\omni-tools\\node_modules\\typescript\\lib",
|
||||
"vue.rearranger.settings.migration": "true"
|
||||
}
|
||||
}]]></component>
|
||||
}</component>
|
||||
<component name="ReactDesignerToolWindowState">
|
||||
<option name="myId2Visible">
|
||||
<map>
|
||||
@@ -89,11 +96,11 @@
|
||||
</component>
|
||||
<component name="RecentsManager">
|
||||
<key name="CopyFile.RECENT_KEYS">
|
||||
<recent name="C:\Users\HP\IdeaProjects\omni-tools\src\components\options" />
|
||||
<recent name="C:\Users\HP\IdeaProjects\omni-tools\src\assets" />
|
||||
<recent name="C:\Users\HP\IdeaProjects\omni-tools\src\pages\string" />
|
||||
<recent name="C:\Users\HP\IdeaProjects\omni-tools\src\pages\string\split" />
|
||||
<recent name="C:\Users\HP\IdeaProjects\omni-tools\src\pages\images" />
|
||||
<recent name="C:\Users\HP\IdeaProjects\omni-tools\public" />
|
||||
</key>
|
||||
<key name="MoveFile.RECENT_KEYS">
|
||||
<recent name="C:\Users\HP\IdeaProjects\omni-tools\src\components" />
|
||||
@@ -102,7 +109,7 @@
|
||||
<recent name="C:\Users\HP\IdeaProjects\omni-tools\src\tools" />
|
||||
</key>
|
||||
</component>
|
||||
<component name="RunManager" selected="npm.test:e2e">
|
||||
<component name="RunManager" selected="npm.dev">
|
||||
<configuration name="JoinText Component.should merge text pieces with specified join character" type="JavaScriptTestRunnerPlaywright" temporary="true" nameIsGenerated="true">
|
||||
<node-interpreter value="project" />
|
||||
<playwright-package value="$PROJECT_DIR$/node_modules/@playwright/test" />
|
||||
@@ -158,11 +165,11 @@
|
||||
</configuration>
|
||||
<recent_temporary>
|
||||
<list>
|
||||
<item itemvalue="npm.dev" />
|
||||
<item itemvalue="npm.test:e2e" />
|
||||
<item itemvalue="Playwright.JoinText Component.should merge text pieces with specified join character" />
|
||||
<item itemvalue="npm.test" />
|
||||
<item itemvalue="npm.lint" />
|
||||
<item itemvalue="npm.dev" />
|
||||
</list>
|
||||
</recent_temporary>
|
||||
</component>
|
||||
@@ -198,30 +205,8 @@
|
||||
<workItem from="1719475764139" duration="14903000" />
|
||||
<workItem from="1719492452780" duration="8000" />
|
||||
<workItem from="1719496624579" duration="6148000" />
|
||||
</task>
|
||||
<task id="LOCAL-00038" summary="fix: readme">
|
||||
<option name="closed" value="true" />
|
||||
<created>1719171905785</created>
|
||||
<option name="number" value="00038" />
|
||||
<option name="presentableId" value="LOCAL-00038" />
|
||||
<option name="project" value="LOCAL" />
|
||||
<updated>1719171905785</updated>
|
||||
</task>
|
||||
<task id="LOCAL-00039" summary="fix: build">
|
||||
<option name="closed" value="true" />
|
||||
<created>1719172147719</created>
|
||||
<option name="number" value="00039" />
|
||||
<option name="presentableId" value="LOCAL-00039" />
|
||||
<option name="project" value="LOCAL" />
|
||||
<updated>1719172147719</updated>
|
||||
</task>
|
||||
<task id="LOCAL-00040" summary="chore: CODEOWNERS">
|
||||
<option name="closed" value="true" />
|
||||
<created>1719184899883</created>
|
||||
<option name="number" value="00040" />
|
||||
<option name="presentableId" value="LOCAL-00040" />
|
||||
<option name="project" value="LOCAL" />
|
||||
<updated>1719184899883</updated>
|
||||
<workItem from="1720542757452" duration="5355000" />
|
||||
<workItem from="1720557527691" duration="1135000" />
|
||||
</task>
|
||||
<task id="LOCAL-00041" summary="ci: fix">
|
||||
<option name="closed" value="true" />
|
||||
@@ -591,7 +576,31 @@
|
||||
<option name="project" value="LOCAL" />
|
||||
<updated>1719600693979</updated>
|
||||
</task>
|
||||
<option name="localTasksCounter" value="87" />
|
||||
<task id="LOCAL-00087" summary="chore: idea config">
|
||||
<option name="closed" value="true" />
|
||||
<created>1719600739052</created>
|
||||
<option name="number" value="00087" />
|
||||
<option name="presentableId" value="LOCAL-00087" />
|
||||
<option name="project" value="LOCAL" />
|
||||
<updated>1719600739052</updated>
|
||||
</task>
|
||||
<task id="LOCAL-00088" summary="feat: sort list">
|
||||
<option name="closed" value="true" />
|
||||
<created>1720545582958</created>
|
||||
<option name="number" value="00088" />
|
||||
<option name="presentableId" value="LOCAL-00088" />
|
||||
<option name="project" value="LOCAL" />
|
||||
<updated>1720545582958</updated>
|
||||
</task>
|
||||
<task id="LOCAL-00089" summary="feat: find most popular ui">
|
||||
<option name="closed" value="true" />
|
||||
<created>1720546921899</created>
|
||||
<option name="number" value="00089" />
|
||||
<option name="presentableId" value="LOCAL-00089" />
|
||||
<option name="project" value="LOCAL" />
|
||||
<updated>1720546921899</updated>
|
||||
</task>
|
||||
<option name="localTasksCounter" value="90" />
|
||||
<servers />
|
||||
</component>
|
||||
<component name="TypeScriptGeneratedFilesManager">
|
||||
@@ -635,9 +644,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="fix: readme" />
|
||||
<MESSAGE value="refactor: tool input and result" />
|
||||
<MESSAGE value="feat: create transparent png" />
|
||||
<MESSAGE value="fix: ToolFileInput.tsx" />
|
||||
<MESSAGE value="fix: generate numbers" />
|
||||
<MESSAGE value="fix: merging branches" />
|
||||
@@ -660,7 +666,10 @@
|
||||
<MESSAGE value="chore: jimp types" />
|
||||
<MESSAGE value="fix: package.json" />
|
||||
<MESSAGE value="feat: playwright report" />
|
||||
<option name="LAST_COMMIT_MESSAGE" value="feat: playwright report" />
|
||||
<MESSAGE value="chore: idea config" />
|
||||
<MESSAGE value="feat: sort list" />
|
||||
<MESSAGE value="feat: find most popular ui" />
|
||||
<option name="LAST_COMMIT_MESSAGE" value="feat: find most popular ui" />
|
||||
</component>
|
||||
<component name="XSLT-Support.FileAssociations.UIState">
|
||||
<expand />
|
||||
|
||||
50
src/components/options/SelectWithDesc.tsx
Normal file
50
src/components/options/SelectWithDesc.tsx
Normal file
@@ -0,0 +1,50 @@
|
||||
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>) => {
|
||||
const newValue =
|
||||
typeof selected === 'boolean'
|
||||
? event.target.value === 'true'
|
||||
: event.target.value;
|
||||
onChange(newValue 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>
|
||||
|
||||
@@ -1,8 +1,9 @@
|
||||
import { Box, TextField } from '@mui/material';
|
||||
import React, { useContext } from 'react';
|
||||
import React, { useContext, useEffect } from 'react';
|
||||
import { CustomSnackBarContext } from '../../contexts/CustomSnackBarContext';
|
||||
import InputHeader from '../InputHeader';
|
||||
import ResultFooter from './ResultFooter';
|
||||
import { replaceSpecialCharacters } from '../../utils/string';
|
||||
|
||||
export default function ToolTextResult({
|
||||
title = 'Result',
|
||||
@@ -37,7 +38,7 @@ export default function ToolTextResult({
|
||||
<Box>
|
||||
<InputHeader title={title} />
|
||||
<TextField
|
||||
value={value}
|
||||
value={replaceSpecialCharacters(value)}
|
||||
fullWidth
|
||||
multiline
|
||||
rows={10}
|
||||
|
||||
@@ -1,65 +1,105 @@
|
||||
import { expect, describe, it } from 'vitest';
|
||||
import { TopItemsList, SplitOperatorType, SortingMethod, DisplayFormat } from './service';
|
||||
import {
|
||||
TopItemsList,
|
||||
SplitOperatorType,
|
||||
SortingMethod,
|
||||
DisplayFormat
|
||||
} from './service';
|
||||
|
||||
describe('TopItemsList function', () => {
|
||||
it('should handle sorting alphabetically ignoring case', () => {
|
||||
const input = 'Apple,banana,apple,Orange,Banana,apple';
|
||||
const result = TopItemsList('symbol', 'alphabetic', 'count', ',', input, false, true, false);
|
||||
expect(result).toEqual(
|
||||
'apple: 3\n' +
|
||||
'banana: 2\n' +
|
||||
'orange: 1'
|
||||
const result = TopItemsList(
|
||||
'symbol',
|
||||
'alphabetic',
|
||||
'count',
|
||||
',',
|
||||
input,
|
||||
false,
|
||||
true,
|
||||
false
|
||||
);
|
||||
expect(result).toEqual('apple: 3\n' + 'banana: 2\n' + 'orange: 1');
|
||||
});
|
||||
|
||||
it('should handle sorting by count and not ignoring case', () => {
|
||||
const input = 'apple,banana,apple,orange,banana,apple,Banana';
|
||||
const result = TopItemsList('symbol', 'count', 'count', ',', input, false, false, false);
|
||||
const result = TopItemsList(
|
||||
'symbol',
|
||||
'count',
|
||||
'count',
|
||||
',',
|
||||
input,
|
||||
false,
|
||||
false,
|
||||
false
|
||||
);
|
||||
expect(result).toEqual(
|
||||
'apple: 3\n' +
|
||||
'banana: 2\n' +
|
||||
'orange: 1\n' +
|
||||
'Banana: 1'
|
||||
'apple: 3\n' + 'banana: 2\n' + 'orange: 1\n' + 'Banana: 1'
|
||||
);
|
||||
});
|
||||
|
||||
it('should handle regex split operator', () => {
|
||||
const input = 'apple123banana456apple789orange012banana345apple678';
|
||||
const result = TopItemsList('regex', 'count', 'count', '\\d+', input, false, false, false);
|
||||
expect(result).toEqual(
|
||||
'apple: 3\n' +
|
||||
'banana: 2\n' +
|
||||
'orange: 1'
|
||||
const result = TopItemsList(
|
||||
'regex',
|
||||
'count',
|
||||
'count',
|
||||
'\\d+',
|
||||
input,
|
||||
false,
|
||||
false,
|
||||
false
|
||||
);
|
||||
expect(result).toEqual('apple: 3\n' + 'banana: 2\n' + 'orange: 1');
|
||||
});
|
||||
|
||||
it('should handle percentage display format', () => {
|
||||
const input = 'apple,banana,apple,orange,banana,apple';
|
||||
const result = TopItemsList('symbol', 'count', 'percentage', ',', input, false, false, false);
|
||||
const result = TopItemsList(
|
||||
'symbol',
|
||||
'count',
|
||||
'percentage',
|
||||
',',
|
||||
input,
|
||||
false,
|
||||
false,
|
||||
false
|
||||
);
|
||||
expect(result).toEqual(
|
||||
'apple: 3 (50.00%)\n' +
|
||||
'banana: 2 (33.33%)\n' +
|
||||
'orange: 1 (16.67%)'
|
||||
'apple: 3 (50.00%)\n' + 'banana: 2 (33.33%)\n' + 'orange: 1 (16.67%)'
|
||||
);
|
||||
});
|
||||
|
||||
it('should handle total display format', () => {
|
||||
const input = 'apple,banana,apple,orange,banana,apple';
|
||||
const result = TopItemsList('symbol', 'count', 'total', ',', input, false, false, false);
|
||||
const result = TopItemsList(
|
||||
'symbol',
|
||||
'count',
|
||||
'total',
|
||||
',',
|
||||
input,
|
||||
false,
|
||||
false,
|
||||
false
|
||||
);
|
||||
expect(result).toEqual(
|
||||
'apple: 3 (3 / 6)\n' +
|
||||
'banana: 2 (2 / 6)\n' +
|
||||
'orange: 1 (1 / 6)'
|
||||
'apple: 3 (3 / 6)\n' + 'banana: 2 (2 / 6)\n' + 'orange: 1 (1 / 6)'
|
||||
);
|
||||
});
|
||||
|
||||
it('should handle trimming and ignoring empty items', () => {
|
||||
const input = ' apple , banana , apple , orange , banana , apple ';
|
||||
const result = TopItemsList('symbol', 'count', 'count', ',', input, true, false, true);
|
||||
expect(result).toEqual(
|
||||
'apple: 3\n' +
|
||||
'banana: 2\n' +
|
||||
'orange: 1'
|
||||
const result = TopItemsList(
|
||||
'symbol',
|
||||
'count',
|
||||
'count',
|
||||
',',
|
||||
input,
|
||||
true,
|
||||
false,
|
||||
true
|
||||
);
|
||||
expect(result).toEqual('apple: 3\n' + 'banana: 2\n' + 'orange: 1');
|
||||
});
|
||||
});
|
||||
@@ -1,11 +1,172 @@
|
||||
import { Box } from '@mui/material';
|
||||
import React from 'react';
|
||||
import React, { useState } from 'react';
|
||||
import ToolTextInput from '../../../components/input/ToolTextInput';
|
||||
import ToolTextResult from '../../../components/result/ToolTextResult';
|
||||
import * as Yup from 'yup';
|
||||
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';
|
||||
|
||||
const initialValues = {};
|
||||
const initialValues = {
|
||||
splitSeparatorType: 'symbol' as SplitOperatorType,
|
||||
sortingMethod: 'alphabetic' as SortingMethod,
|
||||
displayFormat: 'count' as DisplayFormat,
|
||||
splitSeparator: ',',
|
||||
deleteEmptyItems: false,
|
||||
ignoreItemCase: false,
|
||||
trimItems: false
|
||||
};
|
||||
const splitOperators: {
|
||||
title: string;
|
||||
description: string;
|
||||
type: SplitOperatorType;
|
||||
}[] = [
|
||||
{
|
||||
title: 'Use a Symbol for Splitting',
|
||||
description: 'Delimit input list items with a character.',
|
||||
type: 'symbol'
|
||||
},
|
||||
{
|
||||
title: 'Use a Regex for Splitting',
|
||||
type: 'regex',
|
||||
description: 'Delimit input list items with a regular expression.'
|
||||
}
|
||||
];
|
||||
|
||||
export default function FindMostPopular() {
|
||||
const [input, setInput] = useState<string>('');
|
||||
const [result, setResult] = useState<string>('');
|
||||
const compute = (optionsValues: typeof initialValues, input: any) => {
|
||||
const {
|
||||
splitSeparatorType,
|
||||
splitSeparator,
|
||||
displayFormat,
|
||||
sortingMethod,
|
||||
deleteEmptyItems,
|
||||
ignoreItemCase,
|
||||
trimItems
|
||||
} = optionsValues;
|
||||
|
||||
setResult(
|
||||
TopItemsList(
|
||||
splitSeparatorType,
|
||||
sortingMethod,
|
||||
displayFormat,
|
||||
splitSeparator,
|
||||
input,
|
||||
deleteEmptyItems,
|
||||
ignoreItemCase,
|
||||
trimItems
|
||||
)
|
||||
);
|
||||
};
|
||||
const validationSchema = Yup.object({
|
||||
// splitSeparator: Yup.string().required('The separator is required')
|
||||
});
|
||||
export default function FindMostPopular() {
|
||||
return <Box>Lorem ipsum</Box>;
|
||||
|
||||
return (
|
||||
<Box>
|
||||
<ToolInputAndResult
|
||||
input={
|
||||
<ToolTextInput
|
||||
title={'Input list'}
|
||||
value={input}
|
||||
onChange={setInput}
|
||||
/>
|
||||
}
|
||||
result={<ToolTextResult title={'Most popular items'} value={result} />}
|
||||
/>
|
||||
<ToolOptions
|
||||
compute={compute}
|
||||
getGroups={({ values, updateField }) => [
|
||||
{
|
||||
title: 'How to Extract List Items?',
|
||||
component: (
|
||||
<Box>
|
||||
{splitOperators.map(({ title, description, type }) => (
|
||||
<SimpleRadio
|
||||
key={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: 'Item comparison',
|
||||
component: (
|
||||
<Box>
|
||||
<CheckboxWithDesc
|
||||
title={'Remove empty items'}
|
||||
description={'Ignore empty items from comparison.'}
|
||||
checked={values.deleteEmptyItems}
|
||||
onChange={(value) => updateField('deleteEmptyItems', value)}
|
||||
/>
|
||||
<CheckboxWithDesc
|
||||
title={'Trim top list items'}
|
||||
description={
|
||||
'Remove leading and trailing spaces before comparing items'
|
||||
}
|
||||
checked={values.trimItems}
|
||||
onChange={(value) => updateField('trimItems', value)}
|
||||
/>
|
||||
<CheckboxWithDesc
|
||||
title={'Ignore Item Case'}
|
||||
description={'Compare all list items in lowercase.'}
|
||||
checked={values.ignoreItemCase}
|
||||
onChange={(value) => updateField('ignoreItemCase', value)}
|
||||
/>
|
||||
</Box>
|
||||
)
|
||||
},
|
||||
{
|
||||
title: 'Top item output format',
|
||||
component: (
|
||||
<Box>
|
||||
<SelectWithDesc
|
||||
selected={values.displayFormat}
|
||||
options={[
|
||||
{ label: 'Show item percentage', value: 'percentage' },
|
||||
{ label: 'Show item count', value: 'count' },
|
||||
{ label: 'Show item total', value: 'total' }
|
||||
]}
|
||||
onChange={(value) => updateField('displayFormat', value)}
|
||||
description={'How to display the most popular list items?'}
|
||||
/>
|
||||
<SelectWithDesc
|
||||
selected={values.sortingMethod}
|
||||
options={[
|
||||
{ label: 'Sort Alphabetically', value: 'alphabetic' },
|
||||
{ label: 'Sort by count', value: 'count' }
|
||||
]}
|
||||
onChange={(value) => updateField('sortingMethod', value)}
|
||||
description={'Select a sorting method.'}
|
||||
/>
|
||||
</Box>
|
||||
)
|
||||
}
|
||||
]}
|
||||
initialValues={initialValues}
|
||||
input={input}
|
||||
validationSchema={validationSchema}
|
||||
/>
|
||||
</Box>
|
||||
);
|
||||
}
|
||||
@@ -3,7 +3,8 @@ export type DisplayFormat = 'count' | 'percentage' | 'total';
|
||||
export type SortingMethod = 'count' | 'alphabetic';
|
||||
|
||||
// Function that takes the array as arg and returns a dict of element occurrences and handle the ignoreItemCase
|
||||
function dictMaker(array: string[],
|
||||
function dictMaker(
|
||||
array: string[],
|
||||
ignoreItemCase: boolean
|
||||
): { [key: string]: number } {
|
||||
const dict: { [key: string]: number } = {};
|
||||
@@ -17,16 +18,18 @@ function dictMaker(array: string[],
|
||||
// Function that sorts the dict created with dictMaker based on the chosen sorting method
|
||||
function dictSorter(
|
||||
dict: { [key: string]: number },
|
||||
sortingMethod: SortingMethod,
|
||||
sortingMethod: SortingMethod
|
||||
): { [key: string]: number } {
|
||||
let sortedArray: [string, number][];
|
||||
switch (sortingMethod) {
|
||||
case 'count':
|
||||
sortedArray = Object.entries(dict).sort(([, countA], [, countB]) => countB - countA);
|
||||
sortedArray = Object.entries(dict).sort(
|
||||
([, countA], [, countB]) => countB - countA
|
||||
);
|
||||
break;
|
||||
case 'alphabetic':
|
||||
sortedArray = Object.entries(dict).sort(([keyA], [keyB]) => {
|
||||
return keyA.localeCompare(keyB)
|
||||
return keyA.localeCompare(keyB);
|
||||
});
|
||||
break;
|
||||
default:
|
||||
@@ -47,15 +50,17 @@ function displayFormater(
|
||||
switch (displayFormat) {
|
||||
case 'percentage':
|
||||
Object.entries(dict).forEach(([key, value]) => {
|
||||
formattedOutput.push(`${key}: ${value} (${((value / total) * 100).toFixed(2)}%)`);
|
||||
formattedOutput.push(
|
||||
`${key}: ${value} (${((value / total) * 100).toFixed(2)}%)`
|
||||
);
|
||||
});
|
||||
break;
|
||||
case "total":
|
||||
case 'total':
|
||||
Object.entries(dict).forEach(([key, value]) => {
|
||||
formattedOutput.push(`${key}: ${value} (${value} / ${total})`);
|
||||
});
|
||||
break;
|
||||
case "count":
|
||||
case 'count':
|
||||
Object.entries(dict).forEach(([key, value]) => {
|
||||
formattedOutput.push(`${key}: ${value}`);
|
||||
});
|
||||
@@ -80,18 +85,20 @@ export function TopItemsList(
|
||||
array = input.split(splitSeparator);
|
||||
break;
|
||||
case 'regex':
|
||||
array = input.split(new RegExp(splitSeparator)).filter(item => item !== '');
|
||||
array = input
|
||||
.split(new RegExp(splitSeparator))
|
||||
.filter((item) => item !== '');
|
||||
break;
|
||||
}
|
||||
|
||||
// Trim items if required
|
||||
if (trimItems) {
|
||||
array = array.map(item => item.trim());
|
||||
array = array.map((item) => item.trim());
|
||||
}
|
||||
|
||||
// Delete empty items after initial split
|
||||
if (deleteEmptyItems) {
|
||||
array = array.filter(item => item !== '');
|
||||
array = array.filter((item) => item !== '');
|
||||
}
|
||||
|
||||
// Transform the array into dict
|
||||
|
||||
@@ -10,4 +10,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,
|
||||
@@ -38,8 +40,7 @@ const splitOperators: {
|
||||
export default function SplitText() {
|
||||
const [input, setInput] = useState<string>('');
|
||||
const [result, setResult] = useState<string>('');
|
||||
// const formRef = useRef<FormikProps<typeof initialValues>>(null);
|
||||
const computeExternal = (optionsValues: typeof initialValues, input: any) => {
|
||||
const compute = (optionsValues: typeof initialValues, input: any) => {
|
||||
const {
|
||||
splitSeparatorType,
|
||||
joinSeparator,
|
||||
@@ -80,7 +81,7 @@ export default function SplitText() {
|
||||
result={<ToolTextResult title={'Sorted list'} value={result} />}
|
||||
/>
|
||||
<ToolOptions
|
||||
compute={computeExternal}
|
||||
compute={compute}
|
||||
getGroups={({ values, updateField }) => [
|
||||
{
|
||||
title: 'Input item separator',
|
||||
@@ -105,7 +106,59 @@ 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}
|
||||
|
||||
@@ -6,3 +6,13 @@ export function capitalizeFirstLetter(string: string | undefined) {
|
||||
export function isNumber(number: any) {
|
||||
return !isNaN(parseFloat(number)) && isFinite(number);
|
||||
}
|
||||
|
||||
export const replaceSpecialCharacters = (str: string) => {
|
||||
return str
|
||||
.replace(/\\n/g, '\n')
|
||||
.replace(/\\t/g, '\t')
|
||||
.replace(/\\r/g, '\r')
|
||||
.replace(/\\b/g, '\b')
|
||||
.replace(/\\f/g, '\f')
|
||||
.replace(/\\v/g, '\v');
|
||||
};
|
||||
|
||||
Reference in New Issue
Block a user