Rework dash-renderer setProps (plotly#478)

packages/dash-core-components/dash_core_components/package.json

@@ -73,6 +73,7 @@
     "prettier": "^1.14.2",
     "react": "^16.6.1",
     "react-dom": "^16.6.1",
+    "react-dot-fragment": "^0.2.8",
     "style-loader": "^0.23.1",
     "styled-jsx": "^3.1.1",
     "webpack": "^4.25.1",

packages/dash-core-components/package.json

@@ -73,6 +73,7 @@
     "prettier": "^1.14.2",
     "react": "^16.6.1",
     "react-dom": "^16.6.1",
+    "react-dot-fragment": "^0.2.8",
     "style-loader": "^0.23.1",
     "styled-jsx": "^3.1.1",
     "webpack": "^4.25.1",

packages/dash-core-components/src/components/ConfirmDialog.react.js

@@ -13,7 +13,6 @@ export default class ConfirmDialog extends Component {
         this.state = {
             displayed: props.displayed,
         };
-        this._update();
     }
 
     _setStateAndProps(value) {
@@ -58,6 +57,10 @@ export default class ConfirmDialog extends Component {
         this._update();
     }
 
+    componentDidMount() {
+        this._update();
+    }
+
     render() {
         return null;
     }

packages/dash-core-components/src/components/ConfirmDialogProvider.react.js

@@ -1,3 +1,4 @@
+import {clone} from 'ramda';
 import React from 'react';
 import PropTypes from 'prop-types';
 
@@ -31,20 +32,18 @@ export default class ConfirmDialogProvider extends React.Component {
         const displayed = this.state.displayed;
 
         // Will lose the previous onClick of the child
-        const wrapClick = child =>
-            React.cloneElement(child, {
-                onClick: () => {
-                    const update = {displayed: true};
-                    this.setState(update);
-                    if (setProps) {
-                        setProps(update);
-                    }
-                },
-            });
+        const wrapClick = child => {
+            const props = clone(child.props);
+            props._dashprivate_layout.props.onClick = () => {
+                const update = {displayed: true};
+                this.setState(update);
+                if (setProps) {
+                    setProps(update);
+                }
+            };
 
-        const realChild = children.props
-            ? children.props.children
-            : children.map(e => e.props.children);
+            return React.cloneElement(child, props);
+        };
 
         return (
             <div
@@ -53,9 +52,9 @@ export default class ConfirmDialogProvider extends React.Component {
                     (loading_state && loading_state.is_loading) || undefined
                 }
             >
-                {realChild && realChild.length
-                    ? realChild.map(wrapClick)
-                    : wrapClick(realChild)}
+                {Array.isArray(children)
+                    ? children.map(wrapClick)
+                    : wrapClick(children)}
                 <ConfirmDialog {...this.props} displayed={displayed} />
             </div>
         );

packages/dash-core-components/src/components/Tab.react.js

@@ -1,7 +1,8 @@
 import React from 'react';
 import PropTypes from 'prop-types';
+import Fragment from 'react-dot-fragment';
 
-const Tab = ({children}) => <div>{children}</div>;
+const Tab = ({children}) => <Fragment>{children}</Fragment>;
 
 /**
  * Part of dcc.Tabs - this is the child Tab component used to render a tabbed page.

packages/dash-core-components/src/components/Tabs.react.js

@@ -204,11 +204,11 @@ export default class Tabs extends Component {
                     // props we want are lying a bit deeper - which means they
                     // are coming from Dash
                     R.isNil(child.props.disabled) &&
-                    child.props.children &&
-                    child.props.children.props
+                    child.props._dashprivate_layout &&
+                    child.props._dashprivate_layout.props
                 ) {
                     // props are coming from Dash
-                    childProps = child.props.children.props;
+                    childProps = child.props._dashprivate_layout.props;
                 } else {
                     // else props are coming from React (Demo.react.js, or Tabs.test.js)
                     childProps = child.props;
@@ -222,6 +222,7 @@ export default class Tabs extends Component {
                 if (childProps.value === this.state.selected) {
                     selectedTab = child;
                 }
+
                 return (
                     <EnhancedTab
                         key={index}
@@ -247,9 +248,7 @@ export default class Tabs extends Component {
             });
         }
 
-        const selectedTabContent = !R.isNil(selectedTab)
-            ? selectedTab.props.children
-            : '';
+        const selectedTabContent = !R.isNil(selectedTab) ? selectedTab : '';
 
         const tabContainerClass = this.props.vertical
             ? 'tab-container tab-container--vert'

packages/dash-core-components/test/test_integration.py

@@ -1264,8 +1264,6 @@ def on_click(n_clicks):
         time.sleep(2)
 
         self.driver.switch_to.alert.accept()
-        time.sleep(2)
-        self.driver.switch_to.alert.accept()
 
     def test_empty_graph(self):
         app = dash.Dash(__name__)

packages/dash-core-components/test/unit/Tabs.test.js

@@ -177,12 +177,7 @@ describe('Tabs handle Tab selection logic', () => {
     });
     test('Tab can be clicked and will display its content', () => {
         tabs.find('[value="tab-2"]').simulate('click');
-        const renderedContent = tabs.find('.tab-content > div').html();
-        expect(renderedContent).toEqual('<div>Tab 2 child</div>');
-    });
-    test('Tab without value will still be clickable', () => {
-        tabs.find('[value="tab-2"]').simulate('click');
-        const renderedContent = tabs.find('.tab-content > div').html();
+        const renderedContent = tabs.find(Tab).html();
         expect(renderedContent).toEqual('<div>Tab 2 child</div>');
     });
 });