tdesign-react
Version:
TDesign Component for React
544 lines (540 loc) • 27.7 kB
JavaScript
/**
* tdesign v1.16.2
* (c) 2025 tdesign
* @license MIT
*/
import { _ as _slicedToArray } from '../../_chunks/dep-10d5731f.js';
import { _ as _defineProperty } from '../../_chunks/dep-d67deb2c.js';
import { useState, useRef, useMemo, useCallback, useEffect } from 'react';
import { get, xorWith, pick } from 'lodash-es';
import '../../_chunks/dep-1144c9da.js';
import { g as getScrollbarWidthWithCSS } from '../../_chunks/dep-1fbb4fde.js';
import { g as getIEVersion } from '../../_chunks/dep-624e7b27.js';
import { off, on } from '../../_util/listener.js';
import useDebounce from '../../hooks/useDebounce.js';
import useDeepEffect from '../../hooks/useDeepEffect.js';
import usePrevious from '../../hooks/usePrevious.js';
import { resizeObserverElement, isLessThanIE11OrNotHaveResizeObserver } from '../utils.js';
import { l as log } from '../../_chunks/dep-2ba7b13f.js';
import '../../_chunks/dep-74a10cfb.js';
import '../../_chunks/dep-8abcbcbc.js';
import '../../_chunks/dep-a3a3e527.js';
import '../../_chunks/dep-ed34fbd4.js';
import '../../_chunks/dep-ca8d3fa0.js';
import '../../hooks/usePersistFn.js';
function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
function getColumnFixedStyles(col, index, rowAndColFixedPosition, tableColFixedClasses) {
var fixedPos = rowAndColFixedPosition === null || rowAndColFixedPosition === void 0 ? void 0 : rowAndColFixedPosition.get(col.colKey || index);
if (!fixedPos) return {};
var thClasses = _defineProperty(_defineProperty(_defineProperty(_defineProperty({}, tableColFixedClasses.left, col.fixed === "left"), tableColFixedClasses.right, col.fixed === "right"), tableColFixedClasses.lastLeft, col.fixed === "left" && fixedPos.lastLeftFixedCol), tableColFixedClasses.firstRight, col.fixed === "right" && fixedPos.firstRightFixedCol);
var thStyles = {
left: col.fixed === "left" ? "".concat(fixedPos.left, "px") : void 0,
right: col.fixed === "right" ? "".concat(fixedPos.right, "px") : void 0
};
return {
style: thStyles,
classes: thClasses
};
}
function getRowFixedStyles(rowId, rowIndex, rowLength, fixedRows, rowAndColFixedPosition, tableRowFixedClasses) {
var virtualTranslateY = arguments.length > 6 && arguments[6] !== undefined ? arguments[6] : 0;
if (!fixedRows || !fixedRows.length) return {
style: void 0,
classes: void 0
};
var fixedTop = rowIndex < fixedRows[0];
var fixedBottom = rowIndex > rowLength - 1 - fixedRows[1];
var firstFixedBottomRow = rowLength - fixedRows[1];
var fixedPos = (rowAndColFixedPosition === null || rowAndColFixedPosition === void 0 ? void 0 : rowAndColFixedPosition.get(rowId)) || {};
var rowClasses = _defineProperty(_defineProperty(_defineProperty(_defineProperty({}, tableRowFixedClasses.top, fixedTop), tableRowFixedClasses.bottom, fixedBottom), tableRowFixedClasses.firstBottom, rowIndex === firstFixedBottomRow), tableRowFixedClasses.withoutBorderBottom, rowIndex === firstFixedBottomRow - 1);
var rowStyles = {
top: fixedTop ? "".concat(fixedPos.top - virtualTranslateY, "px") : void 0,
bottom: fixedBottom ? "".concat(fixedPos.bottom + virtualTranslateY, "px") : void 0
};
return {
style: rowStyles,
classes: rowClasses
};
}
function useFixed(props, finalColumns, affixRef) {
var _props$scroll2;
var columns = props.columns,
tableLayout = props.tableLayout,
tableContentWidth = props.tableContentWidth,
fixedRows = props.fixedRows,
firstFullRow = props.firstFullRow,
lastFullRow = props.lastFullRow,
maxHeight = props.maxHeight,
headerAffixedTop = props.headerAffixedTop,
bordered = props.bordered;
var preFinalColumns = usePrevious(finalColumns);
var _useState = useState([]),
_useState2 = _slicedToArray(_useState, 2),
data = _useState2[0],
setData = _useState2[1];
var tableContentRef = useRef(null);
var _useState3 = useState(false),
_useState4 = _slicedToArray(_useState3, 2),
isFixedHeader = _useState4[0],
setIsFixedHeader = _useState4[1];
var _useState5 = useState(false),
_useState6 = _slicedToArray(_useState5, 2),
isWidthOverflow = _useState6[0],
setIsWidthOverflow = _useState6[1];
var tableElmRef = useRef(null);
var _useState7 = useState(6),
_useState8 = _slicedToArray(_useState7, 2),
scrollbarWidth = _useState8[0],
setScrollbarWidth = _useState8[1];
var _useState9 = useState(function () {
return /* @__PURE__ */new Map();
}),
_useState0 = _slicedToArray(_useState9, 2),
rowAndColFixedPosition = _useState0[0],
setRowAndColFixedPosition = _useState0[1];
var _useState1 = useState({
left: false,
right: false
}),
_useState10 = _slicedToArray(_useState1, 2),
showColumnShadow = _useState10[0],
setShowColumnShadow = _useState10[1];
var _useState11 = useState({
left: 0,
top: 0
}),
_useState12 = _slicedToArray(_useState11, 2),
virtualScrollHeaderPos = _useState12[0],
setVirtualScrollHeaderPos = _useState12[1];
var tableWidth = useRef(0);
var tableElmWidth = useRef(0);
var thWidthList = useRef({});
var _useState13 = useState(false),
_useState14 = _slicedToArray(_useState13, 2),
isFixedColumn = _useState14[0],
setIsFixedColumn = _useState14[1];
var _useState15 = useState(false),
_useState16 = _slicedToArray(_useState15, 2),
isFixedRightColumn = _useState16[0],
setIsFixedRightColumn = _useState16[1];
var _useState17 = useState(false),
_useState18 = _slicedToArray(_useState17, 2),
isFixedLeftColumn = _useState18[0],
setIsFixedLeftColumn = _useState18[1];
var columnResizable = props.resizable;
var notNeedThWidthList = useMemo(function () {
var _props$scroll;
return !(props.headerAffixedTop || props.footerAffixedBottom || props.horizontalScrollAffixedBottom || ((_props$scroll = props.scroll) === null || _props$scroll === void 0 ? void 0 : _props$scroll.type) === "virtual");
}, [props.footerAffixedBottom, props.headerAffixedTop, props.horizontalScrollAffixedBottom, (_props$scroll2 = props.scroll) === null || _props$scroll2 === void 0 ? void 0 : _props$scroll2.type]);
function setUseFixedTableElmRef(val) {
tableElmRef.current = val;
}
function getColumnMap(columns2) {
var map = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : /* @__PURE__ */new Map();
var levelNodes = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : [];
var level = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : 0;
var parent = arguments.length > 4 ? arguments[4] : undefined;
for (var i = 0, len = columns2.length; i < len; i++) {
var _col$children;
var col = columns2[i];
if (["left", "right"].includes(col.fixed)) {
setIsFixedColumn(true);
}
if (col.fixed === "right") {
setIsFixedRightColumn(true);
}
if (col.fixed === "left") {
setIsFixedLeftColumn(true);
}
var key = col.colKey || i;
var columnInfo = {
col: col,
parent: parent,
index: i
};
map.set(key, columnInfo);
if ((_col$children = col.children) !== null && _col$children !== void 0 && _col$children.length) {
getColumnMap(col.children, map, levelNodes, level + 1, columnInfo);
}
if (levelNodes[level]) {
levelNodes[level].push(columnInfo);
} else {
levelNodes[level] = [columnInfo];
}
}
return {
newColumnsMap: map,
levelNodes: levelNodes
};
}
var _setFixedLeftPos = function setFixedLeftPos(columns2, initialColumnMap) {
var parent = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : {};
for (var i = 0, len = columns2.length; i < len; i++) {
var _col$children2;
var col = columns2[i];
if (col.fixed === "right") return;
var colInfo = initialColumnMap.get(col.colKey || i);
var lastColIndex = i - 1;
while (lastColIndex >= 0 && columns2[lastColIndex].fixed !== "left") {
lastColIndex -= 1;
}
var lastCol = columns2[lastColIndex];
var defaultWidth = i === 0 ? (parent === null || parent === void 0 ? void 0 : parent.left) || 0 : 0;
var lastColInfo = initialColumnMap.get((lastCol === null || lastCol === void 0 ? void 0 : lastCol.colKey) || i - 1);
colInfo.left = ((lastColInfo === null || lastColInfo === void 0 ? void 0 : lastColInfo.left) || defaultWidth) + ((lastColInfo === null || lastColInfo === void 0 ? void 0 : lastColInfo.width) || 0);
if ((_col$children2 = col.children) !== null && _col$children2 !== void 0 && _col$children2.length) {
_setFixedLeftPos(col.children, initialColumnMap, colInfo);
}
}
};
var _setFixedRightPos = function setFixedRightPos(columns2, initialColumnMap) {
var parent = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : {};
for (var i = columns2.length - 1; i >= 0; i--) {
var _col$children3;
var col = columns2[i];
if (col.fixed === "left") return;
var colInfo = initialColumnMap.get(col.colKey || i);
var lastColIndex = i + 1;
while (lastColIndex < columns2.length && columns2[lastColIndex].fixed !== "right") {
lastColIndex += 1;
}
var lastCol = columns2[lastColIndex];
var defaultWidth = i === columns2.length - 1 ? (parent === null || parent === void 0 ? void 0 : parent.right) || 0 : 0;
var lastColInfo = initialColumnMap.get((lastCol === null || lastCol === void 0 ? void 0 : lastCol.colKey) || i + 1);
colInfo.right = ((lastColInfo === null || lastColInfo === void 0 ? void 0 : lastColInfo.right) || defaultWidth) + ((lastColInfo === null || lastColInfo === void 0 ? void 0 : lastColInfo.width) || 0);
if ((_col$children3 = col.children) !== null && _col$children3 !== void 0 && _col$children3.length) {
_setFixedRightPos(col.children, initialColumnMap, colInfo);
}
}
};
var setFixedColPosition = function setFixedColPosition(trList, initialColumnMap) {
if (!trList) return;
for (var i = 0, len = trList.length; i < len; i++) {
var thList = trList[i].children;
for (var j = 0, thLen = thList.length; j < thLen; j++) {
var _obj$col;
var th = thList[j];
var colKey = th.dataset.colkey;
if (!colKey) {
log.warn("TDesign Table", "".concat(th.innerText, " missing colKey. colKey is required for fixed column feature."));
}
var obj = initialColumnMap.get(colKey || j);
if (obj !== null && obj !== void 0 && (_obj$col = obj.col) !== null && _obj$col !== void 0 && _obj$col.fixed) {
var _th$getBoundingClient;
initialColumnMap.set(colKey, _objectSpread(_objectSpread({}, obj), {}, {
width: th === null || th === void 0 || (_th$getBoundingClient = th.getBoundingClientRect) === null || _th$getBoundingClient === void 0 ? void 0 : _th$getBoundingClient.call(th).width
}));
}
}
}
_setFixedLeftPos(columns, initialColumnMap);
_setFixedRightPos(columns, initialColumnMap);
};
var setFixedRowPosition = function setFixedRowPosition(trList, initialColumnMap, thead, tfoot) {
var _ref = fixedRows || [],
_ref2 = _slicedToArray(_ref, 2),
fixedTopRows = _ref2[0],
fixedBottomRows = _ref2[1];
var data2 = props.data,
_props$rowKey = props.rowKey,
rowKey = _props$rowKey === void 0 ? "id" : _props$rowKey;
for (var i = 0; i < fixedTopRows; i++) {
var _tr$getBoundingClient;
var tr = trList[i];
var rowId = get(data2[i], rowKey);
var thisRowInfo = initialColumnMap.get(rowId) || {};
var lastRowId = get(data2[i - 1], rowKey);
var lastRowInfo = initialColumnMap.get(lastRowId) || {};
var defaultBottom = 0;
if (i === 0) {
var _thead$getBoundingCli;
defaultBottom = (thead === null || thead === void 0 || (_thead$getBoundingCli = thead.getBoundingClientRect) === null || _thead$getBoundingCli === void 0 ? void 0 : _thead$getBoundingCli.call(thead).height) || 0;
}
thisRowInfo.top = (lastRowInfo.top || defaultBottom) + (lastRowInfo.height || 0);
initialColumnMap.set(rowId, _objectSpread(_objectSpread({}, thisRowInfo), {}, {
height: tr === null || tr === void 0 || (_tr$getBoundingClient = tr.getBoundingClientRect) === null || _tr$getBoundingClient === void 0 ? void 0 : _tr$getBoundingClient.call(tr).height
}));
}
for (var _i = data2.length - 1; _i >= data2.length - fixedBottomRows; _i--) {
var _tr$getBoundingClient2;
var _tr = trList[_i] || trList[0];
var _rowId = get(data2[_i], rowKey);
var _thisRowInfo = initialColumnMap.get(_rowId) || {};
var _lastRowId = get(data2[_i + 1], rowKey);
var _lastRowInfo = initialColumnMap.get(_lastRowId) || {};
var _defaultBottom = 0;
if (_i === data2.length - 1) {
var _tfoot$getBoundingCli;
_defaultBottom = (tfoot === null || tfoot === void 0 || (_tfoot$getBoundingCli = tfoot.getBoundingClientRect) === null || _tfoot$getBoundingCli === void 0 ? void 0 : _tfoot$getBoundingCli.call(tfoot).height) || 0;
}
_thisRowInfo.bottom = (_lastRowInfo.bottom || _defaultBottom) + (_lastRowInfo.height || 0);
initialColumnMap.set(_rowId, _objectSpread(_objectSpread({}, _thisRowInfo), {}, {
height: _tr === null || _tr === void 0 || (_tr$getBoundingClient2 = _tr.getBoundingClientRect) === null || _tr$getBoundingClient2 === void 0 ? void 0 : _tr$getBoundingClient2.call(_tr).height
}));
}
};
var updateRowAndColFixedPosition = function updateRowAndColFixedPosition(tableContentElm, initialColumnMap) {
rowAndColFixedPosition.clear();
if (!tableContentElm) return;
var thead = tableContentElm.querySelector("thead");
thead && setFixedColPosition(thead.children, initialColumnMap);
var tbody = tableContentElm.querySelector("tbody");
var tfoot = tableContentElm.querySelector("tfoot");
tbody && setFixedRowPosition(tbody.children, initialColumnMap, thead, tfoot);
setRowAndColFixedPosition(initialColumnMap);
};
var shadowLastScrollLeft;
var updateColumnFixedShadow = function updateColumnFixedShadow(target, extra) {
if (!isFixedColumn || !target) return;
var scrollLeft = target.scrollLeft;
if (shadowLastScrollLeft === scrollLeft && (!extra || !extra.skipScrollLimit)) return;
shadowLastScrollLeft = scrollLeft;
var isShowRight = target.clientWidth + scrollLeft < target.scrollWidth;
var isShowLeft = scrollLeft > 0;
if (showColumnShadow.left === isShowLeft && showColumnShadow.right === isShowRight) return;
setShowColumnShadow({
left: isShowLeft && isFixedLeftColumn,
right: isShowRight && isFixedRightColumn
});
};
var setIsLastOrFirstFixedCol = function setIsLastOrFirstFixedCol(levelNodes) {
for (var t = 0; t < levelNodes.length; t++) {
var nodes = levelNodes[t];
for (var i = 0, len = nodes.length; i < len; i++) {
var colMapInfo = nodes[i];
var nextColMapInfo = nodes[i + 1];
var parent = colMapInfo.parent;
var isParentLastLeftFixedCol = !parent || (parent === null || parent === void 0 ? void 0 : parent.lastLeftFixedCol);
if (isParentLastLeftFixedCol && colMapInfo.col.fixed === "left" && (nextColMapInfo === null || nextColMapInfo === void 0 ? void 0 : nextColMapInfo.col.fixed) !== "left") {
colMapInfo.lastLeftFixedCol = true;
}
var lastColMapInfo = nodes[i - 1];
var isParentFirstRightFixedCol = !parent || (parent === null || parent === void 0 ? void 0 : parent.firstRightFixedCol);
if (isParentFirstRightFixedCol && colMapInfo.col.fixed === "right" && (lastColMapInfo === null || lastColMapInfo === void 0 ? void 0 : lastColMapInfo.col.fixed) !== "right") {
colMapInfo.firstRightFixedCol = true;
}
}
}
};
var updateFixedStatus = function updateFixedStatus() {
var _getColumnMap = getColumnMap(columns),
newColumnsMap = _getColumnMap.newColumnsMap,
levelNodes = _getColumnMap.levelNodes;
setIsLastOrFirstFixedCol(levelNodes);
if (isFixedColumn || fixedRows !== null && fixedRows !== void 0 && fixedRows.length) {
updateRowAndColFixedPosition(tableContentRef.current, newColumnsMap);
}
};
var updateFixedHeader = useCallback(function () {
var _tRef$getBoundingClie;
var tRef = tableContentRef === null || tableContentRef === void 0 ? void 0 : tableContentRef.current;
if (!tRef) return;
var isHeightOverflow = tRef.scrollHeight > tRef.clientHeight;
setIsFixedHeader(isHeightOverflow);
setIsWidthOverflow(tRef.scrollWidth > tRef.clientWidth);
var pos = tRef === null || tRef === void 0 || (_tRef$getBoundingClie = tRef.getBoundingClientRect) === null || _tRef$getBoundingClie === void 0 ? void 0 : _tRef$getBoundingClie.call(tRef);
setVirtualScrollHeaderPos({
top: pos === null || pos === void 0 ? void 0 : pos.top,
left: pos === null || pos === void 0 ? void 0 : pos.left
});
}, []);
var setTableElmWidth = function setTableElmWidth(width) {
if (tableElmWidth.current === width) return;
tableElmWidth.current = width;
};
var updateTableWidth = function updateTableWidth() {
var _tableContentRef$curr, _tableContentRef$curr2, _tableElmRef$current;
var rect = (_tableContentRef$curr = tableContentRef.current) === null || _tableContentRef$curr === void 0 || (_tableContentRef$curr2 = _tableContentRef$curr.getBoundingClientRect) === null || _tableContentRef$curr2 === void 0 ? void 0 : _tableContentRef$curr2.call(_tableContentRef$curr);
if (!rect) return;
var reduceWidth = isFixedHeader ? scrollbarWidth : 0;
tableWidth.current = rect.width - reduceWidth - (props.bordered ? 1 : 0);
var elmRect = tableElmRef === null || tableElmRef === void 0 || (_tableElmRef$current = tableElmRef.current) === null || _tableElmRef$current === void 0 ? void 0 : _tableElmRef$current.getBoundingClientRect();
if (elmRect !== null && elmRect !== void 0 && elmRect.width) {
setTableElmWidth(elmRect === null || elmRect === void 0 ? void 0 : elmRect.width);
}
};
var updateAffixPosition = function updateAffixPosition() {
var _affixRef$paginationA, _affixRef$paginationA2, _affixRef$horizontalS, _affixRef$horizontalS2, _affixRef$headerTopAf, _affixRef$headerTopAf2, _affixRef$footerBotto, _affixRef$footerBotto2;
(_affixRef$paginationA = affixRef.paginationAffixRef.current) === null || _affixRef$paginationA === void 0 || (_affixRef$paginationA2 = _affixRef$paginationA.handleScroll) === null || _affixRef$paginationA2 === void 0 || _affixRef$paginationA2.call(_affixRef$paginationA);
(_affixRef$horizontalS = affixRef.horizontalScrollAffixRef.current) === null || _affixRef$horizontalS === void 0 || (_affixRef$horizontalS2 = _affixRef$horizontalS.handleScroll) === null || _affixRef$horizontalS2 === void 0 || _affixRef$horizontalS2.call(_affixRef$horizontalS);
(_affixRef$headerTopAf = affixRef.headerTopAffixRef.current) === null || _affixRef$headerTopAf === void 0 || (_affixRef$headerTopAf2 = _affixRef$headerTopAf.handleScroll) === null || _affixRef$headerTopAf2 === void 0 || _affixRef$headerTopAf2.call(_affixRef$headerTopAf);
(_affixRef$footerBotto = affixRef.footerBottomAffixRef.current) === null || _affixRef$footerBotto === void 0 || (_affixRef$footerBotto2 = _affixRef$footerBotto.handleScroll) === null || _affixRef$footerBotto2 === void 0 || _affixRef$footerBotto2.call(_affixRef$footerBotto);
};
var calculateThWidthList = function calculateThWidthList(trList) {
var widthMap = {};
for (var i = 0, len = trList === null || trList === void 0 ? void 0 : trList.length; i < len; i++) {
var thList = trList[i].children;
for (var j = 0, thLen = thList.length; j < thLen; j++) {
var th = thList[j];
var colKey = th.dataset.colkey;
widthMap[colKey] = th.getBoundingClientRect().width;
}
}
return widthMap;
};
var updateThWidthList = function updateThWidthList(trList) {
if (trList instanceof HTMLCollection) {
if (columnResizable) return;
thWidthList.current = calculateThWidthList(trList);
} else {
thWidthList.current = thWidthList.current || {};
Object.entries(trList).forEach(function (_ref3) {
var _ref4 = _slicedToArray(_ref3, 2),
colKey = _ref4[0],
width = _ref4[1];
thWidthList.current[colKey] = width;
});
}
return thWidthList.current;
};
var updateThWidthListHandler = function updateThWidthListHandler() {
var _tableContentRef$curr3;
if (notNeedThWidthList) return;
var thead = (_tableContentRef$curr3 = tableContentRef.current) === null || _tableContentRef$curr3 === void 0 ? void 0 : _tableContentRef$curr3.querySelector("thead");
if (!thead) return;
updateThWidthList(thead.children);
};
var emitScrollEvent = function emitScrollEvent(e) {
var _props$onScrollX, _props$onScrollY, _props$onScroll;
(_props$onScrollX = props.onScrollX) === null || _props$onScrollX === void 0 || _props$onScrollX.call(props, {
e: e
});
(_props$onScrollY = props.onScrollY) === null || _props$onScrollY === void 0 || _props$onScrollY.call(props, {
e: e
});
(_props$onScroll = props.onScroll) === null || _props$onScroll === void 0 || _props$onScroll.call(props, {
e: e
});
};
var getThWidthList = function getThWidthList(type) {
if (type === "calculate") {
var _tableContentRef$curr4;
var trList = (_tableContentRef$curr4 = tableContentRef.current) === null || _tableContentRef$curr4 === void 0 || (_tableContentRef$curr4 = _tableContentRef$curr4.querySelector("thead")) === null || _tableContentRef$curr4 === void 0 ? void 0 : _tableContentRef$curr4.children;
return calculateThWidthList(trList);
}
return thWidthList.current || {};
};
var updateTableElmWidthOnColumnChange = function updateTableElmWidthOnColumnChange() {
var finalColumns2 = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : [];
var preFinalColumns2 = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : [];
var finalColKeys = finalColumns2.map(function (t) {
return t.colKey;
});
var preColKeys = (preFinalColumns2 !== null && preFinalColumns2 !== void 0 ? preFinalColumns2 : []).map(function (t) {
return t.colKey;
});
if (finalColKeys.length < preColKeys.length) {
var reduceKeys = xorWith(preColKeys, finalColKeys);
var thWidthList2 = getThWidthList("calculate");
var reduceWidth = 0;
reduceKeys.forEach(function (key) {
reduceWidth += thWidthList2[key];
});
var rootThWidthList = pick(thWidthList2, preColKeys);
if (!Object.values(rootThWidthList).length) return;
var oldTotalWidth = Object.values(rootThWidthList).reduce(function () {
var r = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : 0;
var n = arguments.length > 1 ? arguments[1] : undefined;
return r + n;
});
var contentWidth = tableContentRef.current.clientWidth;
var widthToReserve = oldTotalWidth - reduceWidth;
setTableElmWidth(Math.max(contentWidth, widthToReserve));
}
};
useDeepEffect(updateFixedStatus, [data, columns, bordered, tableLayout, tableContentWidth, isFixedHeader, isWidthOverflow, isFixedColumn, fixedRows, firstFullRow, lastFullRow, tableContentRef]);
useDeepEffect(function () {
if (isFixedColumn) {
updateColumnFixedShadow(tableContentRef.current);
}
}, [isFixedColumn, columns, tableContentRef]);
var updateFixedHeaderByUseDebounce = useDebounce(function () {
updateFixedHeader();
}, 30);
useEffect(function () {
if (tableContentRef.current) {
return resizeObserverElement(tableContentRef.current, updateFixedHeaderByUseDebounce);
}
}, [updateFixedHeaderByUseDebounce]);
useDeepEffect(updateFixedHeader, [maxHeight, data, columns, bordered, tableContentRef]);
useDeepEffect(function () {
updateTableElmWidthOnColumnChange(finalColumns, preFinalColumns);
}, [finalColumns]);
useDeepEffect(function () {
updateThWidthListHandler();
updateAffixPosition();
}, [bordered, columns, tableLayout, fixedRows, headerAffixedTop, tableContentWidth, notNeedThWidthList, tableContentRef]);
var refreshTable = function refreshTable() {
updateThWidthListHandler();
updateFixedHeader();
updateTableWidth();
updateAffixPosition();
if (isFixedColumn || isFixedHeader) {
updateFixedStatus();
updateColumnFixedShadow(tableContentRef.current, {
skipScrollLimit: true
});
}
};
var onResize = useDebounce(function () {
refreshTable();
}, 30);
function addTableResizeObserver(tableElement) {
if (isLessThanIE11OrNotHaveResizeObserver()) return;
off(window, "resize", onResize);
if (!tableElmWidth.current) return;
return resizeObserverElement(tableElement, function () {
refreshTable();
});
}
useEffect(function () {
var scrollWidth = getScrollbarWidthWithCSS();
setScrollbarWidth(scrollWidth);
var isWatchResize = isFixedColumn || isFixedHeader || !notNeedThWidthList || !data.length;
var hasWindow = typeof window !== "undefined";
var hasResizeObserver = hasWindow && typeof window.ResizeObserver !== "undefined";
updateTableWidth();
updateThWidthListHandler();
if (isWatchResize && getIEVersion() < 11 || !hasResizeObserver) {
on(window, "resize", onResize);
}
return function () {
if (isWatchResize && getIEVersion() < 11 || !hasResizeObserver) {
if (typeof window !== "undefined") {
off(window, "resize", onResize);
}
}
};
}, [isFixedColumn]);
var updateTableAfterColumnResize = function updateTableAfterColumnResize() {
updateFixedStatus();
updateFixedHeader();
};
return {
tableWidth: tableWidth,
tableElmWidth: tableElmWidth,
thWidthList: thWidthList,
isFixedHeader: isFixedHeader,
isWidthOverflow: isWidthOverflow,
tableContentRef: tableContentRef,
isFixedColumn: isFixedColumn,
showColumnShadow: showColumnShadow,
rowAndColFixedPosition: rowAndColFixedPosition,
virtualScrollHeaderPos: virtualScrollHeaderPos,
scrollbarWidth: scrollbarWidth,
setData: setData,
refreshTable: refreshTable,
setTableElmWidth: setTableElmWidth,
emitScrollEvent: emitScrollEvent,
updateThWidthListHandler: updateThWidthListHandler,
updateColumnFixedShadow: updateColumnFixedShadow,
setUseFixedTableElmRef: setUseFixedTableElmRef,
getThWidthList: getThWidthList,
updateThWidthList: updateThWidthList,
addTableResizeObserver: addTableResizeObserver,
updateTableAfterColumnResize: updateTableAfterColumnResize
};
}
export { useFixed as default, getColumnFixedStyles, getRowFixedStyles };
//# sourceMappingURL=useFixed.js.map