@teamix/pro 1.4.12 → 1.4.15

package/lib/table/index.js

@@ -40,6 +40,8 @@ var _classnames = _interopRequireDefault(require("classnames"));
 
 var _pageContainer = _interopRequireDefault(require("../page-container"));
 
+var _lodash = _interopRequireDefault(require("lodash.debounce"));
+
 var _typing = require("./typing");
 
 Object.keys(_typing).forEach(function (key) {
@@ -257,7 +259,7 @@ var ProTable = function ProTable(props) {
   var skeletonDataSource = new Array(skeletonSize).fill({});
   var requestDataKey = method.toLowerCase() === 'get' ? 'params' : 'data'; // 如果使用 customRequest 的话，内置 loading
 
-  var _useState13 = (0, _react.useState)(true),
+  var _useState13 = (0, _react.useState)(requestWhenMount),
       _useState14 = _slicedToArray(_useState13, 2),
       customTableLoading = _useState14[0],
       setCustomTableLoading = _useState14[1];
@@ -301,21 +303,45 @@ var ProTable = function ProTable(props) {
   var autoRefreshTimerRef = (0, _react.useRef)();
   var onResize = null;
   (0, _react.useEffect)(function () {
+    var _propsDataFilter$sche, _propsDataFilter$sche2;
+
     getHeaderHeight(fullscreenState);
+    getFooterSuctionState();
 
     if (window.onresize) {
       onResize = window.onresize;
-
-      window.onresize = function () {
+      window.onresize = (0, _lodash.default)(function () {
         var _onResize;
 
         (_onResize = onResize) === null || _onResize === void 0 ? void 0 : _onResize();
-        getHeaderHeight(fullscreenState);
-      };
+
+        if (footerSuction) {
+          getFooterSuctionState();
+        }
+
+        if (fixedTableBody) {
+          getHeaderHeight(fullscreenState);
+        }
+      }, 500);
     } else {
-      window.onresize = function () {
-        getHeaderHeight(fullscreenState);
-      };
+      window.onresize = (0, _lodash.default)(function () {
+        if (footerSuction) {
+          getFooterSuctionState();
+        }
+
+        if (fixedTableBody) {
+          getHeaderHeight(fullscreenState);
+        }
+      }, 500);
+    } // 如果不传 dataFilter，则在这里初始化请求
+
+
+    var hasDataFilter = (propsDataFilter === null || propsDataFilter === void 0 ? void 0 : (_propsDataFilter$sche = propsDataFilter.schema) === null || _propsDataFilter$sche === void 0 ? void 0 : _propsDataFilter$sche.length) && (propsDataFilter === null || propsDataFilter === void 0 ? void 0 : (_propsDataFilter$sche2 = propsDataFilter.schema) === null || _propsDataFilter$sche2 === void 0 ? void 0 : _propsDataFilter$sche2.length) > 0;
+
+    if (requestWhenMount && !hasDataFilter) {
+      (0, _utils2.processDefaultFilter)(propsColumns, actionRef, defaultFilterParams);
+
+      _request();
     }
 
     return function () {
@@ -324,11 +350,21 @@ var ProTable = function ProTable(props) {
       } else {
         window.onresize = null;
       }
+
+      if (autoRefreshTimerRef.current) {
+        clearTimeout(autoRefreshTimerRef.current);
+      }
+
+      actionRef.current = undefined;
     };
   }, []); // 获取header高度，用作全屏吸底吸底高度计算以及固定body高度计算（滚动条在底部）
 
   var getHeaderHeight = function getHeaderHeight(isFullscreen, offset) {
-    var _tableDom$getElements, _tableDom$getElements2;
+    var _tableDom$getElements, _tableDom$getElements2, _document$querySelect, _document$querySelect2, _document$querySelect3;
+
+    if (!fixedTableBody) {
+      return;
+    }
 
     var tableDom = tableRef.current;
     var headerDom = tableDom === null || tableDom === void 0 ? void 0 : (_tableDom$getElements = tableDom.getElementsByClassName('teamix-pro-table-layout')) === null || _tableDom$getElements === void 0 ? void 0 : _tableDom$getElements[0];
@@ -338,7 +374,10 @@ var ProTable = function ProTable(props) {
     var tableHeaderDom = tableDom === null || tableDom === void 0 ? void 0 : (_tableDom$getElements2 = tableDom.getElementsByClassName(basePrefix('table-header-inner'))) === null || _tableDom$getElements2 === void 0 ? void 0 : _tableDom$getElements2[0];
     var pageContainerDom = document.querySelector('.teamix-pro-page-container-header');
     var teamixNavDom = document.querySelector('.teamix-nav-console');
-    var footerRowSelectionDom = document.querySelector('.teamix-pro-page-container-footer');
+    var footerRowSelectionDom = document.querySelector('.teamix-pro-page-container-footer'); // 这边不能直接取 next-table-body
+
+    var tableBodyDom = (_document$querySelect = document.querySelector('.teamix-pro-table')) === null || _document$querySelect === void 0 ? void 0 : (_document$querySelect2 = _document$querySelect.getElementsByTagName('table')) === null || _document$querySelect2 === void 0 ? void 0 : (_document$querySelect3 = _document$querySelect2[1]) === null || _document$querySelect3 === void 0 ? void 0 : _document$querySelect3.parentNode;
+    var headerFixedTopSectionDom = document.querySelector('.teamix-pro-page-container-fixed-top');
     setTimeout(function () {
       var _headerDom$offsetHeig, _tableHeaderDom$offse;
 
@@ -352,11 +391,31 @@ var ProTable = function ProTable(props) {
 
         // 16px 为 padding
         var pageHeaderHeight = ((_pageContainerDom$off = pageContainerDom === null || pageContainerDom === void 0 ? void 0 : pageContainerDom.offsetHeight) !== null && _pageContainerDom$off !== void 0 ? _pageContainerDom$off : 0) + 16;
-        var teamixNavHeight = (_teamixNavDom$offsetH = teamixNavDom === null || teamixNavDom === void 0 ? void 0 : teamixNavDom.offsetHeight) !== null && _teamixNavDom$offsetH !== void 0 ? _teamixNavDom$offsetH : 0;
-        setHeaderHeight(headerHeight + tableHeaderHeight + pageHeaderHeight + teamixNavHeight + footerRowSelectionHeight + 16 + (offset !== null && offset !== void 0 ? offset : 0));
+        var teamixNavHeight = (_teamixNavDom$offsetH = teamixNavDom === null || teamixNavDom === void 0 ? void 0 : teamixNavDom.offsetHeight) !== null && _teamixNavDom$offsetH !== void 0 ? _teamixNavDom$offsetH : 0; // 1 为预留值，js无法取出精确高度，会被四舍五入
+
+        var offsetHeaderHeight = headerHeight + tableHeaderHeight + pageHeaderHeight + teamixNavHeight + footerRowSelectionHeight + 16 + (offset !== null && offset !== void 0 ? offset : 0) + 1;
+
+        if (tableBodyDom.clientHeight < tableBodyDom.scrollHeight) {
+          setFooterSuctionState(true);
+        } else {
+          setFooterSuctionState(false);
+        } // 如果有切换区tab，那么重新计算
+
+
+        if (headerFixedTopSectionDom.clientHeight) {
+          var _headerFixedTopSectio;
+
+          var headerFixedTopSectionHeight = (_headerFixedTopSectio = headerFixedTopSectionDom.clientHeight) !== null && _headerFixedTopSectio !== void 0 ? _headerFixedTopSectio : 0; // const clientTableBodyHeight =
+          //   document.body.clientHeight - offsetHeaderHeight;
+
+          setHeaderHeight(headerFixedTopSectionHeight + teamixNavHeight + footerRowSelectionHeight + tableHeaderHeight + 1);
+          return;
+        }
+
+        setHeaderHeight(offsetHeaderHeight);
       } else {
         // 24px 为 padding
-        setHeaderHeight(headerHeight + tableHeaderHeight + footerRowSelectionHeight + 24 + (offset !== null && offset !== void 0 ? offset : 0));
+        setHeaderHeight(headerHeight + tableHeaderHeight + footerRowSelectionHeight + 24 + (offset !== null && offset !== void 0 ? offset : 0) + 1);
       }
     }, 50);
   }; // header 区域高度。用作全屏计算吸顶吸底高度。默认不做计算
@@ -394,6 +453,10 @@ var ProTable = function ProTable(props) {
 
 
   var getFooterSuctionState = function getFooterSuctionState() {
+    if (!footerSuction) {
+      return;
+    }
+
     var containerDom = document.querySelector('.teamix-pro-page-container-scroll-container');
 
     if (containerDom) {
@@ -695,6 +758,10 @@ var ProTable = function ProTable(props) {
       if (footerSuction) {
         getFooterSuctionState();
       }
+
+      if (fixedTableBody) {
+        getHeaderHeight(fullscreenState);
+      }
     },
     onError: function onError(error) {
       setShowSkeleton(false);
@@ -708,6 +775,10 @@ var ProTable = function ProTable(props) {
       if (footerSuction) {
         getFooterSuctionState();
       }
+
+      if (fixedTableBody) {
+        getHeaderHeight(fullscreenState);
+      }
     }
   }); // 请求函数
 
@@ -773,6 +844,20 @@ var ProTable = function ProTable(props) {
           if (footerSuction) {
             getFooterSuctionState();
           }
+
+          if (fixedTableBody) {
+            getHeaderHeight(fullscreenState);
+          } // customRequest 中支持 autoRefresh
+
+
+          var time = autoRefresh ? autoRefresh(data) : false;
+
+          if (Number.isInteger(time) && time >= 1000) {
+            autoRefreshTimerRef.current = setTimeout(function () {
+              // 自动刷新不显示 loading
+              _request(requestData, true);
+            }, Number(time));
+          }
         });
       } else {
         getData.run(requestData);
@@ -780,40 +865,6 @@ var ProTable = function ProTable(props) {
     }
   }
 
-  (0, _react.useEffect)(function () {
-    var _propsDataFilter$sche, _propsDataFilter$sche2;
-
-    // 监听 浏览器变化 更吸底状态
-    if (footerSuction) {
-      getFooterSuctionState();
-
-      window.onresize = function () {
-        getFooterSuctionState();
-      };
-    } // 如果不传 dataFilter，则在这里初始化请求
-
-
-    var hasDataFilter = (propsDataFilter === null || propsDataFilter === void 0 ? void 0 : (_propsDataFilter$sche = propsDataFilter.schema) === null || _propsDataFilter$sche === void 0 ? void 0 : _propsDataFilter$sche.length) && (propsDataFilter === null || propsDataFilter === void 0 ? void 0 : (_propsDataFilter$sche2 = propsDataFilter.schema) === null || _propsDataFilter$sche2 === void 0 ? void 0 : _propsDataFilter$sche2.length) > 0;
-
-    if (requestWhenMount && !hasDataFilter) {
-      (0, _utils2.processDefaultFilter)(propsColumns, actionRef, defaultFilterParams);
-
-      _request();
-    }
-
-    return function () {
-      if (autoRefreshTimerRef.current) {
-        clearTimeout(autoRefreshTimerRef.current);
-      }
-
-      if (window.onresize) {
-        window.onresize = null;
-      }
-
-      actionRef.current = undefined;
-    };
-  }, []);
-
   function onSort(dataIndex, order) {
     var nextSort = _defineProperty({}, dataIndex, order);
 
@@ -879,7 +930,10 @@ var ProTable = function ProTable(props) {
   var renderTable = function renderTable(isFullScreen) {
     if (propsColumns) {
       return /*#__PURE__*/_react.default.createElement("div", {
-        className: (0, _classnames.default)('teamix-pro-table-container', className)
+        className: (0, _classnames.default)('teamix-pro-table-container', className, 'teamix-test-request'),
+        "data-teamix-test-request": "url=".concat(url, "&formatResult=").concat(!!formatResult),
+        "data-teamix-test-params": (0, _utils.getTestRequestParams)(propsParams),
+        "data-teamix-test-data": (0, _utils.getTestRequestData)(propsColumns)
       }, /*#__PURE__*/_react.default.createElement(_Layout.default, {
         header: header,
         mainAction: mainAction,
@@ -1005,7 +1059,7 @@ var ProTable = function ProTable(props) {
         })
       }, renderRowSelection(), /*#__PURE__*/_react.default.createElement("div", {
         className: cls('footer-right-wrapper')
-      }, showSkeleton ? /*#__PURE__*/_react.default.createElement(_skeleton.ProSkeletonRaw.Footer.Pagination, null) : /*#__PURE__*/_react.default.createElement(_Pagination.default, _objectSpread({
+      }, showSkeleton ? /*#__PURE__*/_react.default.createElement(_skeleton.ProSkeletonRaw.Footer.Pagination, null) : /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, data.length > 0 && /*#__PURE__*/_react.default.createElement(_Pagination.default, _objectSpread({
         className: cls('pagination'),
         onChange: function onChange(number) {
           return onChangePagination(number);
@@ -1027,7 +1081,7 @@ var ProTable = function ProTable(props) {
         onPageSizeChange: function onPageSizeChange(number) {
           return onChangePaginationSize(number);
         }
-      }, props.paginationProps))));
+      }, props.paginationProps)))));
     } else if (!showPagination) {
       return /*#__PURE__*/_react.default.createElement("div", {
         className: cls('footer', {
@@ -1037,8 +1091,22 @@ var ProTable = function ProTable(props) {
         className: cls('footer-right-wrapper')
       }, showSkeleton ? /*#__PURE__*/_react.default.createElement(_skeleton.ProSkeletonRaw.Footer.Pagination, null) : footer));
     }
-  };
+  }; // 判断是否需要吸底
 
+
+  var fixFooterState = (0, _react.useMemo)(function () {
+    if (fullscreenState) {
+      return true;
+    }
+
+    if (fixedTableBody || footerSuction) {
+      if (footerSuctionState) {
+        return true;
+      }
+    }
+
+    return false;
+  }, [fullscreenState, fixedTableBody, footerSuction, footerSuctionState]);
   return /*#__PURE__*/_react.default.createElement(_Fullscreen.default, {
     visible: fullscreenState,
     actionRef: actionRef
@@ -1050,7 +1118,7 @@ var ProTable = function ProTable(props) {
 
       }),
       ref: tableRef
-    }, renderTable(isFullScreen), (footerSuctionState && footerSuction && !fullscreenState || fixedTableBody) && /*#__PURE__*/_react.default.createElement(_pageContainer.default.FixedFooter, null, renderFooter()), !(footerSuctionState && footerSuction) && !fullscreenState && !fixedTableBody && renderFooter(), fullscreenState && renderFooter());
+    }, renderTable(isFullScreen), fixFooterState && /*#__PURE__*/_react.default.createElement(_pageContainer.default.FixedFooter, null, renderFooter()), !fixFooterState && renderFooter());
   });
 };
 

package/lib/table/index.scss

@@ -32,6 +32,11 @@ $fullscreenPadding: 24px;
     display: flex;
     justify-content: flex-end;
     width: 100%;
+    & > span {
+      display: flex;
+      justify-content: flex-end;
+      width: 100%;
+    }
   }
   &-footer-action {
     margin-left: 16px;

package/lib/table/typing.d.ts

@@ -69,7 +69,9 @@ export declare type ProTableProps = {
     /** 请求方法 */
     method?: Method;
     /** 请求参数 */
-    params?: object;
+    params?: {
+        [propName: string]: any;
+    };
     /** sort 排序请求参数处理函数 */
     formatSort?: (sort: object) => object;
     /** 如需自定义调用参数格式，则可以设定此值在请求前对 params 进行自定义，如果返回false则可以阻止请求 */

package/lib/table/utils/columnRender.js

@@ -55,8 +55,9 @@ function _defineProperty(obj, key, value) { if (key in obj) { Object.definePrope
 var renderColumnsTitle = function renderColumnsTitle(item, actionRef) {
   var filterMode = item.filterMode,
       filters = item.filters,
+      dataSource = item.dataSource,
       dataIndex = item.dataIndex,
-      dataSource = item.dataSource; // 为列过滤添加状态标题
+      valueType = item.valueType; // 为列过滤添加状态标题
 
   var getItemLabel = function getItemLabel() {
     if (filters && filterMode !== 'multiple') {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@teamix/pro",
-  "version": "1.4.12",
+  "version": "1.4.15",
   "description": "TeamixPro大包",
   "keywords": [
     "aliyun",