@nocobase/client 0.7.2-alpha.6 → 0.7.4-alpha.1

package/lib/schema-component/antd/menu/Menu.js

@@ -34,7 +34,7 @@ var _excluded = ["onSelect", "mode", "selectedUid", "defaultSelectedUid", "sideM
     _excluded3 = ["icon"],
     _excluded4 = ["icon"];
 
-var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6;
+var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8, _templateObject9;
 
 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); }
 
@@ -299,6 +299,7 @@ Menu.Item = (0, _react.observer)(function (props) {
   var field = (0, _react.useField)();
   var Designer = (0, _react2.useContext)(MenuItemDesignerContext);
   return /*#__PURE__*/_react2.default.createElement(_antd.Menu.Item, _objectSpread(_objectSpread({}, others), {}, {
+    className: (0, _css.css)(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral(["\n        :active {\n          background: inherit;\n        }\n      "]))),
     key: schema.name,
     eventKey: schema.name,
     schema: schema
@@ -307,7 +308,7 @@ Menu.Item = (0, _react.observer)(function (props) {
   }, /*#__PURE__*/_react2.default.createElement(_2.Icon, {
     type: icon
   }), /*#__PURE__*/_react2.default.createElement("span", {
-    className: (0, _css.css)(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral(["\n            overflow: hidden;\n            text-overflow: ellipsis;\n            display: inline-block;\n            width: 100%;\n            vertical-align: middle;\n          "])))
+    className: (0, _css.css)(_templateObject6 || (_templateObject6 = _taggedTemplateLiteral(["\n            overflow: hidden;\n            text-overflow: ellipsis;\n            display: inline-block;\n            width: 100%;\n            vertical-align: middle;\n          "])))
   }, field.title), /*#__PURE__*/_react2.default.createElement(Designer, null)));
 });
 Menu.URL = (0, _react.observer)(function (props) {
@@ -318,6 +319,7 @@ Menu.URL = (0, _react.observer)(function (props) {
   var field = (0, _react.useField)();
   var Designer = (0, _react2.useContext)(MenuItemDesignerContext);
   return /*#__PURE__*/_react2.default.createElement(_antd.Menu.Item, _objectSpread(_objectSpread({}, others), {}, {
+    className: (0, _css.css)(_templateObject7 || (_templateObject7 = _taggedTemplateLiteral(["\n        :active {\n          background: inherit;\n        }\n      "]))),
     key: schema.name,
     eventKey: schema.name,
     schema: schema,
@@ -329,7 +331,7 @@ Menu.URL = (0, _react.observer)(function (props) {
   }, /*#__PURE__*/_react2.default.createElement(_2.Icon, {
     type: icon
   }), /*#__PURE__*/_react2.default.createElement("span", {
-    className: (0, _css.css)(_templateObject6 || (_templateObject6 = _taggedTemplateLiteral(["\n            overflow: hidden;\n            text-overflow: ellipsis;\n            display: inline-block;\n            width: 100%;\n            vertical-align: middle;\n          "])))
+    className: (0, _css.css)(_templateObject8 || (_templateObject8 = _taggedTemplateLiteral(["\n            overflow: hidden;\n            text-overflow: ellipsis;\n            display: inline-block;\n            width: 100%;\n            vertical-align: middle;\n          "])))
   }, field.title), /*#__PURE__*/_react2.default.createElement(Designer, null)));
 });
 Menu.SubMenu = (0, _react.observer)(function (props) {
@@ -346,6 +348,7 @@ Menu.SubMenu = (0, _react.observer)(function (props) {
   }
 
   return /*#__PURE__*/_react2.default.createElement(_antd.Menu.SubMenu, _objectSpread(_objectSpread({}, others), {}, {
+    className: (0, _css.css)(_templateObject9 || (_templateObject9 = _taggedTemplateLiteral(["\n        :active {\n          background: inherit;\n        }\n      "]))),
     key: schema.name,
     eventKey: schema.name,
     title: /*#__PURE__*/_react2.default.createElement(_.SortableItem, {

package/lib/schema-component/antd/percent/Percent.js

@@ -34,10 +34,10 @@ var Percent = (0, _react.connect)(function (props) {
       _onChange = props.onChange;
   return /*#__PURE__*/_react2.default.createElement(_antd.InputNumber, _objectSpread(_objectSpread({}, props), {}, {
     addonAfter: "%",
-    value: math.round(value * 100, 9),
+    value: value ? math.round(value * 100, 9) : null,
     onChange: function onChange(v) {
       if (_onChange) {
-        _onChange(math.round(v / 100, 9));
+        _onChange(v ? math.round(v / 100, 9) : null);
       }
     }
   }));

package/lib/schema-component/antd/record-picker/InputRecordPicker.js

@@ -11,6 +11,8 @@ var _react = require("@formily/react");
 
 var _antd = require("antd");
 
+var _lodash = require("lodash");
+
 var _react2 = _interopRequireWildcard(require("react"));
 
 var _TableSelectorProvider = require("../../../block-provider/TableSelectorProvider");
@@ -57,31 +59,44 @@ function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) r
 var RecordPickerContext = /*#__PURE__*/(0, _react2.createContext)(null);
 
 var useTableSelectorProps = function useTableSelectorProps() {
+  var field = (0, _react.useField)();
+
   var _useContext = (0, _react2.useContext)(RecordPickerContext),
       multiple = _useContext.multiple,
       value = _useContext.value,
       setSelectedRows = _useContext.setSelectedRows,
-      selectedRows = _useContext.selectedRows;
+      rcSelectRows = _useContext.selectedRows;
 
   var _useTsp = (0, _TableSelectorProvider.useTableSelectorProps)(),
       _onRowSelectionChange = _useTsp.onRowSelectionChange,
       rowKey = _useTsp.rowKey,
-      others = _objectWithoutProperties(_useTsp, _excluded);
+      others = _objectWithoutProperties(_useTsp, _excluded); // console.log('useTableSelectorProps', field.value, value);
+
 
   return _objectSpread(_objectSpread({}, others), {}, {
     rowKey: rowKey,
     rowSelection: {
       type: multiple ? 'checkbox' : 'radio',
-      defaultSelectedRowKeys: selectedRows === null || selectedRows === void 0 ? void 0 : selectedRows.map(function (item) {
-        return item[rowKey || 'id'];
-      }),
-      selectedRowKeys: selectedRows === null || selectedRows === void 0 ? void 0 : selectedRows.map(function (item) {
+      // defaultSelectedRowKeys: rcSelectRows?.map((item) => item[rowKey||'id']),
+      selectedRowKeys: rcSelectRows === null || rcSelectRows === void 0 ? void 0 : rcSelectRows.map(function (item) {
         return item[rowKey || 'id'];
       })
     },
     onRowSelectionChange: function onRowSelectionChange(selectedRowKeys, selectedRows) {
-      _onRowSelectionChange === null || _onRowSelectionChange === void 0 ? void 0 : _onRowSelectionChange(selectedRowKeys, selectedRows);
-      setSelectedRows === null || setSelectedRows === void 0 ? void 0 : setSelectedRows(selectedRows);
+      if (multiple) {
+        var scopeRows = field.value || [];
+        var allSelectedRows = rcSelectRows || [];
+        var otherRows = (0, _lodash.differenceBy)(allSelectedRows, scopeRows, rowKey || 'id');
+        var unionSelectedRows = (0, _lodash.unionBy)(otherRows, selectedRows, rowKey || 'id');
+        var unionSelectedRowKeys = unionSelectedRows.map(function (item) {
+          return item[rowKey || 'id'];
+        });
+        setSelectedRows === null || setSelectedRows === void 0 ? void 0 : setSelectedRows(unionSelectedRows);
+        _onRowSelectionChange === null || _onRowSelectionChange === void 0 ? void 0 : _onRowSelectionChange(unionSelectedRowKeys, unionSelectedRows);
+      } else {
+        setSelectedRows === null || setSelectedRows === void 0 ? void 0 : setSelectedRows(selectedRows);
+        _onRowSelectionChange === null || _onRowSelectionChange === void 0 ? void 0 : _onRowSelectionChange(selectedRowKeys, selectedRows);
+      }
     }
   });
 };
@@ -159,13 +174,13 @@ var InputRecordPicker = function InputRecordPicker(props) {
       setSelectedRows(opts);
     }
   }, [value]);
-  (0, _react2.useEffect)(function () {});
 
   var getValue = function getValue() {
-    if (multiple == null) return null;
-    return multiple ? Array.isArray(value) ? value === null || value === void 0 ? void 0 : value.map(function (v) {
+    if (multiple == null) return null; // console.log('getValue', multiple, value, Array.isArray(value));
+
+    return Array.isArray(value) ? value === null || value === void 0 ? void 0 : value.map(function (v) {
       return v[fieldNames.value];
-    }) : [] : value === null || value === void 0 ? void 0 : value[fieldNames.value];
+    }) : value === null || value === void 0 ? void 0 : value[fieldNames.value];
   };
 
   return /*#__PURE__*/_react2.default.createElement("div", null, /*#__PURE__*/_react2.default.createElement(_antd.Select, _objectSpread(_objectSpread({}, others), {}, {

package/lib/schema-component/antd/record-picker/ReadPrettyRecordPicker.js

@@ -81,7 +81,9 @@ var ReadPrettyRecordPicker = (0, _react.observer)(function (props) {
 
   var renderRecords = function renderRecords() {
     return (0, _shared.toArr)(field.value).map(function (record, index, arr) {
-      return /*#__PURE__*/_react2.default.createElement(_react2.default.Fragment, null, /*#__PURE__*/_react2.default.createElement("span", null, /*#__PURE__*/_react2.default.createElement("a", {
+      return /*#__PURE__*/_react2.default.createElement(_react2.Fragment, {
+        key: "".concat(record.id, "_").concat(index)
+      }, /*#__PURE__*/_react2.default.createElement("span", null, /*#__PURE__*/_react2.default.createElement("a", {
         onClick: function onClick(e) {
           var _ellipsisWithTooltipR;
 
@@ -91,7 +93,7 @@ var ReadPrettyRecordPicker = (0, _react.observer)(function (props) {
           setRecord(record);
           ellipsisWithTooltipRef === null || ellipsisWithTooltipRef === void 0 ? void 0 : (_ellipsisWithTooltipR = ellipsisWithTooltipRef.current) === null || _ellipsisWithTooltipR === void 0 ? void 0 : _ellipsisWithTooltipR.setPopoverVisible(false);
         }
-      }, compile(record === null || record === void 0 ? void 0 : record[(fieldNames === null || fieldNames === void 0 ? void 0 : fieldNames.label) || 'label']))), index < arr.length - 1 ? /*#__PURE__*/_react2.default.createElement("span", {
+      }, compile(record === null || record === void 0 ? void 0 : record[(fieldNames === null || fieldNames === void 0 ? void 0 : fieldNames.label) || 'label']) || (record === null || record === void 0 ? void 0 : record[(fieldNames === null || fieldNames === void 0 ? void 0 : fieldNames.value) || 'value']) || (record === null || record === void 0 ? void 0 : record.id))), index < arr.length - 1 ? /*#__PURE__*/_react2.default.createElement("span", {
         style: {
           marginRight: 4,
           color: '#aaa'

package/lib/schema-component/antd/table/Table.Array.js

@@ -94,8 +94,8 @@ var useTableColumns = function useTableColumns() {
       render: function render(v, record) {
         var _field$value;
 
-        var index = (_field$value = field.value) === null || _field$value === void 0 ? void 0 : _field$value.indexOf(record);
-        console.log((Date.now() - start) / 1000);
+        var index = (_field$value = field.value) === null || _field$value === void 0 ? void 0 : _field$value.indexOf(record); // console.log((Date.now() - start) / 1000);
+
         return /*#__PURE__*/_react2.default.createElement(_2.RecordIndexProvider, {
           index: index
         }, /*#__PURE__*/_react2.default.createElement(_2.RecordProvider, {

package/lib/schema-component/antd/table/Table.Void.js

@@ -32,7 +32,7 @@ function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { va
 function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
 
 var usePaginationProps = function usePaginationProps(props, service) {
-  var _props$request, _props$request$params;
+  var _props$request, _props$request$params, _service$data;
 
   if (props.pagination === false) {
     return false;
@@ -46,6 +46,16 @@ var usePaginationProps = function usePaginationProps(props, service) {
     pagination.defaultPageSize = props === null || props === void 0 ? void 0 : (_props$request2 = props.request) === null || _props$request2 === void 0 ? void 0 : (_props$request2$param = _props$request2.params) === null || _props$request2$param === void 0 ? void 0 : _props$request2$param.pageSize;
   }
 
+  if (!pagination.total && (service === null || service === void 0 ? void 0 : (_service$data = service.data) === null || _service$data === void 0 ? void 0 : _service$data.meta)) {
+    var _service$data$meta = service.data.meta,
+        count = _service$data$meta.count,
+        page = _service$data$meta.page,
+        pageSize = _service$data$meta.pageSize;
+    pagination.total = count;
+    pagination.current = page;
+    pagination.pageSize = pageSize;
+  }
+
   return _objectSpread(_objectSpread({
     showSizeChanger: true
   }, pagination), {}, {

package/lib/schema-component/antd/table-v2/Table.Column.Designer.js

@@ -128,7 +128,9 @@ var TableColumnDesigner = function TableColumnDesigner(props) {
     options: options,
     value: fieldNames === null || fieldNames === void 0 ? void 0 : fieldNames['label'],
     onChange: function onChange(label) {
-      var fieldNames = _objectSpread(_objectSpread({}, fieldSchema['x-component-props']['fieldNames']), {}, {
+      var _collectionField$uiSc2, _fieldSchema$xCompon2;
+
+      var fieldNames = _objectSpread(_objectSpread(_objectSpread({}, collectionField === null || collectionField === void 0 ? void 0 : (_collectionField$uiSc2 = collectionField.uiSchema) === null || _collectionField$uiSc2 === void 0 ? void 0 : _collectionField$uiSc2['x-component-props']['fieldNames']), fieldSchema === null || fieldSchema === void 0 ? void 0 : (_fieldSchema$xCompon2 = fieldSchema['x-component-props']) === null || _fieldSchema$xCompon2 === void 0 ? void 0 : _fieldSchema$xCompon2['fieldNames']), {}, {
         label: label
       });
 

package/lib/schema-component/antd/table-v2/Table.d.ts

@@ -1,12 +1 @@
-export declare const components: {
-    header: {
-        wrapper: (props: any) => JSX.Element;
-        cell: (props: any) => JSX.Element;
-    };
-    body: {
-        wrapper: (props: any) => JSX.Element;
-        row: (props: any) => JSX.Element;
-        cell: (props: any) => JSX.Element;
-    };
-};
 export declare const Table: any;

package/lib/schema-component/antd/table-v2/Table.js

@@ -1,23 +1,29 @@
 "use strict";
 
+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); }
+
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.components = exports.Table = void 0;
+exports.Table = void 0;
 
 var _icons = require("@ant-design/icons");
 
+var _sortable = require("@dnd-kit/sortable");
+
 var _css = require("@emotion/css");
 
 var _react = require("@formily/react");
 
+var _reactive = require("@formily/reactive");
+
+var _ahooks = require("ahooks");
+
 var _antd = require("antd");
 
 var _classnames = _interopRequireDefault(require("classnames"));
 
-var _react2 = _interopRequireDefault(require("react"));
-
-var _reactDragListview = _interopRequireDefault(require("react-drag-listview"));
+var _react2 = _interopRequireWildcard(require("react"));
 
 var _reactI18next = require("react-i18next");
 
@@ -27,28 +33,28 @@ var _2 = require("../../../");
 
 var _excluded = ["pagination", "useProps", "onChange"],
     _excluded2 = ["pagination"],
-    _excluded3 = ["dragSort", "showIndex", "onRowDragEnd", "onRowSelectionChange", "onChange", "rowSelection"];
+    _excluded3 = ["dragSort", "showIndex", "onRowSelectionChange", "onChange", "rowSelection", "rowKey", "required"];
 
-var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7;
+var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8;
 
-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 asyncGeneratorStep(gen, resolve, reject, _next, _throw, key, arg) { try { var info = gen[key](arg); var value = info.value; } catch (error) { reject(error); return; } if (info.done) { resolve(value); } else { Promise.resolve(value).then(_next, _throw); } }
+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 _asyncToGenerator(fn) { return function () { var self = this, args = arguments; return new Promise(function (resolve, reject) { var gen = fn.apply(self, args); function _next(value) { asyncGeneratorStep(gen, resolve, reject, _next, _throw, "next", value); } function _throw(err) { asyncGeneratorStep(gen, resolve, reject, _next, _throw, "throw", err); } _next(undefined); }); }; }
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
 function _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }
 
 function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
 
-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) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
 
+function _taggedTemplateLiteral(strings, raw) { if (!raw) { raw = strings.slice(0); } return Object.freeze(Object.defineProperties(strings, { raw: { value: Object.freeze(raw) } })); }
+
 var isColumnComponent = function isColumnComponent(schema) {
   var _schema$xComponent;
 
@@ -66,8 +72,7 @@ var useTableColumns = function useTableColumns() {
 
   var _useSchemaInitializer = (0, _2.useSchemaInitializer)(schema['x-initializer']),
       exists = _useSchemaInitializer.exists,
-      render = _useSchemaInitializer.render; // console.log('useTableColumns', exists);
-
+      render = _useSchemaInitializer.render;
 
   var columns = schema.reduceProperties(function (buf, s) {
     if (isColumnComponent(s)) {
@@ -82,7 +87,6 @@ var useTableColumns = function useTableColumns() {
       }
     }, []);
     var dataIndex = (collectionFields === null || collectionFields === void 0 ? void 0 : collectionFields.length) > 0 ? collectionFields[0].name : s.name;
-    console.log('useTableColumns', s.name, s, field.value);
     return {
       title: /*#__PURE__*/_react2.default.createElement(_react.RecursionField, {
         name: s.name,
@@ -98,7 +102,6 @@ var useTableColumns = function useTableColumns() {
 
         var index = (_field$value = field.value) === null || _field$value === void 0 ? void 0 : _field$value.indexOf(record); // console.log((Date.now() - start) / 1000);
 
-        console.log('useTableColumns.index', index, record);
         return /*#__PURE__*/_react2.default.createElement(_2.RecordIndexProvider, {
           index: index
         }, /*#__PURE__*/_react2.default.createElement(_2.RecordProvider, {
@@ -123,40 +126,41 @@ var useTableColumns = function useTableColumns() {
   });
 };
 
-var components = {
-  header: {
-    wrapper: function wrapper(props) {
-      return /*#__PURE__*/_react2.default.createElement(_.DndContext, null, /*#__PURE__*/_react2.default.createElement("thead", _objectSpread({}, props)));
-    },
-    cell: function cell(props) {
-      return /*#__PURE__*/_react2.default.createElement("th", _objectSpread(_objectSpread({}, props), {}, {
-        className: (0, _classnames.default)(props.className, (0, _css.css)(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n              max-width: 300px;\n              white-space: nowrap;\n              &:hover .general-schema-designer {\n                display: block;\n              }\n            "]))))
-      }));
-    }
-  },
-  body: {
-    wrapper: function wrapper(props) {
-      return /*#__PURE__*/_react2.default.createElement(_.DndContext, null, /*#__PURE__*/_react2.default.createElement("tbody", _objectSpread({}, props)));
-    },
-    row: function row(props) {
-      return /*#__PURE__*/_react2.default.createElement("tr", _objectSpread({}, props));
-    },
-    cell: function cell(props) {
-      return /*#__PURE__*/_react2.default.createElement("td", _objectSpread(_objectSpread({}, props), {}, {
-        className: (0, _classnames.default)(props.className, (0, _css.css)(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n            max-width: 300px;\n            white-space: nowrap;\n            .nb-read-pretty-input-number {\n              text-align: right;\n            }\n          "]))))
-      }));
-    }
-  }
+var topActiveClass = (0, _css.css)(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  & > td {\n    border-top: 2px solid rgba(241, 139, 98, 0.6) !important;\n  }\n"])));
+var bottomActiveClass = (0, _css.css)(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n  & > td {\n    border-bottom: 2px solid rgba(241, 139, 98, 0.6) !important;\n  }\n"])));
+
+var SortableRow = function SortableRow(props) {
+  var _props$dataRowKey, _active$data$current$, _active$data$current, _over$data$current$so, _over$data$current;
+
+  var id = (_props$dataRowKey = props['data-row-key']) === null || _props$dataRowKey === void 0 ? void 0 : _props$dataRowKey.toString();
+
+  var _useSortable = (0, _sortable.useSortable)({
+    id: id
+  }),
+      setNodeRef = _useSortable.setNodeRef,
+      isOver = _useSortable.isOver,
+      active = _useSortable.active,
+      over = _useSortable.over;
+
+  var className = ((_active$data$current$ = active === null || active === void 0 ? void 0 : (_active$data$current = active.data.current) === null || _active$data$current === void 0 ? void 0 : _active$data$current.sortable.index) !== null && _active$data$current$ !== void 0 ? _active$data$current$ : -1) > ((_over$data$current$so = over === null || over === void 0 ? void 0 : (_over$data$current = over.data.current) === null || _over$data$current === void 0 ? void 0 : _over$data$current.sortable.index) !== null && _over$data$current$so !== void 0 ? _over$data$current$so : -1) ? topActiveClass : bottomActiveClass;
+  return /*#__PURE__*/_react2.default.createElement("tr", _objectSpread(_objectSpread({
+    ref: (active === null || active === void 0 ? void 0 : active.id) !== id ? setNodeRef : null
+  }, props), {}, {
+    className: (0, _classnames.default)(_defineProperty({}, className, active && isOver))
+  }));
 };
-exports.components = components;
 
-var SortHandle = function SortHandle() {
-  return /*#__PURE__*/_react2.default.createElement(_icons.MenuOutlined, {
-    className: 'drag-handle',
+var SortHandle = function SortHandle(props) {
+  var _useSortable2 = (0, _sortable.useSortable)({
+    id: props.id
+  }),
+      listeners = _useSortable2.listeners;
+
+  return /*#__PURE__*/_react2.default.createElement(_icons.MenuOutlined, _objectSpread(_objectSpread({}, listeners), {}, {
     style: {
       cursor: 'grab'
     }
-  });
+  }));
 };
 
 var TableIndex = function TableIndex(props) {
@@ -191,6 +195,25 @@ var usePaginationProps = function usePaginationProps(pagination1, pagination2) {
   }, pagination1), pagination2);
 };
 
+var useValidator = function useValidator(validator) {
+  var field = (0, _react.useField)();
+  (0, _react2.useEffect)(function () {
+    var dispose = (0, _reactive.reaction)(function () {
+      return field.value;
+    }, function (value) {
+      var message = validator(value);
+      field.setFeedback({
+        type: 'error',
+        code: 'ValidateError',
+        messages: message ? [message] : []
+      });
+    });
+    return function () {
+      dispose();
+    };
+  }, []);
+};
+
 var Table = (0, _react.observer)(function (props) {
   var _field$data, _field$value3, _field$value3$slice;
 
@@ -211,13 +234,92 @@ var Table = (0, _react.observer)(function (props) {
       dragSort = _others1$others$dragS === void 0 ? false : _others1$others$dragS,
       _others1$others$showI = _others1$others.showIndex,
       showIndex = _others1$others$showI === void 0 ? true : _others1$others$showI,
-      onRowDragEnd = _others1$others.onRowDragEnd,
       onRowSelectionChange = _others1$others.onRowSelectionChange,
       onTableChange = _others1$others.onChange,
       rowSelection = _others1$others.rowSelection,
+      rowKey = _others1$others.rowKey,
+      required = _others1$others.required,
       others = _objectWithoutProperties(_others1$others, _excluded3);
 
+  var onRowDragEnd = (0, _ahooks.useMemoizedFn)(others.onRowDragEnd || function () {});
   var paginationProps = usePaginationProps(pagination1, pagination2);
+  var requiredValidator = field.required || required;
+  (0, _react2.useEffect)(function () {
+    field.setValidator(function (value) {
+      if (requiredValidator) {
+        return Array.isArray(value) && value.length > 0 ? null : 'The field value is required';
+      }
+
+      return;
+    });
+  }, [requiredValidator]);
+  var components = (0, _react2.useMemo)(function () {
+    return {
+      header: {
+        wrapper: function wrapper(props) {
+          return /*#__PURE__*/_react2.default.createElement(_.DndContext, null, /*#__PURE__*/_react2.default.createElement("thead", _objectSpread({}, props)));
+        },
+        cell: function cell(props) {
+          return /*#__PURE__*/_react2.default.createElement("th", _objectSpread(_objectSpread({}, props), {}, {
+            className: (0, _classnames.default)(props.className, (0, _css.css)(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n                  max-width: 300px;\n                  white-space: nowrap;\n                  &:hover .general-schema-designer {\n                    display: block;\n                  }\n                "]))))
+          }));
+        }
+      },
+      body: {
+        wrapper: function wrapper(props) {
+          return /*#__PURE__*/_react2.default.createElement(_.DndContext, {
+            onDragEnd: function onDragEnd(e) {
+              var _e$active, _e$active$data$curren, _e$active$data$curren2, _e$over, _e$over$data$current, _e$over$data$current$;
+
+              if (!e.active || !e.over) {
+                console.warn('move cancel');
+                return;
+              }
+
+              var fromIndex = (_e$active = e.active) === null || _e$active === void 0 ? void 0 : (_e$active$data$curren = _e$active.data.current) === null || _e$active$data$curren === void 0 ? void 0 : (_e$active$data$curren2 = _e$active$data$curren.sortable) === null || _e$active$data$curren2 === void 0 ? void 0 : _e$active$data$curren2.index;
+              var toIndex = (_e$over = e.over) === null || _e$over === void 0 ? void 0 : (_e$over$data$current = _e$over.data.current) === null || _e$over$data$current === void 0 ? void 0 : (_e$over$data$current$ = _e$over$data$current.sortable) === null || _e$over$data$current$ === void 0 ? void 0 : _e$over$data$current$.index;
+              var from = field.value[fromIndex];
+              var to = field.value[toIndex];
+              field.move(fromIndex, toIndex);
+              onRowDragEnd({
+                fromIndex: fromIndex,
+                toIndex: toIndex,
+                from: from,
+                to: to
+              });
+            }
+          }, /*#__PURE__*/_react2.default.createElement("tbody", _objectSpread({}, props)));
+        },
+        row: function row(props) {
+          return /*#__PURE__*/_react2.default.createElement(SortableRow, _objectSpread({}, props));
+        },
+        cell: function cell(props) {
+          return /*#__PURE__*/_react2.default.createElement("td", _objectSpread(_objectSpread({}, props), {}, {
+            className: (0, _classnames.default)(props.className, (0, _css.css)(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n                max-width: 300px;\n                white-space: nowrap;\n                .nb-read-pretty-input-number {\n                  text-align: right;\n                }\n              "]))))
+          }));
+        }
+      }
+    };
+  }, [field, onRowDragEnd, dragSort]);
+
+  var defaultRowKey = function defaultRowKey(record) {
+    var _field$value2, _field$value2$indexOf;
+
+    return (_field$value2 = field.value) === null || _field$value2 === void 0 ? void 0 : (_field$value2$indexOf = _field$value2.indexOf) === null || _field$value2$indexOf === void 0 ? void 0 : _field$value2$indexOf.call(_field$value2, record);
+  };
+
+  var getRowKey = function getRowKey(record) {
+    if (typeof rowKey === 'string') {
+      var _record$rowKey;
+
+      return (_record$rowKey = record[rowKey]) === null || _record$rowKey === void 0 ? void 0 : _record$rowKey.toString();
+    } else {
+      var _ref2;
+
+      return (_ref2 = (rowKey !== null && rowKey !== void 0 ? rowKey : defaultRowKey)(record)) === null || _ref2 === void 0 ? void 0 : _ref2.toString();
+    }
+  };
+
   var restProps = {
     rowSelection: rowSelection ? _objectSpread({
       type: 'checkbox',
@@ -242,62 +344,32 @@ var Table = (0, _react.observer)(function (props) {
         }
 
         return /*#__PURE__*/_react2.default.createElement("div", {
-          className: (0, _classnames.default)(checked ? 'checked' : null, (0, _css.css)(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n                    position: relative;\n                    display: flex;\n                    align-items: center;\n                    justify-content: space-evenly;\n                    padding-right: 8px;\n                    .nb-table-index {\n                      opacity: 0;\n                    }\n                    &:not(.checked) {\n                      .nb-table-index {\n                        opacity: 1;\n                      }\n                    }\n                    &:hover {\n                      .nb-table-index {\n                        opacity: 0;\n                      }\n                      .nb-origin-node {\n                        display: block;\n                      }\n                    }\n                  "]))))
+          className: (0, _classnames.default)(checked ? 'checked' : null, (0, _css.css)(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral(["\n                    position: relative;\n                    display: flex;\n                    align-items: center;\n                    justify-content: space-evenly;\n                    padding-right: 8px;\n                    .nb-table-index {\n                      opacity: 0;\n                    }\n                    &:not(.checked) {\n                      .nb-table-index {\n                        opacity: 1;\n                      }\n                    }\n                    &:hover {\n                      .nb-table-index {\n                        opacity: 0;\n                      }\n                      .nb-origin-node {\n                        display: block;\n                      }\n                    }\n                  "]))))
         }, /*#__PURE__*/_react2.default.createElement("div", {
-          className: (0, _classnames.default)(checked ? 'checked' : null, (0, _css.css)(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n                      position: relative;\n                      display: flex;\n                      align-items: center;\n                      justify-content: space-evenly;\n                    "]))))
-        }, dragSort && /*#__PURE__*/_react2.default.createElement(SortHandle, null), showIndex && /*#__PURE__*/_react2.default.createElement(TableIndex, {
+          className: (0, _classnames.default)(checked ? 'checked' : null, (0, _css.css)(_templateObject6 || (_templateObject6 = _taggedTemplateLiteral(["\n                      position: relative;\n                      display: flex;\n                      align-items: center;\n                      justify-content: space-evenly;\n                    "]))))
+        }, dragSort && /*#__PURE__*/_react2.default.createElement(SortHandle, {
+          id: getRowKey(record)
+        }), showIndex && /*#__PURE__*/_react2.default.createElement(TableIndex, {
           index: index
         })), /*#__PURE__*/_react2.default.createElement("div", {
-          className: (0, _classnames.default)('nb-origin-node', checked ? 'checked' : null, (0, _css.css)(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral(["\n                      position: absolute;\n                      right: 50%;\n                      transform: translateX(50%);\n                      &:not(.checked) {\n                        display: none;\n                      }\n                    "]))))
+          className: (0, _classnames.default)('nb-origin-node', checked ? 'checked' : null, (0, _css.css)(_templateObject7 || (_templateObject7 = _taggedTemplateLiteral(["\n                      position: absolute;\n                      right: 50%;\n                      transform: translateX(50%);\n                      &:not(.checked) {\n                        display: none;\n                      }\n                    "]))))
         }, originNode));
       }
     }, rowSelection) : undefined
   };
-
-  var defaultRowKey = function defaultRowKey(record) {
-    var _field$value2, _field$value2$indexOf;
-
-    return (_field$value2 = field.value) === null || _field$value2 === void 0 ? void 0 : (_field$value2$indexOf = _field$value2.indexOf) === null || _field$value2$indexOf === void 0 ? void 0 : _field$value2$indexOf.call(_field$value2, record);
-  };
-
+  var SortableWrapper = (0, _react2.useCallback)(function (_ref3) {
+    var children = _ref3.children;
+    return dragSort ? /*#__PURE__*/_react2.default.createElement(_sortable.SortableContext, {
+      items: field.value.map(getRowKey),
+      children: children
+    }) : /*#__PURE__*/_react2.default.createElement(_react2.default.Fragment, {
+      children: children
+    });
+  }, [field, dragSort]);
   return /*#__PURE__*/_react2.default.createElement("div", {
-    className: (0, _css.css)(_templateObject6 || (_templateObject6 = _taggedTemplateLiteral(["\n        .ant-table {\n          overflow-x: auto;\n          overflow-y: hidden;\n        }\n      "])))
-  }, /*#__PURE__*/_react2.default.createElement(_reactDragListview.default, {
-    handleSelector: '.drag-handle',
-    onDragEnd: function () {
-      var _onDragEnd = _asyncToGenerator( /*#__PURE__*/regeneratorRuntime.mark(function _callee(fromIndex, toIndex) {
-        var from, to;
-        return regeneratorRuntime.wrap(function _callee$(_context) {
-          while (1) {
-            switch (_context.prev = _context.next) {
-              case 0:
-                from = field.value[fromIndex];
-                to = field.value[toIndex];
-                field.move(fromIndex, toIndex);
-                onRowDragEnd({
-                  fromIndex: fromIndex,
-                  toIndex: toIndex,
-                  from: from,
-                  to: to
-                });
-
-              case 4:
-              case "end":
-                return _context.stop();
-            }
-          }
-        }, _callee);
-      }));
-
-      function onDragEnd(_x, _x2) {
-        return _onDragEnd.apply(this, arguments);
-      }
-
-      return onDragEnd;
-    }(),
-    lineClassName: (0, _css.css)(_templateObject7 || (_templateObject7 = _taggedTemplateLiteral(["\n          border-bottom: 2px solid rgba(241, 139, 98, 0.6) !important;\n        "])))
-  }, /*#__PURE__*/_react2.default.createElement(_antd.Table, _objectSpread(_objectSpread(_objectSpread({
-    rowKey: defaultRowKey
+    className: (0, _css.css)(_templateObject8 || (_templateObject8 = _taggedTemplateLiteral(["\n        .ant-table {\n          overflow-x: auto;\n          overflow-y: hidden;\n        }\n      "])))
+  }, /*#__PURE__*/_react2.default.createElement(SortableWrapper, null, /*#__PURE__*/_react2.default.createElement(_antd.Table, _objectSpread(_objectSpread(_objectSpread({
+    rowKey: rowKey !== null && rowKey !== void 0 ? rowKey : defaultRowKey
   }, others), restProps), {}, {
     pagination: paginationProps,
     components: components,
@@ -308,6 +380,12 @@ var Table = (0, _react.observer)(function (props) {
     // scroll={{ x: 12 * 300 + 80 }}
     columns: columns,
     dataSource: field === null || field === void 0 ? void 0 : (_field$value3 = field.value) === null || _field$value3 === void 0 ? void 0 : (_field$value3$slice = _field$value3.slice) === null || _field$value3$slice === void 0 ? void 0 : _field$value3$slice.call(_field$value3)
-  }))));
+  }))), field.errors.length > 0 && /*#__PURE__*/_react2.default.createElement("div", {
+    className: "ant-formily-item-error-help ant-formily-item-help ant-formily-item-help-enter ant-formily-item-help-enter-active"
+  }, field.errors.map(function (error) {
+    return error.messages.map(function (message) {
+      return /*#__PURE__*/_react2.default.createElement("div", null, message);
+    });
+  })));
 });
 exports.Table = Table;

package/lib/schema-component/antd/table-v2/TableField.js

@@ -51,6 +51,9 @@ var TableField = (0, _react.observer)(function (props) {
       ctx.field.added.add(fieldSchema.name);
     }
   }, []);
+  (0, _react2.useEffect)(function () {
+    field.decoratorProps.asterisk = fieldSchema.required;
+  }, [fieldSchema.required]);
   return /*#__PURE__*/_react2.default.createElement("div", null, props.children);
 });
 exports.TableField = TableField;