@nocobase/client 0.9.1-alpha.2 → 0.9.2-alpha.1

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

@@ -1,73 +1,58 @@
 var _excluded = ["pagination", "useProps", "onChange"],
-    _excluded2 = ["pagination"],
-    _excluded3 = ["dragSort", "showIndex", "onRowSelectionChange", "onChange", "rowSelection", "rowKey", "required"];
-
-var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8;
-
+  _excluded2 = ["pagination", "onClickRow"],
+  _excluded3 = ["dragSort", "showIndex", "onRowSelectionChange", "onChange", "rowSelection", "rowKey", "required", "onExpand"];
+var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8, _templateObject9;
+function _typeof(obj) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (obj) { return typeof obj; } : function (obj) { return obj && "function" == typeof Symbol && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }, _typeof(obj); }
+function _toConsumableArray(arr) { return _arrayWithoutHoles(arr) || _iterableToArray(arr) || _unsupportedIterableToArray(arr) || _nonIterableSpread(); }
+function _nonIterableSpread() { throw new TypeError("Invalid attempt to spread non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
+function _iterableToArray(iter) { if (typeof Symbol !== "undefined" && iter[Symbol.iterator] != null || iter["@@iterator"] != null) return Array.from(iter); }
+function _arrayWithoutHoles(arr) { if (Array.isArray(arr)) return _arrayLikeToArray(arr); }
 function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }
-
 function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
-
 function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
-
-function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) { arr2[i] = arr[i]; } return arr2; }
-
-function _iterableToArrayLimit(arr, i) { var _i = arr == null ? null : typeof Symbol !== "undefined" && arr[Symbol.iterator] || arr["@@iterator"]; if (_i == null) return; var _arr = []; var _n = true; var _d = false; var _s, _e; try { for (_i = _i.call(arr); !(_n = (_s = _i.next()).done); _n = true) { _arr.push(_s.value); if (i && _arr.length === i) break; } } catch (err) { _d = true; _e = err; } finally { try { if (!_n && _i["return"] != null) _i["return"](); } finally { if (_d) throw _e; } } return _arr; }
-
+function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) arr2[i] = arr[i]; return arr2; }
+function _iterableToArrayLimit(arr, i) { var _i = null == arr ? null : "undefined" != typeof Symbol && arr[Symbol.iterator] || arr["@@iterator"]; if (null != _i) { var _s, _e, _x, _r, _arr = [], _n = !0, _d = !1; try { if (_x = (_i = _i.call(arr)).next, 0 === i) { if (Object(_i) !== _i) return; _n = !1; } else for (; !(_n = (_s = _x.call(_i)).done) && (_arr.push(_s.value), _arr.length !== i); _n = !0); } catch (err) { _d = !0, _e = err; } finally { try { if (!_n && null != _i.return && (_r = _i.return(), Object(_r) !== _r)) return; } finally { if (_d) throw _e; } } return _arr; } }
 function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
-
 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 _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); }
 import { MenuOutlined } from '@ant-design/icons';
 import { SortableContext, useSortable } from '@dnd-kit/sortable';
 import { css } from '@emotion/css';
-import { observer, RecursionField, useField, useFieldSchema } from '@formily/react';
+import { RecursionField, observer, useField, useFieldSchema } from '@formily/react';
 import { reaction } from '@formily/reactive';
-import { useEventListener, useMemoizedFn } from 'ahooks';
+import { useMemoizedFn } from 'ahooks';
 import { Table as AntdTable } from 'antd';
 import { default as classNames, default as cls } from 'classnames';
-import React, { useCallback, useEffect, useMemo, useRef, useState } from 'react';
+import React, { useCallback, useEffect, useMemo, useState } from 'react';
 import { useTranslation } from 'react-i18next';
-import { DndContext, useDesignable } from '../..';
-import { RecordIndexProvider, RecordProvider, useSchemaInitializer } from '../../../';
+import { DndContext, useDesignable, useTableSize } from '../..';
+import { RecordIndexProvider, RecordProvider, useSchemaInitializer, useTableBlockContext, useTableSelectorContext } from '../../../';
 import { useACLFieldWhitelist } from '../../../acl/ACLProvider';
-import { isCollectionFieldComponent, isColumnComponent } from './utils';
-
+import { extractIndex, getIdsWithChildren, isCollectionFieldComponent, isColumnComponent } from './utils';
 var useTableColumns = function useTableColumns() {
   var _schema$reducePropert;
-
   var field = useField();
   var schema = useFieldSchema();
-
   var _useACLFieldWhitelist = useACLFieldWhitelist(),
-      schemaInWhitelist = _useACLFieldWhitelist.schemaInWhitelist;
-
+    schemaInWhitelist = _useACLFieldWhitelist.schemaInWhitelist;
   var _useDesignable = useDesignable(),
-      designable = _useDesignable.designable;
-
+    designable = _useDesignable.designable;
   var _useSchemaInitializer = useSchemaInitializer(schema['x-initializer']),
-      exists = _useSchemaInitializer.exists,
-      render = _useSchemaInitializer.render;
-
+    exists = _useSchemaInitializer.exists,
+    render = _useSchemaInitializer.render;
   var columns = (_schema$reducePropert = schema.reduceProperties(function (buf, s) {
     if (isColumnComponent(s) && schemaInWhitelist(Object.values(s.properties || {}).pop())) {
       return buf.concat([s]);
     }
-
     return buf;
   }, [])) === null || _schema$reducePropert === void 0 ? void 0 : _schema$reducePropert.map(function (s) {
     var _s$xComponentProps;
-
     var collectionFields = s.reduceProperties(function (buf, s) {
       if (isCollectionFieldComponent(s)) {
         return buf.concat([s]);
@@ -87,7 +72,6 @@ var useTableColumns = function useTableColumns() {
     }, s['x-component-props']), {}, {
       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);
         return /*#__PURE__*/React.createElement(RecordIndexProvider, {
           index: record.__index || index
@@ -101,11 +85,9 @@ var useTableColumns = function useTableColumns() {
       }
     });
   });
-
   if (!exists) {
     return columns;
   }
-
   return columns.concat({
     title: render(),
     dataIndex: 'TABLE_COLUMN_INITIALIZER',
@@ -119,44 +101,36 @@ var useTableColumns = function useTableColumns() {
     } : null
   });
 };
-
 var topActiveClass = css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  & > td {\n    border-top: 2px solid rgba(241, 139, 98, 0.6) !important;\n  }\n"])));
 var bottomActiveClass = 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 = useSortable({
-    id: id
-  }),
-      setNodeRef = _useSortable.setNodeRef,
-      isOver = _useSortable.isOver,
-      active = _useSortable.active,
-      over = _useSortable.over;
-
+      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__*/React.createElement("tr", _objectSpread(_objectSpread({
     ref: (active === null || active === void 0 ? void 0 : active.id) !== id ? setNodeRef : null
   }, props), {}, {
-    className: classNames(_defineProperty({}, className, active && isOver))
+    className: classNames(props.className, _defineProperty({}, className, active && isOver))
   }));
 };
-
 var SortHandle = function SortHandle(props) {
   var _useSortable2 = useSortable({
-    id: props.id
-  }),
-      listeners = _useSortable2.listeners;
-
+      id: props.id
+    }),
+    listeners = _useSortable2.listeners;
   return /*#__PURE__*/React.createElement(MenuOutlined, _objectSpread(_objectSpread({}, listeners), {}, {
     style: {
       cursor: 'grab'
     }
   }));
 };
-
 var TableIndex = function TableIndex(props) {
   var index = props.index;
   return /*#__PURE__*/React.createElement("div", {
@@ -164,22 +138,18 @@ var TableIndex = function TableIndex(props) {
     style: {
       padding: '0 8px 0 16px'
     }
-  }, index + 1);
+  }, index);
 };
-
 var usePaginationProps = function usePaginationProps(pagination1, pagination2) {
   var _useTranslation = useTranslation(),
-      t = _useTranslation.t;
-
+    t = _useTranslation.t;
   if (pagination2 === false) {
     return false;
   }
-
   if (!pagination2 && pagination1 === false) {
     return false;
   }
-
-  return _objectSpread(_objectSpread({
+  var result = _objectSpread(_objectSpread({
     showTotal: function showTotal(total) {
       return t('Total {{count}} items', {
         count: total
@@ -187,8 +157,8 @@ var usePaginationProps = function usePaginationProps(pagination1, pagination2) {
     },
     showSizeChanger: true
   }, pagination1), pagination2);
+  return result.total <= result.pageSize ? false : result;
 };
-
 var useValidator = function useValidator(validator) {
   var field = useField();
   useEffect(function () {
@@ -207,46 +177,89 @@ var useValidator = function useValidator(validator) {
     };
   }, []);
 };
-
 export var Table = observer(function (props) {
-  var _field$data, _fieldSchema$parent, _fieldSchema$parent$x, _field$value3, _field$value3$slice;
-
+  var _schema$parent, _schema$parent2, _field$data, _fieldSchema$parent, _fieldSchema$parent$x, _field$value4, _field$value4$slice;
   var field = useField();
   var columns = useTableColumns();
-
   var pagination1 = props.pagination,
-      useProps = props.useProps,
-      onChange = props.onChange,
-      others1 = _objectWithoutProperties(props, _excluded);
-
+    useProps = props.useProps,
+    onChange = props.onChange,
+    others1 = _objectWithoutProperties(props, _excluded);
   var _ref = (useProps === null || useProps === void 0 ? void 0 : useProps()) || {},
-      pagination2 = _ref.pagination,
-      others2 = _objectWithoutProperties(_ref, _excluded2);
-
+    pagination2 = _ref.pagination,
+    onClickRow = _ref.onClickRow,
+    others2 = _objectWithoutProperties(_ref, _excluded2);
   var _others1$others = _objectSpread(_objectSpread({}, others1), others2),
-      _others1$others$dragS = _others1$others.dragSort,
-      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,
-      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);
-
+    _others1$others$dragS = _others1$others.dragSort,
+    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,
+    onRowSelectionChange = _others1$others.onRowSelectionChange,
+    onTableChange = _others1$others.onChange,
+    rowSelection = _others1$others.rowSelection,
+    rowKey = _others1$others.rowKey,
+    required = _others1$others.required,
+    _onExpand = _others1$others.onExpand,
+    others = _objectWithoutProperties(_others1$others, _excluded3);
+  var schema = useFieldSchema();
+  var isTableSelector = (schema === null || schema === void 0 ? void 0 : (_schema$parent = schema.parent) === null || _schema$parent === void 0 ? void 0 : _schema$parent['x-decorator']) === 'TableSelectorProvider';
+  var ctx = isTableSelector ? useTableSelectorContext() : useTableBlockContext();
+  var expandFlag = ctx.expandFlag;
   var onRowDragEnd = useMemoizedFn(others.onRowDragEnd || function () {});
   var paginationProps = usePaginationProps(pagination1, pagination2);
   var requiredValidator = field.required || required;
+  var _ref2 = (schema === null || schema === void 0 ? void 0 : (_schema$parent2 = schema.parent) === null || _schema$parent2 === void 0 ? void 0 : _schema$parent2['x-decorator-props']) || {},
+    treeTable = _ref2.treeTable;
+  var _useState = useState([]),
+    _useState2 = _slicedToArray(_useState, 2),
+    expandedKeys = _useState2[0],
+    setExpandesKeys = _useState2[1];
+  var _useState3 = useState([]),
+    _useState4 = _slicedToArray(_useState3, 2),
+    allIncludesChildren = _useState4[0],
+    setAllIncludesChildren = _useState4[1];
+  var _useState5 = useState((field === null || field === void 0 ? void 0 : (_field$data = field.data) === null || _field$data === void 0 ? void 0 : _field$data.selectedRowKeys) || []),
+    _useState6 = _slicedToArray(_useState5, 2),
+    selectedRowKeys = _useState6[0],
+    setSelectedRowKeys = _useState6[1];
+  var _useState7 = useState([]),
+    _useState8 = _slicedToArray(_useState7, 2),
+    selectedRow = _useState8[0],
+    setSelectedRow = _useState8[1];
+  var onRow = null,
+    highlightRow = '';
+  if (onClickRow) {
+    onRow = function onRow(record) {
+      return {
+        onClick: function onClick() {
+          return onClickRow(record, setSelectedRow, selectedRow);
+        }
+      };
+    };
+    highlightRow = css(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n      & > td {\n        background-color: #caedff !important;\n      }\n      &:hover > td {\n        background-color: #caedff !important;\n      }\n    "])));
+  }
   useEffect(function () {
     field.setValidator(function (value) {
       if (requiredValidator) {
         return Array.isArray(value) && value.length > 0 ? null : 'The field value is required';
       }
-
       return;
     });
   }, [requiredValidator]);
+  useEffect(function () {
+    if (treeTable !== false) {
+      var _field$value2;
+      var keys = getIdsWithChildren((_field$value2 = field.value) === null || _field$value2 === void 0 ? void 0 : _field$value2.slice());
+      setAllIncludesChildren(keys);
+    }
+  }, [field.value]);
+  useEffect(function () {
+    if (expandFlag) {
+      setExpandesKeys(allIncludesChildren);
+    } else {
+      setExpandesKeys([]);
+    }
+  }, [expandFlag, allIncludesChildren]);
   var components = useMemo(function () {
     return {
       header: {
@@ -255,7 +268,7 @@ export var Table = observer(function (props) {
         },
         cell: function cell(props) {
           return /*#__PURE__*/React.createElement("th", _objectSpread(_objectSpread({}, props), {}, {
-            className: cls(props.className, css(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n                  max-width: 300px;\n                  white-space: nowrap;\n                  &:hover .general-schema-designer {\n                    display: block;\n                  }\n                "]))))
+            className: cls(props.className, css(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n                  max-width: 300px;\n                  white-space: nowrap;\n                  &:hover .general-schema-designer {\n                    display: block;\n                  }\n                "]))))
           }));
         }
       },
@@ -264,12 +277,10 @@ export var Table = observer(function (props) {
           return /*#__PURE__*/React.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];
@@ -289,70 +300,66 @@ export var Table = observer(function (props) {
         },
         cell: function cell(props) {
           return /*#__PURE__*/React.createElement("td", _objectSpread(_objectSpread({}, props), {}, {
-            className: classNames(props.className, css(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n                max-width: 300px;\n                white-space: nowrap;\n                .nb-read-pretty-input-number {\n                  text-align: right;\n                }\n              "]))))
+            className: classNames(props.className, css(_templateObject5 || (_templateObject5 = _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 _field$value3, _field$value3$indexOf;
+    return (_field$value3 = field.value) === null || _field$value3 === void 0 ? void 0 : (_field$value3$indexOf = _field$value3.indexOf) === null || _field$value3$indexOf === void 0 ? void 0 : _field$value3$indexOf.call(_field$value3, 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 _ref3;
+      return (_ref3 = (rowKey !== null && rowKey !== void 0 ? rowKey : defaultRowKey)(record)) === null || _ref3 === void 0 ? void 0 : _ref3.toString();
     }
   };
-
   var restProps = {
     rowSelection: rowSelection ? _objectSpread({
       type: 'checkbox',
-      selectedRowKeys: (field === null || field === void 0 ? void 0 : (_field$data = field.data) === null || _field$data === void 0 ? void 0 : _field$data.selectedRowKeys) || [],
+      selectedRowKeys: selectedRowKeys,
       onChange: function onChange(selectedRowKeys, selectedRows) {
         field.data = field.data || {};
         field.data.selectedRowKeys = selectedRowKeys;
+        setSelectedRowKeys(selectedRowKeys);
         onRowSelectionChange === null || onRowSelectionChange === void 0 ? void 0 : onRowSelectionChange(selectedRowKeys, selectedRows);
       },
       renderCell: function renderCell(checked, record, index, originNode) {
         var _props$pagination, _props$pagination2;
-
         if (!dragSort && !showIndex) {
           return originNode;
         }
-
         var current = props === null || props === void 0 ? void 0 : (_props$pagination = props.pagination) === null || _props$pagination === void 0 ? void 0 : _props$pagination.current;
         var pageSize = (props === null || props === void 0 ? void 0 : (_props$pagination2 = props.pagination) === null || _props$pagination2 === void 0 ? void 0 : _props$pagination2.pageSize) || 20;
-
         if (current) {
-          index = index + (current - 1) * pageSize;
+          index = index + (current - 1) * pageSize + 1;
+        } else {
+          index = index + 1;
+        }
+        if (record.__index) {
+          index = extractIndex(record.__index);
         }
-
         return /*#__PURE__*/React.createElement("div", {
-          className: classNames(checked ? 'checked' : null, 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                  "]))))
+          className: classNames(checked ? 'checked' : null, css(_templateObject6 || (_templateObject6 = _taggedTemplateLiteral(["\n                    position: relative;\n                    display: flex;\n                    float: left;\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__*/React.createElement("div", {
-          className: classNames(checked ? 'checked' : null, css(_templateObject6 || (_templateObject6 = _taggedTemplateLiteral(["\n                      position: relative;\n                      display: flex;\n                      align-items: center;\n                      justify-content: space-evenly;\n                    "]))))
+          className: classNames(checked ? 'checked' : null, css(_templateObject7 || (_templateObject7 = _taggedTemplateLiteral(["\n                      position: relative;\n                      display: flex;\n                      align-items: center;\n                      justify-content: space-evenly;\n                    "]))))
         }, dragSort && /*#__PURE__*/React.createElement(SortHandle, {
           id: getRowKey(record)
         }), showIndex && /*#__PURE__*/React.createElement(TableIndex, {
           index: index
         })), /*#__PURE__*/React.createElement("div", {
-          className: classNames('nb-origin-node', checked ? 'checked' : null, css(_templateObject7 || (_templateObject7 = _taggedTemplateLiteral(["\n                      position: absolute;\n                      right: 50%;\n                      transform: translateX(50%);\n                      &:not(.checked) {\n                        display: none;\n                      }\n                    "]))))
+          className: classNames('nb-origin-node', checked ? 'checked' : null, css(_templateObject8 || (_templateObject8 = _taggedTemplateLiteral(["\n                      position: absolute;\n                      right: 50%;\n                      transform: translateX(50%);\n                      &:not(.checked) {\n                        display: none;\n                      }\n                    "]))))
         }, originNode));
       }
     }, rowSelection) : undefined
   };
-  var SortableWrapper = useCallback(function (_ref3) {
-    var children = _ref3.children;
+  var SortableWrapper = useCallback(function (_ref4) {
+    var children = _ref4.children;
     return dragSort ? /*#__PURE__*/React.createElement(SortableContext, {
       items: field.value.map(getRowKey),
       children: children
@@ -362,64 +369,46 @@ export var Table = observer(function (props) {
   }, [field, dragSort]);
   var fieldSchema = useFieldSchema();
   var fixedBlock = fieldSchema === null || fieldSchema === void 0 ? void 0 : (_fieldSchema$parent = fieldSchema.parent) === null || _fieldSchema$parent === void 0 ? void 0 : (_fieldSchema$parent$x = _fieldSchema$parent['x-decorator-props']) === null || _fieldSchema$parent$x === void 0 ? void 0 : _fieldSchema$parent$x.fixedBlock;
-
-  var _useState = useState(0),
-      _useState2 = _slicedToArray(_useState, 2),
-      tableHeight = _useState2[0],
-      setTableHeight = _useState2[1];
-
-  var _useState3 = useState(0),
-      _useState4 = _slicedToArray(_useState3, 2),
-      headerAndPaginationHeight = _useState4[0],
-      setHeaderAndPaginationHeight = _useState4[1];
-
+  var _useTableSize = useTableSize(),
+    tableHeight = _useTableSize.height,
+    tableSizeRefCallback = _useTableSize.tableSizeRefCallback;
   var scroll = useMemo(function () {
     return fixedBlock ? {
       x: 'max-content',
-      y: tableHeight - headerAndPaginationHeight
+      y: tableHeight
     } : {
       x: 'max-content'
     };
-  }, [fixedBlock, tableHeight, headerAndPaginationHeight]);
-  var elementRef = useRef();
-
-  var calcTableSize = function calcTableSize() {
-    var _elementRef$current;
-
-    if (!elementRef.current) return;
-    var clientRect = (_elementRef$current = elementRef.current) === null || _elementRef$current === void 0 ? void 0 : _elementRef$current.getBoundingClientRect();
-    setTableHeight(Math.ceil((clientRect === null || clientRect === void 0 ? void 0 : clientRect.height) || 0));
-  };
-
-  useEventListener('resize', calcTableSize);
-
-  var mountedRef = function mountedRef(ref) {
-    elementRef.current = ref;
-    calcTableSize();
-  };
-
+  }, [fixedBlock, tableHeight]);
   return /*#__PURE__*/React.createElement("div", {
-    ref: mountedRef,
-    className: css(_templateObject8 || (_templateObject8 = _taggedTemplateLiteral(["\n        height: 100%;\n        overflow: hidden;\n        .ant-table-wrapper {\n          height: 100%;\n        }\n        .ant-table {\n          overflow-x: auto;\n          overflow-y: hidden;\n        }\n      "])))
+    className: css(_templateObject9 || (_templateObject9 = _taggedTemplateLiteral(["\n        height: 100%;\n        overflow: hidden;\n        .ant-table-wrapper {\n          height: 100%;\n          .ant-spin-nested-loading {\n            height: 100%;\n            .ant-spin-container {\n              height: 100%;\n              display: flex;\n              flex-direction: column;\n            }\n          }\n        }\n        .ant-table {\n          overflow-x: auto;\n          overflow-y: hidden;\n        }\n      "])))
   }, /*#__PURE__*/React.createElement(SortableWrapper, null, /*#__PURE__*/React.createElement(AntdTable, _objectSpread(_objectSpread(_objectSpread({
-    ref: function ref(_ref4) {
-      var _ref4$querySelector, _ref4$querySelector2;
-
-      var headerHeight = (_ref4 === null || _ref4 === void 0 ? void 0 : (_ref4$querySelector = _ref4.querySelector('.ant-table-header')) === null || _ref4$querySelector === void 0 ? void 0 : _ref4$querySelector.getBoundingClientRect().height) || 0;
-      var paginationHeight = (_ref4 === null || _ref4 === void 0 ? void 0 : (_ref4$querySelector2 = _ref4.querySelector('.ant-table-pagination')) === null || _ref4$querySelector2 === void 0 ? void 0 : _ref4$querySelector2.getBoundingClientRect().height) || 0;
-      setHeaderAndPaginationHeight(Math.ceil(headerHeight + paginationHeight + 16));
-    },
-    rowKey: rowKey !== null && rowKey !== void 0 ? rowKey : defaultRowKey
+    ref: tableSizeRefCallback,
+    rowKey: rowKey !== null && rowKey !== void 0 ? rowKey : defaultRowKey,
+    dataSource: field === null || field === void 0 ? void 0 : (_field$value4 = field.value) === null || _field$value4 === void 0 ? void 0 : (_field$value4$slice = _field$value4.slice) === null || _field$value4$slice === void 0 ? void 0 : _field$value4$slice.call(_field$value4)
   }, others), restProps), {}, {
     pagination: paginationProps,
     components: components,
     onChange: function onChange(pagination, filters, sorter, extra) {
       onTableChange === null || onTableChange === void 0 ? void 0 : onTableChange(pagination, filters, sorter, extra);
     },
+    onRow: onRow,
+    rowClassName: function rowClassName(record) {
+      return selectedRow.includes(record[rowKey]) ? highlightRow : '';
+    },
     tableLayout: 'auto',
     scroll: scroll,
     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)
+    expandable: {
+      onExpand: function onExpand(flag, record) {
+        var newKeys = flag ? [].concat(_toConsumableArray(expandedKeys), [record.id]) : expandedKeys.filter(function (i) {
+          return record.id !== i;
+        });
+        setExpandesKeys(newKeys);
+        _onExpand === null || _onExpand === void 0 ? void 0 : _onExpand(flag, record);
+      },
+      expandedRowKeys: expandedKeys
+    }
   }))), field.errors.length > 0 && /*#__PURE__*/React.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) {