tdesign-react
Version:
TDesign Component for React
302 lines (298 loc) • 14.9 kB
JavaScript
/**
* tdesign v1.16.2
* (c) 2025 tdesign
* @license MIT
*/
import { _ as _defineProperty } from '../../_chunks/dep-d67deb2c.js';
import { _ as _slicedToArray } from '../../_chunks/dep-10d5731f.js';
import { useRef, useState, useEffect } from 'react';
import { isNumber } from 'lodash-es';
import { on, off } from '../../_util/listener.js';
import '../../_chunks/dep-8abcbcbc.js';
import '../../_chunks/dep-74a10cfb.js';
import '../../_chunks/dep-ca8d3fa0.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; }
var DEFAULT_MIN_WIDTH = 80;
var DEFAULT_MAX_WIDTH = 600;
var distance = 8;
var CONTEXTMENU = 2;
var originalSelectStart;
var originalDragStart;
function useColumnResize(params) {
var isWidthOverflow = params.isWidthOverflow,
tableContentRef = params.tableContentRef,
showColumnShadow = params.showColumnShadow,
getThWidthList = params.getThWidthList,
updateThWidthList = params.updateThWidthList,
setTableElmWidth = params.setTableElmWidth,
updateTableAfterColumnResize = params.updateTableAfterColumnResize,
onColumnResizeChange = params.onColumnResizeChange;
var resizeLineRef = useRef(null);
var effectColMap = useRef({});
var _useState = useState([]),
_useState2 = _slicedToArray(_useState, 2),
leafColumns = _useState2[0],
setLeafColumns = _useState2[1];
useEffect(function () {
var hasDocument = typeof document !== "undefined";
originalSelectStart = hasDocument ? document.onselectstart : null;
originalDragStart = hasDocument ? document.ondragstart : null;
}, []);
var getSiblingResizableCol = function getSiblingResizableCol(nodes, index, type) {
var i = index;
while (nodes[i] && nodes[i].resizable === false) {
if (type === "next") {
i += 1;
} else {
i -= 1;
}
}
return nodes[i];
};
var _setEffectColMap = function setEffectColMap(nodes, parent) {
if (!nodes) return;
setLeafColumns(nodes);
nodes.forEach(function (n, index) {
var prevNode = getSiblingResizableCol(nodes, index - 1, "prev");
var nextNode = getSiblingResizableCol(nodes, index + 1, "next");
var parentPrevCol = parent ? effectColMap.current[parent.colKey].prev : nextNode;
var parentNextCol = parent ? effectColMap.current[parent.colKey].next : prevNode;
var prev = index === 0 ? parentPrevCol : prevNode;
var next = index === nodes.length - 1 ? parentNextCol : nextNode;
effectColMap.current[n.colKey] = {
prev: prev,
next: next,
current: {
prevSibling: getSiblingResizableCol(nodes, index - 1, "prev"),
nextSibling: getSiblingResizableCol(nodes, index + 1, "next")
}
};
_setEffectColMap(n.children, n);
});
};
var resizeLineParams = {
isDragging: false,
draggingCol: null,
draggingStart: 0,
effectCol: "next",
resizeLineStyle: {}
};
var _useState3 = useState({
display: "none",
left: "10px",
height: "10px",
bottom: "0"
}),
_useState4 = _slicedToArray(_useState3, 2),
resizeLineStyle = _useState4[0],
setResizeLineStyle = _useState4[1];
var isColRightFixActive = function isColRightFixActive(col) {
return col.fixed === "right" && showColumnShadow.right;
};
var onColumnMouseover = function onColumnMouseover(e, col) {
var _col$resizable;
var colResizable = (_col$resizable = col.resizable) !== null && _col$resizable !== void 0 ? _col$resizable : true;
if (!resizeLineRef.current || resizeLineParams.isDragging || !e.target) return;
var target = e.target.closest("th");
if (!target) return;
var colKey = target.getAttribute("data-colkey");
if (!leafColumns.find(function (t) {
return t.colKey === colKey;
})) return;
var targetBoundRect = target.getBoundingClientRect();
var thRightCursor = targetBoundRect.right - e.pageX <= distance;
var thLeftCursor = e.pageX - targetBoundRect.left <= distance;
var isFixedToRight = isColRightFixActive(col);
if (thRightCursor || isFixedToRight) {
if (colResizable) {
target.style.cursor = thRightCursor || isFixedToRight && thLeftCursor ? "col-resize" : "";
var isCurrent = thRightCursor && !isFixedToRight || isFixedToRight && thLeftCursor;
resizeLineParams.draggingCol = isCurrent ? target : target.nextElementSibling;
resizeLineParams.effectCol = "next";
return;
}
} else if (thLeftCursor) {
var prevEl = target.previousElementSibling;
if (prevEl && colResizable) {
target.style.cursor = "col-resize";
resizeLineParams.draggingCol = prevEl;
resizeLineParams.effectCol = "prev";
return;
}
}
target.style.cursor = "";
resizeLineParams.draggingCol = null;
resizeLineParams.effectCol = null;
};
var getMinMaxColWidth = function getMinMaxColWidth(targetCol) {
var _targetCol$resize, _targetCol$resize2;
var propMinWidth = isNumber(targetCol === null || targetCol === void 0 ? void 0 : targetCol.minWidth) ? targetCol.minWidth : parseInt((targetCol === null || targetCol === void 0 ? void 0 : targetCol.minWidth) || "0", 10);
return {
minColWidth: Math.max((targetCol === null || targetCol === void 0 || (_targetCol$resize = targetCol.resize) === null || _targetCol$resize === void 0 ? void 0 : _targetCol$resize.minWidth) || DEFAULT_MIN_WIDTH, propMinWidth),
maxColWidth: (targetCol === null || targetCol === void 0 || (_targetCol$resize2 = targetCol.resize) === null || _targetCol$resize2 === void 0 ? void 0 : _targetCol$resize2.maxWidth) || DEFAULT_MAX_WIDTH
};
};
var getNormalResizeInfo = function getNormalResizeInfo(col, effectPrevCol, targetBoundRect, tableBoundRect) {
var resizeLinePos = targetBoundRect.right - tableBoundRect.left;
var colLeft = targetBoundRect.left - tableBoundRect.left;
var targetCol = resizeLineParams.effectCol === "next" ? col : effectPrevCol;
var _getMinMaxColWidth = getMinMaxColWidth(targetCol),
minColWidth = _getMinMaxColWidth.minColWidth,
maxColWidth = _getMinMaxColWidth.maxColWidth;
return {
resizeLinePos: resizeLinePos,
minResizeLineLeft: colLeft + minColWidth,
maxResizeLineLeft: colLeft + maxColWidth
};
};
var getFixedToRightResizeInfo = function getFixedToRightResizeInfo(target, col, effectPrevCol, targetBoundRect, tableBoundRect) {
var resizeLinePos = targetBoundRect.left - tableBoundRect.left;
var targetCol = target.dataset.colkey === col.colKey ? col : effectPrevCol;
var colLeft = targetBoundRect.left - tableBoundRect.left;
var _getMinMaxColWidth2 = getMinMaxColWidth(targetCol),
minColWidth = _getMinMaxColWidth2.minColWidth,
maxColWidth = _getMinMaxColWidth2.maxColWidth;
return {
resizeLinePos: resizeLinePos,
minResizeLineLeft: colLeft + (targetBoundRect.width - maxColWidth),
maxResizeLineLeft: colLeft + (targetBoundRect.width - minColWidth)
};
};
var getTotalTableWidth = function getTotalTableWidth(thWidthList) {
var tableWidth = 0;
leafColumns.forEach(function (col) {
tableWidth += thWidthList[col.colKey];
});
return tableWidth;
};
var getSiblingColCanResizable = function getSiblingColCanResizable(newThWidthList, effectNextCol, distance2, index) {
var isWidthAbnormal = true;
if (effectNextCol) {
var _getMinMaxColWidth3 = getMinMaxColWidth(effectNextCol),
minColWidth = _getMinMaxColWidth3.minColWidth,
maxColWidth = _getMinMaxColWidth3.maxColWidth;
var targetNextColWidth = newThWidthList[effectNextCol.colKey] + distance2;
isWidthAbnormal = targetNextColWidth < minColWidth || targetNextColWidth > maxColWidth;
}
return !(isWidthAbnormal || isWidthOverflow || index === leafColumns.length - 1);
};
var onColumnMousedown = function onColumnMousedown(e, col, index) {
var _tableContentRef$curr, _effectColMap$current, _effectColMap$current2;
if (e.button === CONTEXTMENU || !resizeLineParams.draggingCol) return;
var target = resizeLineParams.draggingCol;
var targetBoundRect = target.getBoundingClientRect();
var tableBoundRect = (_tableContentRef$curr = tableContentRef.current) === null || _tableContentRef$curr === void 0 ? void 0 : _tableContentRef$curr.getBoundingClientRect();
var effectNextCol = (_effectColMap$current = effectColMap.current[col.colKey]) === null || _effectColMap$current === void 0 ? void 0 : _effectColMap$current.next;
var effectPrevCol = (_effectColMap$current2 = effectColMap.current[col.colKey]) === null || _effectColMap$current2 === void 0 ? void 0 : _effectColMap$current2.prev;
var _ref = isColRightFixActive(col) ? getFixedToRightResizeInfo(target, col, effectNextCol, targetBoundRect, tableBoundRect) : getNormalResizeInfo(col, effectPrevCol, targetBoundRect, tableBoundRect),
resizeLinePos = _ref.resizeLinePos,
minResizeLineLeft = _ref.minResizeLineLeft,
maxResizeLineLeft = _ref.maxResizeLineLeft;
resizeLineParams.isDragging = true;
resizeLineParams.draggingStart = e.pageX || 0;
if (resizeLineRef !== null && resizeLineRef !== void 0 && resizeLineRef.current) {
var styles = _objectSpread({}, resizeLineStyle);
styles.display = "block";
styles.height = "".concat(tableBoundRect.bottom - targetBoundRect.top, "px");
styles.left = "".concat(resizeLinePos, "px");
var parent = tableContentRef.current.parentElement.getBoundingClientRect();
styles.bottom = "".concat(parent.bottom - tableBoundRect.bottom, "px");
setResizeLineStyle(styles);
resizeLineParams.resizeLineStyle = styles;
}
var onDragOver = function onDragOver(e2) {
if (resizeLineParams.isDragging) {
var left = resizeLinePos + e2.x - resizeLineParams.draggingStart;
var _styles = _objectSpread(_objectSpread({}, resizeLineParams.resizeLineStyle), {}, {
left: "".concat(Math.min(Math.max(left, minResizeLineLeft), maxResizeLineLeft), "px")
});
resizeLineParams.resizeLineStyle = _styles;
setResizeLineStyle(_styles);
}
};
var _onDragEnd = function onDragEnd() {
var _resizeLineParams$res, _effectColMap$current3;
if (!resizeLineParams.isDragging) return;
var moveDistance = resizeLinePos - (parseFloat(String(((_resizeLineParams$res = resizeLineParams.resizeLineStyle) === null || _resizeLineParams$res === void 0 ? void 0 : _resizeLineParams$res.left) || "")) || 0);
var thWidthList = getThWidthList("calculate");
var currentCol = (_effectColMap$current3 = effectColMap.current[col.colKey]) === null || _effectColMap$current3 === void 0 ? void 0 : _effectColMap$current3.current;
var currentSibling = resizeLineParams.effectCol === "next" ? currentCol.prevSibling : currentCol.nextSibling;
var newThWidthList = _objectSpread({}, thWidthList);
var initTableElmWidth = getTotalTableWidth(newThWidthList);
var tmpCurrentCol = col.resizable !== false ? col : currentSibling;
var rightCol = resizeLineParams.effectCol === "next" ? currentCol.nextSibling : col;
var canResizeSiblingColWidth = getSiblingColCanResizable(newThWidthList, rightCol, moveDistance, index);
if (resizeLineParams.effectCol === "next") {
if (isColRightFixActive(col)) {
if (target.dataset.colkey !== col.colKey) {
newThWidthList[effectNextCol.colKey] += moveDistance;
} else {
newThWidthList[tmpCurrentCol.colKey] += moveDistance;
}
} else {
newThWidthList[tmpCurrentCol.colKey] -= moveDistance;
if (canResizeSiblingColWidth) {
newThWidthList[effectNextCol.colKey] += moveDistance;
}
}
} else if (resizeLineParams.effectCol === "prev") {
if (canResizeSiblingColWidth) {
newThWidthList[tmpCurrentCol.colKey] += moveDistance;
}
effectPrevCol && (newThWidthList[effectPrevCol.colKey] -= moveDistance);
}
updateThWidthList(newThWidthList);
var tableWidth = getTotalTableWidth(newThWidthList);
if (!(effectNextCol !== null && effectNextCol !== void 0 && effectNextCol.colKey)) setTableElmWidth(Math.max(initTableElmWidth, Math.round(tableWidth)));else setTableElmWidth(Math.round(tableWidth));
updateTableAfterColumnResize();
resizeLineParams.isDragging = false;
resizeLineParams.draggingCol = null;
resizeLineParams.effectCol = null;
resizeLineParams.resizeLineStyle = null;
target.style.cursor = "";
setResizeLineStyle(_objectSpread(_objectSpread({}, resizeLineStyle), {}, {
display: "none",
left: void 0
}));
off(document, "mouseup", _onDragEnd);
off(document, "mousemove", onDragOver);
document.onselectstart = originalSelectStart;
document.ondragstart = originalDragStart;
onColumnResizeChange === null || onColumnResizeChange === void 0 || onColumnResizeChange({
columnsWidth: newThWidthList
});
};
on(document, "mouseup", _onDragEnd);
on(document, "mousemove", onDragOver);
document.onselectstart = function () {
return false;
};
document.ondragstart = function () {
return false;
};
};
var updateTableWidthOnColumnChange = function updateTableWidthOnColumnChange(colKeys) {
var thWidthList = getThWidthList("calculate");
var reduceWidth = 0;
colKeys.forEach(function (key) {
reduceWidth += thWidthList[key] || 0;
});
var oldTotalWidth = Object.values(thWidthList).reduce(function () {
var r = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : 0;
var n = arguments.length > 1 ? arguments[1] : undefined;
return r + n;
});
setTableElmWidth(oldTotalWidth - reduceWidth);
};
return {
resizeLineRef: resizeLineRef,
resizeLineStyle: resizeLineStyle,
onColumnMouseover: onColumnMouseover,
onColumnMousedown: onColumnMousedown,
setEffectColMap: _setEffectColMap,
updateTableWidthOnColumnChange: updateTableWidthOnColumnChange
};
}
export { useColumnResize as default };
//# sourceMappingURL=useColumnResize.js.map