tdesign-react
Version:
TDesign Component for React
249 lines (244 loc) • 11.5 kB
JavaScript
/**
* tdesign v1.15.1
* (c) 2025 tdesign
* @license MIT
*/
import { _ as _toConsumableArray } from '../../_chunks/dep-87d110df.js';
import { _ as _defineProperty } from '../../_chunks/dep-cb0a3966.js';
import { _ as _slicedToArray } from '../../_chunks/dep-48805ab8.js';
import { useState, useMemo, useRef, useEffect } from 'react';
import Sortable from 'sortablejs';
import { get } from 'lodash-es';
import '../../_chunks/dep-f53c91cd.js';
import { a as getColumnDataByKey, b as getColumnIndexByKey } from '../../_chunks/dep-d1ed7cad.js';
import useClassName from './useClassName.js';
import { h as hasClass } from '../../_chunks/dep-3a09424a.js';
import useLatest from '../../hooks/useLatest.js';
import { l as log } from '../../_chunks/dep-b908e1fe.js';
import '../../_chunks/dep-026a4c6b.js';
import '../../_chunks/dep-eca3a3de.js';
import '../../hooks/useConfig.js';
import '../../config-provider/ConfigContext.js';
import '../../locale/zh_CN.js';
import '../../_chunks/dep-e29214cb.js';
import 'dayjs';
import '../../_chunks/dep-3c9ab31a.js';
function swapDragArrayElement(data, currentIndex, targetIndex) {
var newData = _toConsumableArray(data);
if (targetIndex - currentIndex > 0) {
newData.splice(targetIndex + 1, 0, newData[currentIndex]);
newData.splice(currentIndex, 1);
} else {
newData.splice(targetIndex, 0, newData[currentIndex]);
newData.splice(currentIndex + 1, 1);
}
return newData;
}
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 useDragSort(props, _ref) {
var primaryTableRef = _ref.primaryTableRef,
innerPagination = _ref.innerPagination;
var sortOnRowDraggable = props.sortOnRowDraggable,
dragSort = props.dragSort,
data = props.data,
onDragSort = props.onDragSort;
var _useClassName = useClassName(),
tableDraggableClasses = _useClassName.tableDraggableClasses,
tableBaseClass = _useClassName.tableBaseClass,
tableFullRowClasses = _useClassName.tableFullRowClasses;
var _useState = useState(props.columns || []),
_useState2 = _slicedToArray(_useState, 2),
columns = _useState2[0],
setDragSortColumns = _useState2[1];
var dragCol = useMemo(function () {
return columns.find(function (item) {
return item.colKey === "drag";
});
}, [columns]);
var isRowDraggable = useMemo(function () {
return sortOnRowDraggable || dragSort === "row";
}, [dragSort, sortOnRowDraggable]);
var isRowHandlerDraggable = useMemo(function () {
return ["row-handler", "row-handler-col"].includes(dragSort) && !!dragCol;
}, [dragSort, dragCol]);
var isColDraggable = useMemo(function () {
return ["col", "row-handler-col"].includes(dragSort);
}, [dragSort]);
var lastRowList = useRef([]);
var tData = useRef(null);
var lastColList = useRef([]);
var dragColumns = useRef([]);
var originalColumns = useRef([]);
var dragColInstanceTmp = null;
if (props.sortOnRowDraggable) {
log.warn("Table", "`sortOnRowDraggable` is going to be deprecated, use dragSort='row' instead.");
}
useEffect(function () {
lastRowList.current = data.map(function (item) {
return String(get(item, props.rowKey));
});
tData.current = data;
}, [data, props.rowKey]);
useEffect(function () {
lastColList.current = props.columns.map(function (t) {
return t.colKey;
});
dragColumns.current = props.columns;
originalColumns.current = props.columns;
}, [props.columns]);
var onDragSortRef = useLatest(onDragSort);
function getDataPageIndex(index, pagination) {
var _pagination$current, _pagination$pageSize;
var current = (_pagination$current = pagination.current) !== null && _pagination$current !== void 0 ? _pagination$current : pagination.defaultCurrent;
var pageSize = (_pagination$pageSize = pagination.pageSize) !== null && _pagination$pageSize !== void 0 ? _pagination$pageSize : pagination.defaultPageSize;
if (!props.disableDataPage && pagination && data.length > pageSize) {
return pageSize * (current - 1) + index;
}
return index;
}
var registerRowDragEvent = function registerRowDragEvent(element) {
var _dragInstanceTmp2;
if (!isRowHandlerDraggable && !isRowDraggable) return;
var dragInstanceTmp = null;
var dragContainer = element === null || element === void 0 ? void 0 : element.querySelector("tbody");
if (!dragContainer) {
return null;
}
var baseOptions = _objectSpread({
animation: 150,
ghostClass: tableDraggableClasses.ghost,
chosenClass: tableDraggableClasses.chosen,
dragClass: tableDraggableClasses.dragging,
filter: ".".concat(tableFullRowClasses.base),
onMove: function onMove(evt) {
return !hasClass(evt.related, tableFullRowClasses.base);
},
onEnd: function onEnd(evt) {
var _dragInstanceTmp, _onDragSortRef$curren;
if (evt.newIndex === evt.oldIndex) return;
var currentIndex = evt.oldIndex,
targetIndex = evt.newIndex;
(_dragInstanceTmp = dragInstanceTmp) === null || _dragInstanceTmp === void 0 || _dragInstanceTmp.sort(_toConsumableArray(lastRowList.current));
if (props.firstFullRow) {
currentIndex -= 1;
targetIndex -= 1;
}
if (innerPagination.current) {
currentIndex = getDataPageIndex(currentIndex, innerPagination.current);
targetIndex = getDataPageIndex(targetIndex, innerPagination.current);
}
var newData = swapDragArrayElement(_toConsumableArray(tData.current), currentIndex, targetIndex);
var params = {
currentIndex: currentIndex,
current: tData.current[currentIndex],
targetIndex: targetIndex,
target: tData.current[targetIndex],
data: tData.current,
newData: newData,
e: evt,
sort: "row"
};
params.currentData = params.newData;
(_onDragSortRef$curren = onDragSortRef.current) === null || _onDragSortRef$curren === void 0 || _onDragSortRef$curren.call(onDragSortRef, params);
}
}, props.dragSortOptions);
if (!dragContainer) return;
if (isRowDraggable) {
dragInstanceTmp = new Sortable(dragContainer, _objectSpread({}, baseOptions));
} else if (isRowHandlerDraggable) {
dragInstanceTmp = new Sortable(dragContainer, _objectSpread(_objectSpread({}, baseOptions), {}, {
handle: ".".concat(tableDraggableClasses.handle)
}));
}
lastRowList.current = (_dragInstanceTmp2 = dragInstanceTmp) === null || _dragInstanceTmp2 === void 0 ? void 0 : _dragInstanceTmp2.toArray();
};
var registerOneLevelColDragEvent = function registerOneLevelColDragEvent(container, recover) {
var options = _objectSpread({
animation: 150,
dataIdAttr: "data-colkey",
direction: "vertical",
ghostClass: tableDraggableClasses.ghost,
chosenClass: tableDraggableClasses.chosen,
dragClass: tableDraggableClasses.dragging,
handle: ".".concat(tableBaseClass.thCellInner),
onEnd: function onEnd(evt) {
var _onDragSortRef$curren2;
if (evt.newIndex === evt.oldIndex) return;
if (recover) {
var _dragColInstanceTmp;
(_dragColInstanceTmp = dragColInstanceTmp) === null || _dragColInstanceTmp === void 0 || _dragColInstanceTmp.sort(_toConsumableArray(lastColList.current));
}
var oldIndex = evt.oldIndex,
newIndex = evt.newIndex,
targetElement = evt.target;
var currentIndex = recover ? oldIndex : newIndex;
var targetIndex = recover ? newIndex : oldIndex;
var oldElement = targetElement.children[currentIndex];
var newElement = targetElement.children[targetIndex];
var current = getColumnDataByKey(originalColumns.current, oldElement.dataset.colkey);
var target = getColumnDataByKey(originalColumns.current, newElement.dataset.colkey);
if (!current || !current.colKey) {
log.error("Table", "colKey is missing in ".concat(JSON.stringify(current)));
}
if (!target || !target.colKey) {
log.error("Table", "colKey is missing in ".concat(JSON.stringify(target)));
}
currentIndex = getColumnIndexByKey(originalColumns.current, current.colKey);
targetIndex = getColumnIndexByKey(originalColumns.current, target.colKey);
var params = {
data: dragColumns.current,
currentIndex: currentIndex,
current: current,
targetIndex: targetIndex,
target: target,
newData: swapDragArrayElement(_toConsumableArray(originalColumns.current), currentIndex, targetIndex),
e: evt,
sort: "col"
};
params.currentData = params.newData;
(_onDragSortRef$curren2 = onDragSortRef.current) === null || _onDragSortRef$curren2 === void 0 || _onDragSortRef$curren2.call(onDragSortRef, params);
}
}, props.dragSortOptions);
if (!container) return;
dragColInstanceTmp = new Sortable(container, options);
return dragColInstanceTmp;
};
var registerColDragEvent = function registerColDragEvent(tableElement) {
if (!isColDraggable || !tableElement) return;
var trList = tableElement.querySelectorAll("thead > tr");
if (trList.length <= 1) {
var container = trList[0];
var dragInstanceTmp = registerOneLevelColDragEvent(container, true);
lastColList.current = dragInstanceTmp === null || dragInstanceTmp === void 0 ? void 0 : dragInstanceTmp.toArray();
} else {
trList === null || trList === void 0 || trList.forEach(function (container) {
registerOneLevelColDragEvent(container, false);
});
}
};
useEffect(function () {
var _primaryTableRef$curr, _primaryTableRef$curr2;
if (!primaryTableRef || !primaryTableRef.current) return;
registerRowDragEvent((_primaryTableRef$curr = primaryTableRef.current) === null || _primaryTableRef$curr === void 0 ? void 0 : _primaryTableRef$curr.tableElement);
registerColDragEvent((_primaryTableRef$curr2 = primaryTableRef.current) === null || _primaryTableRef$curr2 === void 0 ? void 0 : _primaryTableRef$curr2.tableHtmlElement);
var timer = setTimeout(function () {
var _primaryTableRef$curr3;
if ((_primaryTableRef$curr3 = primaryTableRef.current) !== null && _primaryTableRef$curr3 !== void 0 && _primaryTableRef$curr3.affixHeaderElement) {
registerColDragEvent(primaryTableRef.current.affixHeaderElement);
}
clearTimeout(timer);
});
return function () {
clearTimeout(timer);
};
}, [primaryTableRef, columns, dragSort, innerPagination]);
return {
isRowDraggable: isRowDraggable,
isRowHandlerDraggable: isRowHandlerDraggable,
isColDraggable: isColDraggable,
setDragSortColumns: setDragSortColumns
};
}
export { useDragSort as default };
//# sourceMappingURL=useDragSort.js.map