Handle window resize when responsive

Author: T4rk1n

components/dash-core-components/.eslintrc

@@ -63,7 +63,7 @@
     "no-extra-bind": ["error"],
     "no-extra-boolean-cast": ["error"],
     "no-inline-comments": ["off"],
-    "no-implicit-coercion": ["error"],
+    "no-implicit-coercion": ["off"],
     "no-implied-eval": ["error"],
     "no-inner-declarations": ["off"],
     "no-invalid-this": ["error"],

components/dash-core-components/src/fragments/Graph.react.js

@@ -148,6 +148,8 @@ class PlotlyGraph extends Component {
         this._prevGd = null;
         this._queue = Promise.resolve();
 
+        this.parentElement = React.createRef();
+
         this.bindEvents = this.bindEvents.bind(this);
         this.getConfig = this.getConfig.bind(this);
         this.getConfigOverride = this.getConfigOverride.bind(this);
@@ -514,7 +516,7 @@ class PlotlyGraph extends Component {
     }
 
     render() {
-        const {className, id, style, loading_state} = this.props;
+        const {className, id, style, loading_state, responsive} = this.props;
 
         return (
             <div
@@ -525,8 +527,13 @@ class PlotlyGraph extends Component {
                 }
                 className={className}
                 style={style}
+                ref={this.parentElement}
             >
-                <ResizeDetector onResize={this.graphResize} />
+                <ResizeDetector
+                    onResize={this.graphResize}
+                    targets={[this.parentElement, this.gd]}
+                    autosize={!!responsive}
+                />
                 <div ref={this.gd} style={{height: '100%', width: '100%'}} />
             </div>
         );

components/dash-core-components/src/utils/ResizeDetector.js

@@ -2,7 +2,7 @@ import React, {createRef, useEffect, useMemo} from 'react';
 import PropTypes from 'prop-types';
 
 const ResizeDetector = props => {
-    const {onResize, children} = props;
+    const {onResize, autosize, children, targets} = props;
     const ref = createRef();
 
     const observer = useMemo(
@@ -17,18 +17,35 @@ const ResizeDetector = props => {
         if (!ref.current) {
             return () => {};
         }
+        targets.forEach(target => observer.observe(target.current));
         observer.observe(ref.current);
+        const windowResizedHandled = -1;
+        // if (autosize) {
+        //     windowResizedHandled = window.addEventListener(
+        //         'resize',
+        //         onResize
+        //     );
+        // }
         return () => {
             observer.disconnect();
+            if (autosize) {
+                window.removeEventListener(windowResizedHandled);
+            }
         };
     }, [ref.current]);
 
-    return <div ref={ref}>{children}</div>;
+    return (
+        <div ref={ref} style={{width: '100%'}}>
+            {children}
+        </div>
+    );
 };
 
 ResizeDetector.propTypes = {
+    autosize: PropTypes.bool,
     onResize: PropTypes.func,
     children: PropTypes.node,
+    targets: PropTypes.any,
 };
 
 export default ResizeDetector;