tdesign-react
Version:
TDesign Component for React
281 lines (272 loc) • 13.3 kB
JavaScript
/**
* tdesign v1.16.2
* (c) 2025 tdesign
* @license MIT
*/
;
Object.defineProperty(exports, '__esModule', { value: true });
var toConsumableArray = require('../../_chunks/dep-a7fe58de.js');
var defineProperty = require('../../_chunks/dep-0fe55884.js');
var slicedToArray = require('../../_chunks/dep-5cb0d66d.js');
var React = require('react');
var Sortable = require('sortablejs');
var log = require('../../_chunks/dep-05f87b98.js');
var utils = require('../../_chunks/dep-ce617d4e.js');
var table_hooks_useClassName = require('./useClassName.js');
var _util_style = require('../../_chunks/dep-e0735b5f.js');
var hooks_useLatest = require('../../hooks/useLatest.js');
var get = require('../../_chunks/dep-b7bd245a.js');
require('../../_chunks/dep-737b8bd8.js');
require('../../_chunks/dep-b325182b.js');
require('../../_chunks/dep-967e785f.js');
require('../../_chunks/dep-4ce0670e.js');
require('../../_chunks/dep-5c8525ea.js');
require('../../hooks/useConfig.js');
require('../../config-provider/ConfigContext.js');
require('../../_chunks/dep-17dea53e.js');
require('../../_chunks/dep-a0cbf081.js');
require('dayjs');
require('../../_chunks/dep-481a1ecc.js');
require('../../_chunks/dep-474eb386.js');
require('../../_chunks/dep-3b256bc0.js');
require('../../_chunks/dep-3448f35f.js');
require('../../_chunks/dep-b6a3ada9.js');
require('../../_chunks/dep-735cd5b9.js');
require('../../_chunks/dep-bdafd287.js');
require('../../_chunks/dep-4d300b8f.js');
require('../../_chunks/dep-3332ad6f.js');
require('../../_chunks/dep-98783318.js');
require('../../_chunks/dep-fc884a8e.js');
require('../../_chunks/dep-008b21d4.js');
require('../../_chunks/dep-9193eded.js');
require('../../_chunks/dep-afe817f9.js');
require('../../_chunks/dep-0b70c7ec.js');
require('../../_chunks/dep-a1e3e59b.js');
require('../../_chunks/dep-24ab8f68.js');
require('../../_chunks/dep-753b7d52.js');
require('../../_chunks/dep-b304bc94.js');
require('../../_chunks/dep-5dd1b13c.js');
require('../../_chunks/dep-eb2203ae.js');
require('../../_chunks/dep-7659797a.js');
function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
var Sortable__default = /*#__PURE__*/_interopDefaultLegacy(Sortable);
function swapDragArrayElement(data, currentIndex, targetIndex) {
var newData = toConsumableArray._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._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 = table_hooks_useClassName["default"](),
tableDraggableClasses = _useClassName.tableDraggableClasses,
tableBaseClass = _useClassName.tableBaseClass,
tableFullRowClasses = _useClassName.tableFullRowClasses;
var _useState = React.useState(props.columns || []),
_useState2 = slicedToArray._slicedToArray(_useState, 2),
columns = _useState2[0],
setDragSortColumns = _useState2[1];
var dragCol = React.useMemo(function () {
return columns.find(function (item) {
return item.colKey === "drag";
});
}, [columns]);
var isRowDraggable = React.useMemo(function () {
return sortOnRowDraggable || dragSort === "row";
}, [dragSort, sortOnRowDraggable]);
var isRowHandlerDraggable = React.useMemo(function () {
return ["row-handler", "row-handler-col"].includes(dragSort) && !!dragCol;
}, [dragSort, dragCol]);
var isColDraggable = React.useMemo(function () {
return ["col", "row-handler-col"].includes(dragSort);
}, [dragSort]);
var lastRowList = React.useRef([]);
var tData = React.useRef(null);
var lastColList = React.useRef([]);
var dragColumns = React.useRef([]);
var originalColumns = React.useRef([]);
var dragColInstanceTmp = null;
if (props.sortOnRowDraggable) {
log.log.warn("Table", "`sortOnRowDraggable` is going to be deprecated, use dragSort='row' instead.");
}
React.useEffect(function () {
lastRowList.current = data.map(function (item) {
return String(get.get(item, props.rowKey));
});
tData.current = data;
}, [data, props.rowKey]);
React.useEffect(function () {
lastColList.current = props.columns.map(function (t) {
return t.colKey;
});
dragColumns.current = props.columns;
originalColumns.current = props.columns;
}, [props.columns]);
var onDragSortRef = hooks_useLatest["default"](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 _element$children, _dragInstanceTmp2;
if ((element === null || element === void 0 || (_element$children = element.children) === null || _element$children === void 0 ? void 0 : _element$children.length) === 0 || !isRowHandlerDraggable && !isRowDraggable) return;
var dragInstanceTmp = null;
var dragContainer = element === null || element === void 0 ? void 0 : element.querySelector("tbody");
if (!dragContainer) {
console.error("tbody does not exist.");
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 !_util_style.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._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._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__default["default"](dragContainer, _objectSpread({}, baseOptions));
} else if (isRowHandlerDraggable) {
dragInstanceTmp = new Sortable__default["default"](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._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 = utils.getColumnDataByKey(originalColumns.current, oldElement.dataset.colkey);
var target = utils.getColumnDataByKey(originalColumns.current, newElement.dataset.colkey);
if (!current || !current.colKey) {
log.log.error("Table", "colKey is missing in ".concat(JSON.stringify(current)));
}
if (!target || !target.colKey) {
log.log.error("Table", "colKey is missing in ".concat(JSON.stringify(target)));
}
currentIndex = utils.getColumnIndexByKey(originalColumns.current, current.colKey);
targetIndex = utils.getColumnIndexByKey(originalColumns.current, target.colKey);
var params = {
data: dragColumns.current,
currentIndex: currentIndex,
current: current,
targetIndex: targetIndex,
target: target,
newData: swapDragArrayElement(toConsumableArray._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__default["default"](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);
});
}
};
React.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
};
}
exports["default"] = useDragSort;
//# sourceMappingURL=useDragSort.js.map