@cqsjjb/jjb-react-admin-component 3.3.5 → 3.3.6

package/Table/README.md

@@ -33,4 +33,4 @@ function App() {
 | disabledResizer | 是否禁用内容区滚动，设置true自动将适配内容区滚动高度                                 | `boolean` | false |
 | storeIndex      | 当一个路由下存在多个表格的情况下 需要给每一个表格设置一个唯一存储索引 若没有设置则使用默认索引，请注意缓存数据会被覆盖 | `number`  |     - |
 
-其他属性参考 https://ant-design.antgroup.com/components/table-cn#api
+其他属性参考 https://ant-design.antgroup.com/components/table-cn#api

package/Table/index.d.ts

@@ -3,64 +3,15 @@ import * as React from 'react';
 // @ts-ignore
 import type { TableProps } from 'antd';
 
-/**
- * 列设置配置项
- */
-export interface SettingOptionType {
-  /** 是否可拖拽排序 */
-  draggable?: boolean;
-  /** 是否显示复选框 */
-  checkable?: boolean;
-  /** 是否显示列表项选项 */
-  showListItemOption?: boolean;
-  /** 重置时是否恢复选中状态 */
-  checkedReset?: boolean;
-  /** 列表高度 */
-  listsHeight?: number;
-  /** 额外内容 */
-  extra?: React.ReactNode;
-  /** 子元素 */
-  children?: React.ReactNode;
-  /** 自定义设置图标 */
-  settingIcon?: React.ReactNode;
-}
-
-/**
- * ProTable options 配置项
- */
-export interface OptionConfig {
-  /** 是否显示密度切换 */
-  density?: boolean;
-  /** 是否显示全屏按钮，或自定义函数 */
-  fullScreen?: boolean | ((e: React.MouseEvent<HTMLSpanElement>, action?: any) => void);
-  /** 是否显示刷新按钮，或自定义函数 */
-  reload?: boolean | ((e: React.MouseEvent<HTMLSpanElement>, action?: any) => void);
-  /** 列设置配置 */
-  setting?: boolean | SettingOptionType;
-  /** 搜索配置 */
-  search?: boolean | {
-    name?: string;
-    [key: string]: any;
-  };
-  /** 自定义刷新图标 */
-  reloadIcon?: React.ReactNode;
-  /** 自定义密度图标 */
-  densityIcon?: React.ReactNode;
-}
-
 export interface OverTableProps extends TableProps {
+  // 是否禁用内容区滚动，默认-false
+  disabledResizer?: boolean;
   // 当一个路由下存在多个表格的情况下 需要给每一个表格设置一个唯一存储索引 若没有设置则使用默认索引，请注意缓存数据会被覆盖
   storeIndex?: string;
-  // 是否启用自动计算滚动高度，默认-true
-  enableAutoScrollY?: boolean;
-  // ProTable options 配置项
-  options?: OptionConfig | false;
-  // 自定义包裹样式
-  wrapperStyle?: React.CSSProperties;
 }
 
 interface TableFc extends React.FC<OverTableProps> {
 }
 
 declare const Table: TableFc;
-export default Table;
+export default Table;

package/Table/index.js

@@ -1,101 +1,118 @@
 function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
-import React, { useRef, useEffect, useState, useCallback } from 'react';
+import React from 'react';
+import { tools } from '@cqsjjb/jjb-common-lib';
 import { ProTable } from '@ant-design/pro-components';
+import { useAntdResizableHeader } from 'use-antd-resizable-header';
+import { antPrefix, setTableSize, getTableSize, getPersistenceKey } from './utils';
 import './index.less';
-import { antPrefix } from './utils';
+require('use-antd-resizable-header/dist/style.css');
 export default function TablePro(props) {
   const prefix = antPrefix || 'ant';
   const baseCls = `.${prefix}-table`;
-  const ref = useRef(null);
+  const tableCls = `${baseCls}-wrapper`;
   const tableBodyCls = `${baseCls}-body`;
-  const tablePaginationCls = `${baseCls}-pagination`;
-  const tableFooterCls = `${baseCls}-footer`;
   const {
-    enableAutoScrollY = true,
-    options = {
-      reload: false,
-      density: true,
-      fullScreen: true,
-      setting: {
-        checkedReset: true,
-        draggable: false,
-        checkable: true
-      }
-    },
-    wrapperStyle = {},
-    ...restProps
+    storeIndex
   } = props;
-  const [scrollY, setScrollY] = useState(undefined);
-  const timerRef = useRef(null);
-  const calcTableScrollY = () => {
-    const tableBody = ref.current?.querySelector?.(tableBodyCls);
-    const tableBodyRect = tableBody?.getBoundingClientRect();
-    const tableFooter = ref.current?.querySelector?.(tableFooterCls);
-    const tableFooterRect = tableFooter?.getBoundingClientRect();
-    const tablePagination = ref.current?.querySelector?.(tablePaginationCls);
-    const tablePaginationRect = tablePagination?.getBoundingClientRect();
-    const tableFooterHeight = tableFooterRect?.height || 0;
-    const tablePaginationMargin = 32;
-    const tablePaginationHeight = tablePaginationRect?.height || 0;
-    const border = 2;
-    const margin = 20;
-    const scrollY = window.innerHeight - tableBodyRect.top - tableFooterHeight - tablePaginationHeight - tablePaginationMargin - border - margin;
-    return scrollY;
-  };
-  const debouncedCalcScrollY = useCallback(() => {
-    if (timerRef.current) {
-      clearTimeout(timerRef.current);
-    }
-    timerRef.current = setTimeout(() => {
-      const height = calcTableScrollY();
-      if (height) {
-        setScrollY(height);
-      }
-    }, 150);
-  }, []);
-  useEffect(() => {
-    if (!ref.current || !enableAutoScrollY) return;
+  const [size, setSize] = React.useState(getTableSize(storeIndex) || 'default');
+  const [tableHeight, setTableHeight] = React.useState(0);
+  const persistenceKey = getPersistenceKey(storeIndex);
+  const enabledResizer = tools.isUndefined(props.disabledResizer);
+  React.useEffect(() => {
+    let mutationObserver, resizeObserver;
+    if (enabledResizer) {
+      // 监听-DOM树
+      mutationObserver = new MutationObserver(mutations => mutations.forEach(() => calcTableHeight()));
+      // 监听-缩放
+      resizeObserver = new ResizeObserver(entries => entries.forEach(() => calcTableHeight()));
 
-    // 创建 ResizeObserver 监听元素尺寸变化
-    const resizeObserver = new ResizeObserver(() => {
-      // 等待 table-pagination 元素生成后再计算
-      debouncedCalcScrollY();
-    });
-    const mutationObserver = new MutationObserver(() => {
-      debouncedCalcScrollY();
-    });
-    mutationObserver.observe(ref.current, {
-      childList: true,
-      subtree: true,
-      attributes: true
-    });
+      // 初始化首次计算
+      setTimeout(() => calcTableHeight(), 500);
 
-    // 开始观察 ref.current 的尺寸变化
-    resizeObserver.observe(ref.current);
+      // 执行-监听-缩放
+      resizeObserver.observe(document.body);
+      // 执行-监听-DOM树是否发生变化
+      mutationObserver.observe(document.body, {
+        subtree: true,
+        childList: true
+      });
+    }
     return () => {
-      if (timerRef.current) {
-        clearTimeout(timerRef.current);
+      if (mutationObserver && resizeObserver && enabledResizer) {
+        resizeObserver.unobserve(document.body);
+        mutationObserver.disconnect(document.body);
       }
-      resizeObserver.disconnect();
-      mutationObserver.disconnect();
     };
-  }, [ref, enableAutoScrollY, debouncedCalcScrollY]);
-  return /*#__PURE__*/React.createElement("div", {
-    ref: ref,
-    style: {
-      height: '100%',
-      ...wrapperStyle
+  }, []);
+  React.useEffect(() => {
+    setTableSize(size, storeIndex);
+  }, [size]);
+
+  // 计算高度
+  const calcTableHeight = () => {
+    try {
+      // table元素
+      const tableEl = document.querySelector(tableCls);
+      // table-body元素
+      const tableBodyEl = document.querySelector(tableBodyCls);
+      if (tableBodyEl && tableEl) {
+        // 获取table元素的矩形数据
+        const tableRect = tableEl.getBoundingClientRect();
+        // 获取table-body元素的矩形数据
+        const tableBodyRect = tableBodyEl.getBoundingClientRect();
+        // 获取底部的高度差
+        const bottomHeight = tableRect.bottom - tableBodyRect.bottom;
+        // 计算最终值
+        setTableHeight(innerHeight - tableBodyRect.top - bottomHeight - (window.__IN_BASE__ ? 38 : 22));
+      }
+    } catch (e) {
+      window.console['error'](e);
+    }
+  };
+  const {
+    components,
+    resizableColumns,
+    tableWidth,
+    resetColumns
+    // refresh
+  } = useAntdResizableHeader({
+    columns: props.columns,
+    columnsState: {
+      persistenceKey: persistenceKey.resizable,
+      persistenceType: 'localStorage'
     }
-  }, /*#__PURE__*/React.createElement(ProTable, _extends({
+  });
+  const scroll = {
+    x: tableWidth
+  };
+  if (enabledResizer) {
+    scroll.y = tableHeight;
+  }
+  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(ProTable, _extends({
     ghost: true,
     columnEmptyText: true,
+    size: size,
     search: false,
-    scroll: enableAutoScrollY ? {
-      y: scrollY || 0
-    } : undefined,
+    scroll: scroll,
     className: `${antPrefix}-gbs-pro-table`,
-    options: options
-  }, restProps, {
-    columns: restProps.columns
+    options: {
+      reload: false,
+      fullScreen: true,
+      setting: {
+        checkedReset: true,
+        extra: /*#__PURE__*/React.createElement("a", {
+          className: `${antPrefix}-pro-table-column-setting-action-rest-button`,
+          onClick: resetColumns
+        }, "\u91CD\u7F6E\u5217\u5BBD")
+      }
+    },
+    components: components,
+    columnsState: {
+      persistenceKey: persistenceKey.columnState,
+      persistenceType: 'localStorage'
+    },
+    onSizeChange: setSize
+  }, props, {
+    columns: resizableColumns
   })));
 }

package/Table/index.less

@@ -1,15 +1,13 @@
-@com-prefix-cls: if(isdefined(@ant-prefix), @ant-prefix, ant);
-
-.@{com-prefix-cls} {
+.@{ant-prefix} {
   &-gbs-pro-table {
-    .@{com-prefix-cls}-pro-card {
+    .@{ant-prefix}-pro-card {
       &-body {
-        .@{com-prefix-cls}-pro-table-list-toolbar {
+        .@{ant-prefix}-pro-table-list-toolbar {
           &-container {
-            padding-block: 0;
+            padding-top: 0;
           }
         }
       }
     }
   }
-}
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@cqsjjb/jjb-react-admin-component",
-  "version": "3.3.5",
+  "version": "3.3.6",
   "description": "jjb-react-admin-组件库@new",
   "main": "index.js",
   "author": "jjb-front-team",