ztxkui 4.2.18-39 → 4.2.18-40

package/dist/TableDemo/BasicTable.js

@@ -92,6 +92,6 @@ var BasicTable = function (_a) {
             React.createElement("br", null),
             React.createElement("b", null, "\u5217\u4F38\u7F29\uFF1B"),
             "isResizableColumn\u5C5E\u6027\u9ED8\u8BA4\u4E3Atrue\uFF0C\u5982\u679C\u4E0D\u9700\u8981\u5217\u4F38\u7F29\u53EF\u4EE5\u4F20\u5165false"),
-        React.createElement(Table, { dataSource: dataSource, columns: columns, rowKey: "id", scroll: { x: 400, y: 300 } })));
+        React.createElement(Table, { dataSource: dataSource, columns: columns, rowKey: "id", scroll: { x: 400, y: 300 }, isOpenVirtualScrollBar: true })));
 };
 export default BasicTable;

package/dist/TableDemo/EditableTable.js

@@ -561,7 +561,7 @@ var EditableTable = function () {
                         });
                     }
                 },
-            }, scroll: { x: 1200, y: 400 }, showDelAllBtn: true, delAllChange: onDelAllChange, rowSelection: {
+            }, isOpenVirtualScrollBar: true, scroll: { x: 1200, y: 400 }, showDelAllBtn: true, delAllChange: onDelAllChange, rowSelection: {
                 type: 'checkbox',
             }, summaryFixed: true, summaryConfig: [
                 {

package/dist/components/Table/hooks/useVituralScrollBar.d.ts

@@ -0,0 +1,8 @@
+/// <reference types="react" />
+interface IVituralScrollBarOptions {
+    isOpen?: boolean;
+}
+export default function useVituralScrollBar(containerDomRef: any, options: IVituralScrollBarOptions): {
+    createMiniMap: JSX.Element;
+};
+export {};

package/dist/components/Table/hooks/useVituralScrollBar.js

@@ -0,0 +1,205 @@
+import { useEffect, useMemo, useRef } from 'react';
+import { Alert } from 'antd';
+import throttle from 'lodash/throttle';
+var miniMapContainerWidth = 100;
+var miniMapContainerHeight = 50;
+export default function useVituralScrollBar(containerDomRef, options) {
+    var isOpen = options.isOpen;
+    var alertRef = useRef(null);
+    var miniMapContainerRef = useRef(null);
+    var miniMapThumbRef = useRef(null);
+    var isFirstRef = useRef(false);
+    // 创建迷你地图，用于拖动滚动条位置
+    var createMiniMap = useMemo(function () {
+        if (!isOpen) {
+            return null;
+        }
+        return (React.createElement(React.Fragment, null,
+            React.createElement("div", { id: "minimap-container", ref: miniMapContainerRef, style: {
+                    position: 'absolute',
+                    width: miniMapContainerWidth,
+                    height: miniMapContainerHeight,
+                    backgroundColor: '#f0f0f0',
+                    top: '5px',
+                    right: '20px',
+                    zIndex: 999,
+                    opacity: 0.7,
+                    display: 'none',
+                    cursor: 'move',
+                } },
+                React.createElement("div", { ref: alertRef, style: {
+                        display: 'none',
+                        position: 'absolute',
+                        top: miniMapContainerHeight,
+                        left: -miniMapContainerWidth,
+                        width: 2 * miniMapContainerWidth,
+                    } },
+                    React.createElement(Alert, { message: "\u8BD5\u8BD5\u62D6\u52A8\u5C0F\u84DD\u5757\u6EDA\u52A8\u8868\u683C", type: "info", closable: true, style: { padding: '4px 8px', fontSize: '13px' } })),
+                React.createElement("div", { id: "minimap-thumb", ref: miniMapThumbRef, style: {
+                        position: 'absolute',
+                        width: 20,
+                        height: 10,
+                        backgroundColor: '#1566d2',
+                        cursor: 'pointer',
+                    }, title: "\u62D6\u52A8\u6211\uFF0C\u53EF\u6EDA\u52A8\u8868\u683C\uFF01" }))));
+    }, [isOpen]);
+    useEffect(function () {
+        var containerDom = containerDomRef.current;
+        var miniMapContainerDom = miniMapContainerRef.current;
+        var minimapThumbDom = miniMapThumbRef.current;
+        if (!isOpen) {
+            return;
+        }
+        if (!containerDom) {
+            return;
+        }
+        // 更新迷你地图的位置和大小
+        var updateMiniMap = throttle(function () {
+            if (!miniMapContainerRef.current) {
+                console.error('请将迷你地图放置在容器中...');
+                return;
+            }
+            var scrollTableBody = containerDom.querySelector('.ant-table-body');
+            var clientWidth = scrollTableBody.clientWidth;
+            var clientHeight = scrollTableBody.clientHeight;
+            var scrollWidth = scrollTableBody.scrollWidth;
+            var scrollHeight = scrollTableBody.scrollHeight;
+            var minimapThumbDom = miniMapThumbRef.current;
+            // 计算缩放比例
+            var scaleX = miniMapContainerWidth / scrollWidth;
+            var scaleY = miniMapContainerHeight / scrollHeight;
+            // 设置迷你地图的尺寸
+            minimapThumbDom.style.width = clientWidth * scaleX + 'px';
+            minimapThumbDom.style.height = clientHeight * scaleY + 'px';
+            // 更新迷你地图位置
+            updateThumbPosition();
+        }, 50);
+        // 更新迷你地图拇指的位置
+        var updateThumbPosition = throttle(function () {
+            var scrollTableBody = containerDom.querySelector('.ant-table-body');
+            var scrollTop = scrollTableBody.scrollTop;
+            var scrollLeft = scrollTableBody.scrollLeft;
+            var scrollHeight = scrollTableBody.scrollHeight;
+            var scrollWidth = scrollTableBody.scrollWidth;
+            var clientHeight = scrollTableBody.clientHeight;
+            var clientWidth = scrollTableBody.clientWidth;
+            var miniMapContainerDom = miniMapContainerRef.current;
+            var minimapThumbDom = miniMapThumbRef.current;
+            var thumbHeight = parseInt(minimapThumbDom.style.height, 10);
+            var thumbWidth = parseInt(minimapThumbDom.style.width, 10);
+            var top = (scrollTop / (scrollHeight - clientHeight)) *
+                (miniMapContainerDom.offsetHeight - thumbHeight);
+            var left = (scrollLeft / (scrollWidth - clientWidth)) *
+                (miniMapContainerDom.offsetWidth - thumbWidth);
+            minimapThumbDom.style.top = top + 'px';
+            minimapThumbDom.style.left = left + 'px';
+        }, 50);
+        // 鼠标进入时，显示当前可滚动区域的滚动条信息
+        var mouseenterFn = function () {
+            miniMapContainerDom.style.display = 'block';
+            if (!isFirstRef.current) {
+                isFirstRef.current = true;
+                alertRef.current.style.display = 'block';
+            }
+        };
+        // 鼠标进入时，移除当前可滚动区域的滚动条信息
+        var mouseleaveFn = function () {
+            miniMapContainerDom.style.display = 'none';
+        };
+        containerDom.addEventListener('mouseenter', mouseenterFn);
+        containerDom.addEventListener('mouseleave', mouseleaveFn);
+        // 监听容器滚动，更新迷你地图位置
+        var scrollTableBody = containerDom.querySelector('.ant-table-body');
+        scrollTableBody.addEventListener('scroll', updateThumbPosition);
+        // 迷你地图拇指拖拽事件
+        var isDragging = false;
+        var minimapThumbMousedownFn = function (e) {
+            isDragging = true;
+            e.preventDefault(); // 阻止默认行为
+            e.stopPropagation(); // 阻止冒泡
+        };
+        minimapThumbDom.addEventListener('mousedown', minimapThumbMousedownFn);
+        var windowMousemoveFn = throttle(function (e) {
+            if (isDragging) {
+                var rect = miniMapContainerDom.getBoundingClientRect();
+                var containerTop = rect.top;
+                var containerLeft = rect.left;
+                var containerHeight = miniMapContainerDom.offsetHeight;
+                var containerWidth = miniMapContainerDom.offsetWidth;
+                var thumbHeight = minimapThumbDom.offsetHeight;
+                var thumbWidth = minimapThumbDom.offsetWidth;
+                // 计算新的顶部和左侧位置
+                var newTop = e.clientY - containerTop - thumbHeight / 2;
+                var newLeft = e.clientX - containerLeft - thumbWidth / 2;
+                // 确保新位置在容器内
+                newTop = Math.max(0, Math.min(containerHeight - thumbHeight, newTop));
+                newLeft = Math.max(0, Math.min(containerWidth - thumbWidth, newLeft));
+                // 更新迷你地图拇指的位置
+                minimapThumbDom.style.top = newTop + 'px';
+                minimapThumbDom.style.left = newLeft + 'px';
+                // 根据迷你地图更新大容器的滚动位置
+                scrollTableBody.scrollTop =
+                    (newTop / (containerHeight - thumbHeight)) *
+                        (scrollTableBody.scrollHeight - scrollTableBody.clientHeight);
+                scrollTableBody.scrollLeft =
+                    (newLeft / (containerWidth - thumbWidth)) *
+                        (scrollTableBody.scrollWidth - scrollTableBody.clientWidth);
+            }
+        }, 50);
+        window.addEventListener('mousemove', windowMousemoveFn);
+        // 迷你地图拖拽事件
+        var isMapDragging = false;
+        var minimapMousedownFn = function (e) {
+            isMapDragging = true;
+            e.preventDefault(); // 阻止默认行为
+            e.stopPropagation(); // 阻止冒泡
+        };
+        miniMapContainerDom.addEventListener('mousedown', minimapMousedownFn);
+        var windowMapMousemoveFn = throttle(function (e) {
+            if (isMapDragging) {
+                var rect = containerDom.getBoundingClientRect();
+                var containerTop = rect.top;
+                var containerLeft = rect.left;
+                var containerHeight = scrollTableBody.offsetHeight;
+                var containerWidth = scrollTableBody.offsetWidth;
+                var thumbHeight = miniMapContainerDom.offsetHeight;
+                var thumbWidth = miniMapContainerDom.offsetWidth;
+                // 计算新的顶部和左侧位置
+                var newTop = e.clientY - containerTop - thumbHeight / 2;
+                var newLeft = e.clientX - containerLeft - thumbWidth / 2;
+                // 确保新位置在容器内
+                newTop = Math.max(0, Math.min(containerHeight - thumbHeight, newTop));
+                newLeft = Math.max(0, Math.min(containerWidth - thumbWidth, newLeft));
+                // 更新迷你地图拇指的位置
+                miniMapContainerDom.style.top = newTop + 'px';
+                miniMapContainerDom.style.left = newLeft + 'px';
+            }
+        }, 50);
+        window.addEventListener('mousemove', windowMapMousemoveFn);
+        // 地图的拖拽 和 拇指的拖拽 公用一个 window mouseUp事件
+        var windowMouseupFn = function () {
+            isDragging = false;
+            isMapDragging = false;
+        };
+        window.addEventListener('mouseup', windowMouseupFn);
+        // 监听窗口大小变化以更新迷你地图
+        window.addEventListener('resize', updateMiniMap);
+        // 初始化更新迷你地图位置大小
+        updateMiniMap();
+        return function () {
+            containerDom.removeEventListener('mouseenter', mouseenterFn);
+            containerDom.removeEventListener('mouseleave', mouseleaveFn);
+            scrollTableBody.removeEventListener('scroll', updateThumbPosition);
+            minimapThumbDom.removeEventListener('mousedown', minimapThumbMousedownFn);
+            window.removeEventListener('mouseup', windowMouseupFn);
+            window.removeEventListener('mousemove', windowMousemoveFn);
+            miniMapContainerDom.removeEventListener('mousedown', minimapMousedownFn);
+            window.removeEventListener('mousemove', windowMapMousemoveFn);
+            window.removeEventListener('resize', updateMiniMap);
+        };
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [isOpen]);
+    return {
+        createMiniMap: createMiniMap,
+    };
+}

package/dist/components/Table/table.d.ts

@@ -74,6 +74,8 @@ export interface IProps<RecordType> extends Omit<TableProps<RecordType>, 'column
     }) => void;
     /** 文本域是否以模态框的形式弹出 */
     isModalInput?: boolean;
+    /** 是否开启模拟滚动条 */
+    isOpenVirtualScrollBar?: boolean;
 }
 /**
  * TodoList

package/dist/components/Table/table.js

@@ -73,6 +73,7 @@ import TableEnhanceCell from './table-enhance-cell';
 import TableResizableTitle from './table-resizable-title';
 import useColumns, { setDynamicKey, getStorage, } from './hooks/useColumns';
 import useSelectSubtotal from './hooks/useSelectSubtotal';
+import useVituralScrollBar from './hooks/useVituralScrollBar';
 import getSummaryData from './utils/getSummaryData';
 import { domFind,
 // domParentsUntil,
@@ -132,7 +133,7 @@ function Table(props) {
     var _a, _b;
     var className = props.className, scroll = props.scroll, _c = props.pagination, pagination = _c === void 0 ? false : _c, _d = props.bordered, bordered = _d === void 0 ? true : _d, _columns = props.columns, initColumns = props.initColumns, dataSource = props.dataSource, onAddAndDelHandle = props.onAddAndDelHandle, hideAddIcon = props.hideAddIcon, addIconText = props.addIconText, hideDelIcon = props.hideDelIcon, showDelAllBtn = props.showDelAllBtn, delAllChange = props.delAllChange, delIconText = props.delIconText, hiddenColumnDynamicIcon = props.hiddenColumnDynamicIcon, showColumnDynamic = props.showColumnDynamic, showColumnDynamicKey = props.showColumnDynamicKey, summaryConfig = props.summaryConfig, summaryFixed = props.summaryFixed, summary = props.summary, onMoveRow = props.onMoveRow, onEditableSave = props.onEditableSave, onDynamicChange = props.onDynamicChange, _e = props.isResizableColumn, isResizableColumn = _e === void 0 ? true : _e, configInfo = props.configInfo, tableHandleRef = props.tableHandleRef, tableName = props.tableName, isFlex = props.isFlex, onTableChange = props.onTableChange, rowSelection = props.rowSelection, showInnerPagination = props.showInnerPagination, defaultInnerPageSize = props.defaultInnerPageSize, virtualTableKey = props.virtualTableKey, _f = props.isSort, isSort = _f === void 0 ? false : _f, onSortChange = props.onSortChange, onFillDownChange = props.onFillDownChange, _g = props.isModalInput, isModalInput = _g === void 0 ? true : _g, 
     // onRow,
-    restProps = __rest(props, ["className", "scroll", "pagination", "bordered", "columns", "initColumns", "dataSource", "onAddAndDelHandle", "hideAddIcon", "addIconText", "hideDelIcon", "showDelAllBtn", "delAllChange", "delIconText", "hiddenColumnDynamicIcon", "showColumnDynamic", "showColumnDynamicKey", "summaryConfig", "summaryFixed", "summary", "onMoveRow", "onEditableSave", "onDynamicChange", "isResizableColumn", "configInfo", "tableHandleRef", "tableName", "isFlex", "onTableChange", "rowSelection", "showInnerPagination", "defaultInnerPageSize", "virtualTableKey", "isSort", "onSortChange", "onFillDownChange", "isModalInput"]);
+    isOpenVirtualScrollBar = props.isOpenVirtualScrollBar, restProps = __rest(props, ["className", "scroll", "pagination", "bordered", "columns", "initColumns", "dataSource", "onAddAndDelHandle", "hideAddIcon", "addIconText", "hideDelIcon", "showDelAllBtn", "delAllChange", "delIconText", "hiddenColumnDynamicIcon", "showColumnDynamic", "showColumnDynamicKey", "summaryConfig", "summaryFixed", "summary", "onMoveRow", "onEditableSave", "onDynamicChange", "isResizableColumn", "configInfo", "tableHandleRef", "tableName", "isFlex", "onTableChange", "rowSelection", "showInnerPagination", "defaultInnerPageSize", "virtualTableKey", "isSort", "onSortChange", "onFillDownChange", "isModalInput", "isOpenVirtualScrollBar"]);
     var onChange = restProps.onChange;
     var classes = classNames('zt-table', className, {
         'zt-table--flex': isFlex,
@@ -816,9 +817,13 @@ function Table(props) {
         vComponents,
     ]);
     var tipRef = useSelectSubtotal(tableRef, { onMoveRow: onMoveRow, onEditableSave: onEditableSave }).tipRef;
+    var createMiniMap = useVituralScrollBar(tableRef, {
+        isOpen: isOpenVirtualScrollBar,
+    }).createMiniMap;
     return (React.createElement("div", { style: isFlex
             ? { position: 'relative', overflow: 'hidden', flex: 1 }
             : { position: 'relative', overflow: 'hidden' }, ref: tableRef },
+        createMiniMap,
         React.createElement(DndProvider, { backend: HTML5Backend, context: window },
             React.createElement(AntTable, __assign({ className: classes, bordered: bordered, pagination: showInnerPagination
                     ? pagination

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "ztxkui",
-  "version": "4.2.18-39",
+  "version": "4.2.18-40",
   "private": false,
   "description": "React components library",
   "author": "zt-front-end",