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

tdesign-vue

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

import _defineProperty from '@babel/runtime/helpers/defineProperty';
import _toConsumableArray from '@babel/runtime/helpers/toConsumableArray';
import _slicedToArray from '@babel/runtime/helpers/slicedToArray';
import { toRefs, computed } from '@vue/composition-api';
import { ChevronRightCircleIcon } from 'tdesign-icons-vue';
import { get } from 'lodash-es';
import useClassName from './useClassName.js';
import { useTNodeJSX } from '../../hooks/tnode.js';
import useDefaultValue from '../../hooks/useDefaultValue.js';
import { useConfig } from '../../config-provider/useConfig.js';
import { useGlobalIcon } from '../../hooks/useGlobalIcon.js';
import '../../config-provider/context.js';
import '../../_common/js/global-config/default-config.js';
import '../../_common/js/global-config/locale/zh_CN.js';
import '../../_chunks/dep-ba613a02.js';
import '@babel/runtime/helpers/typeof';
import '../../_chunks/dep-fdb1b253.js';
import 'dayjs';
import '../../_common/js/global-config/t.js';
import '../../hooks/render-tnode.js';

function useRowExpand(props, context) {
  var _toRefs = toRefs(props),
    expandedRowKeys = _toRefs.expandedRowKeys;
  var renderTNode = useTNodeJSX();
  var _useConfig = useConfig("table", props.locale),
    t = _useConfig.t,
    global = _useConfig.global;
  var _useGlobalIcon = useGlobalIcon({
      ChevronRightCircleIcon: ChevronRightCircleIcon
    }),
    ChevronRightCircleIcon$1 = _useGlobalIcon.ChevronRightCircleIcon;
  var _useClassName = useClassName(),
    tableExpandClasses = _useClassName.tableExpandClasses,
    positiveRotate90 = _useClassName.positiveRotate90,
    tableFullRowClasses = _useClassName.tableFullRowClasses;
  var _useDefaultValue = useDefaultValue(expandedRowKeys, props.defaultExpandedRowKeys || [], props.onExpandChange, "expandedRowKeys", "expand-change"),
    _useDefaultValue2 = _slicedToArray(_useDefaultValue, 2),
    tExpandedRowKeys = _useDefaultValue2[0],
    setTExpandedRowKeys = _useDefaultValue2[1];
  var showExpandedRow = computed(function () {
    return Boolean(props.expandedRow || context.slots.expandedRow || context.slots["expanded-row"]);
  });
  var showExpandIconColumn = computed(function () {
    return props.expandIcon !== false && showExpandedRow.value;
  });
  var isFirstColumnFixed = computed(function () {
    var _props$columns;
    return ((_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 getExpandedRowClass = function getExpandedRowClass(params) {
    var _tExpandedRowKeys$val;
    if (!showExpandedRow.value) return null;
    var row = params.row,
      rowKey = params.rowKey;
    var currentRowKey = get(row, rowKey || "id");
    return tableExpandClasses[(_tExpandedRowKeys$val = tExpandedRowKeys.value) !== null && _tExpandedRowKeys$val !== void 0 && _tExpandedRowKeys$val.includes(currentRowKey) ? "rowExpanded" : "rowFolded"];
  };
  var onToggleExpand = function onToggleExpand(e, row) {
    props.expandOnRowClick && e.stopPropagation();
    var currentId = get(row, props.rowKey || "id");
    var index = tExpandedRowKeys.value.indexOf(currentId);
    var newKeys = _toConsumableArray(tExpandedRowKeys.value);
    index !== -1 ? newKeys.splice(index, 1) : newKeys.push(currentId);
    setTExpandedRowKeys(newKeys, {
      expandedRowData: props.data.filter(function (t2) {
        return newKeys.includes(get(t2, props.rowKey || "id"));
      }),
      currentRowData: row
    });
  };
  var renderExpandIcon = function renderExpandIcon(h, p) {
    var row = p.row,
      rowIndex = p.rowIndex;
    var currentId = get(row, props.rowKey || "id");
    var expanded = tExpandedRowKeys.value.includes(currentId);
    var icon = renderTNode("expandIcon", {
      defaultNode: t(global.value.expandIcon) || h(ChevronRightCircleIcon$1),
      params: {
        row: row,
        index: rowIndex
      }
    });
    if (!icon) return null;
    var classes = [tableExpandClasses.iconBox, tableExpandClasses[expanded ? "expanded" : "collapsed"], _defineProperty({}, positiveRotate90, expanded)];
    return h("span", {
      "class": classes,
      "on": {
        "click": function click(e) {
          return onToggleExpand(e, row);
        }
      }
    }, [icon]);
  };
  var getExpandColumn = function getExpandColumn(h) {
    var expandCol = {
      colKey: "__EXPAND_ROW_ICON_COLUMN__",
      width: 64,
      className: tableExpandClasses.iconCell,
      fixed: isFirstColumnFixed.value ? "left" : void 0,
      cell: renderExpandIcon,
      stopPropagation: true
    };
    return expandCol;
  };
  var renderExpandedRow = function renderExpandedRow(h, p) {
    var rowId = get(p.row, props.rowKey || "id");
    if (!tExpandedRowKeys.value || !tExpandedRowKeys.value.includes(rowId)) return null;
    var isFixedLeft = p.isWidthOverflow && props.columns.find(function (item) {
      return item.fixed === "left";
    });
    return h("tr", {
      "key": "expand_".concat(rowId),
      "class": [tableExpandClasses.row, _defineProperty({}, tableFullRowClasses.base, isFixedLeft)]
    }, [h("td", {
      "attrs": {
        "colspan": p.columns.length
      }
    }, [h("div", {
      "class": [tableExpandClasses.rowInner, _defineProperty({}, tableFullRowClasses.innerFullRow, isFixedLeft)],
      "style": isFixedLeft ? {
        width: "".concat(p.tableWidth, "px")
      } : {}
    }, [h("div", {
      "class": tableFullRowClasses.innerFullElement
    }, [renderTNode("expandedRow", {
      params: 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