feat: update VariableFilters to use CardItem and enhance form handling

This commit is contained in:
Sheldon Guo 2025-03-11 09:38:42 +08:00
parent 3f6cae33ec
commit b271f0cbc3

View File

@ -122,84 +122,92 @@ export function Filter({ config, filter, filterId, previousFilters }) {
}, },
}; };
}; };
const argsMap = config.uiSchema
? Object.fromEntries(config.uiSchema.map((param, index) => [param.name, filter.args[index]]))
: {};
const useFormBlockProps = () => { const useFormBlockProps = () => {
return { form, layout: 'vertical' }; return { form: createForm({ initialValues: argsMap }), layout: 'vertical' };
}; };
const WithPropOver = ({ children }) => { const schema = {
const { value } = useVariable(); 'x-uid': uid(),
const schema = { type: 'void',
'x-uid': uid(), 'x-component': 'CardItem',
type: 'void', properties: {
'x-component': 'FormV2', form: {
'x-use-component-props': 'useFormBlockProps', 'x-uid': uid(),
properties: { type: 'void',
'$input-value': { 'x-component': 'FormV2',
type: 'void', 'x-use-component-props': 'useFormBlockProps',
'x-component': 'Input', properties: {
'x-component-props': { '$input-value': {
defaultValue: '{{ inputValue }}', type: 'void',
disabled: true, 'x-component': 'Input',
}, 'x-component-props': {
'x-decorator': 'FormItem', defaultValue: '{{ inputValue }}',
title: tval('Input Value'), disabled: true,
'x-read-pretty': true,
},
...Object.fromEntries(
config.uiSchema.map((param) => [
param.name,
{
...param,
'x-decorator': 'FormItem',
}, },
]), 'x-decorator': 'FormItem',
), title: tval('Input Value'),
'$return-value': { 'x-read-pretty': true,
type: 'void',
'x-component': 'Input',
'x-component-props': {
defaultValue: '{{ outputValue }}',
disabled: true,
}, },
'x-decorator': 'FormItem', ...Object.fromEntries(
title: tval('Return Value'), config.uiSchema.map((param) => [
'x-read-pretty': true, param.name,
}, {
actions: { ...param,
type: 'void', 'x-decorator': 'FormItem',
title: tval('Save'), },
'x-component': 'ActionBar', ]),
properties: { ),
delete: { '$return-value': {
type: 'void', type: 'void',
title: tval('Delete'), 'x-component': 'Input',
'x-component': 'Action', 'x-component-props': {
'x-use-component-props': 'useDeleteActionProps', defaultValue: '{{ outputValue }}',
disabled: true,
}, },
save: { 'x-decorator': 'FormItem',
type: 'void', title: tval('Return Value'),
title: tval('Save'), 'x-read-pretty': true,
'x-component': 'Action', },
'x-use-component-props': 'useSaveActionProps', actions: {
type: 'void',
title: tval('Save'),
'x-component': 'ActionBar',
properties: {
delete: {
type: 'void',
title: tval('Delete'),
'x-component': 'Action',
'x-use-component-props': 'useDeleteActionProps',
},
save: {
type: 'void',
title: tval('Save'),
'x-component': 'Action',
'x-use-component-props': 'useSaveActionProps',
},
}, },
}, },
}, },
}, },
}; },
};
const Content = (
<SchemaComponent
schema={schema}
scope={{ useSaveActionProps, useFormBlockProps, useDeleteActionProps, outputValue, inputValue }}
basePath={['']}
/>
);
const WithPropOver = ({ children }) => {
const { value } = useVariable();
return ( return (
<Popover <Popover open={open} onOpenChange={handleOpenChange} content={Content} trigger={'click'}>
open={open}
onOpenChange={handleOpenChange}
content={
<SchemaComponent
schema={schema}
scope={{ useSaveActionProps, useFormBlockProps, useDeleteActionProps, outputValue, inputValue }}
basePath={['']}
/>
}
trigger={'hover'}
>
{children} {children}
</Popover> </Popover>
); );