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

fix: compute not firing

Browse Source
This commit is contained in:
Ibrahima G. Coulibaly
2025-03-14 17:06:38 +00:00
parent 9a1ecffedd
commit 8de1c51adf
3 changed files with 83 additions and 91 deletions
Download Patch File Download Diff File Expand all files Collapse all files

109
.idea/workspace.xml generated
View File

@@ -6,9 +6,8 @@
<component name="ChangeListManager"> <component name="ChangeListManager">
<list default="true" id="b30e2810-c4c1-4aad-b134-794e52cc1c7d" name="Changes" comment="feat: trim video"> <list default="true" id="b30e2810-c4c1-4aad-b134-794e52cc1c7d" name="Changes" comment="feat: trim video">
<change beforePath="$PROJECT_DIR$/.idea/workspace.xml" beforeDir="false" afterPath="$PROJECT_DIR$/.idea/workspace.xml" afterDir="false" /> <change beforePath="$PROJECT_DIR$/.idea/workspace.xml" beforeDir="false" afterPath="$PROJECT_DIR$/.idea/workspace.xml" afterDir="false" />
<change beforePath="$PROJECT_DIR$/src/pages/tools/image/png/change-colors-in-png/change-colors-in-png.e2e.spec.ts" beforeDir="false" afterPath="$PROJECT_DIR$/src/pages/tools/image/png/change-colors-in-png/change-colors-in-png.e2e.spec.ts" afterDir="false" /> <change beforePath="$PROJECT_DIR$/src/components/ToolContent.tsx" beforeDir="false" afterPath="$PROJECT_DIR$/src/components/ToolContent.tsx" afterDir="false" />
<change beforePath="$PROJECT_DIR$/src/pages/tools/image/png/create-transparent/create-transparent.e2e.spec.ts" beforeDir="false" afterPath="$PROJECT_DIR$/src/pages/tools/image/png/create-transparent/create-transparent.e2e.spec.ts" afterDir="false" /> <change beforePath="$PROJECT_DIR$/src/components/options/ToolOptions.tsx" beforeDir="false" afterPath="$PROJECT_DIR$/src/components/options/ToolOptions.tsx" afterDir="false" />
<change beforePath="$PROJECT_DIR$/src/pages/tools/video/trim/index.tsx" beforeDir="false" afterPath="$PROJECT_DIR$/src/pages/tools/video/trim/index.tsx" afterDir="false" />
</list> </list>
<option name="SHOW_DIALOG" value="false" /> <option name="SHOW_DIALOG" value="false" />
<option name="HIGHLIGHT_CONFLICTS" value="true" /> <option name="HIGHLIGHT_CONFLICTS" value="true" />
@@ -25,7 +24,7 @@
<option name="PUSH_AUTO_UPDATE" value="true" /> <option name="PUSH_AUTO_UPDATE" value="true" />
<option name="RECENT_BRANCH_BY_REPOSITORY"> <option name="RECENT_BRANCH_BY_REPOSITORY">
<map> <map>
<entry key="$PROJECT_DIR$" value="fork/ady-cf/feature/validate-json" /> <entry key="$PROJECT_DIR$" value="fork/EugSh1/truncate-text" />
</map> </map>
</option> </option>
<option name="RECENT_GIT_ROOT_PATH" value="$PROJECT_DIR$" /> <option name="RECENT_GIT_ROOT_PATH" value="$PROJECT_DIR$" />
@@ -100,6 +99,7 @@
}</component> }</component>
<component name="ProjectId" id="2i6g3WkUxdCURKYvUIJ9LMY5Qsc" /> <component name="ProjectId" id="2i6g3WkUxdCURKYvUIJ9LMY5Qsc" />
<component name="ProjectLevelVcsManager" settingsEditedManually="true"> <component name="ProjectLevelVcsManager" settingsEditedManually="true">
<OptionsSetting value="false" id="Update" />
<ConfirmationsSetting value="2" id="Add" /> <ConfirmationsSetting value="2" id="Add" />
</component> </component>
<component name="ProjectViewState"> <component name="ProjectViewState">
@@ -107,54 +107,54 @@
<option name="hideEmptyMiddlePackages" value="true" /> <option name="hideEmptyMiddlePackages" value="true" />
<option name="showLibraryContents" value="true" /> <option name="showLibraryContents" value="true" />
</component> </component>
<component name="PropertiesComponent"><![CDATA[{ <component name="PropertiesComponent">{
"keyToString": { &quot;keyToString&quot;: {
"ASKED_ADD_EXTERNAL_FILES": "true", &quot;ASKED_ADD_EXTERNAL_FILES&quot;: &quot;true&quot;,
"ASKED_SHARE_PROJECT_CONFIGURATION_FILES": "true", &quot;ASKED_SHARE_PROJECT_CONFIGURATION_FILES&quot;: &quot;true&quot;,
"Docker.Dockerfile build.executor": "Run", &quot;Docker.Dockerfile build.executor&quot;: &quot;Run&quot;,
"Docker.Dockerfile.executor": "Run", &quot;Docker.Dockerfile.executor&quot;: &quot;Run&quot;,
"Playwright.Create transparent PNG.should make png color transparent.executor": "Run", &quot;Playwright.Create transparent PNG.should make png color transparent.executor&quot;: &quot;Run&quot;,
"Playwright.JoinText Component.executor": "Run", &quot;Playwright.JoinText Component.executor&quot;: &quot;Run&quot;,
"Playwright.JoinText Component.should merge text pieces with specified join character.executor": "Run", &quot;Playwright.JoinText Component.should merge text pieces with specified join character.executor&quot;: &quot;Run&quot;,
"RunOnceActivity.OpenProjectViewOnStart": "true", &quot;RunOnceActivity.OpenProjectViewOnStart&quot;: &quot;true&quot;,
"RunOnceActivity.ShowReadmeOnStart": "true", &quot;RunOnceActivity.ShowReadmeOnStart&quot;: &quot;true&quot;,
"RunOnceActivity.git.unshallow": "true", &quot;RunOnceActivity.git.unshallow&quot;: &quot;true&quot;,
"Vitest.compute function (1).executor": "Run", &quot;Vitest.compute function (1).executor&quot;: &quot;Run&quot;,
"Vitest.compute function.executor": "Run", &quot;Vitest.compute function.executor&quot;: &quot;Run&quot;,
"Vitest.mergeText.executor": "Run", &quot;Vitest.mergeText.executor&quot;: &quot;Run&quot;,
"Vitest.mergeText.should merge lines and preserve blank lines when deleteBlankLines is false.executor": "Run", &quot;Vitest.mergeText.should merge lines and preserve blank lines when deleteBlankLines is false.executor&quot;: &quot;Run&quot;,
"Vitest.mergeText.should merge lines, preserve blank lines and trailing spaces when both deleteBlankLines and deleteTrailingSpaces are false.executor": "Run", &quot;Vitest.mergeText.should merge lines, preserve blank lines and trailing spaces when both deleteBlankLines and deleteTrailingSpaces are false.executor&quot;: &quot;Run&quot;,
"Vitest.removeDuplicateLines function.executor": "Run", &quot;Vitest.removeDuplicateLines function.executor&quot;: &quot;Run&quot;,
"Vitest.removeDuplicateLines function.newlines option.executor": "Run", &quot;Vitest.removeDuplicateLines function.newlines option.executor&quot;: &quot;Run&quot;,
"Vitest.removeDuplicateLines function.newlines option.should filter newlines when newlines is set to filter.executor": "Run", &quot;Vitest.removeDuplicateLines function.newlines option.should filter newlines when newlines is set to filter.executor&quot;: &quot;Run&quot;,
"Vitest.replaceText function (regexp mode).should return the original text when passed an invalid regexp.executor": "Run", &quot;Vitest.replaceText function (regexp mode).should return the original text when passed an invalid regexp.executor&quot;: &quot;Run&quot;,
"Vitest.replaceText function.executor": "Run", &quot;Vitest.replaceText function.executor&quot;: &quot;Run&quot;,
"git-widget-placeholder": "main", &quot;git-widget-placeholder&quot;: &quot;main&quot;,
"ignore.virus.scanning.warn.message": "true", &quot;ignore.virus.scanning.warn.message&quot;: &quot;true&quot;,
"kotlin-language-version-configured": "true", &quot;kotlin-language-version-configured&quot;: &quot;true&quot;,
"last_opened_file_path": "C:/Users/Ibrahima/IdeaProjects/omni-tools/src/pages/tools/list/duplicate/index.tsx", &quot;last_opened_file_path&quot;: &quot;C:/Users/Ibrahima/IdeaProjects/omni-tools/src/pages/tools/list/duplicate/index.tsx&quot;,
"node.js.detected.package.eslint": "true", &quot;node.js.detected.package.eslint&quot;: &quot;true&quot;,
"node.js.detected.package.tslint": "true", &quot;node.js.detected.package.tslint&quot;: &quot;true&quot;,
"node.js.selected.package.eslint": "(autodetect)", &quot;node.js.selected.package.eslint&quot;: &quot;(autodetect)&quot;,
"node.js.selected.package.tslint": "(autodetect)", &quot;node.js.selected.package.tslint&quot;: &quot;(autodetect)&quot;,
"nodejs_package_manager_path": "npm", &quot;nodejs_package_manager_path&quot;: &quot;npm&quot;,
"npm.build.executor": "Run", &quot;npm.build.executor&quot;: &quot;Run&quot;,
"npm.dev.executor": "Run", &quot;npm.dev.executor&quot;: &quot;Run&quot;,
"npm.lint.executor": "Run", &quot;npm.lint.executor&quot;: &quot;Run&quot;,
"npm.prebuild.executor": "Run", &quot;npm.prebuild.executor&quot;: &quot;Run&quot;,
"npm.script:create:tool.executor": "Run", &quot;npm.script:create:tool.executor&quot;: &quot;Run&quot;,
"npm.test.executor": "Run", &quot;npm.test.executor&quot;: &quot;Run&quot;,
"npm.test:e2e.executor": "Run", &quot;npm.test:e2e.executor&quot;: &quot;Run&quot;,
"npm.test:e2e:run.executor": "Run", &quot;npm.test:e2e:run.executor&quot;: &quot;Run&quot;,
"prettierjs.PrettierConfiguration.Package": "C:\\Users\\Ibrahima\\IdeaProjects\\omni-tools\\node_modules\\prettier", &quot;prettierjs.PrettierConfiguration.Package&quot;: &quot;C:\\Users\\Ibrahima\\IdeaProjects\\omni-tools\\node_modules\\prettier&quot;,
"project.structure.last.edited": "Problems", &quot;project.structure.last.edited&quot;: &quot;Problems&quot;,
"project.structure.proportion": "0.0", &quot;project.structure.proportion&quot;: &quot;0.0&quot;,
"project.structure.side.proportion": "0.2", &quot;project.structure.side.proportion&quot;: &quot;0.2&quot;,
"settings.editor.selected.configurable": "refactai_advanced_settings", &quot;settings.editor.selected.configurable&quot;: &quot;refactai_advanced_settings&quot;,
"ts.external.directory.path": "C:\\Users\\Ibrahima\\IdeaProjects\\omni-tools\\node_modules\\typescript\\lib", &quot;ts.external.directory.path&quot;: &quot;C:\\Users\\Ibrahima\\IdeaProjects\\omni-tools\\node_modules\\typescript\\lib&quot;,
"vue.rearranger.settings.migration": "true" &quot;vue.rearranger.settings.migration&quot;: &quot;true&quot;
} }
}]]></component> }</component>
<component name="ReactDesignerToolWindowState"> <component name="ReactDesignerToolWindowState">
<option name="myId2Visible"> <option name="myId2Visible">
<map> <map>
@@ -180,7 +180,7 @@
<recent name="C:\Users\HP\IdeaProjects\omni-tools\src\components\options" /> <recent name="C:\Users\HP\IdeaProjects\omni-tools\src\components\options" />
</key> </key>
</component> </component>
<component name="RunManager" selected="npm.test:e2e"> <component name="RunManager" selected="npm.dev">
<configuration name="Create transparent PNG.should make png color transparent" type="JavaScriptTestRunnerPlaywright" temporary="true" nameIsGenerated="true"> <configuration name="Create transparent PNG.should make png color transparent" type="JavaScriptTestRunnerPlaywright" temporary="true" nameIsGenerated="true">
<node-interpreter value="project" /> <node-interpreter value="project" />
<playwright-package value="$PROJECT_DIR$/node_modules/@playwright/test" /> <playwright-package value="$PROJECT_DIR$/node_modules/@playwright/test" />
@@ -253,10 +253,10 @@
</list> </list>
<recent_temporary> <recent_temporary>
<list> <list>
<item itemvalue="npm.test:e2e" />
<item itemvalue="Playwright.Create transparent PNG.should make png color transparent" />
<item itemvalue="npm.dev" /> <item itemvalue="npm.dev" />
<item itemvalue="Vitest.replaceText function (regexp mode).should return the original text when passed an invalid regexp" /> <item itemvalue="Vitest.replaceText function (regexp mode).should return the original text when passed an invalid regexp" />
<item itemvalue="Playwright.Create transparent PNG.should make png color transparent" />
<item itemvalue="npm.test:e2e" />
<item itemvalue="npm.test" /> <item itemvalue="npm.test" />
</list> </list>
</recent_temporary> </recent_temporary>
@@ -340,6 +340,7 @@
<workItem from="1741539602311" duration="4557000" /> <workItem from="1741539602311" duration="4557000" />
<workItem from="1741547560596" duration="1671000" /> <workItem from="1741547560596" duration="1671000" />
<workItem from="1741567442768" duration="14127000" /> <workItem from="1741567442768" duration="14127000" />
<workItem from="1741971589699" duration="371000" />
</task> </task>
<task id="LOCAL-00115" summary="fix: broken links"> <task id="LOCAL-00115" summary="fix: broken links">
<option name="closed" value="true" /> <option name="closed" value="true" />

35
src/components/ToolContent.tsx
View File

@@ -1,6 +1,6 @@
import React, { useRef, ReactNode, useState } from 'react'; import React, { ReactNode, useContext } from 'react';
import { Box } from '@mui/material'; import { Box } from '@mui/material';
import { Formik, FormikProps, FormikValues } from 'formik'; import { Formik, FormikValues, useFormikContext } from 'formik';
import ToolOptions, { GetGroupsType } from '@components/options/ToolOptions'; import ToolOptions, { GetGroupsType } from '@components/options/ToolOptions';
import ToolInputAndResult from '@components/ToolInputAndResult'; import ToolInputAndResult from '@components/ToolInputAndResult';
import ToolInfo from '@components/ToolInfo'; import ToolInfo from '@components/ToolInfo';
@@ -9,6 +9,29 @@ import ToolExamples, {
CardExampleType CardExampleType
} from '@components/examples/ToolExamples'; } from '@components/examples/ToolExamples';
import { ToolComponentProps } from '@tools/defineTool'; import { ToolComponentProps } from '@tools/defineTool';
import { CustomSnackBarContext } from '../contexts/CustomSnackBarContext';
const FormikListenerComponent = <T,>({
input,
compute
}: {
input: any;
compute: (optionsValues: T, input: any) => void;
}) => {
const { values } = useFormikContext<T>();
const { showSnackBar } = useContext(CustomSnackBarContext);
React.useEffect(() => {
try {
compute(values, input);
} catch (exception: unknown) {
if (exception instanceof Error) showSnackBar(exception.message, 'error');
else console.error(exception);
}
}, [values, input, showSnackBar]);
return null; // This component doesn't render anything
};
interface ToolContentProps<T, I> extends ToolComponentProps { interface ToolContentProps<T, I> extends ToolComponentProps {
// Input/Output components // Input/Output components
@@ -75,12 +98,8 @@ export default function ToolContent<T extends FormikValues, I>({
} }
result={resultComponent} result={resultComponent}
/> />
<FormikListenerComponent<T> compute={compute} input={input} />
<ToolOptions <ToolOptions getGroups={getGroups} />
compute={compute}
getGroups={getGroups}
input={input}
/>
{toolInfo && toolInfo.title && toolInfo.description && ( {toolInfo && toolInfo.title && toolInfo.description && (
<ToolInfo <ToolInfo

30
src/components/options/ToolOptions.tsx
View File

@@ -1,48 +1,21 @@
import { Box, Stack, useTheme } from '@mui/material'; import { Box, Stack, useTheme } from '@mui/material';
import SettingsIcon from '@mui/icons-material/Settings'; import SettingsIcon from '@mui/icons-material/Settings';
import Typography from '@mui/material/Typography'; import Typography from '@mui/material/Typography';
import React, { ReactNode, useContext } from 'react'; import React, { ReactNode } from 'react';
import { FormikProps, FormikValues, useFormikContext } from 'formik'; import { FormikProps, FormikValues, useFormikContext } from 'formik';
import ToolOptionGroups, { ToolOptionGroup } from './ToolOptionGroups'; import ToolOptionGroups, { ToolOptionGroup } from './ToolOptionGroups';
import { CustomSnackBarContext } from '../../contexts/CustomSnackBarContext';
export type UpdateField<T> = <Y extends keyof T>(field: Y, value: T[Y]) => void; export type UpdateField<T> = <Y extends keyof T>(field: Y, value: T[Y]) => void;
const FormikListenerComponent = <T,>({
input,
compute
}: {
input: any;
compute: (optionsValues: T, input: any) => void;
}) => {
const { values } = useFormikContext<T>();
const { showSnackBar } = useContext(CustomSnackBarContext);
React.useEffect(() => {
try {
compute(values, input);
} catch (exception: unknown) {
if (exception instanceof Error) showSnackBar(exception.message, 'error');
else console.error(exception);
}
}, [values, input, showSnackBar]);
return null; // This component doesn't render anything
};
export type GetGroupsType<T> = ( export type GetGroupsType<T> = (
formikProps: FormikProps<T> & { updateField: UpdateField<T> } formikProps: FormikProps<T> & { updateField: UpdateField<T> }
) => ToolOptionGroup[]; ) => ToolOptionGroup[];
export default function ToolOptions<T extends FormikValues>({ export default function ToolOptions<T extends FormikValues>({
children, children,
compute,
input,
getGroups getGroups
}: { }: {
children?: ReactNode; children?: ReactNode;
compute: (optionsValues: T, input: any) => void;
input?: any;
getGroups: GetGroupsType<T> | null; getGroups: GetGroupsType<T> | null;
}) { }) {
const theme = useTheme(); const theme = useTheme();
@@ -74,7 +47,6 @@ export default function ToolOptions<T extends FormikValues>({
</Stack> </Stack>
<Box mt={2}> <Box mt={2}>
<Stack direction={'row'} spacing={2}> <Stack direction={'row'} spacing={2}>
<FormikListenerComponent<T> compute={compute} input={input} />
<ToolOptionGroups <ToolOptionGroups
groups={getGroups({ ...formikContext, updateField }) ?? []} groups={getGroups({ ...formikContext, updateField }) ?? []}
/> />