滚动时不实时render

dist/demo.js

@@ -7237,7 +7237,7 @@
 	  duration: _propTypes2["default"].number,
 	  onClose: _propTypes2["default"].func,
 	  children: _propTypes2["default"].any,
-	  color: _propTypes2["default"].oneOf(['info', 'success', 'danger', 'warning', 'light', 'dark', 'news', 'infolight', 'successlight', 'dangerlight', 'warninglight']),
+	  color: _propTypes2["default"].oneOf(['light']),
 	  title: _propTypes2["default"].any
 	};
 	
@@ -7336,7 +7336,7 @@
 	
 	;
 	
-	Notice.propTypes = propTypes;
+	Notice.PropTypes = _propTypes2["default"];
 	Notice.defaultProps = defaultProps;
 	
 	exports["default"] = Notice;
@@ -10582,6 +10582,10 @@
 	
 	var _propTypes2 = _interopRequireDefault(_propTypes);
 	
+	var _componentClasses = __webpack_require__(46);
+	
+	var _componentClasses2 = _interopRequireDefault(_componentClasses);
+	
 	var _TableRow = __webpack_require__(106);
 	
 	var _TableRow2 = _interopRequireDefault(_TableRow);
@@ -11600,18 +11604,24 @@
 	      return;
 	    }
 	    if (e.target.scrollLeft !== this.lastScrollLeft) {
+	      var position = '';
 	      if (e.target === bodyTable && headTable) {
 	        headTable.scrollLeft = e.target.scrollLeft;
 	      } else if (e.target === headTable && bodyTable) {
 	        bodyTable.scrollLeft = e.target.scrollLeft;
 	      }
 	      if (e.target.scrollLeft === 0) {
-	        this.setState({ scrollPosition: 'left' });
+	        position = 'left';
 	      } else if (e.target.scrollLeft + 1 >= e.target.children[0].getBoundingClientRect().width - e.target.getBoundingClientRect().width) {
-	        this.setState({ scrollPosition: 'right' });
+	        position = 'right';
 	      } else if (this.state.scrollPosition !== 'middle') {
-	        this.setState({ scrollPosition: 'middle' });
+	        position = 'middle';
 	      }
+	      // if(position){
+	      //   classes(this.contentTable)
+	      //   .remove(new RegExp(`^${prefixCls}-scroll-position-.+$`))
+	      //   .add(`${prefixCls}-scroll-position-${position}`);
+	      // }
 	    }
 	    if (scroll.y) {
 	      if (fixedColumnsBodyLeft && e.target !== fixedColumnsBodyLeft) {
@@ -12612,7 +12622,11 @@
 	    _this.onLineMouseMove = function (e) {
 	      var _this$props = _this.props,
 	          clsPrefix = _this$props.clsPrefix,
-	          dragborder = _this$props.dragborder;
+	          dragborder = _this$props.dragborder,
+	          contentDomWidth = _this$props.contentDomWidth,
+	          scrollbarWidth = _this$props.scrollbarWidth,
+	          contentTable = _this$props.contentTable,
+	          headerScroll = _this$props.headerScroll;
 	
 	      _utils.Event.stopPropagation(e);
 	      var event = _utils.Event.getEvent(e);
@@ -12626,11 +12640,36 @@
 	      var newWidth = _this.drag.oldWidth + diff;
 	      if (newWidth > _this.drag.minWidth) {
 	        currentCols.style.width = newWidth + 'px';
-	        //hao 修改表体的width
+	        //hao 支持固定表头拖拽 修改表体的width
+	        if (_this.fixedTable.cols) {
 	          _this.fixedTable.cols[_this.drag.currIndex].style.width = newWidth + "px";
 	        }
-	      //hao todo
+	
-	      _this.table.table.style.width = parseInt(_this.table.table.style.width) + diff; //改变table的width
+	        //表头滚动条处理
+	        if (headerScroll) {
+	          var oldTableWidth = parseInt(_this.table.table.style.width ? _this.table.table.style.width : _this.table.table.scrollWidth);
+	          var newTableWidth = oldTableWidth + diff;
+	          _this.table.table.style.width = newTableWidth; //改变table的width
+	
+	          var showScroll = contentDomWidth - newTableWidth - scrollbarWidth;
+	          // if(bordered){
+	          //     showScroll = showScroll -1;
+	          // }
+	          var fixedLeftHeaderTable = contentTable.querySelector('.u-table-fixed-left .u-table-header');
+	          var fixedRighHeadertTable = contentTable.querySelector('.u-table-fixed-right .u-table-header');
+	          var contentTableHeader = contentTable.querySelector('.u-table-scroll .u-table-header');
+	          if (showScroll < 0) {
+	            //找到固定列表格，设置表头的marginBottom值为scrollbarWidth;
+	            contentTableHeader.style.overflowX = 'scroll';
+	            fixedLeftHeaderTable && (fixedLeftHeaderTable.style.marginBottom = scrollbarWidth + "px");
+	            fixedRighHeadertTable && (fixedRighHeadertTable.style.marginBottom = scrollbarWidth + "px");
+	          } else {
+	            contentTableHeader.style.overflowX = 'hidden';
+	            fixedLeftHeaderTable && (fixedLeftHeaderTable.style.marginBottom = '0px');
+	            fixedRighHeadertTable && (fixedRighHeadertTable.style.marginBottom = '0px');
+	          }
+	        }
+	      }
 	    };
 	
 	    _this.onLineMouseDown = function (e) {
@@ -12652,6 +12691,10 @@
 	    };
 	
 	    _this.onLineMouseUp = function (event) {
+	      var rows = _this.props.rows;
+	
+	      var data = { rows: rows[0], cols: _this.table.cols, currIndex: _this.drag.currIndex };
+	      _this.props.afterDragColWidth && _this.props.afterDragColWidth(data);
 	      _this.clearDragBorder(event);
 	    };
 	
@@ -12957,10 +13000,7 @@
 	
 	  TableHeader.prototype.clearDragBorder = function clearDragBorder() {
 	    if (!this.props.dragborder) return;
-	    var rows = this.props.rows;
 	
-	    var data = { rows: rows[0], cols: this.table.cols, currIndex: this.drag.currIndex };
-	    this.props.afterDragColWidth && this.props.afterDragColWidth(data);
 	    this.drag = {
 	      option: ""
 	    };
@@ -21508,7 +21548,7 @@
 	    InputNumber.prototype.ComponentWillMount = function ComponentWillMount() {};
 	
 	    InputNumber.prototype.componentWillReceiveProps = function componentWillReceiveProps(nextProps) {
-	        if (!nextProps.hasOwnProperty('precision')) {
+	        //  if(!nextProps.hasOwnProperty('precision')){//如果没有 precision
 	        var data = judgeValue(nextProps);
 	        this.setState({
 	            value: data.value,
@@ -21516,7 +21556,7 @@
 	            plusDisabled: data.plusDisabled
 	        });
 	        this.tempStorage = data.value;
-	        }
+	        //  }
 	    };
 	
 	    InputNumber.prototype.ComponentWillUnMount = function ComponentWillUnMount() {
@@ -59294,18 +59334,18 @@
 	    }
 	  };
 	
-	  Popconfirm.prototype.handleClose = function handleClose(e) {
+	  Popconfirm.prototype.handleClose = function handleClose() {
 	    var onClose = this.props.onClose;
 	
 	    this.hide();
-	    onClose && onClose(e);
+	    onClose && onClose();
 	  };
 	
-	  Popconfirm.prototype.handleCancel = function handleCancel(e) {
+	  Popconfirm.prototype.handleCancel = function handleCancel() {
 	    var onCancel = this.props.onCancel;
 	
 	    this.hide();
-	    onCancel && onCancel(e);
+	    onCancel && onCancel();
 	  };
 	
 	  Popconfirm.prototype.handleHide = function handleHide() {
@@ -59341,8 +59381,7 @@
 	        content = _props.content,
 	        children = _props.children,
 	        onClick = _props.onClick,
-	        stopbubble = _props.stopbubble,
+	        props = _objectWithoutProperties(_props, ['content', 'children', 'onClick']);
-	        props = _objectWithoutProperties(_props, ['content', 'children', 'onClick', 'stopbubble']);
 	
 	    delete props.defaultOverlayShown;
 	
@@ -59359,7 +59398,6 @@
 	      _extends({}, confirmProps, {
 	        onClose: this.handleClose,
 	        onCancel: this.handleCancel,
-	        stopbubble: stopbubble,
 	        placement: props.placement }),
 	      content
 	    );
@@ -59474,11 +59512,6 @@
 	     */
 	    arrowOffsetLeft: _propTypes2["default"].oneOfType([_propTypes2["default"].number, _propTypes2["default"].string]),
 	
-	    /**
-	     * 阻止冒泡
-	     */
-	    stopbubble: _propTypes2["default"].number,
-	
 	    /**
 	     * Title content
 	     */
@@ -59489,7 +59522,6 @@
 	};
 	
 	var defaultProps = {
-	    stopbubble: 0,
 	    placement: 'right',
 	    clsPrefix: 'u-popconfirm',
 	    locale: {}
@@ -59501,27 +59533,7 @@
 	    function Confirm(props) {
 	        _classCallCheck(this, Confirm);
 	
-	        var _this = _possibleConstructorReturn(this, _React$Component.call(this, props));
+	        return _possibleConstructorReturn(this, _React$Component.call(this, props));
-	
-	        _this.cancel = function (e) {
-	            var _this$props = _this.props,
-	                stopbubble = _this$props.stopbubble,
-	                onCancel = _this$props.onCancel;
-	
-	            stopbubble && e.stopPropagation();
-	            onCancel(e);
-	        };
-	
-	        _this.close = function (e) {
-	            var _this$props2 = _this.props,
-	                stopbubble = _this$props2.stopbubble,
-	                onClose = _this$props2.onClose;
-	
-	            stopbubble && e.stopPropagation();
-	            onClose(e);
-	        };
-	
-	        return _this;
 	    }
 	
 	    Confirm.prototype.render = function render() {
@@ -59543,8 +59555,7 @@
 	            onClose = _props.onClose,
 	            color = _props.color,
 	            onCancel = _props.onCancel,
-	            stopbubble = _props.stopbubble,
+	            props = _objectWithoutProperties(_props, ['placement', 'positionTop', 'positionLeft', 'arrowOffsetTop', 'arrowOffsetLeft', 'clsPrefix', 'trigger', 'title', 'className', 'style', 'children', 'locale', 'onClose', 'color', 'onCancel']);
-	            props = _objectWithoutProperties(_props, ['placement', 'positionTop', 'positionLeft', 'arrowOffsetTop', 'arrowOffsetLeft', 'clsPrefix', 'trigger', 'title', 'className', 'style', 'children', 'locale', 'onClose', 'color', 'onCancel', 'stopbubble']);
 	
 	        var local = (0, _tool.getComponentLocale)(this.props, this.context, 'Popconfirm', function () {
 	            return _i18n2["default"];
@@ -59570,10 +59581,7 @@
 	            _extends({}, props, {
 	                role: 'tooltip',
 	                className: (0, _classnames2["default"])(className, classes),
-	                style: outerStyle,
+	                style: outerStyle
-	                onClick: function onClick(e) {
-	                    return stopbubble && e.stopPropagation();
-	                }
 	            }),
 	            _react2["default"].createElement('div', { className: 'arrow', style: arrowStyle }),
 	            _react2["default"].createElement(
@@ -59586,13 +59594,13 @@
 	                { className: (0, _classnames2["default"])(clsPrefix + '-confirm') },
 	                _react2["default"].createElement(
 	                    _beeButton2["default"],
-	                    { onClick: this.cancel, size: 'sm', style: { minWidth: 50 },
+	                    { onClick: onCancel, size: 'sm', style: { minWidth: 50 },
 	                        shape: 'border' },
 	                    local['cancel']
 	                ),
 	                _react2["default"].createElement(
 	                    _beeButton2["default"],
-	                    { onClick: this.close, size: 'sm', style: { minWidth: 50 }, colors: 'primary' },
+	                    { onClick: onClose, size: 'sm', style: { minWidth: 50 }, colors: 'primary' },
 	                    local['ok']
 	                )
 	            )

package.json

@@ -65,6 +65,7 @@
     "shallowequal": "^1.0.2",
     "throttle-debounce": "^2.0.1",
     "tinper-bee-core": "latest",
+    "component-classes": "^1.2.6",
     "warning": "^3.0.0"
   },
   "peerDependencies": {

src/Table.js

@@ -1,5 +1,6 @@
 import React, { Component } from 'react';
 import PropTypes from 'prop-types';
+import classes from 'component-classes';
 import TableRow from './TableRow';
 import TableHeader from './TableHeader';
 import { measureScrollbar, debounce, warningOnce ,getMaxColChildrenLength} from './utils';
@@ -904,20 +905,27 @@ class Table extends Component {
       return;
     }
     if (e.target.scrollLeft !== this.lastScrollLeft) {
+      let position = '';
       if (e.target === bodyTable && headTable) {
         headTable.scrollLeft = e.target.scrollLeft;
       } else if (e.target === headTable && bodyTable) {
         bodyTable.scrollLeft = e.target.scrollLeft;
       }
       if (e.target.scrollLeft === 0) {
-        this.setState({ scrollPosition: 'left' });
+        position='left';
       } else if (e.target.scrollLeft + 1 >=
         e.target.children[0].getBoundingClientRect().width -
         e.target.getBoundingClientRect().width) {
-        this.setState({ scrollPosition: 'right' });
+          position='right';
       } else if (this.state.scrollPosition !== 'middle') {
-        this.setState({ scrollPosition: 'middle' });
+        position='middle';
       }
+      if(position){
+        classes(this.contentTable)
+        .remove(new RegExp(`^${prefixCls}-scroll-position-.+$`))
+        .add(`${prefixCls}-scroll-position-${position}`);
+      }
+    
     }
     if (scroll.y) {
       if (fixedColumnsBodyLeft && e.target !== fixedColumnsBodyLeft) {