@qsxy/element-plus-react 1.0.0-next.1

package/dist/Table/TableBody.js

@@ -0,0 +1,241 @@
+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_cloneDeep = __toESM(require("lodash/cloneDeep"));
+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_react_sortable_hoc = require("react-sortable-hoc");
+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);
+    }
+  }, [state.currentRow, onCurrentChange]);
+  (0, import_react.useEffect)(() => {
+    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]);
+      }
+      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, 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}`
+        },
+        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}`
+            }
+          );
+        }),
+        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
+            }
+          );
+        }),
+        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
+    ]
+  );
+  const onSortItems = (0, import_react.useCallback)(
+    ({ oldIndex, newIndex }) => {
+      const result = (0, import_react_sortable_hoc.arrayMove)((0, import_cloneDeep.default)(data), oldIndex, newIndex);
+      if (!(0, import_isEqual.default)(data, result)) {
+        setData(result);
+        onDragChange == null ? void 0 : onDragChange(result);
+      }
+    },
+    [data, onDragChange, setData]
+  );
+  const isSortTable = (0, import_react.useMemo)(
+    () => [...flattenColumns, ...fixedLeftColumns, ...fixedRightColumns].some((item) => item.type === "drag"),
+    [fixedLeftColumns, fixedRightColumns, flattenColumns]
+  );
+  const Sortable = (0, import_react.useMemo)(() => {
+    return (0, import_react_sortable_hoc.SortableContainer)(({ children }) => /* @__PURE__ */ import_react.default.createElement("tbody", { ref: tbodyRef }, children));
+  }, []);
+  const ListItem = (0, import_react.useMemo)(() => {
+    return (0, import_react_sortable_hoc.SortableElement)(({ item: row, rowIndex }) => renderTr(row, rowIndex));
+  }, [renderTr]);
+  return isSortTable ? (
+    // @ts-ignore
+    /* @__PURE__ */ import_react.default.createElement(
+      Sortable,
+      {
+        axis: "y",
+        helperClass: "r-sort-placeholder",
+        useDragHandle: true,
+        helperContainer: () => tbodyRef.current,
+        onSortEnd: onSortItems,
+        onSortStart: (_, event) => event.preventDefault()
+      },
+      data.map((row, rowIndex) => (
+        // @ts-ignore
+        /* @__PURE__ */ import_react.default.createElement(ListItem, { index: rowIndex, key: `${tableId}_${rowIndex}`, item: row, rowIndex })
+      ))
+    )
+  ) : /* @__PURE__ */ import_react.default.createElement("tbody", { ref: tbodyRef }, data.map(renderTr));
+};
+TableBody.displayName = "TableBody";
+var TableBody_default = TableBody;

package/dist/Table/TableCell.d.ts

@@ -0,0 +1,18 @@
+import React, { RefObject } from 'react';
+import { TableColumnCtx } from './typings';
+interface Props {
+    row: any;
+    rowIndex: number;
+    column: TableColumnCtx<any>;
+    columnIndex: number;
+    className?: string;
+    rowRef: RefObject<Record<number, HTMLTableRowElement>>;
+    style?: React.CSSProperties;
+    rowSpan?: number;
+    colSpan?: number;
+}
+declare const TableCell: {
+    (p: Props): React.JSX.Element;
+    displayName: string;
+};
+export default TableCell;

package/dist/Table/TableCell.js

@@ -0,0 +1,402 @@
+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/TableCell.tsx
+var TableCell_exports = {};
+__export(TableCell_exports, {
+  default: () => TableCell_default
+});
+module.exports = __toCommonJS(TableCell_exports);
+var import_classnames = __toESM(require("classnames"));
+var import_dom_lib = require("dom-lib");
+var import_isEqual = __toESM(require("lodash/isEqual"));
+var import_last = __toESM(require("lodash/last"));
+var import_omit = __toESM(require("lodash/omit"));
+var import_some = __toESM(require("lodash/some"));
+var import_uniqWith = __toESM(require("lodash/uniqWith"));
+var import_words = __toESM(require("lodash/words"));
+var import_react = __toESM(require("react"));
+var import_react_dom = require("react-dom");
+var import_client = require("react-dom/client");
+var import_react_sortable_hoc = require("react-sortable-hoc");
+var import_Checkbox = require("../Checkbox");
+var import_Icon = require("../Icon");
+var import_Util = require("../Util");
+var import_hooks = require("../hooks");
+var import_TableContext = require("./TableContext");
+var import_useSelection = require("./hooks/useSelection");
+var import_treeUtil = require("./treeUtil");
+var import_util = require("./util");
+var TableCell = (p) => {
+  const { row, column, columnIndex, className = "", style = {}, rowSpan = 1, colSpan = 1 } = p;
+  const { data, setData, props, tableRefs, flattenColumns } = (0, import_react.useContext)(import_TableContext.TableContext);
+  const { state, dispatch, disabledRows, isTreeExpandCell, treeProps, treeNodes, initialData, sortedData } = (0, import_react.useContext)(import_TableContext.TableBodyContext);
+  const {
+    cellClassName,
+    cellStyle,
+    onSelect,
+    onSelectionChange,
+    onCellMouseEnter,
+    onCellMouseLeave,
+    onCellClick,
+    onCellDblclick,
+    onCellContextmenu,
+    onRowClick,
+    onRowContextmenu,
+    onRowDblclick,
+    expandable = () => Promise.resolve(true),
+    onExpandChange,
+    hideIconOnNotExpand,
+    highlightCurrentRow,
+    onCurrentChange,
+    tableLayout,
+    rowHeight,
+    rowKey,
+    indent = 16,
+    lazy,
+    load
+  } = props;
+  const { b, bm, e, em, is } = (0, import_hooks.useClassNames)("table");
+  const expand = (0, import_react.useRef)(false);
+  const trRef = (0, import_react.useRef)(null);
+  const tdRef = (0, import_react.useRef)(null);
+  const expandCell = (0, import_react.useRef)(null);
+  const startRowIndex = (0, import_react.useRef)();
+  const nextRow = (0, import_react.useRef)(null);
+  const rootRef = (0, import_react.useRef)(null);
+  const tooltipRef = (0, import_react.useRef)(null);
+  const [loading, setLoading] = (0, import_react.useState)(false);
+  const handleCellMouseEnter = (0, import_react.useCallback)(
+    (_row, _column, event) => {
+      onCellMouseEnter == null ? void 0 : onCellMouseEnter(_row, _column, event.currentTarget, event);
+      if (!["index", "selection"].includes((_column == null ? void 0 : _column.type) || "") && column.showOverflowTooltip) {
+        const cell = event.currentTarget;
+        const cellChild = event.currentTarget.querySelector("." + e`cell-content`);
+        const range = document.createRange();
+        range.setStart(cellChild, 0);
+        range.setEnd(cellChild, cellChild.childNodes.length);
+        const rangeWidth = range.getBoundingClientRect().width;
+        const padding = (Number.parseInt((0, import_util.getStyle)(cellChild, "paddingLeft"), 10) || 0) + (Number.parseInt((0, import_util.getStyle)(cellChild, "paddingRight"), 10) || 0);
+        if (rangeWidth + padding > cellChild.offsetWidth || cellChild.scrollWidth > cellChild.offsetWidth) {
+          tableRefs.tableWrapper.current && (0, import_util.createTablePopper)(
+            tableRefs.tableWrapper.current,
+            // {
+            //     getBoundingClientRect: tableRefs.tableWrapper.current.getBoundingClientRect(),
+            // },
+            cell,
+            cell.innerText || cell.textContent || "",
+            tooltipRef
+          );
+        }
+      }
+    },
+    [column.showOverflowTooltip, e, onCellMouseEnter, tableRefs.tableWrapper]
+  );
+  const rowIndex = (0, import_react.useMemo)(() => (0, import_util.getRowIndex)(column.index, p.rowIndex, row), [column.index, p.rowIndex, row]);
+  const disabled = (0, import_react.useMemo)(() => {
+    var _a;
+    return column.type === "selection" && ((_a = column == null ? void 0 : column.selectable) == null ? void 0 : _a.call(column, row, rowIndex)) === false;
+  }, [column, row, rowIndex]);
+  const handleCheck = (0, import_react.useCallback)(
+    (checked, _row) => {
+      var _a;
+      const allChildren = (0, import_treeUtil.getAllChildren)([_row], treeProps, rowKey).filter((item) => {
+        var _a2;
+        return column.type === "selection" && ((_a2 = column == null ? void 0 : column.selectable) == null ? void 0 : _a2.call(column, item, rowIndex)) !== false;
+      });
+      let selectedRows = JSON.parse(JSON.stringify(state.selection));
+      allChildren.forEach((item) => {
+        if (checked) {
+          selectedRows.push(item);
+        } else {
+          selectedRows = selectedRows == null ? void 0 : selectedRows.filter((item1) => rowKey ? (0, import_util.getRowIdentity)(item, rowKey) !== (0, import_util.getRowIdentity)(item1, rowKey) : !(0, import_isEqual.default)(item, item1));
+        }
+      });
+      dispatch((0, import_useSelection.onCheck)({ isIndeterminate: (selectedRows == null ? void 0 : selectedRows.length) > 0 && (selectedRows == null ? void 0 : selectedRows.length) + ((_a = disabledRows.current) == null ? void 0 : _a.length) !== data.length, selection: selectedRows }));
+      onSelect == null ? void 0 : onSelect(selectedRows, _row);
+      onSelectionChange == null ? void 0 : onSelectionChange(selectedRows);
+    },
+    [treeProps, rowKey, state.selection, dispatch, disabledRows, data.length, onSelect, onSelectionChange, column, rowIndex]
+  );
+  const getCellStyle = (0, import_react.useCallback)(
+    (_column) => {
+      const res = {};
+      if (rowHeight && typeof rowHeight === "number") {
+        Object.assign(res, { height: rowHeight });
+      }
+      if (tableLayout === "fixed" && _column.showOverflowTooltip) {
+        Object.assign(res, { width: (column.width || column.realWidth || column.minWidth || 80) - 1 });
+      }
+      return res;
+    },
+    [column.minWidth, column.realWidth, column.width, rowHeight, tableLayout]
+  );
+  const getLevel = (0, import_react.useCallback)(
+    (div) => {
+      if (div) {
+        const pattern = new RegExp(em("row", "level-"));
+        const levelClassName = Array.from(div.classList).find((item) => pattern.test(item));
+        if (levelClassName) {
+          const _level = parseFloat((0, import_last.default)((0, import_words.default)(levelClassName)));
+          if (!isNaN(_level)) {
+            return _level;
+          }
+        }
+      }
+      return 0;
+    },
+    [em]
+  );
+  const expandOrCollapseTreeRow = (0, import_react.useCallback)(
+    (level, willExpand) => {
+      while (nextRow.current) {
+        if ((0, import_dom_lib.hasClass)(nextRow.current, em("row", "level-0"))) {
+          break;
+        } else {
+          const _level = getLevel(nextRow.current);
+          if (willExpand) {
+            if (level === _level) {
+              const nextId = (0, import_util.getRowIdentity)(data[startRowIndex.current], rowKey);
+              treeNodes.current = treeNodes.current.map((item) => item.id === nextId ? { ...item, display: true } : item);
+              const expandIcon = nextRow.current.querySelector(`.${e`expand-icon`}`);
+              if (expandIcon) {
+                const nextLevel2 = getLevel(nextRow.current.nextSibling);
+                if (nextLevel2 === 0 || nextLevel2 < level) {
+                  break;
+                }
+                const expanded = (0, import_dom_lib.hasClass)(expandIcon, em("expand-icon", "expanded"));
+                treeNodes.current = treeNodes.current.map((item) => item.id === nextId ? { ...item, expanded } : item);
+                startRowIndex.current++;
+                nextRow.current = nextRow.current.nextSibling;
+                expandOrCollapseTreeRow(level + 1, expanded);
+              }
+            }
+          } else {
+            if (level > 0) {
+              const nextId = (0, import_util.getRowIdentity)(data[startRowIndex.current], rowKey);
+              treeNodes.current = treeNodes.current.map((item) => item.id === nextId ? { ...item, display: false } : item);
+            }
+          }
+          const nextLevel = getLevel(nextRow.current.nextSibling);
+          if (nextLevel === 0 || nextLevel < level) {
+            break;
+          }
+          startRowIndex.current++;
+          nextRow.current = nextRow.current.nextSibling;
+        }
+      }
+    },
+    [data, e, em, getLevel, rowKey, treeNodes]
+  );
+  const handleExpandTreeCell = (0, import_react.useCallback)(() => {
+    var _a, _b;
+    if (((_a = tdRef.current) == null ? void 0 : _a.parentNode) && expandCell.current) {
+      const willExpand = !(0, import_dom_lib.hasClass)(expandCell.current, em("expand-icon", "expanded"));
+      if (lazy && row.noLazyChildren) {
+        setLoading(true);
+        const parentId = (0, import_util.getRowIdentity)(row, rowKey);
+        new Promise((resolve) => {
+          load == null ? void 0 : load(
+            row,
+            treeNodes.current.find((item) => item.id === parentId),
+            resolve
+          );
+        }).then((result) => {
+          setLoading(false);
+          result = result.map((item) => {
+            const treeNode = { parentId, display: true, level: row.level + 1, expanded: false, noLazyChildren: true };
+            treeNodes.current.push({ id: (0, import_util.getRowIdentity)(item, rowKey), ...treeNode });
+            return { ...item, ...treeNode };
+          });
+          (0, import_treeUtil.addTreeChildren)(initialData.current, (0, import_util.getRowIdentity)(row, rowKey), result, treeProps, rowKey);
+          (0, import_treeUtil.addTreeChildren)(sortedData.current, (0, import_util.getRowIdentity)(row, rowKey), result, treeProps, rowKey);
+          let _data = data.map((item) => {
+            if (rowKey ? (0, import_util.getRowIdentity)(item, rowKey) === (0, import_util.getRowIdentity)(row, rowKey) : (0, import_isEqual.default)(item, row)) {
+              const treeNode = treeNodes.current.find((item1) => item1.id === (0, import_util.getRowIdentity)(item, rowKey));
+              Object.assign(treeNode, {
+                noLazyChildren: result.length === 0,
+                expanded: true,
+                [treeProps.children]: result,
+                [treeProps.hasChildren]: result.length > 0
+              });
+              return { ...row, ...(0, import_omit.default)(treeNode, "id") };
+            }
+            return item;
+          });
+          _data.splice(rowIndex + 1, 0, result);
+          _data = _data.flat();
+          setData(_data);
+        });
+      } else {
+        startRowIndex.current = rowIndex + 1;
+        nextRow.current = (_b = tdRef.current.parentNode) == null ? void 0 : _b.nextSibling;
+        if (nextRow.current) {
+          const nextId = (0, import_util.getRowIdentity)(data[rowIndex], rowKey);
+          treeNodes.current = treeNodes.current.map((item) => item.id === nextId ? { ...item, expanded: willExpand } : item);
+          expandOrCollapseTreeRow(column.level + 1, willExpand);
+          setData((0, import_treeUtil.mergeTreeData)(sortedData.current, treeNodes.current, treeProps, rowKey));
+        }
+      }
+      onExpandChange == null ? void 0 : onExpandChange(row, willExpand);
+    }
+  }, [rowIndex, em, lazy, row, onExpandChange, rowKey, load, treeNodes, initialData, treeProps, sortedData, data, setData, expandOrCollapseTreeRow, column.level]);
+  (0, import_hooks.useUpdateEffect)(() => {
+    if (rootRef.current && trRef.current && expand.current === true) {
+      rootRef.current.render(
+        (0, import_react_dom.createPortal)(
+          /* @__PURE__ */ import_react.default.createElement("td", { colSpan: flattenColumns.length, className: (0, import_classnames.default)(e`cell`, e`expanded-cell`) }, (column == null ? void 0 : column.renderCell) && column.renderCell({ row, column, $index: rowIndex })),
+          trRef.current
+        )
+      );
+    }
+  });
+  (0, import_react.useEffect)(() => {
+    if (column.type === "selection") {
+      if (disabled) {
+        disabledRows.current.push(row);
+      } else {
+        disabledRows.current = disabledRows.current.filter((item) => rowKey ? (0, import_util.getRowIdentity)(item, rowKey) !== (0, import_util.getRowIdentity)(row, rowKey) : !(0, import_isEqual.default)(item, row));
+        disabledRows.current = (0, import_uniqWith.default)(
+          disabledRows.current,
+          rowKey ? (item1, item2) => (0, import_util.getRowIdentity)(item1, rowKey) === (0, import_util.getRowIdentity)(item2, rowKey) : import_isEqual.default
+        );
+      }
+    }
+  }, [disabled, row]);
+  const handleExpand = (0, import_react.useCallback)(() => {
+    var _a, _b, _c, _d, _e;
+    if (expandCell.current) {
+      if (expand.current === false) {
+        expandable(row).then((canExpand) => {
+          var _a2, _b2;
+          if (canExpand) {
+            (0, import_dom_lib.addClass)(expandCell.current, em("expand-icon", "expanded"));
+            expand.current = true;
+            if ((_b2 = (_a2 = tdRef.current) == null ? void 0 : _a2.parentNode) == null ? void 0 : _b2.parentNode) {
+              const tr = document.createElement("tr");
+              (0, import_util.insertAfter)(tr, tdRef.current.parentNode);
+              trRef.current = tr;
+              rootRef.current = (0, import_client.createRoot)(tr);
+              rootRef.current.render(
+                (0, import_react_dom.createPortal)(
+                  /* @__PURE__ */ import_react.default.createElement("td", { colSpan: flattenColumns.length, className: (0, import_classnames.default)(e`cell`, e`expanded-cell`) }, (column == null ? void 0 : column.renderCell) && column.renderCell({ row, column, $index: rowIndex })),
+                  tr
+                )
+              );
+              onExpandChange == null ? void 0 : onExpandChange(row, true);
+            }
+          } else {
+            if (hideIconOnNotExpand) {
+              expandCell.current.style.display = "none";
+            }
+          }
+        });
+      } else {
+        (0, import_dom_lib.removeClass)(expandCell.current, em("expand-icon", "expanded"));
+        expand.current = false;
+        if (((_b = (_a = tdRef.current) == null ? void 0 : _a.parentNode) == null ? void 0 : _b.parentNode) && trRef.current) {
+          (_c = rootRef.current) == null ? void 0 : _c.unmount();
+          (_e = (_d = tdRef.current) == null ? void 0 : _d.parentNode) == null ? void 0 : _e.parentNode.removeChild(trRef.current);
+          onExpandChange == null ? void 0 : onExpandChange(row, false);
+        }
+      }
+    }
+  }, [column, e, em, expandable, flattenColumns.length, hideIconOnNotExpand, onExpandChange, row, rowIndex]);
+  const treeSuffix = (0, import_react.useMemo)(() => {
+    return isTreeExpandCell(column.id) && /* @__PURE__ */ import_react.default.createElement(import_react.default.Fragment, null, column.level > 0 && /* @__PURE__ */ import_react.default.createElement("span", { className: e`indent`, style: { paddingLeft: indent * column.level } }), ((0, import_Util.isNotEmpty)(row[treeProps.children]) || row[treeProps.hasChildren]) && /* @__PURE__ */ import_react.default.createElement("div", { ref: expandCell, className: (0, import_classnames.default)(e`expand-icon`, { [em("expand-icon", "expanded")]: row == null ? void 0 : row.expanded }), onClick: handleExpandTreeCell }, loading ? /* @__PURE__ */ import_react.default.createElement(import_Icon.Icon, { name: "loader", prefix: "far", spin: true }) : /* @__PURE__ */ import_react.default.createElement(import_Icon.Icon, { name: "angle-right" })), (0, import_Util.isEmpty)(row[treeProps.children]) && !row[treeProps.hasChildren] && /* @__PURE__ */ import_react.default.createElement("span", { className: e`placeholder` }));
+  }, [column.id, column.level, e, em, handleExpandTreeCell, indent, isTreeExpandCell, loading, row, treeProps.children, treeProps.hasChildren]);
+  const DragHandle = (0, import_react.useMemo)(() => {
+    return (0, import_react_sortable_hoc.SortableHandle)(() => /* @__PURE__ */ import_react.default.createElement("div", { style: { cursor: "grab" } }, /* @__PURE__ */ import_react.default.createElement(import_Icon.Icon, { name: "grip-vertical", prefix: "fas" })));
+  }, []);
+  return /* @__PURE__ */ import_react.default.createElement(
+    "td",
+    {
+      ref: tdRef,
+      className: (0, import_classnames.default)(
+        column.id,
+        e`cell`,
+        { [bm("column", "selection")]: column.type === "selection" },
+        column.className,
+        is(column.align),
+        className,
+        typeof cellClassName === "function" ? cellClassName == null ? void 0 : cellClassName({ row, column, rowIndex, columnIndex }) : cellClassName
+      ),
+      style: { ...style, ...typeof cellStyle === "function" ? cellStyle == null ? void 0 : cellStyle({ row, column, rowIndex, columnIndex }) : cellStyle },
+      rowSpan,
+      colSpan,
+      onMouseEnter: (event) => handleCellMouseEnter(row, column, event),
+      onMouseLeave: (event) => onCellMouseLeave == null ? void 0 : onCellMouseLeave(row, column, event.currentTarget, event),
+      onContextMenu: (event) => {
+        onCellContextmenu == null ? void 0 : onCellContextmenu(row, column, event.currentTarget, event);
+        onRowContextmenu == null ? void 0 : onRowContextmenu(row, column, event);
+      },
+      onClick: (event) => {
+        event.stopPropagation();
+        if (highlightCurrentRow) {
+          dispatch((0, import_useSelection.activeRow)(row));
+          if (!(0, import_isEqual.default)(state.currentRow, row)) {
+            onCurrentChange == null ? void 0 : onCurrentChange(row, state.currentRow);
+          }
+        }
+        onCellClick == null ? void 0 : onCellClick(row, column, event.currentTarget, event);
+        onRowClick == null ? void 0 : onRowClick(row, column, event);
+      },
+      onDoubleClick: (event) => {
+        onCellDblclick == null ? void 0 : onCellDblclick(row, column, event.currentTarget, event);
+        onRowDblclick == null ? void 0 : onRowDblclick(row, column, event);
+      }
+    },
+    /* @__PURE__ */ import_react.default.createElement("div", { className: (0, import_classnames.default)(e`cell-content`, { [b("tooltip", false)]: column.showOverflowTooltip }), style: getCellStyle(column) }, (() => {
+      if (column.type === "index") {
+        return /* @__PURE__ */ import_react.default.createElement("div", { className: e`cell-index` }, rowIndex);
+      } else if (column.type === "expand") {
+        return /* @__PURE__ */ import_react.default.createElement("div", { ref: expandCell, className: e`expand-icon`, onClick: handleExpand }, /* @__PURE__ */ import_react.default.createElement(import_Icon.Icon, { name: "angle-right" }));
+      } else if (column.type === "drag") {
+        return /* @__PURE__ */ import_react.default.createElement(DragHandle, null);
+      } else if (column.type === "selection") {
+        return /* @__PURE__ */ import_react.default.createElement(
+          import_Checkbox.Checkbox,
+          {
+            onClick: (event) => event.stopPropagation(),
+            checked: !disabled && (0, import_some.default)(state.selection || [], (item) => rowKey ? (0, import_util.getRowIdentity)(item, rowKey) === (0, import_util.getRowIdentity)(row, rowKey) : (0, import_isEqual.default)(item, row)),
+            disabled,
+            onChange: (checked) => handleCheck(checked, row)
+          }
+        );
+      } else if (column.renderCell) {
+        return /* @__PURE__ */ import_react.default.createElement(import_react.default.Fragment, null, treeSuffix, column.renderCell({ row, column, $index: rowIndex }));
+      } else if (column.formatter) {
+        return /* @__PURE__ */ import_react.default.createElement(import_react.default.Fragment, null, treeSuffix, column.formatter(row, column, column.name || column.prop ? row[column.name || column.prop] : "", rowIndex));
+      } else {
+        return /* @__PURE__ */ import_react.default.createElement(import_react.default.Fragment, null, treeSuffix, column.name || column.prop ? row[column.name || column.prop] : "");
+      }
+    })())
+  );
+};
+TableCell.displayName = "TableCell";
+var TableCell_default = TableCell;

package/dist/Table/TableColumn.d.ts

@@ -0,0 +1,7 @@
+import { FC } from 'react';
+import { TableColumnProps } from './typings';
+export interface TableColumnRef {
+    props: TableColumnProps<any>;
+}
+declare const TableColumn: FC<TableColumnProps<any>>;
+export default TableColumn;