react-virtualized - npm Package Compare versions

Comparing version 4.7.1 to 4.8.0

CHANGELOG.md

 Changelog
 ------------
 
-#### 4.7.1
+### 4.8.0
+Updated `InfiniteLoader` to support being composable within an `AutoSizer` HOC. If either a `width` or `height` attribute are specified on `InfiniteLoader` they will be bundled through to the loader's child component.
+
+##### 4.7.1
 Fixed `AutoSizer` bug that caused it to prevent parent flex containers from shrinking in some contexts.
 
-#### 4.7.0
+### 4.7.0
 Added `scrollToIndex` property to `FlexTable` to be passed through to inner `Grid`.
 
-#### 4.6.6
+##### 4.6.6
 Better gaurd against `NaN` values for `clientWidth` and `offsetWidth` for test environments using `jsdom`.
 
-#### 4.6.5
+##### 4.6.5
 Added `react-dom` to the Webpack :externals node to avoid including it in the build.
 This fixes the bad `4.6.3` and `4.6.4` builds. Sorry!
 
-#### 4.6.4
+##### 4.6.4
 Moved `react-dom` from `dependencies` to `peerDependencies` to fix bad `4.6.3` build.
 
-#### 4.6.3
+##### 4.6.3
 Fixed edge-case sizing bug with `FlexTable` headers and always-on scrollbars (see issue #80 for more info).
 
-#### 4.6.2
+##### 4.6.2
 Replaced single occurence of `Number.isNaN` with `isNaN` to avoid IE compatibility issues. Maybe in the future I will add a polyfill dependency but I did not intend to introduce this without a major version bump so I'm removing it.
 
-#### 4.6.1
+##### 4.6.1
 Removes `event.stopPropagation` since it was unnecessary to prevent keyboard event bubbling, only to prevent the default browser behavior.
 
-#### 4.6.0
+### 4.6.0
 Relocated a couple of static style properties from inline style object to exported CSS file for easier customization.
 Added `Grid__cell` and `VirtualScroll__row` classes.
 
-#### 4.5.0
+### 4.5.0
 Added `onScroll` callback to `Grid`, `FlexTable`, and `VirtualScroll`.
 Added `scrollToCell` method to `Grid` and `scrollToRow` to `FlexTable`, and `VirtualScroll`.
 
-#### 4.4.3
+##### 4.4.3
 Added `-ms-flex` and `-webkit-flex` browser prefixes to `FlexTable` cells.
 
-#### 4.4.2
+##### 4.4.2
 Fixed invalid function reference in `Grid` triggered by specifying an initial `scrollToRow` property.
 
-#### 4.4.1
+##### 4.4.1
 Fixed distribution to include new `Grid` component as an export.
 
-#### 4.4.0
+### 4.4.0
 Added new `Grid` component for virtualizing rows _and_ columns .
 Updated `AutoSizer` component to support managing _only_ `width` or `height` (in addition to both).
 
-#### 4.3.1
+##### 4.3.1
 Fixed small CSS property misnaming issue.
 
-#### 4.3.0
+### 4.3.0
 `FlexTable` now supports dynamic row-heights (in the same way as `VirtualScroll`).
 
-#### 4.2.1
+##### 4.2.1
 Set `VirtualScroll` default style to `width: 100%` to be more inline with default `FlexTable` behavior.
 
-#### 4.2.0
+### 4.2.0
 Replaced `React.cloneElement` with wrapper element in order to:
@@ -65,12 +68,12 @@ * Better support for pure function components; (they were not compatible with inline style positioning).
 
-#### 4.1.0
+### 4.1.0
 Added `-webkit-overflow-scrolling: touch` for smoother inertial scrolling on mobile devices.
 
-#### 4.0.2
+##### 4.0.2
 Additional `columnData` parameter passed to `onHeaderClick` callback.
 
-#### 4.0.1
+##### 4.0.1
 Removed an unused dependency on 'inline-style-prefixer' from the `package.json`.
 
-## 4.0.0
+# 4.0.0
 CSS styles have been split into their own, separately loaded stylesheet. This simplifies universal/isomorphic use cases without breaking vendor prefixing. This change means that you'll need to import the following additional file. This only needs to be done once (usually during bootstrapping).
@@ -97,13 +100,13 @@ ```js
 
-#### 3.1.1
+##### 3.1.1
 New `onHeaderClick` property added to `FlexTable`. Thanks to @olslash for the contribution!
 
-#### 3.1.0
+### 3.1.0
 Added high-order `InfiniteLoader` component to manage just-in-time fetching of data as a user scrolls up or down in a list.
 For more information about this component refer to the [API docs](https://github.com/bvaughn/react-virtualized/blob/master/docs/InfiniteLoader.md).
 
-#### 3.0.1
+##### 3.0.1
 Fixed small NPE when up/down arrow key was used while an empty VirtualScroll was in-focus.
 
-## 3.0.0
+# 3.0.0
 CSS styles have been split into two groups: functional styles (eg. `position`, `overflow`) and presentational styles (eg. `text-transform`, `color`) and both have been converted to inline styles rather than being loaded as CSS. This was done primarily to simplify usage for universal/isomorphic rendering.
@@ -113,80 +116,80 @@
 
-#### 2.8.0
+### 2.8.0
 Changed `Autosizer` component to support a single child instead of the `ChildComponent` property.
 (For backwards compatibility purposes the `ChildComponent` property will continue to be supported.)
 
-#### 2.7.5
+##### 2.7.5
 Defer loading of element resize code until `componentDidMount` to avoid undefined `document` and `body` references.
 This was breaking server-side rendering.
 
-#### 2.7.4
+##### 2.7.4
 Uglify dist build to remove dead code.
 
-#### 2.7.2 & 2.7.3
+##### 2.7.2 & 2.7.3
 Improved checks for undefined `document` and `window` in hopes of better supporting server-side rendering.
 
-#### 2.7.1
+##### 2.7.1
 Replaced invalid `rowHeight instanceof Number` check with `typeof rowHeight === 'number'` in `VirtualScroll`.
 
-#### 2.7.0
+### 2.7.0
 Moved `onRowsRendered` to `componentDidUpdate` (instead of `render`) to keep `render` free of side-effects.
 Added tests to ensure that the callback is only invoked once per start/stop index pair (and not again unless the indices change).
 
-#### 2.6.2
+##### 2.6.2
 Added check for undefined `document` before accessing `attachEvent` to avoid causing problems with server-side rendering.
 
-#### 2.6.1
+##### 2.6.1
 Cell `title` now only set if rendered cell contents are a string. This fixes issue #35.
 
-#### 2.6.0
+### 2.6.0
 `VirtualScroll` and `FlexTable` now support dynamic row heights by accepting a function as the `rowHeight` property.
 
-#### 2.5.0
+### 2.5.0
 Added `AutoSizer` component for wrapping `FlexTable` or `VirtualScroll` and growing to fill the parent container. This should hopefully simplify usage of these components.
 
-#### 2.4.0
+### 2.4.0
 `FlexTable` and `VirtualScroll` offer new callback property `onRowsRendered` to be invoked with a params object `{ startIndex, stopIndex }` after rows have been rendered.
 
-#### 2.3.0
+### 2.3.0
 `FlexTable`'s `rowClassName` property can now be either a string or a function in order to support dynamic row classes (eg. alternating colors).
 
-#### 2.2.0
+### 2.2.0
 Added `onRowClick` property to `FlexTable`.
 
-#### 2.1.1
+##### 2.1.1
 Fixed a few minor FlexTable font styles to use relative sizes instead of custom ones
 
-#### 2.1.0
+### 2.1.0
 Added optional `noRowsRenderer` property to `VirtualScroll` and `FlexTable`.
 This property can be used to render loading indicators or placeholder content for empty lists.
 
-## 2.0.0
+# 2.0.0
 Set `shouldPureComponentUpdate` on component prototypes instead of instances.
 Dropped half-ass support for React 0.13. This module has always depended on React 0.14 but it was checking in previous versions and trying to be backwards compatible with 0.13. Since that check is no longer in place, this is a major version bump (even though there is no real new functionality being added).
 
-#### 1.0.4
+##### 1.0.4
 Fixed package.json dependencies by moving `classnames`, `raf`, and `react-pure-render` out of `peerDependencies` and into `dependencies`.
 
-#### 1.0.3
+##### 1.0.3
 Same as version 1.0.2; published just to update NPM keyword and description.
 
-#### 1.0.2
+##### 1.0.2
 Removed default row-border styling from FlexTable and added new :rowClassName property.
 
-#### 1.0.1
+##### 1.0.1
 Updated to use ReactDOM.findDOMNode instead of getDOMNode (but added backwards-compatible check for < React v0.14).
 
-## 1.0.0
+# 1.0.0
 Package JSON updated so that "main" entry points to `dist/react-virtualized.js` to provide easier integration for users that don't want Babel/Webpack to have to process their `node_modules` folder.
 
-#### 0.0.4
+##### 0.0.4
 Added keypress scrolling support.
 
-#### 0.0.3
+##### 0.0.3
 Added "main" entry to package.json.
 
-#### 0.0.2
+##### 0.0.2
 Added CSS auto-prefixing to support Safari and other, older browsers.
 
-#### 0.0.1
+##### 0.0.1
 Initial release.

package.json

@@ -6,3 +6,3 @@ {
   "user": "bvaughn",
-  "version": "4.7.1",
+  "version": "4.8.0",
   "scripts": {
@@ -9,0 +9,0 @@ "build": "npm run build:css && npm run build:dist && npm run build:demo",

source/FlexTable/FlexTable.example.js

@@ -52,13 +52,13 @@ /** @flow */
     const { list } = this.props
-    const filteredList = list
-      .sortBy(index => list.getIn([index, sortBy]))
-      .update(list =>
-        sortDirection === SortDirection.DESC
-          ? list.reverse()
-          : list
-      )
+    const sortedList = this._isSortEnabled()
+      ? list
+        .sortBy(index => list.getIn([index, sortBy]))
+        .update(list =>
+          sortDirection === SortDirection.DESC
+            ? list.reverse()
+            : list
+        )
+      : list
 
-    function rowGetter (index) {
-      return filteredList.get(index)
-    }
+    const rowGetter = index => this._getDatum(sortedList, index)
 
@@ -144,3 +144,3 @@ return (
           <FlexColumn
-            label='Index'
+            label='ID'
             cellDataGetter={
@@ -150,2 +150,3 @@ (dataKey, rowData, columnData) => rowData.index
             dataKey='index'
+            disableSort={!this._isSortEnabled()}
             width={50}
@@ -156,2 +157,3 @@ />
             dataKey='name'
+            disableSort={!this._isSortEnabled()}
             width={90}
@@ -175,7 +177,19 @@ />
 
+  _getDatum (list, index) {
+    return list.get(index % list.size)
+  }
+
   _getRowHeight (index) {
     const { list } = this.props
-    return list.get(index).size
+
+    return this._getDatum(list, index).size
   }
 
+  _isSortEnabled () {
+    const { list } = this.props
+    const { rowsCount } = this.state
+
+    return rowsCount <= list.size
+  }
+
   _noRowsRenderer () {
@@ -190,4 +204,3 @@ return (
   _onRowsCountChange (event) {
-    let rowsCount = parseInt(event.target.value, 10) || 0
-    rowsCount = Math.max(0, Math.min(this.props.list.size, rowsCount))
+    const rowsCount = parseInt(event.target.value, 10) || 0
 
@@ -194,0 +207,0 @@ this.setState({ rowsCount })

source/Grid/Grid.example.js

@@ -140,3 +140,3 @@ /** @flow */
               renderCell={this._renderLeftSideCell}
-              rowHeight={rowHeight}
+              rowHeight={useDynamicRowHeights ? this._getRowHeight : rowHeight}
               rowsCount={rowsCount}
@@ -201,2 +201,8 @@ width={50}
 
+  _getDatum (index) {
+    const { list } = this.props
+
+    return list.get(index % list.size)
+  }
+
   _getRowClassName (row) {
@@ -207,4 +213,3 @@ return row % 2 === 0 ? styles.evenRow : styles.oddRow
   _getRowHeight (index) {
-    const { list } = this.props
-    return list.get(index).size
+    return this._getDatum(index).size
   }
@@ -221,5 +226,4 @@
   _renderBodyCell ({ columnIndex, rowIndex }) {
-    const { list } = this.props
     const rowClass = this._getRowClassName(rowIndex)
-    const datum = list.get(rowIndex)
+    const datum = this._getDatum(rowIndex)
 
@@ -278,4 +282,3 @@ let content
   _renderLeftSideCell ({ columnIndex, rowIndex }) {
-    const { list } = this.props
-    const datum = list.get(rowIndex)
+    const datum = this._getDatum(rowIndex)
 
@@ -304,4 +307,3 @@ const classNames = cn(styles.cell, {
   _onColumnsCountChange (event) {
-    let columnsCount = parseInt(event.target.value, 10) || 0
-    columnsCount = Math.max(0, Math.min(this.props.list.size, columnsCount))
+    const columnsCount = parseInt(event.target.value, 10) || 0
 
@@ -312,4 +314,3 @@ this.setState({ columnsCount })
   _onRowsCountChange (event) {
-    let rowsCount = parseInt(event.target.value, 10) || 0
-    rowsCount = Math.max(0, Math.min(this.props.list.size, rowsCount))
+    const rowsCount = parseInt(event.target.value, 10) || 0
 
@@ -316,0 +317,0 @@ this.setState({ rowsCount })

source/InfiniteLoader/InfiniteLoader.example.js

@@ -5,2 +5,3 @@ /** @flow */
 import Immutable from 'immutable'
+import AutoSizer from '../AutoSizer'
 import InfiniteLoader from './InfiniteLoader'
@@ -31,2 +32,4 @@ import VirtualScroll from '../VirtualScroll'
 
+    this._timeoutIdMap = {}
+
     this._clearData = this._clearData.bind(this)
@@ -38,2 +41,8 @@ this._isRowLoaded = this._isRowLoaded.bind(this)
 
+  componentWillUnmount () {
+    Object.keys(this._timeoutIdMap).forEach(timeoutId => {
+      clearTimeout(timeoutId)
+    })
+  }
+
   render () {
@@ -71,17 +80,21 @@ const { list, ...props } = this.props
 
-        <InfiniteLoader
-          ref='InfiniteLoader'
-          isRowLoaded={this._isRowLoaded}
-          loadMoreRows={this._loadMoreRows}
-          rowsCount={list.size}
-        >
-          <VirtualScroll
-            className={styles.VirtualScroll}
-            height={200}
-            rowsCount={list.size}
-            rowHeight={30}
-            rowRenderer={this._rowRenderer}
-            scrollToIndex={randomScrollToIndex}
-          />
-        </InfiniteLoader>
+        <div>
+          <AutoSizer disableHeight>
+            <InfiniteLoader
+              ref='InfiniteLoader'
+              isRowLoaded={this._isRowLoaded}
+              loadMoreRows={this._loadMoreRows}
+              rowsCount={list.size}
+            >
+              <VirtualScroll
+                className={styles.VirtualScroll}
+                height={200}
+                rowsCount={list.size}
+                rowHeight={30}
+                rowRenderer={this._rowRenderer}
+                scrollToIndex={randomScrollToIndex}
+              />
+            </InfiniteLoader>
+          </AutoSizer>
+        </div>
       </ContentBox>
@@ -116,5 +129,7 @@ )
 
-    setTimeout(() => {
+    const timeoutId = setTimeout(() => {
       const { loadedRowsCount, loadingRowsCount } = this.state
 
+      delete this._timeoutIdMap[timeoutId]
+
       for (var i = startIndex; i <= stopIndex; i++) {
@@ -132,2 +147,4 @@ loadedRowsMap[i] = STATUS_LOADED
 
+    this._timeoutIdMap[timeoutId] = true
+
     let promiseResolver
@@ -134,0 +151,0 @@

source/InfiniteLoader/InfiniteLoader.js

@@ -27,2 +27,6 @@ /** @flow */
     /**
+     * Height to be passed through to child component.
+     */
+    height: PropTypes.number,
+    /**
      * Function responsible for tracking the loaded state of each row.
@@ -49,3 +53,7 @@ * It should implement the following signature: (index: number): boolean
      */
-    threshold: PropTypes.number
+    threshold: PropTypes.number,
+    /**
+     * Width to be passed through to child component.
+     */
+    width: PropTypes.number
   }
@@ -78,15 +86,20 @@
   render () {
-    const { children, ...props } = this.props
+    const { children, height, width, ...props } = this.props
 
     let child = React.Children.only(children)
 
-    child = React.cloneElement(
-      child,
-      {
-        onRowsRendered: this._onRowsRendered,
-        ref: 'VirtualScroll'
-      }
-    )
+    const childProps = {
+      ref: 'Child',
+      onRowsRendered: this._onRowsRendered
+    }
 
-    return child
+    if (height >= 0) {
+      childProps.height = height
+    }
+
+    if (width >= 0) {
+      childProps.width = width
+    }
+
+    return React.cloneElement(child, childProps)
   }
@@ -120,4 +133,4 @@
             // In case the component has been unmounted since the range was loaded
-            if (this.refs.VirtualScroll) {
-              this.refs.VirtualScroll.forceUpdate()
+            if (this.refs.Child) {
+              this.refs.Child.forceUpdate()
             }
@@ -124,0 +137,0 @@ }

source/VirtualScroll/VirtualScroll.example.js

@@ -115,7 +115,12 @@ /**
 
-  _getRowHeight (index) {
+  _getDatum (index) {
     const { list } = this.props
-    return list.get(index).size
+
+    return list.get(index % list.size)
   }
 
+  _getRowHeight (index) {
+    return this._getDatum(index).size
+  }
+
   _noRowsRenderer () {
@@ -130,7 +135,4 @@ return (
   _onRowsCountChange (event) {
-    const { list } = this.props
+    const rowsCount = parseInt(event.target.value, 10) || 0
 
-    let rowsCount = parseInt(event.target.value, 10) || 0
-    rowsCount = Math.max(0, Math.min(list.size, rowsCount))
-
     this.setState({ rowsCount })
@@ -151,6 +153,5 @@ }
   _rowRenderer (index) {
-    const { list } = this.props
     const { useDynamicRowHeight } = this.state
 
-    const datum = list.get(index)
+    const datum = this._getDatum(index)
 
@@ -157,0 +158,0 @@ let additionalContent

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

671781

increased by0.39%

Lines of code

8337

increased by0.49%

No dependency changes