@nocobase/client 0.9.3-alpha.1 → 0.9.4-alpha.2

package/es/schema-settings/DataTemplates/hooks/useCollectionState.js

@@ -1,4 +1,8 @@
 function _typeof(obj) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (obj) { return typeof obj; } : function (obj) { return obj && "function" == typeof Symbol && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }, _typeof(obj); }
+function _toConsumableArray(arr) { return _arrayWithoutHoles(arr) || _iterableToArray(arr) || _unsupportedIterableToArray(arr) || _nonIterableSpread(); }
+function _nonIterableSpread() { throw new TypeError("Invalid attempt to spread non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
+function _iterableToArray(iter) { if (typeof Symbol !== "undefined" && iter[Symbol.iterator] != null || iter["@@iterator"] != null) return Array.from(iter); }
+function _arrayWithoutHoles(arr) { if (Array.isArray(arr)) return _arrayLikeToArray(arr); }
 function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
 function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
 function _defineProperty(obj, key, value) { key = _toPropertyKey(key); if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
@@ -10,7 +14,9 @@ function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o =
 function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) arr2[i] = arr[i]; return arr2; }
 function _iterableToArrayLimit(arr, i) { var _i = null == arr ? null : "undefined" != typeof Symbol && arr[Symbol.iterator] || arr["@@iterator"]; if (null != _i) { var _s, _e, _x, _r, _arr = [], _n = !0, _d = !1; try { if (_x = (_i = _i.call(arr)).next, 0 === i) { if (Object(_i) !== _i) return; _n = !1; } else for (; !(_n = (_s = _x.call(_i)).done) && (_arr.push(_s.value), _arr.length !== i); _n = !0); } catch (err) { _d = !0, _e = err; } finally { try { if (!_n && null != _i.return && (_r = _i.return(), Object(_r) !== _r)) return; } finally { if (_d) throw _e; } } return _arr; } }
 function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
-import React, { useState } from 'react';
+import { error } from '@nocobase/utils/client';
+import _ from 'lodash';
+import React, { useCallback, useState } from 'react';
 import { useCollectionManager } from '../../../collection-manager';
 import { useCompile } from '../../../schema-component';
 import { TreeNode } from '../TreeLabel';
@@ -24,6 +30,7 @@ export var useCollectionState = function useCollectionState(currentCollectionNam
     _useState2 = _slicedToArray(_useState, 1),
     collectionList = _useState2[0];
   var compile = useCompile();
+  var dataFields = {};
   function getCollectionList() {
     var collections = getAllCollectionsInheritChain(currentCollectionName);
     return collections.map(function (name) {
@@ -34,114 +41,215 @@ export var useCollectionState = function useCollectionState(currentCollectionNam
       };
     });
   }
-  var getEnableFieldTree = function getEnableFieldTree(collectionName) {
-    if (!collectionName) {
+  // 过滤掉系统字段
+  var systemKeys = [
+  // 'id',
+  'sort', 'createdById', 'createdBy', 'createdAt', 'updatedById', 'updatedBy', 'updatedAt'];
+  /**
+   * maxDepth: 从 0 开始，0 表示一层，1 表示两层，以此类推
+   */
+  var traverseFields = function traverseFields(collectionName, _ref) {
+    var _ref$exclude = _ref.exclude,
+      exclude = _ref$exclude === void 0 ? [] : _ref$exclude,
+      _ref$depth = _ref.depth,
+      depth = _ref$depth === void 0 ? 0 : _ref$depth,
+      maxDepth = _ref.maxDepth,
+      _ref$prefix = _ref.prefix,
+      prefix = _ref$prefix === void 0 ? '' : _ref$prefix;
+    if (depth > maxDepth) {
       return [];
     }
-    // 过滤掉系统字段
-    var systemKeys = [
-    // 'id',
-    'sort', 'createdById', 'createdBy', 'createdAt', 'updatedById', 'updatedBy', 'updatedAt'];
-    var traverseAssociations = function traverseAssociations(collectionName, _ref) {
-      var prefix = _ref.prefix,
-        maxDepth = _ref.maxDepth,
-        depth = _ref.depth,
-        _ref$exclude = _ref.exclude,
-        exclude = _ref$exclude === void 0 ? [] : _ref$exclude;
-      if (depth > maxDepth) {
-        return [];
+    return getCollectionFields(collectionName).map(function (field) {
+      var _field$uiSchema;
+      if (exclude.includes(field.name)) {
+        return;
       }
-      return getCollectionFields(collectionName).map(function (field) {
-        var _field$uiSchema;
-        if (!field.target || !field.interface) {
-          return;
-        }
-        if (exclude.includes(field.name)) {
-          return;
-        }
-        var option = {
-          type: 'preloading',
-          tag: compile((_field$uiSchema = field.uiSchema) === null || _field$uiSchema === void 0 ? void 0 : _field$uiSchema.title) || field.name
-        };
-        var value = prefix ? "".concat(prefix, ".").concat(field.name) : field.name;
-        return {
-          title: /*#__PURE__*/React.createElement(TreeNode, option),
-          key: value,
-          children: traverseAssociations(getCollectionFields(field.target), {
-            prefix: value,
-            depth: depth + 1,
-            maxDepth: maxDepth,
-            exclude: exclude
-          })
-        };
-      }).filter(Boolean);
-    };
-    var traverseFields = function traverseFields(collectionName, _ref2) {
-      var _ref2$exclude = _ref2.exclude,
-        exclude = _ref2$exclude === void 0 ? [] : _ref2$exclude,
-        _ref2$depth = _ref2.depth,
-        depth = _ref2$depth === void 0 ? 0 : _ref2$depth,
-        maxDepth = _ref2.maxDepth,
-        _ref2$prefix = _ref2.prefix,
-        prefix = _ref2$prefix === void 0 ? '' : _ref2$prefix;
-      if (depth > maxDepth) {
-        return [];
+      if (!field.interface) {
+        return;
       }
-      return getCollectionFields(collectionName).map(function (field) {
-        var _field$uiSchema2;
-        if (exclude.includes(field.name)) {
-          return;
-        }
-        if (!field.interface) {
-          return;
-        }
-        if (['sort', 'password', 'sequence'].includes(field.type)) {
-          return;
-        }
-        var node = {
-          type: 'duplicate',
-          tag: compile((_field$uiSchema2 = field.uiSchema) === null || _field$uiSchema2 === void 0 ? void 0 : _field$uiSchema2.title) || field.name
-        };
-        var option = _objectSpread(_objectSpread({}, node), {}, {
-          title: /*#__PURE__*/React.createElement(TreeNode, node),
-          key: prefix ? "".concat(prefix, ".").concat(field.name) : field.name
+      if (['sort', 'password', 'sequence'].includes(field.type)) {
+        return;
+      }
+      var node = {
+        type: 'duplicate',
+        tag: compile((_field$uiSchema = field.uiSchema) === null || _field$uiSchema === void 0 ? void 0 : _field$uiSchema.title) || field.name
+      };
+      var option = _objectSpread(_objectSpread({}, node), {}, {
+        title: /*#__PURE__*/React.createElement(TreeNode, node),
+        key: prefix ? "".concat(prefix, ".").concat(field.name) : field.name,
+        isLeaf: true,
+        field: field
+      });
+      // 多对多和多对一只展示关系字段
+      if (['belongsTo', 'belongsToMany'].includes(field.type)) {
+        node['type'] = 'reference';
+        option['type'] = 'reference';
+        option['title'] = /*#__PURE__*/React.createElement(TreeNode, _objectSpread(_objectSpread({}, node), {}, {
+          type: 'reference'
+        }));
+        option.isLeaf = false;
+        option['children'] = traverseAssociations(field.target, {
+          depth: depth + 1,
+          maxDepth: maxDepth,
+          prefix: option.key,
+          exclude: systemKeys
         });
-        // 多对多的只展示关系字段
-        if (['belongsTo', 'belongsToMany'].includes(field.type)) {
-          node['type'] = 'reference';
-          option['type'] = 'reference';
-          option['title'] = /*#__PURE__*/React.createElement(TreeNode, _objectSpread(_objectSpread({}, node), {}, {
-            type: 'reference'
-          }));
-          option['children'] = traverseAssociations(field.target, {
-            depth: depth + 1,
-            maxDepth: maxDepth,
-            prefix: option.key,
-            exclude: systemKeys
-          });
-        } else if (['hasOne', 'hasMany'].includes(field.type)) {
-          option['children'] = traverseFields(field.target, {
-            depth: depth + 1,
-            maxDepth: maxDepth,
-            prefix: option.key,
-            exclude: ['id'].concat(systemKeys)
-          });
-        }
-        return option;
-      }).filter(Boolean);
-    };
+      } else if (['hasOne', 'hasMany'].includes(field.type)) {
+        option.isLeaf = false;
+        option['children'] = traverseFields(field.target, {
+          depth: depth + 1,
+          maxDepth: maxDepth,
+          prefix: option.key,
+          exclude: ['id'].concat(systemKeys)
+        });
+      }
+      return option;
+    }).filter(Boolean);
+  };
+  var traverseAssociations = function traverseAssociations(collectionName, _ref2) {
+    var prefix = _ref2.prefix,
+      maxDepth = _ref2.maxDepth,
+      _ref2$depth = _ref2.depth,
+      depth = _ref2$depth === void 0 ? 0 : _ref2$depth,
+      _ref2$exclude = _ref2.exclude,
+      exclude = _ref2$exclude === void 0 ? [] : _ref2$exclude;
+    if (depth > maxDepth) {
+      return [];
+    }
+    return getCollectionFields(collectionName).map(function (field) {
+      var _field$uiSchema2;
+      if (!field.target || !field.interface) {
+        return;
+      }
+      if (exclude.includes(field.name)) {
+        return;
+      }
+      var option = {
+        type: 'preloading',
+        tag: compile((_field$uiSchema2 = field.uiSchema) === null || _field$uiSchema2 === void 0 ? void 0 : _field$uiSchema2.title) || field.name
+      };
+      var value = prefix ? "".concat(prefix, ".").concat(field.name) : field.name;
+      return {
+        title: /*#__PURE__*/React.createElement(TreeNode, option),
+        key: value,
+        isLeaf: false,
+        field: field,
+        children: traverseAssociations(field.target, {
+          prefix: value,
+          depth: depth + 1,
+          maxDepth: maxDepth,
+          exclude: exclude
+        })
+      };
+    }).filter(Boolean);
+  };
+  /**
+   * fields: 通过在 x-reactions 字段中传递 $self 得到的，相当于 useField 的返回值，目的是修改其中的状态页面会更新
+   */
+  var getEnableFieldTree = useCallback(function (collectionName, fields) {
+    dataFields = fields;
+    if (!collectionName) {
+      return [];
+    }
     try {
       return traverseFields(collectionName, {
         exclude: ['id'].concat(systemKeys),
-        maxDepth: 3
+        maxDepth: 1
       });
     } catch (error) {
       console.error(error);
       return [];
     }
-  };
+  }, []);
+  var onLoadData = useCallback(function (node) {
+    return new Promise(function (resolve) {
+      if (node.children.length) {
+        node.children.forEach(function (child) {
+          loadChildren({
+            node: child,
+            traverseAssociations: traverseAssociations,
+            traverseFields: traverseFields,
+            systemKeys: systemKeys,
+            dataFields: dataFields
+          });
+        });
+        return resolve(void 0);
+      }
+      loadChildren({
+        node: node,
+        traverseAssociations: traverseAssociations,
+        traverseFields: traverseFields,
+        systemKeys: systemKeys,
+        dataFields: dataFields
+      });
+      resolve(void 0);
+    });
+  }, []);
+  var onCheck = useCallback(function (checkedKeys, _ref3) {
+    var node = _ref3.node,
+      checked = _ref3.checked;
+    if (checked) {
+      var parentKey = node.key.split('.').slice(0, -1).join('.');
+      try {
+        // 当子节点被选中时，也选中所有祖先节点，提高用户辨识度
+        while (parentKey) {
+          if (parentKey) {
+            checkedKeys.checked = _.uniq([].concat(_toConsumableArray(checkedKeys.checked), [parentKey]));
+          }
+          parentKey = parentKey.split('.').slice(0, -1).join('.');
+        }
+      } catch (err) {
+        error(err);
+      }
+    }
+    dataFields.value = checkedKeys;
+  }, []);
   return {
     collectionList: collectionList,
-    getEnableFieldTree: getEnableFieldTree
+    getEnableFieldTree: getEnableFieldTree,
+    onLoadData: onLoadData,
+    onCheck: onCheck
   };
-};
+};
+// 广度优先遍历查找一个 key 相等的节点并返回
+function findNode(treeData, item) {
+  var queue = _toConsumableArray(treeData);
+  while (queue.length) {
+    var node = queue.shift();
+    if (node.key === item.key) {
+      return node;
+    }
+    if (node.children) {
+      queue.push.apply(queue, _toConsumableArray(node.children));
+    }
+  }
+}
+function loadChildren(_ref4) {
+  var node = _ref4.node,
+    traverseAssociations = _ref4.traverseAssociations,
+    traverseFields = _ref4.traverseFields,
+    systemKeys = _ref4.systemKeys,
+    dataFields = _ref4.dataFields;
+  var activeNode = findNode(dataFields.componentProps.treeData, node);
+  var children = [];
+  // 多对多和多对一只展示关系字段
+  if (['belongsTo', 'belongsToMany'].includes(node.field.type)) {
+    children = traverseAssociations(node.field.target, {
+      exclude: systemKeys,
+      prefix: node.key,
+      maxDepth: 1
+    });
+  } else if (['hasOne', 'hasMany'].includes(node.field.type)) {
+    children = traverseFields(node.field.target, {
+      exclude: ['id'].concat(_toConsumableArray(systemKeys)),
+      prefix: node.key,
+      maxDepth: 1
+    });
+  }
+  if (children.length) {
+    activeNode.children = children;
+  } else {
+    activeNode.isLeaf = true;
+  }
+  return children;
+}

package/es/schema-settings/GeneralSchemaDesigner.js

@@ -11,14 +11,14 @@ import { css } from '@emotion/css';
 import { useField, useFieldSchema } from '@formily/react';
 import { Space } from 'antd';
 import classNames from 'classnames';
-import React from 'react';
+import React, { useMemo } from 'react';
 import { useTranslation } from 'react-i18next';
 import { DragHandler, useCompile, useDesignable, useGridContext, useGridRowContext } from '../schema-component';
 import { gridRowColWrap } from '../schema-initializer/utils';
 import { SchemaSettings } from './SchemaSettings';
 var titleCss = css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  pointer-events: none;\n  position: absolute;\n  font-size: 12px;\n  /* background: #f18b62;\n  color: #fff; */\n  padding: 0;\n  line-height: 16px;\n  height: 16px;\n  border-bottom-right-radius: 2px;\n  border-radius: 2px;\n  top: 2px;\n  left: 2px;\n  .title-tag {\n    padding: 0 3px;\n    border-radius: 2px;\n    background: #f18b62;\n    color: #fff;\n    display: block;\n  }\n"])));
 export var GeneralSchemaDesigner = function GeneralSchemaDesigner(props) {
-  var _ctx$renderSchemaInit, _rowCtx$cols;
+  var _rowCtx$cols2, _ctx$renderSchemaInit;
   var disableInitializer = props.disableInitializer,
     title = props.title,
     template = props.template,
@@ -37,12 +37,25 @@ export var GeneralSchemaDesigner = function GeneralSchemaDesigner(props) {
     field: field,
     fieldSchema: fieldSchema
   };
-  if (!designable) {
-    return null;
-  }
   var rowCtx = useGridRowContext();
   var ctx = useGridContext();
   var templateName = ['FormItem', 'ReadPrettyFormItem'].includes(template === null || template === void 0 ? void 0 : template.componentName) ? "".concat(template === null || template === void 0 ? void 0 : template.name, " ").concat(t('(Fields only)')) : template === null || template === void 0 ? void 0 : template.name;
+  var initializerProps = useMemo(function () {
+    var _rowCtx$cols;
+    return {
+      insertPosition: 'afterEnd',
+      wrap: (rowCtx === null || rowCtx === void 0 ? void 0 : (_rowCtx$cols = rowCtx.cols) === null || _rowCtx$cols === void 0 ? void 0 : _rowCtx$cols.length) > 1 ? undefined : gridRowColWrap,
+      component: /*#__PURE__*/React.createElement(PlusOutlined, {
+        style: {
+          cursor: 'pointer',
+          fontSize: 14
+        }
+      })
+    };
+  }, [rowCtx === null || rowCtx === void 0 ? void 0 : (_rowCtx$cols2 = rowCtx.cols) === null || _rowCtx$cols2 === void 0 ? void 0 : _rowCtx$cols2.length]);
+  if (!designable) {
+    return null;
+  }
   return /*#__PURE__*/React.createElement("div", {
     className: 'general-schema-designer'
   }, title && /*#__PURE__*/React.createElement("div", {
@@ -58,16 +71,7 @@ export var GeneralSchemaDesigner = function GeneralSchemaDesigner(props) {
   }, /*#__PURE__*/React.createElement(Space, {
     size: 2,
     align: 'center'
-  }, draggable && /*#__PURE__*/React.createElement(DragHandler, null, /*#__PURE__*/React.createElement(DragOutlined, null)), !disableInitializer && (ctx === null || ctx === void 0 ? void 0 : (_ctx$renderSchemaInit = ctx.renderSchemaInitializer) === null || _ctx$renderSchemaInit === void 0 ? void 0 : _ctx$renderSchemaInit.call(ctx, {
-    insertPosition: 'afterEnd',
-    wrap: (rowCtx === null || rowCtx === void 0 ? void 0 : (_rowCtx$cols = rowCtx.cols) === null || _rowCtx$cols === void 0 ? void 0 : _rowCtx$cols.length) > 1 ? undefined : gridRowColWrap,
-    component: /*#__PURE__*/React.createElement(PlusOutlined, {
-      style: {
-        cursor: 'pointer',
-        fontSize: 14
-      }
-    })
-  })), /*#__PURE__*/React.createElement(SchemaSettings, _objectSpread({
+  }, draggable && /*#__PURE__*/React.createElement(DragHandler, null, /*#__PURE__*/React.createElement(DragOutlined, null)), !disableInitializer && ((ctx === null || ctx === void 0 ? void 0 : ctx.InitializerComponent) ? /*#__PURE__*/React.createElement(ctx.InitializerComponent, _objectSpread({}, initializerProps)) : ctx === null || ctx === void 0 ? void 0 : (_ctx$renderSchemaInit = ctx.renderSchemaInitializer) === null || _ctx$renderSchemaInit === void 0 ? void 0 : _ctx$renderSchemaInit.call(ctx, initializerProps)), /*#__PURE__*/React.createElement(SchemaSettings, _objectSpread({
     title: /*#__PURE__*/React.createElement(MenuOutlined, {
       style: {
         cursor: 'pointer',

package/es/schema-settings/SchemaSettings.d.ts

@@ -53,7 +53,7 @@ interface SwitchItemProps extends Omit<MenuItemProps, 'onChange'> {
     checked?: boolean;
     onChange?: (v: boolean) => void;
 }
-export declare const useDataTemplates: () => {
+export declare const useDataTemplates: (schema?: Schema) => {
     templateData: any;
 };
 export declare const isShowDefaultValue: (collectionField: CollectionFieldOptions, getInterface: any) => boolean;

package/es/schema-settings/SchemaSettings.js

@@ -41,16 +41,16 @@ import _, { cloneDeep } from 'lodash';
 import React, { createContext, useCallback, useContext, useMemo, useState } from 'react';
 import { createPortal } from 'react-dom';
 import { useTranslation } from 'react-i18next';
-import { APIClientProvider, ActionContext, CollectionManagerContext, FormProvider, RemoteSchemaComponent, SchemaComponent, SchemaComponentOptions, createDesignable, findFormBlock, useAPIClient, useCollection, useCollectionManager, useCompile, useDesignable, useLinkageCollectionFilterOptions } from '..';
+import { APIClientProvider, ActionContext, CollectionManagerContext, FormProvider, RemoteSchemaComponent, SchemaComponent, SchemaComponentContext, SchemaComponentOptions, createDesignable, findFormBlock, useAPIClient, useCollection, useCollectionManager, useCompile, useDesignable, useLinkageCollectionFilterOptions } from '..';
 import { findFilterTargets, updateFilterTargets } from '../block-provider/hooks';
 import { isSameCollection, useSupportedBlocks } from '../filter-provider/utils';
 import { getTargetKey } from '../schema-component/antd/association-filter/utilts';
 import { useSchemaTemplateManager } from '../schema-templates';
 import { useBlockTemplateContext } from '../schema-templates/BlockTemplate';
 import { FormDataTemplates } from './DataTemplates';
+import { EnableChildCollections } from './EnableChildCollections';
 import { FormLinkageRules } from './LinkageRules';
 import { useLinkageCollectionFieldOptions } from './LinkageRules/action-hooks';
-import { EnableChildCollections } from './EnableChildCollections';
 var SchemaSettingsContext = /*#__PURE__*/createContext(null);
 export var useSchemaSettings = function useSchemaSettings() {
   return useContext(SchemaSettingsContext);
@@ -81,8 +81,8 @@ export var SchemaSettings = function SchemaSettings(props) {
     visible = _useState2[0],
     setVisible = _useState2[1];
   var DropdownMenu = /*#__PURE__*/React.createElement(Dropdown, {
-    visible: visible,
-    onVisibleChange: function onVisibleChange(visible) {
+    open: visible,
+    onOpenChange: function onOpenChange(visible) {
       setVisible(visible);
     },
     overlay: /*#__PURE__*/React.createElement(Menu, null, props.children),
@@ -952,6 +952,9 @@ SchemaSettings.ModalItem = function ModalItem(props) {
                 effects: effects
               }).then(function (values) {
                 onSubmit(values);
+                return values;
+              }).catch(function (err) {
+                console.error(err);
               });
             case 9:
             case "end":
@@ -1038,6 +1041,7 @@ SchemaSettings.DefaultSortingRules = function DefaultSortingRules(props) {
                   field: {
                     type: 'string',
                     enum: sortFields,
+                    required: true,
                     'x-decorator': 'FormItem',
                     'x-component': 'Select',
                     'x-component-props': {
@@ -1148,14 +1152,20 @@ SchemaSettings.LinkageRules = function LinkageRules(props) {
     }
   });
 };
-export var useDataTemplates = function useDataTemplates() {
+export var useDataTemplates = function useDataTemplates(schema) {
   var fieldSchema = useFieldSchema();
+  if (schema) {
+    return {
+      templateData: _.cloneDeep(schema['x-data-templates'])
+    };
+  }
   var formSchema = findFormBlock(fieldSchema) || fieldSchema;
   return {
     templateData: _.cloneDeep(formSchema === null || formSchema === void 0 ? void 0 : formSchema['x-data-templates'])
   };
 };
 SchemaSettings.DataTemplates = function DataTemplates(props) {
+  var designerCtx = useContext(SchemaComponentContext);
   var collectionName = props.collectionName;
   var fieldSchema = useFieldSchema();
   var _useDesignable4 = useDesignable(),
@@ -1165,20 +1175,16 @@ SchemaSettings.DataTemplates = function DataTemplates(props) {
   var formSchema = findFormBlock(fieldSchema) || fieldSchema;
   var _useDataTemplates = useDataTemplates(),
     templateData = _useDataTemplates.templateData;
-  return /*#__PURE__*/React.createElement(SchemaSettings.ModalItem, {
-    title: t('Form data templates'),
-    components: {
-      ArrayCollapse: ArrayCollapse,
-      FormLayout: FormLayout
-    },
-    width: 770,
-    schema: {
+  var schema = useMemo(function () {
+    return {
       type: 'object',
       title: t('Form data templates'),
       properties: {
         fieldReaction: {
           'x-component': FormDataTemplates,
           'x-component-props': {
+            designerCtx: designerCtx,
+            formSchema: formSchema,
             useProps: function useProps() {
               return {
                 defaultValues: templateData,
@@ -1188,17 +1194,37 @@ SchemaSettings.DataTemplates = function DataTemplates(props) {
           }
         }
       }
-    },
-    onSubmit: function onSubmit(v) {
-      var _schema5;
-      var data = v.fieldReaction || {};
-      var schema = (_schema5 = {}, _defineProperty(_schema5, 'x-uid', formSchema['x-uid']), _defineProperty(_schema5, 'x-data-templates', data), _schema5);
-      formSchema['x-data-templates'] = data;
-      dn.emit('patch', {
-        schema: schema
-      });
-      dn.refresh();
-    }
+    };
+  }, [templateData]);
+  var onSubmit = useCallback(function (v) {
+    var _schema5;
+    var data = _objectSpread(_objectSpread({}, formSchema['x-data-templates'] || {}), v.fieldReaction);
+    // 当 Tree 组件开启 checkStrictly 属性时，会导致 checkedKeys 的值是一个对象，而不是数组，所以这里需要转换一下以支持旧版本
+    data.items.forEach(function (item) {
+      item.fields = Array.isArray(item.fields) ? item.fields : item.fields.checked;
+    });
+    var schema = (_schema5 = {}, _defineProperty(_schema5, 'x-uid', formSchema['x-uid']), _defineProperty(_schema5, 'x-data-templates', data), _schema5);
+    formSchema['x-data-templates'] = data;
+    dn.emit('patch', {
+      schema: schema
+    });
+    dn.refresh();
+  }, []);
+  var title = useMemo(function () {
+    return t('Form data templates');
+  }, []);
+  var components = useMemo(function () {
+    return {
+      ArrayCollapse: ArrayCollapse,
+      FormLayout: FormLayout
+    };
+  }, []);
+  return /*#__PURE__*/React.createElement(SchemaSettings.ModalItem, {
+    title: title,
+    components: components,
+    width: 770,
+    schema: schema,
+    onSubmit: onSubmit
   });
 };
 SchemaSettings.EnableChildCollections = function EnableChildCollectionsItem(props) {
@@ -1258,16 +1284,14 @@ SchemaSettings.EnableChildCollections = function EnableChildCollectionsItem(prop
       var schema = _defineProperty({}, 'x-uid', uid);
       fieldSchema['x-enable-children'] = enableChildren;
       fieldSchema['x-allow-add-to-current'] = v.allowAddToCurrent;
-      fieldSchema['x-component-props'] = {
-        openMode: 'drawer',
+      fieldSchema['x-component-props'] = _objectSpread(_objectSpread({}, fieldSchema['x-component-props']), {}, {
         component: 'CreateRecordAction'
-      };
+      });
       schema['x-enable-children'] = enableChildren;
       schema['x-allow-add-to-current'] = v.allowAddToCurrent;
-      schema['x-component-props'] = {
-        openMode: 'drawer',
+      schema['x-component-props'] = _objectSpread(_objectSpread({}, fieldSchema['x-component-props']), {}, {
         component: 'CreateRecordAction'
-      };
+      });
       dn.emit('patch', {
         schema: schema
       });

package/es/schema-settings/VariableInput/hooks/useUserVariable.js

@@ -11,7 +11,7 @@ var getChildren = function getChildren(options, _ref) {
     return [];
   }
   var result = options.map(function (option) {
-    if (option.type !== 'belongsTo' && option.type !== 'hasOne' || !option.target) {
+    if (!option.target) {
       var _option$schema;
       return {
         key: option.name,

package/es/schema-settings/hooks/useIsShowMultipleSwitch.d.ts

@@ -0,0 +1,4 @@
+/**
+ * 是否显示 `允许多选` 开关
+ */
+export declare function useIsShowMultipleSwitch(): () => boolean;

package/es/schema-settings/hooks/useIsShowMultipleSwitch.js

@@ -0,0 +1,18 @@
+import { useField, useFieldSchema } from '@formily/react';
+import { useCollectionManager } from '../../collection-manager';
+/**
+ * 是否显示 `允许多选` 开关
+ */
+export function useIsShowMultipleSwitch() {
+  var _uiSchema$xComponent;
+  var field = useField();
+  var fieldSchema = useFieldSchema();
+  var _useCollectionManager = useCollectionManager(),
+    getCollectionField = _useCollectionManager.getCollectionField;
+  var collectionField = fieldSchema['x-collection-field'] ? getCollectionField(fieldSchema['x-collection-field']) : null;
+  var uiSchema = (collectionField === null || collectionField === void 0 ? void 0 : collectionField.uiSchema) || fieldSchema;
+  var hasMultiple = ((_uiSchema$xComponent = uiSchema['x-component-props']) === null || _uiSchema$xComponent === void 0 ? void 0 : _uiSchema$xComponent.multiple) === true;
+  return function IsShowMultipleSwitch() {
+    return !field.readPretty && fieldSchema['x-component'] !== 'TableField' && hasMultiple;
+  };
+}

package/es/schema-templates/BlockTemplateDetails.js

@@ -10,7 +10,7 @@ function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o =
 function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) arr2[i] = arr[i]; return arr2; }
 function _iterableToArrayLimit(arr, i) { var _i = null == arr ? null : "undefined" != typeof Symbol && arr[Symbol.iterator] || arr["@@iterator"]; if (null != _i) { var _s, _e, _x, _r, _arr = [], _n = !0, _d = !1; try { if (_x = (_i = _i.call(arr)).next, 0 === i) { if (Object(_i) !== _i) return; _n = !1; } else for (; !(_n = (_s = _x.call(_i)).done) && (_arr.push(_s.value), _arr.length !== i); _n = !0); } catch (err) { _d = !0, _e = err; } finally { try { if (!_n && null != _i.return && (_r = _i.return(), Object(_r) !== _r)) return; } finally { if (_d) throw _e; } } return _arr; } }
 function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
-import { Input, PageHeader as AntdPageHeader, Spin } from 'antd';
+import { PageHeader as AntdPageHeader, Input, Spin } from 'antd';
 import React, { useContext, useState } from 'react';
 import { useHistory, useRouteMatch } from 'react-router-dom';
 import { useAPIClient, useRequest, useSchemaTemplateManager } from '..';

package/es/settings-form/SettingsForm.js

@@ -67,8 +67,8 @@ export var SettingsForm = observer(function (props) {
   }, /*#__PURE__*/React.createElement(FieldContext.Provider, {
     value: f
   }, /*#__PURE__*/React.createElement(Dropdown, {
-    visible: dropdownVisible,
-    onVisibleChange: function onVisibleChange(visible) {
+    open: dropdownVisible,
+    onOpenChange: function onOpenChange(visible) {
       return setDropdownVisible(visible);
     },
     overlayStyle: {