react-virtualized - npm Package Compare versions

Comparing version 5.1.2-rc1 to 5.2.0

CHANGELOG.md

 Changelog
 ------------
 
+### 5.2.0
+Added optional `onResize` callback property to `AutoSizer`. This method is invoked any time the `AutoSizer` detects a resize. It is passed `width` and `height` named parameters.
+
+Added optional `minWidth` and `maxWidth` properties to `FlexColumn` to enable greater flexibility with regard to table-column layout.
+
 ##### 5.1.1
@@ -5,0 +10,0 @@ Marked `FlexColumn` `width` property as required since ommitting this property can lead to uneven column layouts.

docs/AutoSizer.md

@@ -12,2 +12,3 @@ AutoSizer
 | disableWidth | Boolean |  | If true the child's `width` property will not be managed |
+| onResize | Function | Callback to be invoked on-resize; it is passed the following named parameters: `({ height, width })` | 
 
@@ -14,0 +15,0 @@ ### Examples

docs/FlexColumn.md

@@ -19,3 +19,5 @@ FlexColumn
 | label | String |  | Header label for this column |
-| width | Number |  | Fixed width for this column |
+| maxWidth | Number |  | Maximum width of column; this property will only be used if :flexGrow is greater than 0 |
+| minWidth | Number |  | Minimum width of column |
+| width | Number | ✓ | Flex basis (width) for this column; This value can grow or shrink based on `flexGrow` and `flexShrink` properties |
 
@@ -22,0 +24,0 @@ #### cellDataGetter

es/AutoSizer/AutoSizer.js

@@ -48,5 +48,14 @@ 'use strict';
       /** Disable dynamic :width property */
-      disableWidth: _react.PropTypes.bool
+      disableWidth: _react.PropTypes.bool,
+
+      /** Callback to be invoked on-resize: ({ height, width }) */
+      onResize: _react.PropTypes.func.isRequired
     },
     enumerable: true
+  }, {
+    key: 'defaultProps',
+    value: {
+      onResize: function onResize() {}
+    },
+    enumerable: true
   }]);
@@ -120,2 +129,4 @@
     value: function _onResize() {
+      var onResize = this.props.onResize;
+
       var _parentNode$getBoundingClientRect = this._parentNode.getBoundingClientRect();
@@ -136,2 +147,4 @@
       });
+
+      onResize({ height: height, width: width });
     }
@@ -138,0 +151,0 @@ }, {

es/FlexTable/FlexColumn.js

@@ -98,3 +98,7 @@ 'use strict';
       label: _react.PropTypes.string,
-      /** Optional fixed width for this column */
+      /** Maximum width of column; this property will only be used if :flexGrow is > 0. */
+      maxWidth: _react.PropTypes.number,
+      /** Minimum width of column. */
+      minWidth: _react.PropTypes.number,
+      /** Flex basis (width) for this column; This value can grow or shrink based on :flexGrow and :flexShrink properties. */
       width: _react.PropTypes.number.isRequired
@@ -101,0 +105,0 @@ },

es/FlexTable/FlexTable.js

@@ -480,3 +480,3 @@ 'use strict';
 
-      return {
+      var style = {
         flex: flexValue,
@@ -486,2 +486,12 @@ msFlex: flexValue,
       };
+
+      if (column.props.maxWidth) {
+        style.maxWidth = column.props.maxWidth;
+      }
+
+      if (column.props.minWidth) {
+        style.minWidth = column.props.minWidth;
+      }
+
+      return style;
     }
@@ -488,0 +498,0 @@ }, {

es/Grid/Grid.js

@@ -285,3 +285,2 @@ 'use strict';
       var _state = this.state;
-      var isScrolling = _state.isScrolling;
       var scrollLeft = _state.scrollLeft;
@@ -291,10 +290,5 @@ var scrollTop = _state.scrollTop;
       // Make sure any changes to :scrollLeft or :scrollTop get applied
-      // Don't re-apply while a scroll is in progress; this causes slow scrolling for certain OS/browser combinations (eg. Windows and Firefox)
-      if (!isScrolling) {
-        if (scrollLeft >= 0 && scrollLeft !== prevState.scrollLeft && scrollLeft !== this.refs.scrollingContainer.scrollLeft) {
-          this.refs.scrollingContainer.scrollLeft = scrollLeft;
-        }
-        if (scrollTop >= 0 && scrollTop !== prevState.scrollTop && scrollTop !== this.refs.scrollingContainer.scrollTop) {
-          this.refs.scrollingContainer.scrollTop = scrollTop;
-        }
+      if (scrollLeft >= 0 && scrollLeft !== prevState.scrollLeft || scrollTop >= 0 && scrollTop !== prevState.scrollTop) {
+        this.refs.scrollingContainer.scrollLeft = scrollLeft;
+        this.refs.scrollingContainer.scrollTop = scrollTop;
       }
@@ -301,0 +295,0 @@

package.json

@@ -6,3 +6,3 @@ {
   "user": "bvaughn",
-  "version": "5.1.2-rc1",
+  "version": "5.2.0",
   "homepage": "https://github.com/bvaughn/react-virtualized",
@@ -9,0 +9,0 @@ "main": "dist/react-virtualized.js",

source/AutoSizer/AutoSizer.js

@@ -25,5 +25,12 @@ /** @flow */
     /** Disable dynamic :width property */
-    disableWidth: PropTypes.bool
+    disableWidth: PropTypes.bool,
+
+    /** Callback to be invoked on-resize: ({ height, width }) */
+    onResize: PropTypes.func.isRequired
   }
 
+  static defaultProps = {
+    onResize: () => {}
+  }
+
   constructor (props) {
@@ -82,2 +89,3 @@ super(props)
   _onResize () {
+    const { onResize } = this.props
     const { height, width } = this._parentNode.getBoundingClientRect()
@@ -95,2 +103,4 @@
     })
+
+    onResize({ height, width })
   }
@@ -97,0 +107,0 @@

source/AutoSizer/AutoSizer.test.js

@@ -109,3 +109,5 @@ import React from 'react'
 
-  // TODO It would be nice to test that resize events update the width/height
+  // TODO It would be nice to test the following (if I could trigger /vendor/detectElementResize event)
+  // The :onResize callback
+  // That resize events update the width/height
 })

source/FlexTable/FlexColumn.js

@@ -78,5 +78,9 @@ /** @flow */
     label: PropTypes.string,
-    /** Optional fixed width for this column */
+    /** Maximum width of column; this property will only be used if :flexGrow is > 0. */
+    maxWidth: PropTypes.number,
+    /** Minimum width of column. */
+    minWidth: PropTypes.number,
+    /** Flex basis (width) for this column; This value can grow or shrink based on :flexGrow and :flexShrink properties. */
     width: PropTypes.number.isRequired
   }
 }

source/FlexTable/FlexTable.js

@@ -392,3 +392,3 @@ /** @flow */
 
-    return {
+    const style = {
       flex: flexValue,
@@ -398,2 +398,12 @@ msFlex: flexValue,
     }
+
+    if (column.props.maxWidth) {
+      style.maxWidth = column.props.maxWidth
+    }
+
+    if (column.props.minWidth) {
+      style.minWidth = column.props.minWidth
+    }
+
+    return style
   }
@@ -400,0 +410,0 @@

source/Grid/Grid.js

@@ -223,21 +223,11 @@ /** @flow */
     const { columnsCount, columnWidth, height, rowHeight, rowsCount, scrollToColumn, scrollToRow, width } = this.props
-    const { isScrolling, scrollLeft, scrollTop } = this.state
+    const { scrollLeft, scrollTop } = this.state
 
     // Make sure any changes to :scrollLeft or :scrollTop get applied
-    // Don't re-apply while a scroll is in progress; this causes slow scrolling for certain OS/browser combinations (eg. Windows and Firefox)
-    if (!isScrolling) {
-      if (
-        scrollLeft >= 0 &&
-        scrollLeft !== prevState.scrollLeft &&
-        scrollLeft !== this.refs.scrollingContainer.scrollLeft
-      ) {
-        this.refs.scrollingContainer.scrollLeft = scrollLeft
-      }
-      if (
-        scrollTop >= 0 &&
-        scrollTop !== prevState.scrollTop &&
-        scrollTop !== this.refs.scrollingContainer.scrollTop
-      ) {
-        this.refs.scrollingContainer.scrollTop = scrollTop
-      }
+    if (
+      (scrollLeft >= 0 && scrollLeft !== prevState.scrollLeft) ||
+      (scrollTop >= 0 && scrollTop !== prevState.scrollTop)
+    ) {
+      this.refs.scrollingContainer.scrollLeft = scrollLeft
+      this.refs.scrollingContainer.scrollTop = scrollTop
     }
@@ -244,0 +234,0 @@

Fixed alerts

No v1

Quality

Package is not semver >=1. This means it is not stable and does not support ^ ranges.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

832972

increased by0.4%

Lines of code

11811

increased by0.33%

Number of low quality alerts

0

decreased by-100%

No dependency changes