@qsxy/element-plus-react 1.0.0-next.2 → 1.0.0-next.21

package/dist/Table/TableBody.js

@@ -1,210 +1,275 @@
-var __create = Object.create;
-var __defProp = Object.defineProperty;
-var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
-var __getOwnPropNames = Object.getOwnPropertyNames;
-var __getProtoOf = Object.getPrototypeOf;
-var __hasOwnProp = Object.prototype.hasOwnProperty;
-var __export = (target, all) => {
-  for (var name in all)
-    __defProp(target, name, { get: all[name], enumerable: true });
-};
-var __copyProps = (to, from, except, desc) => {
-  if (from && typeof from === "object" || typeof from === "function") {
-    for (let key of __getOwnPropNames(from))
-      if (!__hasOwnProp.call(to, key) && key !== except)
-        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
-  }
-  return to;
-};
-var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
-  // If the importer is in node compatibility mode or this is not an ESM
-  // file that has been converted to a CommonJS file using a Babel-
-  // compatible transform (i.e. "__esModule" has not been set), then set
-  // "default" to the CommonJS "module.exports" for node compatibility.
-  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
-  mod
-));
-var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
-
-// src/Table/TableBody.tsx
-var TableBody_exports = {};
-__export(TableBody_exports, {
-  default: () => TableBody_default
-});
-module.exports = __toCommonJS(TableBody_exports);
-var import_classnames = __toESM(require("classnames"));
-var import_isEqual = __toESM(require("lodash/isEqual"));
-var import_isObject = __toESM(require("lodash/isObject"));
-var import_some = __toESM(require("lodash/some"));
-var import_react = __toESM(require("react"));
-var import_hooks = require("../hooks");
-var import_TableCell = __toESM(require("./TableCell"));
-var import_TableContext = require("./TableContext");
-var import_util = require("./util");
-var TableBody = () => {
-  const {
-    data,
-    /* setData, */
-    props,
-    tableId,
-    flattenColumns,
-    fixedLeftColumns,
-    fixedRightColumns
-  } = (0, import_react.useContext)(import_TableContext.TableContext);
-  const { state, oldActiveRow, treeProps } = (0, import_react.useContext)(import_TableContext.TableBodyContext);
-  const { stripe, rowClassName, rowStyle, onCurrentChange, highlightCurrentRow, currentRowKey, rowKey, onDragChange, spanMethod } = props;
-  const { e, em, bm, is } = (0, import_hooks.useClassNames)("table");
-  const tbodyRef = (0, import_react.useRef)(null);
-  const rowRef = (0, import_react.useRef)({});
-  const mergeAreaRef = (0, import_react.useRef)([]);
-  (0, import_react.useEffect)(() => {
-    if (currentRowKey && state.currentRow && oldActiveRow.current ? (0, import_util.getRowIdentity)(state.currentRow, currentRowKey + "") === (0, import_util.getRowIdentity)(oldActiveRow.current, currentRowKey + "") : !(0, import_isEqual.default)(state.currentRow, oldActiveRow.current)) {
-      onCurrentChange == null ? void 0 : onCurrentChange(state.currentRow, oldActiveRow.current);
+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); }
+var _templateObject;
+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(t) { var i = _toPrimitive(t, "string"); return "symbol" == _typeof(i) ? i : String(i); }
+function _toPrimitive(t, r) { if ("object" != _typeof(t) || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != _typeof(i)) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
+function _taggedTemplateLiteral(strings, raw) { if (!raw) { raw = strings.slice(0); } return Object.freeze(Object.defineProperties(strings, { raw: { value: Object.freeze(raw) } })); }
+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 _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 _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 _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; }
+import classNames from 'classnames';
+import isEqual from 'lodash/isEqual';
+import isObject from 'lodash/isObject';
+import some from 'lodash/some';
+import React, { useCallback, useContext, useEffect, useMemo, useRef } from 'react';
+// import { SortableContainer, SortableElement, arrayMove } from 'react-sortable-hoc';
+import { useClassNames } from "../hooks";
+import TableCell from "./TableCell";
+import { TableBodyContext, TableContext } from "./TableContext";
+import { getRowIdentity } from "./util";
+var TableBody = function TableBody() {
+  var _useContext = useContext(TableContext),
+    data = _useContext.data,
+    props = _useContext.props,
+    tableId = _useContext.tableId,
+    flattenColumns = _useContext.flattenColumns,
+    fixedLeftColumns = _useContext.fixedLeftColumns,
+    fixedRightColumns = _useContext.fixedRightColumns;
+  var _useContext2 = useContext(TableBodyContext),
+    state = _useContext2.state,
+    oldActiveRow = _useContext2.oldActiveRow,
+    treeProps = _useContext2.treeProps;
+  var stripe = props.stripe,
+    rowClassName = props.rowClassName,
+    rowStyle = props.rowStyle,
+    onCurrentChange = props.onCurrentChange,
+    highlightCurrentRow = props.highlightCurrentRow,
+    currentRowKey = props.currentRowKey,
+    rowKey = props.rowKey,
+    onDragChange = props.onDragChange,
+    spanMethod = props.spanMethod;
+  var _useClassNames = useClassNames('table'),
+    e = _useClassNames.e,
+    em = _useClassNames.em,
+    bm = _useClassNames.bm,
+    is = _useClassNames.is;
+  var tbodyRef = useRef(null);
+  var rowRef = useRef({});
+  var mergeAreaRef = useRef([]);
+  useEffect(function () {
+    if (currentRowKey && state.currentRow && oldActiveRow.current ? getRowIdentity(state.currentRow, currentRowKey + '') === getRowIdentity(oldActiveRow.current, currentRowKey + '') : !isEqual(state.currentRow, oldActiveRow.current)) {
+      onCurrentChange === null || onCurrentChange === void 0 || onCurrentChange(state.currentRow, oldActiveRow.current);
     }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [state.currentRow, onCurrentChange]);
-  (0, import_react.useEffect)(() => {
+  useEffect(function () {
     mergeAreaRef.current = [];
   }, [data]);
-  const middleColumns = (0, import_react.useMemo)(
-    () => flattenColumns.filter((item) => !(0, import_some.default)([...fixedLeftColumns, ...fixedRightColumns], { id: item.id })),
-    [fixedLeftColumns, fixedRightColumns, flattenColumns]
-  );
-  const isTreeTalbe = (0, import_react.useMemo)(
-    () => props.data.some((item) => treeProps.children in item || treeProps.hasChildren in item),
-    [props.data, treeProps.children, treeProps.hasChildren]
-  );
-  const getSpans = (0, import_react.useCallback)(
-    (row, rowIndex, column, columnIndex) => {
-      if (spanMethod) {
-        const result = spanMethod == null ? void 0 : spanMethod({ row, column, rowIndex, columnIndex });
-        if (result instanceof Array && result.length > 0) {
-          return { rowSpan: result[0] || 1, colSpan: (result == null ? void 0 : result[1]) || 1 };
-        } else if ((0, import_isObject.default)(result)) {
-          return { rowSpan: result["rowspan"] || 1, colSpan: result["colspan"] || 1 };
-        }
-      }
-      return { rowSpan: row.rowSpan || 1, colSpan: row.colSpan || 1 };
-    },
-    [spanMethod]
-  );
-  const isMerge = (0, import_react.useCallback)(
-    (row, rowIndex, column, columnIndex) => {
-      let display = true;
-      const { rowSpan, colSpan } = getSpans(row, rowIndex, column, columnIndex);
-      if (rowSpan > 1 || colSpan > 1) {
-        mergeAreaRef.current.push([rowIndex, columnIndex, rowIndex + rowSpan - 1, columnIndex + colSpan - 1]);
+  var middleColumns = useMemo(function () {
+    return flattenColumns.filter(function (item) {
+      return !some([].concat(_toConsumableArray(fixedLeftColumns), _toConsumableArray(fixedRightColumns)), {
+        id: item.id
+      });
+    });
+  }, [fixedLeftColumns, fixedRightColumns, flattenColumns]);
+  var isTreeTalbe = useMemo(function () {
+    return props.data.some(function (item) {
+      return treeProps.children in item || treeProps.hasChildren in item;
+    });
+  }, [props.data, treeProps.children, treeProps.hasChildren]);
+
+  // useEffect(() => {
+  //     if (rowKey && isTreeTalbe && !defaultExpandAll) {
+  //         hiddenRows.current = {};
+  //         data.forEach(item => {
+  //             if (item?.level > 0) {
+  //                 hiddenRows.current[getRowIdentity(item, rowKey)] = true;
+  //             }
+  //         });
+  //     }
+  //     // eslint-disable-next-line react-hooks/exhaustive-deps
+  // }, [data]);
+
+  /** 获取合并单元格元数据 */
+  var getSpans = useCallback(function (row, rowIndex, column, columnIndex) {
+    if (spanMethod) {
+      var result = spanMethod === null || spanMethod === void 0 ? void 0 : spanMethod({
+        row: row,
+        column: column,
+        rowIndex: rowIndex,
+        columnIndex: columnIndex
+      });
+      if (result instanceof Array && result.length > 0) {
+        return {
+          rowSpan: result[0] || 1,
+          colSpan: (result === null || result === void 0 ? void 0 : result[1]) || 1
+        };
+      } else if (isObject(result)) {
+        return {
+          rowSpan: result['rowspan'] || 1,
+          colSpan: result['colspan'] || 1
+        };
       }
-      mergeAreaRef.current.forEach((item) => {
-        if (rowIndex >= item[0] && rowIndex <= item[2] && columnIndex >= item[1] && columnIndex <= item[3]) {
-          if (rowIndex === item[0] && columnIndex === item[1]) {
-            display = true;
-          } else {
-            display = false;
-          }
+    }
+    return {
+      rowSpan: row.rowSpan || 1,
+      colSpan: row.colSpan || 1
+    };
+  }, [spanMethod]);
+
+  /** 是否在合并单元格范围内 */
+  var isMerge = useCallback(function (row, rowIndex, column, columnIndex) {
+    var display = true;
+    var _getSpans = getSpans(row, rowIndex, column, columnIndex),
+      rowSpan = _getSpans.rowSpan,
+      colSpan = _getSpans.colSpan;
+    if (rowSpan > 1 || colSpan > 1) {
+      mergeAreaRef.current.push([rowIndex, columnIndex, rowIndex + rowSpan - 1, columnIndex + colSpan - 1]);
+    }
+    mergeAreaRef.current.forEach(function (item) {
+      if (rowIndex >= item[0] && rowIndex <= item[2] && columnIndex >= item[1] && columnIndex <= item[3]) {
+        if (rowIndex === item[0] && columnIndex === item[1]) {
+          display = true;
+        } else {
+          display = false;
         }
-      });
-      return { rowSpan, colSpan, display };
-    },
-    [getSpans]
-  );
-  const renderTr = (0, import_react.useCallback)(
-    (row, rowIndex) => {
-      let columnIndex = -1;
-      return /* @__PURE__ */ import_react.default.createElement(
-        "tr",
-        {
-          ref: (ref) => rowRef.current[rowIndex] = ref,
-          className: (0, import_classnames.default)(
-            e`row`,
-            { [em("row", "striped")]: stripe && rowIndex % 2 === 1, "current-row": highlightCurrentRow && (0, import_isEqual.default)(row, state.currentRow) },
-            typeof rowClassName === "string" ? rowClassName : rowClassName == null ? void 0 : rowClassName({ row, rowIndex }),
-            { [em("row", `level-${row.level ?? 0}`)]: row.level > 0 || row.level === 0 && (row[treeProps.children] || row[treeProps.hasChildren]) }
-          ),
-          style: {
-            display: rowKey && isTreeTalbe && !row.display ? "none" : "",
-            ...typeof rowStyle === "function" ? rowStyle == null ? void 0 : rowStyle({ row, rowIndex }) : rowStyle
-          },
-          key: `${tableId}_${rowIndex}`
+      }
+    });
+    return {
+      rowSpan: rowSpan,
+      colSpan: colSpan,
+      display: display
+    };
+  }, [getSpans]);
+  var renderTr = useCallback(function (row, rowIndex) {
+    var _row$level;
+    var columnIndex = -1;
+    return /*#__PURE__*/React.createElement("tr", {
+      ref: function ref(_ref) {
+        return rowRef.current[rowIndex] = _ref;
+      },
+      className: classNames(e(_templateObject || (_templateObject = _taggedTemplateLiteral(["row"]))), _defineProperty(_defineProperty({}, em('row', 'striped'), stripe && rowIndex % 2 === 1), 'current-row', highlightCurrentRow && isEqual(row, state.currentRow)), typeof rowClassName === 'string' ? rowClassName : rowClassName === null || rowClassName === void 0 ? void 0 : rowClassName({
+        row: row,
+        rowIndex: rowIndex
+      }), _defineProperty({}, em('row', "level-".concat((_row$level = row.level) !== null && _row$level !== void 0 ? _row$level : 0)), row.level > 0 || row.level === 0 && (row[treeProps.children] || row[treeProps.hasChildren]))),
+      style: _objectSpread({
+        display: rowKey && isTreeTalbe && !row.display ? 'none' : ''
+      }, typeof rowStyle === 'function' ? rowStyle === null || rowStyle === void 0 ? void 0 : rowStyle({
+        row: row,
+        rowIndex: rowIndex
+      }) : rowStyle),
+      key: "".concat(tableId, "_").concat(rowIndex)
+    }, fixedLeftColumns.map(function (column) {
+      columnIndex++;
+      var _isMerge = isMerge(row, rowIndex, column, columnIndex),
+        rowSpan = _isMerge.rowSpan,
+        colSpan = _isMerge.colSpan,
+        display = _isMerge.display;
+      return display && /*#__PURE__*/React.createElement(TableCell, {
+        row: row,
+        rowIndex: rowIndex,
+        column: _objectSpread(_objectSpread({}, column), {}, {
+          level: row.level
+        }),
+        columnIndex: columnIndex,
+        rowSpan: rowSpan,
+        colSpan: colSpan,
+        className: classNames(bm('fixed-column', 'left'), is({
+          'last-column': columnIndex === fixedLeftColumns.length - 1
+        })),
+        rowRef: rowRef,
+        style: {
+          left: column.offsetWidth
         },
-        fixedLeftColumns.map((column) => {
-          columnIndex++;
-          const { rowSpan, colSpan, display } = isMerge(row, rowIndex, column, columnIndex);
-          return display && /* @__PURE__ */ import_react.default.createElement(
-            import_TableCell.default,
-            {
-              row,
-              rowIndex,
-              column: { ...column, level: row.level },
-              columnIndex,
-              rowSpan,
-              colSpan,
-              className: (0, import_classnames.default)(bm("fixed-column", "left"), is({ "last-column": columnIndex === fixedLeftColumns.length - 1 })),
-              rowRef,
-              style: { left: column.offsetWidth },
-              key: `${tableId}_${rowIndex}_${column.id}`
-            }
-          );
+        key: "".concat(tableId, "_").concat(rowIndex, "_").concat(column.id)
+      });
+    }), middleColumns.map(function (column) {
+      columnIndex++;
+      var _isMerge2 = isMerge(row, rowIndex, column, columnIndex),
+        rowSpan = _isMerge2.rowSpan,
+        colSpan = _isMerge2.colSpan,
+        display = _isMerge2.display;
+      return display && /*#__PURE__*/React.createElement(TableCell, {
+        row: row,
+        rowIndex: rowIndex,
+        column: _objectSpread(_objectSpread({}, column), {}, {
+          level: row.level
         }),
-        middleColumns.map((column) => {
-          columnIndex++;
-          const { rowSpan, colSpan, display } = isMerge(row, rowIndex, column, columnIndex);
-          return display && /* @__PURE__ */ import_react.default.createElement(
-            import_TableCell.default,
-            {
-              row,
-              rowIndex,
-              column: { ...column, level: row.level },
-              columnIndex,
-              rowSpan,
-              colSpan,
-              key: `${tableId}_${rowIndex}_${column.id}`,
-              rowRef
-            }
-          );
+        columnIndex: columnIndex,
+        rowSpan: rowSpan,
+        colSpan: colSpan,
+        key: "".concat(tableId, "_").concat(rowIndex, "_").concat(column.id),
+        rowRef: rowRef
+      });
+    }), fixedRightColumns.map(function (column) {
+      columnIndex++;
+      var _isMerge3 = isMerge(row, rowIndex, column, columnIndex),
+        rowSpan = _isMerge3.rowSpan,
+        colSpan = _isMerge3.colSpan,
+        display = _isMerge3.display;
+      return display && /*#__PURE__*/React.createElement(TableCell, {
+        row: row,
+        rowIndex: rowIndex,
+        column: _objectSpread(_objectSpread({}, column), {}, {
+          level: row.level
         }),
-        fixedRightColumns.map((column) => {
-          columnIndex++;
-          const { rowSpan, colSpan, display } = isMerge(row, rowIndex, column, columnIndex);
-          return display && /* @__PURE__ */ import_react.default.createElement(
-            import_TableCell.default,
-            {
-              row,
-              rowIndex,
-              column: { ...column, level: row.level },
-              columnIndex,
-              rowRef,
-              rowSpan,
-              colSpan,
-              className: (0, import_classnames.default)(bm("fixed-column", "right"), is({ "first-column": columnIndex === 0 })),
-              style: { right: column.offsetWidth },
-              key: `${tableId}_${rowIndex}_${column.id}`
-            }
-          );
-        })
-      );
-    },
-    [
-      bm,
-      e,
-      em,
-      fixedLeftColumns,
-      fixedRightColumns,
-      highlightCurrentRow,
-      is,
-      isMerge,
-      isTreeTalbe,
-      middleColumns,
-      rowClassName,
-      rowKey,
-      rowStyle,
-      state.currentRow,
-      stripe,
-      tableId,
-      treeProps.children,
-      treeProps.hasChildren
-    ]
-  );
-  return /* @__PURE__ */ import_react.default.createElement("tbody", { ref: tbodyRef }, data.map(renderTr));
+        columnIndex: columnIndex,
+        rowRef: rowRef,
+        rowSpan: rowSpan,
+        colSpan: colSpan,
+        className: classNames(bm('fixed-column', 'right'), is({
+          'first-column': columnIndex === 0
+        })),
+        style: {
+          right: column.offsetWidth
+        },
+        key: "".concat(tableId, "_").concat(rowIndex, "_").concat(column.id)
+      });
+    }));
+  }, [bm, e, em, fixedLeftColumns, fixedRightColumns, highlightCurrentRow, is, isMerge, isTreeTalbe, middleColumns, rowClassName, rowKey, rowStyle, state.currentRow, stripe, tableId, treeProps.children, treeProps.hasChildren]);
+
+  /** 排序结束后回调 */
+  // const onSortItems = useCallback(
+  //     ({ oldIndex, newIndex }) => {
+  //         const result = arrayMove(cloneDeep(data), oldIndex, newIndex);
+  //         if (!isEqual(data, result)) {
+  //             setData(result);
+  //             onDragChange?.(result);
+  //         }
+  //     },
+  //     [data, onDragChange, setData],
+  // );
+
+  // const isSortTable = useMemo(
+  //     () => [...flattenColumns, ...fixedLeftColumns, ...fixedRightColumns].some(item => item.type === 'drag'),
+  //     [fixedLeftColumns, fixedRightColumns, flattenColumns],
+  // );
+
+  // /** 拖拽容器 */
+  // const Sortable = useMemo(() => {
+  //     return SortableContainer(({ children }) => <tbody ref={tbodyRef}>{children}</tbody>);
+  // }, []);
+
+  // /** 拖拽项 */
+  // const ListItem = useMemo(() => {
+  //     return SortableElement(({ item: row, rowIndex }) => renderTr(row, rowIndex));
+  // }, [renderTr]);
+
+  // return isSortTable ? (
+  //     // @ts-ignore
+  //     <Sortable
+  //         axis="y"
+  //         helperClass="r-sort-placeholder"
+  //         useDragHandle
+  //         helperContainer={() => tbodyRef.current}
+  //         onSortEnd={onSortItems}
+  //         onSortStart={(_, event) => event.preventDefault()}
+  //     >
+  //         {data.map((row, rowIndex) => (
+  //             // @ts-ignore
+  //             <ListItem index={rowIndex} key={`${tableId}_${rowIndex}`} item={row} rowIndex={rowIndex} />
+  //         ))}
+  //     </Sortable>
+  // ) : (
+  // );
+  return /*#__PURE__*/React.createElement("tbody", {
+    ref: tbodyRef
+  }, data.map(renderTr));
 };
-TableBody.displayName = "TableBody";
-var TableBody_default = TableBody;
+TableBody.displayName = 'TableBody';
+export default TableBody;