rsuite-table - npm Package Compare versions

Comparing version 3.5.6 to 3.5.7

CHANGELOG.md

@@ -0,1 +1,7 @@
+# 3.5.7
+
+- Fixed component not re-rendered after `sortType` update.
+- Fix the position of the scroll bar when the height of the table changes
+- Fix validation of merged cells for custom children
+
 # 3.5.6
@@ -2,0 +8,0 @@

lib/Scrollbar.js

@@ -55,3 +55,3 @@ 'use strict';
 
-    _this.hanldeMouseDown = function (event) {
+    _this.handleMouseDown = function (event) {
       var onMouseDown = _this.props.onMouseDown;
@@ -68,3 +68,3 @@
 
-    _this.hanldeDragEnd = function () {
+    _this.handleDragEnd = function () {
       _this.releaseMouseMoves();
@@ -76,3 +76,3 @@ _this.setState({
 
-    _this.hanldeDragMove = function (deltaX, deltaY, event) {
+    _this.handleDragMove = function (deltaX, deltaY, event) {
       var vertical = _this.props.vertical;
@@ -87,3 +87,3 @@
 
-    _this.hanldeClick = function (event) {
+    _this.handleClick = function (event) {
       if (_this.handle && _this.handle.contains(event.target)) {
@@ -152,3 +152,3 @@ return;
     value: function getMouseMoveTracker() {
-      return this.mouseMoveTracker || new _domLib.DOMMouseMoveTracker(this.hanldeDragMove, this.hanldeDragEnd, document.body);
+      return this.mouseMoveTracker || new _domLib.DOMMouseMoveTracker(this.handleDragMove, this.handleDragEnd, document.body);
     }
@@ -253,3 +253,3 @@ }, {
           className: classes,
-          onClick: this.hanldeClick,
+          onClick: this.handleClick,
           role: 'toolbar'
@@ -261,3 +261,3 @@ }),
           style: styles,
-          onMouseDown: this.hanldeMouseDown,
+          onMouseDown: this.handleMouseDown,
           role: 'button',
@@ -264,0 +264,0 @@ tabIndex: -1

lib/Table.js

@@ -77,2 +77,4 @@ 'use strict';
 
+var _constants = require('./constants');
+
 var _propTypes = require('prop-types');
@@ -262,3 +264,3 @@
 
-      if (this.props.children !== nextProps.children) {
+      if (this.props.children !== nextProps.children || this.props.sortColumn !== nextProps.sortColumn || this.props.sortType !== nextProps.sortType) {
         this._cacheCells = null;
@@ -627,6 +629,9 @@ }
 
-      // 如果 data 更新，则更新滚动条位置
-      if (prevProps && prevProps.data !== this.props.data) {
-        var top = Math.abs(this.scrollY) / nextContentHeight * (height - headerHeight);
-        this.scrollbarY.resetScrollBarPosition(top);
+      if (prevProps && (
+      // 当 data 更新，或者表格高度更新，则更新滚动条
+      prevProps.height !== height || prevProps.data !== this.props.data) && this.scrollY !== 0) {
+        var ratio = (Math.abs(this.scrollY) + prevProps.height - headerHeight) / (nextContentHeight + 10);
+
+        this.scrollTop(ratio * nextContentHeight + 10);
+        this.updatePosition();
       }
@@ -646,3 +651,3 @@
       // 当 Table 为 virtualized 时， wheel 事件触发每次都会进入该逻辑， 避免在滚动到底部后滚动条重置, +10
-      if (Math.abs(this.scrollY) > contentHeight - height + 10) {
+      if (Math.abs(this.scrollY) + height - headerHeight > nextContentHeight + 10) {
         this.scrollTop(0);
@@ -1403,8 +1408,15 @@ }
     var table = _this3.table;
+    var width = _this3.state.width;
+
     if (table) {
-      _this3.scrollX = 0;
-      _this3.scrollbarX && _this3.scrollbarX.resetScrollBarPosition();
+      var nextWidth = (0, _domLib.getWidth)(table);
+
+      if (width !== nextWidth) {
+        _this3.scrollX = 0;
+        _this3.scrollbarX && _this3.scrollbarX.resetScrollBarPosition();
+      }
+
       _this3._cacheCells = null;
       _this3.setState({
-        width: (0, _domLib.getWidth)(table)
+        width: nextWidth
       });
@@ -1416,8 +1428,22 @@ }
     var top = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : 0;
+    var _props16 = _this3.props,
+        height = _props16.height,
+        headerHeight = _props16.headerHeight;
+    var contentHeight = _this3.state.contentHeight;
 
-    _this3.scrollY = -top;
-    _this3.scrollbarY && _this3.scrollbarY.resetScrollBarPosition(top);
+    var scrollY = top === 0 ? 0 : top - (height - headerHeight);
 
+    _this3.scrollY = -scrollY;
+    if (_this3.scrollbarY) {
+      var y = 0;
+      if (top !== 0) {
+        // 滚动条的高度
+        var scrollbarHeight = Math.max((height - headerHeight) / (contentHeight + 10) * (height - headerHeight), _constants.SCROLLBAR_MIN_WIDTH);
+        y = top / (contentHeight + 10) * (height - headerHeight) - scrollbarHeight;
+      }
+      _this3.scrollbarY.resetScrollBarPosition(y);
+    }
+
     _this3.setState({
-      scrollY: -top
+      scrollY: -scrollY
     });
@@ -1424,0 +1450,0 @@ };

lib/utils/colSpanCells.js

@@ -11,2 +11,6 @@ 'use strict';
 
+var _isFunction2 = require('lodash/isFunction');
+
+var _isFunction3 = _interopRequireDefault(_isFunction2);
+
 var _react = require('react');
@@ -44,2 +48,3 @@
               rowData = _nextCell$props.rowData,
+              rowIndex = _nextCell$props.rowIndex,
               dataKey = _nextCell$props.dataKey,
@@ -50,3 +55,5 @@ children = _nextCell$props.children,
 
-          if (rowData && (0, _isNullOrUndefined2.default)((0, _get3.default)(rowData, dataKey)) || isHeaderCell && (0, _isNullOrUndefined2.default)(children)) {
+          var cellText = (0, _isFunction3.default)(children) ? children(rowData, rowIndex) : (0, _get3.default)(rowData, dataKey);
+
+          if (rowData && (0, _isNullOrUndefined2.default)(cellText) || isHeaderCell && (0, _isNullOrUndefined2.default)(children)) {
             nextWidth += colSpanWidth;
@@ -53,0 +60,0 @@ cells[i + j] = cloneCell(nextCell, {

package.json

 {
   "name": "rsuite-table",
-  "version": "3.5.6",
+  "version": "3.5.7",
   "description": "A React table component",
@@ -5,0 +5,0 @@ "main": "lib/index.js",

src/Scrollbar.js

@@ -67,3 +67,3 @@ // @flow
       this.mouseMoveTracker ||
-      new DOMMouseMoveTracker(this.hanldeDragMove, this.hanldeDragEnd, document.body)
+      new DOMMouseMoveTracker(this.handleDragMove, this.handleDragEnd, document.body)
     );
@@ -81,3 +81,3 @@ }
 
-  hanldeMouseDown = (event: SyntheticMouseEvent<*>) => {
+  handleMouseDown = (event: SyntheticMouseEvent<*>) => {
     const { onMouseDown } = this.props;
@@ -93,3 +93,3 @@
 
-  hanldeDragEnd = () => {
+  handleDragEnd = () => {
     this.releaseMouseMoves();
@@ -146,3 +146,3 @@ this.setState({
 
-  hanldeDragMove = (deltaX: number, deltaY: number, event: SyntheticEvent<*>) => {
+  handleDragMove = (deltaX: number, deltaY: number, event: SyntheticEvent<*>) => {
     const { vertical } = this.props;
@@ -159,3 +159,3 @@
    */
-  hanldeClick = (event: SyntheticMouseEvent<*>) => {
+  handleClick = (event: SyntheticMouseEvent<*>) => {
     if (this.handle && this.handle.contains(event.target)) {
@@ -212,3 +212,3 @@ return;
         className={classes}
-        onClick={this.hanldeClick}
+        onClick={this.handleClick}
         role="toolbar"
@@ -220,3 +220,3 @@ >
           style={styles}
-          onMouseDown={this.hanldeMouseDown}
+          onMouseDown={this.handleMouseDown}
           role="button"
@@ -223,0 +223,0 @@ tabIndex={-1}

src/Table.js

@@ -32,2 +32,3 @@ // @flow
 } from './utils';
+import { SCROLLBAR_MIN_WIDTH } from './constants';
 
@@ -294,3 +295,7 @@ const ReactChildren = React.Children;
 
-    if (this.props.children !== nextProps.children) {
+    if (
+      this.props.children !== nextProps.children ||
+      this.props.sortColumn !== nextProps.sortColumn ||
+      this.props.sortType !== nextProps.sortType
+    ) {
       this._cacheCells = null;
@@ -779,8 +784,14 @@ }
     const table = this.table;
+    const { width } = this.state;
     if (table) {
-      this.scrollX = 0;
-      this.scrollbarX && this.scrollbarX.resetScrollBarPosition();
+      const nextWidth = getWidth(table);
+
+      if (width !== nextWidth) {
+        this.scrollX = 0;
+        this.scrollbarX && this.scrollbarX.resetScrollBarPosition();
+      }
+
       this._cacheCells = null;
       this.setState({
-        width: getWidth(table)
+        width: nextWidth
       });
@@ -831,6 +842,13 @@ }
 
-    // 如果 data 更新，则更新滚动条位置
-    if (prevProps && prevProps.data !== this.props.data) {
-      const top = (Math.abs(this.scrollY) / nextContentHeight) * (height - headerHeight);
-      this.scrollbarY.resetScrollBarPosition(top);
+    if (
+      prevProps &&
+      // 当 data 更新，或者表格高度更新，则更新滚动条
+      (prevProps.height !== height || prevProps.data !== this.props.data) &&
+      this.scrollY !== 0
+    ) {
+      const ratio =
+        (Math.abs(this.scrollY) + prevProps.height - headerHeight) / (nextContentHeight + 10);
+
+      this.scrollTop(ratio * nextContentHeight + 10);
+      this.updatePosition();
     }
@@ -850,3 +868,3 @@
     // 当 Table 为 virtualized 时， wheel 事件触发每次都会进入该逻辑， 避免在滚动到底部后滚动条重置, +10
-    if (Math.abs(this.scrollY) > contentHeight - height + 10) {
+    if (Math.abs(this.scrollY) + height - headerHeight > nextContentHeight + 10) {
       this.scrollTop(0);
@@ -858,7 +876,22 @@ }
   scrollTop = (top: number = 0) => {
-    this.scrollY = -top;
-    this.scrollbarY && this.scrollbarY.resetScrollBarPosition(top);
+    const { height, headerHeight } = this.props;
+    const { contentHeight } = this.state;
+    const scrollY = top === 0 ? 0 : top - (height - headerHeight);
 
+    this.scrollY = -scrollY;
+    if (this.scrollbarY) {
+      let y = 0;
+      if (top !== 0) {
+        // 滚动条的高度
+        const scrollbarHeight = Math.max(
+          ((height - headerHeight) / (contentHeight + 10)) * (height - headerHeight),
+          SCROLLBAR_MIN_WIDTH
+        );
+        y = (top / (contentHeight + 10)) * (height - headerHeight) - scrollbarHeight;
+      }
+      this.scrollbarY.resetScrollBarPosition(y);
+    }
+
     this.setState({
-      scrollY: -top
+      scrollY: -scrollY
     });
@@ -865,0 +898,0 @@ };

src/utils/colSpanCells.js

@@ -24,5 +24,16 @@ import React from 'react';
         if (nextCell) {
-          let { rowData, dataKey, children, width: colSpanWidth, isHeaderCell } = nextCell.props;
+          const {
+            rowData,
+            rowIndex,
+            dataKey,
+            children,
+            width: colSpanWidth,
+            isHeaderCell
+          } = nextCell.props;
+          const cellText = _.isFunction(children)
+            ? children(rowData, rowIndex)
+            : _.get(rowData, dataKey);
+
           if (
-            (rowData && isNullOrUndefined(_.get(rowData, dataKey))) ||
+            (rowData && isNullOrUndefined(cellText)) ||
             (isHeaderCell && isNullOrUndefined(children))
@@ -29,0 +40,0 @@ ) {

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

214214

increased by1.24%

Lines of code

4540

increased by1.41%

No dependency changes