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

refactor: use ToolContent

Browse Source
This commit is contained in:
Ibrahima G. Coulibaly
2025-03-09 01:50:09 +00:00
parent b372692971
commit 0499673a03
6 changed files with 136 additions and 159 deletions
Download Patch File Download Diff File Expand all files Collapse all files

53
src/components/examples/ExampleCard.tsx
View File

@@ -60,33 +60,36 @@ export default function ExampleCard<T>({
{description}
</Typography>
<Box
sx={{
display: 'flex',
zIndex: '2',
width: '100%',
height: '100%',
bgcolor: 'transparent',
padding: '5px 10px',
borderRadius: '5px',
boxShadow: 'inset 2px 2px 5px #b8b9be, inset -3px -3px 7px #fff;'
}}
>
<TextField
value={sampleText}
disabled
fullWidth
multiline
{sampleText && (
<Box
sx={{
'& .MuiOutlinedInput-root': {
zIndex: '-1',
'& fieldset': {
border: 'none'
}
}
display: 'flex',
zIndex: '2',
width: '100%',
height: '100%',
bgcolor: 'transparent',
padding: '5px 10px',
borderRadius: '5px',
boxShadow:
'inset 2px 2px 5px #b8b9be, inset -3px -3px 7px #fff;'
}}
/>
</Box>
>
<TextField
value={sampleText}
disabled
fullWidth
multiline
sx={{
'& .MuiOutlinedInput-root': {
zIndex: '-1',
'& fieldset': {
border: 'none'
}
}
}}
/>
</Box>
)}
<ArrowDownwardIcon />
<Box

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

@@ -36,9 +36,11 @@ interface FormikHelperProps<T> {
compute: (optionsValues: T, input: any) => void;
input: any;
children?: ReactNode;
getGroups: (
formikProps: FormikProps<T> & { updateField: UpdateField<T> }
) => ToolOptionGroup[];
getGroups:
| null
| ((
formikProps: FormikProps<T> & { updateField: UpdateField<T> }
) => ToolOptionGroup[]);
formikProps: FormikProps<T>;
}
@@ -63,7 +65,9 @@ const ToolBody = <T,>({
input={input}
initialValues={values}
/>
<ToolOptionGroups groups={getGroups({ ...formikProps, updateField })} />
<ToolOptionGroups
groups={getGroups?.({ ...formikProps, updateField }) ?? []}
/>
{children}
</Stack>
);
@@ -90,41 +94,41 @@ export default function ToolOptions<T extends FormikValues>({
formRef?: RefObject<FormikProps<T>>;
}) {
const theme = useTheme();
if (getGroups)
return (
<Box
sx={{
mb: 2,
borderRadius: 2,
padding: 2,
backgroundColor: theme.palette.background.default,
boxShadow: '2'
}}
mt={2}
>
<Stack direction={'row'} spacing={1} alignItems={'center'}>
<SettingsIcon />
<Typography fontSize={22}>Tool options</Typography>
</Stack>
<Box mt={2}>
<Formik
innerRef={formRef}
initialValues={initialValues}
validationSchema={validationSchema}
onSubmit={() => {}}
>
{(formikProps) => (
<ToolBody
compute={compute}
input={input}
getGroups={getGroups}
formikProps={formikProps}
>
{children}
</ToolBody>
)}
</Formik>
</Box>
return (
<Box
sx={{
mb: 2,
borderRadius: 2,
padding: 2,
backgroundColor: theme.palette.background.default,
boxShadow: '2',
display: getGroups ? 'block' : 'none'
}}
mt={2}
>
<Stack direction={'row'} spacing={1} alignItems={'center'}>
<SettingsIcon />
<Typography fontSize={22}>Tool options</Typography>
</Stack>
<Box mt={2}>
<Formik
innerRef={formRef}
initialValues={initialValues}
validationSchema={validationSchema}
onSubmit={() => {}}
>
{(formikProps) => (
<ToolBody
compute={compute}
input={input}
getGroups={getGroups}
formikProps={formikProps}
>
{children}
</ToolBody>
)}
</Formik>
</Box>
);
</Box>
);
}