| 123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226 |
- import { inject, computed, h } from 'vue';
- import { merge } from 'lodash-unified';
- import { getRowIdentity } from '../util.mjs';
- import { TABLE_INJECTION_KEY } from '../tokens.mjs';
- import useEvents from './events-helper.mjs';
- import useStyles from './styles-helper.mjs';
- import TdWrapper from './td-wrapper.mjs';
- import { useNamespace } from '../../../../hooks/use-namespace/index.mjs';
- import { isBoolean, isPropAbsent } from '../../../../utils/types.mjs';
- function useRender(props) {
- const parent = inject(TABLE_INJECTION_KEY);
- const ns = useNamespace("table");
- const {
- handleDoubleClick,
- handleClick,
- handleContextMenu,
- handleMouseEnter,
- handleMouseLeave,
- handleCellMouseEnter,
- handleCellMouseLeave,
- tooltipContent,
- tooltipTrigger
- } = useEvents(props);
- const {
- getRowStyle,
- getRowClass,
- getCellStyle,
- getCellClass,
- getSpan,
- getColspanRealWidth
- } = useStyles(props);
- let displayIndex = -1;
- const firstDefaultColumnIndex = computed(() => {
- var _a;
- return (_a = props.store) == null ? void 0 : _a.states.columns.value.findIndex(({ type }) => type === "default");
- });
- const getKeyOfRow = (row, index) => {
- var _a;
- const rowKey = (_a = parent == null ? void 0 : parent.props) == null ? void 0 : _a.rowKey;
- if (rowKey) {
- return getRowIdentity(row, rowKey);
- }
- return index;
- };
- const rowRender = (row, $index, treeRowData, expanded = false) => {
- const { tooltipEffect, tooltipOptions, store } = props;
- const { indent, columns } = store.states;
- const rowClasses = [];
- let display = true;
- if (treeRowData) {
- rowClasses.push(ns.em("row", `level-${treeRowData.level}`));
- display = !!treeRowData.display;
- }
- if ($index === 0) {
- displayIndex = -1;
- }
- if (props.stripe && display) {
- displayIndex++;
- }
- rowClasses.push(...getRowClass(row, $index, displayIndex));
- const displayStyle = display ? null : { display: "none" };
- return h("tr", {
- style: [displayStyle, getRowStyle(row, $index)],
- class: rowClasses,
- key: getKeyOfRow(row, $index),
- onDblclick: ($event) => handleDoubleClick($event, row),
- onClick: ($event) => handleClick($event, row),
- onContextmenu: ($event) => handleContextMenu($event, row),
- onMouseenter: () => handleMouseEnter($index),
- onMouseleave: handleMouseLeave
- }, columns.value.map((column, cellIndex) => {
- const { rowspan, colspan } = getSpan(row, column, $index, cellIndex);
- if (!rowspan || !colspan) {
- return null;
- }
- const columnData = Object.assign({}, column);
- columnData.realWidth = getColspanRealWidth(columns.value, colspan, cellIndex);
- const data = {
- store,
- _self: props.context || parent,
- column: columnData,
- row,
- $index,
- cellIndex,
- expanded
- };
- if (cellIndex === firstDefaultColumnIndex.value && treeRowData) {
- data.treeNode = {
- indent: treeRowData.level && treeRowData.level * indent.value,
- level: treeRowData.level
- };
- if (isBoolean(treeRowData.expanded)) {
- data.treeNode.expanded = treeRowData.expanded;
- if ("loading" in treeRowData) {
- data.treeNode.loading = treeRowData.loading;
- }
- if ("noLazyChildren" in treeRowData) {
- data.treeNode.noLazyChildren = treeRowData.noLazyChildren;
- }
- }
- }
- const baseKey = `${getKeyOfRow(row, $index)},${cellIndex}`;
- const patchKey = columnData.columnKey || columnData.rawColumnKey || "";
- const mergedTooltipOptions = column.showOverflowTooltip && merge({
- effect: tooltipEffect
- }, tooltipOptions, column.showOverflowTooltip);
- return h(TdWrapper, {
- style: getCellStyle($index, cellIndex, row, column),
- class: getCellClass($index, cellIndex, row, column, colspan - 1),
- key: `${patchKey}${baseKey}`,
- rowspan,
- colspan,
- onMouseenter: ($event) => handleCellMouseEnter($event, row, mergedTooltipOptions),
- onMouseleave: handleCellMouseLeave
- }, {
- default: () => cellChildren(cellIndex, column, data)
- });
- }));
- };
- const cellChildren = (_cellIndex, column, data) => {
- return column.renderCell(data);
- };
- const wrappedRowRender = (row, $index) => {
- const store = props.store;
- const { isRowExpanded, assertRowKey } = store;
- const { treeData, lazyTreeNodeMap, childrenColumnName, rowKey } = store.states;
- const columns = store.states.columns.value;
- const hasExpandColumn = columns.some(({ type }) => type === "expand");
- if (hasExpandColumn) {
- const expanded = isRowExpanded(row);
- const tr = rowRender(row, $index, void 0, expanded);
- const renderExpanded = parent == null ? void 0 : parent.renderExpanded;
- if (!renderExpanded) {
- console.error("[Element Error]renderExpanded is required.");
- return tr;
- }
- const rows = [[tr]];
- if (parent.props.preserveExpandedContent || expanded) {
- rows[0].push(h("tr", {
- key: `expanded-row__${tr.key}`,
- style: { display: expanded ? "" : "none" }
- }, [
- h("td", {
- colspan: columns.length,
- class: `${ns.e("cell")} ${ns.e("expanded-cell")}`
- }, [renderExpanded({ row, $index, store, expanded })])
- ]));
- }
- return rows;
- } else if (Object.keys(treeData.value).length) {
- assertRowKey();
- const key = getRowIdentity(row, rowKey.value);
- let cur = treeData.value[key];
- let treeRowData = null;
- if (cur) {
- treeRowData = {
- expanded: cur.expanded,
- level: cur.level,
- display: true,
- noLazyChildren: void 0,
- loading: void 0
- };
- if (isBoolean(cur.lazy)) {
- if (treeRowData && isBoolean(cur.loaded) && cur.loaded) {
- treeRowData.noLazyChildren = !(cur.children && cur.children.length);
- }
- treeRowData.loading = cur.loading;
- }
- }
- const tmp = [rowRender(row, $index, treeRowData != null ? treeRowData : void 0)];
- if (cur) {
- let i = 0;
- const traverse = (children, parent2) => {
- if (!(children && children.length && parent2))
- return;
- children.forEach((node) => {
- const innerTreeRowData = {
- display: parent2.display && parent2.expanded,
- level: parent2.level + 1,
- expanded: false,
- noLazyChildren: false,
- loading: false
- };
- const childKey = getRowIdentity(node, rowKey.value);
- if (isPropAbsent(childKey)) {
- throw new Error("For nested data item, row-key is required.");
- }
- cur = { ...treeData.value[childKey] };
- if (cur) {
- innerTreeRowData.expanded = cur.expanded;
- cur.level = cur.level || innerTreeRowData.level;
- cur.display = !!(cur.expanded && innerTreeRowData.display);
- if (isBoolean(cur.lazy)) {
- if (isBoolean(cur.loaded) && cur.loaded) {
- innerTreeRowData.noLazyChildren = !(cur.children && cur.children.length);
- }
- innerTreeRowData.loading = cur.loading;
- }
- }
- i++;
- tmp.push(rowRender(node, $index + i, innerTreeRowData));
- if (cur) {
- const nodes2 = lazyTreeNodeMap.value[childKey] || node[childrenColumnName.value];
- traverse(nodes2, cur);
- }
- });
- };
- cur.display = true;
- const nodes = lazyTreeNodeMap.value[key] || row[childrenColumnName.value];
- traverse(nodes, cur);
- }
- return tmp;
- } else {
- return rowRender(row, $index, void 0);
- }
- };
- return {
- wrappedRowRender,
- tooltipContent,
- tooltipTrigger
- };
- }
- export { useRender as default };
- //# sourceMappingURL=render-helper.mjs.map
|