publish 2.2.1-nc.4

CHANGELOG.md

@@ -1,10 +1,25 @@
+<a name="2.2.1"></a>
+## [2.2.1](https://github.com/tinper-bee/bee-table/compare/v2.2.0...v2.2.1) (2019-08-26)
+
+
+
+<a name="2.2.0"></a>
+# [2.2.0](https://github.com/tinper-bee/bee-table/compare/v2.1.14...v2.2.0) (2019-08-21)
+
+
+
 <a name="2.1.14"></a>
 ## [2.1.14](https://github.com/tinper-bee/bee-table/compare/v2.1.13...v2.1.14) (2019-08-17)
 
 
 
 <a name="2.1.13"></a>
-## [2.1.13](https://github.com/tinper-bee/bee-table/compare/v2.1.11...v2.1.13) (2019-08-07)
+## [2.1.13](https://github.com/tinper-bee/bee-table/compare/v2.1.12...v2.1.13) (2019-08-07)
+
+
+
+<a name="2.1.12"></a>
+## [2.1.12](https://github.com/tinper-bee/bee-table/compare/v2.1.11...v2.1.12) (2019-08-07)
 
 
 
@@ -75,7 +90,7 @@
 
 
 <a name="2.1.0"></a>
-# [2.1.0](https://github.com/tinper-bee/bee-table/compare/v2.0.25...v2.1.0) (2019-06-01)
+# [2.1.0](https://github.com/tinper-bee/bee-table/compare/v2.0.24...v2.1.0) (2019-06-01)
 
 
 ### Bug Fixes
@@ -84,11 +99,6 @@
 
 
 
-<a name="2.0.25"></a>
-## [2.0.25](https://github.com/tinper-bee/bee-table/compare/v2.0.24...v2.0.25) (2019-05-24)
-
-
-
 <a name="2.0.24"></a>
 ## [2.0.24](https://github.com/tinper-bee/bee-table/compare/v2.0.22...v2.0.24) (2019-05-22)
 

build/Table.css

@@ -438,8 +438,8 @@
     -moz-user-select: -moz-none;
     -khtml-user-select: none;
     -webkit-user-select: none;
-    /*
-        Introduced in IE 10. 
+    /*
+        Introduced in IE 10. 
       */
     -ms-user-select: none;
     user-select: none; }

build/Table.js

@@ -414,7 +414,7 @@ var Table = function (_Component) {
   Table.prototype.componentDidUpdate = function componentDidUpdate(prevProps) {
 
     if (this.columnManager.isAnyColumnsFixed()) {
-      this.syncFixedTableRowHeight();
+      (0, _utils.throttle)(this.syncFixedTableRowHeight, 300)();
     }
     //适应模态框中表格、以及父容器宽度变化的情况
     if (typeof this.props.scroll.x !== 'number' && this.contentTable.getBoundingClientRect().width !== this.contentDomWidth && this.firstDid) {
@@ -816,7 +816,7 @@ var Table = function (_Component) {
     var fixedColumnsBodyRowsHeight = this.state.fixedColumnsBodyRowsHeight;
 
     var rst = [];
-
+    var isTreeType = false; //每次遍历 data 前，将此变量置为 false，若遍历完 data，此变量仍为 false，说明是普通表格
     var height = void 0;
     var rowClassName = props.rowClassName;
     var rowRef = props.rowRef;
@@ -947,6 +947,7 @@ var Table = function (_Component) {
         rst.push(this.getExpandedRow(key, expandedRowContent, subVisible, expandedRowClassName(record, i, indent), fixed));
       }
       if (childrenColumn) {
+        isTreeType = true; //增加该标志位，为了兼容老版本，不修改以前的 `this.treeType` 的相关逻辑
         this.treeType = true; //证明是tree表形式visible = {true}
         rst = rst.concat(this.getRowsByData(childrenColumn, subVisible, indent + 1, columns, fixed, paramRootIndex));
       }
@@ -955,6 +956,9 @@ var Table = function (_Component) {
     if (props.lazyLoad && props.lazyLoad.sufHeight && indent == 0) {
       rst.push(_react2["default"].createElement(_TableRow2["default"], { height: props.lazyLoad.sufHeight, key: 'table_row_end', columns: [], className: '', store: this.store, visible: true }));
     }
+    if (!isTreeType) {
+      this.treeType = false;
+    }
     return rst;
   };
 

build/lib/bigData.js

@@ -63,7 +63,7 @@ function bigData(Table) {
       _this2.endIndex = _this2.currentIndex + _this2.loadCount; //数据结束位置
       _this2.setRowHeight = _this2.setRowHeight.bind(_this2);
       _this2.setRowParentIndex = _this2.setRowParentIndex.bind(_this2);
-      _this2.expandedRowKeys = [];
+      _this2.expandedRowKeys = props.expandedRowKeys || [];
       return _this2;
     }
 
@@ -96,6 +96,11 @@ function bigData(Table) {
       if (currentIndex !== -1 && currentIndex !== this.currentIndex) {
         _this.setStartAndEndIndex(currentIndex, dataLen);
       }
+      if ('expandedRowKeys' in nextProps) {
+        this.setState({
+          expandedRowKeys: nextProps.expandedRowKeys
+        });
+      }
     };
 
     BigData.prototype.componentDidMount = function componentDidMount() {
@@ -314,7 +319,7 @@ function bigData(Table) {
         setRowHeight: this.setRowHeight,
         setRowParentIndex: this.setRowParentIndex,
         onExpand: this.onExpand,
-        onExpandedRowsChange: this.onExpandedRowsChange,
+        onExpandedRowsChange: this.props.onExpandedRowsChange,
         expandedRowKeys: expandedRowKeys
         //   className={'lazy-table'}
       }));

build/lib/dragColumn.js

@@ -1,7 +1,7 @@
 'use strict';
 
 Object.defineProperty(exports, "__esModule", {
-    value: true
+  value: true
 });
 
 var _typeof = typeof Symbol === "function" && typeof Symbol.iterator === "symbol" ? function (obj) { return typeof obj; } : function (obj) { return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; };
@@ -35,115 +35,115 @@ function _inherits(subClass, superClass) { if (typeof superClass !== "function"
 
 function dragColumn(Table) {
 
-    return function (_Component) {
-        _inherits(DragColumn, _Component);
+  return function (_Component) {
+    _inherits(DragColumn, _Component);
 
-        function DragColumn(props) {
-            _classCallCheck(this, DragColumn);
+    function DragColumn(props) {
+      _classCallCheck(this, DragColumn);
 
-            var _this = _possibleConstructorReturn(this, _Component.call(this, props));
+      var _this = _possibleConstructorReturn(this, _Component.call(this, props));
 
-            _this.setColumOrderByIndex = function (_column) {
-                _column.forEach(function (da, i) {
-                    da.dragIndex = i;
-                    da.drgHover = false;
-                });
-                return _column;
-            };
-
-            _this.onDragEnd = function (event, data) {
-                var dragSource = data.dragSource,
-                    dragTarg = data.dragTarg;
-                var columns = _this.state.columns;
-
-                var sourceIndex = -1,
-                    targetIndex = -1;
-
-                sourceIndex = columns.findIndex(function (da, i) {
-                    return da.key == dragSource.key;
-                });
-                targetIndex = columns.findIndex(function (da, i) {
-                    return da.key == dragTarg.key;
-                });
-                // 向前移动
-                if (targetIndex < sourceIndex) {
-                    targetIndex = targetIndex + 1;
-                }
-                columns.splice(targetIndex, 0, columns.splice(sourceIndex, 1)[0]);
-                var _newColumns = [];
-                columns.forEach(function (da, i) {
-                    var newDate = _extends(da, {});
-                    newDate.title = da.title;
-                    _newColumns.push(newDate);
-                });
-                _this.setState({
-                    columns: _newColumns //cloneDeep(columns)
-                });
-                if (_this.props.onDragEnd) {
-                    _this.props.onDragEnd(event, data, columns);
-                }
-            };
-
-            _this.getTarget = function (evt) {
-                return evt.target || evt.srcElement;
-            };
-
-            _this.state = {
-                columns: _this.setColumOrderByIndex(props.columns)
-            };
-            return _this;
-        }
-
-        DragColumn.prototype.componentWillReceiveProps = function componentWillReceiveProps(nextProps) {
-            if (nextProps.columns != this.props.columns) {
-                this.setState({
-                    columns: this.setColumOrderByIndex(nextProps.columns)
-                });
-            }
-        };
-
-        DragColumn.prototype.recursion = function (_recursion) {
-            function recursion(_x) {
-                return _recursion.apply(this, arguments);
-            }
-
-            recursion.toString = function () {
-                return _recursion.toString();
-            };
-
-            return recursion;
-        }(function (obj) {
-            var data = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
-
-            for (key in obj) {
-                if (_typeof(obj[key]) == 'object' && Object.keys(obj[key].length > 0)) {
-                    data[key] = recursion(obj[key]);
-                } else {
-                    data[key] = obj[key];
-                }
-            }
-            return data;
+      _this.setColumOrderByIndex = function (_column) {
+        _column.forEach(function (da, i) {
+          da.dragIndex = i;
+          da.drgHover = false;
         });
+        return _column;
+      };
 
-        DragColumn.prototype.render = function render() {
-            var _props = this.props,
-                data = _props.data,
-                dragborder = _props.dragborder,
-                draggable = _props.draggable,
-                className = _props.className,
-                others = _objectWithoutProperties(_props, ['data', 'dragborder', 'draggable', 'className']);
+      _this.onDragEnd = function (event, data) {
+        var dragSource = data.dragSource,
+            dragTarg = data.dragTarg;
+        var columns = _this.state.columns;
 
-            return _react2["default"].createElement(Table, _extends({}, others, {
-                columns: this.state.columns,
-                data: data,
-                className: className + ' u-table-drag-border',
-                onDragEnd: this.onDragEnd,
-                draggable: draggable,
-                dragborder: dragborder
-            }));
-        };
+        var sourceIndex = -1,
+            targetIndex = -1;
 
-        return DragColumn;
-    }(_react.Component);
+        sourceIndex = columns.findIndex(function (da, i) {
+          return da.key == dragSource.key;
+        });
+        targetIndex = columns.findIndex(function (da, i) {
+          return da.key == dragTarg.key;
+        });
+        // 向前移动
+        if (targetIndex < sourceIndex) {
+          targetIndex = targetIndex + 1;
+        }
+        columns.splice(targetIndex, 0, columns.splice(sourceIndex, 1)[0]);
+        var _newColumns = [];
+        columns.forEach(function (da, i) {
+          var newDate = _extends(da, {});
+          newDate.title = da.title;
+          _newColumns.push(newDate);
+        });
+        _this.setState({
+          columns: _newColumns //cloneDeep(columns)
+        });
+        if (_this.props.onDragEnd) {
+          _this.props.onDragEnd(event, data, columns);
+        }
+      };
+
+      _this.getTarget = function (evt) {
+        return evt.target || evt.srcElement;
+      };
+
+      _this.state = {
+        columns: _this.setColumOrderByIndex(props.columns)
+      };
+      return _this;
+    }
+
+    DragColumn.prototype.componentWillReceiveProps = function componentWillReceiveProps(nextProps) {
+      if (nextProps.columns != this.props.columns) {
+        this.setState({
+          columns: this.setColumOrderByIndex(nextProps.columns)
+        });
+      }
+    };
+
+    DragColumn.prototype.recursion = function (_recursion) {
+      function recursion(_x) {
+        return _recursion.apply(this, arguments);
+      }
+
+      recursion.toString = function () {
+        return _recursion.toString();
+      };
+
+      return recursion;
+    }(function (obj) {
+      var data = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
+
+      for (key in obj) {
+        if (_typeof(obj[key]) == 'object' && Object.keys(obj[key].length > 0)) {
+          data[key] = recursion(obj[key]);
+        } else {
+          data[key] = obj[key];
+        }
+      }
+      return data;
+    });
+
+    DragColumn.prototype.render = function render() {
+      var _props = this.props,
+          data = _props.data,
+          dragborder = _props.dragborder,
+          draggable = _props.draggable,
+          className = _props.className,
+          others = _objectWithoutProperties(_props, ['data', 'dragborder', 'draggable', 'className']);
+
+      return _react2["default"].createElement(Table, _extends({}, others, {
+        columns: this.state.columns,
+        data: data,
+        className: className + ' u-table-drag-border',
+        onDragEnd: this.onDragEnd,
+        draggable: draggable,
+        dragborder: dragborder
+      }));
+    };
+
+    return DragColumn;
+  }(_react.Component);
 }
 module.exports = exports['default'];

build/lib/util.js

@@ -1,7 +1,7 @@
 'use strict';
 
 Object.defineProperty(exports, "__esModule", {
-  value: true
+    value: true
 });
 
 var _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; };
@@ -20,29 +20,29 @@ exports.ObjectAssign = ObjectAssign;
 */
 
 function sortBy(arr, prop, desc) {
-  var props = [],
-      ret = [],
-      i = 0,
-      len = arr.length;
-  if (typeof prop == 'string') {
-    for (; i < len; i++) {
-      var oI = arr[i];
-      (props[i] = new String(oI && oI[prop] || ''))._obj = oI;
+    var props = [],
+        ret = [],
+        i = 0,
+        len = arr.length;
+    if (typeof prop == 'string') {
+        for (; i < len; i++) {
+            var oI = arr[i];
+            (props[i] = new String(oI && oI[prop] || ''))._obj = oI;
+        }
+    } else if (typeof prop == 'function') {
+        for (; i < len; i++) {
+            var _oI = arr[i];
+            (props[i] = new String(_oI && prop(_oI) || ''))._obj = _oI;
+        }
+    } else {
+        throw '参数类型错误';
     }
-  } else if (typeof prop == 'function') {
-    for (; i < len; i++) {
-      var _oI = arr[i];
-      (props[i] = new String(_oI && prop(_oI) || ''))._obj = _oI;
+    props.sort();
+    for (i = 0; i < len; i++) {
+        ret[i] = props[i]._obj;
     }
-  } else {
-    throw '参数类型错误';
-  }
-  props.sort();
-  for (i = 0; i < len; i++) {
-    ret[i] = props[i]._obj;
-  }
-  if (desc) ret.reverse();
-  return ret;
+    if (desc) ret.reverse();
+    return ret;
 };
 
 /**
@@ -51,11 +51,11 @@ function sortBy(arr, prop, desc) {
  * @param {} property 
  */
 function compare(property) {
-  return function (a, b) {
-    var value1 = a[property];
-    var value2 = b[property];
-    return value1 - value2;
-  };
+    return function (a, b) {
+        var value1 = a[property];
+        var value2 = b[property];
+        return value1 - value2;
+    };
 }
 
 /**
@@ -63,17 +63,17 @@ function compare(property) {
  * @param {*} obj 要拷贝的对象 
  */
 function ObjectAssign(obj) {
-  var b = obj instanceof Array;
-  var tagObj = b ? [] : {};
-  if (b) {
-    //数组
-    obj.forEach(function (da) {
-      var _da = {};
-      _extends(_da, da);
-      tagObj.push(_da);
-    });
-  } else {
-    _extends(tagObj, obj);
-  }
-  return tagObj;
+    var b = obj instanceof Array;
+    var tagObj = b ? [] : {};
+    if (b) {
+        //数组
+        obj.forEach(function (da) {
+            var _da = {};
+            _extends(_da, da);
+            tagObj.push(_da);
+        });
+    } else {
+        _extends(tagObj, obj);
+    }
+    return tagObj;
 }

build/lib/utils.js

@@ -7,8 +7,11 @@ exports.Event = exports.EventUtil = exports.tryParseInt = undefined;
 
 var _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; };
 
+var _typeof = typeof Symbol === "function" && typeof Symbol.iterator === "symbol" ? function (obj) { return typeof obj; } : function (obj) { return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; };
+
 exports.measureScrollbar = measureScrollbar;
 exports.debounce = debounce;
+exports.throttle = throttle;
 exports.warningOnce = warningOnce;
 exports.getOffset = getOffset;
 exports.addClass = addClass;
@@ -95,6 +98,36 @@ function debounce(func, wait, immediate) {
   };
 }
 
+function isObject(value) {
+  var type = typeof value === 'undefined' ? 'undefined' : _typeof(value);
+  return value != null && (type == 'object' || type == 'function');
+}
+
+/**
+ * 函数节流
+ * @param {*} func 延时调用函数
+ * @param {*} wait 延迟多长时间
+ * @param {*} options 至少多长时间触发一次
+ * @return Function 延迟执行的方法
+ */
+function throttle(func, wait, options) {
+  var leading = true;
+  var trailing = true;
+
+  if (typeof func !== 'function') {
+    throw new TypeError('Expected a function');
+  }
+  if (isObject(options)) {
+    leading = 'leading' in options ? !!options.leading : leading;
+    trailing = 'trailing' in options ? !!options.trailing : trailing;
+  }
+  return debounce(func, wait, {
+    leading: leading,
+    trailing: trailing,
+    'maxWait': wait
+  });
+}
+
 var warned = {};
 function warningOnce(condition, format, args) {
   if (!warned[format]) {

dist/demo.css

@@ -342,7 +342,6 @@
     text-align: center;
     line-height: 14px;
     -webkit-user-select: none;
-    -moz-user-select: none;
     -ms-user-select: none;
     user-select: none; }
     .u-table-row-expand-icon.uf, .u-table-expanded-row-expand-icon.uf {
@@ -428,10 +427,9 @@
     background: rgb(241, 242, 245);
     color: rgb(33, 33, 33);
     background-clip: padding-box;
-    -moz-user-select: -moz-none;
     -webkit-user-select: none;
-    /*
-        Introduced in IE 10. 
+    /*
+        Introduced in IE 10. 
       */
     -ms-user-select: none;
     user-select: none; }

package.json

@@ -1,6 +1,6 @@
 {
  "name": "bee-table",
- "version": "2.2.0",
+ "version": "2.2.1-nc.4",
  "description": "Table ui component for react",
  "keywords": [
   "react",
@@ -92,4 +92,4 @@
   "reqwest": "^2.0.5",
   "tinper-bee": "latest"
  }
-}
+}

src/Table.js

@@ -3,7 +3,7 @@ import PropTypes from 'prop-types';
 import classes from 'component-classes';
 import TableRow from './TableRow';
 import TableHeader from './TableHeader';
-import { measureScrollbar, debounce, warningOnce ,getMaxColChildrenLength} from './lib/utils';
+import { measureScrollbar, debounce, warningOnce ,getMaxColChildrenLength, throttle} from './lib/utils';
 import shallowequal from 'shallowequal';
 import addEventListener from 'tinper-bee-core/lib/addEventListener';
 import ColumnManager from './ColumnManager';
@@ -221,7 +221,6 @@ class Table extends Component {
       this.scrollbarWidth = measureScrollbar();
     }
 
-
     // console.log('this.scrollTop**********',this.scrollTop);
 
   }
@@ -229,7 +228,7 @@ class Table extends Component {
   componentDidUpdate(prevProps) {
 
     if (this.columnManager.isAnyColumnsFixed()) {
-      this.syncFixedTableRowHeight();
+      throttle(this.syncFixedTableRowHeight, 300)();
     }
     //适应模态框中表格、以及父容器宽度变化的情况
     if (typeof (this.props.scroll.x) !== 'number' && this.contentTable.getBoundingClientRect().width !== this.contentDomWidth && this.firstDid) {
@@ -659,7 +658,7 @@ class Table extends Component {
     const expandRowByClick = props.expandRowByClick;
     const { fixedColumnsBodyRowsHeight } = this.state;
     let rst = [];
-
+    let isTreeType = false; //每次遍历 data 前，将此变量置为 false，若遍历完 data，此变量仍为 false，说明是普通表格
     let height;
     const rowClassName = props.rowClassName;
     const rowRef = props.rowRef;
@@ -797,6 +796,7 @@ class Table extends Component {
         ));
       }
       if (childrenColumn) {
+        isTreeType = true; //增加该标志位，为了兼容老版本，不修改以前的 `this.treeType` 的相关逻辑
         this.treeType = true;//证明是tree表形式visible = {true}
         rst = rst.concat(this.getRowsByData(
           childrenColumn, subVisible, indent + 1, columns, fixed,paramRootIndex
@@ -809,6 +809,9 @@ class Table extends Component {
         <TableRow height={props.lazyLoad.sufHeight} key={'table_row_end'} columns={[]} className='' store={this.store} visible = {true}/>
       )
     }
+    if (!isTreeType) {
+      this.treeType = false;
+    }
     return rst;
   }
 

src/lib/bigData.js

@@ -42,7 +42,7 @@ export default function bigData(Table) {
       this.endIndex = this.currentIndex + this.loadCount; //数据结束位置
       this.setRowHeight = this.setRowHeight.bind(this);
       this.setRowParentIndex = this.setRowParentIndex.bind(this);
-      this.expandedRowKeys = [];
+      this.expandedRowKeys = props.expandedRowKeys || [];
     }
     componentWillReceiveProps(nextProps) {
       const props = this.props;
@@ -73,6 +73,11 @@ export default function bigData(Table) {
       if(currentIndex!==-1 && currentIndex !== this.currentIndex){
         _this.setStartAndEndIndex(currentIndex,dataLen);
       }
+      if ('expandedRowKeys' in nextProps) {
+        this.setState({
+          expandedRowKeys: nextProps.expandedRowKeys,
+        });
+      }
 
     }
 
@@ -471,7 +476,7 @@ export default function bigData(Table) {
           setRowHeight={this.setRowHeight}
           setRowParentIndex={this.setRowParentIndex}
           onExpand={this.onExpand}
-          onExpandedRowsChange={this.onExpandedRowsChange}
+          onExpandedRowsChange={this.props.onExpandedRowsChange}
           expandedRowKeys={expandedRowKeys}
           //   className={'lazy-table'}
         />

src/lib/utils.js

@@ -66,6 +66,36 @@ export function debounce(func, wait, immediate) {
   };
 }
 
+function isObject(value) {
+  const type = typeof value
+  return value != null && (type == 'object' || type == 'function')
+}
+
+/**
+ * 函数节流
+ * @param {*} func 延时调用函数
+ * @param {*} wait 延迟多长时间
+ * @param {*} options 至少多长时间触发一次
+ * @return Function 延迟执行的方法
+ */
+export function throttle(func, wait, options) {
+  let leading = true
+  let trailing = true
+
+  if (typeof func !== 'function') {
+    throw new TypeError('Expected a function')
+  }
+  if (isObject(options)) {
+    leading = 'leading' in options ? !!options.leading : leading
+    trailing = 'trailing' in options ? !!options.trailing : trailing
+  }
+  return debounce(func, wait, {
+    leading,
+    trailing,
+    'maxWait': wait,
+  })
+}
+
 const warned = {};
 export function warningOnce(condition, format, args) {
   if (!warned[format]) {