shineout 1.10.1 → 1.10.2-beta.1

package/css/Table/SeperateTable.js

@@ -41,6 +41,8 @@ var _Scroll2 = require("../Scroll/Scroll");
 
 var _Colgroup = _interopRequireDefault(require("./Colgroup"));
 
+var _emptyDom = _interopRequireDefault(require("./emptyDom"));
+
 var _Thead = _interopRequireDefault(require("./Thead"));
 
 var _Tbody = _interopRequireDefault(require("./Tbody"));
@@ -78,6 +80,7 @@ function (_PureComponent) {
     _this.handleScroll = _this.handleScroll.bind((0, _assertThisInitialized2.default)((0, _assertThisInitialized2.default)(_this)));
     _this.handleSortChange = _this.handleSortChange.bind((0, _assertThisInitialized2.default)((0, _assertThisInitialized2.default)(_this)));
     _this.scrollToTop = _this.scrollToTop.bind((0, _assertThisInitialized2.default)((0, _assertThisInitialized2.default)(_this)));
+    _this.getHeader = _this.getHeader.bind((0, _assertThisInitialized2.default)((0, _assertThisInitialized2.default)(_this)));
     _this.cachedRowHeight = [];
     _this.lastScrollArgs = {};
     _this.lastScrollTop = 0;
@@ -119,6 +122,11 @@ function (_PureComponent) {
     this.ajustBottom(dataChange);
   };
 
+  _proto.getHeader = function getHeader(_ref) {
+    var el = _ref.el;
+    this.headerEl = el;
+  };
+
   _proto.getIndex = function getIndex(scrollTop) {
     if (scrollTop === void 0) {
       scrollTop = this.state.scrollTop;
@@ -590,13 +598,15 @@ function (_PureComponent) {
 
   _proto.handleColgroup = function handleColgroup(tds) {
     var columns = this.props.columns;
+    var items = tds || this.headerEl && this.headerEl.querySelectorAll('th');
+    if (!items) return;
     var colgroup = [];
 
     var _loop = function _loop(i, count) {
-      var _tds$i$getBoundingCli = tds[i].getBoundingClientRect(),
-          width = _tds$i$getBoundingCli.width;
+      var _items$i$getBoundingC = items[i].getBoundingClientRect(),
+          width = _items$i$getBoundingC.width;
 
-      var colSpan = parseInt(tds[i].getAttribute('colspan'), 10);
+      var colSpan = parseInt(items[i].getAttribute('colspan'), 10);
 
       if (colSpan > 1) {
         (0, _numbers.split)(width, (0, _numbers.range)(colSpan).map(function (j) {
@@ -609,7 +619,7 @@ function (_PureComponent) {
       }
     };
 
-    for (var i = 0, count = tds.length; i < count; i++) {
+    for (var i = 0, count = items.length; i < count; i++) {
       _loop(i, count);
     }
 
@@ -645,7 +655,10 @@ function (_PureComponent) {
     });
 
     if (!data || data.length === 0) {
-      return _react.default.createElement("div", null);
+      return _react.default.createElement(_emptyDom.default, {
+        onEmptyRender: this.handleColgroup,
+        columns: columns
+      });
     }
 
     var dataUpdated = this.lastData !== data; // Incorrect height due to changing data length dynamically
@@ -728,6 +741,7 @@ function (_PureComponent) {
       columns: columns,
       resizable: columnResizable && this.lastScrollArgs[4]
     }), _react.default.createElement(_Thead.default, (0, _extends2.default)({}, this.props, {
+      onHeaderRender: this.getHeader,
       colgroup: colgroup,
       onSortChange: this.handleSortChange,
       onColChange: onResize

package/css/Table/SimpleTable.js

@@ -59,6 +59,7 @@ function (_PureComponent) {
     _this.handleScroll = _this.handleScroll.bind((0, _assertThisInitialized2.default)((0, _assertThisInitialized2.default)(_this)));
     _this.handleColgroup = _this.handleColgroup.bind((0, _assertThisInitialized2.default)((0, _assertThisInitialized2.default)(_this)));
     _this.resetColGroup = _this.resetColGroup.bind((0, _assertThisInitialized2.default)((0, _assertThisInitialized2.default)(_this)));
+    _this.getHeader = _this.getHeader.bind((0, _assertThisInitialized2.default)((0, _assertThisInitialized2.default)(_this)));
     return _this;
   }
 
@@ -86,6 +87,11 @@ function (_PureComponent) {
     if (this.removeReiszeObserver) this.removeReiszeObserver();
   };
 
+  _proto.getHeader = function getHeader(_ref) {
+    var el = _ref.el;
+    this.headerEl = el;
+  };
+
   _proto.bindElement = function bindElement(key, el) {
     this[key] = el; // this.body will be undefined on componentDidMount when columns length is 0
 
@@ -125,14 +131,16 @@ function (_PureComponent) {
   };
 
   _proto.handleColgroup = function handleColgroup(tds) {
+    var items = tds || this.headerEl && this.headerEl.querySelectorAll('th');
+    if (!items) return;
     var columns = this.props.columns;
     var colgroup = [];
 
     var _loop = function _loop(i, count) {
-      var _tds$i$getBoundingCli = tds[i].getBoundingClientRect(),
-          width = _tds$i$getBoundingCli.width;
+      var _items$i$getBoundingC = items[i].getBoundingClientRect(),
+          width = _items$i$getBoundingC.width;
 
-      var colSpan = parseInt(tds[i].getAttribute('colspan'), 10);
+      var colSpan = parseInt(items[i].getAttribute('colspan'), 10);
 
       if (colSpan > 1) {
         (0, _numbers.split)(width, (0, _numbers.range)(colSpan).map(function (j) {
@@ -145,7 +153,7 @@ function (_PureComponent) {
       }
     };
 
-    for (var i = 0, count = tds.length; i < count; i++) {
+    for (var i = 0, count = items.length; i < count; i++) {
       _loop(i, count);
     }
 
@@ -155,8 +163,8 @@ function (_PureComponent) {
     });
   };
 
-  _proto.handleScroll = function handleScroll(_ref) {
-    var currentTarget = _ref.currentTarget;
+  _proto.handleScroll = function handleScroll(_ref2) {
+    var currentTarget = _ref2.currentTarget;
     var scrollLeft = currentTarget.scrollLeft;
     setScrollLeft(this.header, scrollLeft);
     setScrollLeft(this.body, scrollLeft);
@@ -185,6 +193,7 @@ function (_PureComponent) {
       columns: columns,
       resizable: columnResizable
     }), _react.default.createElement(_Thead.default, (0, _extends2.default)({}, this.props, {
+      onHeaderRender: this.getHeader,
       colgroup: colgroup,
       onSortChange: this.handleSortChange,
       onColChange: onResize

package/css/Table/Table.js

@@ -151,7 +151,7 @@ function (_Component) {
       columnResizable: columnResizable
     });
     var isEmpty = (!data || data.length === 0) && !children;
-    var useSeparate = fixed && !isEmpty;
+    var useSeparate = fixed;
     var ResizeSepTable = columnResizable ? ResizeSeperateTable : _SeperateTable.default;
     var ResizeSimTable = columnResizable ? ResizeSimpleTable : _SimpleTable.default;
     var RenderTable = useSeparate ? ResizeSepTable : ResizeSimTable;

package/css/Table/Tbody.js

@@ -132,6 +132,8 @@ function (_PureComponent) {
     datum.unsubscribe(RENDER_COL_GROUP_EVENT, this.bodyRender);
 
     if (this.body.clientHeight === 0) {
+      this.colgroupSetted = true;
+      onBodyRender(null);
       datum.subscribe(RENDER_COL_GROUP_EVENT, this.bodyRender);
       return;
     }

package/css/Table/Thead.js

@@ -46,11 +46,20 @@ function (_PureComponent) {
     _this.handleMouseDown = _this.handleResize.bind((0, _assertThisInitialized2.default)((0, _assertThisInitialized2.default)(_this)), 'mousedown');
     _this.handleMouseMove = _this.handleResize.bind((0, _assertThisInitialized2.default)((0, _assertThisInitialized2.default)(_this)), 'mousemove');
     _this.handleMouseUp = _this.handleResize.bind((0, _assertThisInitialized2.default)((0, _assertThisInitialized2.default)(_this)), 'mouseup');
+    _this.bindHeader = _this.bindHeader.bind((0, _assertThisInitialized2.default)((0, _assertThisInitialized2.default)(_this)));
     return _this;
   }
 
   var _proto = Thead.prototype;
 
+  _proto.componentDidMount = function componentDidMount() {
+    var onHeaderRender = this.props.onHeaderRender;
+
+    if (onHeaderRender) {
+      onHeaderRender(this);
+    }
+  };
+
   _proto.setColumns = function setColumns(columns, col, level, index) {
     if (index === void 0) {
       index = 0;
@@ -95,6 +104,10 @@ function (_PureComponent) {
     return colSpan;
   };
 
+  _proto.bindHeader = function bindHeader(el) {
+    this.el = el;
+  };
+
   _proto.resizeColgroup = function resizeColgroup(deltaX) {
     var columns = this.props.columns;
     var item = columns[this.resizingIndex];
@@ -264,7 +277,9 @@ function (_PureComponent) {
 
   _proto.render = function render() {
     var trs = this.formatTrs();
-    return _react.default.createElement("thead", null, trs.map(function (tr, i) {
+    return _react.default.createElement("thead", {
+      ref: this.bindHeader
+    }, trs.map(function (tr, i) {
       return _react.default.createElement("tr", {
         key: i
       }, tr);
@@ -288,7 +303,8 @@ Thead.propTypes = {
   treeColumnsName: _propTypes.default.string,
   treeCheckAll: _propTypes.default.bool,
   colgroup: _propTypes.default.array,
-  renderSorter: _propTypes.default.func
+  renderSorter: _propTypes.default.func,
+  onHeaderRender: _propTypes.default.func
 };
 Thead.defaultProps = {
   showSelectAll: true

package/css/Table/emptyDom.js

@@ -0,0 +1,55 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+exports.__esModule = true;
+exports.default = void 0;
+
+var _inheritsLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/inheritsLoose"));
+
+var _react = _interopRequireDefault(require("react"));
+
+var _propTypes = _interopRequireDefault(require("prop-types"));
+
+var _shallowEqual = require("shineout/utils/shallowEqual");
+
+var EmptyDom =
+/*#__PURE__*/
+function (_React$PureComponent) {
+  (0, _inheritsLoose2.default)(EmptyDom, _React$PureComponent);
+
+  function EmptyDom() {
+    return _React$PureComponent.apply(this, arguments) || this;
+  }
+
+  var _proto = EmptyDom.prototype;
+
+  _proto.componentDidMount = function componentDidMount() {
+    if (this.props.onEmptyRender) {
+      this.props.onEmptyRender();
+    }
+  };
+
+  _proto.componentDidUpdate = function componentDidUpdate(prevProps) {
+    var _this = this;
+
+    if (!(0, _shallowEqual.compareColumns)(prevProps.columns, this.props.columns)) {
+      setTimeout(function () {
+        _this.props.onEmptyRender();
+      });
+    }
+  };
+
+  _proto.render = function render() {
+    return _react.default.createElement("div", null);
+  };
+
+  return EmptyDom;
+}(_react.default.PureComponent);
+
+EmptyDom.propTypes = {
+  onEmptyRender: _propTypes.default.func,
+  columns: _propTypes.default.any
+};
+var _default = EmptyDom;
+exports.default = _default;

package/css/Table/resizable.js

@@ -76,10 +76,19 @@ var _default = function _default(Table) {
     };
 
     _proto.handleResize = function handleResize(index, width, colgroup) {
+      if (colgroup === void 0) {
+        colgroup = [];
+      }
+
       var onColumnResize = this.props.onColumnResize;
       var changed = (0, _immer.default)(this.state, function (draft) {
         var column = draft.columns[index];
-        draft.delta += parseFloat(width - (column.width || colgroup[index] || 0));
+        var beforeWidth = column.width || colgroup[index];
+
+        if (beforeWidth) {
+          draft.delta += parseFloat(width - beforeWidth);
+        }
+
         colgroup[index] = width;
         draft.columns.forEach(function (col, i) {
           var w = colgroup[i];

package/css/index.d.ts

@@ -1,7 +1,7 @@
 // Created by scripts/src-index.js.
 import * as utils from './utils'
 
-export default { utils, version: '1.10.1' }
+export default { utils, version: '1.10.2-beta.1' }
 export { utils }
 export { setLocale } from './locale'
 export { color, style } from './utils/expose'

package/css/index.js

@@ -224,6 +224,6 @@ exports.Upload = _Upload.default;
 // Created by scripts/src-index.js.
 var _default = {
   utils: utils,
-  version: '1.10.1'
+  version: '1.10.2-beta.1'
 };
 exports.default = _default;