@chaoswise/ui 2.6.7 → 2.6.9

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/lib/QuickTransfer/index.js

@@ -36,7 +36,7 @@ function _iterableToArrayLimit(r, l) { var t = null == r ? null : "undefined" !=
 function _arrayWithHoles(r) { if (Array.isArray(r)) return r; }
 function _objectWithoutProperties(e, t) { if (null == e) return {}; var o, r, i = _objectWithoutPropertiesLoose(e, t); if (Object.getOwnPropertySymbols) { var s = Object.getOwnPropertySymbols(e); for (r = 0; r < s.length; r++) o = s[r], t.includes(o) || {}.propertyIsEnumerable.call(e, o) && (i[o] = e[o]); } return i; }
 function _objectWithoutPropertiesLoose(r, e) { if (null == r) return {}; var t = {}; for (var n in r) if ({}.hasOwnProperty.call(r, n)) { if (e.includes(n)) continue; t[n] = r[n]; } return t; }
-import React, { useState, useEffect, Fragment, forwardRef, useMemo } from "react";
+import React, { useState, useEffect, Fragment, forwardRef, useMemo, useCallback } from "react";
 import { filterTreeByName, filterTree, filterTreeByNameTable, filterObj, getNotSelectKeys, getKeysAndTitle, getBottomKey, renderLeafNodetree, renderRelationNode, createTitle } from "./utils";
 import classnames from "classnames";
 import Drag from "./Drag";
@@ -257,21 +257,6 @@ var QuickTransfer = /*#__PURE__*/forwardRef(function (props, ref) {
           return !i.disabled;
         }));
         setCheckValue(finalCheckValue);
-        var newData = [];
-        var listCheckedKeys_ = [];
-        dataSource.forEach(function (item, index) {
-          if (isMath(item.title, saveSearchValueLeft)) {
-            newData.push(dataSource[index]);
-          }
-        });
-        listCheckedKeys_ = newData.filter(function (item) {
-          return finalCheckValue.find(function (i) {
-            return i.key == item.key;
-          });
-        }).map(function (item) {
-          return item.key;
-        });
-        setListCheckedStyle(listCheckedKeys_, newData);
       }
       //回显table
       if (type === "table") {
@@ -287,19 +272,51 @@ var QuickTransfer = /*#__PURE__*/forwardRef(function (props, ref) {
         }
       }
     }
-  }, [targetKeys, dataSource, saveSearchValueLeft]);
-  //触发前端自定义搜索
+  }, [targetKeys, dataSource]);
   useEffect(function () {
-    if (searchValueLeft !== undefined) {
-      handleSearch(searchValueLeft);
+    // 左侧受控值绑定
+    if (searchValueLeft !== undefined && searchValueLeft !== saveSearchValueLeft) {
       // 初始化搜索结果
       setSaveSearchValueLeft(searchValueLeft);
     }
-    if (searchValueRight !== undefined) {
+  }, [searchValueLeft, saveSearchValueLeft]);
+  useEffect(function () {
+    // 右侧受控值绑定
+    if (searchValueRight !== undefined && searchValueRight !== saveSearchValueRight) {
       // 初始化搜索结果
       setSaveSearchValueRight(searchValueRight);
     }
-  }, [searchValueLeft, searchValueRight]);
+  }, [searchValueRight, saveSearchValueRight]);
+
+  // 左侧搜索框输入触发
+  var handleSearch = useCallback(function (searchValue) {
+    var newData = [];
+    var listCheckedKeys_ = [];
+    if (type === "list") {
+      dataSource.forEach(function (item, index) {
+        if (isMath(item.title, searchValue)) {
+          newData.push(dataSource[index]);
+        }
+      });
+      listCheckedKeys_ = newData.filter(function (item) {
+        return checkValue.find(function (i) {
+          return i.key == item.key;
+        });
+      }).map(function (item) {
+        return item.key;
+      });
+      setData(newData);
+      setListCheckedStyle(listCheckedKeys_, newData);
+    }
+    if (type === "table") {
+      newData = filterTreeByNameTable(dataSource, searchValue, searchColumns ? searchColumns : newSearchColumns);
+      setData(newData);
+    }
+  }, [dataSource, checkValue]);
+  useEffect(function () {
+    handleSearch(saveSearchValueLeft);
+  }, [handleSearch, saveSearchValueLeft]);
+
   //获取左侧列表选中的key
   useEffect(function () {
     if (getTargetKeys) {
@@ -347,35 +364,6 @@ var QuickTransfer = /*#__PURE__*/forwardRef(function (props, ref) {
     setIndeterminate(!!listCheckedKeys.length && listCheckedKeys.length < dataSource.length);
     setCheckAll(listCheckedKeys.length === dataSource.length);
   };
-  // 左侧搜索框输入触发
-  var handleSearch = function handleSearch(searchValue) {
-    var newData = [];
-    var listCheckedKeys_ = [];
-    if (type === "list") {
-      dataSource.forEach(function (item, index) {
-        if (isMath(item.title, searchValue)) {
-          newData.push(dataSource[index]);
-        }
-      });
-      listCheckedKeys_ = newData.filter(function (item) {
-        return checkValue.find(function (i) {
-          return i.key == item.key;
-        });
-      }).map(function (item) {
-        return item.key;
-      });
-      setData(newData);
-      setListCheckedStyle(listCheckedKeys_, newData);
-    }
-    // if (type === "tree") {
-    //     newData = filterTree(dataSource, searchValue);
-    //     setData(newData);
-    // }
-    if (type === "table") {
-      newData = filterTreeByNameTable(dataSource, searchValue, searchColumns ? searchColumns : newSearchColumns);
-      setData(newData);
-    }
-  };
 
   //type为list 左侧列表选中触发的事件
   var onChangeChecked = function onChangeChecked(e, value) {
@@ -595,17 +583,15 @@ var QuickTransfer = /*#__PURE__*/forwardRef(function (props, ref) {
   var showSearchChange = function showSearchChange(e) {
     onSearchChange && onSearchChange(e);
     onLeftSearchChange && onLeftSearchChange(e);
-    // 保存搜索结果
-    if (searchValueLeft === undefined) {
-      handleSearch(e.target.value);
-      setSaveSearchValueLeft(e.target.value);
-    }
+    // 保存搜索结果,实时保存不然受控模式中文会有问题
+    // if (searchValueLeft === undefined) {
+    setSaveSearchValueLeft(e.target.value);
+    //     handleSearch(e.target.value);
+    // }
   };
   var showSearchChangeRight = function showSearchChangeRight(e) {
     onRightSearchChange(e);
-    if (searchValueRight === undefined) {
-      setSaveSearchValueRight(e.target.value);
-    }
+    setSaveSearchValueRight(e.target.value);
   };
   // 全选状态改变触发
   var onCheckAllChange = function onCheckAllChange(e) {

package/package.json

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