Merge pull request #428 from hshoff/harry-parentsize-forof

[responsive] ParentSize for..of => entries.forEach to fix ie11. fixes #258
airbnb · Feb 28, 2019 · 542a0e4 · 542a0e4
2 parents c2b4452 + e25c675
commit 542a0e4
Show file tree

Hide file tree

Showing 2 changed files with 37 additions and 35 deletions.
diff --git a/package.json b/package.json
@@ -7,8 +7,7 @@
     "test": "lerna bootstrap && lerna exec npm run test",
     "docs": "npm run docs:gen && node ./scripts/docs/index.js",
     "docs:gen": "lerna run docs",
-    "prepare-release":
-      "git checkout master && git pull --rebase origin master && npm run docs && lerna updated",
+    "prepare-release": "git checkout master && git pull --rebase origin master && npm run docs && lerna updated",
     "release": "npm run prepare-release && lerna publish --exact",
     "lint": "eslint \"packages/**/*.js\" --config \"./.eslintrc\"",
     "lint:fix": "eslint \"packages/**/*.js\" --config \"./.eslintrc\" --fix",
@@ -23,16 +22,32 @@
     "singleQuote": true
   },
   "lint-staged": {
-    "*.js": ["prettier-eslint --write", "git add"]
+    "*.js": [
+      "prettier-eslint --write",
+      "git add"
+    ]
   },
   "jest": {
-    "projects": ["<rootDir>/packages/*"],
+    "projects": [
+      "<rootDir>/packages/*"
+    ],
     "collectCoverage": true,
     "coverageDirectory": "<rootDir>/coverage",
-    "coveragePathIgnorePatterns": ["/node_modules/"],
-    "coverageReporters": ["text", "lcov"]
+    "coveragePathIgnorePatterns": [
+      "/node_modules/"
+    ],
+    "coverageReporters": [
+      "text",
+      "lcov"
+    ]
   },
-  "keywords": ["react", "d3", "visualization", "vx", "charts"],
+  "keywords": [
+    "react",
+    "d3",
+    "visualization",
+    "vx",
+    "charts"
+  ],
   "author": "@hshoff",
   "license": "MIT",
   "devDependencies": {

diff --git a/packages/vx-responsive/src/components/ParentSize.js b/packages/vx-responsive/src/components/ParentSize.js
@@ -7,28 +7,24 @@ export default class ParentSize extends React.Component {
   constructor(props) {
     super(props);
     this.state = {
-      width: 0, height: 0, top: 0, left: 0,
+      width: 0,
+      height: 0,
+      top: 0,
+      left: 0
     };
     this.resize = debounce(this.resize.bind(this), props.debounceTime);
     this.setTarget = this.setTarget.bind(this);
     this.animationFrameID = null;
   }
 
   componentDidMount() {
-    this.ro = new ResizeObserver((entries, observer) => {
-      for (const entry of entries) {
-        const {
-          left, top, width, height,
-        } = entry.contentRect;
+    this.ro = new ResizeObserver((entries = [], observer) => {
+      entries.forEach(entry => {
+        const { left, top, width, height } = entry.contentRect;
         this.animationFrameID = window.requestAnimationFrame(() => {
-          this.resize({
-            width,
-            height,
-            top,
-            left,
-          });
+          this.resize({ width, height, top, left });
         });
-      }
+      });
     });
     this.ro.observe(this.target);
   }
@@ -38,25 +34,16 @@ export default class ParentSize extends React.Component {
     this.ro.disconnect();
   }
 
-  resize({
-    width, height, top, left,
-  }) {
-    this.setState(() => ({
-      width,
-      height,
-      top,
-      left,
-    }));
+  resize({ width, height, top, left }) {
+    this.setState(() => ({ width, height, top, left }));
   }
 
   setTarget(ref) {
     this.target = ref;
   }
 
   render() {
-    const {
-      className, children, debounceTime, ...restProps
-    } = this.props;
+    const { className, children, ...restProps } = this.props;
     return (
       <div
         style={{ width: '100%', height: '100%' }}
@@ -67,19 +54,19 @@ export default class ParentSize extends React.Component {
         {children({
           ...this.state,
           ref: this.target,
-          resize: this.resize,
+          resize: this.resize
         })}
       </div>
     );
   }
 }
 
 ParentSize.defaultProps = {
-  debounceTime: 300,
+  debounceTime: 300
 };
 
 ParentSize.propTypes = {
   className: PropTypes.string,
   children: PropTypes.func.isRequired,
-  debounceTime: PropTypes.number,
+  debounceTime: PropTypes.number
 };