marcel/omni-tools
1
0
Fork 0
mirror of https://github.com/iib0011/omni-tools.git synced 2025-09-23 07:59:31 +02:00
Code Issues Packages Projects Releases Wiki Activity

fix: missing translations

Browse Source
This commit is contained in:
Ibrahima G. Coulibaly
2025-07-16 15:58:41 +01:00
parent e533c6e39c
commit 2a05f42d1d
14 changed files with 232 additions and 104 deletions
Download Patch File Download Diff File Expand all files Collapse all files

23
public/locales/en/audio.json
View File

@@ -29,14 +29,33 @@
},
"mergeAudio": {
"description": "Combine multiple audio files into a single audio file by concatenating them in sequence.",
"inputTitle": "Input Audio Files",
"longDescription": "This tool allows you to merge multiple audio files into a single file by concatenating them in the order you upload them. Perfect for combining podcast segments, music tracks, or any audio files that need to be joined together. Supports various audio formats including MP3, AAC, and WAV.",
"mergingAudio": "Merging Audio",
"outputFormat": "Output Format",
"resultTitle": "Merged Audio",
"shortDescription": "Merge multiple audio files into one (MP3, AAC, WAV).",
"title": "Merge Audio"
"title": "Merge Audio",
"toolInfo": {
"title": "What is {{title}}?"
}
},
"trim": {
"description": "Cut and trim audio files to extract specific segments by specifying start and end times.",
"endTime": "End Time",
"endTimeDescription": "End time in format HH:MM:SS (e.g., 00:01:30)",
"inputTitle": "Input Audio",
"longDescription": "This tool allows you to trim audio files by specifying start and end times. You can extract specific segments from longer audio files, remove unwanted parts, or create shorter clips. Supports various audio formats including MP3, AAC, and WAV. Perfect for podcast editing, music production, or any audio editing needs.",
"outputFormat": "Output Format",
"resultTitle": "Trimmed Audio",
"shortDescription": "Trim audio files to extract specific time segments (MP3, AAC, WAV).",
"title": "Trim Audio"
"startTime": "Start Time",
"startTimeDescription": "Start time in format HH:MM:SS (e.g., 00:00:30)",
"timeSettings": "Time Settings",
"title": "Trim Audio",
"toolInfo": {
"title": "What is {{title}}?"
},
"trimmingAudio": "Trimming Audio"
}
}

6
public/locales/en/csv.json
View File

@@ -17,15 +17,21 @@
"description": "Convert CSV files to JSON format with customizable options for delimiters, quotes, and output formatting. Support for headers, comments, and dynamic type conversion.",
"dynamicTypes": "Dynamic Types",
"dynamicTypesDescription": "Automatically convert numbers and booleans",
"error": "Error",
"errorParsing": "Error parsing CSV: {{error}}",
"fieldQuote": "Field Quote (e.g., \")",
"inputCsvFormat": "Input CSV Format",
"inputTitle": "Input CSV",
"invalidCsvFormat": "Invalid CSV format",
"resultTitle": "Output JSON",
"shortDescription": "Convert CSV data to JSON format.",
"skipEmptyLines": "Skip Empty Lines",
"skipEmptyLinesDescription": "Ignore empty lines in the input CSV",
"title": "Convert CSV to JSON",
"toolInfo": {
"description": "This tool transforms Comma Separated Values (CSV) files to JavaScript Object Notation (JSON) data structures. It supports various CSV formats with customizable delimiters, quote characters, and comment symbols. The converter can treat the first row as headers, skip empty lines, and automatically detect data types like numbers and booleans. The resulting JSON can be used for data migration, backups, or as input for other applications.",
"title": "What Is a CSV to JSON Converter?"
},
"useHeaders": "Use Headers",
"useHeadersDescription": "Treat the first row as column headers"
},

7
public/locales/en/image.json
View File

@@ -10,8 +10,15 @@
"title": "Change image Opacity"
},
"compress": {
"compressedSize": "Compressed Size",
"compressionOptions": "Compression options",
"description": "Reduce image file size while maintaining quality.",
"failedToCompress": "Failed to compress image. Please try again.",
"fileSizes": "File sizes",
"inputTitle": "Input image",
"maxFileSizeDescription": "Maximum file size in megabytes",
"originalSize": "Original Size",
"qualityDescription": "Image quality percentage (lower means smaller file size)",
"resultTitle": "Compressed image",
"shortDescription": "Compress images to reduce file size while maintaining reasonable quality.",
"title": "Compress Image"

52
public/locales/en/list.json
View File

@@ -5,6 +5,15 @@
"copyDescription": "Number of copies (can be fractional)",
"description": "World's simplest browser-based utility for duplicating list items. Input your list and specify duplication criteria to create copies of items. Perfect for data expansion, testing, or creating repeated patterns.",
"duplicationOptions": "Duplication Options",
"error": "Error",
"example1Description": "This example shows how to duplicate a list of words.",
"example1Title": "Simple duplication",
"example2Description": "This example shows how to duplicate a list in reverse order.",
"example2Title": "Reverse duplication",
"example3Description": "This example shows how to interweave items instead of concatenating them.",
"example3Title": "Interweaving items",
"example4Description": "This example shows how to duplicate a list with a fractional number of copies.",
"example4Title": "Fractional duplication",
"examples": {
"fractional": {
"description": "This example shows how to duplicate a list with a fractional number of copies.",
@@ -37,12 +46,53 @@
"toolInfo": {
"description": "This tool allows you to duplicate items in a list. You can specify the number of copies (including fractional values), control whether items are concatenated or interweaved, and even reverse the duplicated items. It's useful for creating repeated patterns, generating test data, or expanding lists with predictable content.",
"title": "List Duplication"
},
"unknownError": "An unknown error occurred",
"validation": {
"copyMustBeNumber": "Number of copies must be a number",
"copyMustBePositive": "Number of copies must be positive",
"copyRequired": "Number of copies is required",
"joinSeparatorRequired": "The join separator is required",
"separatorRequired": "The separator is required"
}
},
"findMostPopular": {
"description": "World's simplest browser-based utility for finding the most popular items in a list. Input your list and instantly get the items that appear most frequently. Perfect for data analysis, trend identification, or finding common elements.",
"displayFormatDescription": "How to display the most popular list items?",
"displayOptions": {
"count": "Show item count",
"percentage": "Show item percentage",
"total": "Show item total"
},
"extractListItems": "How to Extract List Items?",
"ignoreItemCase": "Ignore Item Case",
"ignoreItemCaseDescription": "Compare all list items in lowercase.",
"inputTitle": "Input list",
"itemComparison": "Item comparison",
"outputFormat": "Top item output format",
"removeEmptyItems": "Remove empty items",
"removeEmptyItemsDescription": "Ignore empty items from comparison.",
"resultTitle": "Most popular items",
"shortDescription": "Find most frequently occurring items",
"title": "Find most popular"
"sortOptions": {
"alphabetic": "Sort Alphabetically",
"count": "Sort by count"
},
"sortingMethodDescription": "Select a sorting method.",
"splitOperators": {
"regex": {
"description": "Delimit input list items with a regular expression.",
"title": "Use a Regex for Splitting"
},
"symbol": {
"description": "Delimit input list items with a character.",
"title": "Use a Symbol for Splitting"
}
},
"splitSeparatorDescription": "Set a delimiting symbol or regular expression.",
"title": "Find most popular",
"trimItems": "Trim top list items",
"trimItemsDescription": "Remove leading and trailing spaces before comparing items"
},
"findUnique": {
"caseSensitiveItems": "Case Sensitive Items",

8
public/locales/en/number.json
View File

@@ -57,6 +57,14 @@
},
"sum": {
"description": "Calculate the sum of a list of numbers. Enter numbers separated by commas or newlines to get their total sum.",
"example1Description": "In this example, we calculate the sum of ten positive integers. These integers are listed as a column and their total sum equals 19494.",
"example1Title": "Sum of Ten Positive Numbers",
"example2Description": "This example reverses a column of twenty three-syllable nouns and prints all the words from the bottom to top. To separate the list items, it uses the \\n character as input item separator, which means that each item is on its own line.",
"example2Title": "Count Trees in the Park",
"example3Description": "In this example, we add together ninety different values – positive numbers, negative numbers, integers and decimal fractions. We set the input separator to a comma and after adding all of them together, we get 0 as output.",
"example3Title": "Sum of Integers and Decimals",
"example4Description": "In this example, we calculate the sum of all ten digits and enable the option \"Print Running Sum\". We get the intermediate values of the sum in the process of addition. Thus, we have the following sequence in the output: 0, 1 (0 + 1), 3 (0 + 1 + 2), 6 (0 + 1 + 2 + 3), 10 (0 + 1 + 2 + 3 + 4), and so on.",
"example4Title": "Running Sum of Numbers",
"extractionTypes": {
"delimiter": {
"description": "Customize the number separator here. (By default a line break.)",

26
public/locales/en/string.json
View File

@@ -156,23 +156,23 @@
}
},
"split": {
"charAfterChunkDescription": "Character after each chunk",
"charBeforeChunkDescription": "Character before each chunk",
"chunksDescription": "Number of chunks of equal\nlength in the output.",
"chunksTitle": "Use a Number of Chunks",
"description": "World's simplest browser-based utility for splitting text. Input your text and specify a separator to split it into multiple parts. Perfect for data processing, text manipulation, or extracting specific content from larger text blocks.",
"lengthDescription": "Number of symbols that will be put in each output chunk.",
"lengthTitle": "Use Length for Splitting",
"outputSeparatorDescription": "Character that will be put between the split chunks.\n(It's newline \"\\n\" by default.)",
"outputSeparatorOptions": "Output separator options",
"regexDescription": "Regular expression that will be used to break text into parts.\n(Multiple spaces by default.)",
"regexTitle": "Use a Regex for Splitting",
"resultTitle": "Text pieces",
"shortDescription": "Split text into multiple parts using a separator",
"splitSeparatorOptions": "Split separator options",
"symbolDescription": "Character that will be used to break text into parts.\n(Space by default.)",
"title": "Split",
"resultTitle": "Split Result",
"outputSeparatorOptions": "Output Separator Options",
"symbolTitle": "Use a Symbol for Splitting",
"title": "Split"
"symbolDescription": "Character that will be used to break text into parts. (Space by default.)",
"regexTitle": "Use a Regex for Splitting",
"regexDescription": "Regular expression that will be used to break text into parts. (Multiple spaces by default.)",
"lengthTitle": "Use Length for Splitting",
"lengthDescription": "Number of characters that will be put in each output chunk.",
"chunksTitle": "Use a Number of Chunks",
"chunksDescription": "Number of chunks of equal length in the output.",
"outputSeparatorDescription": "Character that will be put between the split chunks. (It's newline \"\\n\" by default.)",
"charBeforeChunkDescription": "Character before each chunk",
"charAfterChunkDescription": "Character after each chunk"
},
"statistic": {
"characterFrequencyAnalysis": "Character Frequency Analysis",

2
public/locales/en/time.json
View File

@@ -1,6 +1,8 @@
{
"checkLeapYears": {
"description": "Check if a year is a leap year and get leap year information.",
"exampleDescription": "One of our friends was born on a leap year on February 29th and as a consequence, she has a birthday only once every 4 years. As we can never really remember when her birthday is, we are using our program to create a reminder list of the upcoming leap years. To create a list of her next birthdays, we load a sequence of years from 2025 to 2040 into the input and get the status of each year. If the program says that it's a leap year, then we know that we'll be invited to a birthday party on February 29th.",
"exampleTitle": "Find Birthdays on February 29",
"inputTitle": "Input year",
"resultTitle": "Leap year result",
"shortDescription": "Check if a year is a leap year",

19
src/pages/tools/audio/merge-audio/index.tsx
View File

@@ -1,5 +1,6 @@
import { Box, FormControlLabel, Radio, RadioGroup } from '@mui/material';
import React, { useState } from 'react';
import { useTranslation } from 'react-i18next';
import ToolContent from '@components/ToolContent';
import { ToolComponentProps } from '@tools/defineTool';
import { GetGroupsType } from '@components/options/ToolOptions';
@@ -24,6 +25,7 @@ export default function MergeAudio({
title,
longDescription
}: ToolComponentProps) {
const { t } = useTranslation('audio');
const [input, setInput] = useState<MultiAudioInput[]>([]);
const [result, setResult] = useState<File | null>(null);
const [loading, setLoading] = useState(false);
@@ -51,7 +53,7 @@ export default function MergeAudio({
updateField
}) => [
{
title: 'Output Format',
title: t('mergeAudio.outputFormat'),
component: (
<Box mt={2}>
<RadioGroup
@@ -87,16 +89,20 @@ export default function MergeAudio({
value={input}
onChange={setInput}
accept={['audio/*', '.mp3', '.wav', '.aac']}
title={'Input Audio Files'}
title={t('mergeAudio.inputTitle')}
type="audio"
/>
}
resultComponent={
loading ? (
<ToolFileResult title="Merging Audio" value={null} loading={true} />
<ToolFileResult
title={t('mergeAudio.mergingAudio')}
value={null}
loading={true}
/>
) : (
<ToolFileResult
title="Merged Audio"
title={t('mergeAudio.resultTitle')}
value={result}
extension={result ? result.name.split('.').pop() : undefined}
/>
@@ -106,7 +112,10 @@ export default function MergeAudio({
getGroups={getGroups}
setInput={setInput}
compute={compute}
toolInfo={{ title: `What is ${title}?`, description: longDescription }}
toolInfo={{
title: t('mergeAudio.toolInfo.title', { title }),
description: longDescription
}}
/>
);
}

29
src/pages/tools/audio/trim/index.tsx
View File

@@ -1,5 +1,6 @@
import { Box, FormControlLabel, Radio, RadioGroup } from '@mui/material';
import React, { useState } from 'react';
import { useTranslation } from 'react-i18next';
import ToolContent from '@components/ToolContent';
import { ToolComponentProps } from '@tools/defineTool';
import { GetGroupsType } from '@components/options/ToolOptions';
@@ -22,6 +23,7 @@ const formatOptions = [
];
export default function Trim({ title, longDescription }: ToolComponentProps) {
const { t } = useTranslation('audio');
const [input, setInput] = useState<File | null>(null);
const [result, setResult] = useState<File | null>(null);
const [loading, setLoading] = useState(false);
@@ -48,28 +50,28 @@ export default function Trim({ title, longDescription }: ToolComponentProps) {
updateField
}) => [
{
title: 'Time Settings',
title: t('trim.timeSettings'),
component: (
<Box>
<TextFieldWithDesc
value={values.startTime}
onOwnChange={(val) => updateField('startTime', val)}
description="Start time in format HH:MM:SS (e.g., 00:00:30)"
label="Start Time"
description={t('trim.startTimeDescription')}
label={t('trim.startTime')}
/>
<Box mt={2}>
<TextFieldWithDesc
value={values.endTime}
onOwnChange={(val) => updateField('endTime', val)}
description="End time in format HH:MM:SS (e.g., 00:01:30)"
label="End Time"
description={t('trim.endTimeDescription')}
label={t('trim.endTime')}
/>
</Box>
</Box>
)
},
{
title: 'Output Format',
title: t('trim.outputFormat'),
component: (
<Box mt={2}>
<RadioGroup
@@ -104,15 +106,19 @@ export default function Trim({ title, longDescription }: ToolComponentProps) {
<ToolAudioInput
value={input}
onChange={setInput}
title={'Input Audio'}
title={t('trim.inputTitle')}
/>
}
resultComponent={
loading ? (
<ToolFileResult title="Trimming Audio" value={null} loading={true} />
<ToolFileResult
title={t('trim.trimmingAudio')}
value={null}
loading={true}
/>
) : (
<ToolFileResult
title="Trimmed Audio"
title={t('trim.resultTitle')}
value={result}
extension={result ? result.name.split('.').pop() : undefined}
/>
@@ -122,7 +128,10 @@ export default function Trim({ title, longDescription }: ToolComponentProps) {
getGroups={getGroups}
setInput={setInput}
compute={compute}
toolInfo={{ title: `What is ${title}?`, description: longDescription }}
toolInfo={{
title: t('trim.toolInfo.title', { title }),
description: longDescription
}}
/>
);
}

11
src/pages/tools/csv/csv-to-json/index.tsx
View File

@@ -131,8 +131,10 @@ export default function CsvToJson({ title }: ToolComponentProps) {
setResult(jsonResult);
} catch (error) {
setResult(
`Error: ${
error instanceof Error ? error.message : 'Invalid CSV format'
`${t('csvToJson.error')}: ${
error instanceof Error
? error.message
: t('csvToJson.invalidCsvFormat')
}`
);
}
@@ -211,9 +213,8 @@ export default function CsvToJson({ title }: ToolComponentProps) {
}
]}
toolInfo={{
title: 'What Is a CSV to JSON Converter?',
description:
'This tool transforms Comma Separated Values (CSV) files to JavaScript Object Notation (JSON) data structures. It supports various CSV formats with customizable delimiters, quote characters, and comment symbols. The converter can treat the first row as headers, skip empty lines, and automatically detect data types like numbers and booleans. The resulting JSON can be used for data migration, backups, or as input for other applications.'
title: t('csvToJson.toolInfo.title'),
description: t('csvToJson.toolInfo.description')
}}
/>
);

22
src/pages/tools/image/generic/compress/index.tsx
View File

@@ -1,4 +1,5 @@
import React, { useContext, useState } from 'react';
import { useTranslation } from 'react-i18next';
import { InitialValuesType } from './types';
import { compressImage } from './service';
import ToolContent from '@components/ToolContent';
@@ -17,6 +18,7 @@ const initialValues: InitialValuesType = {
};
export default function CompressImage({ title }: ToolComponentProps) {
const { t } = useTranslation('image');
const [input, setInput] = useState<File | null>(null);
const [result, setResult] = useState<File | null>(null);
const [isProcessing, setIsProcessing] = useState<boolean>(false);
@@ -37,7 +39,7 @@ export default function CompressImage({ title }: ToolComponentProps) {
setResult(compressed);
setCompressedSize(compressed.size);
} else {
showSnackBar('Failed to compress image. Please try again.', 'error');
showSnackBar(t('compress.failedToCompress'), 'error');
}
} catch (err) {
console.error('Error in compression:', err);
@@ -55,12 +57,12 @@ export default function CompressImage({ title }: ToolComponentProps) {
value={input}
onChange={setInput}
accept={['image/*']}
title={'Input image'}
title={t('compress.inputTitle')}
/>
}
resultComponent={
<ToolFileResult
title={'Compressed image'}
title={t('compress.resultTitle')}
value={result}
loading={isProcessing}
/>
@@ -68,14 +70,14 @@ export default function CompressImage({ title }: ToolComponentProps) {
initialValues={initialValues}
getGroups={({ values, updateField }) => [
{
title: 'Compression options',
title: t('compress.compressionOptions'),
component: (
<Box>
<TextFieldWithDesc
name="maxFileSizeInMB"
type="number"
inputProps={{ min: 0.1, step: 0.1 }}
description="Maximum file size in megabytes"
description={t('compress.maxFileSizeDescription')}
onOwnChange={(value) =>
updateNumberField(value, 'maxFileSizeInMB', updateField)
}
@@ -85,7 +87,7 @@ export default function CompressImage({ title }: ToolComponentProps) {
name="quality"
type="number"
inputProps={{ min: 10, max: 100, step: 1 }}
description="Image quality percentage (lower means smaller file size)"
description={t('compress.qualityDescription')}
onOwnChange={(value) =>
updateNumberField(value, 'quality', updateField)
}
@@ -95,18 +97,20 @@ export default function CompressImage({ title }: ToolComponentProps) {
)
},
{
title: 'File sizes',
title: t('compress.fileSizes'),
component: (
<Box>
<Box>
{originalSize !== null && (
<Typography>
Original Size: {(originalSize / 1024).toFixed(2)} KB
{t('compress.originalSize')}:{' '}
{(originalSize / 1024).toFixed(2)} KB
</Typography>
)}
{compressedSize !== null && (
<Typography>
Compressed Size: {(compressedSize / 1024).toFixed(2)} KB
{t('compress.compressedSize')}:{' '}
{(compressedSize / 1024).toFixed(2)} KB
</Typography>
)}
</Box>

4
src/pages/tools/list/duplicate/index.tsx
View File

@@ -123,9 +123,9 @@ export default function Duplicate({ title }: ToolComponentProps) {
);
} catch (error) {
if (error instanceof Error) {
setResult(`Error: ${error.message}`);
setResult(`${t('duplicate.error')}: ${error.message}`);
} else {
setResult('An unknown error occurred');
setResult(t('duplicate.unknownError'));
}
}
}

81
src/pages/tools/list/find-most-popular/index.tsx
View File

@@ -1,5 +1,6 @@
import { Box } from '@mui/material';
import React, { useState } from 'react';
import { useTranslation } from 'react-i18next';
import ToolTextInput from '@components/input/ToolTextInput';
import ToolTextResult from '@components/result/ToolTextResult';
import {
@@ -14,6 +15,7 @@ import CheckboxWithDesc from '@components/options/CheckboxWithDesc';
import SelectWithDesc from '@components/options/SelectWithDesc';
import ToolContent from '@components/ToolContent';
import { ToolComponentProps } from '@tools/defineTool';
import { ParseKeys } from 'i18next';
const initialValues = {
splitSeparatorType: 'symbol' as SplitOperatorType,
@@ -25,23 +27,24 @@ const initialValues = {
trimItems: false
};
const splitOperators: {
title: string;
description: string;
title: ParseKeys<'list'>;
description: ParseKeys<'list'>;
type: SplitOperatorType;
}[] = [
{
title: 'Use a Symbol for Splitting',
description: 'Delimit input list items with a character.',
title: 'findMostPopular.splitOperators.symbol.title',
description: 'findMostPopular.splitOperators.symbol.description',
type: 'symbol'
},
{
title: 'Use a Regex for Splitting',
title: 'findMostPopular.splitOperators.regex.title',
type: 'regex',
description: 'Delimit input list items with a regular expression.'
description: 'findMostPopular.splitOperators.regex.description'
}
];
export default function FindMostPopular({ title }: ToolComponentProps) {
const { t } = useTranslation('list');
const [input, setInput] = useState<string>('');
const [result, setResult] = useState<string>('');
const compute = (optionsValues: typeof initialValues, input: any) => {
@@ -74,28 +77,35 @@ export default function FindMostPopular({ title }: ToolComponentProps) {
title={title}
input={input}
inputComponent={
<ToolTextInput title={'Input list'} value={input} onChange={setInput} />
<ToolTextInput
title={t('findMostPopular.inputTitle')}
value={input}
onChange={setInput}
/>
}
resultComponent={
<ToolTextResult title={'Most popular items'} value={result} />
<ToolTextResult
title={t('findMostPopular.resultTitle')}
value={result}
/>
}
initialValues={initialValues}
getGroups={({ values, updateField }) => [
{
title: 'How to Extract List Items?',
title: t('findMostPopular.extractListItems'),
component: (
<Box>
{splitOperators.map(({ title, description, type }) => (
<SimpleRadio
key={type}
onClick={() => updateField('splitSeparatorType', type)}
title={title}
description={description}
title={t(title)}
description={t(description)}
checked={values.splitSeparatorType === type}
/>
))}
<TextFieldWithDesc
description={'Set a delimiting symbol or regular expression.'}
description={t('findMostPopular.splitSeparatorDescription')}
value={values.splitSeparator}
onOwnChange={(val) => updateField('splitSeparator', val)}
/>
@@ -103,26 +113,24 @@ export default function FindMostPopular({ title }: ToolComponentProps) {
)
},
{
title: 'Item comparison',
title: t('findMostPopular.itemComparison'),
component: (
<Box>
<CheckboxWithDesc
title={'Remove empty items'}
description={'Ignore empty items from comparison.'}
title={t('findMostPopular.removeEmptyItems')}
description={t('findMostPopular.removeEmptyItemsDescription')}
checked={values.deleteEmptyItems}
onChange={(value) => updateField('deleteEmptyItems', value)}
/>
<CheckboxWithDesc
title={'Trim top list items'}
description={
'Remove leading and trailing spaces before comparing items'
}
title={t('findMostPopular.trimItems')}
description={t('findMostPopular.trimItemsDescription')}
checked={values.trimItems}
onChange={(value) => updateField('trimItems', value)}
/>
<CheckboxWithDesc
title={'Ignore Item Case'}
description={'Compare all list items in lowercase.'}
title={t('findMostPopular.ignoreItemCase')}
description={t('findMostPopular.ignoreItemCaseDescription')}
checked={values.ignoreItemCase}
onChange={(value) => updateField('ignoreItemCase', value)}
/>
@@ -130,27 +138,42 @@ export default function FindMostPopular({ title }: ToolComponentProps) {
)
},
{
title: 'Top item output format',
title: t('findMostPopular.outputFormat'),
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' }
{
label: t('findMostPopular.displayOptions.percentage'),
value: 'percentage'
},
{
label: t('findMostPopular.displayOptions.count'),
value: 'count'
},
{
label: t('findMostPopular.displayOptions.total'),
value: 'total'
}
]}
onChange={(value) => updateField('displayFormat', value)}
description={'How to display the most popular list items?'}
description={t('findMostPopular.displayFormatDescription')}
/>
<SelectWithDesc
selected={values.sortingMethod}
options={[
{ label: 'Sort Alphabetically', value: 'alphabetic' },
{ label: 'Sort by count', value: 'count' }
{
label: t('findMostPopular.sortOptions.alphabetic'),
value: 'alphabetic'
},
{
label: t('findMostPopular.sortOptions.count'),
value: 'count'
}
]}
onChange={(value) => updateField('sortingMethod', value)}
description={'Select a sorting method.'}
description={t('findMostPopular.sortingMethodDescription')}
/>
</Box>
)

46
src/pages/tools/string/split/index.tsx
View File

@@ -12,6 +12,7 @@ import { ToolComponentProps } from '@tools/defineTool';
import { FormikProps } from 'formik';
import ToolContent from '@components/ToolContent';
import { useTranslation } from 'react-i18next';
import { ParseKeys } from 'i18next';
const initialValues = {
splitSeparatorType: 'symbol' as SplitOperatorType,
@@ -25,55 +26,45 @@ const initialValues = {
charAfterChunk: ''
};
const splitOperators: {
title: string;
description: string;
title: ParseKeys<'string'>;
description: ParseKeys<'string'>;
type: SplitOperatorType;
}[] = [
{
title: 'Use a Symbol for Splitting',
description:
'Character that will be used to\n' +
'break text into parts.\n' +
'(Space by default.)',
title: 'split.symbolTitle',
description: 'split.symbolDescription',
type: 'symbol'
},
{
title: 'Use a Regex for Splitting',
title: 'split.regexTitle',
type: 'regex',
description:
'Regular expression that will be\n' +
'used to break text into parts.\n' +
'(Multiple spaces by default.)'
description: 'split.regexDescription'
},
{
title: 'Use Length for Splitting',
description:
'Number of symbols that will be\n' + 'put in each output chunk.',
title: 'split.lengthTitle',
description: 'split.lengthDescription',
type: 'length'
},
{
title: 'Use a Number of Chunks',
description: 'Number of chunks of equal\n' + 'length in the output.',
title: 'split.chunksTitle',
description: 'split.chunksDescription',
type: 'chunks'
}
];
const outputOptions: {
description: string;
description: ParseKeys<'string'>;
accessor: keyof typeof initialValues;
}[] = [
{
description:
'Character that will be put\n' +
'between the split chunks.\n' +
'(It\'s newline "\\n" by default.)',
description: 'split.outputSeparatorDescription',
accessor: 'outputSeparator'
},
{
description: 'Character before each chunk',
description: 'split.charBeforeChunkDescription',
accessor: 'charBeforeChunk'
},
{
description: 'Character after each chunk',
description: 'split.charAfterChunkDescription',
accessor: 'charAfterChunk'
}
];
@@ -183,9 +174,9 @@ export default function SplitText({ title }: ToolComponentProps) {
<RadioWithTextField
key={type}
checked={type === values.splitSeparatorType}
title={t(`split.${type}Title`)}
title={t(title)}
fieldName={'splitSeparatorType'}
description={t(`split.${type}Description`)}
description={t(description)}
value={values[`${type}Value`]}
onRadioClick={() => updateField('splitSeparatorType', type)}
onTextChange={(val) => updateField(`${type}Value`, val)}
@@ -199,8 +190,7 @@ export default function SplitText({ title }: ToolComponentProps) {
key={option.accessor}
value={values[option.accessor]}
onOwnChange={(value) => updateField(option.accessor, value)}
//@ts-ignore
description={t(`split.${option.accessor}Description`)}
description={t(option.description)}
/>
))
}