react-virtualized - npm Package Compare versions

Comparing version 4.8.1 to 4.9.0

CHANGELOG.md

 Changelog
 ------------
 
+### 4.9.0
+`AutoSizer` component now takes padding into consideration before setting the `width` and `height` of its children.
+
 ##### 4.8.1
@@ -5,0 +8,0 @@ Updated `InfiniteLoader` to better reflect required properties. (`isRowLoaded`, `rowsCount`, and `threshold` were not marked as required before.)

docs/README.md

@@ -18,1 +18,2 @@ Documentation
 * [Displaying items in reverse order](reverseList.md).
+* [Using AutoSizer](usingAutoSizer.md).

package.json

@@ -6,3 +6,3 @@ {
   "user": "bvaughn",
-  "version": "4.8.1",
+  "version": "4.9.0",
   "scripts": {
@@ -67,2 +67,3 @@ "build": "npm run build:css && npm run build:dist && npm run build:demo",
       "it",
+      "getComputedStyle",
       "jasmine"
@@ -69,0 +70,0 @@ ]

source/AutoSizer/AutoSizer.example.js

@@ -65,3 +65,3 @@ /** @flow */
         <div className={styles.AutoSizerWrapper}>
-          <AutoSizer className={styles.AutoSizer}>
+          <AutoSizer>
             <VirtualScroll
@@ -68,0 +68,0 @@ className={styles.VirtualScroll}

source/AutoSizer/AutoSizer.js

@@ -101,5 +101,11 @@ /** @flow */
 
+    const style = getComputedStyle(this._parentNode)
+    const paddingLeft = parseInt(style.paddingLeft, 10)
+    const paddingRight = parseInt(style.paddingRight, 10)
+    const paddingTop = parseInt(style.paddingTop, 10)
+    const paddingBottom = parseInt(style.paddingBottom, 10)
+
     this.setState({
-      height: height,
-      width: width
+      height: height - paddingTop - paddingBottom,
+      width: width - paddingLeft - paddingRight
     })
@@ -106,0 +112,0 @@ }

source/AutoSizer/AutoSizer.test.js

@@ -33,7 +33,21 @@ import React from 'react'
     height = 100,
+    paddingBottom = 0,
+    paddingLeft = 0,
+    paddingRight = 0,
+    paddingTop = 0,
     styleSheet = undefined,
     width = 200
   } = {}) {
+    const style = {
+      boxSizing: 'border-box',
+      height,
+      paddingBottom,
+      paddingLeft,
+      paddingRight,
+      paddingTop,
+      width
+    }
+
     return (
-      <div style={{ height, width }}>
+      <div style={style}>
         <AutoSizer
@@ -73,2 +87,14 @@ disableHeight={disableHeight}
 
+  it('should account for padding when calculating the available width and height', () => {
+    const component = renderOrUpdateComponent({
+      paddingBottom: 10,
+      paddingLeft: 4,
+      paddingRight: 4,
+      paddingTop: 15
+    })
+    let domNode = findDOMNode(component)
+    expect(domNode.textContent).toContain('height:75')
+    expect(domNode.textContent).toContain('width:192')
+  })
+
   it('should not update :width if :disableWidth is true', () => {
@@ -75,0 +101,0 @@ const component = renderOrUpdateComponent({ disableWidth: true })

source/InfiniteLoader/InfiniteLoader.example.js

@@ -77,21 +77,19 @@ /** @flow */
 
-        <div>
-          <AutoSizer disableHeight>
-            <InfiniteLoader
-              ref='InfiniteLoader'
-              isRowLoaded={this._isRowLoaded}
-              loadMoreRows={this._loadMoreRows}
+        <AutoSizer disableHeight>
+          <InfiniteLoader
+            ref='InfiniteLoader'
+            isRowLoaded={this._isRowLoaded}
+            loadMoreRows={this._loadMoreRows}
+            rowsCount={list.size}
+          >
+            <VirtualScroll
+              className={styles.VirtualScroll}
+              height={200}
               rowsCount={list.size}
-            >
-              <VirtualScroll
-                className={styles.VirtualScroll}
-                height={200}
-                rowsCount={list.size}
-                rowHeight={30}
-                rowRenderer={this._rowRenderer}
-                scrollToIndex={randomScrollToIndex}
-              />
-            </InfiniteLoader>
-          </AutoSizer>
-        </div>
+              rowHeight={30}
+              rowRenderer={this._rowRenderer}
+              scrollToIndex={randomScrollToIndex}
+            />
+          </InfiniteLoader>
+        </AutoSizer>
       </ContentBox>
@@ -98,0 +96,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

676166

increased by0.59%

Number of package files

72

increased by1.41%

Lines of code

8367

increased by0.34%

No dependency changes