tdesign-react/lib/table/hooks/useRowExpand.js

TDesign Component for React

/**
 * tdesign v1.16.2
 * (c) 2025 tdesign
 * @license MIT
 */

import { _ as _defineProperty } from '../../_chunks/dep-d67deb2c.js';
import { _ as _toConsumableArray } from '../../_chunks/dep-a3a3e527.js';
import { _ as _slicedToArray } from '../../_chunks/dep-10d5731f.js';
import React, { useCallback } from 'react';
import { ChevronRightCircleIcon } from 'tdesign-icons-react';
import { get, isFunction } from 'lodash-es';
import classNames from 'classnames';
import useClassName from './useClassName.js';
import useControlled from '../../hooks/useControlled.js';
import useGlobalIcon from '../../hooks/useGlobalIcon.js';
import { useLocaleReceiver } from '../../locale/LocalReceiver.js';
import { parseContentTNode } from '../../_util/parseTNode.js';
import '../../_chunks/dep-8abcbcbc.js';
import '../../_chunks/dep-74a10cfb.js';
import '../../hooks/useConfig.js';
import '../../config-provider/ConfigContext.js';
import '../../_chunks/dep-6b235a32.js';
import '../../_chunks/dep-b9afa32b.js';
import 'dayjs';
import '../../_util/noop.js';
import '../../config-provider/ConfigProvider.js';
import '../../_chunks/dep-2ba7b13f.js';

function useRowExpand(props) {
  var _props$columns;
  var expandIcon = props.expandIcon,
    expandedRow = props.expandedRow;
  var _useGlobalIcon = useGlobalIcon({
      ChevronRightCircleIcon: ChevronRightCircleIcon
    }),
    ChevronRightCircleIcon$1 = _useGlobalIcon.ChevronRightCircleIcon;
  var _useLocaleReceiver = useLocaleReceiver("table"),
    _useLocaleReceiver2 = _slicedToArray(_useLocaleReceiver, 1),
    locale = _useLocaleReceiver2[0];
  var _useClassName = useClassName(),
    tableExpandClasses = _useClassName.tableExpandClasses,
    positiveRotate90 = _useClassName.positiveRotate90,
    tableFullRowClasses = _useClassName.tableFullRowClasses;
  var _useControlled = useControlled(props, "expandedRowKeys", props.onExpandChange, {
      defaultExpandedRowKeys: props.defaultExpandedRowKeys || []
    }),
    _useControlled2 = _slicedToArray(_useControlled, 2),
    tExpandedRowKeys = _useControlled2[0],
    setTExpandedRowKeys = _useControlled2[1];
  var showExpandedRow = Boolean(expandedRow);
  var getExpandedRowClass = useCallback(function (params) {
    if (!showExpandedRow) return null;
    var row = params.row,
      rowKey = params.rowKey;
    var currentRowKey = get(row, rowKey || "id");
    return tableExpandClasses[tExpandedRowKeys !== null && tExpandedRowKeys !== void 0 && tExpandedRowKeys.includes(currentRowKey) ? "rowExpanded" : "rowFolded"];
  }, [tExpandedRowKeys, tableExpandClasses, showExpandedRow]);
  var showExpandIconColumn = props.expandIcon !== false && showExpandedRow;
  var isFirstColumnFixed = ((_props$columns = props.columns) === null || _props$columns === void 0 || (_props$columns = _props$columns[0]) === null || _props$columns === void 0 ? void 0 : _props$columns.fixed) === "left";
  var onToggleExpand = function onToggleExpand(e, row) {
    props.expandOnRowClick && e.stopPropagation();
    var currentId = get(row, props.rowKey || "id");
    var index = tExpandedRowKeys.indexOf(currentId);
    var newKeys = _toConsumableArray(tExpandedRowKeys);
    index !== -1 ? newKeys.splice(index, 1) : newKeys.push(currentId);
    setTExpandedRowKeys(newKeys, {
      expandedRowData: props.data.filter(function (t) {
        return newKeys.includes(get(t, props.rowKey || "id"));
      }),
      currentRowData: row
    });
  };
  var renderExpandIcon = function renderExpandIcon(p, expandIcon2) {
    var row = p.row,
      rowIndex = p.rowIndex;
    var currentId = get(row, props.rowKey || "id");
    var expanded = tExpandedRowKeys.includes(currentId);
    var defaultIcon = locale.expandIcon || /* @__PURE__ */React.createElement(ChevronRightCircleIcon$1, null);
    var icon = defaultIcon;
    if (expandIcon2 === false || expandIcon2 === null) {
      icon = null;
    } else if (isFunction(expandIcon2)) {
      icon = expandIcon2({
        row: row,
        index: rowIndex
      });
    }
    var classes = [tableExpandClasses.iconBox, tableExpandClasses[expanded ? "expanded" : "collapsed"], _defineProperty({}, positiveRotate90, expanded)];
    return /* @__PURE__ */React.createElement("span", {
      className: classNames(classes),
      onClick: function onClick(e) {
        return onToggleExpand(e, row);
      }
    }, icon);
  };
  var getExpandColumn = function getExpandColumn() {
    var expandCol = {
      colKey: "__EXPAND_ROW_ICON_COLUMN__",
      width: 46,
      className: tableExpandClasses.iconCell,
      fixed: isFirstColumnFixed ? "left" : void 0,
      cell: function cell(p) {
        return renderExpandIcon(p, expandIcon);
      },
      stopPropagation: true
    };
    return expandCol;
  };
  var renderExpandedRow = function renderExpandedRow(p) {
    var rowId = get(p.row, props.rowKey || "id");
    if (!tExpandedRowKeys || !tExpandedRowKeys.includes(rowId)) return null;
    var isFixedLeft = p.isWidthOverflow && props.columns.find(function (item) {
      return item.fixed === "left";
    });
    return /* @__PURE__ */React.createElement("tr", {
      key: "expand_".concat(rowId),
      className: classNames([tableExpandClasses.row, _defineProperty({}, tableFullRowClasses.base, isFixedLeft)])
    }, /* @__PURE__ */React.createElement("td", {
      colSpan: p.columns.length
    }, /* @__PURE__ */React.createElement("div", {
      className: classNames([tableExpandClasses.rowInner, _defineProperty({}, tableFullRowClasses.innerFullRow, isFixedLeft)]),
      style: isFixedLeft ? {
        width: "".concat(p.tableWidth, "px")
      } : {}
    }, /* @__PURE__ */React.createElement("div", {
      className: tableFullRowClasses.innerFullElement
    }, parseContentTNode(expandedRow, p)))));
  };
  var onInnerExpandRowClick = function onInnerExpandRowClick(p) {
    onToggleExpand(p.e, p.row);
  };
  return {
    showExpandedRow: showExpandedRow,
    showExpandIconColumn: showExpandIconColumn,
    getExpandColumn: getExpandColumn,
    renderExpandedRow: renderExpandedRow,
    onInnerExpandRowClick: onInnerExpandRowClick,
    getExpandedRowClass: getExpandedRowClass
  };
}

export { useRowExpand as default };
//# sourceMappingURL=useRowExpand.js.map