'use strict';
|
|
Object.defineProperty(exports, '__esModule', { value: true });
|
|
var vue = require('vue');
|
var lodashUnified = require('lodash-unified');
|
require('../../../../hooks/index.js');
|
var util = require('../util.js');
|
var tokens = require('../tokens.js');
|
var eventsHelper = require('./events-helper.js');
|
var stylesHelper = require('./styles-helper.js');
|
var index = require('../../../../hooks/use-namespace/index.js');
|
|
function useRender(props) {
|
const parent = vue.inject(tokens.TABLE_INJECTION_KEY);
|
const ns = index.useNamespace("table");
|
const {
|
handleDoubleClick,
|
handleClick,
|
handleContextMenu,
|
handleMouseEnter,
|
handleMouseLeave,
|
handleCellMouseEnter,
|
handleCellMouseLeave,
|
tooltipContent,
|
tooltipTrigger
|
} = eventsHelper["default"](props);
|
const {
|
getRowStyle,
|
getRowClass,
|
getCellStyle,
|
getCellClass,
|
getSpan,
|
getColspanRealWidth
|
} = stylesHelper["default"](props);
|
const firstDefaultColumnIndex = vue.computed(() => {
|
return props.store.states.columns.value.findIndex(({ type }) => type === "default");
|
});
|
const getKeyOfRow = (row, index) => {
|
const rowKey = parent.props.rowKey;
|
if (rowKey) {
|
return util.getRowIdentity(row, rowKey);
|
}
|
return index;
|
};
|
const rowRender = (row, $index, treeRowData, expanded = false) => {
|
const { tooltipEffect, tooltipOptions, store } = props;
|
const { indent, columns } = store.states;
|
const rowClasses = getRowClass(row, $index);
|
let display = true;
|
if (treeRowData) {
|
rowClasses.push(ns.em("row", `level-${treeRowData.level}`));
|
display = treeRowData.display;
|
}
|
const displayStyle = display ? null : {
|
display: "none"
|
};
|
return vue.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 = { ...column };
|
columnData.realWidth = getColspanRealWidth(columns.value, colspan, cellIndex);
|
const data = {
|
store: props.store,
|
_self: props.context || parent,
|
column: columnData,
|
row,
|
$index,
|
cellIndex,
|
expanded
|
};
|
if (cellIndex === firstDefaultColumnIndex.value && treeRowData) {
|
data.treeNode = {
|
indent: treeRowData.level * indent.value,
|
level: treeRowData.level
|
};
|
if (typeof treeRowData.expanded === "boolean") {
|
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 = `${$index},${cellIndex}`;
|
const patchKey = columnData.columnKey || columnData.rawColumnKey || "";
|
const tdChildren = cellChildren(cellIndex, column, data);
|
const mergedTooltipOptions = column.showOverflowTooltip && lodashUnified.merge({
|
effect: tooltipEffect
|
}, tooltipOptions, column.showOverflowTooltip);
|
return vue.h("td", {
|
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
|
}, [tdChildren]);
|
}));
|
};
|
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.renderExpanded;
|
if (expanded) {
|
if (!renderExpanded) {
|
console.error("[Element Error]renderExpanded is required.");
|
return tr;
|
}
|
return [
|
[
|
tr,
|
vue.h("tr", {
|
key: `expanded-row__${tr.key}`
|
}, [
|
vue.h("td", {
|
colspan: columns.length,
|
class: `${ns.e("cell")} ${ns.e("expanded-cell")}`
|
}, [renderExpanded({ row, $index, store, expanded })])
|
])
|
]
|
];
|
} else {
|
return [[tr]];
|
}
|
} else if (Object.keys(treeData.value).length) {
|
assertRowKey();
|
const key = util.getRowIdentity(row, rowKey.value);
|
let cur = treeData.value[key];
|
let treeRowData = null;
|
if (cur) {
|
treeRowData = {
|
expanded: cur.expanded,
|
level: cur.level,
|
display: true
|
};
|
if (typeof cur.lazy === "boolean") {
|
if (typeof cur.loaded === "boolean" && cur.loaded) {
|
treeRowData.noLazyChildren = !(cur.children && cur.children.length);
|
}
|
treeRowData.loading = cur.loading;
|
}
|
}
|
const tmp = [rowRender(row, $index, treeRowData)];
|
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 = util.getRowIdentity(node, rowKey.value);
|
if (childKey === void 0 || childKey === null) {
|
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 (typeof cur.lazy === "boolean") {
|
if (typeof cur.loaded === "boolean" && 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
|
};
|
}
|
|
exports["default"] = useRender;
|
//# sourceMappingURL=render-helper.js.map
|
