bvaughn · bvaughn · Aug 13, 2021 · Aug 13, 2021 · Aug 13, 2021
diff --git a/package.json b/package.json
@@ -1,8 +1,10 @@
 {
   "name": "react-virtualized-auto-sizer",
   "version": "1.0.5",
-  "description": "Standalone version of the AutoSizer component from react-virtualized",
-  "author": "Brian Vaughn <brian.david.vaughn@gmail.com> (https://github.com/bvaughn/)",
+  "description":
+    "Standalone version of the AutoSizer component from react-virtualized",
+  "author":
+    "Brian Vaughn <brian.david.vaughn@gmail.com> (https://github.com/bvaughn/)",
   "contributors": [
     "Brian Vaughn <brian.david.vaughn@gmail.com> (https://github.com/bvaughn/)"
   ],
@@ -34,9 +36,7 @@
   ],
   "main": "dist/index.cjs.js",
   "module": "dist/index.esm.js",
-  "files": [
-    "dist/*"
-  ],
+  "files": ["dist/*"],
   "scripts": {
     "precommit": "lint-staged",
     "prettier": "prettier --write '**/*.{js,json,css}'",
@@ -51,10 +51,7 @@
     "deploy": "gh-pages -d example/build"
   },
   "lint-staged": {
-    "{example,src}/**/*.{js,json,css}": [
-      "prettier --write",
-      "git add"
-    ],
+    "{example,src}/**/*.{js,json,css}": ["prettier --write", "git add"],
     "**/*.js": "eslint --max-warnings 0"
   },
   "peerDependencies": {

diff --git a/src/__tests__/AutoSizer.js b/src/__tests__/AutoSizer.js
@@ -1,7 +1,7 @@
 /* global Element, Event */
 
 import * as React from 'react';
-import ReactDOM, {findDOMNode} from 'react-dom';
+import ReactDOM, { findDOMNode } from 'react-dom';
 import AutoSizer from '../index';
 
 function render(markup) {
@@ -27,7 +27,7 @@ render.unmount = function() {
   }
 };
 
-function DefaultChildComponent({height, width, foo, bar}) {
+function DefaultChildComponent({ height, width, foo, bar }) {
   return (
     <div>{`width:${width}, height:${height}, foo:${foo}, bar:${bar}`}</div>
   );
@@ -73,8 +73,9 @@ describe('AutoSizer', () => {
           disableHeight={disableHeight}
           disableWidth={disableWidth}
           onResize={onResize}
-          style={style}>
-          {({height, width}) => (
+          style={style}
+        >
+          {({ height, width }) => (
             <ChildComponent
               width={disableWidth ? undefined : width}
               height={disableHeight ? undefined : height}
@@ -120,26 +121,26 @@ describe('AutoSizer', () => {
           paddingLeft: 4,
           paddingRight: 4,
           paddingTop: 15,
-        }),
-      ),
+        })
+      )
     );
     expect(rendered.textContent).toContain('height:75');
     expect(rendered.textContent).toContain('width:192');
   });
 
   it('should not update :width if :disableWidth is true', () => {
-    const rendered = findDOMNode(render(getMarkup({disableWidth: true})));
+    const rendered = findDOMNode(render(getMarkup({ disableWidth: true })));
     expect(rendered.textContent).toContain('height:100');
     expect(rendered.textContent).toContain('width:undefined');
   });
 
   it('should not update :height if :disableHeight is true', () => {
-    const rendered = findDOMNode(render(getMarkup({disableHeight: true})));
+    const rendered = findDOMNode(render(getMarkup({ disableHeight: true })));
     expect(rendered.textContent).toContain('height:undefined');
     expect(rendered.textContent).toContain('width:200');
   });
 
-  async function simulateResize({element, height, width}) {
+  async function simulateResize({ element, height, width }) {
     mockOffsetSize(width, height);
 
     // Trigger detectElementResize library by faking a scroll event
@@ -157,12 +158,12 @@ describe('AutoSizer', () => {
         getMarkup({
           height: 100,
           width: 200,
-        }),
-      ),
+        })
+      )
     );
     expect(rendered.textContent).toContain('height:100');
     expect(rendered.textContent).toContain('width:200');
-    await simulateResize({element: rendered, height: 400, width: 300});
+    await simulateResize({ element: rendered, height: 400, width: 300 });
     expect(rendered.textContent).toContain('height:400');
     expect(rendered.textContent).toContain('width:300');
     done();
@@ -181,12 +182,12 @@ describe('AutoSizer', () => {
             height: 100,
             onResize,
             width: 200,
-          }),
-        ),
+          })
+        )
       );
       ChildComponent.mockClear(); // TODO Improve initial check in version 10; see AutoSizer render()
       expect(onResize).toHaveBeenCalledTimes(1);
-      await simulateResize({element: rendered, height: 400, width: 300});
+      await simulateResize({ element: rendered, height: 400, width: 300 });
       expect(ChildComponent).toHaveBeenCalledTimes(1);
       expect(onResize).toHaveBeenCalledTimes(2);
       done();
@@ -205,15 +206,15 @@ describe('AutoSizer', () => {
             height: 100,
             onResize,
             width: 200,
-          }),
-        ),
+          })
+        )
       );
       ChildComponent.mockClear(); // TODO Improve initial check in version 10; see AutoSizer render()
       expect(onResize).toHaveBeenCalledTimes(1);
-      await simulateResize({element: rendered, height: 100, width: 300});
+      await simulateResize({ element: rendered, height: 100, width: 300 });
       expect(ChildComponent).toHaveBeenCalledTimes(0);
       expect(onResize).toHaveBeenCalledTimes(1);
-      await simulateResize({element: rendered, height: 200, width: 300});
+      await simulateResize({ element: rendered, height: 200, width: 300 });
       expect(ChildComponent).toHaveBeenCalledTimes(1);
       expect(onResize).toHaveBeenCalledTimes(2);
       done();
@@ -232,15 +233,15 @@ describe('AutoSizer', () => {
             height: 100,
             onResize,
             width: 200,
-          }),
-        ),
+          })
+        )
       );
       ChildComponent.mockClear(); // TODO Improve initial check in version 10; see AutoSizer render()
       expect(onResize).toHaveBeenCalledTimes(1);
-      await simulateResize({element: rendered, height: 200, width: 200});
+      await simulateResize({ element: rendered, height: 200, width: 200 });
       expect(ChildComponent).toHaveBeenCalledTimes(0);
       expect(onResize).toHaveBeenCalledTimes(1);
-      await simulateResize({element: rendered, height: 200, width: 300});
+      await simulateResize({ element: rendered, height: 200, width: 300 });
       expect(ChildComponent).toHaveBeenCalledTimes(1);
       expect(onResize).toHaveBeenCalledTimes(2);
       done();
@@ -249,13 +250,13 @@ describe('AutoSizer', () => {
 
   describe('className and style', () => {
     it('should use a custom :className if specified', () => {
-      const rendered = findDOMNode(render(getMarkup({className: 'foo'})));
+      const rendered = findDOMNode(render(getMarkup({ className: 'foo' })));
       expect(rendered.firstChild.className).toContain('foo');
     });
 
     it('should use a custom :style if specified', () => {
-      const style = {backgroundColor: 'red'};
-      const rendered = findDOMNode(render(getMarkup({style})));
+      const style = { backgroundColor: 'red' };
+      const rendered = findDOMNode(render(getMarkup({ style })));
       expect(rendered.firstChild.style.backgroundColor).toEqual('red');
     });
   });

diff --git a/src/__tests__/AutoSizer.ssr.js b/src/__tests__/AutoSizer.ssr.js
@@ -3,14 +3,14 @@
  */
 
 import React from 'react';
-import {renderToString} from 'react-dom/server';
+import { renderToString } from 'react-dom/server';
 import AutoSizer from '../index';
 
 test('should render content with default widths and heights initially', () => {
   const rendered = renderToString(
     <AutoSizer defaultHeight={100} defaultWidth={200}>
-      {({height, width}) => <div>{`height:${height};width:${width}`}</div>}
-    </AutoSizer>,
+      {({ height, width }) => <div>{`height:${height};width:${width}`}</div>}
+    </AutoSizer>
   );
   expect(rendered).toContain('height:100');
   expect(rendered).toContain('width:200');

diff --git a/src/index.js b/src/index.js
@@ -67,7 +67,7 @@ export default class AutoSizer extends React.PureComponent<Props, State> {
   _detectElementResize: DetectElementResize;
 
   componentDidMount() {
-    const {nonce} = this.props;
+    const { nonce } = this.props;
     if (
       this._autoSizer &&
       this._autoSizer.parentNode &&
@@ -86,7 +86,7 @@ export default class AutoSizer extends React.PureComponent<Props, State> {
       this._detectElementResize = createDetectElementResize(nonce);
       this._detectElementResize.addResizeListener(
         this._parentNode,
-        this._onResize,
+        this._onResize
       );
 
       this._onResize();
@@ -97,7 +97,7 @@ export default class AutoSizer extends React.PureComponent<Props, State> {
     if (this._detectElementResize && this._parentNode) {
       this._detectElementResize.removeResizeListener(
         this._parentNode,
-        this._onResize,
+        this._onResize
       );
     }
   }
@@ -110,12 +110,12 @@ export default class AutoSizer extends React.PureComponent<Props, State> {
       disableWidth,
       style,
     } = this.props;
-    const {height, width} = this.state;
+    const { height, width } = this.state;
 
     // Outer div should not force width/height since that may prevent containers from shrinking.
     // Inner component should overflow and use calculated width/height.
     // See issue #68 for more information.
-    const outerStyle: Object = {overflow: 'visible'};
+    const outerStyle: Object = { overflow: 'visible' };
     const childParams: Object = {};
 
     // Avoid rendering children before the initial measurements have been collected.
@@ -145,14 +145,15 @@ export default class AutoSizer extends React.PureComponent<Props, State> {
         style={{
           ...outerStyle,
           ...style,
-        }}>
+        }}
+      >
         {!bailoutOnChildren && children(childParams)}
       </div>
     );
   }
 
   _onResize = () => {
-    const {disableHeight, disableWidth, onResize} = this.props;
+    const { disableHeight, disableWidth, onResize } = this.props;
 
     if (this._parentNode) {
       // Guard against AutoSizer component being removed from the DOM immediately after being added.
@@ -180,12 +181,12 @@ export default class AutoSizer extends React.PureComponent<Props, State> {
           width: width - paddingLeft - paddingRight,
         });
 
-        onResize({height, width});
+        onResize({ height, width });
       }
     }
   };
 
   _setRef = (autoSizer: ?HTMLElement) => {
     this._autoSizer = autoSizer;
   };
-}
+}