Layout changes

src/components/UI/Grid/Grid.js

@@ -3,8 +3,7 @@ import './Grid.css';
 import GridComponent from './GridComponent/GridComponent';
 
 export default class extends Component {
-  checkSizeInterval;
-
+  resizeTimeout;
   state = {
     calculated: false,
     dimensions: {
@@ -20,6 +19,16 @@ export default class extends Component {
     };
   };
 
+  componentDidMount() {
+    window.addEventListener('resize', this.handleResize);
+    this.updateSizeAsync();
+  }
+
+  componentWillUnmount() {
+    window.removeEventListener('resize', this.handleResize);
+    clearInterval(this.resizeTimeout);
+  };
+
   getSize = () => {
     const elem = this.refs.GridOwner;
     return {
@@ -28,6 +37,11 @@ export default class extends Component {
     };
   };
 
+  handleResize = () => {
+    clearTimeout(this.resizeTimeout);
+    this.resizeTimeout = setTimeout(this.updateSizeAsync, 10);
+  };
+
   updateSize = () => {
     const state = {
       ...this.state
@@ -43,25 +57,11 @@ export default class extends Component {
   };
 
   updateSizeAsync = () => {
-    return new Promise((done) => {
+    return new Promise(() => {
       this.updateSize();
-      done();
     });
   };
 
-  componentDidMount() {
-    window.addEventListener("resize", this.updateSizeAsync);
-    this.checkSizeInterval = setInterval(()=> {
-      this.updateSize()
-    }, 2000);
-    this.updateSizeAsync();
-  }
-
-  componentWillUnmount() {
-    window.removeEventListener("resize", this.updateSizeAsync);
-    clearInterval(this.checkSizeInterval);
-  };
-
   render() {
     let children = null;
     const dimensions = this.state.dimensions;
@@ -91,17 +91,19 @@ export default class extends Component {
           rowSpan = rowSpan ? (rowSpan === 'remain' ? (dimensions.rows - row) : rowSpan) : null;
           colSpan = colSpan ? (colSpan === 'remain' ? dimensions.columns - col : colSpan) : null;
 
-          return <GridComponent
-            row={row}
-            col={col}
-            rowSpan={rowSpan}
-            colSpan={colSpan}
-            key={'gc_' + i}>{child}</GridComponent>;
+          return (
+            <GridComponent row={row}
+                           col={col}
+                           rowSpan={rowSpan}
+                           colSpan={colSpan}
+                           key={'gc_' + i}>
+              {child}
+            </GridComponent>
+          );
         } else {
           return null;
         }
-      })
-      .filter(i => i !== null);
+      });
     }
 
     let style = {
@@ -112,10 +114,12 @@ export default class extends Component {
         gridAutoRows: '4px',
       }
     };
+
     if (this.props.noScroll) {
       style['style'].overflowX = 'visible';
       style['style'].overflowY = 'visible';
     }
+
     return (
       <div
         ref='GridOwner'
@@ -125,5 +129,5 @@ export default class extends Component {
         </div>
       </div>
     )
-  };
+  }
 };