@aloudata/aloudata-design 2.19.5 → 3.0.0-beta.2

package/dist/Table/hooks/useFixed.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 import { ColumnDef } from '@tanstack/react-table';
 export default function useFixed<TDataItem>({ columnWidths, tableColumns, y, scrollbarWidth, }: {
     columnWidths: number[];
@@ -7,6 +6,6 @@ export default function useFixed<TDataItem>({ columnWidths, tableColumns, y, scr
     scrollbarWidth: number;
 }): (index: number, isHeader?: boolean) => {
     className: string;
-    style: import("react").CSSProperties;
+    style: import('react').CSSProperties;
     fixed: "left" | "right" | undefined;
 };

package/dist/Table/hooks/useFixed.js

@@ -1,57 +1,48 @@
-function _typeof(obj) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (obj) { return typeof obj; } : function (obj) { return obj && "function" == typeof Symbol && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }, _typeof(obj); }
-function _toConsumableArray(arr) { return _arrayWithoutHoles(arr) || _iterableToArray(arr) || _unsupportedIterableToArray(arr) || _nonIterableSpread(); }
-function _nonIterableSpread() { throw new TypeError("Invalid attempt to spread non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
-function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
-function _iterableToArray(iter) { if (typeof Symbol !== "undefined" && iter[Symbol.iterator] != null || iter["@@iterator"] != null) return Array.from(iter); }
-function _arrayWithoutHoles(arr) { if (Array.isArray(arr)) return _arrayLikeToArray(arr); }
-function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) arr2[i] = arr[i]; return arr2; }
-function _defineProperty(obj, key, value) { key = _toPropertyKey(key); if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
-function _toPropertyKey(arg) { var key = _toPrimitive(arg, "string"); return _typeof(key) === "symbol" ? key : String(key); }
-function _toPrimitive(input, hint) { if (_typeof(input) !== "object" || input === null) return input; var prim = input[Symbol.toPrimitive]; if (prim !== undefined) { var res = prim.call(input, hint || "default"); if (_typeof(res) !== "object") return res; throw new TypeError("@@toPrimitive must return a primitive value."); } return (hint === "string" ? String : Number)(input); }
-import classnames from 'classnames';
-import { useCallback } from 'react';
-import { prefixCls } from "../helper";
-export default function useFixed(_ref) {
-  var columnWidths = _ref.columnWidths,
-    tableColumns = _ref.tableColumns,
-    y = _ref.y,
-    scrollbarWidth = _ref.scrollbarWidth;
-  return useCallback(function (index) {
-    var _classnames;
-    var isHeader = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : false;
-    var column = tableColumns[index];
-    var _ref2 = column.meta,
-      fixed = _ref2.fixed;
-    var style = {};
-    if (fixed === 'left') {
-      style.left = getFixedColumnOffset(columnWidths, index, true);
-    } else if (fixed === 'right') {
-      style.right = getFixedColumnOffset(columnWidths, index, false) + (isHeader && y !== undefined ? scrollbarWidth : 0);
-    }
-    return {
-      className: classnames((_classnames = {}, _defineProperty(_classnames, prefixCls('fixed-left'), fixed === 'left'), _defineProperty(_classnames, prefixCls('fixed-right'), fixed === 'right'), _classnames)),
-      style: style,
-      fixed: fixed
-    };
-  }, [tableColumns, y, scrollbarWidth, columnWidths]);
+import { cn } from "../../lib/utils.js";
+import { prefixCls } from "../helper.js";
+import { useCallback } from "react";
+//#region src/Table/hooks/useFixed.ts
+function useFixed({ columnWidths, tableColumns, y, scrollbarWidth }) {
+	return useCallback((index, isHeader = false) => {
+		const { fixed } = tableColumns[index].meta;
+		const style = {};
+		if (fixed === "left") style.left = getFixedColumnOffset(columnWidths, index, true);
+		else if (fixed === "right") style.right = getFixedColumnOffset(columnWidths, index, false) + (isHeader && y !== void 0 ? scrollbarWidth : 0);
+		return {
+			className: cn({
+				[prefixCls("fixed-left")]: fixed === "left",
+				[prefixCls("fixed-right")]: fixed === "right"
+			}),
+			style,
+			fixed
+		};
+	}, [
+		tableColumns,
+		y,
+		scrollbarWidth,
+		columnWidths
+	]);
 }
-
 /**
- * 获取固定列相对边缘的偏移量
- * @param columns 所有列
- * @param index 当前列的索引
- */
+* 获取固定列相对边缘的偏移量
+* @param columns 所有列
+* @param index 当前列的索引
+*/
 function getFixedColumnOffset(columnWidths, index, isLeft) {
-  var offset = 0;
-  var relativeIndex = index;
-  var list = _toConsumableArray(columnWidths);
-  if (!isLeft) {
-    list.reverse();
-    relativeIndex = list.length - index - 1;
-  }
-  for (var i = 0; i < relativeIndex; i++) {
-    var colWidth = columnWidths[i];
-    offset += colWidth;
-  }
-  return offset;
-}
+	let offset = 0;
+	let relativeIndex = index;
+	const list = [...columnWidths];
+	if (!isLeft) {
+		list.reverse();
+		relativeIndex = list.length - index - 1;
+	}
+	for (let i = 0; i < relativeIndex; i++) {
+		const colWidth = columnWidths[i];
+		offset += colWidth;
+	}
+	return offset;
+}
+//#endregion
+export { useFixed as default };
+
+//# sourceMappingURL=useFixed.js.map

package/dist/Table/hooks/useFixed.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useFixed.js","names":[],"sources":["../../../src/Table/hooks/useFixed.ts"],"sourcesContent":["import { ColumnDef } from '@tanstack/react-table';\nimport { cn } from '../../lib/utils';\nimport { useCallback } from 'react';\nimport { prefixCls } from '../helper';\nimport { IInnerTableColumn } from '../types';\n\nexport default function useFixed<TDataItem>({\n  columnWidths,\n  tableColumns,\n  y,\n  scrollbarWidth,\n}: {\n  columnWidths: number[];\n  tableColumns: Array<ColumnDef<TDataItem, unknown>>;\n  y?: string | number;\n  scrollbarWidth: number;\n}) {\n  return useCallback(\n    (index: number, isHeader: boolean = false) => {\n      const column = tableColumns[index];\n      const { fixed } = column.meta as IInnerTableColumn;\n\n      const style: React.CSSProperties = {};\n      if (fixed === 'left') {\n        style.left = getFixedColumnOffset(columnWidths, index, true);\n      } else if (fixed === 'right') {\n        style.right =\n          getFixedColumnOffset(columnWidths, index, false) +\n          (isHeader && y !== undefined ? scrollbarWidth : 0);\n      }\n\n      return {\n        className: cn({\n          [prefixCls('fixed-left')]: fixed === 'left',\n          [prefixCls('fixed-right')]: fixed === 'right',\n        }),\n        style: style,\n        fixed,\n      };\n    },\n    [tableColumns, y, scrollbarWidth, columnWidths],\n  );\n}\n\n/**\n * 获取固定列相对边缘的偏移量\n * @param columns 所有列\n * @param index 当前列的索引\n */\nfunction getFixedColumnOffset(\n  columnWidths: number[],\n  index: number,\n  isLeft: boolean,\n) {\n  let offset = 0;\n  let relativeIndex = index;\n  const list = [...columnWidths];\n  if (!isLeft) {\n    list.reverse();\n    relativeIndex = list.length - index - 1;\n  }\n  for (let i = 0; i < relativeIndex; i++) {\n    const colWidth = columnWidths[i];\n    offset += colWidth;\n  }\n  return offset;\n}\n"],"mappings":";;;;AAMA,SAAwB,SAAoB,EAC1C,cACA,cACA,GACA,kBAMC;AACD,QAAO,aACJ,OAAe,WAAoB,UAAU;EAE5C,MAAM,EAAE,UADO,aAAa,OACH;EAEzB,MAAM,QAA6B,EAAE;AACrC,MAAI,UAAU,OACZ,OAAM,OAAO,qBAAqB,cAAc,OAAO,KAAK;WACnD,UAAU,QACnB,OAAM,QACJ,qBAAqB,cAAc,OAAO,MAAM,IAC/C,YAAY,MAAM,SAAY,iBAAiB;AAGpD,SAAO;GACL,WAAW,GAAG;KACX,UAAU,aAAa,GAAG,UAAU;KACpC,UAAU,cAAc,GAAG,UAAU;IACvC,CAAC;GACK;GACP;GACD;IAEH;EAAC;EAAc;EAAG;EAAgB;EAAa,CAChD;;;;;;;AAQH,SAAS,qBACP,cACA,OACA,QACA;CACA,IAAI,SAAS;CACb,IAAI,gBAAgB;CACpB,MAAM,OAAO,CAAC,GAAG,aAAa;AAC9B,KAAI,CAAC,QAAQ;AACX,OAAK,SAAS;AACd,kBAAgB,KAAK,SAAS,QAAQ;;AAExC,MAAK,IAAI,IAAI,GAAG,IAAI,eAAe,KAAK;EACtC,MAAM,WAAW,aAAa;AAC9B,YAAU;;AAEZ,QAAO"}

package/dist/Table/hooks/useRowDnd.d.ts

@@ -1,4 +1,4 @@
-import React from 'react';
+import { default as React } from 'react';
 import { ITableProps } from '../types';
 export default function useRowDnd<TDataItem extends object>(props: ITableProps<TDataItem>): IRowDndInfo<TDataItem>;
 interface IRowDndInfo<TDataItem extends object> {

package/dist/Table/hooks/useRowDnd.js

@@ -1,261 +1,157 @@
-function _toConsumableArray(arr) { return _arrayWithoutHoles(arr) || _iterableToArray(arr) || _unsupportedIterableToArray(arr) || _nonIterableSpread(); }
-function _nonIterableSpread() { throw new TypeError("Invalid attempt to spread non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
-function _iterableToArray(iter) { if (typeof Symbol !== "undefined" && iter[Symbol.iterator] != null || iter["@@iterator"] != null) return Array.from(iter); }
-function _arrayWithoutHoles(arr) { if (Array.isArray(arr)) return _arrayLikeToArray(arr); }
-function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }
-function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
-function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
-function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) arr2[i] = arr[i]; return arr2; }
-function _iterableToArrayLimit(arr, i) { var _i = null == arr ? null : "undefined" != typeof Symbol && arr[Symbol.iterator] || arr["@@iterator"]; if (null != _i) { var _s, _e, _x, _r, _arr = [], _n = !0, _d = !1; try { if (_x = (_i = _i.call(arr)).next, 0 === i) { if (Object(_i) !== _i) return; _n = !1; } else for (; !(_n = (_s = _x.call(_i)).done) && (_arr.push(_s.value), _arr.length !== i); _n = !0); } catch (err) { _d = !0, _e = err; } finally { try { if (!_n && null != _i.return && (_r = _i.return(), Object(_r) !== _r)) return; } finally { if (_d) throw _e; } } return _arr; } }
-function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
-import DragLightLineSvg from "../../Icon/components/DragLightLine";
-import React, { useCallback, useMemo, useRef, useState } from 'react';
-import { useDrag, useDrop } from 'react-dnd';
-import { getEmptyImage } from 'react-dnd-html5-backend';
-import { getRowKey, hasFixedLeftColumn, prefixCls } from "../helper";
-import _ from 'lodash';
-
-// 定义拖拽项类型
-var ROW_DND_TYPE = 'ALD_TABLE_ROW_DND_TYPE';
-// 拖拽手柄组件
-var DragHandle = function DragHandle(_ref) {
-  var index = _ref.index,
-    id = _ref.id,
-    onDragging = _ref.onDragging,
-    rowRef = _ref.rowRef,
-    onDragStart = _ref.onDragStart,
-    onDragComplete = _ref.onDragComplete;
-  var ref = useRef(null);
-
-  // 使用 ref 来跟踪是否已经通知拖动开始
-  var dragStartedRef = useRef(false);
-  var _useDrag = useDrag({
-      type: ROW_DND_TYPE,
-      item: function item() {
-        // 只在拖拽真正开始且尚未通知时触发一次
-        if (!dragStartedRef.current) {
-          // 通知开始拖动，传递行的ID
-          onDragStart(id);
-          dragStartedRef.current = true;
-        }
-        return {
-          index: index,
-          id: id
-        };
-      },
-      collect: function collect(monitor) {
-        return {
-          isDragging: monitor.isDragging()
-        };
-      },
-      end: function end() {
-        // 拖拽结束时清除拖动状态和重置标志
-        onDragComplete();
-        dragStartedRef.current = false;
-      }
-    }),
-    _useDrag2 = _slicedToArray(_useDrag, 3),
-    isDragging = _useDrag2[0].isDragging,
-    drag = _useDrag2[1],
-    preview = _useDrag2[2];
-  var _useDrop = useDrop({
-      accept: ROW_DND_TYPE,
-      // @ts-ignore - react-dnd类型定义有时与实际用法不一致
-      hover: function hover(item, monitor) {
-        // 如果有行引用并且行引用有值，使用行引用来判断位置
-        var dropRef = rowRef === null || rowRef === void 0 ? void 0 : rowRef.current;
-        if (!dropRef) {
-          return;
-        }
-        var dragIndex = item.index;
-        var hoverIndex = index;
-
-        // 如果拖动的是自己，不做任何事
-        if (dragIndex === hoverIndex) {
-          return;
-        }
-
-        // 确定鼠标位置
-        var hoverBoundingRect = dropRef.getBoundingClientRect();
-        var hoverMiddleY = (hoverBoundingRect.bottom - hoverBoundingRect.top) / 2;
-        var clientOffset = monitor.getClientOffset();
-        if (!clientOffset) {
-          return;
-        }
-        var hoverClientY = clientOffset.y - hoverBoundingRect.top;
-
-        // 向下拖动，但鼠标还没过半
-        if (dragIndex < hoverIndex && hoverClientY < hoverMiddleY) {
-          return;
-        }
-
-        // 向上拖动，但鼠标还没过半
-        if (dragIndex > hoverIndex && hoverClientY > hoverMiddleY) {
-          return;
-        }
-
-        // 执行排序
-        onDragging(dragIndex, hoverIndex);
-
-        // 更新拖拽项的索引，react-dnd 官方示例推荐这样做以提高性能并避免奇怪行为
-        item.index = hoverIndex;
-      }
-    }),
-    _useDrop2 = _slicedToArray(_useDrop, 2),
-    drop = _useDrop2[1];
-
-  // 将 drag 连接到手柄 ref 上
-  drag(ref);
-
-  // 设置放置目标
-  if (rowRef !== null && rowRef !== void 0 && rowRef.current) {
-    drop(rowRef.current);
-  }
-  preview(getEmptyImage());
-  return /*#__PURE__*/React.createElement("div", {
-    ref: ref,
-    className: prefixCls('row-dnd-item'),
-    style: {
-      cursor: 'move',
-      opacity: isDragging ? 0.5 : 1
-    }
-  }, /*#__PURE__*/React.createElement(DragLightLineSvg, null));
+import Memo from "../../Icon/components/DragLightLine.js";
+import { getRowKey, hasFixedLeftColumn, prefixCls } from "../helper.js";
+import React, { useCallback, useMemo, useRef, useState } from "react";
+import { jsx } from "react/jsx-runtime";
+import _ from "lodash";
+import { useDrag, useDrop } from "react-dnd";
+import { getEmptyImage } from "react-dnd-html5-backend";
+//#region src/Table/hooks/useRowDnd.tsx
+var ROW_DND_TYPE = "ALD_TABLE_ROW_DND_TYPE";
+var DragHandle = ({ index, id, onDragging, rowRef, onDragStart, onDragComplete }) => {
+	const ref = useRef(null);
+	const dragStartedRef = useRef(false);
+	const [{ isDragging }, drag, preview] = useDrag({
+		type: ROW_DND_TYPE,
+		item: () => {
+			if (!dragStartedRef.current) {
+				onDragStart(id);
+				dragStartedRef.current = true;
+			}
+			return {
+				index,
+				id
+			};
+		},
+		collect: (monitor) => ({ isDragging: monitor.isDragging() }),
+		end: () => {
+			onDragComplete();
+			dragStartedRef.current = false;
+		}
+	});
+	const [, drop] = useDrop({
+		accept: ROW_DND_TYPE,
+		hover(item, monitor) {
+			const dropRef = rowRef?.current;
+			if (!dropRef) return;
+			const dragIndex = item.index;
+			const hoverIndex = index;
+			if (dragIndex === hoverIndex) return;
+			const hoverBoundingRect = dropRef.getBoundingClientRect();
+			const hoverMiddleY = (hoverBoundingRect.bottom - hoverBoundingRect.top) / 2;
+			const clientOffset = monitor.getClientOffset();
+			if (!clientOffset) return;
+			const hoverClientY = clientOffset.y - hoverBoundingRect.top;
+			if (dragIndex < hoverIndex && hoverClientY < hoverMiddleY) return;
+			if (dragIndex > hoverIndex && hoverClientY > hoverMiddleY) return;
+			onDragging(dragIndex, hoverIndex);
+			item.index = hoverIndex;
+		}
+	});
+	drag(ref);
+	if (rowRef?.current) drop(rowRef.current);
+	preview(getEmptyImage());
+	return /* @__PURE__ */ jsx("div", {
+		ref,
+		className: prefixCls("row-dnd-item"),
+		style: {
+			cursor: "move",
+			opacity: isDragging ? .5 : 1
+		},
+		children: /* @__PURE__ */ jsx(Memo, {})
+	});
 };
-export default function useRowDnd(props) {
-  var columns = props.columns,
-    rowDnd = props.rowDnd,
-    data = props.data,
-    rowKey = props.rowKey;
-  // 跟踪当前正在拖动的行的ID
-  var _useState = useState(null),
-    _useState2 = _slicedToArray(_useState, 2),
-    draggingRowId = _useState2[0],
-    setDraggingRowId = _useState2[1];
-
-  // 为每一行创建一个 ref，使用 useMemo 缓存 Map 实例
-  var rowRefs = useMemo(function () {
-    return new Map();
-  }, []);
-
-  // 当拖拽过程中，临时存储数据
-  var _useState3 = useState([]),
-    _useState4 = _slicedToArray(_useState3, 2),
-    draggingTempData = _useState4[0],
-    setDraggingTempData = _useState4[1];
-  var tableData = useMemo(function () {
-    // 拖拽过程中，使用临时数据，这样外部调用方可以不用关心拖拽过程中的数据变化
-    if (draggingRowId) {
-      return draggingTempData;
-    }
-    return data;
-  }, [data, draggingRowId, draggingTempData]);
-
-  // 获取行的 ref，用于设置拖拽预览
-  var getRowRef = useCallback(function (record) {
-    var key = getRowKey(record, rowKey);
-    if (!rowRefs.has(key)) {
-      rowRefs.set(key, /*#__PURE__*/React.createRef());
-    }
-    return rowRefs.get(key);
-  }, [rowKey, rowRefs]);
-  var defaultInfo = useMemo(function () {
-    return {
-      columns: columns,
-      getRowRef: function getRowRef() {
-        return undefined;
-      },
-      draggingRowId: null,
-      tableData: data
-    };
-  }, [columns, data]);
-  if (!rowDnd) {
-    return defaultInfo;
-  }
-  if (props.expandable) {
-    console.error('rowDnd and expandable mode cannot be used together');
-    return defaultInfo;
-  }
-  if (!props.rowKey) {
-    // 如果rowKey没有设置，则无法进行拖拽，因为必须知道每行的唯一标识
-    console.error('rowKey is required in rowDnd mode');
-    return defaultInfo;
-  }
-  var rowDndFixed = rowDnd.fixed,
-    onChange = rowDnd.onChange;
-  var fixed = rowDndFixed || hasFixedLeftColumn(columns);
-  var handleDragging = function handleDragging(dragIndex, hoverIndex) {
-    // 使用函数式更新，确保基于最新的状态进行操作
-    setDraggingTempData(function (currentData) {
-      var newData = _toConsumableArray(currentData);
-
-      // 确保 dragIndex 在有效范围内
-      if (dragIndex < 0 || dragIndex >= newData.length) {
-        console.warn("Drag index ".concat(dragIndex, " out of bounds for data length ").concat(newData.length));
-        return currentData; // 返回当前状态，不作修改
-      }
-
-      // 保存被拖拽的行
-      var draggedRow = newData.splice(dragIndex, 1)[0];
-
-      // 如果因为某些原因未能获取到拖拽的行（理论上不应发生）
-      if (draggedRow === undefined) {
-        console.warn("Dragged item at index ".concat(dragIndex, " was undefined during splice."));
-        return currentData; // 返回当前状态，不作修改
-      }
-
-      // 插入到新位置
-      newData.splice(hoverIndex, 0, draggedRow);
-      return newData;
-    });
-  };
-
-  // 记录拖动开始
-  var handleDragStart = function handleDragStart(id) {
-    setDraggingRowId(id);
-    setDraggingTempData(_.cloneDeep(data));
-  };
-
-  // 记录拖动结束
-  var handleDragComplete = function handleDragComplete() {
-    // 必须在清空 draggingRowId 之前先找到 draggingRow
-    // 因为 tableData 依赖 draggingRowId，清空后 tableData 会切换回原始 data
-    var draggingRow = tableData.find(function (item) {
-      return getRowKey(item, rowKey) === draggingRowId;
-    });
-    if (!draggingRow) {
-      // 不应该出现这种情况
-      console.error('draggingRow is not found');
-      setDraggingRowId(null);
-      return;
-    }
-    // 保存当前的 tableData，因为清空 draggingRowId 后 tableData 会变化
-    var finalData = tableData;
-    setDraggingRowId(null);
-    setDraggingTempData([]);
-    onChange(finalData, draggingRow);
-  };
-  var dndColumn = {
-    dataIndex: '',
-    title: '',
-    width: 48,
-    render: function render(text, record, rowIndex) {
-      var key = getRowKey(record, rowKey);
-      var rowRef = getRowRef(record);
-      return /*#__PURE__*/React.createElement(DragHandle, {
-        index: rowIndex,
-        id: key,
-        onDragging: handleDragging,
-        onDragStart: handleDragStart,
-        onDragComplete: handleDragComplete,
-        rowRef: rowRef
-      });
-    },
-    fixed: fixed ? 'left' : undefined
-  };
-  return {
-    columns: [dndColumn].concat(_toConsumableArray(columns)),
-    getRowRef: getRowRef,
-    draggingRowId: draggingRowId,
-    tableData: tableData
-  };
-}
+function useRowDnd(props) {
+	const { columns, rowDnd, data, rowKey } = props;
+	const [draggingRowId, setDraggingRowId] = useState(null);
+	const rowRefs = useMemo(() => /* @__PURE__ */ new Map(), []);
+	const [draggingTempData, setDraggingTempData] = useState([]);
+	const tableData = useMemo(() => {
+		if (draggingRowId) return draggingTempData;
+		return data;
+	}, [
+		data,
+		draggingRowId,
+		draggingTempData
+	]);
+	const getRowRef = useCallback((record) => {
+		const key = getRowKey(record, rowKey);
+		if (!rowRefs.has(key)) rowRefs.set(key, React.createRef());
+		return rowRefs.get(key);
+	}, [rowKey, rowRefs]);
+	const defaultInfo = useMemo(() => {
+		return {
+			columns,
+			getRowRef: () => void 0,
+			draggingRowId: null,
+			tableData: data
+		};
+	}, [columns, data]);
+	if (!rowDnd) return defaultInfo;
+	if (props.expandable) {
+		console.error("rowDnd and expandable mode cannot be used together");
+		return defaultInfo;
+	}
+	if (!props.rowKey) {
+		console.error("rowKey is required in rowDnd mode");
+		return defaultInfo;
+	}
+	const { fixed: rowDndFixed, onChange } = rowDnd;
+	const fixed = rowDndFixed || hasFixedLeftColumn(columns);
+	const handleDragging = (dragIndex, hoverIndex) => {
+		setDraggingTempData((currentData) => {
+			const newData = [...currentData];
+			if (dragIndex < 0 || dragIndex >= newData.length) {
+				console.warn(`Drag index ${dragIndex} out of bounds for data length ${newData.length}`);
+				return currentData;
+			}
+			const draggedRow = newData.splice(dragIndex, 1)[0];
+			if (draggedRow === void 0) {
+				console.warn(`Dragged item at index ${dragIndex} was undefined during splice.`);
+				return currentData;
+			}
+			newData.splice(hoverIndex, 0, draggedRow);
+			return newData;
+		});
+	};
+	const handleDragStart = (id) => {
+		setDraggingRowId(id);
+		setDraggingTempData(_.cloneDeep(data));
+	};
+	const handleDragComplete = () => {
+		const draggingRow = tableData.find((item) => getRowKey(item, rowKey) === draggingRowId);
+		if (!draggingRow) {
+			console.error("draggingRow is not found");
+			setDraggingRowId(null);
+			return;
+		}
+		const finalData = tableData;
+		setDraggingRowId(null);
+		setDraggingTempData([]);
+		onChange(finalData, draggingRow);
+	};
+	return {
+		columns: [{
+			dataIndex: "",
+			title: "",
+			width: 48,
+			render: (text, record, rowIndex) => {
+				return /* @__PURE__ */ jsx(DragHandle, {
+					index: rowIndex,
+					id: getRowKey(record, rowKey),
+					onDragging: handleDragging,
+					onDragStart: handleDragStart,
+					onDragComplete: handleDragComplete,
+					rowRef: getRowRef(record)
+				});
+			},
+			fixed: fixed ? "left" : void 0
+		}, ...columns],
+		getRowRef,
+		draggingRowId,
+		tableData
+	};
+}
+//#endregion
+export { useRowDnd as default };
+
+//# sourceMappingURL=useRowDnd.js.map

package/dist/Table/hooks/useRowDnd.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useRowDnd.js","names":[],"sources":["../../../src/Table/hooks/useRowDnd.tsx"],"sourcesContent":["import DragLightLineSvg from '../../Icon/components/DragLightLine';\nimport React, { useCallback, useMemo, useRef, useState } from 'react';\nimport { useDrag, useDrop, DragSourceMonitor } from 'react-dnd';\nimport { getEmptyImage } from 'react-dnd-html5-backend';\nimport { getRowKey, hasFixedLeftColumn, prefixCls } from '../helper';\nimport { ITableColumn, ITableProps } from '../types';\nimport _ from 'lodash';\n\n// 定义拖拽项类型\nconst ROW_DND_TYPE = 'ALD_TABLE_ROW_DND_TYPE';\n\ninterface DragItem {\n  index: number;\n  id: string;\n}\n\n// 拖拽手柄组件\nconst DragHandle = ({\n  index,\n  id,\n  onDragging,\n  rowRef,\n  onDragStart,\n  onDragComplete,\n}: {\n  index: number;\n  id: string;\n  onDragging: (dragIndex: number, hoverIndex: number) => void;\n  rowRef?: React.RefObject<HTMLDivElement>;\n  onDragStart: (id: string) => void;\n  onDragComplete: () => void;\n}) => {\n  const ref = useRef<HTMLDivElement>(null);\n\n  // 使用 ref 来跟踪是否已经通知拖动开始\n  const dragStartedRef = useRef(false);\n\n  const [{ isDragging }, drag, preview] = useDrag({\n    type: ROW_DND_TYPE,\n    item: () => {\n      // 只在拖拽真正开始且尚未通知时触发一次\n      if (!dragStartedRef.current) {\n        // 通知开始拖动，传递行的ID\n        onDragStart(id);\n        dragStartedRef.current = true;\n      }\n\n      return { index, id };\n    },\n    collect: (monitor: DragSourceMonitor) => ({\n      isDragging: monitor.isDragging(),\n    }),\n    end: () => {\n      // 拖拽结束时清除拖动状态和重置标志\n      onDragComplete();\n      dragStartedRef.current = false;\n    },\n  });\n\n  const [, drop] = useDrop({\n    accept: ROW_DND_TYPE,\n    // @ts-ignore - react-dnd类型定义有时与实际用法不一致\n    hover(item: DragItem, monitor) {\n      // 如果有行引用并且行引用有值，使用行引用来判断位置\n      const dropRef = rowRef?.current;\n\n      if (!dropRef) {\n        return;\n      }\n\n      const dragIndex = item.index;\n      const hoverIndex = index;\n\n      // 如果拖动的是自己，不做任何事\n      if (dragIndex === hoverIndex) {\n        return;\n      }\n\n      // 确定鼠标位置\n      const hoverBoundingRect = dropRef.getBoundingClientRect();\n      const hoverMiddleY =\n        (hoverBoundingRect.bottom - hoverBoundingRect.top) / 2;\n      const clientOffset = monitor.getClientOffset();\n\n      if (!clientOffset) {\n        return;\n      }\n\n      const hoverClientY = clientOffset.y - hoverBoundingRect.top;\n\n      // 向下拖动，但鼠标还没过半\n      if (dragIndex < hoverIndex && hoverClientY < hoverMiddleY) {\n        return;\n      }\n\n      // 向上拖动，但鼠标还没过半\n      if (dragIndex > hoverIndex && hoverClientY > hoverMiddleY) {\n        return;\n      }\n\n      // 执行排序\n      onDragging(dragIndex, hoverIndex);\n\n      // 更新拖拽项的索引，react-dnd 官方示例推荐这样做以提高性能并避免奇怪行为\n      item.index = hoverIndex;\n    },\n  });\n\n  // 将 drag 连接到手柄 ref 上\n  drag(ref);\n\n  // 设置放置目标\n  if (rowRef?.current) {\n    drop(rowRef.current);\n  }\n\n  preview(getEmptyImage());\n\n  return (\n    <div\n      ref={ref}\n      className={prefixCls('row-dnd-item')}\n      style={{ cursor: 'move', opacity: isDragging ? 0.5 : 1 }}\n    >\n      <DragLightLineSvg />\n    </div>\n  );\n};\n\nexport default function useRowDnd<TDataItem extends object>(\n  props: ITableProps<TDataItem>,\n): IRowDndInfo<TDataItem> {\n  const { columns, rowDnd, data, rowKey } = props;\n  // 跟踪当前正在拖动的行的ID\n  const [draggingRowId, setDraggingRowId] = useState<string | null>(null);\n\n  // 为每一行创建一个 ref，使用 useMemo 缓存 Map 实例\n  const rowRefs = useMemo(\n    () => new Map<string, React.RefObject<HTMLDivElement>>(),\n    [],\n  );\n\n  // 当拖拽过程中，临时存储数据\n  const [draggingTempData, setDraggingTempData] = useState<TDataItem[]>([]);\n\n  const tableData = useMemo(() => {\n    // 拖拽过程中，使用临时数据，这样外部调用方可以不用关心拖拽过程中的数据变化\n    if (draggingRowId) {\n      return draggingTempData;\n    }\n    return data;\n  }, [data, draggingRowId, draggingTempData]);\n\n  // 获取行的 ref，用于设置拖拽预览\n  const getRowRef = useCallback(\n    (record: TDataItem) => {\n      const key = getRowKey(record, rowKey);\n      if (!rowRefs.has(key)) {\n        rowRefs.set(\n          key,\n          React.createRef<HTMLDivElement>() as React.MutableRefObject<HTMLDivElement>,\n        );\n      }\n      return rowRefs.get(key) as React.MutableRefObject<HTMLDivElement>;\n    },\n    [rowKey, rowRefs],\n  );\n\n  const defaultInfo = useMemo(() => {\n    return {\n      columns,\n      getRowRef: () => undefined,\n      draggingRowId: null,\n      tableData: data,\n    };\n  }, [columns, data]);\n\n  if (!rowDnd) {\n    return defaultInfo;\n  }\n  if (props.expandable) {\n    console.error('rowDnd and expandable mode cannot be used together');\n    return defaultInfo;\n  }\n  if (!props.rowKey) {\n    // 如果rowKey没有设置，则无法进行拖拽，因为必须知道每行的唯一标识\n    console.error('rowKey is required in rowDnd mode');\n    return defaultInfo;\n  }\n  const { fixed: rowDndFixed, onChange } = rowDnd;\n\n  const fixed = rowDndFixed || hasFixedLeftColumn(columns);\n\n  const handleDragging = (dragIndex: number, hoverIndex: number) => {\n    // 使用函数式更新，确保基于最新的状态进行操作\n    setDraggingTempData((currentData) => {\n      const newData = [...currentData];\n\n      // 确保 dragIndex 在有效范围内\n      if (dragIndex < 0 || dragIndex >= newData.length) {\n        console.warn(\n          `Drag index ${dragIndex} out of bounds for data length ${newData.length}`,\n        );\n        return currentData; // 返回当前状态，不作修改\n      }\n\n      // 保存被拖拽的行\n      const draggedRow = newData.splice(dragIndex, 1)[0];\n\n      // 如果因为某些原因未能获取到拖拽的行（理论上不应发生）\n      if (draggedRow === undefined) {\n        console.warn(\n          `Dragged item at index ${dragIndex} was undefined during splice.`,\n        );\n        return currentData; // 返回当前状态，不作修改\n      }\n\n      // 插入到新位置\n      newData.splice(hoverIndex, 0, draggedRow);\n\n      return newData;\n    });\n  };\n\n  // 记录拖动开始\n  const handleDragStart = (id: string) => {\n    setDraggingRowId(id);\n    setDraggingTempData(_.cloneDeep(data));\n  };\n\n  // 记录拖动结束\n  const handleDragComplete = () => {\n    // 必须在清空 draggingRowId 之前先找到 draggingRow\n    // 因为 tableData 依赖 draggingRowId，清空后 tableData 会切换回原始 data\n    const draggingRow = tableData.find(\n      (item) => getRowKey(item, rowKey) === draggingRowId,\n    );\n    if (!draggingRow) {\n      // 不应该出现这种情况\n      console.error('draggingRow is not found');\n      setDraggingRowId(null);\n      return;\n    }\n    // 保存当前的 tableData，因为清空 draggingRowId 后 tableData 会变化\n    const finalData = tableData;\n    setDraggingRowId(null);\n    setDraggingTempData([]);\n    onChange(finalData, draggingRow);\n  };\n\n  const dndColumn: ITableColumn<TDataItem> = {\n    dataIndex: '',\n    title: '',\n    width: 48,\n    render: (text: unknown, record: TDataItem, rowIndex: number) => {\n      const key = getRowKey(record, rowKey);\n      const rowRef = getRowRef(record);\n      return (\n        <DragHandle\n          index={rowIndex}\n          id={key}\n          onDragging={handleDragging}\n          onDragStart={handleDragStart}\n          onDragComplete={handleDragComplete}\n          rowRef={rowRef}\n        />\n      );\n    },\n    fixed: fixed ? 'left' : undefined,\n  };\n\n  return {\n    columns: [dndColumn, ...columns],\n    getRowRef,\n    draggingRowId,\n    tableData,\n  };\n}\n\ninterface IRowDndInfo<TDataItem extends object> {\n  columns: ITableProps<TDataItem>['columns'];\n  getRowRef: (\n    record: TDataItem,\n    rowIndex: number,\n  ) => React.MutableRefObject<HTMLDivElement> | undefined;\n  draggingRowId: string | null;\n  tableData: TDataItem[];\n}\n"],"mappings":"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"}

package/dist/Table/hooks/useRowSelection.d.ts

@@ -1,4 +1,4 @@
-import React from 'react';
+import { default as React } from 'react';
 import { ITableProps } from '../types';
 export default function useRowSelection<TDataItem extends object>(props: ITableProps<TDataItem> & {
     isExpandable?: boolean;