vue-gantt-3
Version:
A gantt component for Vue 3
122 lines (121 loc) • 4.18 kB
JavaScript
import { toRef, shallowRef, ref, onBeforeMount, watch, nextTick } from "vue";
const useTableRow = ({
props,
setTableRowSelected,
rowClass,
tableRef,
tableBodyView,
tableBodyVerticalScrollViewport
}) => {
const visibleRowDataList = toRef(props, "rows");
const rowData = shallowRef([]);
const emptyRows = shallowRef([]);
const domLayout = ref("normal");
let cacheLastRowId = "";
let cacheLastRowDom = null;
onBeforeMount(() => {
getRows();
});
watch(visibleRowDataList, () => {
const hasChange = handleEmptyRowChanged();
if (!hasChange) {
getRows();
}
}, { deep: false });
watch(emptyRows, () => {
getRows();
}, { deep: false });
const getRows = () => {
rowData.value = visibleRowDataList.value.concat(emptyRows.value);
nextTick(setTableRowSelected);
};
const getTableRowId = (params) => {
if (params.data) {
return props.getRowId(params.data);
} else {
return "";
}
};
const getRowNode = (row) => {
let rowNode;
if (row) {
const id = props.getRowId(row);
rowNode = props.rowNodeMap.get(id);
}
return rowNode;
};
const handleEmptyRowChanged = (target) => {
var _a, _b;
const { getEmptyRows, rowHeight, getRowId } = props;
let hasChange = false;
if (getEmptyRows && tableRef.value && tableBodyView.value) {
const bodyHeight = (target == null ? void 0 : target.offsetHeight) || tableBodyView.value.offsetHeight;
const limitCount = Math.ceil(bodyHeight / rowHeight);
const displayedRowCount = getVisibleRowCount(limitCount);
const emptyRowCount = limitCount - displayedRowCount;
let newEmptyRows = [];
const lastEmptyRowCount = emptyRows.value.length;
if (emptyRowCount !== lastEmptyRowCount) {
const verticalScroll = (_a = tableBodyVerticalScrollViewport.value) == null ? void 0 : _a.parentElement;
if (verticalScroll) {
if (emptyRowCount > 0) {
domLayout.value = "autoHeight";
} else {
domLayout.value = "normal";
}
}
newEmptyRows = getEmptyRows(emptyRowCount);
newEmptyRows.forEach((item) => item.isEmpty = true);
emptyRows.value = newEmptyRows;
hasChange = true;
}
if (emptyRowCount > 0) {
if (lastEmptyRowCount > 0 && emptyRowCount > lastEmptyRowCount) {
const resetRowData = emptyRows.value[lastEmptyRowCount - 1];
const resetRowNode = (_b = tableRef.value) == null ? void 0 : _b.getRowNode(getRowId(resetRowData));
resetRowNode == null ? void 0 : resetRowNode.setRowHeight(rowHeight);
}
nextTick(() => {
var _a2, _b2;
const diffHeight = limitCount * rowHeight - bodyHeight;
const lastRowData = emptyRows.value[emptyRowCount - 1];
const lastRowId = getRowId(lastRowData);
const lastRowNode = (_a2 = tableRef.value) == null ? void 0 : _a2.getRowNode(lastRowId);
lastRowNode == null ? void 0 : lastRowNode.setRowHeight(rowHeight - diffHeight);
const lastRowDom = cacheLastRowId === lastRowId ? cacheLastRowDom : tableBodyView.value.querySelector(`.${rowClass}[row-id="${lastRowId}"]`);
if (cacheLastRowId !== lastRowId) {
cacheLastRowId = lastRowId;
cacheLastRowDom = lastRowDom;
}
if (diffHeight === 0) {
lastRowDom && lastRowDom.classList.remove("no-bottom-border-row");
} else {
lastRowDom && lastRowDom.classList.add("no-bottom-border-row");
}
(_b2 = tableRef.value) == null ? void 0 : _b2.onRowHeightChanged();
});
}
}
return hasChange;
};
const getVisibleRowCount = (limitCount) => {
let count = 0;
for (let visibleRowData of visibleRowDataList.value) {
if (count >= limitCount) break;
const rowNode = getRowNode(visibleRowData);
rowNode && !rowNode.hide && count++;
}
return count;
};
return {
rowData,
getTableRowId,
getRowNode,
handleEmptyRowChanged,
visibleRowDataList
};
};
export {
useTableRow
};
//# sourceMappingURL=useTableRow.mjs.map