zmdms-webui 2.2.9 → 2.3.1

package/dist/es/canvastable/hooks/useScroll.js

@@ -0,0 +1,251 @@
+import { __assign } from '../../_virtual/_tslib.js';
+import { useMemo, useState, useRef, useEffect } from 'react';
+import { SCROLLBAR_SIZE, MIN_SCROLLBAR_SIZE } from '../utils/constants.js';
+import { calculateScrollbarMetrics } from '../utils/tableCalculations.js';
+import 'dayjs';
+
+/**
+ * 滚动管理 Hook - 统一管理所有滚动相关逻辑
+ *
+ * 包含功能：
+ * 1. 滚动条指标计算（useScrollbarMetrics）
+ * 2. 滚动事件处理（useTableScroll）
+ * 3. 滚动位置重置（useScrollReset）
+ */
+// ==================== 工具函数 ====================
+/**
+ * 检查两个对象是否相等（深度比较）
+ */
+var isEqual = function (obj1, obj2) {
+    return JSON.stringify(obj1) === JSON.stringify(obj2);
+};
+// ==================== Hook 1: 滚动条指标计算 ====================
+/**
+ * 滚动条指标计算 Hook
+ *
+ * 计算滚动条的各项指标，包括：
+ * - 基础指标（不依赖滚动位置）
+ * - 实际指标（包含当前滚动位置）
+ * - 最大滚动值
+ */
+var useScrollbarMetrics = function (params) {
+    var containerWidth = params.containerWidth, containerHeight = params.containerHeight, totalWidth = params.totalWidth, totalHeight = params.totalHeight, headerHeight = params.headerHeight, scrollTop = params.scrollTop, scrollLeft = params.scrollLeft;
+    // 基础滚动条指标（不依赖滚动位置，用于计算最大滚动值）
+    var baseMetrics = useMemo(function () {
+        return calculateScrollbarMetrics({
+            containerWidth: containerWidth,
+            containerHeight: containerHeight,
+            totalWidth: totalWidth,
+            totalHeight: totalHeight,
+            headerHeight: headerHeight,
+            scrollbarSize: SCROLLBAR_SIZE,
+            minScrollbarSize: MIN_SCROLLBAR_SIZE,
+            scrollTop: 0,
+            scrollLeft: 0,
+        });
+    }, [containerWidth, containerHeight, totalWidth, totalHeight, headerHeight]);
+    // 实际滚动条指标（包含当前滚动位置，用于渲染）
+    var actualMetrics = useMemo(function () {
+        return calculateScrollbarMetrics({
+            containerWidth: containerWidth,
+            containerHeight: containerHeight,
+            totalWidth: totalWidth,
+            totalHeight: totalHeight,
+            headerHeight: headerHeight,
+            scrollbarSize: SCROLLBAR_SIZE,
+            minScrollbarSize: MIN_SCROLLBAR_SIZE,
+            scrollTop: scrollTop,
+            scrollLeft: scrollLeft,
+        });
+    }, [
+        containerWidth,
+        containerHeight,
+        totalWidth,
+        totalHeight,
+        headerHeight,
+        scrollTop,
+        scrollLeft,
+    ]);
+    return {
+        baseMetrics: baseMetrics,
+        actualMetrics: actualMetrics,
+        maxScrollTop: baseMetrics.maxScrollTop,
+        maxScrollLeft: baseMetrics.maxScrollLeft,
+    };
+};
+// ==================== Hook 2: 滚动事件处理 ====================
+/**
+ * 表格滚动管理 Hook
+ *
+ * 处理滚动相关的所有事件：
+ * - Canvas 滚轮事件（使用 RAF 节流）
+ * - Container 滚轮事件（阻止默认行为）
+ * - 全局鼠标事件（拖拽滚动条）
+ */
+var useTableScroll = function (params) {
+    var canvasRef = params.canvasRef, containerRef = params.containerRef, maxScrollTop = params.maxScrollTop, maxScrollLeft = params.maxScrollLeft, onScroll = params.onScroll;
+    var _a = useState({
+        scrollLeft: 0,
+        scrollTop: 0,
+        isDraggingVertical: false,
+        isDraggingHorizontal: false,
+        dragStartY: 0,
+        dragStartX: 0,
+        dragStartScrollTop: 0,
+        dragStartScrollLeft: 0,
+    }), scrollState = _a[0], setScrollState = _a[1];
+    // 用于节流滚轮事件的refs
+    var rafIdRef = useRef(null);
+    var pendingDeltaRef = useRef({ deltaX: 0, deltaY: 0 });
+    // 滚轮事件处理（Canvas）- 使用 requestAnimationFrame 节流
+    useEffect(function () {
+        var canvas = canvasRef.current;
+        if (!canvas)
+            return;
+        var handleNativeWheel = function (e) {
+            e.preventDefault();
+            e.stopPropagation();
+            // 累积滚动增量
+            pendingDeltaRef.current.deltaX += e.deltaX;
+            pendingDeltaRef.current.deltaY += e.deltaY;
+            // 如果已经有pending的动画帧，不需要再次请求
+            if (rafIdRef.current !== null) {
+                return;
+            }
+            // 使用 requestAnimationFrame 节流更新
+            rafIdRef.current = requestAnimationFrame(function () {
+                var deltaX = pendingDeltaRef.current.deltaX;
+                var deltaY = pendingDeltaRef.current.deltaY;
+                // 重置累积的增量
+                pendingDeltaRef.current.deltaX = 0;
+                pendingDeltaRef.current.deltaY = 0;
+                rafIdRef.current = null;
+                // 批量更新状态
+                setScrollState(function (prev) {
+                    var newScrollTop = Math.max(0, Math.min(maxScrollTop, prev.scrollTop + deltaY));
+                    var newScrollLeft = Math.max(0, Math.min(maxScrollLeft, prev.scrollLeft + deltaX));
+                    if (newScrollTop !== prev.scrollTop ||
+                        newScrollLeft !== prev.scrollLeft) {
+                        onScroll === null || onScroll === void 0 ? void 0 : onScroll(newScrollLeft, newScrollTop);
+                        return __assign(__assign({}, prev), { scrollTop: newScrollTop, scrollLeft: newScrollLeft });
+                    }
+                    return prev;
+                });
+            });
+        };
+        canvas.addEventListener("wheel", handleNativeWheel, { passive: false });
+        return function () {
+            canvas.removeEventListener("wheel", handleNativeWheel);
+            // 清理pending的动画帧
+            if (rafIdRef.current !== null) {
+                cancelAnimationFrame(rafIdRef.current);
+                rafIdRef.current = null;
+            }
+        };
+    }, [maxScrollTop, maxScrollLeft, onScroll, canvasRef, setScrollState]);
+    // 滚轮事件处理（Container）
+    useEffect(function () {
+        var container = containerRef.current;
+        if (!container)
+            return;
+        var handleNativeContainerWheel = function (e) {
+            // 检查事件是否来自过滤弹框，如果是，允许滚动
+            var target = e.target;
+            var isInFilterPopover = target.closest(".canvas-table-filter-popover");
+            if (isInFilterPopover) {
+                // 允许过滤弹框内部滚动
+                return;
+            }
+            e.preventDefault();
+            e.stopPropagation();
+        };
+        container.addEventListener("wheel", handleNativeContainerWheel, {
+            passive: false,
+        });
+        return function () {
+            container.removeEventListener("wheel", handleNativeContainerWheel);
+        };
+    }, [containerRef]);
+    // 全局鼠标事件处理（拖拽滚动条）
+    useEffect(function () {
+        var handleGlobalMouseUp = function () {
+            setScrollState(function (prev) { return (__assign(__assign({}, prev), { isDraggingVertical: false, isDraggingHorizontal: false })); });
+        };
+        var handleGlobalMouseMove = function (e) {
+            if (scrollState.isDraggingVertical || scrollState.isDraggingHorizontal) {
+                e.preventDefault();
+            }
+        };
+        if (scrollState.isDraggingVertical || scrollState.isDraggingHorizontal) {
+            document.addEventListener("mouseup", handleGlobalMouseUp);
+            document.addEventListener("mousemove", handleGlobalMouseMove);
+            return function () {
+                document.removeEventListener("mouseup", handleGlobalMouseUp);
+                document.removeEventListener("mousemove", handleGlobalMouseMove);
+            };
+        }
+    }, [scrollState.isDraggingVertical, scrollState.isDraggingHorizontal]);
+    return {
+        scrollState: scrollState,
+        setScrollState: setScrollState,
+    };
+};
+// ==================== Hook 3: 滚动位置重置 ====================
+/**
+ * 滚动位置重置 Hook
+ *
+ * 当数据变化时自动重置滚动位置：
+ * - 数据长度变小时重置 Y 轴滚动
+ * - 筛选条件变化时重置 Y 轴滚动
+ * - 排序条件变化时重置 Y 轴滚动
+ *
+ * 注意：
+ * - X 轴滚动（scrollLeft）始终保持不变
+ * - 数据长度变大时不重置滚动位置
+ */
+var useScrollReset = function (params) {
+    var dataSourceLength = params.dataSourceLength, processedDataLength = params.processedDataLength, filters = params.filters, sortField = params.sortField, sortOrder = params.sortOrder, setScrollState = params.setScrollState;
+    // 使用 ref 跟踪上一次的状态
+    var prevDataSourceLengthRef = useRef(dataSourceLength);
+    var prevProcessedLengthRef = useRef(processedDataLength);
+    var prevFiltersRef = useRef(filters);
+    var prevSortRef = useRef({ field: sortField, order: sortOrder });
+    useEffect(function () {
+        // 判断数据长度是否变小了
+        var dataLengthDecreased = prevDataSourceLengthRef.current > dataSourceLength ||
+            prevProcessedLengthRef.current > processedDataLength;
+        // 判断筛选或排序是否变化
+        var filtersChanged = !isEqual(prevFiltersRef.current, filters);
+        var sortChanged = prevSortRef.current.field !== sortField ||
+            prevSortRef.current.order !== sortOrder;
+        // 只在数据变小或筛选/排序变化时重置Y轴滚动
+        var shouldResetScrollTop = dataLengthDecreased || filtersChanged || sortChanged;
+        if (shouldResetScrollTop) {
+            // 更新 ref 保存的值
+            prevDataSourceLengthRef.current = dataSourceLength;
+            prevProcessedLengthRef.current = processedDataLength;
+            prevFiltersRef.current = filters;
+            prevSortRef.current = { field: sortField, order: sortOrder };
+            // 只重置垂直滚动位置到顶部，保持水平滚动位置不变
+            setScrollState(function (prev) { return (__assign(__assign({}, prev), { scrollTop: 0 })); });
+        }
+        else {
+            // 只是数据长度变大，不重置滚动，但更新 ref
+            var dataChanged = prevDataSourceLengthRef.current !== dataSourceLength ||
+                prevProcessedLengthRef.current !== processedDataLength;
+            if (dataChanged) {
+                prevDataSourceLengthRef.current = dataSourceLength;
+                prevProcessedLengthRef.current = processedDataLength;
+            }
+        }
+    }, [
+        dataSourceLength,
+        processedDataLength,
+        filters,
+        sortField,
+        sortOrder,
+        setScrollState,
+    ]);
+};
+
+export { useScrollReset, useScrollbarMetrics, useTableScroll };

package/dist/es/canvastable/hooks/useSummaryRow.js

@@ -0,0 +1,81 @@
+import { __spreadArray } from '../../_virtual/_tslib.js';
+import { useMemo } from 'react';
+import { IS_SUMMARY } from '../../table/constant.js';
+import 'lodash/isEqual';
+import 'ahooks';
+import '../../node_modules/immutability-helper/index.js';
+import 'react/jsx-runtime';
+import { plus } from 'zmdms-utils';
+import '../../node_modules/exceljs/dist/exceljs.min.js';
+import 'dayjs';
+
+/**
+ * 合计行计算 Hook
+ */
+var useSummaryRow = function (params) {
+    var columns = params.columns, dataSource = params.dataSource;
+    var summaryRow = useMemo(function () {
+        var hasSummary = columns.some(function (col) { return col.isSummary; });
+        if (!hasSummary)
+            return null;
+        var summaryRecord = {};
+        // 找到第一个数据列（非序号列、非选择框列）
+        var firstDataColIndex = -1;
+        for (var i = 0; i < columns.length; i++) {
+            var col = columns[i];
+            if (col.key !== "__index__" && col.key !== "__selection__") {
+                firstDataColIndex = i;
+                break;
+            }
+        }
+        columns.forEach(function (column, colIndex) {
+            var dataIndex = column.dataIndex || column.key;
+            if (column.isSummary) {
+                // 计算合计值
+                var sum_1 = 0;
+                dataSource.forEach(function (record) {
+                    var value = record[dataIndex];
+                    var num = typeof value === "string" ? parseFloat(value) : value;
+                    if (!isNaN(num) &&
+                        num !== null &&
+                        num !== undefined &&
+                        !record[IS_SUMMARY]) {
+                        sum_1 = plus(sum_1, num);
+                    }
+                });
+                // 应用格式化
+                var formattedSum = sum_1;
+                if (column.precision !== undefined) {
+                    formattedSum = sum_1.toFixed(column.precision);
+                }
+                if (column.thousand) {
+                    formattedSum = Number(formattedSum).toLocaleString("en-US");
+                }
+                summaryRecord[dataIndex] = formattedSum;
+            }
+            else if (colIndex === firstDataColIndex) {
+                // 第一个数据列显示"合计"
+                summaryRecord[dataIndex] = "合计";
+            }
+            else {
+                summaryRecord[dataIndex] = "";
+            }
+        });
+        summaryRecord[IS_SUMMARY] = true;
+        return summaryRecord;
+    }, [columns, dataSource]);
+    // 包含合计行的数据源
+    var finalDataSource = useMemo(function () {
+        if (summaryRow) {
+            return __spreadArray(__spreadArray([], dataSource, true), [summaryRow], false);
+        }
+        return dataSource;
+    }, [dataSource, summaryRow]);
+    return {
+        summaryRow: summaryRow,
+        finalDataSource: finalDataSource,
+        hasSummaryRow: !!summaryRow,
+    };
+};
+
+export { useSummaryRow };