@aloudata/aloudata-design 2.17.2 → 2.17.4

package/dist/MemberPicker/index.js

@@ -342,7 +342,7 @@ var Component = function Component(props) {
           size: 20,
           src: item.photo,
           type: item.type === EUserType.USER ? 'user' : 'userGroup'
-        }, item.nickname || item.name || item.userId))
+        }, item.nickname || item.name || item.userId), item.nickname || item.name || item.userId)
       };
     }),
     optionLabelProp: multiple ? 'label' : 'tag',

package/dist/Steps/style/index.less

@@ -15,7 +15,7 @@
     flex-direction: column;
     align-items: center;
     margin: 0 4px;
-    font-size: 13px;
+    font-size: 14px;
   }
 
   .ant-steps-item-custom
@@ -51,7 +51,7 @@
     .ant-steps-item-title {
       height: 20px;
       font-weight: 500;
-      font-size: 13px;
+      font-size: 14px;
       font-style: normal;
       line-height: 20px;
     }
@@ -81,7 +81,7 @@
           .ant-steps-item-title {
             color: #9ca3af;
             font-weight: 500;
-            font-size: 13px;
+            font-size: 14px;
           }
 
           .ant-steps-item-description {

package/dist/Table/helper.d.ts

@@ -23,7 +23,7 @@ export declare function getTableColumns<TDataItem extends object>({ columns, con
         render?: ((text: any, record: TDataItem, rowIndex: number) => import("react").ReactNode) | undefined;
         ellipsis?: boolean | undefined;
         noPadding?: boolean | undefined;
-        align?: "center" | "left" | "right" | undefined;
+        align?: "left" | "center" | "right" | undefined;
         fixed?: "left" | "right" | undefined;
         sortOrder?: "ascend" | "descend" | null | undefined;
     };
@@ -41,3 +41,4 @@ export declare function getNumberFromPercentageStr(str: string): number;
 export declare function isPercentage(str: string): boolean;
 export declare function prefixCls(className: string): string;
 export declare function getRowKey<TDataItem extends object>(row: TDataItem, rowKey: ITableProps<TDataItem>['rowKey'], defaultKey?: string | number): string;
+export declare function hasFixedLeftColumn<TDataItem extends object>(columns: ITableColumn<TDataItem>[]): boolean;

package/dist/Table/helper.js

@@ -155,4 +155,9 @@ export function getRowKey(row, rowKey, defaultKey) {
     rowKeyStr = _.get(row, rowKey);
   }
   return _.toString(rowKeyStr);
+}
+export function hasFixedLeftColumn(columns) {
+  return columns.some(function (col) {
+    return col.fixed === 'left';
+  });
 }

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

@@ -0,0 +1,10 @@
+import React from 'react';
+import { ITableProps } from '../types';
+export default function useRowDnd<TDataItem extends object>(props: ITableProps<TDataItem>): IRowDndInfo<TDataItem>;
+interface IRowDndInfo<TDataItem extends object> {
+    columns: ITableProps<TDataItem>['columns'];
+    getRowRef: (record: TDataItem, rowIndex: number) => React.MutableRefObject<HTMLDivElement> | undefined;
+    draggingRowId: string | null;
+    tableData: TDataItem[];
+}
+export {};

package/dist/Table/hooks/useRowDnd.js

@@ -0,0 +1,252 @@
+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";
+// 定义拖拽项类型
+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));
+};
+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(data),
+    _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);
+  };
+
+  // 记录拖动结束
+  var handleDragComplete = function handleDragComplete() {
+    var draggingRow = tableData.find(function (item) {
+      return getRowKey(item, rowKey) === draggingRowId;
+    });
+    setDraggingRowId(null);
+    if (!draggingRow) {
+      // 不应该出现这种情况
+      console.error('draggingRow is not found');
+      return;
+    }
+    onChange(tableData, 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
+  };
+}

package/dist/Table/hooks/useRowSelection.js

@@ -17,7 +17,7 @@ function _iterableToArrayLimit(arr, i) { var _i = null == arr ? null : "undefine
 function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
 import React, { useCallback, useState } from 'react';
 import Checkbox from "../../Checkbox";
-import { getRowKey, prefixCls } from "../helper";
+import { getRowKey, hasFixedLeftColumn, prefixCls } from "../helper";
 export default function useRowSelection(props) {
   var _rowSelection$items;
   var columns = props.columns,
@@ -97,6 +97,7 @@ export default function useRowSelection(props) {
   if (!rowKey) {
     throw new Error('rowKey is required when rowSelection is enabled');
   }
+  var fixed = !!rowSelection.fixed || hasFixedLeftColumn(columns);
   var rowSelectionColumn = {
     dataIndex: '',
     title: /*#__PURE__*/React.createElement("div", {
@@ -115,7 +116,7 @@ export default function useRowSelection(props) {
         checked: isChecked
       }, checkboxProps)));
     },
-    fixed: rowSelection.fixed ? 'left' : undefined
+    fixed: fixed ? 'left' : undefined
   };
   var selectedRowKeysInCurrPage = getDataWithoutDisabled(data, rowSelection.getCheckboxProps).map(function (record) {
     return getRowKey(record, rowKey);

package/dist/Table/index.js

@@ -17,6 +17,8 @@ import _ from 'lodash';
 import ResizeObserver from 'rc-resize-observer';
 import React, { forwardRef, useCallback, useEffect, useImperativeHandle, useMemo, useState } from 'react';
 import { Empty, Spin } from '..';
+import { DndProvider } from 'react-dnd';
+import { HTML5Backend } from 'react-dnd-html5-backend';
 import ExpandCell from "./components/ExpandCell";
 import Footer from "./components/Footer";
 import { getRowKey, getTableColumns, prefixCls } from "./helper";
@@ -24,6 +26,7 @@ import useExpandable, { getExpandableConfig } from "./hooks/useExpandable";
 import useFixed from "./hooks/useFixed";
 import useRowSelection from "./hooks/useRowSelection";
 import useScroll from "./hooks/useScroll";
+import useRowDnd from "./hooks/useRowDnd";
 var HEADER_HEIGHT = 41;
 var FOOTER_HEIGHT = 52;
 function Table(props, ref) {
@@ -47,7 +50,8 @@ function Table(props, ref) {
     onRowClick = props.onRowClick,
     onError = props.onError,
     onSort = props.onSort,
-    expandable = props.expandable;
+    expandable = props.expandable,
+    rowDnd = props.rowDnd;
   var _useState = useState(null),
     _useState2 = _slicedToArray(_useState, 2),
     totalSize = _useState2[0],
@@ -87,18 +91,22 @@ function Table(props, ref) {
   });
   var expandableConfig = getExpandableConfig(expandable);
   var rowSelectionInfo = useRowSelection(props);
+  var rowDndInfo = useRowDnd(_objectSpread(_objectSpread({}, props), {}, {
+    columns: rowSelectionInfo.columns,
+    data: expandableInfo.data
+  }));
   var tableColumns = useMemo(function () {
     return getTableColumns({
-      columns: rowSelectionInfo.columns,
+      columns: rowDndInfo.columns,
       containerWidth: containerWidth || 0,
       onError: onError,
       onSort: onSort
     });
-  }, [containerWidth, onError, onSort, rowSelectionInfo.columns]);
+  }, [containerWidth, onError, onSort, rowDndInfo.columns]);
   var tableInstance = useReactTable({
     columns: tableColumns,
     // 排除掉被折叠的行
-    data: expandableInfo.data,
+    data: rowDndInfo.tableData,
     getCoreRowModel: getCoreRowModel(),
     getRowId: function getRowId(row, index) {
       return getRowKey(row, rowKey, index);
@@ -393,9 +401,18 @@ function Table(props, ref) {
     var rowNode = /*#__PURE__*/React.createElement("div", {
       key: rowId,
       "data-index": virtual ? rowData.index : rowIndex,
-      className: classnames(prefixCls('tr'), (_classnames4 = {}, _defineProperty(_classnames4, prefixCls('row-hover'), hoverRowId === rowId), _defineProperty(_classnames4, prefixCls('no-border-tr'), isShowPagination && rowIndex === rows.length - 1), _classnames4), rowClassName(row.original, rowIndex)),
+      className: classnames(prefixCls('tr'), (_classnames4 = {}, _defineProperty(_classnames4, prefixCls('row-hover'), rowDndInfo.draggingRowId ? undefined : hoverRowId === rowId), _defineProperty(_classnames4, prefixCls('row-dragging'), rowDndInfo.draggingRowId === rowId), _defineProperty(_classnames4, prefixCls('no-border-tr'), isShowPagination && rowIndex === rows.length - 1), _classnames4), rowClassName(row.original, rowIndex)),
       ref: function ref(node) {
-        return rowVirtualizer.measureElement(node);
+        // 将引用同时传递给 rowVirtualizer 和 rowDnd
+        rowVirtualizer.measureElement(node);
+
+        // 如果启用了行拖拽，则设置行引用
+        if (rowDnd && node) {
+          var rowRef = rowDndInfo.getRowRef(row.original, rowIndex);
+          if (rowRef) {
+            rowRef.current = node;
+          }
+        }
       },
       onClick: onClickRow(row.original, rowIndex),
       onMouseEnter: function onMouseEnter() {
@@ -474,6 +491,8 @@ function Table(props, ref) {
     }
   }, /*#__PURE__*/React.createElement("div", {
     className: classnames(prefixCls('main'), (_classnames7 = {}, _defineProperty(_classnames7, prefixCls('overflow-hidden'), !!y), _defineProperty(_classnames7, prefixCls('ping-left'), isPingLeft), _defineProperty(_classnames7, prefixCls('ping-right'), isPingRight), _classnames7))
-  }, tableContent)));
+  }, rowDnd ? /*#__PURE__*/React.createElement(DndProvider, {
+    backend: HTML5Backend
+  }, tableContent) : tableContent)));
 }
 export default /*#__PURE__*/forwardRef(Table);

package/dist/Table/style/index.less

@@ -226,6 +226,12 @@
           background-color: #f9fafb;
         }
       }
+
+      &.ald-table-row-dragging {
+        .ald-table-td {
+          background-color: #f9fafb;
+        }
+      }
     }
   }
 
@@ -399,3 +405,17 @@
   flex-shrink: 0;
   flex-grow: 0;
 }
+
+/** 行拖拽 **/
+.ald-table-row-dnd-item {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 100%;
+  height: 100%;
+  cursor: grab;
+
+  &:active {
+    cursor: grabbing;
+  }
+}

package/dist/Table/types.d.ts

@@ -21,6 +21,10 @@ export interface ITableProps<TDataItem extends object> {
     rowSelection?: IRowSelection<TDataItem>;
     bordered?: boolean;
     virtual?: boolean;
+    rowDnd?: {
+        fixed?: boolean;
+        onChange: (data: TDataItem[], dataItem: TDataItem) => void;
+    };
 }
 export type TRowKey<TDataItem extends object> = string | ((record: TDataItem) => string | number);
 export interface ITableCellErrorInfo {