diff --git a/.idea/workspace.xml b/.idea/workspace.xml
index e0222d2..215a0c3 100644
--- a/.idea/workspace.xml
+++ b/.idea/workspace.xml
@@ -4,10 +4,13 @@
-
+
-
-
+
+
+
+
+
@@ -23,7 +26,7 @@
@@ -59,47 +62,47 @@
- {
- "keyToString": {
- "ASKED_ADD_EXTERNAL_FILES": "true",
- "ASKED_SHARE_PROJECT_CONFIGURATION_FILES": "true",
- "Docker.Dockerfile build.executor": "Run",
- "Docker.Dockerfile.executor": "Run",
- "Playwright.JoinText Component.executor": "Run",
- "Playwright.JoinText Component.should merge text pieces with specified join character.executor": "Run",
- "RunOnceActivity.OpenProjectViewOnStart": "true",
- "RunOnceActivity.ShowReadmeOnStart": "true",
- "RunOnceActivity.git.unshallow": "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/Ibrahima/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\\Ibrahima\\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\\Ibrahima\\IdeaProjects\\omni-tools\\node_modules\\typescript\\lib",
- "vue.rearranger.settings.migration": "true"
+
+}]]>
@@ -688,7 +691,6 @@
-
@@ -713,7 +715,8 @@
-
+
+
diff --git a/src/components/examples/ExampleCard.tsx b/src/components/examples/ExampleCard.tsx
index 32126bc..69523c9 100644
--- a/src/components/examples/ExampleCard.tsx
+++ b/src/components/examples/ExampleCard.tsx
@@ -11,24 +11,29 @@ import {
import ArrowDownwardIcon from '@mui/icons-material/ArrowDownward';
import RequiredOptions from './RequiredOptions';
-export default function ExampleCard({
+export default function ExampleCard({
title,
description,
sampleText,
sampleResult,
requiredOptions,
- changeInputResult
-}: ExampleCardProps) {
+ changeInputResult,
+ getGroups
+}: ExampleCardProps) {
const theme = useTheme();
return (
{
+ changeInputResult(sampleText, sampleResult);
+ }}
sx={{
bgcolor: theme.palette.background.default,
height: '100%',
overflow: 'hidden',
borderRadius: 2,
transition: 'background-color 0.3s ease',
+ cursor: 'pointer',
'&:hover': {
boxShadow: '12px 9px 11px 2px #b8b9be, -6px -6px 12px #fff'
}
@@ -46,7 +51,6 @@ export default function ExampleCard({
changeInputResult(sampleText, sampleResult)}
sx={{
display: 'flex',
zIndex: '2',
@@ -55,7 +59,6 @@ export default function ExampleCard({
bgcolor: 'transparent',
padding: '5px 10px',
borderRadius: '5px',
- cursor: 'pointer',
boxShadow: 'inset 2px 2px 5px #b8b9be, inset -3px -3px 7px #fff;'
}}
>
@@ -77,7 +80,6 @@ export default function ExampleCard({
changeInputResult(sampleText, sampleResult)}
sx={{
display: 'flex',
zIndex: '2',
@@ -106,7 +108,7 @@ export default function ExampleCard({
/>
-
+
diff --git a/src/components/examples/Examples.tsx b/src/components/examples/Examples.tsx
index d534b2e..fef6660 100644
--- a/src/components/examples/Examples.tsx
+++ b/src/components/examples/Examples.tsx
@@ -1,32 +1,33 @@
import { Box, Grid, Stack, Typography } from '@mui/material';
import ExampleCard from './ExampleCard';
+import React from 'react';
+import { GetGroupsType } from '@components/options/ToolOptions';
-export interface ExampleCardProps {
+export interface ExampleCardProps {
title: string;
description: string;
sampleText: string;
sampleResult: string;
- requiredOptions: RequiredOptionsProps;
+ requiredOptions: T;
+ changeInputResult: (input: string, result: string) => void;
+ getGroups: GetGroupsType;
+}
+
+interface ExampleProps {
+ title: string;
+ subtitle: string;
+ exampleCards: ExampleCardProps[];
+ getGroups: GetGroupsType;
changeInputResult: (input: string, result: string) => void;
}
-export interface RequiredOptionsProps {
- joinCharacter: string;
- deleteBlankLines: boolean;
- deleteTrailingSpaces: boolean;
-}
-
-interface ExampleProps {
- title: string;
- subtitle: string;
- exampleCards: ExampleCardProps[];
-}
-
-export default function Examples({
+export default function Examples({
title,
subtitle,
- exampleCards
-}: ExampleProps) {
+ exampleCards,
+ getGroups,
+ changeInputResult
+}: ExampleProps) {
return (
@@ -48,7 +49,8 @@ export default function Examples({
sampleText={card.sampleText}
sampleResult={card.sampleResult}
requiredOptions={card.requiredOptions}
- changeInputResult={card.changeInputResult}
+ getGroups={getGroups}
+ changeInputResult={changeInputResult}
/>
))}
diff --git a/src/components/examples/RequiredOptions.tsx b/src/components/examples/RequiredOptions.tsx
index d79a325..1f83ecb 100644
--- a/src/components/examples/RequiredOptions.tsx
+++ b/src/components/examples/RequiredOptions.tsx
@@ -1,78 +1,13 @@
-import { Box, Stack, TextField, Typography } from '@mui/material';
-import { RequiredOptionsProps } from './Examples';
-import CheckboxWithDesc from 'components/options/CheckboxWithDesc';
+import ToolOptionGroups from '@components/options/ToolOptionGroups';
+import { GetGroupsType } from '@components/options/ToolOptions';
+import React from 'react';
-export default function RequiredOptions({
- options
+export default function RequiredOptions({
+ options,
+ getGroups
}: {
- options: RequiredOptionsProps;
+ options: T;
+ getGroups: GetGroupsType;
}) {
- const { joinCharacter, deleteBlankLines, deleteTrailingSpaces } = options;
-
- const handleBoxClick = () => {
- const toolsElement = document.getElementById('tool');
- if (toolsElement) {
- toolsElement.scrollIntoView({ behavior: 'smooth' });
- }
- };
-
- return (
-
-
- Required options
-
-
- These options will be used automatically if you select this example.
-
-
-
-
-
-
- {deleteBlankLines ? (
-
- {}}
- description="Delete lines that don't have text symbols."
- />
-
- ) : (
- ''
- )}
- {deleteTrailingSpaces ? (
-
- {}}
- description="Remove spaces and tabs at the end of the lines."
- />
-
- ) : (
- ''
- )}
-
- );
+ return ;
}
diff --git a/src/components/options/ToolOptions.tsx b/src/components/options/ToolOptions.tsx
index 3407e8e..09cb689 100644
--- a/src/components/options/ToolOptions.tsx
+++ b/src/components/options/ToolOptions.tsx
@@ -7,7 +7,7 @@ import ToolOptionGroups, { ToolOptionGroup } from './ToolOptionGroups';
import { CustomSnackBarContext } from '../../contexts/CustomSnackBarContext';
import * as Yup from 'yup';
-type UpdateField = (field: Y, value: T[Y]) => void;
+export type UpdateField = (field: Y, value: T[Y]) => void;
const FormikListenerComponent = ({
initialValues,
@@ -68,6 +68,10 @@ const ToolBody = ({
);
};
+
+export type GetGroupsType = (
+ formikProps: FormikProps & { updateField: UpdateField }
+) => ToolOptionGroup[];
export default function ToolOptions({
children,
initialValues,
@@ -82,9 +86,7 @@ export default function ToolOptions({
validationSchema?: any | (() => any);
compute: (optionsValues: T, input: any) => void;
input?: any;
- getGroups: (
- formikProps: FormikProps & { updateField: UpdateField }
- ) => ToolOptionGroup[];
+ getGroups: GetGroupsType;
formRef?: RefObject>;
}) {
const theme = useTheme();
diff --git a/src/pages/tools/string/join/index.tsx b/src/pages/tools/string/join/index.tsx
index f2d6e6f..571164a 100644
--- a/src/pages/tools/string/join/index.tsx
+++ b/src/pages/tools/string/join/index.tsx
@@ -3,7 +3,7 @@ import React, { useState } from 'react';
import * as Yup from 'yup';
import ToolTextInput from '@components/input/ToolTextInput';
import ToolTextResult from '@components/result/ToolTextResult';
-import ToolOptions from '@components/options/ToolOptions';
+import ToolOptions, { GetGroupsType } from '@components/options/ToolOptions';
import { mergeText } from './service';
import TextFieldWithDesc from '@components/options/TextFieldWithDesc';
import CheckboxWithDesc from '@components/options/CheckboxWithDesc';
@@ -64,8 +64,8 @@ build a rocket ship and fly away`,
sampleResult: `clean the house and go shopping and feed the cat and make dinner and build a rocket ship and fly away`,
requiredOptions: {
joinCharacter: 'and',
- deleteBlankLines: true,
- deleteTrailingSpaces: true
+ deleteBlank: true,
+ deleteTrailing: true
}
},
{
@@ -80,8 +80,8 @@ keyboard`,
sampleResult: `computer, memory, processor, mouse, keyboard`,
requiredOptions: {
joinCharacter: ',',
- deleteBlankLines: false,
- deleteTrailingSpaces: false
+ deleteBlank: false,
+ deleteTrailing: false
}
},
{
@@ -103,8 +103,8 @@ s
sampleResult: `Textabulous!`,
requiredOptions: {
joinCharacter: '',
- deleteBlankLines: false,
- deleteTrailingSpaces: false
+ deleteBlank: false,
+ deleteTrailing: false
}
}
];
@@ -128,6 +128,34 @@ export default function JoinText() {
}
}
+ const getGroups: GetGroupsType = ({
+ values,
+ updateField
+ }) => [
+ {
+ title: 'Text Merged Options',
+ component: (
+ updateField(mergeOptions.accessor, value)}
+ description={mergeOptions.description}
+ />
+ )
+ },
+ {
+ title: 'Blank Lines and Trailing Spaces',
+ component: blankTrailingOptions.map((option) => (
+ updateField(option.accessor, value)}
+ description={option.description}
+ />
+ ))
+ }
+ ];
return (
[
- {
- title: 'Text Merged Options',
- component: (
-
- updateField(mergeOptions.accessor, value)
- }
- description={mergeOptions.description}
- />
- )
- },
- {
- title: 'Blank Lines and Trailing Spaces',
- component: blankTrailingOptions.map((option) => (
- updateField(option.accessor, value)}
- description={option.description}
- />
- ))
- }
- ]}
+ getGroups={getGroups}
initialValues={initialValues}
input={input}
/>
@@ -182,8 +184,11 @@ export default function JoinText() {
subtitle="Click to try!"
exampleCards={exampleCards.map((card) => ({
...card,
- changeInputResult
+ changeInputResult,
+ getGroups
}))}
+ getGroups={getGroups}
+ changeInputResult={changeInputResult}
/>
);