@arim-aisdc/public-components 0.0.1

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) na.xu2278@foxmail.com
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -0,0 +1 @@
+#public-components

package/dist/Foo/index.js

@@ -0,0 +1,9 @@
+import "./index.less";
+import { jsx as _jsx } from "react/jsx-runtime";
+var Foo = function Foo(props) {
+  return /*#__PURE__*/_jsx("h4", {
+    className: "title",
+    children: props.title
+  });
+};
+export default Foo;

package/dist/Foo/index.less

@@ -0,0 +1,3 @@
+.title {
+  color: @globalColor;
+}

package/dist/TableMax/TableBody/Row.js

@@ -0,0 +1,231 @@
+function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o; }, _typeof(o); }
+function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+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 _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(r, l) { var t = null == r ? null : "undefined" != typeof Symbol && r[Symbol.iterator] || r["@@iterator"]; if (null != t) { var e, n, i, u, a = [], f = !0, o = !1; try { if (i = (t = t.call(r)).next, 0 === l) { if (Object(t) !== t) return; f = !1; } else for (; !(f = (e = i.call(t)).done) && (a.push(e.value), a.length !== l); f = !0); } catch (r) { o = !0, n = r; } finally { try { if (!f && null != t.return && (u = t.return(), Object(u) !== u)) return; } finally { if (o) throw n; } } return a; } }
+function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
+// import { layoutContext } from '@/layouts';
+import { flexRender } from '@tanstack/react-table';
+import { useEffect, useRef } from 'react';
+import { useDrag, useDrop } from 'react-dnd';
+import { getEmptyImage } from 'react-dnd-html5-backend';
+import { EditableCell } from "../components/ColumnEdit";
+import { getPinningStyle } from "../TableHeader/utils";
+import "./index.less";
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Fragment as _Fragment } from "react/jsx-runtime";
+import { jsxs as _jsxs } from "react/jsx-runtime";
+var Row = function Row(_ref) {
+  var _row, _row2;
+  var table = _ref.table,
+    tableId = _ref.tableId,
+    row = _ref.row,
+    rowSelectedId = _ref.rowSelectedId,
+    setRowSelectedId = _ref.setRowSelectedId,
+    selectedRowChange = _ref.selectedRowChange,
+    onSelectChange = _ref.onSelectChange,
+    canSelection = _ref.canSelection,
+    rowSelectionChange = _ref.rowSelectionChange,
+    reorderRow = _ref.reorderRow,
+    tableContainerWidth = _ref.tableContainerWidth,
+    canRowDrag = _ref.canRowDrag,
+    rowClassName = _ref.rowClassName,
+    cellClassName = _ref.cellClassName,
+    rowStyle = _ref.rowStyle,
+    getCellProps = _ref.getCellProps,
+    editting = _ref.editting,
+    edittingRowStatus = _ref.edittingRowStatus,
+    renderSubComponent = _ref.renderSubComponent,
+    selectedRowDragging = _ref.selectedRowDragging,
+    setSelectedRowDragging = _ref.setSelectedRowDragging,
+    onRowMouseEnter = _ref.onRowMouseEnter,
+    onRowMouseLeave = _ref.onRowMouseLeave,
+    onRowMouseClick = _ref.onRowMouseClick,
+    onRowMouseDoubleClick = _ref.onRowMouseDoubleClick,
+    rowHeight = _ref.rowHeight,
+    disableDragRowIds = _ref.disableDragRowIds,
+    selectRowWhenClick = _ref.selectRowWhenClick,
+    hasVerticalScrollBar = _ref.hasVerticalScrollBar;
+  // const { theme } = useContext(layoutContext);
+  var theme = 'light';
+  var timerRef = useRef();
+  var _useDrop = useDrop({
+      accept: 'TABLE_ROW',
+      drop: function drop(formDatas, monitor) {
+        console.log('drop================start-', monitor);
+        return reorderRow === null || reorderRow === void 0 ? void 0 : reorderRow(formDatas, {
+          hoverRow: row,
+          targetTableId: tableId
+        });
+        // return reorderRow?.(draggedRow, { ...row, tableId });
+      }
+    }),
+    _useDrop2 = _slicedToArray(_useDrop, 2),
+    dropRef = _useDrop2[1];
+  // const [centerSubRowHeight, setCenterSubRowHeight] = useState();
+  // const centerSubRowRef: any = useRef(null);
+
+  var _useDrag = useDrag({
+      collect: function collect(monitor) {
+        return {
+          isDragging: monitor.isDragging()
+        };
+      },
+      item: function item() {
+        var _table$getSelectedRow;
+        var selectedRows = ((_table$getSelectedRow = table.getSelectedRowModel()) === null || _table$getSelectedRow === void 0 ? void 0 : _table$getSelectedRow.rows) || [];
+        var selectedRowsNumber = (selectedRows === null || selectedRows === void 0 ? void 0 : selectedRows.length) || 0;
+        var selectedRowsIndexList = selectedRows === null || selectedRows === void 0 ? void 0 : selectedRows.map(function (row) {
+          return row.index;
+        });
+        var isMultipleDrag = selectedRowsNumber > 1 && selectedRowsIndexList.includes(row.index);
+        return {
+          draggedRow: row,
+          isMultipleDrag: isMultipleDrag,
+          draggedRows: isMultipleDrag ? selectedRows : [row],
+          sourceTableId: tableId
+        };
+
+        // return {
+        //   ...row,
+        //   isMultipleDrag,
+        //   draggedRows: isMultipleDrag ? selectedRows : [row],
+        //   sourceTableId: tableId,
+        // };
+      },
+
+      type: 'TABLE_ROW'
+    }),
+    _useDrag2 = _slicedToArray(_useDrag, 3),
+    isDragging = _useDrag2[0].isDragging,
+    dragRef = _useDrag2[1],
+    preview = _useDrag2[2];
+  useEffect(function () {
+    // 隐藏拖拽dom
+    canRowDrag && preview(getEmptyImage(), {
+      captureDraggingState: true
+    });
+  }, [canRowDrag]);
+
+  // useEffect(() => {
+  //   setCenterSubRowHeight(centerSubRowRef?.current?.clientHeight);
+  //   console.log('centerSubRowRef?.current?.clientHeight=====', position, row, centerSubRowRef?.current?.clientHeight)
+  // }, [centerSubRowRef?.current?.clientHeight, position]);
+
+  useEffect(function () {
+    setSelectedRowDragging && row.getIsSelected() && setSelectedRowDragging(isDragging);
+  }, [isDragging, row.getIsSelected()]);
+  var rowClickHandler = function rowClickHandler(evt) {
+    // 触发单击事件
+    onRowMouseClick === null || onRowMouseClick === void 0 || onRowMouseClick(row);
+    if (!selectRowWhenClick) {
+      return;
+    }
+    if (canSelection) {
+      var selectionConfig = _objectSpread(_objectSpread({}, table.getState().rowSelection), {}, _defineProperty({}, row.id, !row.getIsSelected()));
+      row.getCanSelect() && (table === null || table === void 0 ? void 0 : table.setRowSelection(selectionConfig));
+      onSelectChange === null || onSelectChange === void 0 || onSelectChange(row, row === null || row === void 0 ? void 0 : row.original, row.getCanSelect() ? !row.getIsSelected() : false, evt);
+    } else {
+      setRowSelectedId === null || setRowSelectedId === void 0 || setRowSelectedId(row === null || row === void 0 ? void 0 : row.id);
+      selectedRowChange === null || selectedRowChange === void 0 || selectedRowChange(row);
+      onSelectChange === null || onSelectChange === void 0 || onSelectChange(row, row === null || row === void 0 ? void 0 : row.original, true, evt);
+    }
+  };
+  var rowClickOrDoubleClick = function rowClickOrDoubleClick(e) {
+    // console.log('rowClickOrDoubleClick');
+    if (editting) return;
+    if (onRowMouseDoubleClick) {
+      // 监听了双击事件
+      if (!timerRef.current) {
+        timerRef.current = setTimeout(function () {
+          rowClickHandler(e);
+          clearTimeout(timerRef.current);
+          timerRef.current = undefined;
+        }, 300);
+      } else {
+        clearTimeout(timerRef.current);
+        timerRef.current = undefined;
+        onRowMouseDoubleClick(row);
+      }
+    } else {
+      // 没有监听双击事件，直接触发单击逻辑
+      rowClickHandler(e);
+    }
+  };
+  var rowMouseEnter = function rowMouseEnter() {
+    onRowMouseEnter === null || onRowMouseEnter === void 0 || onRowMouseEnter(row);
+  };
+  var rowMouseLeave = function rowMouseLeave() {
+    onRowMouseLeave === null || onRowMouseLeave === void 0 || onRowMouseLeave(row);
+  };
+  return /*#__PURE__*/_jsxs(_Fragment, {
+    children: [/*#__PURE__*/_jsx("tr", {
+      // ref={canRowDrag && !editting ? dropRef : null}
+      ref: function ref(node) {
+        dropRef(node && !editting ? node : null);
+        dragRef(node && canRowDrag && !editting && !disableDragRowIds.includes(row.id) ? node : null);
+      },
+      style: _objectSpread({
+        opacity: isDragging || selectedRowDragging && row.getIsSelected() ? 0.5 : 1,
+        cursor: canRowDrag && !editting && !disableDragRowIds.includes(row.id) ? 'move' : 'auto'
+      }, rowStyle),
+      onClick: rowClickOrDoubleClick,
+      onMouseEnter: rowMouseEnter,
+      onMouseLeave: rowMouseLeave,
+      className: "\n      'tbody-tr' ".concat(String(row.id) === String(rowSelectedId) || row.getIsSelected() ? "tbody-tr-selected tbody-tr-selected" : '', " ").concat((rowClassName === null || rowClassName === void 0 ? void 0 : rowClassName(row).map(function (item) {
+        return "".concat(item);
+      }).join(' ')) || ''),
+      children: (_row = row["getVisibleCells"]) === null || _row === void 0 ? void 0 : _row.call(row).map(function (cell, idx) {
+        var _cell$column$columnDe = cell.column.columnDef,
+          editable = _cell$column$columnDe.editable,
+          required = _cell$column$columnDe.required,
+          accessorKey = _cell$column$columnDe.accessorKey,
+          header = _cell$column$columnDe.header,
+          columnClassName = _cell$column$columnDe.columnClassName;
+        var editStatus = edittingRowStatus && editable;
+        return /*#__PURE__*/_jsx("td", _objectSpread(_objectSpread({
+          className: "".concat(editStatus ? 'tbody-tr-td-editting' : '', " tbody-tr-td ").concat(columnClassName ? columnClassName.join(' ') : '', " ").concat((cellClassName === null || cellClassName === void 0 ? void 0 : cellClassName(cell).map(function (item) {
+            return "".concat(item, "-").concat(theme);
+          })) || '', " tbody-tr-td"),
+          style: _objectSpread({
+            height: rowHeight - 1
+          }, getPinningStyle(cell, table, false))
+        }, getCellProps === null || getCellProps === void 0 ? void 0 : getCellProps(cell.getContext())), {}, {
+          children: EditableCell(_objectSpread(_objectSpread({}, cell.column.columnDef), {}, {
+            editing: editStatus,
+            dataIndex: accessorKey,
+            title: header,
+            children: flexRender(cell.column.columnDef.cell, cell.getContext())
+          }))
+        }), cell.id);
+      })
+    }), row.getIsExpanded() && /*#__PURE__*/_jsx("tr", {
+      className: 'tbody-tr-subrow',
+      children: /*#__PURE__*/_jsx("td", {
+        colSpan: (_row2 = row["getVisibleCells"]) === null || _row2 === void 0 ? void 0 : _row2.call(row).length,
+        style: {
+          padding: 0
+        },
+        children: tableContainerWidth && /*#__PURE__*/_jsx("div", {
+          id: "".concat(tableId, "_expand-table"),
+          className: 'subRowWrapper'
+          // 减去10，避免被父表滚动条覆盖
+          ,
+          style: {
+            width: "".concat(tableContainerWidth - (hasVerticalScrollBar ? 10 : 0), "px")
+          },
+          children: renderSubComponent && renderSubComponent({
+            row: row
+          })
+        })
+      })
+    })]
+  });
+};
+export default Row;

package/dist/TableMax/TableBody/index.js

@@ -0,0 +1,249 @@
+import { Spin } from 'antd';
+import { CustomDragLayer } from "../components/CustomDragerLayer";
+import "./index.less";
+import Row from "./Row";
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Fragment as _Fragment } from "react/jsx-runtime";
+import { jsxs as _jsxs } from "react/jsx-runtime";
+var TableBody = function TableBody(_ref) {
+  var _headerGroups;
+  var table = _ref.table,
+    tableId = _ref.tableId,
+    reorderRow = _ref.reorderRow,
+    rowSelectedId = _ref.rowSelectedId,
+    setRowSelectedId = _ref.setRowSelectedId,
+    selectedRowChange = _ref.selectedRowChange,
+    onSelectChange = _ref.onSelectChange,
+    canFilter = _ref.canFilter,
+    canSelection = _ref.canSelection,
+    rowSelectionChange = _ref.rowSelectionChange,
+    scroll = _ref.scroll,
+    setScroll = _ref.setScroll,
+    tableBodyHeight = _ref.tableBodyHeight,
+    tableHeadHeight = _ref.tableHeadHeight,
+    setTableHeadHeight = _ref.setTableHeadHeight,
+    bodyContentHeight = _ref.bodyContentHeight,
+    setBodyContentHeight = _ref.setBodyContentHeight,
+    tableContainerWidth = _ref.tableContainerWidth,
+    selectedRowDragging = _ref.selectedRowDragging,
+    setSelectedRowDragging = _ref.setSelectedRowDragging,
+    canRowDrag = _ref.canRowDrag,
+    rowKey = _ref.rowKey,
+    loading = _ref.loading,
+    rowClassName = _ref.rowClassName,
+    cellClassName = _ref.cellClassName,
+    rowStyle = _ref.rowStyle,
+    getCellProps = _ref.getCellProps,
+    rowHeight = _ref.rowHeight,
+    editting = _ref.editting,
+    selectEditKey = _ref.selectEditKey,
+    renderSubComponent = _ref.renderSubComponent,
+    isAllRowExpanded = _ref.isAllRowExpanded,
+    onRowMouseEnter = _ref.onRowMouseEnter,
+    onRowMouseLeave = _ref.onRowMouseLeave,
+    onRowMouseClick = _ref.onRowMouseClick,
+    onRowMouseDoubleClick = _ref.onRowMouseDoubleClick,
+    enableFilters = _ref.enableFilters,
+    enableVirtualList = _ref.enableVirtualList,
+    disableDragRowIds = _ref.disableDragRowIds,
+    selectRowWhenClick = _ref.selectRowWhenClick,
+    hasVerticalScrollBar = _ref.hasVerticalScrollBar,
+    datas = _ref.datas,
+    emptyDataHeight = _ref.emptyDataHeight;
+  // const tbodyRef = useRef<any>(null);
+  // const theadRef = useRef<any>(null);
+  // const { theme } = useContext(layoutContext);
+  var _dark = 'dark',
+    theme = _dark.theme;
+  var headerGroups = table.getHeaderGroups();
+
+  // const { rows } = table.getRowModel();
+
+  // useEffect(() => {
+  //   if (tbodyRef.current) {
+  //     console.log('tbodyRef.current.scrollHeight', tbodyRef.current.scrollHeight)
+  //     console.log('tbodyRef.current.scrollTop', tbodyRef.current.scrollTop, scroll)
+  //     tbodyRef.current.scrollTop = scroll;
+  //   }
+  //   let ele = document.getElementById('tbody')
+  //   if (ele) {
+  //     console.log('4444444', ele, ele.scrollTop)
+  //     ele.scrollTop = scroll
+  //   }
+
+  // }, [scroll]);
+
+  // useLayoutEffect(() => {
+  //   if (theadRef.current) {
+  //     const theadHeight = theadRef.current.clientHeight;
+  //     theadHeight !== tableHeadHeight ? setTableHeadHeight(theadHeight) : null;
+  //   }
+  // }, [theadRef?.current, theadRef?.current?.clientHeight, enableFilters]);
+
+  // const scrollDataRef = useRef<any>({
+  //   scroll,
+  //   bodyContentHeight,
+  //   tableBodyHeight,
+  // });
+  // useLayoutEffect(() => {
+  //   scrollDataRef.current = {
+  //     scroll,
+  //     bodyContentHeight,
+  //     tableBodyHeight,
+  //   };
+  // }, [scroll, bodyContentHeight, tableBodyHeight]);
+  // // const handleWheel = (event: WheelEvent) => {
+  // //   const {
+  // //     scroll: refDataScroll,
+  // //     bodyContentHeight: refDataBodyContentHeight,
+  // //     tableBodyHeight: refDataTableBodyHeight,
+  // //   } = scrollDataRef.current;
+
+  // //   let newScroll = refDataScroll + event.deltaY || 0;
+  // //   const maxScroll = refDataBodyContentHeight - refDataTableBodyHeight;
+  // //   if (newScroll < 0) {
+  // //     newScroll = 0;
+  // //   } else if (newScroll > maxScroll) {
+  // //     newScroll = maxScroll;
+  // //   }
+  // //   setScroll?.(newScroll);
+
+  // //   if (!((refDataScroll == 0 && newScroll == 0) || (refDataScroll === maxScroll && newScroll === maxScroll))) {
+  // //     event.stopPropagation();
+  // //     event.preventDefault();
+  // //   }
+  // // };
+
+  // // table-body 监听滚轮事件
+  // // useEffect(() => {
+  // //   tbodyRef.current?.addEventListener('wheel', handleWheel, { passive: false });
+  // //   return () => tbodyRef.current?.removeEventListener('wheel', handleWheel, { passive: false });
+  // // }, [tbodyRef.current]);
+
+  // // 是否展开所有行
+  // useEffect(() => {
+  //   isAllRowExpanded && table?.toggleAllRowsExpanded();
+  // }, [isAllRowExpanded]);
+
+  // // 虚拟列表
+  // const rowVirtualizer = useVirtualizer({
+  //   count: rows.length, // 数据总条数
+  //   getScrollElement: () => tbodyRef.current, // 外层滚动的dom元素
+  //   estimateSize: () => rowHeight, // 每一行的预估高度值
+  //   overscan: enableVirtualList ? 5 : 9999, // 上下额外展示的数据量
+  // });
+
+  // const rowVirtualizerTotalHeight = rowVirtualizer.getTotalSize();
+
+  // // 展开状态变化之后重新设定table内容高度（不能作用于left\right-table)
+  // useLayoutEffect(() => {
+  //   // if (position !== 'Left' && position !== 'Right') {
+  //   rowVirtualizerTotalHeight && setBodyContentHeight(rowVirtualizerTotalHeight);
+  //   // }
+  // }, [rowVirtualizerTotalHeight]);
+
+  // console.log('object', rowVirtualizer.getVirtualItems(), rows);
+
+  var EmptyContent = function EmptyContent() {
+    return /*#__PURE__*/_jsx("tr", {
+      className: 'empty-container',
+      style: {
+        width: table.getTotalSize()
+      },
+      children: /*#__PURE__*/_jsx("td", {
+        className: 'empty-wapper',
+        style: {
+          width: "".concat(tableContainerWidth - (hasVerticalScrollBar ? 10 : 0), "px"),
+          height: emptyDataHeight
+        },
+        children: loading ? /*#__PURE__*/_jsx(Spin, {}) : /*#__PURE__*/_jsxs(_Fragment, {
+          children: [/*#__PURE__*/_jsx("img", {
+            className: 'empty-img',
+            src: "/images/data-empty-".concat(theme, ".png"),
+            height: "60"
+          }), /*#__PURE__*/_jsx("span", {
+            className: 'empty-text',
+            children: "\u6682\u65E0\u6570\u636E"
+          })]
+        })
+      })
+    });
+  };
+  var TBodyContent = function TBodyContent() {
+    return table.getRowModel().rows.map(function (row) {
+      var edittingRowStatus = row.id == selectEditKey && editting;
+      return /*#__PURE__*/_jsx(Row, {
+        table: table,
+        tableId: tableId,
+        tableContainerWidth: tableContainerWidth,
+        row: row,
+        reorderRow: reorderRow,
+        rowSelectedId: rowSelectedId,
+        setRowSelectedId: setRowSelectedId,
+        selectedRowChange: selectedRowChange,
+        onSelectChange: onSelectChange,
+        canSelection: canSelection,
+        selectedRowDragging: selectedRowDragging,
+        setSelectedRowDragging: setSelectedRowDragging,
+        rowSelectionChange: rowSelectionChange,
+        canRowDrag: canRowDrag,
+        rowKey: rowKey,
+        rowClassName: rowClassName,
+        cellClassName: cellClassName,
+        rowStyle: rowStyle,
+        getCellProps: getCellProps,
+        editting: editting,
+        edittingRowStatus: edittingRowStatus,
+        renderSubComponent: renderSubComponent,
+        onRowMouseEnter: onRowMouseEnter,
+        onRowMouseLeave: onRowMouseLeave,
+        onRowMouseClick: onRowMouseClick,
+        onRowMouseDoubleClick: onRowMouseDoubleClick,
+        rowHeight: rowHeight,
+        disableDragRowIds: disableDragRowIds,
+        selectRowWhenClick: selectRowWhenClick,
+        hasVerticalScrollBar: hasVerticalScrollBar
+      }, row.id);
+    });
+  };
+  var tbodyRender = function tbodyRender() {
+    if (!loading && datas.length !== 0) {
+      return TBodyContent();
+    }
+    return EmptyContent();
+  };
+  return /*#__PURE__*/_jsxs("div", {
+    className: 'table-tbody',
+    style: {
+      height: "".concat(tableBodyHeight, "px"),
+      width: table.getTotalSize()
+    },
+    children: [/*#__PURE__*/_jsx("div", {
+      children: canRowDrag && !editting && /*#__PURE__*/_jsx(CustomDragLayer, {
+        getCellProps: getCellProps,
+        rowClassName: rowClassName,
+        cellClassName: cellClassName,
+        rowStyle: rowStyle,
+        theme: theme,
+        rowSelectedId: rowSelectedId,
+        table: table
+      })
+    }), /*#__PURE__*/_jsxs("table", {
+      style: {
+        width: table.getTotalSize()
+      },
+      children: [/*#__PURE__*/_jsx("colgroup", {
+        children: headerGroups === null || headerGroups === void 0 || (_headerGroups = headerGroups[headerGroups.length - 1]) === null || _headerGroups === void 0 || (_headerGroups = _headerGroups.headers) === null || _headerGroups === void 0 ? void 0 : _headerGroups.map(function (header) {
+          return /*#__PURE__*/_jsx("col", {
+            style: {
+              width: header.getSize() || 80
+            }
+          }, header.id);
+        })
+      }), /*#__PURE__*/_jsx("tbody", {
+        children: tbodyRender()
+      })]
+    })]
+  });
+};
+export default TableBody;

package/dist/TableMax/TableBody/index.less

@@ -0,0 +1,141 @@
+@globalColor0: #f5f6f7; // 文字颜色
+@globalColor1: #05081a; // 文字颜色
+@globalColor2: #5e6175;
+@globalColor3: #838695;
+@globalColor4: #dadbdf;
+@globalColor5: #ececee; // 网格线色
+@globalColor6: #f5f6f7;
+@globalColor7: #ffffff; // 背景色
+@globalColor8: #f5f6f7; // 背景衬托色
+@globalColor9: #f7f7f9; // 网格遮罩色（passed）
+@globalColor_18: #fdfdfe; // 网格遮罩色
+@globalColor_10: #f5f6f7; // 网格遮罩色
+@globalColor_11: #ececee; //
+@globalColor_12: #838695; // 铁包运行左侧菜单线
+@globalColor_13: #dadbdf; // 甘特图网格线颜色
+@globalColor_14: #dadbdf; // 表头背景色
+@globalColor_15: #C1C2CA; // 表格头线对应色
+@globalColor_16: #F5F5F6; // 内嵌卡片背景
+@globalColor_17: #C1C2CA; // 时间轴和工位栏颜色
+
+@tableColor1: #212121; // 表格字体颜色
+@tableColor2: rgba(94, 97, 117, 0.4); // 表格边框颜色
+@tableColor3: #DADBDFFF; // 表格边框颜色
+@tableColor4: #DADBDF7F; // 表格筛选区时间选择框分割线颜色
+@tableColor5: #ffffff; // 表格列设置区拖拽图标颜色
+@tableColor6: #FA541CFF; // 表格列设置区列显隐图标颜色
+@tableColor7: #1A1D2EFF; // 表格列设置区列表元素边框颜色
+@scrollThumb: rgba(255, 255, 255, 0.2);
+@scrollThumbHover: rgba(255, 255, 255, 0.3);
+@sliderRightBorder: #3e3b3b;
+// @selectTableRow: var(--select-table-row, rgb(245 246 247 / 15%));
+@selectTableRow: #d0e37b;
+@globalColor_table-line: #f0f0f0; // table行分隔线颜色
+
+table {
+  table-layout: fixed;
+
+  td {
+    border: 0;
+  }
+}
+
+.tbody {
+  background-color: @globalColor0;
+}
+
+
+.tbody-tr,
+.tbody-tr-selected {
+  // display: flex;
+  transition: left, top;
+  transition-duration: 0.6s;
+  background-color: @globalColor0;
+  border-bottom: 1px solid @tableColor2;
+}
+
+.tbody-tr-td-editting {
+  // height: auto !important;
+  // padding: 8px !important;
+  // display: flex !important;
+  // align-items: center;
+}
+
+.tbody-tr-td,
+.tbody-tr-td-drag,
+.tbody-tr-selected>.tbody-tr-td,
+.tbody-tr-selected>.tbody-tr-td-drag {
+  background-color: @globalColor0;
+  height: 39px;
+  line-height: 39px;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  padding: 0;
+}
+
+.tbody-tr-selected>.tbody-tr-td,
+.tbody-tr-selected>.tbody-tr-td-drag {
+  background: @selectTableRow;
+}
+
+.tbody-tr-td-drag:hover {
+  cursor: move;
+}
+
+.tbody-tr-subrow {
+  background: @globalColor_14;
+
+  .subRowWrapper {
+    padding-left: 40px;
+    position: sticky;
+    left: 0px;
+    overflow: hidden;
+  }
+}
+
+// .tbody-tr-subrow-light {
+//   border-bottom: 1px solid var(--tableColor2, rgba(94, 97, 117, 0.4));
+//   background: #fbfbfb;
+// }
+
+// .tbody-tr-subrow-dark {
+//   border-bottom: 1px solid #848695;
+//   background: rgba(94, 97, 117, 0.4);
+// }
+
+.table-loading {
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  width: 100%;
+  height: 100%;
+}
+
+.empty-container {
+  width: 100%;
+  height: 100%;
+
+  .empty-wapper {
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+    position: sticky;
+    left: 0;
+
+    .empty-content {
+      display: flex;
+      flex-direction: column;
+      justify-content: center;
+      align-items: center;
+      width: 100%;
+    }
+  }
+
+  .empty-text {
+    color: @globalColor2;
+    font-size: 12px;
+  }
+}