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

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

@@ -5,12 +5,19 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.useCollectionState = void 0;
+var _client = require("@nocobase/utils/client");
+var _lodash = _interopRequireDefault(require("lodash"));
 var _react = _interopRequireWildcard(require("react"));
 var _collectionManager = require("../../../collection-manager");
 var _schemaComponent = require("../../../schema-component");
 var _TreeLabel = require("../TreeLabel");
 function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
 function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: 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; }
@@ -32,6 +39,7 @@ var useCollectionState = function useCollectionState(currentCollectionName) {
     _useState2 = _slicedToArray(_useState, 1),
     collectionList = _useState2[0];
   var compile = (0, _schemaComponent.useCompile)();
+  var dataFields = {};
   function getCollectionList() {
     var collections = getAllCollectionsInheritChain(currentCollectionName);
     return collections.map(function (name) {
@@ -42,115 +50,216 @@ var useCollectionState = function useCollectionState(currentCollectionName) {
       };
     });
   }
-  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.default.createElement(_TreeLabel.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.default.createElement(_TreeLabel.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.default.createElement(_TreeLabel.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.default.createElement(_TreeLabel.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.default.createElement(_TreeLabel.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.default.createElement(_TreeLabel.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 = (0, _react.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 = (0, _react.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 = (0, _react.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 = _lodash.default.uniq([].concat(_toConsumableArray(checkedKeys.checked), [parentKey]));
+          }
+          parentKey = parentKey.split('.').slice(0, -1).join('.');
+        }
+      } catch (err) {
+        (0, _client.error)(err);
+      }
+    }
+    dataFields.value = checkedKeys;
+  }, []);
   return {
     collectionList: collectionList,
-    getEnableFieldTree: getEnableFieldTree
+    getEnableFieldTree: getEnableFieldTree,
+    onLoadData: onLoadData,
+    onCheck: onCheck
   };
 };
-exports.useCollectionState = useCollectionState;
+// 广度优先遍历查找一个 key 相等的节点并返回
+exports.useCollectionState = useCollectionState;
+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/lib/schema-settings/GeneralSchemaDesigner.js

@@ -10,12 +10,14 @@ var _css = require("@emotion/css");
 var _react = require("@formily/react");
 var _antd = require("antd");
 var _classnames = _interopRequireDefault(require("classnames"));
-var _react2 = _interopRequireDefault(require("react"));
+var _react2 = _interopRequireWildcard(require("react"));
 var _reactI18next = require("react-i18next");
 var _schemaComponent = require("../schema-component");
 var _utils = require("../schema-initializer/utils");
 var _SchemaSettings = require("./SchemaSettings");
 var _templateObject;
+function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
+function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 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; }
@@ -25,7 +27,7 @@ function _toPrimitive(input, hint) { if (_typeof(input) !== "object" || input ==
 function _taggedTemplateLiteral(strings, raw) { if (!raw) { raw = strings.slice(0); } return Object.freeze(Object.defineProperties(strings, { raw: { value: Object.freeze(raw) } })); }
 var titleCss = (0, _css.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"])));
 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,
@@ -44,12 +46,25 @@ var GeneralSchemaDesigner = function GeneralSchemaDesigner(props) {
     field: field,
     fieldSchema: fieldSchema
   };
-  if (!designable) {
-    return null;
-  }
   var rowCtx = (0, _schemaComponent.useGridRowContext)();
   var ctx = (0, _schemaComponent.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 = (0, _react2.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 : _utils.gridRowColWrap,
+      component: /*#__PURE__*/_react2.default.createElement(_icons.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__*/_react2.default.createElement("div", {
     className: 'general-schema-designer'
   }, title && /*#__PURE__*/_react2.default.createElement("div", {
@@ -65,16 +80,7 @@ var GeneralSchemaDesigner = function GeneralSchemaDesigner(props) {
   }, /*#__PURE__*/_react2.default.createElement(_antd.Space, {
     size: 2,
     align: 'center'
-  }, draggable && /*#__PURE__*/_react2.default.createElement(_schemaComponent.DragHandler, null, /*#__PURE__*/_react2.default.createElement(_icons.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 : _utils.gridRowColWrap,
-    component: /*#__PURE__*/_react2.default.createElement(_icons.PlusOutlined, {
-      style: {
-        cursor: 'pointer',
-        fontSize: 14
-      }
-    })
-  })), /*#__PURE__*/_react2.default.createElement(_SchemaSettings.SchemaSettings, _objectSpread({
+  }, draggable && /*#__PURE__*/_react2.default.createElement(_schemaComponent.DragHandler, null, /*#__PURE__*/_react2.default.createElement(_icons.DragOutlined, null)), !disableInitializer && ((ctx === null || ctx === void 0 ? void 0 : ctx.InitializerComponent) ? /*#__PURE__*/_react2.default.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__*/_react2.default.createElement(_SchemaSettings.SchemaSettings, _objectSpread({
     title: /*#__PURE__*/_react2.default.createElement(_icons.MenuOutlined, {
       style: {
         cursor: 'pointer',

package/lib/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/lib/schema-settings/SchemaSettings.js

@@ -23,9 +23,9 @@ var _utilts = require("../schema-component/antd/association-filter/utilts");
 var _schemaTemplates = require("../schema-templates");
 var _BlockTemplate = require("../schema-templates/BlockTemplate");
 var _DataTemplates = require("./DataTemplates");
+var _EnableChildCollections = require("./EnableChildCollections");
 var _LinkageRules = require("./LinkageRules");
 var _actionHooks = require("./LinkageRules/action-hooks");
-var _EnableChildCollections = require("./EnableChildCollections");
 var _templateObject;
 var _excluded = ["children", "fieldSchema"],
   _excluded2 = ["title", "dn"],
@@ -92,8 +92,8 @@ var SchemaSettings = function SchemaSettings(props) {
     visible = _useState2[0],
     setVisible = _useState2[1];
   var DropdownMenu = /*#__PURE__*/_react2.default.createElement(_antd2.Dropdown, {
-    visible: visible,
-    onVisibleChange: function onVisibleChange(visible) {
+    open: visible,
+    onOpenChange: function onOpenChange(visible) {
       setVisible(visible);
     },
     overlay: /*#__PURE__*/_react2.default.createElement(_antd2.Menu, null, props.children),
@@ -964,6 +964,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":
@@ -1050,6 +1053,7 @@ SchemaSettings.DefaultSortingRules = function DefaultSortingRules(props) {
                   field: {
                     type: 'string',
                     enum: sortFields,
+                    required: true,
                     'x-decorator': 'FormItem',
                     'x-component': 'Select',
                     'x-component-props': {
@@ -1160,8 +1164,13 @@ SchemaSettings.LinkageRules = function LinkageRules(props) {
     }
   });
 };
-var useDataTemplates = function useDataTemplates() {
+var useDataTemplates = function useDataTemplates(schema) {
   var fieldSchema = (0, _react.useFieldSchema)();
+  if (schema) {
+    return {
+      templateData: _lodash.default.cloneDeep(schema['x-data-templates'])
+    };
+  }
   var formSchema = (0, _2.findFormBlock)(fieldSchema) || fieldSchema;
   return {
     templateData: _lodash.default.cloneDeep(formSchema === null || formSchema === void 0 ? void 0 : formSchema['x-data-templates'])
@@ -1169,6 +1178,7 @@ var useDataTemplates = function useDataTemplates() {
 };
 exports.useDataTemplates = useDataTemplates;
 SchemaSettings.DataTemplates = function DataTemplates(props) {
+  var designerCtx = (0, _react2.useContext)(_2.SchemaComponentContext);
   var collectionName = props.collectionName;
   var fieldSchema = (0, _react.useFieldSchema)();
   var _useDesignable4 = (0, _2.useDesignable)(),
@@ -1178,20 +1188,16 @@ SchemaSettings.DataTemplates = function DataTemplates(props) {
   var formSchema = (0, _2.findFormBlock)(fieldSchema) || fieldSchema;
   var _useDataTemplates = useDataTemplates(),
     templateData = _useDataTemplates.templateData;
-  return /*#__PURE__*/_react2.default.createElement(SchemaSettings.ModalItem, {
-    title: t('Form data templates'),
-    components: {
-      ArrayCollapse: _antd.ArrayCollapse,
-      FormLayout: _antd.FormLayout
-    },
-    width: 770,
-    schema: {
+  var schema = (0, _react2.useMemo)(function () {
+    return {
       type: 'object',
       title: t('Form data templates'),
       properties: {
         fieldReaction: {
           'x-component': _DataTemplates.FormDataTemplates,
           'x-component-props': {
+            designerCtx: designerCtx,
+            formSchema: formSchema,
             useProps: function useProps() {
               return {
                 defaultValues: templateData,
@@ -1201,17 +1207,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 = (0, _react2.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 = (0, _react2.useMemo)(function () {
+    return t('Form data templates');
+  }, []);
+  var components = (0, _react2.useMemo)(function () {
+    return {
+      ArrayCollapse: _antd.ArrayCollapse,
+      FormLayout: _antd.FormLayout
+    };
+  }, []);
+  return /*#__PURE__*/_react2.default.createElement(SchemaSettings.ModalItem, {
+    title: title,
+    components: components,
+    width: 770,
+    schema: schema,
+    onSubmit: onSubmit
   });
 };
 SchemaSettings.EnableChildCollections = function EnableChildCollectionsItem(props) {
@@ -1271,16 +1297,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/lib/schema-settings/VariableInput/hooks/useUserVariable.js

@@ -17,7 +17,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/lib/schema-settings/hooks/useIsShowMultipleSwitch.d.ts

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

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

@@ -0,0 +1,24 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.useIsShowMultipleSwitch = useIsShowMultipleSwitch;
+var _react = require("@formily/react");
+var _collectionManager = require("../../collection-manager");
+/**
+ * 是否显示 `允许多选` 开关
+ */
+function useIsShowMultipleSwitch() {
+  var _uiSchema$xComponent;
+  var field = (0, _react.useField)();
+  var fieldSchema = (0, _react.useFieldSchema)();
+  var _useCollectionManager = (0, _collectionManager.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/lib/settings-form/SettingsForm.js

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