@nocobase/client 0.9.4-alpha.2 → 0.10.0-alpha.3

package/lib/schema-component/antd/association-field/FileManager.js

@@ -158,6 +158,7 @@ var InternalFileManager = function InternalFileManager(props) {
     association: {
       target: collectionField === null || collectionField === void 0 ? void 0 : collectionField.target
     },
+    options: options,
     onChange: props === null || props === void 0 ? void 0 : props.onChange,
     selectedRows: selectedRows,
     setSelectedRows: setSelectedRows,
@@ -183,7 +184,12 @@ var InternalFileManager = function InternalFileManager(props) {
       }
     };
   };
-  return /*#__PURE__*/_react2.default.createElement("div", null, /*#__PURE__*/_react2.default.createElement(_preview.FileSelector, {
+  return /*#__PURE__*/_react2.default.createElement("div", {
+    style: {
+      width: '100%',
+      overflow: 'auto'
+    }
+  }, /*#__PURE__*/_react2.default.createElement(_preview.FileSelector, {
     value: options,
     multiple: multiple,
     quickUpload: quickUpload !== false,
@@ -207,11 +213,15 @@ var InternalFileManager = function InternalFileManager(props) {
         }
       }
     }
-  }), /*#__PURE__*/_react2.default.createElement(_action.ActionContext.Provider, {
+  }), /*#__PURE__*/_react2.default.createElement(_action.ActionContextProvider, {
     value: {
       openMode: 'drawer',
       visible: visibleSelector,
-      setVisible: setVisibleSelector
+      setVisible: setVisibleSelector,
+      modalProps: {
+        getContainer: others === null || others === void 0 ? void 0 : others.getContainer
+      },
+      formValueChanged: false
     }
   }, /*#__PURE__*/_react2.default.createElement(_.RecordPickerProvider, _objectSpread({}, pickerProps), /*#__PURE__*/_react2.default.createElement(_collectionManager.CollectionProvider, {
     name: collectionField.target

package/lib/schema-component/antd/association-field/InternalNester.d.ts

@@ -1 +1,2 @@
-export declare const InternalNester: () => JSX.Element;
+import React from 'react';
+export declare const InternalNester: () => React.JSX.Element;

package/lib/schema-component/antd/association-field/InternalNester.js

@@ -8,18 +8,26 @@ exports.InternalNester = void 0;
 var _antd = require("@formily/antd");
 var _react = require("@formily/react");
 var _react2 = _interopRequireWildcard(require("react"));
+var _css = require("@emotion/css");
 var _collectionManager = require("../../../collection-manager");
 var _hooks = require("./hooks");
 var _schema = _interopRequireDefault(require("./schema"));
+var _templateObject, _templateObject2;
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 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 _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; }
+function _toPropertyKey(arg) { var key = _toPrimitive(arg, "string"); return _typeof(key) === "symbol" ? key : String(key); }
+function _toPrimitive(input, hint) { if (_typeof(input) !== "object" || input === null) return input; var prim = input[Symbol.toPrimitive]; if (prim !== undefined) { var res = prim.call(input, hint || "default"); if (_typeof(res) !== "object") return res; throw new TypeError("@@toPrimitive must return a primitive value."); } return (hint === "string" ? String : Number)(input); }
+function _taggedTemplateLiteral(strings, raw) { if (!raw) { raw = strings.slice(0); } return Object.freeze(Object.defineProperties(strings, { raw: { value: Object.freeze(raw) } })); }
 var InternalNester = function InternalNester() {
+  var _fieldSchema$xDecora, _fieldSchema$xDecora2;
   var field = (0, _react.useField)();
   var fieldSchema = (0, _react.useFieldSchema)();
   var insertNester = (0, _hooks.useInsertSchema)('Nester');
   var _useAssociationFieldC = (0, _hooks.useAssociationFieldContext)(),
     collectionField = _useAssociationFieldC.options;
+  var showTitle = (_fieldSchema$xDecora = (_fieldSchema$xDecora2 = fieldSchema['x-decorator-props']) === null || _fieldSchema$xDecora2 === void 0 ? void 0 : _fieldSchema$xDecora2.showTitle) !== null && _fieldSchema$xDecora !== void 0 ? _fieldSchema$xDecora : true;
   (0, _react2.useEffect)(function () {
     insertNester(_schema.default.Nester);
   }, []);
@@ -27,6 +35,8 @@ var InternalNester = function InternalNester() {
     name: collectionField.target
   }, /*#__PURE__*/_react2.default.createElement(_antd.FormLayout, {
     layout: 'vertical'
+  }, /*#__PURE__*/_react2.default.createElement("div", {
+    className: (0, _css.cx)((0, _css.css)(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n              & .ant-formily-item-layout-vertical {\n                margin-bottom: 10px;\n              }\n              .ant-card-body {\n                padding: 15px 20px 5px;\n              }\n              .ant-divider-horizontal {\n                margin: 10px 0;\n              }\n            "]))), _defineProperty({}, (0, _css.css)(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n                .ant-card-body {\n                  padding: 0px 20px 20px 0px;\n                }\n                > .ant-card-bordered {\n                  border: none;\n                }\n              "]))), showTitle === false))
   }, /*#__PURE__*/_react2.default.createElement(_react.RecursionField, {
     onlyRenderProperties: true,
     basePath: field.address,
@@ -34,6 +44,6 @@ var InternalNester = function InternalNester() {
     filterProperties: function filterProperties(s) {
       return s['x-component'] === 'AssociationField.Nester';
     }
-  })));
+  }))));
 };
 exports.InternalNester = InternalNester;

package/lib/schema-component/antd/association-field/InternalPicker.d.ts

@@ -1,2 +1,2 @@
 import React from 'react';
-export declare const InternalPicker: React.MemoExoticComponent<React.FunctionComponent<Pick<any, string | number | symbol>>>;
+export declare const InternalPicker: React.MemoExoticComponent<import("@formily/react").ReactFC<Pick<any, string | number | symbol>>>;

package/lib/schema-component/antd/association-field/InternalPicker.js

@@ -10,6 +10,7 @@ var _antd = require("antd");
 var _lodash = require("lodash");
 var _react2 = _interopRequireWildcard(require("react"));
 var _ = require("../..");
+var _2 = require("../../../");
 var _TableSelectorProvider = require("../../../block-provider/TableSelectorProvider");
 var _collectionManager = require("../../../collection-manager");
 var _hooks = require("../../hooks");
@@ -171,7 +172,8 @@ var InternalPicker = (0, _react.observer)(function (props) {
   return /*#__PURE__*/_react2.default.createElement(_react2.default.Fragment, null, /*#__PURE__*/_react2.default.createElement(_antd.Input.Group, {
     compact: true,
     style: {
-      display: 'flex'
+      display: 'flex',
+      lineHeight: '32px'
     }
   }, /*#__PURE__*/_react2.default.createElement("div", {
     style: {
@@ -210,14 +212,16 @@ var InternalPicker = (0, _react.observer)(function (props) {
     options: options,
     value: getValue(),
     open: false
-  }))), isAllowAddNew && /*#__PURE__*/_react2.default.createElement(_react.RecursionField, {
+  }))), isAllowAddNew && /*#__PURE__*/_react2.default.createElement(_2.RecordProvider, {
+    record: null
+  }, /*#__PURE__*/_react2.default.createElement(_react.RecursionField, {
     onlyRenderProperties: true,
     basePath: field.address,
     schema: fieldSchema,
     filterProperties: function filterProperties(s) {
       return s['x-component'] === 'Action';
     }
-  })), /*#__PURE__*/_react2.default.createElement(_action.ActionContext.Provider, {
+  }))), /*#__PURE__*/_react2.default.createElement(_action.ActionContextProvider, {
     value: {
       openMode: 'drawer',
       visible: visibleSelector,
@@ -242,5 +246,7 @@ var InternalPicker = (0, _react.observer)(function (props) {
       return s['x-component'] === 'AssociationField.Selector';
     }
   }))))))));
+}, {
+  displayName: 'InternalPicker'
 });
 exports.InternalPicker = InternalPicker;

package/lib/schema-component/antd/association-field/InternalSubTable.d.ts

@@ -1 +1,2 @@
-export declare const InternalSubTable: () => JSX.Element;
+import React from 'react';
+export declare const InternalSubTable: React.MemoExoticComponent<import("@formily/react").ReactFC<unknown>>;

package/lib/schema-component/antd/association-field/InternalSubTable.js

@@ -5,16 +5,26 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.InternalSubTable = void 0;
+var _css = require("@emotion/css");
 var _antd = require("@formily/antd");
 var _react = require("@formily/react");
 var _react2 = _interopRequireWildcard(require("react"));
 var _collectionManager = require("../../../collection-manager");
+var _schemaComponent = require("../../../schema-component");
+var _Select = _interopRequireDefault(require("../select/Select"));
 var _hooks = require("./hooks");
 var _schema = _interopRequireDefault(require("./schema"));
+var _templateObject;
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 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; }
-var InternalSubTable = function InternalSubTable() {
+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; }
+function _toPropertyKey(arg) { var key = _toPrimitive(arg, "string"); return _typeof(key) === "symbol" ? key : String(key); }
+function _toPrimitive(input, hint) { if (_typeof(input) !== "object" || input === null) return input; var prim = input[Symbol.toPrimitive]; if (prim !== undefined) { var res = prim.call(input, hint || "default"); if (_typeof(res) !== "object") return res; throw new TypeError("@@toPrimitive must return a primitive value."); } return (hint === "string" ? String : Number)(input); }
+function _taggedTemplateLiteral(strings, raw) { if (!raw) { raw = strings.slice(0); } return Object.freeze(Object.defineProperties(strings, { raw: { value: Object.freeze(raw) } })); }
+var InternalSubTable = (0, _react.observer)(function () {
   var field = (0, _react.useField)();
   var fieldSchema = (0, _react.useFieldSchema)();
   var insert = (0, _hooks.useInsertSchema)('SubTable');
@@ -22,11 +32,27 @@ var InternalSubTable = function InternalSubTable() {
     options = _useAssociationFieldC.options;
   (0, _react2.useEffect)(function () {
     insert(_schema.default.SubTable);
+    field.required = fieldSchema['required'];
   }, []);
   return /*#__PURE__*/_react2.default.createElement(_collectionManager.CollectionProvider, {
     name: options.target
   }, /*#__PURE__*/_react2.default.createElement(_antd.FormLayout, {
-    layout: 'vertical'
+    className: (0, _css.css)(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n            .ant-formily-item-bordered-none {\n              .ant-input-number-group-addon {\n                border: none !important;\n                background: none;\n              }\n              .ant-checkbox-wrapper {\n                margin-left: 8px;\n              }\n              .ant-btn {\n                border: none !important;\n                box-shadow: none;\n              }\n            }\n          "]))),
+    layout: 'vertical',
+    bordered: false
+  }, /*#__PURE__*/_react2.default.createElement(_schemaComponent.SchemaComponentOptions, {
+    components: {
+      FormItem: function FormItem(props) {
+        return /*#__PURE__*/_react2.default.createElement(_antd.FormItem, _objectSpread({}, props));
+      },
+      'Radio.Group': _Select.default,
+      'Checkbox.Group': function CheckboxGroup(props) {
+        return /*#__PURE__*/_react2.default.createElement(_Select.default, _objectSpread({
+          multiple: true,
+          mode: "multiple"
+        }, props));
+      }
+    }
   }, /*#__PURE__*/_react2.default.createElement(_react.RecursionField, {
     onlyRenderProperties: true,
     basePath: field.address,
@@ -34,6 +60,8 @@ var InternalSubTable = function InternalSubTable() {
     filterProperties: function filterProperties(s) {
       return s['x-component'] === 'AssociationField.SubTable';
     }
-  })));
-};
+  }))));
+}, {
+  displayName: 'InternalSubTable'
+});
 exports.InternalSubTable = InternalSubTable;

package/lib/schema-component/antd/association-field/InternalViewer.js

@@ -13,6 +13,7 @@ var _collectionManager = require("../../../collection-manager");
 var _recordProvider = require("../../../record-provider");
 var _core = require("../../core");
 var _hooks = require("../../hooks");
+var _ = require("../../");
 var _action = require("../action");
 var _EllipsisWithTooltip = require("../input/EllipsisWithTooltip");
 var _hooks2 = require("./hooks");
@@ -53,6 +54,8 @@ var ReadPrettyInternalViewer = (0, _react.observer)(function (props) {
     record = _useState4[0],
     setRecord = _useState4[1];
   var compile = (0, _hooks.useCompile)();
+  var _useDesignable = (0, _.useDesignable)(),
+    designable = _useDesignable.designable;
   var labelUiSchema = (0, _util.useLabelUiSchema)(collectionField, (fieldNames === null || fieldNames === void 0 ? void 0 : fieldNames.label) || 'label');
   var _useActionContext = (0, _action.useActionContext)(),
     snapshot = _useActionContext.snapshot;
@@ -68,7 +71,9 @@ var ReadPrettyInternalViewer = (0, _react.observer)(function (props) {
           var _ellipsisWithTooltipR;
           e.stopPropagation();
           e.preventDefault();
-          insertViewer(_schema.default.Viewer);
+          if (designable) {
+            insertViewer(_schema.default.Viewer);
+          }
           setVisible(true);
           setRecord(record);
           ellipsisWithTooltipRef === null || ellipsisWithTooltipRef === void 0 ? void 0 : (_ellipsisWithTooltipR = ellipsisWithTooltipRef.current) === null || _ellipsisWithTooltipR === void 0 ? void 0 : _ellipsisWithTooltipR.setPopoverVisible(false);
@@ -111,7 +116,7 @@ var ReadPrettyInternalViewer = (0, _react.observer)(function (props) {
   }, /*#__PURE__*/_react2.default.createElement(_EllipsisWithTooltip.EllipsisWithTooltip, {
     ellipsis: true,
     ref: ellipsisWithTooltipRef
-  }, renderRecords()), /*#__PURE__*/_react2.default.createElement(_action.ActionContext.Provider, {
+  }, renderRecords()), /*#__PURE__*/_react2.default.createElement(_action.ActionContextProvider, {
     value: {
       visible: visible,
       setVisible: setVisible,
@@ -119,5 +124,7 @@ var ReadPrettyInternalViewer = (0, _react.observer)(function (props) {
       snapshot: (collectionField === null || collectionField === void 0 ? void 0 : collectionField.interface) === 'snapshot'
     }
   }, renderRecordProvider()))));
+}, {
+  displayName: 'ReadPrettyInternalViewer'
 });
 exports.ReadPrettyInternalViewer = ReadPrettyInternalViewer;

package/lib/schema-component/antd/association-field/Nester.d.ts

@@ -1 +1,2 @@
-export declare const Nester: (props: any) => JSX.Element;
+import React from 'react';
+export declare const Nester: (props: any) => React.JSX.Element;

package/lib/schema-component/antd/association-field/Nester.js

@@ -5,15 +5,20 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.Nester = void 0;
 var _icons = require("@ant-design/icons");
+var _css = require("@emotion/css");
+var _internals = require("@formily/core/esm/shared/internals");
 var _react = require("@formily/react");
+var _reactive = require("@formily/reactive");
 var _antd = require("antd");
 var _react2 = _interopRequireWildcard(require("react"));
 var _reactI18next = require("react-i18next");
 var _context = require("./context");
 var _hooks = require("./hooks");
+var _templateObject, _templateObject2;
 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 _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 _taggedTemplateLiteral(strings, raw) { if (!raw) { raw = strings.slice(0); } return Object.freeze(Object.defineProperties(strings, { raw: { value: Object.freeze(raw) } })); }
 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; }
@@ -45,43 +50,82 @@ var ToManyNester = (0, _react.observer)(function (props) {
     allowDissociate = _useAssociationFieldC.allowDissociate;
   var _useTranslation = (0, _reactI18next.useTranslation)(),
     t = _useTranslation.t;
-  return /*#__PURE__*/_react2.default.createElement(_antd.Card, {
+  return (field.value || []).length > 0 ? /*#__PURE__*/_react2.default.createElement(_antd.Card, {
     bordered: true,
     style: {
       position: 'relative'
-    }
+    },
+    className: (0, _css.css)(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n          > .ant-card-body > .ant-divider:last-child {\n            display: none;\n          }\n        "])))
   }, (field.value || []).map(function (value, index) {
     var allowed = allowDissociate;
     if (!allowDissociate) {
       allowed = !(value === null || value === void 0 ? void 0 : value[options.targetKey]);
     }
-    return /*#__PURE__*/_react2.default.createElement(_react2.default.Fragment, null, !field.readPretty && allowed && /*#__PURE__*/_react2.default.createElement("div", {
+    return /*#__PURE__*/_react2.default.createElement(_react2.default.Fragment, {
+      key: index
+    }, /*#__PURE__*/_react2.default.createElement("div", {
       style: {
         textAlign: 'right'
       }
-    }, /*#__PURE__*/_react2.default.createElement(_icons.CloseCircleOutlined, {
+    }, field.editable && allowMultiple && /*#__PURE__*/_react2.default.createElement(_antd.Tooltip, {
+      key: 'add',
+      title: t('Add new')
+    }, /*#__PURE__*/_react2.default.createElement(_icons.PlusOutlined, {
+      style: {
+        zIndex: 1000,
+        marginRight: '10px',
+        color: '#a8a3a3'
+      },
+      onClick: function onClick() {
+        (0, _reactive.action)(function () {
+          if (!Array.isArray(field.value)) {
+            field.value = [];
+          }
+          (0, _internals.spliceArrayState)(field, {
+            startIndex: index + 1,
+            insertCount: 1
+          });
+          field.value.splice(index + 1, 0, {});
+          return field.onInput(field.value);
+        });
+      }
+    })), !field.readPretty && allowed && /*#__PURE__*/_react2.default.createElement(_antd.Tooltip, {
+      key: 'remove',
+      title: t('Remove')
+    }, /*#__PURE__*/_react2.default.createElement(_icons.CloseOutlined, {
       style: {
         zIndex: 1000,
-        position: 'absolute',
         color: '#a8a3a3'
       },
       onClick: function onClick() {
-        var result = field.value;
-        result.splice(index, 1);
-        field.value = result;
+        (0, _reactive.action)(function () {
+          (0, _internals.spliceArrayState)(field, {
+            startIndex: index,
+            deleteCount: 1
+          });
+          field.value.splice(index, 1);
+          return field.onInput(field.value);
+        });
       }
-    })), /*#__PURE__*/_react2.default.createElement(_react.RecursionField, {
+    }))), /*#__PURE__*/_react2.default.createElement(_react.RecursionField, {
       onlyRenderProperties: true,
       basePath: field.address.concat(index),
       schema: fieldSchema
     }), /*#__PURE__*/_react2.default.createElement(_antd.Divider, null));
-  }), field.editable && allowMultiple && /*#__PURE__*/_react2.default.createElement(_antd.Button, {
-    type: 'dashed',
+  })) : /*#__PURE__*/_react2.default.createElement(_react2.default.Fragment, null, field.editable && allowMultiple && /*#__PURE__*/_react2.default.createElement(_antd.Tooltip, {
+    key: 'add',
+    title: t('Add new')
+  }, /*#__PURE__*/_react2.default.createElement(_antd.Button, {
+    type: 'default',
+    className: (0, _css.css)(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n                border: 1px solid #f0f0f0 !important;\n                box-shadow: none;\n              "]))),
     block: true,
+    icon: /*#__PURE__*/_react2.default.createElement(_icons.PlusOutlined, null),
     onClick: function onClick() {
       var result = field.value;
       result.push({});
       field.value = result;
     }
-  }, t('Add new')));
+  })));
+}, {
+  displayName: 'ToManyNester'
 });

package/lib/schema-component/antd/association-field/ReadPretty.d.ts

@@ -1,2 +1,2 @@
 import React from 'react';
-export declare const ReadPretty: React.MemoExoticComponent<React.FunctionComponent<unknown>>;
+export declare const ReadPretty: React.MemoExoticComponent<import("@formily/react").ReactFC<unknown>>;

package/lib/schema-component/antd/association-field/ReadPretty.js

@@ -23,8 +23,12 @@ var ReadPrettyAssociationField = (0, _react2.observer)(function (props) {
   var _useAssociationFieldC = (0, _hooks.useAssociationFieldContext)(),
     currentMode = _useAssociationFieldC.currentMode;
   return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, ['Select', 'Picker'].includes(currentMode) && /*#__PURE__*/_react.default.createElement(_InternalViewer.ReadPrettyInternalViewer, _objectSpread({}, props)), currentMode === 'Nester' && /*#__PURE__*/_react.default.createElement(_InternalNester.InternalNester, _objectSpread({}, props)), currentMode === 'SubTable' && /*#__PURE__*/_react.default.createElement(_InternalSubTable.InternalSubTable, _objectSpread({}, props)), currentMode === 'FileManager' && /*#__PURE__*/_react.default.createElement(_FileManager.FileManageReadPretty, _objectSpread({}, props)));
+}, {
+  displayName: 'ReadPrettyAssociationField'
 });
 var ReadPretty = (0, _react2.observer)(function (props) {
   return /*#__PURE__*/_react.default.createElement(_AssociationFieldProvider.AssociationFieldProvider, null, /*#__PURE__*/_react.default.createElement(ReadPrettyAssociationField, _objectSpread({}, props)));
+}, {
+  displayName: 'ReadPretty'
 });
 exports.ReadPretty = ReadPretty;

package/lib/schema-component/antd/association-field/SubTable.js

@@ -4,30 +4,71 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.SubTable = void 0;
+var _icons = require("@ant-design/icons");
+var _css = require("@emotion/css");
+var _internals = require("@formily/core/esm/shared/internals");
 var _react = require("@formily/react");
+var _reactive = require("@formily/reactive");
+var _shared = require("@formily/shared");
 var _antd = require("antd");
 var _react2 = _interopRequireDefault(require("react"));
+var _reactI18next = require("react-i18next");
 var _Table = require("../table-v2/Table");
 var _hooks = require("./hooks");
+var _templateObject, _templateObject2, _templateObject3;
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+function _taggedTemplateLiteral(strings, raw) { if (!raw) { raw = strings.slice(0); } return Object.freeze(Object.defineProperties(strings, { raw: { value: Object.freeze(raw) } })); }
 var SubTable = (0, _react.observer)(function (props) {
   var _useAssociationFieldC = (0, _hooks.useAssociationFieldContext)(),
     field = _useAssociationFieldC.field;
-  return /*#__PURE__*/_react2.default.createElement("div", null, /*#__PURE__*/_react2.default.createElement(_Table.Table, {
+  var _useTranslation = (0, _reactI18next.useTranslation)(),
+    t = _useTranslation.t;
+  var move = function move(fromIndex, toIndex) {
+    if (toIndex === undefined) return;
+    if (!(0, _shared.isArr)(field.value)) return;
+    if (fromIndex === toIndex) return;
+    return (0, _reactive.action)(function () {
+      var fromItem = field.value[fromIndex];
+      field.value.splice(fromIndex, 1);
+      field.value.splice(toIndex, 0, fromItem);
+      (0, _internals.exchangeArrayState)(field, {
+        fromIndex: fromIndex,
+        toIndex: toIndex
+      });
+      return field.onInput(field.value);
+    });
+  };
+  field.move = move;
+  return /*#__PURE__*/_react2.default.createElement("div", {
+    className: (0, _css.css)(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n          .ant-table-footer {\n            padding: 0 !important;\n          }\n          .ant-formily-item-error-help {\n            display: none;\n          }\n          .ant-description-textarea {\n            line-height: 34px;\n          }\n          .ant-table-cell .ant-formily-item-error-help {\n            display: block;\n            position: absolute;\n            font-size: 12px;\n            top: 100%;\n            background: #fff;\n            width: 100%;\n            margin-top: 3px;\n            padding: 3px;\n            z-index: 1;\n            border-radius: 3px;\n            box-shadow: 0 0 10px #eee;\n            animation: none;\n            transform: translateY(0);\n            opacity: 1;\n          }\n        "])))
+  }, /*#__PURE__*/_react2.default.createElement(_Table.Table, {
+    className: (0, _css.css)(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n            .ant-select-selector {\n              /* min-height: 31px; */\n            }\n            .ant-formily-item.ant-formily-item-feedback-layout-loose {\n              margin-bottom: 0px !important;\n            }\n            .ant-formily-editable {\n              vertical-align: sub;\n            }\n            .ant-table table {\n            }\n            td:not(.ant-table-selection-column) {\n              padding: 5px !important;\n            }\n          "]))),
+    bordered: true,
     size: 'small',
-    showIndex: true,
     field: field,
-    pagination: false
-  }), field.editable && /*#__PURE__*/_react2.default.createElement(_antd.Button, {
-    type: 'dashed',
-    block: true,
-    style: {
-      marginTop: 12
+    showIndex: true,
+    dragSort: field.editable,
+    showDel: field.editable,
+    pagination: false,
+    rowSelection: {
+      type: 'none',
+      hideSelectAll: true
     },
-    onClick: function onClick() {
-      field.value = field.value || [];
-      field.value.push({});
+    footer: function footer() {
+      return field.editable && /*#__PURE__*/_react2.default.createElement(_antd.Button, {
+        type: 'text',
+        block: true,
+        className: (0, _css.css)(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n                  display: block;\n                "]))),
+        onClick: function onClick() {
+          field.value = field.value || [];
+          field.value.push({});
+          field.onInput(field.value);
+        },
+        icon: /*#__PURE__*/_react2.default.createElement(_icons.PlusOutlined, null)
+      });
     }
-  }, "Add new"));
+  }));
+}, {
+  displayName: 'SubTable'
 });
 exports.SubTable = SubTable;

package/lib/schema-component/antd/association-field/components/CreateRecordAction.d.ts

@@ -1,2 +1,2 @@
 import React from 'react';
-export declare const CreateRecordAction: React.MemoExoticComponent<React.FunctionComponent<unknown>>;
+export declare const CreateRecordAction: React.MemoExoticComponent<import("@formily/react").ReactFC<unknown>>;

package/lib/schema-component/antd/association-field/components/CreateRecordAction.js

@@ -52,7 +52,7 @@ var CreateRecordAction = (0, _react.observer)(function (props) {
     onClick: function onClick(arg) {
       return addbuttonClick(arg);
     }
-  })), /*#__PURE__*/_react2.default.createElement(_action.ActionContext.Provider, {
+  })), /*#__PURE__*/_react2.default.createElement(_action.ActionContextProvider, {
     value: _objectSpread(_objectSpread({}, ctx), {}, {
       visible: visibleAddNewer,
       setVisible: setVisibleAddNewer
@@ -67,5 +67,7 @@ var CreateRecordAction = (0, _react.observer)(function (props) {
       return s['x-component'] === 'AssociationField.AddNewer';
     }
   }))));
+}, {
+  displayName: 'CreateRecordAction'
 });
 exports.CreateRecordAction = CreateRecordAction;

package/lib/schema-component/antd/association-field/schema.d.ts

@@ -121,22 +121,10 @@ declare const _default: {
         type: string;
         'x-component': string;
         'x-initializer': string;
-        properties: {
-            indexCol: {
-                type: string;
-                'x-component': string;
-                'x-component-props': {
-                    width: number;
-                };
-                properties: {
-                    __index__: {
-                        type: string;
-                        'x-component': string;
-                        'x-read-pretty': boolean;
-                    };
-                };
-            };
+        'x-initializer-props': {
+            action: boolean;
         };
+        properties: {};
     };
 };
 export default _default;

package/lib/schema-component/antd/association-field/schema.js

@@ -127,22 +127,10 @@ var _default = {
     type: 'void',
     'x-component': 'AssociationField.SubTable',
     'x-initializer': 'TableColumnInitializers',
-    properties: {
-      indexCol: {
-        type: 'void',
-        'x-component': 'TableV2.Column',
-        'x-component-props': {
-          width: 80
-        },
-        properties: {
-          __index__: {
-            type: 'void',
-            'x-component': 'TableV2.Index',
-            'x-read-pretty': true
-          }
-        }
-      }
-    }
+    'x-initializer-props': {
+      action: false
+    },
+    properties: {}
   }
 };
 exports.default = _default;

package/lib/schema-component/antd/association-filter/ActionBarAssociationFilterAction.d.ts

@@ -1 +1,2 @@
-export declare const ActionBarAssociationFilterAction: (props: any) => JSX.Element;
+import React from 'react';
+export declare const ActionBarAssociationFilterAction: (props: any) => React.JSX.Element;

package/lib/schema-component/antd/association-filter/AssociationFilter.BlockDesigner.d.ts

@@ -1 +1,2 @@
-export declare const AssociationFilterBlockDesigner: () => JSX.Element;
+import React from 'react';
+export declare const AssociationFilterBlockDesigner: () => React.JSX.Element;

package/lib/schema-component/antd/association-filter/AssociationFilter.FilterBlockInitializer.d.ts

@@ -1 +1,2 @@
-export declare const AssociationFilterFilterBlockInitializer: () => JSX.Element;
+import React from 'react';
+export declare const AssociationFilterFilterBlockInitializer: () => React.JSX.Element;

package/lib/schema-component/antd/association-filter/AssociationFilter.Initializer.d.ts

@@ -1 +1,2 @@
-export declare const AssociationFilterInitializer: () => JSX.Element;
+import React from 'react';
+export declare const AssociationFilterInitializer: () => React.JSX.Element;

package/lib/schema-component/antd/association-filter/AssociationFilter.Item.Designer.d.ts

@@ -1 +1,2 @@
-export declare const AssociationFilterItemDesigner: (props: any) => JSX.Element;
+import React from 'react';
+export declare const AssociationFilterItemDesigner: (props: any) => React.JSX.Element;

package/lib/schema-component/antd/association-filter/AssociationFilter.Item.d.ts

@@ -1 +1,2 @@
-export declare const AssociationFilterItem: (props: any) => JSX.Element;
+import React from 'react';
+export declare const AssociationFilterItem: (props: any) => React.JSX.Element;

package/lib/schema-component/antd/association-filter/AssociationFilter.d.ts

@@ -1,12 +1,13 @@
+import React from 'react';
 import { AssociationFilterItemDesigner } from './AssociationFilter.Item.Designer';
 export declare const AssociationFilter: {
-    (props: any): JSX.Element;
-    Provider: (props: any) => JSX.Element;
-    Initializer: () => JSX.Element;
-    FilterBlockInitializer: () => JSX.Element;
-    Item: ((props: any) => JSX.Element) & {
+    (props: any): React.JSX.Element;
+    Provider: (props: any) => React.JSX.Element;
+    Initializer: () => React.JSX.Element;
+    FilterBlockInitializer: () => React.JSX.Element;
+    Item: ((props: any) => React.JSX.Element) & {
         Designer: typeof AssociationFilterItemDesigner;
     };
-    BlockDesigner: () => JSX.Element;
+    BlockDesigner: () => React.JSX.Element;
     useAssociationField(): import("../../../collection-manager").CollectionFieldOptions;
 };

package/lib/schema-component/antd/association-filter/AssociationFilterDesignerDelete.d.ts

@@ -1 +1,2 @@
-export declare const AssociationFilterDesignerDelete: (props: any) => JSX.Element;
+import React from 'react';
+export declare const AssociationFilterDesignerDelete: (props: any) => React.JSX.Element;