@chaoswise/ui 2.6.7 → 2.6.8

package/lib/CWTable/CWTable.js

@@ -95,37 +95,29 @@ var CWTable = function CWTable(_ref, ref) {
     isRealTimeDrag = _ref$isRealTimeDrag === void 0 ? true : _ref$isRealTimeDrag,
     rest = _objectWithoutProperties(_ref, _excluded);
   var prefix = rest.getPrefixCls();
-  var _useState = useState(1),
+  //filterDropDown和表格联用控制表格的列是否显示
+  var _useState = useState([]),
     _useState2 = _slicedToArray(_useState, 2),
-    scrollY = _useState2[0],
-    setScrollY = _useState2[1]; // Fixed: 0 header 元素丢失
-  var _useState3 = useState(0),
+    showCols = _useState2[0],
+    setShowCols = _useState2[1];
+  //异步加载设置loading
+  var _useState3 = useState(''),
     _useState4 = _slicedToArray(_useState3, 2),
-    tableWrapperHeight = _useState4[0],
-    setTableWrapperHeight = _useState4[1];
-  //filterDropDown和表格联用控制表格的列是否显示
+    loading = _useState4[0],
+    setLoading = _useState4[1];
   var _useState5 = useState([]),
     _useState6 = _slicedToArray(_useState5, 2),
-    showCols = _useState6[0],
-    setShowCols = _useState6[1];
-  //异步加载设置loading
+    tableColumn = _useState6[0],
+    setTableColumn = _useState6[1];
+  // 编辑行，编辑中的那一行的id
   var _useState7 = useState(''),
     _useState8 = _slicedToArray(_useState7, 2),
-    loading = _useState8[0],
-    setLoading = _useState8[1];
+    editingKey = _useState8[0],
+    setEditingKey = _useState8[1];
   var _useState9 = useState([]),
     _useState10 = _slicedToArray(_useState9, 2),
-    tableColumn = _useState10[0],
-    setTableColumn = _useState10[1];
-  // 编辑行，编辑中的那一行的id
-  var _useState11 = useState(''),
-    _useState12 = _slicedToArray(_useState11, 2),
-    editingKey = _useState12[0],
-    setEditingKey = _useState12[1];
-  var _useState13 = useState([]),
-    _useState14 = _slicedToArray(_useState13, 2),
-    finalDataSource = _useState14[0],
-    setFinalDataSource = _useState14[1];
+    finalDataSource = _useState10[0],
+    setFinalDataSource = _useState10[1];
 
   // 重写onChange
   var sorterInfo = useRef({}); // header中也会修改sorterInfo中的属性
@@ -188,13 +180,13 @@ var CWTable = function CWTable(_ref, ref) {
   };
 
   // 设置前端分页
-  var _useState15 = useState({
+  var _useState11 = useState({
       current: 1,
       pageSize: 30
     }),
-    _useState16 = _slicedToArray(_useState15, 2),
-    pageInfo = _useState16[0],
-    setPageInfo = _useState16[1];
+    _useState12 = _slicedToArray(_useState11, 2),
+    pageInfo = _useState12[0],
+    setPageInfo = _useState12[1];
   // 设置搜索字段
   var searchInfo = useRef({}); // 搜索信息
   var watcher = useRef(null); // null
@@ -238,7 +230,7 @@ var CWTable = function CWTable(_ref, ref) {
     _columnFilter$isShowS = columnFilter.isShowSelectAll,
     isShowSelectAll = _columnFilter$isShowS === void 0 ? false : _columnFilter$isShowS;
   var resetSortDataSource = function resetSortDataSource() {
-    var _dataSource = _toConsumableArray(dataSource);
+    var _dataSource = dataSource;
     if (frontPagination) {
       var _current = pagination.current,
         _pageSize = pagination.pageSize,
@@ -267,10 +259,10 @@ var CWTable = function CWTable(_ref, ref) {
         for (_iterator.s(); !(_step = _iterator.n()).done;) {
           var entry = _step.value;
           var _className = entry.target.className;
-          var height = entry.contentRect.height;
+          var _height = entry.contentRect.height;
           var offsetHeight = entry.target.offsetHeight;
           if (_className.includes('cw-common-table')) {
-            outerHeight = height;
+            outerHeight = _height;
           }
           if (_className.includes('cw-table-extra-header-area')) {
             extraHeaderHeight = offsetHeight; // padding不计算高度
@@ -281,21 +273,39 @@ var CWTable = function CWTable(_ref, ref) {
           if (_className.includes('cw-table-pagination-box')) {
             paginationHeight = offsetHeight;
           }
-          if (_className.includes('-table-header')) {
-            tableHeaderHeight = height;
-          }
         }
-
-        // 计算表格高度
       } catch (err) {
         _iterator.e(err);
       } finally {
         _iterator.f();
       }
+      if (showHeader) {
+        var tableHeaderDom = tableRef.current.querySelector(".".concat(prefix, "-table-thead"));
+        if (tableHeaderDom) {
+          var _tableHeaderDom$getBo = tableHeaderDom.getBoundingClientRect(),
+            height = _tableHeaderDom$getBo.height;
+          tableHeaderHeight = height;
+        }
+      }
+      // 计算表格高度
       var tableWrapperHeight = outerHeight - searchBarHeight - extraHeaderHeight - paginationHeight;
       var scrollY = tableWrapperHeight - tableHeaderHeight - 2;
-      setTableWrapperHeight(tableWrapperHeight);
-      setScrollY(scrollY);
+      tableRef.current.style.height = "".concat(tableWrapperHeight, "px");
+      var maxHeight = "".concat(scrollY, "px");
+      if (finalDataSource.length !== 0) {
+        tableRef.current.querySelector(".".concat(prefix, "-table-body")).style.height = maxHeight;
+        tableRef.current.querySelector(".".concat(prefix, "-table-body")).style.maxHeight = maxHeight;
+        var allFixedBodyInnerDom = tableRef.current.querySelectorAll(".".concat(prefix, "-table-body-inner"));
+        if (allFixedBodyInnerDom) {
+          allFixedBodyInnerDom.forEach(function (fixedBody) {
+            fixedBody.style.maxHeight = maxHeight;
+          });
+        }
+      } else {
+        tableRef.current.querySelector(".".concat(prefix, "-table-body")).style.height = 'unset';
+        tableRef.current.querySelector(".".concat(prefix, "-table-body")).style.maxHeight = "unset";
+        tableRef.current.querySelector(".".concat(prefix, "-table-placeholder")).style.height = maxHeight;
+      }
     });
     watcher.current.observe(outContainerRef.current);
     watcher.current.observe(extraHeaderContainerRef.current);
@@ -319,23 +329,7 @@ var CWTable = function CWTable(_ref, ref) {
         (_watcher$current4 = watcher.current) === null || _watcher$current4 === void 0 || _watcher$current4.unobserve(paginationContainerRef.current);
       }
     };
-  }, [autoHeight]);
-  useEffect(function () {
-    if (!autoHeight) {
-      return;
-    }
-    var tableHeaderDom;
-    if (showHeader) {
-      tableHeaderDom = tableRef.current.querySelector(".".concat(prefix, "-table-header"));
-      watcher.current.observe(tableHeaderDom);
-    }
-    return function () {
-      if (tableHeaderDom) {
-        var _watcher$current5;
-        (_watcher$current5 = watcher.current) === null || _watcher$current5 === void 0 || _watcher$current5.unobserve(tableHeaderDom);
-      }
-    };
-  }, [showHeader, autoHeight]);
+  }, [autoHeight, finalDataSource, showHeader]);
   var editMode = '';
   columns.find(function (v) {
     var _v$form;
@@ -414,39 +408,25 @@ var CWTable = function CWTable(_ref, ref) {
   useEffect(function () {
     resizeColsRef.current = tableColumn;
   }, [tableColumn]);
-
+  var _pagination = useMemo(function () {
+    return pagination ? pagination : {};
+  }, [pagination]);
   // 设置分页页码
   useEffect(function () {
-    if (pagination) {
-      setPageInfo(function (prePageInfo) {
-        var newPageInfo = _objectSpread({}, prePageInfo);
-        var defaultCurrent = pagination.defaultCurrent,
-          defaultPageSize = pagination.defaultPageSize;
-        if (defaultCurrent) {
-          newPageInfo.current = defaultCurrent;
-        }
-        if (defaultPageSize) {
-          newPageInfo.pageSize = defaultPageSize;
-        }
-        return newPageInfo;
-      });
-    }
-  }, [pagination]);
+    setPageInfo(function (prePageInfo) {
+      var newPageInfo = _objectSpread({}, prePageInfo);
+      if (_pagination.defaultCurrent) {
+        newPageInfo.current = _pagination.defaultCurrent;
+      }
+      if (_pagination.defaultPageSize) {
+        newPageInfo.pageSize = _pagination.defaultPageSize;
+      }
+      return newPageInfo;
+    });
+  }, [_pagination.defaultCurrent, _pagination.defaultPageSize]);
   var _showCols = useMemo(function () {
     return columnFilter.hasOwnProperty('showColumns') ? showColumns : showCols;
   }, [showColumns, showCols]);
-  useEffect(function () {
-    if (!autoHeight) {
-      return;
-    }
-    var maxHeight = "".concat(scrollY, "px");
-    if (finalDataSource.length !== 0) {
-      tableRef.current.querySelector(".".concat(prefix, "-table-body")).style.height = maxHeight;
-    } else {
-      tableRef.current.querySelector(".".concat(prefix, "-table-body")).style.height = 'unset';
-      tableRef.current.querySelector(".".concat(prefix, "-table-placeholder")).style.height = maxHeight;
-    }
-  }, [scrollY, finalDataSource]);
 
   // 表格滚动到底触发函数
   useEffect(function () {
@@ -514,9 +494,9 @@ var CWTable = function CWTable(_ref, ref) {
       return _showCols.includes(col.dataIndex);
     });
   };
-  var bodyScroll = autoHeight ? merge({
-    y: scrollY
-  }, scroll) : scroll;
+  var bodyScroll = autoHeight ? merge(scroll, {
+    y: 1
+  }) : scroll;
 
   // 表格数据有children时点击展开的函数
   var onExpand = function onExpand(expanded, record) {
@@ -657,14 +637,6 @@ var CWTable = function CWTable(_ref, ref) {
       onShowSizeChange: onShowSizeChange,
       size: size == 'small' ? 'small' : ''
     });
-    // if (frontPagination) {
-    //   return {
-    //     ...common,
-    //     current: pageInfo.current,
-    //     pageSize: pageInfo.pageSize,
-    //     total: dataSource.length,
-    //   }
-    // }
     return _objectSpread(_objectSpread({}, common), {}, {
       current: current || pageInfo.current,
       pageSize: pageSize || pageInfo.pageSize,
@@ -791,8 +763,7 @@ var CWTable = function CWTable(_ref, ref) {
   })), /*#__PURE__*/React.createElement("div", {
     className: "cw-table-wrapper-main",
     style: {
-      // padding: Object.keys(searchBar).length > 0 && '0 32px',
-      height: autoHeight ? tableWrapperHeight : 'auto'
+      height: "auto"
     },
     ref: tableRef
   }, /*#__PURE__*/React.createElement(EditableContext.Provider, {
@@ -828,14 +799,9 @@ var CWTable = function CWTable(_ref, ref) {
     expandedRowRender: expandedRowRender,
     loading: Boolean(loading)
   }, rest)))))), /*#__PURE__*/React.createElement("div", {
-    className: classnames({
-      'cw-table-pagination-box': true,
-      'cw-table-pagination-box-none': !dataSource.length || !pagination
-    })
-    // style={{
-    //   padding: Object.keys(searchBar).length > 0 && '0 32px'
-    // }}
-    ,
+    className: classnames("cw-table-pagination-box", {
+      'cw-table-pagination-box-none': !finalDataSource.length || !pagination
+    }),
     ref: paginationContainerRef
   }, /*#__PURE__*/React.createElement(_Pagination, getPaginationOption())));
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@chaoswise/ui",
-  "version": "2.6.7",
+  "version": "2.6.8",
   "description": "公共UI库",
   "keywords": [
     "ui",
@@ -149,5 +149,5 @@
     "access": "public"
   },
   "license": "MIT",
-  "gitHead": "fe06e4858602753c10139ad38f812f6c5aeb8146"
+  "gitHead": "9862a1d4a1f6556dd1fb953637e9bec805b4ea9a"
 }