react-virtualized - npm Package Compare versions

Comparing version 4.2.1 to 4.3.0

CHANGELOG.md

 Changelog
 ------------
 
+#### 4.3.0
+`FlexTable` now supports dynamic row-heights (in the same way as `VirtualScroll`).
+
 #### 4.2.1
@@ -5,0 +8,0 @@ Set `VirtualScroll` default style to `width: 100%` to be more inline with default `FlexTable` behavior.

package.json

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

source/FlexTable/FlexTable.example.js

@@ -22,2 +22,5 @@ /** @flow */
     this.state = {
+      headerHeight: 30,
+      height: 270,
+      rowHeight: 40,
       rowsCount: 1000,
@@ -27,7 +30,6 @@ scrollToIndex: undefined,
       sortDirection: SortDirection.ASC,
-      height: 270,
-      headerHeight: 30,
-      rowHeight: 40
+      useDynamicRowHeight: false
     }
 
+    this._getRowHeight = this._getRowHeight.bind(this)
     this._noRowsRenderer = this._noRowsRenderer.bind(this)
@@ -43,2 +45,3 @@ this._onRowsCountChange = this._onRowsCountChange.bind(this)
       height,
+      rowHeight,
       rowsCount,
@@ -48,3 +51,3 @@ scrollToIndex,
       sortDirection,
-      rowHeight
+      useDynamicRowHeight
     } = this.state
@@ -80,2 +83,14 @@
 
+        <ContentBoxParagraph>
+          <label className={styles.checkboxLabel}>
+            <input
+              className={styles.checkbox}
+              type='checkbox'
+              value={useDynamicRowHeight}
+              onChange={event => this._updateUseDynamicRowHeight(event.target.checked)}
+            />
+            Use dynamic row heights?
+          </label>
+        </ContentBoxParagraph>
+
         <InputRow>
@@ -123,3 +138,3 @@ <LabeledInput
           rowClassName={::this._rowClassName}
-          rowHeight={rowHeight}
+          rowHeight={useDynamicRowHeight ? this._getRowHeight : rowHeight}
           rowGetter={rowGetter}
@@ -161,2 +176,7 @@ rowsCount={rowsCount}
 
+  _getRowHeight (index) {
+    const { list } = this.props
+    return list.get(index).size
+  }
+
   _noRowsRenderer () {
@@ -201,2 +221,8 @@ return (
   }
+
+  _updateUseDynamicRowHeight (value) {
+    this.setState({
+      useDynamicRowHeight: value
+    })
+  }
 }

source/FlexTable/FlexTable.js

@@ -80,4 +80,7 @@ /** @flow */
     rowGetter: PropTypes.func.isRequired,
-    /** Fixed height of table row */
-    rowHeight: PropTypes.number.isRequired,
+    /**
+     * Either a fixed row height (number) or a function that returns the height of a row given its index.
+     * (index: number): number
+     */
+    rowHeight: PropTypes.oneOfType([PropTypes.number, PropTypes.func]).isRequired,
     /** Number of rows in table. */
@@ -269,4 +272,3 @@ rowsCount: PropTypes.number.isRequired,
       rowClassName,
-      rowGetter,
-      rowHeight
+      rowGetter
     } = this.props
@@ -292,3 +294,3 @@
         style={{
-          height: rowHeight
+          height: this._getRowHeight(rowIndex)
         }}
@@ -324,2 +326,9 @@ >
   }
+  _getRowHeight (rowIndex) {
+    const { rowHeight } = this.props
+
+    return rowHeight instanceof Function
+      ? rowHeight(rowIndex)
+      : rowHeight
+  }
 }
@@ -326,0 +335,0 @@

source/VirtualScroll/VirtualScroll.example.js

@@ -200,3 +200,2 @@ /**
     this.setState({
-      rowsCount: 100,
       useDynamicRowHeight: value
@@ -203,0 +202,0 @@ })

source/VirtualScroll/VirtualScroll.js

@@ -45,3 +45,6 @@ /** @flow */
     onRowsRendered: PropTypes.func,
-    /** Either a fixed row height (number) or a function that returns the height of a row given its index. */
+    /**
+     * Either a fixed row height (number) or a function that returns the height of a row given its index.
+     * (index: number): number
+     */
     rowHeight: PropTypes.oneOfType([PropTypes.number, PropTypes.func]).isRequired,
@@ -48,0 +51,0 @@ /** Responsbile for rendering a row given an index */

New alerts

URL strings

Supply chain risk

Package contains fragments of external URLs or IP addresses, which the package may be accessing at runtime.

Found 1 instance in 1 package

Fixed alerts

URL strings

Supply chain risk

Package contains fragments of external URLs or IP addresses, which the package may be accessing at runtime.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

467054

0.57%

Lines of code

5782

0.78%

No dependency changes