fix(plugin-workflow): fix configuration drawer close logic (#3001)

This commit is contained in:
Junyi 2023-11-09 00:51:42 +08:00 committed by GitHub
parent 81cea6b596
commit 8ee8b0052a
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
2 changed files with 91 additions and 81 deletions

View File

@ -274,7 +274,7 @@ export function JobButton() {
); );
} }
function useNodeFormProps() { function useFormProviderProps() {
return { form: useForm() }; return { form: useForm() };
} }
@ -379,7 +379,7 @@ export function NodeDefaultView(props) {
<SchemaComponent <SchemaComponent
scope={{ scope={{
...instruction.scope, ...instruction.scope,
useNodeFormProps, useFormProviderProps,
}} }}
components={instruction.components} components={instruction.components}
schema={{ schema={{
@ -427,7 +427,7 @@ export function NodeDefaultView(props) {
'x-decorator': 'FormV2', 'x-decorator': 'FormV2',
'x-decorator-props': { 'x-decorator-props': {
// form, // form,
useProps: '{{ useNodeFormProps }}', useProps: '{{ useFormProviderProps }}',
}, },
'x-component': 'Action.Drawer', 'x-component': 'Action.Drawer',
properties: { properties: {

View File

@ -3,6 +3,7 @@ import { createForm } from '@formily/core';
import { ISchema, useForm } from '@formily/react'; import { ISchema, useForm } from '@formily/react';
import { import {
ActionContextProvider, ActionContextProvider,
FormProvider,
SchemaComponent, SchemaComponent,
SchemaInitializerItemOptions, SchemaInitializerItemOptions,
css, css,
@ -143,6 +144,10 @@ function TriggerExecution() {
); );
} }
function useFormProviderProps() {
return { form: useForm() };
}
export const TriggerConfig = () => { export const TriggerConfig = () => {
const api = useAPIClient(); const api = useAPIClient();
const { workflow, refresh } = useFlowContext(); const { workflow, refresh } = useFlowContext();
@ -169,15 +174,14 @@ export const TriggerConfig = () => {
const values = cloneDeep(workflow?.config); const values = cloneDeep(workflow?.config);
return createForm({ return createForm({
initialValues: values, initialValues: values,
values,
disabled: workflow?.executed, disabled: workflow?.executed,
}); });
}, [workflow]); }, [workflow]);
const resetForm = useCallback( const resetForm = useCallback(
(changed) => { (editing) => {
setFormValueChanged(changed); setEditingConfig(editing);
if (!changed) { if (!editing) {
form.reset(); form.reset();
} }
}, },
@ -241,92 +245,98 @@ export const TriggerConfig = () => {
<ActionContextProvider <ActionContextProvider
value={{ value={{
visible: editingConfig, visible: editingConfig,
setVisible: setEditingConfig, setVisible: resetForm,
formValueChanged, formValueChanged,
setFormValueChanged: resetForm, setFormValueChanged,
}} }}
> >
<SchemaComponent <FormProvider form={form}>
schema={{ <SchemaComponent
name: `workflow-trigger-${workflow.id}`, scope={{
type: 'void', ...scope,
properties: { useFormProviderProps,
config: { }}
type: 'void', components={components}
'x-content': detailText, schema={{
'x-component': Button, name: `workflow-trigger-${workflow.id}`,
'x-component-props': { type: 'void',
type: 'link', properties: {
className: 'workflow-node-config-button', config: {
type: 'void',
'x-content': detailText,
'x-component': Button,
'x-component-props': {
type: 'link',
className: 'workflow-node-config-button',
},
}, },
}, drawer: {
drawer: { type: 'void',
type: 'void', title: titleText,
title: titleText, 'x-component': 'Action.Drawer',
'x-component': 'Action.Drawer', 'x-decorator': 'FormV2',
'x-decorator': 'FormV2', 'x-decorator-props': {
'x-decorator-props': { // form,
form, useProps: '{{ useFormProviderProps }}',
}, },
properties: { properties: {
...(trigger.description ...(trigger.description
? { ? {
description: { description: {
type: 'void', type: 'void',
'x-component': DrawerDescription, 'x-component': DrawerDescription,
'x-component-props': { 'x-component-props': {
label: lang('Trigger type'), label: lang('Trigger type'),
title: trigger.title, title: trigger.title,
description: trigger.description, description: trigger.description,
},
}, },
},
}
: {}),
fieldset: {
type: 'void',
'x-component': 'fieldset',
'x-component-props': {
className: css`
.ant-select.auto-width {
width: auto;
min-width: 6em;
} }
`, : {}),
fieldset: {
type: 'void',
'x-component': 'fieldset',
'x-component-props': {
className: css`
.ant-select.auto-width {
width: auto;
min-width: 6em;
}
`,
},
properties: fieldset,
}, },
properties: fieldset, actions: {
}, ...(executed
actions: { ? {}
...(executed : {
? {} type: 'void',
: { 'x-component': 'Action.Drawer.Footer',
type: 'void', properties: {
'x-component': 'Action.Drawer.Footer', cancel: {
properties: { title: '{{t("Cancel")}}',
cancel: { 'x-component': 'Action',
title: '{{t("Cancel")}}', 'x-component-props': {
'x-component': 'Action', useAction: '{{ cm.useCancelAction }}',
'x-component-props': { },
useAction: '{{ cm.useCancelAction }}', },
submit: {
title: '{{t("Submit")}}',
'x-component': 'Action',
'x-component-props': {
type: 'primary',
useAction: useUpdateConfigAction,
},
}, },
}, },
submit: { }),
title: '{{t("Submit")}}', },
'x-component': 'Action',
'x-component-props': {
type: 'primary',
useAction: useUpdateConfigAction,
},
},
},
}),
}, },
}, },
}, },
}, }}
}} />
scope={scope} </FormProvider>
components={components}
/>
</ActionContextProvider> </ActionContextProvider>
</div> </div>
); );