Fix display of ConfirmDialogProvider if not used in a callback.

plotly · Jul 24, 2018 · a6b0278 · a6b0278
1 parent d23db91
commit a6b0278
Show file tree

Hide file tree

Showing 2 changed files with 52 additions and 17 deletions.
diff --git a/src/components/ConfirmDialog.react.js b/src/components/ConfirmDialog.react.js
@@ -1,6 +1,7 @@
 import PropTypes from 'prop-types';
 import {Component} from 'react';
 
+
 /**
  * ConfirmDialog is used to display the browser's native "confirm" modal,
  * with an optional message and two buttons ("OK" and "Cancel").
@@ -11,30 +12,51 @@ export default class ConfirmDialog extends Component {
 
     constructor(props) {
         super(props);
+        this.state = {
+            displayed: props.displayed
+        };
     }
 
-    componentDidUpdate() {
+    _setStateAndProps(value) {
+        const { setProps } = this.props;
+        this.setState(value);
+        if (setProps) setProps(value);
+    }
+
+    componentWillReceiveProps(props) {
+        this.setState({displayed: props.displayed})
+    }
+
+    _update() {
         const {
-            displayed, message, setProps,
+            message,
             cancel_n_clicks, cancel_n_clicks_timestamp,
             submit_n_clicks, submit_n_clicks_timestamp
         } = this.props;
 
+        const displayed = this.state.displayed;
+
         if (displayed) {
-            new Promise(resolve => resolve(window.confirm(message))).then(result => setProps({
-                cancel_n_clicks: !result ?
-                    cancel_n_clicks + 1 : cancel_n_clicks,
-                cancel_n_clicks_timestamp: !result ?
-                    Date.now() :  cancel_n_clicks_timestamp,
-                submit_n_clicks: result ?
-                    submit_n_clicks + 1: submit_n_clicks,
-                submit_n_clicks_timestamp: result ?
-                    Date.now() : submit_n_clicks_timestamp,
-                displayed: false
-            }));
+            new Promise(resolve => resolve(window.confirm(message))).then(result => {
+                this._setStateAndProps({
+                    cancel_n_clicks: !result ?
+                        cancel_n_clicks + 1 : cancel_n_clicks,
+                    cancel_n_clicks_timestamp: !result ?
+                        Date.now() :  cancel_n_clicks_timestamp,
+                    submit_n_clicks: result ?
+                        submit_n_clicks + 1: submit_n_clicks,
+                    submit_n_clicks_timestamp: result ?
+                        Date.now() : submit_n_clicks_timestamp,
+                    displayed: false
+                });
+            });
         }
     }
 
+    componentDidUpdate() {
+        this._update()
+    }
+
     render() {
         return null;
     }

diff --git a/src/components/ConfirmDialogProvider.react.js b/src/components/ConfirmDialogProvider.react.js
@@ -18,15 +18,26 @@ import ConfirmDialog from './ConfirmDialog.react'
  * ```
  */
 export default class ConfirmDialogProvider extends React.Component {
+    constructor(props) {
+        super(props);
+        this.state = {displayed: props.displayed};
+    }
+
+    componentWillReceiveProps(props) {
+        this.setState({displayed: props.displayed})
+    }
+
     render() {
         const { id, setProps, children } = this.props;
 
+        const displayed = this.state.displayed;
+
         // Will lose the previous onClick of the child
         const wrapClick = (child) => React.cloneElement(child, {onClick: () =>
             {
-                setProps({
-                    displayed: true
-                });
+                const update = {displayed: true};
+                this.setState(update);
+                if (setProps) setProps(update);
             }
         });
 
@@ -41,7 +52,9 @@ export default class ConfirmDialogProvider extends React.Component {
                         ? realChild.map(wrapClick)
                         : wrapClick(realChild)
                 }
-                <ConfirmDialog {...this.props}/>
+                <ConfirmDialog
+                    {...this.props}
+                    displayed={displayed}/>
             </div>
         )
     }