@thienvu18/designable-formily-setters 2.0.0 → 2.0.2

package/lib/components/ReactionsSetter/index.js

@@ -1,87 +1,100 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.ReactionsSetter = void 0;
-const jsx_runtime_1 = require("react/jsx-runtime");
-const react_1 = require("react");
-const shared_1 = require("@formily/shared");
-const core_1 = require("@formily/core");
-const react_2 = require("@formily/react");
-const designable_core_1 = require("@thienvu18/designable-core");
-const designable_shared_1 = require("@thienvu18/designable-shared");
-const designable_react_1 = require("@thienvu18/designable-react");
-const designable_react_settings_form_1 = require("@thienvu18/designable-react-settings-form");
-const formily_antd_v6_1 = require("@thienvu18/formily-antd-v6");
-const antd_1 = require("antd");
-const PathSelector_1 = require("./PathSelector");
-const FieldPropertySetter_1 = require("./FieldPropertySetter");
-const helpers_1 = require("./helpers");
-const declarations_1 = require("./declarations");
-require("./styles.less");
+'use strict'
+Object.defineProperty(exports, '__esModule', { value: true })
+exports.ReactionsSetter = void 0
+const jsx_runtime_1 = require('react/jsx-runtime')
+const react_1 = require('react')
+const shared_1 = require('@formily/shared')
+const core_1 = require('@formily/core')
+const react_2 = require('@formily/react')
+const designable_core_1 = require('@thienvu18/designable-core')
+const designable_shared_1 = require('@thienvu18/designable-shared')
+const designable_react_1 = require('@thienvu18/designable-react')
+const designable_react_settings_form_1 = require('@thienvu18/designable-react-settings-form')
+const formily_antd_v6_1 = require('@thienvu18/formily-antd-v6')
+const antd_1 = require('antd')
+const PathSelector_1 = require('./PathSelector')
+const FieldPropertySetter_1 = require('./FieldPropertySetter')
+const helpers_1 = require('./helpers')
+const declarations_1 = require('./declarations')
+require('./styles.less')
 const TypeView = ({ value }) => {
-    const text = String(value);
-    if (text.length <= 26)
-        return (0, jsx_runtime_1.jsx)(antd_1.Tag, { children: text });
-    return ((0, jsx_runtime_1.jsx)(antd_1.Tag, { children: (0, jsx_runtime_1.jsxs)(antd_1.Tooltip, { title: (0, jsx_runtime_1.jsx)("div", { style: { fontSize: 12 }, children: (0, jsx_runtime_1.jsx)("code", { children: (0, jsx_runtime_1.jsx)("pre", { style: { whiteSpace: 'pre-wrap', padding: 0, margin: 0 }, children: text }) }) }), children: [text.substring(0, 24), "..."] }) }));
-};
+  const text = String(value)
+  if (text.length <= 26)
+    return (0, jsx_runtime_1.jsx)(antd_1.Tag, { children: text })
+  return (0, jsx_runtime_1.jsx)(antd_1.Tag, {
+    children: (0, jsx_runtime_1.jsxs)(antd_1.Tooltip, {
+      title: (0, jsx_runtime_1.jsx)('div', {
+        style: { fontSize: 12 },
+        children: (0, jsx_runtime_1.jsx)('code', {
+          children: (0, jsx_runtime_1.jsx)('pre', {
+            style: { whiteSpace: 'pre-wrap', padding: 0, margin: 0 },
+            children: text,
+          }),
+        }),
+      }),
+      children: [text.substring(0, 24), '...'],
+    }),
+  })
+}
 const SchemaField = (0, react_2.createSchemaField)({
-    components: {
-        Card: antd_1.Card,
-        FormCollapse: formily_antd_v6_1.FormCollapse,
-        Input: formily_antd_v6_1.Input,
-        TypeView,
-        Select: formily_antd_v6_1.Select,
-        FormItem: formily_antd_v6_1.FormItem,
-        PathSelector: PathSelector_1.PathSelector,
-        FieldPropertySetter: FieldPropertySetter_1.FieldPropertySetter,
-        ArrayTable: formily_antd_v6_1.ArrayTable,
-        MonacoInput: designable_react_settings_form_1.MonacoInput,
-    },
-});
+  components: {
+    Card: antd_1.Card,
+    FormCollapse: formily_antd_v6_1.FormCollapse,
+    Input: formily_antd_v6_1.Input,
+    TypeView,
+    Select: formily_antd_v6_1.Select,
+    FormItem: formily_antd_v6_1.FormItem,
+    PathSelector: PathSelector_1.PathSelector,
+    FieldPropertySetter: FieldPropertySetter_1.FieldPropertySetter,
+    ArrayTable: formily_antd_v6_1.ArrayTable,
+    MonacoInput: designable_react_settings_form_1.MonacoInput,
+  },
+})
 const FieldStateProperties = [
-    'value',
-    'initialValue',
-    'inputValue',
-    'inputValues',
-    'modified',
-    'initialized',
-    'title',
-    'description',
-    'mounted',
-    'unmounted',
-    'active',
-    'visited',
-    'loading',
-    'errors',
-    'warnings',
-    'successes',
-    'feedbacks',
-    'valid',
-    'invalid',
-    'pattern',
-    'display',
-    'disabled',
-    'readOnly',
-    'readPretty',
-    'visible',
-    'hidden',
-    'editable',
-    'validateStatus',
-    'validating',
-];
+  'value',
+  'initialValue',
+  'inputValue',
+  'inputValues',
+  'modified',
+  'initialized',
+  'title',
+  'description',
+  'mounted',
+  'unmounted',
+  'active',
+  'visited',
+  'loading',
+  'errors',
+  'warnings',
+  'successes',
+  'feedbacks',
+  'valid',
+  'invalid',
+  'pattern',
+  'display',
+  'disabled',
+  'readOnly',
+  'readPretty',
+  'visible',
+  'hidden',
+  'editable',
+  'validateStatus',
+  'validating',
+]
 const FieldStateValueTypes = {
-    modified: 'boolean',
-    initialized: 'boolean',
-    title: 'string',
-    description: 'string',
-    mounted: 'boolean',
-    unmounted: 'boolean',
-    active: 'boolean',
-    visited: 'boolean',
-    loading: 'boolean',
-    errors: 'string[]',
-    warnings: 'string[]',
-    successes: 'string[]',
-    feedbacks: `Array<
+  modified: 'boolean',
+  initialized: 'boolean',
+  title: 'string',
+  description: 'string',
+  mounted: 'boolean',
+  unmounted: 'boolean',
+  active: 'boolean',
+  visited: 'boolean',
+  loading: 'boolean',
+  errors: 'string[]',
+  warnings: 'string[]',
+  successes: 'string[]',
+  feedbacks: `Array<
   triggerType?: 'onInput' | 'onFocus' | 'onBlur'
   type?: 'error' | 'success' | 'warning'
   code?:
@@ -94,162 +107,349 @@ const FieldStateValueTypes = {
   messages?: string[]
 >
 `,
-    valid: 'boolean',
-    invalid: 'boolean',
-    pattern: "'editable' | 'disabled' | 'readOnly' | 'readPretty'",
-    display: "'visible' | 'hidden' | 'none'",
-    disabled: 'boolean',
-    readOnly: 'boolean',
-    readPretty: 'boolean',
-    visible: 'boolean',
-    hidden: 'boolean',
-    editable: 'boolean',
-    validateStatus: "'error' | 'warning' | 'success' | 'validating'",
-    validating: 'boolean',
-};
+  valid: 'boolean',
+  invalid: 'boolean',
+  pattern: "'editable' | 'disabled' | 'readOnly' | 'readPretty'",
+  display: "'visible' | 'hidden' | 'none'",
+  disabled: 'boolean',
+  readOnly: 'boolean',
+  readPretty: 'boolean',
+  visible: 'boolean',
+  hidden: 'boolean',
+  editable: 'boolean',
+  validateStatus: "'error' | 'warning' | 'success' | 'validating'",
+  validating: 'boolean',
+}
 const ReactionsSetter = (props) => {
-    const [modalVisible, setModalVisible] = (0, react_1.useState)(false);
-    const [innerVisible, setInnerVisible] = (0, react_1.useState)(false);
-    const prefix = (0, designable_react_1.usePrefix)('reactions-setter');
-    const form = (0, react_1.useMemo)(() => {
-        return (0, core_1.createForm)({
-            values: (0, shared_1.clone)(props.value),
-        });
-    }, [modalVisible, props.value]);
-    const formCollapse = (0, react_1.useMemo)(() => formily_antd_v6_1.FormCollapse.createFormCollapse(['deps', 'state']), [modalVisible]);
-    const openModal = () => setModalVisible(true);
-    const closeModal = () => setModalVisible(false);
-    (0, react_1.useEffect)(() => {
-        if (modalVisible) {
-            (0, designable_shared_1.requestIdle)(() => {
-                (0, declarations_1.initDeclaration)().then(() => {
-                    setInnerVisible(true);
-                });
-            }, {
-                timeout: 400,
-            });
+  const [modalVisible, setModalVisible] = (0, react_1.useState)(false)
+  const [innerVisible, setInnerVisible] = (0, react_1.useState)(false)
+  const prefix = (0, designable_react_1.usePrefix)('reactions-setter')
+  const form = (0, react_1.useMemo)(() => {
+    return (0, core_1.createForm)({
+      values: (0, shared_1.clone)(props.value),
+    })
+  }, [modalVisible, props.value])
+  const formCollapse = (0, react_1.useMemo)(
+    () => formily_antd_v6_1.FormCollapse.createFormCollapse(['deps', 'state']),
+    [modalVisible]
+  )
+  const openModal = () => setModalVisible(true)
+  const closeModal = () => setModalVisible(false)
+  ;(0, react_1.useEffect)(() => {
+    if (modalVisible) {
+      ;(0, designable_shared_1.requestIdle)(
+        () => {
+          ;(0, declarations_1.initDeclaration)().then(() => {
+            setInnerVisible(true)
+          })
+        },
+        {
+          timeout: 400,
         }
-        else {
-            setInnerVisible(false);
-        }
-    }, [modalVisible]);
-    return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(antd_1.Button, { block: true, onClick: openModal, children: (0, jsx_runtime_1.jsx)(designable_react_1.TextWidget, { token: "SettingComponents.ReactionsSetter.configureReactions" }) }), (0, jsx_runtime_1.jsx)(antd_1.Modal, { title: designable_core_1.GlobalRegistry.getDesignerMessage('SettingComponents.ReactionsSetter.configureReactions'), width: "70%", centered: true, styles: { body: { padding: 10 } }, transitionName: "", maskTransitionName: "", open: modalVisible, onCancel: closeModal, destroyOnHidden: true, onOk: () => {
-                    form.submit((values) => {
-                        props.onChange?.(values);
-                    });
-                    closeModal();
-                }, children: (0, jsx_runtime_1.jsx)("div", { className: prefix, children: innerVisible && ((0, jsx_runtime_1.jsx)(formily_antd_v6_1.Form, { form: form, children: (0, jsx_runtime_1.jsx)(SchemaField, { children: (0, jsx_runtime_1.jsxs)(SchemaField.Void, { "x-component": "FormCollapse", "x-component-props": {
-                                    formCollapse,
-                                    defaultActiveKey: ['deps', 'state'],
-                                    style: { marginBottom: 10 },
-                                }, children: [(0, jsx_runtime_1.jsx)(SchemaField.Void, { "x-component": "FormCollapse.CollapsePanel", "x-component-props": {
-                                            key: 'deps',
-                                            header: designable_core_1.GlobalRegistry.getDesignerMessage('SettingComponents.ReactionsSetter.relationsFields'),
-                                        }, children: (0, jsx_runtime_1.jsxs)(SchemaField.Array, { name: "dependencies", default: [{}], "x-component": "ArrayTable", children: [(0, jsx_runtime_1.jsxs)(SchemaField.Object, { children: [(0, jsx_runtime_1.jsx)(SchemaField.Void, { "x-component": "ArrayTable.Column", "x-component-props": {
-                                                                title: designable_core_1.GlobalRegistry.getDesignerMessage('SettingComponents.ReactionsSetter.sourceField'),
-                                                                width: 240,
-                                                            }, children: (0, jsx_runtime_1.jsx)(SchemaField.String, { name: "source", "x-decorator": "FormItem", "x-component": "PathSelector", "x-component-props": {
-                                                                    placeholder: designable_core_1.GlobalRegistry.getDesignerMessage('SettingComponents.ReactionsSetter.pleaseSelect'),
-                                                                } }) }), (0, jsx_runtime_1.jsx)(SchemaField.Void, { "x-component": "ArrayTable.Column", "x-component-props": {
-                                                                title: designable_core_1.GlobalRegistry.getDesignerMessage('SettingComponents.ReactionsSetter.sourceProperty'),
-                                                                width: 200,
-                                                            }, children: (0, jsx_runtime_1.jsx)(SchemaField.String, { name: "property", default: "value", "x-decorator": "FormItem", "x-component": "Select", "x-component-props": { showSearch: true }, enum: FieldStateProperties }) }), (0, jsx_runtime_1.jsx)(SchemaField.Void, { "x-component": "ArrayTable.Column", "x-component-props": {
-                                                                title: designable_core_1.GlobalRegistry.getDesignerMessage('SettingComponents.ReactionsSetter.variableName'),
-                                                                width: 200,
-                                                            }, children: (0, jsx_runtime_1.jsx)(SchemaField.String, { name: "name", "x-decorator": "FormItem", "x-validator": {
-                                                                    pattern: /^[$_a-zA-Z]+[$_a-zA-Z0-9]*$/,
-                                                                    message: designable_core_1.GlobalRegistry.getDesignerMessage('SettingComponents.ReactionsSetter.variableNameValidateMessage'),
-                                                                }, "x-component": "Input", "x-component-props": {
-                                                                    addonBefore: '$deps.',
-                                                                    placeholder: designable_core_1.GlobalRegistry.getDesignerMessage('SettingComponents.ReactionsSetter.pleaseInput'),
-                                                                }, "x-reactions": (field) => {
-                                                                    if ((0, core_1.isVoidField)(field))
-                                                                        return;
-                                                                    field.query('.source').take((source) => {
-                                                                        if ((0, core_1.isVoidField)(source))
-                                                                            return;
-                                                                        if (source.value &&
-                                                                            !field.value &&
-                                                                            !field.modified) {
-                                                                            field.value =
-                                                                                source.inputValues[1]?.props?.name ||
-                                                                                    `v_${(0, shared_1.uid)()}`;
-                                                                        }
-                                                                    });
-                                                                } }) }), (0, jsx_runtime_1.jsx)(SchemaField.Void, { "x-component": "ArrayTable.Column", "x-component-props": {
-                                                                title: designable_core_1.GlobalRegistry.getDesignerMessage('SettingComponents.ReactionsSetter.variableType'),
-                                                                ellipsis: {
-                                                                    showTitle: false,
-                                                                },
-                                                                width: 200,
-                                                                align: 'center',
-                                                            }, children: (0, jsx_runtime_1.jsx)(SchemaField.String, { name: "type", default: "any", "x-decorator": "FormItem", "x-component": "TypeView", "x-reactions": (field) => {
-                                                                    if ((0, core_1.isVoidField)(field))
-                                                                        return;
-                                                                    const property = field
-                                                                        .query('.property')
-                                                                        .get('inputValues');
-                                                                    if (!property)
-                                                                        return;
-                                                                    property[0] = property[0] || 'value';
-                                                                    field.query('.source').take((source) => {
-                                                                        if ((0, core_1.isVoidField)(source))
-                                                                            return;
-                                                                        if (source.value) {
-                                                                            if (property[0] === 'value' ||
-                                                                                property[0] === 'initialValue' ||
-                                                                                property[0] === 'inputValue') {
-                                                                                field.value =
-                                                                                    source.inputValues[1]?.props?.type ||
-                                                                                        'any';
-                                                                            }
-                                                                            else if (property[0] === 'inputValues') {
-                                                                                field.value = `any[]`;
-                                                                            }
-                                                                            else if (property[0]) {
-                                                                                field.value =
-                                                                                    FieldStateValueTypes[property[0]];
-                                                                            }
-                                                                            else {
-                                                                                field.value = 'any';
-                                                                            }
-                                                                        }
-                                                                    });
-                                                                } }) }), (0, jsx_runtime_1.jsx)(SchemaField.Void, { "x-component": "ArrayTable.Column", "x-component-props": {
-                                                                title: designable_core_1.GlobalRegistry.getDesignerMessage('SettingComponents.ReactionsSetter.operations'),
-                                                                align: 'center',
-                                                                width: 80,
-                                                            }, children: (0, jsx_runtime_1.jsx)(SchemaField.Markup, { type: "void", "x-component": "ArrayTable.Remove" }) })] }), (0, jsx_runtime_1.jsx)(SchemaField.Void, { title: designable_core_1.GlobalRegistry.getDesignerMessage('SettingComponents.ReactionsSetter.addRelationField'), "x-component": "ArrayTable.Addition", "x-component-props": { style: { marginTop: 8 } } })] }) }), (0, jsx_runtime_1.jsx)(SchemaField.Void, { "x-component": "FormCollapse.CollapsePanel", "x-component-props": {
-                                            header: designable_core_1.GlobalRegistry.getDesignerMessage('SettingComponents.ReactionsSetter.propertyReactions'),
-                                            key: 'state',
-                                            className: 'reaction-state',
-                                        }, children: (0, jsx_runtime_1.jsx)(SchemaField.Markup, { name: "fulfill.state", "x-component": "FieldPropertySetter" }) }), (0, jsx_runtime_1.jsx)(SchemaField.Void, { "x-component": "FormCollapse.CollapsePanel", "x-component-props": {
-                                            key: 'run',
-                                            header: designable_core_1.GlobalRegistry.getDesignerMessage('SettingComponents.ReactionsSetter.actionReactions'),
-                                            className: 'reaction-runner',
-                                        }, children: (0, jsx_runtime_1.jsx)(SchemaField.String, { name: "fulfill.run", "x-component": "MonacoInput", "x-component-props": {
-                                                width: '100%',
-                                                height: 400,
-                                                language: 'typescript',
-                                                helpCode: helpers_1.FulfillRunHelper,
-                                                options: {
-                                                    minimap: {
-                                                        enabled: false,
-                                                    },
-                                                },
-                                            }, "x-reactions": (field) => {
-                                                const deps = field.query('dependencies').value();
-                                                if (Array.isArray(deps)) {
-                                                    field.componentProps.extraLib = `
+      )
+    } else {
+      setInnerVisible(false)
+    }
+  }, [modalVisible])
+  return (0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, {
+    children: [
+      (0, jsx_runtime_1.jsx)(antd_1.Button, {
+        block: true,
+        onClick: openModal,
+        children: (0, jsx_runtime_1.jsx)(designable_react_1.TextWidget, {
+          token: 'SettingComponents.ReactionsSetter.configureReactions',
+        }),
+      }),
+      (0, jsx_runtime_1.jsx)(antd_1.Modal, {
+        title: designable_core_1.GlobalRegistry.getDesignerMessage(
+          'SettingComponents.ReactionsSetter.configureReactions'
+        ),
+        width: '70%',
+        centered: true,
+        styles: { body: { padding: 10 } },
+        transitionName: '',
+        maskTransitionName: '',
+        open: modalVisible,
+        onCancel: closeModal,
+        destroyOnHidden: true,
+        onOk: () => {
+          form.submit((values) => {
+            props.onChange?.(values)
+          })
+          closeModal()
+        },
+        children: (0, jsx_runtime_1.jsx)('div', {
+          className: prefix,
+          children:
+            innerVisible &&
+            (0, jsx_runtime_1.jsx)(formily_antd_v6_1.Form, {
+              form: form,
+              children: (0, jsx_runtime_1.jsx)(SchemaField, {
+                children: (0, jsx_runtime_1.jsxs)(SchemaField.Void, {
+                  'x-component': 'FormCollapse',
+                  'x-component-props': {
+                    formCollapse,
+                    defaultActiveKey: ['deps', 'state'],
+                    style: { marginBottom: 10 },
+                  },
+                  children: [
+                    (0, jsx_runtime_1.jsx)(SchemaField.Void, {
+                      'x-component': 'FormCollapse.CollapsePanel',
+                      'x-component-props': {
+                        key: 'deps',
+                        header:
+                          designable_core_1.GlobalRegistry.getDesignerMessage(
+                            'SettingComponents.ReactionsSetter.relationsFields'
+                          ),
+                      },
+                      children: (0, jsx_runtime_1.jsxs)(SchemaField.Array, {
+                        name: 'dependencies',
+                        default: [{}],
+                        'x-component': 'ArrayTable',
+                        children: [
+                          (0, jsx_runtime_1.jsxs)(SchemaField.Object, {
+                            children: [
+                              (0, jsx_runtime_1.jsx)(SchemaField.Void, {
+                                'x-component': 'ArrayTable.Column',
+                                'x-component-props': {
+                                  title:
+                                    designable_core_1.GlobalRegistry.getDesignerMessage(
+                                      'SettingComponents.ReactionsSetter.sourceField'
+                                    ),
+                                  width: 240,
+                                },
+                                children: (0, jsx_runtime_1.jsx)(
+                                  SchemaField.String,
+                                  {
+                                    name: 'source',
+                                    'x-decorator': 'FormItem',
+                                    'x-component': 'PathSelector',
+                                    'x-component-props': {
+                                      placeholder:
+                                        designable_core_1.GlobalRegistry.getDesignerMessage(
+                                          'SettingComponents.ReactionsSetter.pleaseSelect'
+                                        ),
+                                    },
+                                  }
+                                ),
+                              }),
+                              (0, jsx_runtime_1.jsx)(SchemaField.Void, {
+                                'x-component': 'ArrayTable.Column',
+                                'x-component-props': {
+                                  title:
+                                    designable_core_1.GlobalRegistry.getDesignerMessage(
+                                      'SettingComponents.ReactionsSetter.sourceProperty'
+                                    ),
+                                  width: 200,
+                                },
+                                children: (0, jsx_runtime_1.jsx)(
+                                  SchemaField.String,
+                                  {
+                                    name: 'property',
+                                    default: 'value',
+                                    'x-decorator': 'FormItem',
+                                    'x-component': 'Select',
+                                    'x-component-props': { showSearch: true },
+                                    enum: FieldStateProperties,
+                                  }
+                                ),
+                              }),
+                              (0, jsx_runtime_1.jsx)(SchemaField.Void, {
+                                'x-component': 'ArrayTable.Column',
+                                'x-component-props': {
+                                  title:
+                                    designable_core_1.GlobalRegistry.getDesignerMessage(
+                                      'SettingComponents.ReactionsSetter.variableName'
+                                    ),
+                                  width: 200,
+                                },
+                                children: (0, jsx_runtime_1.jsx)(
+                                  SchemaField.String,
+                                  {
+                                    name: 'name',
+                                    'x-decorator': 'FormItem',
+                                    'x-validator': {
+                                      pattern: /^[$_a-zA-Z]+[$_a-zA-Z0-9]*$/,
+                                      message:
+                                        designable_core_1.GlobalRegistry.getDesignerMessage(
+                                          'SettingComponents.ReactionsSetter.variableNameValidateMessage'
+                                        ),
+                                    },
+                                    'x-component': 'Input',
+                                    'x-component-props': {
+                                      addonBefore: '$deps.',
+                                      placeholder:
+                                        designable_core_1.GlobalRegistry.getDesignerMessage(
+                                          'SettingComponents.ReactionsSetter.pleaseInput'
+                                        ),
+                                    },
+                                    'x-reactions': (field) => {
+                                      if ((0, core_1.isVoidField)(field)) return
+                                      field.query('.source').take((source) => {
+                                        if ((0, core_1.isVoidField)(source))
+                                          return
+                                        if (
+                                          source.value &&
+                                          !field.value &&
+                                          !field.modified
+                                        ) {
+                                          field.value =
+                                            source.inputValues[1]?.props
+                                              ?.name ||
+                                            `v_${(0, shared_1.uid)()}`
+                                        }
+                                      })
+                                    },
+                                  }
+                                ),
+                              }),
+                              (0, jsx_runtime_1.jsx)(SchemaField.Void, {
+                                'x-component': 'ArrayTable.Column',
+                                'x-component-props': {
+                                  title:
+                                    designable_core_1.GlobalRegistry.getDesignerMessage(
+                                      'SettingComponents.ReactionsSetter.variableType'
+                                    ),
+                                  ellipsis: {
+                                    showTitle: false,
+                                  },
+                                  width: 200,
+                                  align: 'center',
+                                },
+                                children: (0, jsx_runtime_1.jsx)(
+                                  SchemaField.String,
+                                  {
+                                    name: 'type',
+                                    default: 'any',
+                                    'x-decorator': 'FormItem',
+                                    'x-component': 'TypeView',
+                                    'x-reactions': (field) => {
+                                      if ((0, core_1.isVoidField)(field)) return
+                                      const property = field
+                                        .query('.property')
+                                        .get('inputValues')
+                                      if (!property) return
+                                      property[0] = property[0] || 'value'
+                                      field.query('.source').take((source) => {
+                                        if ((0, core_1.isVoidField)(source))
+                                          return
+                                        if (source.value) {
+                                          if (
+                                            property[0] === 'value' ||
+                                            property[0] === 'initialValue' ||
+                                            property[0] === 'inputValue'
+                                          ) {
+                                            field.value =
+                                              source.inputValues[1]?.props
+                                                ?.type || 'any'
+                                          } else if (
+                                            property[0] === 'inputValues'
+                                          ) {
+                                            field.value = `any[]`
+                                          } else if (property[0]) {
+                                            field.value =
+                                              FieldStateValueTypes[property[0]]
+                                          } else {
+                                            field.value = 'any'
+                                          }
+                                        }
+                                      })
+                                    },
+                                  }
+                                ),
+                              }),
+                              (0, jsx_runtime_1.jsx)(SchemaField.Void, {
+                                'x-component': 'ArrayTable.Column',
+                                'x-component-props': {
+                                  title:
+                                    designable_core_1.GlobalRegistry.getDesignerMessage(
+                                      'SettingComponents.ReactionsSetter.operations'
+                                    ),
+                                  align: 'center',
+                                  width: 80,
+                                },
+                                children: (0, jsx_runtime_1.jsx)(
+                                  SchemaField.Markup,
+                                  {
+                                    type: 'void',
+                                    'x-component': 'ArrayTable.Remove',
+                                  }
+                                ),
+                              }),
+                            ],
+                          }),
+                          (0, jsx_runtime_1.jsx)(SchemaField.Void, {
+                            title:
+                              designable_core_1.GlobalRegistry.getDesignerMessage(
+                                'SettingComponents.ReactionsSetter.addRelationField'
+                              ),
+                            'x-component': 'ArrayTable.Addition',
+                            'x-component-props': { style: { marginTop: 8 } },
+                          }),
+                        ],
+                      }),
+                    }),
+                    (0, jsx_runtime_1.jsx)(SchemaField.Void, {
+                      'x-component': 'FormCollapse.CollapsePanel',
+                      'x-component-props': {
+                        header:
+                          designable_core_1.GlobalRegistry.getDesignerMessage(
+                            'SettingComponents.ReactionsSetter.propertyReactions'
+                          ),
+                        key: 'state',
+                        className: 'reaction-state',
+                      },
+                      children: (0, jsx_runtime_1.jsx)(SchemaField.Markup, {
+                        name: 'fulfill.state',
+                        'x-component': 'FieldPropertySetter',
+                      }),
+                    }),
+                    (0, jsx_runtime_1.jsx)(SchemaField.Void, {
+                      'x-component': 'FormCollapse.CollapsePanel',
+                      'x-component-props': {
+                        key: 'run',
+                        header:
+                          designable_core_1.GlobalRegistry.getDesignerMessage(
+                            'SettingComponents.ReactionsSetter.actionReactions'
+                          ),
+                        className: 'reaction-runner',
+                      },
+                      children: (0, jsx_runtime_1.jsx)(SchemaField.String, {
+                        name: 'fulfill.run',
+                        'x-component': 'MonacoInput',
+                        'x-component-props': {
+                          width: '100%',
+                          height: 400,
+                          language: 'typescript',
+                          helpCode: helpers_1.FulfillRunHelper,
+                          options: {
+                            minimap: {
+                              enabled: false,
+                            },
+                          },
+                        },
+                        'x-reactions': (field) => {
+                          const deps = field.query('dependencies').value()
+                          if (Array.isArray(deps)) {
+                            field.componentProps.extraLib = `
                           declare var $deps : {
                             ${deps.map(({ name, type }) => {
-                                                        if (!name)
-                                                            return '';
-                                                        return `${name}?:${type || 'any'},`;
-                                                    })}
+                              if (!name) return ''
+                              return `${name}?:${type || 'any'},`
+                            })}
+                          }
+                          `
                           }
-                          `;
-                                                }
-                                            } }) })] }) }) })) }) })] }));
-};
-exports.ReactionsSetter = ReactionsSetter;
+                        },
+                      }),
+                    }),
+                  ],
+                }),
+              }),
+            }),
+        }),
+      }),
+    ],
+  })
+}
+exports.ReactionsSetter = ReactionsSetter