fix(plugin-workflow): fix node form values when closed (#2978)

* fix(plugin-workflow): fix node form values when closed

* fix(plugin-workflow): fix manual schema config refresh

packages/core/client/src/schema-component/antd/variable/TextArea.tsx

@@ -2,7 +2,7 @@ import { css, cx } from '@emotion/css';
 import { useForm } from '@formily/react';
 import { Input } from 'antd';
 import { cloneDeep } from 'lodash';
-import React, { useEffect, useMemo, useRef, useState } from 'react';
+import React, { useCallback, useEffect, useMemo, useRef, useState } from 'react';
 import sanitizeHTML from 'sanitize-html';
 
 import { error } from '@nocobase/utils/client';
@@ -228,6 +228,7 @@ export function TextArea(props) {
       }
       const sel = window.getSelection?.();
       if (sel) {
+        try {
           const children = Array.from(current.childNodes) as HTMLElement[];
           if (children.length) {
             if (range[0] === -1) {
@@ -248,6 +249,9 @@ export function TextArea(props) {
           nextRange.collapse(true);
           sel.removeAllRanges();
           sel.addRange(nextRange);
+        } catch (ex) {
+          // console.error(ex);
+        }
       }
     } else {
       const { lastChild } = current;
@@ -262,7 +266,8 @@ export function TextArea(props) {
     }
   }, [html]);
 
-  function onInsert(paths: string[]) {
+  const onInsert = useCallback(
+    function (paths: string[]) {
       const variable: string[] = paths.filter((key) => Boolean(key.trim()));
       const { current } = inputRef;
       if (!current || !variable) {
@@ -279,22 +284,27 @@ export function TextArea(props) {
       setChanged(true);
       setRange(getCurrentRange(current));
       onChange(getValue(current));
-  }
+    },
+    [keyLabelMap, onChange, range],
+  );
 
-  function onInput({ currentTarget }) {
+  const onInput = useCallback(
+    function ({ currentTarget }) {
       if (ime) {
         return;
       }
       setChanged(true);
       setRange(getCurrentRange(currentTarget));
       onChange(getValue(currentTarget));
-  }
+    },
+    [ime, onChange],
+  );
 
-  function onBlur({ currentTarget }) {
+  const onBlur = useCallback(function ({ currentTarget }) {
     setRange(getCurrentRange(currentTarget));
-  }
+  }, []);
 
-  function onKeyDown(ev) {
+  const onKeyDown = useCallback(function (ev) {
     if (ev.key === 'Enter') {
       ev.preventDefault();
     }
@@ -305,9 +315,10 @@ export function TextArea(props) {
     // if (ev.key === 'Alt') {
     //   console.debug(getCurrentRange(ev.currentTarget));
     // }
-  }
+  }, []);
 
-  function onPaste(ev) {
+  const onPaste = useCallback(
+    function (ev) {
       ev.preventDefault();
       const input = ev.clipboardData.getData('text/html') || ev.clipboardData.getData('text');
       const sanitizedHTML = sanitizeHTML(input, {
@@ -335,7 +346,9 @@ export function TextArea(props) {
       pasteHTML(ev.currentTarget, sanitizedHTML);
       setRange(getCurrentRange(ev.currentTarget));
       onChange(getValue(ev.currentTarget));
-  }
+    },
+    [onChange],
+  );
 
   const disabled = props.disabled || form.disabled;
 

packages/plugins/@nocobase/plugin-workflow/src/client/nodes/index.tsx

@@ -1,4 +1,4 @@
-import React, { useCallback, useContext, useMemo, useState } from 'react';
+import React, { useCallback, useContext, useEffect, useMemo, useState } from 'react';
 import { DeleteOutlined } from '@ant-design/icons';
 import { cloneDeep } from 'lodash';
 import { createForm } from '@formily/core';
@@ -8,6 +8,7 @@ import { useTranslation } from 'react-i18next';
 
 import {
   ActionContextProvider,
+  FormProvider,
   SchemaComponent,
   SchemaInitializerItemOptions,
   css,
@@ -273,6 +274,10 @@ export function JobButton() {
   );
 }
 
+function useNodeFormProps() {
+  return { form: useForm() };
+}
+
 export function NodeDefaultView(props) {
   const { data, children } = props;
   const compile = useCompile();
@@ -292,15 +297,14 @@ export function NodeDefaultView(props) {
     const values = cloneDeep(data.config);
     return createForm({
       initialValues: values,
-      values,
       disabled: workflow.executed,
     });
   }, [data, workflow]);
 
   const resetForm = useCallback(
-    (changed) => {
+    (editing) => {
-      setFormValueChanged(changed);
+      setEditingConfig(editing);
-      if (!changed) {
+      if (!editing) {
         form.reset();
       }
     },
@@ -366,13 +370,17 @@ export function NodeDefaultView(props) {
         <ActionContextProvider
           value={{
             visible: editingConfig,
-            setVisible: setEditingConfig,
+            setVisible: resetForm,
             formValueChanged,
-            setFormValueChanged: resetForm,
+            setFormValueChanged,
           }}
         >
+          <FormProvider form={form}>
             <SchemaComponent
-            scope={instruction.scope}
+              scope={{
+                ...instruction.scope,
+                useNodeFormProps,
+              }}
               components={instruction.components}
               schema={{
                 type: 'void',
@@ -418,7 +426,8 @@ export function NodeDefaultView(props) {
                     ),
                     'x-decorator': 'FormV2',
                     'x-decorator-props': {
-                    form,
+                      // form,
+                      useProps: '{{ useNodeFormProps }}',
                     },
                     'x-component': 'Action.Drawer',
                     properties: {
@@ -483,6 +492,7 @@ export function NodeDefaultView(props) {
                 },
               }}
             />
+          </FormProvider>
         </ActionContextProvider>
       </div>
       {children}

packages/plugins/@nocobase/plugin-workflow/src/client/nodes/manual/SchemaConfig.tsx

@@ -1,8 +1,8 @@
+import React, { useCallback, useContext, useEffect, useMemo, useState } from 'react';
 import { FormLayout } from '@formily/antd-v5';
 import { createForm } from '@formily/core';
 import { FormProvider, ISchema, Schema, useFieldSchema, useForm } from '@formily/react';
 import { Alert, Button, Modal, Space } from 'antd';
-import React, { useContext, useEffect, useMemo, useState } from 'react';
 import { useTranslation } from 'react-i18next';
 
 import {
@@ -450,13 +450,9 @@ export function SchemaConfig({ value, onChange }) {
     [],
   );
 
-  return (
+  const refresh = useCallback(
-    <SchemaComponentContext.Provider
+    function refresh() {
-      value={{
+      // ctx.refresh?.();
-        ...ctx,
-        designable: !workflow.executed,
-        refresh() {
-          ctx.refresh?.();
       const { tabs } = lodash.get(schema.toJSON(), 'properties.drawer.properties') as { tabs: ISchema };
       const forms = Array.from(manualFormTypes.getValues()).reduce(
         (result, item: ManualFormType) => Object.assign(result, item.config.parseFormOptions(tabs)),
@@ -466,6 +462,15 @@ export function SchemaConfig({ value, onChange }) {
 
       onChange(tabs.properties);
     },
+    [form, onChange, schema],
+  );
+
+  return (
+    <SchemaComponentContext.Provider
+      value={{
+        ...ctx,
+        designable: !workflow.executed,
+        refresh,
       }}
     >
       <SchemaInitializerProvider
@@ -520,7 +525,9 @@ export function SchemaConfigButton(props) {
       <Button type="primary" onClick={() => setVisible(true)}>
         {workflow.executed ? lang('View user interface') : lang('Configure user interface')}
       </Button>
-      <ActionContextProvider value={{ visible, setVisible }}>{props.children}</ActionContextProvider>
+      <ActionContextProvider value={{ visible, setVisible, formValueChanged: false }}>
+        {props.children}
+      </ActionContextProvider>
     </>
   );
 }