Rework dash-renderer setProps

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",

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",

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;
  }

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>
  );

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.

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'

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__)

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>');
  });
 });

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",

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",

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;
  }

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>
  );

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.

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'

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__)

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>');
  });
 });

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",

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",

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;
  }

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>
  );

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.

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'

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__)

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>');
  });
 });

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",

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",

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;
  }

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>
  );

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.

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'

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__)

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>');
  });
 });

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",

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",

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;
  }

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>
  );

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.

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'

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__)

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>');
  });
 });

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",

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",

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;
  }

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>
  );

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.

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'

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__)

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>');
  });
 });

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",

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",

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;
  }

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>
  );

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.

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'

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__)

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>');
  });
 });

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",

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",

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;
  }

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>
  );

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.

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'

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__)

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>');
  });
 });