Component as props

@plotly/dash-test-components/src/components/ComponentAsProp.js

@@ -0,0 +1,34 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+
+
+const ComponentAsProp = (props) => {
+ const { element, id, shapeEl, list_of_shapes } = props;
+ return (
+ <div id={id}>
+ {shapeEl && shapeEl.header}
+ {element}
+ {shapeEl && shapeEl.footer}
+ {list_of_shapes && <ul>{list_of_shapes.map(e => <li key={e.value}>{e.label}</li>)}</ul> }
+ </div>
+ )
+}
+
+ComponentAsProp.propTypes = {
+ id: PropTypes.string,
+ element: PropTypes.node,
+
+ shapeEl: PropTypes.shape({
+ header: PropTypes.node,
+ footer: PropTypes.node,
+ }),
+
+ list_of_shapes: PropTypes.arrayOf(
+ PropTypes.exact({
+ label: PropTypes.node,
+ value: PropTypes.number,
+ })
+ )
+}
+
+export default ComponentAsProp;

@plotly/dash-test-components/src/index.js

@@ -6,6 +6,7 @@ import MyPersistedComponent from './components/MyPersistedComponent';
 import MyPersistedComponentNested from './components/MyPersistedComponentNested';
 import StyledComponent from './components/StyledComponent';
 import WidthComponent from './components/WidthComponent';
+import ComponentAsProp from './components/ComponentAsProp';
 
 export {
  AsyncComponent,
@@ -15,5 +16,6 @@ export {
  MyPersistedComponent,
  MyPersistedComponentNested,
  StyledComponent,
- WidthComponent
+ WidthComponent,
+ ComponentAsProp,
 };

CHANGELOG.md

@@ -19,6 +19,7 @@ This project adheres to [Semantic Versioning](https://semver.org/).
 ### Added
 
 - [#2049](https://github.com/plotly/dash/pull/2043) Added `wait_for_class_to_equal` and `wait_for_contains_class` methods to `dash.testing`
+- [#1965](https://github.com/plotly/dash/pull/1965) Add component as props.
 
 ## [2.4.1] - 2022-05-11
 

components/dash-core-components/src/components/Checklist.react.js

@@ -104,11 +104,7 @@ Checklist.propTypes = {
  /**
  * The option's label
  */
- label: PropTypes.oneOfType([
- PropTypes.string,
- PropTypes.number,
- PropTypes.bool,
- ]).isRequired,
+ label: PropTypes.node.isRequired,
 
  /**
  * The value of the option. This value

components/dash-core-components/src/components/Dropdown.react.js

@@ -56,8 +56,7 @@ Dropdown.propTypes = {
  /**
  * The option's label
  */
- label: PropTypes.oneOfType([PropTypes.string, PropTypes.number])
- .isRequired,
+ label: PropTypes.node.isRequired,
 
  /**
  * The value of the option. This value

components/dash-core-components/src/components/RadioItems.react.js

@@ -99,11 +99,7 @@ RadioItems.propTypes = {
  /**
  * The option's label
  */
- label: PropTypes.oneOfType([
- PropTypes.string,
- PropTypes.number,
- PropTypes.bool,
- ]).isRequired,
+ label: PropTypes.node.isRequired,
 
  /**
  * The value of the option. This value

components/dash-core-components/tests/integration/misc/test_dcc_components_as_props.py

@@ -0,0 +1,43 @@
+from dash import Dash, dcc, html
+
+
+def test_mdcap001_dcc_components_as_props(dash_dcc):
+ app = Dash(__name__)
+
+ app.layout = html.Div(
+ [
+ dcc.Checklist(
+ [
+ {"label": html.H2("H2 label"), "value": "h2"},
+ {"label": html.A("Link in checklist", href="#"), "value": "a"},
+ ],
+ id="checklist",
+ ),
+ dcc.RadioItems(
+ [
+ {"label": html.H3("on"), "value": "on"},
+ {"label": html.P("off"), "value": "off"},
+ ],
+ id="radio-items",
+ ),
+ dcc.Dropdown(
+ [
+ {"label": html.H4("h4"), "value": "h4"},
+ {"label": html.H6("h6"), "value": "h6"},
+ ],
+ id="dropdown",
+ ),
+ ]
+ )
+
+ dash_dcc.start_server(app)
+
+ dash_dcc.wait_for_text_to_equal("#checklist h2", "H2 label")
+ dash_dcc.wait_for_text_to_equal("#checklist a", "Link in checklist")
+
+ dash_dcc.wait_for_text_to_equal("#radio-items h3", "on")
+ dash_dcc.wait_for_text_to_equal("#radio-items p", "off")
+
+ dash_dcc.find_element("#dropdown").click()
+ dash_dcc.wait_for_text_to_equal("#dropdown h4", "h4")
+ dash_dcc.wait_for_text_to_equal("#dropdown h6", "h6")

dash/dash-renderer/src/AppContainer.react.js

@@ -5,6 +5,7 @@ import APIController from './APIController.react';
 import Loading from './components/core/Loading.react';
 import Toolbar from './components/core/Toolbar.react';
 import Reloader from './components/core/Reloader.react';
+import getConfigFromDOM from './config';
 import {setHooks, setConfig} from './actions/index';
 import {type, memoizeWith, identity} from 'ramda';
 
@@ -35,9 +36,7 @@ class UnconnectedAppContainer extends React.Component {
 
  UNSAFE_componentWillMount() {
  const {dispatch} = this.props;
- const config = JSON.parse(
- document.getElementById('_dash-config').textContent
- );
+ const config = getConfigFromDOM();
 
  // preset common request params in the config
  config.fetch = {

dash/dash-renderer/src/AppProvider.react.tsx

@@ -7,7 +7,6 @@ import AppContainer from './AppContainer.react';
 
 const AppProvider = ({hooks}: any) => {
  const [{store}] = useState(() => new Store());
-
  return (
  <Provider store={store}>
  <AppContainer hooks={hooks} />

dash/dash-renderer/src/TreeContainer.js

@@ -4,17 +4,23 @@ import Registry from './registry';
 import {propTypeErrorHandler} from './exceptions';
 import {
  addIndex,
+ assoc,
+ assocPath,
  concat,
  dissoc,
  equals,
  isEmpty,
  isNil,
+ has,
  keys,
  map,
  mergeRight,
  pick,
  pickBy,
+ pipe,
  propOr,
+ path as rpath,
+ pathOr,
  type
 } from 'ramda';
 import {notifyObservers, updateProps} from './actions';
@@ -67,6 +73,15 @@ function createElement(element, props, extraProps, children) {
  return React.createElement(element, allProps, children);
 }
 
+function isDryComponent(obj) {
+ return (
+ type(obj) === 'Object' &&
+ has('type', obj) &&
+ has('namespace', obj) &&
+ has('props', obj)
+ );
+}
+
 const TreeContainer = memo(props => (
  <DashContext.Consumer>
  {context => (
@@ -180,6 +195,32 @@ class BaseTreeContainer extends Component {
  );
  }
 
+ wrapChildrenProp(node, childrenProp) {
+ if (Array.isArray(node)) {
+ return node.map((n, i) =>
+ isDryComponent(n)
+ ? this.createContainer(
+ this.props,
+ n,
+ concat(this.props._dashprivate_path, [
+ 'props',
+ ...childrenProp,
+ i
+ ])
+ )
+ : n
+ );
+ }
+ if (!isDryComponent(node)) {
+ return node;
+ }
+ return this.createContainer(
+ this.props,
+ node,
+ concat(this.props._dashprivate_path, ['props', ...childrenProp])
+ );
+ }
+
  getComponent(_dashprivate_layout, children, loading_state, setProps) {
  const {_dashprivate_config, _dashprivate_dispatch, _dashprivate_error} =
  this.props;
@@ -195,7 +236,86 @@ class BaseTreeContainer extends Component {
 
  const element = Registry.resolve(_dashprivate_layout);
 
- const props = dissoc('children', _dashprivate_layout.props);
+ // Hydrate components props
+ const childrenProps = pathOr(
+ [],
+ [
+ 'children_props',
+ _dashprivate_layout.namespace,
+ _dashprivate_layout.type
+ ],
+ _dashprivate_config
+ );
+ const props = pipe(
+ dissoc('children'),
+ ...childrenProps
+ .map(childrenProp => {
+ if (childrenProp.includes('.')) {
+ let path = childrenProp.split('.');
+ let node;
+ let nodeValue;
+ if (childrenProp.includes('[]')) {
+ let frontPath = [],
+ backPath = [],
+ found = false;
+ path.forEach(p => {
+ if (!found) {
+ if (p.includes('[]')) {
+ found = true;
+ frontPath.push(p.replace('[]', ''));
+ } else {
+ frontPath.push(p);
+ }
+ } else {
+ backPath.push(p);
+ }
+ });
+
+ node = rpath(frontPath, _dashprivate_layout.props);
+ if (node === undefined) {
+ return;
+ }
+ if (!node.length) {
+ return assocPath(frontPath, node);
+ }
+ const firstNode = rpath(backPath, node[0]);
+ if (!firstNode) {
+ return assocPath(frontPath, node);
+ }
+ nodeValue = node.map((element, i) => {
+ const elementPath = concat(
+ frontPath,
+ concat([i], backPath)
+ );
+ return assocPath(
+ backPath,
+ this.wrapChildrenProp(
+ rpath(backPath, element),
+ elementPath
+ ),
+ element
+ );
+ });
+ path = frontPath;
+ } else {
+ node = rpath(path, _dashprivate_layout.props);
+ if (node === undefined) {
+ return;
+ }
+ nodeValue = this.wrapChildrenProp(node, path);
+ }
+ return assocPath(path, nodeValue);
+ }
+ const node = _dashprivate_layout.props[childrenProp];
+ if (node !== undefined) {
+ return assoc(
+ childrenProp,
+ this.wrapChildrenProp(node, [childrenProp])
+ );
+ }
+ })
+ .filter(e => e !== undefined)
+ )(_dashprivate_layout.props);
 
  if (type(props.id) === 'Object') {
  // Turn object ids (for wildcards) into unique strings.

dash/dash-renderer/src/actions/utils.js

@@ -1,4 +1,4 @@
-import {append, concat, has, path, type} from 'ramda';
+import {append, concat, has, path, pathOr, type, path as rpath} from 'ramda';
 
 /*
  * requests_pathname_prefix is the new config parameter introduced in
@@ -27,11 +27,24 @@ export function urlBase(config) {
 const propsChildren = ['props', 'children'];
 
 // crawl a layout object or children array, apply a function on every object
-export const crawlLayout = (object, func, currentPath = []) => {
+export const crawlLayout = (
+ object,
+ func,
+ currentPath = [],
+ extraPath = undefined
+) => {
  if (Array.isArray(object)) {
  // children array
  object.forEach((child, i) => {
- crawlLayout(child, func, append(i, currentPath));
+ if (extraPath) {
+ crawlLayout(
+ rpath(extraPath, child),
+ func,
+ concat(currentPath, concat([i], extraPath))
+ );
+ } else {
+ crawlLayout(child, func, append(i, currentPath));
+ }
  });
  } else if (type(object) === 'Object') {
  func(object, currentPath);
@@ -41,6 +54,32 @@ export const crawlLayout = (object, func, currentPath = []) => {
  const newPath = concat(currentPath, propsChildren);
  crawlLayout(children, func, newPath);
  }
+
+ const childrenProps = pathOr(
+ [],
+ [object.namespace, object.type],
+ window.__dashprivate_childrenProps
+ );
+ childrenProps.forEach(childrenProp => {
+ if (childrenProp.includes('[]')) {
+ let [frontPath, backPath] = childrenProp
+ .split('[]')
+ .map(p => p.split('.').filter(e => e));
+ const front = concat(['props'], frontPath);
+ const basePath = concat(currentPath, front);
+ crawlLayout(path(front, object), func, basePath, backPath);
+ } else {
+ const newPath = concat(currentPath, [
+ 'props',
+ ...childrenProp.split('.')
+ ]);
+ crawlLayout(
+ path(['props', ...childrenProp.split('.')], object),
+ func,
+ newPath
+ );
+ }
+ });
  }
 };
 

@plotly/dash-test-components/src/components/ComponentAsProp.js

@@ -0,0 +1,34 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+
+
+const ComponentAsProp = (props) => {
+ const { element, id, shapeEl, list_of_shapes } = props;
+ return (
+ <div id={id}>
+ {shapeEl && shapeEl.header}
+ {element}
+ {shapeEl && shapeEl.footer}
+ {list_of_shapes && <ul>{list_of_shapes.map(e => <li key={e.value}>{e.label}</li>)}</ul> }
+ </div>
+ )
+}
+
+ComponentAsProp.propTypes = {
+ id: PropTypes.string,
+ element: PropTypes.node,
+
+ shapeEl: PropTypes.shape({
+ header: PropTypes.node,
+ footer: PropTypes.node,
+ }),
+
+ list_of_shapes: PropTypes.arrayOf(
+ PropTypes.exact({
+ label: PropTypes.node,
+ value: PropTypes.number,
+ })
+ )
+}
+
+export default ComponentAsProp;

@plotly/dash-test-components/src/index.js

@@ -6,6 +6,7 @@ import MyPersistedComponent from './components/MyPersistedComponent';
 import MyPersistedComponentNested from './components/MyPersistedComponentNested';
 import StyledComponent from './components/StyledComponent';
 import WidthComponent from './components/WidthComponent';
+import ComponentAsProp from './components/ComponentAsProp';
 
 export {
  AsyncComponent,
@@ -15,5 +16,6 @@ export {
  MyPersistedComponent,
  MyPersistedComponentNested,
  StyledComponent,
- WidthComponent
+ WidthComponent,
+ ComponentAsProp,
 };

CHANGELOG.md

@@ -19,6 +19,7 @@ This project adheres to [Semantic Versioning](https://semver.org/).
 ### Added
 
 - [#2049](https://github.com/plotly/dash/pull/2043) Added `wait_for_class_to_equal` and `wait_for_contains_class` methods to `dash.testing`
+- [#1965](https://github.com/plotly/dash/pull/1965) Add component as props.
 
 ## [2.4.1] - 2022-05-11
 

components/dash-core-components/src/components/Checklist.react.js

@@ -104,11 +104,7 @@ Checklist.propTypes = {
  /**
  * The option's label
  */
- label: PropTypes.oneOfType([
- PropTypes.string,
- PropTypes.number,
- PropTypes.bool,
- ]).isRequired,
+ label: PropTypes.node.isRequired,
 
  /**
  * The value of the option. This value

components/dash-core-components/src/components/Dropdown.react.js

@@ -56,8 +56,7 @@ Dropdown.propTypes = {
  /**
  * The option's label
  */
- label: PropTypes.oneOfType([PropTypes.string, PropTypes.number])
- .isRequired,
+ label: PropTypes.node.isRequired,
 
  /**
  * The value of the option. This value

components/dash-core-components/src/components/RadioItems.react.js

@@ -99,11 +99,7 @@ RadioItems.propTypes = {
  /**
  * The option's label
  */
- label: PropTypes.oneOfType([
- PropTypes.string,
- PropTypes.number,
- PropTypes.bool,
- ]).isRequired,
+ label: PropTypes.node.isRequired,
 
  /**
  * The value of the option. This value

components/dash-core-components/tests/integration/misc/test_dcc_components_as_props.py

@@ -0,0 +1,43 @@
+from dash import Dash, dcc, html
+
+
+def test_mdcap001_dcc_components_as_props(dash_dcc):
+ app = Dash(__name__)
+
+ app.layout = html.Div(
+ [
+ dcc.Checklist(
+ [
+ {"label": html.H2("H2 label"), "value": "h2"},
+ {"label": html.A("Link in checklist", href="#"), "value": "a"},
+ ],
+ id="checklist",
+ ),
+ dcc.RadioItems(
+ [
+ {"label": html.H3("on"), "value": "on"},
+ {"label": html.P("off"), "value": "off"},
+ ],
+ id="radio-items",
+ ),
+ dcc.Dropdown(
+ [
+ {"label": html.H4("h4"), "value": "h4"},
+ {"label": html.H6("h6"), "value": "h6"},
+ ],
+ id="dropdown",
+ ),
+ ]
+ )
+
+ dash_dcc.start_server(app)
+
+ dash_dcc.wait_for_text_to_equal("#checklist h2", "H2 label")
+ dash_dcc.wait_for_text_to_equal("#checklist a", "Link in checklist")
+
+ dash_dcc.wait_for_text_to_equal("#radio-items h3", "on")
+ dash_dcc.wait_for_text_to_equal("#radio-items p", "off")
+
+ dash_dcc.find_element("#dropdown").click()
+ dash_dcc.wait_for_text_to_equal("#dropdown h4", "h4")
+ dash_dcc.wait_for_text_to_equal("#dropdown h6", "h6")

dash/dash-renderer/src/AppContainer.react.js

@@ -5,6 +5,7 @@ import APIController from './APIController.react';
 import Loading from './components/core/Loading.react';
 import Toolbar from './components/core/Toolbar.react';
 import Reloader from './components/core/Reloader.react';
+import getConfigFromDOM from './config';
 import {setHooks, setConfig} from './actions/index';
 import {type, memoizeWith, identity} from 'ramda';
 
@@ -35,9 +36,7 @@ class UnconnectedAppContainer extends React.Component {
 
  UNSAFE_componentWillMount() {
  const {dispatch} = this.props;
- const config = JSON.parse(
- document.getElementById('_dash-config').textContent
- );
+ const config = getConfigFromDOM();
 
  // preset common request params in the config
  config.fetch = {

dash/dash-renderer/src/AppProvider.react.tsx

@@ -7,7 +7,6 @@ import AppContainer from './AppContainer.react';
 
 const AppProvider = ({hooks}: any) => {
  const [{store}] = useState(() => new Store());
-
  return (
  <Provider store={store}>
  <AppContainer hooks={hooks} />

dash/dash-renderer/src/TreeContainer.js

@@ -4,17 +4,23 @@ import Registry from './registry';
 import {propTypeErrorHandler} from './exceptions';
 import {
  addIndex,
+ assoc,
+ assocPath,
  concat,
  dissoc,
  equals,
  isEmpty,
  isNil,
+ has,
  keys,
  map,
  mergeRight,
  pick,
  pickBy,
+ pipe,
  propOr,
+ path as rpath,
+ pathOr,
  type
 } from 'ramda';
 import {notifyObservers, updateProps} from './actions';
@@ -67,6 +73,15 @@ function createElement(element, props, extraProps, children) {
  return React.createElement(element, allProps, children);
 }
 
+function isDryComponent(obj) {
+ return (
+ type(obj) === 'Object' &&
+ has('type', obj) &&
+ has('namespace', obj) &&
+ has('props', obj)
+ );
+}
+
 const TreeContainer = memo(props => (
  <DashContext.Consumer>
  {context => (
@@ -180,6 +195,32 @@ class BaseTreeContainer extends Component {
  );
  }
 
+ wrapChildrenProp(node, childrenProp) {
+ if (Array.isArray(node)) {
+ return node.map((n, i) =>
+ isDryComponent(n)
+ ? this.createContainer(
+ this.props,
+ n,
+ concat(this.props._dashprivate_path, [
+ 'props',
+ ...childrenProp,
+ i
+ ])
+ )
+ : n
+ );
+ }
+ if (!isDryComponent(node)) {
+ return node;
+ }
+ return this.createContainer(
+ this.props,
+ node,
+ concat(this.props._dashprivate_path, ['props', ...childrenProp])
+ );
+ }
+
  getComponent(_dashprivate_layout, children, loading_state, setProps) {
  const {_dashprivate_config, _dashprivate_dispatch, _dashprivate_error} =
  this.props;
@@ -195,7 +236,86 @@ class BaseTreeContainer extends Component {
 
  const element = Registry.resolve(_dashprivate_layout);
 
- const props = dissoc('children', _dashprivate_layout.props);
+ // Hydrate components props
+ const childrenProps = pathOr(
+ [],
+ [
+ 'children_props',
+ _dashprivate_layout.namespace,
+ _dashprivate_layout.type
+ ],
+ _dashprivate_config
+ );
+ const props = pipe(
+ dissoc('children'),
+ ...childrenProps
+ .map(childrenProp => {
+ if (childrenProp.includes('.')) {
+ let path = childrenProp.split('.');
+ let node;
+ let nodeValue;
+ if (childrenProp.includes('[]')) {
+ let frontPath = [],
+ backPath = [],
+ found = false;
+ path.forEach(p => {
+ if (!found) {
+ if (p.includes('[]')) {
+ found = true;
+ frontPath.push(p.replace('[]', ''));
+ } else {
+ frontPath.push(p);
+ }
+ } else {
+ backPath.push(p);
+ }
+ });
+
+ node = rpath(frontPath, _dashprivate_layout.props);
+ if (node === undefined) {
+ return;
+ }
+ if (!node.length) {
+ return assocPath(frontPath, node);
+ }
+ const firstNode = rpath(backPath, node[0]);
+ if (!firstNode) {
+ return assocPath(frontPath, node);
+ }
+ nodeValue = node.map((element, i) => {
+ const elementPath = concat(
+ frontPath,
+ concat([i], backPath)
+ );
+ return assocPath(
+ backPath,
+ this.wrapChildrenProp(
+ rpath(backPath, element),
+ elementPath
+ ),
+ element
+ );
+ });
+ path = frontPath;
+ } else {
+ node = rpath(path, _dashprivate_layout.props);
+ if (node === undefined) {
+ return;
+ }
+ nodeValue = this.wrapChildrenProp(node, path);
+ }
+ return assocPath(path, nodeValue);
+ }
+ const node = _dashprivate_layout.props[childrenProp];
+ if (node !== undefined) {
+ return assoc(
+ childrenProp,
+ this.wrapChildrenProp(node, [childrenProp])
+ );
+ }
+ })
+ .filter(e => e !== undefined)
+ )(_dashprivate_layout.props);
 
  if (type(props.id) === 'Object') {
  // Turn object ids (for wildcards) into unique strings.

dash/dash-renderer/src/actions/utils.js

@@ -1,4 +1,4 @@
-import {append, concat, has, path, type} from 'ramda';
+import {append, concat, has, path, pathOr, type, path as rpath} from 'ramda';
 
 /*
  * requests_pathname_prefix is the new config parameter introduced in
@@ -27,11 +27,24 @@ export function urlBase(config) {
 const propsChildren = ['props', 'children'];
 
 // crawl a layout object or children array, apply a function on every object
-export const crawlLayout = (object, func, currentPath = []) => {
+export const crawlLayout = (
+ object,
+ func,
+ currentPath = [],
+ extraPath = undefined
+) => {
  if (Array.isArray(object)) {
  // children array
  object.forEach((child, i) => {
- crawlLayout(child, func, append(i, currentPath));
+ if (extraPath) {
+ crawlLayout(
+ rpath(extraPath, child),
+ func,
+ concat(currentPath, concat([i], extraPath))
+ );
+ } else {
+ crawlLayout(child, func, append(i, currentPath));
+ }
  });
  } else if (type(object) === 'Object') {
  func(object, currentPath);
@@ -41,6 +54,32 @@ export const crawlLayout = (object, func, currentPath = []) => {
  const newPath = concat(currentPath, propsChildren);
  crawlLayout(children, func, newPath);
  }
+
+ const childrenProps = pathOr(
+ [],
+ [object.namespace, object.type],
+ window.__dashprivate_childrenProps
+ );
+ childrenProps.forEach(childrenProp => {
+ if (childrenProp.includes('[]')) {
+ let [frontPath, backPath] = childrenProp
+ .split('[]')
+ .map(p => p.split('.').filter(e => e));
+ const front = concat(['props'], frontPath);
+ const basePath = concat(currentPath, front);
+ crawlLayout(path(front, object), func, basePath, backPath);
+ } else {
+ const newPath = concat(currentPath, [
+ 'props',
+ ...childrenProp.split('.')
+ ]);
+ crawlLayout(
+ path(['props', ...childrenProp.split('.')], object),
+ func,
+ newPath
+ );
+ }
+ });
  }
 };
 

@plotly/dash-test-components/src/components/ComponentAsProp.js

@@ -0,0 +1,34 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+
+
+const ComponentAsProp = (props) => {
+ const { element, id, shapeEl, list_of_shapes } = props;
+ return (
+ <div id={id}>
+ {shapeEl && shapeEl.header}
+ {element}
+ {shapeEl && shapeEl.footer}
+ {list_of_shapes && <ul>{list_of_shapes.map(e => <li key={e.value}>{e.label}</li>)}</ul> }
+ </div>
+ )
+}
+
+ComponentAsProp.propTypes = {
+ id: PropTypes.string,
+ element: PropTypes.node,
+
+ shapeEl: PropTypes.shape({
+ header: PropTypes.node,
+ footer: PropTypes.node,
+ }),
+
+ list_of_shapes: PropTypes.arrayOf(
+ PropTypes.exact({
+ label: PropTypes.node,
+ value: PropTypes.number,
+ })
+ )
+}
+
+export default ComponentAsProp;

@plotly/dash-test-components/src/index.js

@@ -6,6 +6,7 @@ import MyPersistedComponent from './components/MyPersistedComponent';
 import MyPersistedComponentNested from './components/MyPersistedComponentNested';
 import StyledComponent from './components/StyledComponent';
 import WidthComponent from './components/WidthComponent';
+import ComponentAsProp from './components/ComponentAsProp';
 
 export {
  AsyncComponent,
@@ -15,5 +16,6 @@ export {
  MyPersistedComponent,
  MyPersistedComponentNested,
  StyledComponent,
- WidthComponent
+ WidthComponent,
+ ComponentAsProp,
 };

CHANGELOG.md

@@ -19,6 +19,7 @@ This project adheres to [Semantic Versioning](https://semver.org/).
 ### Added
 
 - [#2049](https://github.com/plotly/dash/pull/2043) Added `wait_for_class_to_equal` and `wait_for_contains_class` methods to `dash.testing`
+- [#1965](https://github.com/plotly/dash/pull/1965) Add component as props.
 
 ## [2.4.1] - 2022-05-11
 

components/dash-core-components/src/components/Checklist.react.js

@@ -104,11 +104,7 @@ Checklist.propTypes = {
  /**
  * The option's label
  */
- label: PropTypes.oneOfType([
- PropTypes.string,
- PropTypes.number,
- PropTypes.bool,
- ]).isRequired,
+ label: PropTypes.node.isRequired,
 
  /**
  * The value of the option. This value

components/dash-core-components/src/components/Dropdown.react.js

@@ -56,8 +56,7 @@ Dropdown.propTypes = {
  /**
  * The option's label
  */
- label: PropTypes.oneOfType([PropTypes.string, PropTypes.number])
- .isRequired,
+ label: PropTypes.node.isRequired,
 
  /**
  * The value of the option. This value

components/dash-core-components/src/components/RadioItems.react.js

@@ -99,11 +99,7 @@ RadioItems.propTypes = {
  /**
  * The option's label
  */
- label: PropTypes.oneOfType([
- PropTypes.string,
- PropTypes.number,
- PropTypes.bool,
- ]).isRequired,
+ label: PropTypes.node.isRequired,
 
  /**
  * The value of the option. This value

components/dash-core-components/tests/integration/misc/test_dcc_components_as_props.py

@@ -0,0 +1,43 @@
+from dash import Dash, dcc, html
+
+
+def test_mdcap001_dcc_components_as_props(dash_dcc):
+ app = Dash(__name__)
+
+ app.layout = html.Div(
+ [
+ dcc.Checklist(
+ [
+ {"label": html.H2("H2 label"), "value": "h2"},
+ {"label": html.A("Link in checklist", href="#"), "value": "a"},
+ ],
+ id="checklist",
+ ),
+ dcc.RadioItems(
+ [
+ {"label": html.H3("on"), "value": "on"},
+ {"label": html.P("off"), "value": "off"},
+ ],
+ id="radio-items",
+ ),
+ dcc.Dropdown(
+ [
+ {"label": html.H4("h4"), "value": "h4"},
+ {"label": html.H6("h6"), "value": "h6"},
+ ],
+ id="dropdown",
+ ),
+ ]
+ )
+
+ dash_dcc.start_server(app)
+
+ dash_dcc.wait_for_text_to_equal("#checklist h2", "H2 label")
+ dash_dcc.wait_for_text_to_equal("#checklist a", "Link in checklist")
+
+ dash_dcc.wait_for_text_to_equal("#radio-items h3", "on")
+ dash_dcc.wait_for_text_to_equal("#radio-items p", "off")
+
+ dash_dcc.find_element("#dropdown").click()
+ dash_dcc.wait_for_text_to_equal("#dropdown h4", "h4")
+ dash_dcc.wait_for_text_to_equal("#dropdown h6", "h6")

dash/dash-renderer/src/AppContainer.react.js

@@ -5,6 +5,7 @@ import APIController from './APIController.react';
 import Loading from './components/core/Loading.react';
 import Toolbar from './components/core/Toolbar.react';
 import Reloader from './components/core/Reloader.react';
+import getConfigFromDOM from './config';
 import {setHooks, setConfig} from './actions/index';
 import {type, memoizeWith, identity} from 'ramda';
 
@@ -35,9 +36,7 @@ class UnconnectedAppContainer extends React.Component {
 
  UNSAFE_componentWillMount() {
  const {dispatch} = this.props;
- const config = JSON.parse(
- document.getElementById('_dash-config').textContent
- );
+ const config = getConfigFromDOM();
 
  // preset common request params in the config
  config.fetch = {

dash/dash-renderer/src/AppProvider.react.tsx

@@ -7,7 +7,6 @@ import AppContainer from './AppContainer.react';
 
 const AppProvider = ({hooks}: any) => {
  const [{store}] = useState(() => new Store());
-
  return (
  <Provider store={store}>
  <AppContainer hooks={hooks} />

dash/dash-renderer/src/TreeContainer.js

@@ -4,17 +4,23 @@ import Registry from './registry';
 import {propTypeErrorHandler} from './exceptions';
 import {
  addIndex,
+ assoc,
+ assocPath,
  concat,
  dissoc,
  equals,
  isEmpty,
  isNil,
+ has,
  keys,
  map,
  mergeRight,
  pick,
  pickBy,
+ pipe,
  propOr,
+ path as rpath,
+ pathOr,
  type
 } from 'ramda';
 import {notifyObservers, updateProps} from './actions';
@@ -67,6 +73,15 @@ function createElement(element, props, extraProps, children) {
  return React.createElement(element, allProps, children);
 }
 
+function isDryComponent(obj) {
+ return (
+ type(obj) === 'Object' &&
+ has('type', obj) &&
+ has('namespace', obj) &&
+ has('props', obj)
+ );
+}
+
 const TreeContainer = memo(props => (
  <DashContext.Consumer>
  {context => (
@@ -180,6 +195,32 @@ class BaseTreeContainer extends Component {
  );
  }
 
+ wrapChildrenProp(node, childrenProp) {
+ if (Array.isArray(node)) {
+ return node.map((n, i) =>
+ isDryComponent(n)
+ ? this.createContainer(
+ this.props,
+ n,
+ concat(this.props._dashprivate_path, [
+ 'props',
+ ...childrenProp,
+ i
+ ])
+ )
+ : n
+ );
+ }
+ if (!isDryComponent(node)) {
+ return node;
+ }
+ return this.createContainer(
+ this.props,
+ node,
+ concat(this.props._dashprivate_path, ['props', ...childrenProp])
+ );
+ }
+
  getComponent(_dashprivate_layout, children, loading_state, setProps) {
  const {_dashprivate_config, _dashprivate_dispatch, _dashprivate_error} =
  this.props;
@@ -195,7 +236,86 @@ class BaseTreeContainer extends Component {
 
  const element = Registry.resolve(_dashprivate_layout);
 
- const props = dissoc('children', _dashprivate_layout.props);
+ // Hydrate components props
+ const childrenProps = pathOr(
+ [],
+ [
+ 'children_props',
+ _dashprivate_layout.namespace,
+ _dashprivate_layout.type
+ ],
+ _dashprivate_config
+ );
+ const props = pipe(
+ dissoc('children'),
+ ...childrenProps
+ .map(childrenProp => {
+ if (childrenProp.includes('.')) {
+ let path = childrenProp.split('.');
+ let node;
+ let nodeValue;
+ if (childrenProp.includes('[]')) {
+ let frontPath = [],
+ backPath = [],
+ found = false;
+ path.forEach(p => {
+ if (!found) {
+ if (p.includes('[]')) {
+ found = true;
+ frontPath.push(p.replace('[]', ''));
+ } else {
+ frontPath.push(p);
+ }
+ } else {
+ backPath.push(p);
+ }
+ });
+
+ node = rpath(frontPath, _dashprivate_layout.props);
+ if (node === undefined) {
+ return;
+ }
+ if (!node.length) {
+ return assocPath(frontPath, node);
+ }
+ const firstNode = rpath(backPath, node[0]);
+ if (!firstNode) {
+ return assocPath(frontPath, node);
+ }
+ nodeValue = node.map((element, i) => {
+ const elementPath = concat(
+ frontPath,
+ concat([i], backPath)
+ );
+ return assocPath(
+ backPath,
+ this.wrapChildrenProp(
+ rpath(backPath, element),
+ elementPath
+ ),
+ element
+ );
+ });
+ path = frontPath;
+ } else {
+ node = rpath(path, _dashprivate_layout.props);
+ if (node === undefined) {
+ return;
+ }
+ nodeValue = this.wrapChildrenProp(node, path);
+ }
+ return assocPath(path, nodeValue);
+ }
+ const node = _dashprivate_layout.props[childrenProp];
+ if (node !== undefined) {
+ return assoc(
+ childrenProp,
+ this.wrapChildrenProp(node, [childrenProp])
+ );
+ }
+ })
+ .filter(e => e !== undefined)
+ )(_dashprivate_layout.props);
 
  if (type(props.id) === 'Object') {
  // Turn object ids (for wildcards) into unique strings.

dash/dash-renderer/src/actions/utils.js

@@ -1,4 +1,4 @@
-import {append, concat, has, path, type} from 'ramda';
+import {append, concat, has, path, pathOr, type, path as rpath} from 'ramda';
 
 /*
  * requests_pathname_prefix is the new config parameter introduced in
@@ -27,11 +27,24 @@ export function urlBase(config) {
 const propsChildren = ['props', 'children'];
 
 // crawl a layout object or children array, apply a function on every object
-export const crawlLayout = (object, func, currentPath = []) => {
+export const crawlLayout = (
+ object,
+ func,
+ currentPath = [],
+ extraPath = undefined
+) => {
  if (Array.isArray(object)) {
  // children array
  object.forEach((child, i) => {
- crawlLayout(child, func, append(i, currentPath));
+ if (extraPath) {
+ crawlLayout(
+ rpath(extraPath, child),
+ func,
+ concat(currentPath, concat([i], extraPath))
+ );
+ } else {
+ crawlLayout(child, func, append(i, currentPath));
+ }
  });
  } else if (type(object) === 'Object') {
  func(object, currentPath);
@@ -41,6 +54,32 @@ export const crawlLayout = (object, func, currentPath = []) => {
  const newPath = concat(currentPath, propsChildren);
  crawlLayout(children, func, newPath);
  }
+
+ const childrenProps = pathOr(
+ [],
+ [object.namespace, object.type],
+ window.__dashprivate_childrenProps
+ );
+ childrenProps.forEach(childrenProp => {
+ if (childrenProp.includes('[]')) {
+ let [frontPath, backPath] = childrenProp
+ .split('[]')
+ .map(p => p.split('.').filter(e => e));
+ const front = concat(['props'], frontPath);
+ const basePath = concat(currentPath, front);
+ crawlLayout(path(front, object), func, basePath, backPath);
+ } else {
+ const newPath = concat(currentPath, [
+ 'props',
+ ...childrenProp.split('.')
+ ]);
+ crawlLayout(
+ path(['props', ...childrenProp.split('.')], object),
+ func,
+ newPath
+ );
+ }
+ });
  }
 };
 

@plotly/dash-test-components/src/components/ComponentAsProp.js

@@ -0,0 +1,34 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+
+
+const ComponentAsProp = (props) => {
+ const { element, id, shapeEl, list_of_shapes } = props;
+ return (
+ <div id={id}>
+ {shapeEl && shapeEl.header}
+ {element}
+ {shapeEl && shapeEl.footer}
+ {list_of_shapes && <ul>{list_of_shapes.map(e => <li key={e.value}>{e.label}</li>)}</ul> }
+ </div>
+ )
+}
+
+ComponentAsProp.propTypes = {
+ id: PropTypes.string,
+ element: PropTypes.node,
+
+ shapeEl: PropTypes.shape({
+ header: PropTypes.node,
+ footer: PropTypes.node,
+ }),
+
+ list_of_shapes: PropTypes.arrayOf(
+ PropTypes.exact({
+ label: PropTypes.node,
+ value: PropTypes.number,
+ })
+ )
+}
+
+export default ComponentAsProp;

@plotly/dash-test-components/src/index.js

@@ -6,6 +6,7 @@ import MyPersistedComponent from './components/MyPersistedComponent';
 import MyPersistedComponentNested from './components/MyPersistedComponentNested';
 import StyledComponent from './components/StyledComponent';
 import WidthComponent from './components/WidthComponent';
+import ComponentAsProp from './components/ComponentAsProp';
 
 export {
  AsyncComponent,
@@ -15,5 +16,6 @@ export {
  MyPersistedComponent,
  MyPersistedComponentNested,
  StyledComponent,
- WidthComponent
+ WidthComponent,
+ ComponentAsProp,
 };

CHANGELOG.md

@@ -19,6 +19,7 @@ This project adheres to [Semantic Versioning](https://semver.org/).
 ### Added
 
 - [#2049](https://github.com/plotly/dash/pull/2043) Added `wait_for_class_to_equal` and `wait_for_contains_class` methods to `dash.testing`
+- [#1965](https://github.com/plotly/dash/pull/1965) Add component as props.
 
 ## [2.4.1] - 2022-05-11
 

components/dash-core-components/src/components/Checklist.react.js

@@ -104,11 +104,7 @@ Checklist.propTypes = {
  /**
  * The option's label
  */
- label: PropTypes.oneOfType([
- PropTypes.string,
- PropTypes.number,
- PropTypes.bool,
- ]).isRequired,
+ label: PropTypes.node.isRequired,
 
  /**
  * The value of the option. This value

components/dash-core-components/src/components/Dropdown.react.js

@@ -56,8 +56,7 @@ Dropdown.propTypes = {
  /**
  * The option's label
  */
- label: PropTypes.oneOfType([PropTypes.string, PropTypes.number])
- .isRequired,
+ label: PropTypes.node.isRequired,
 
  /**
  * The value of the option. This value

components/dash-core-components/src/components/RadioItems.react.js

@@ -99,11 +99,7 @@ RadioItems.propTypes = {
  /**
  * The option's label
  */
- label: PropTypes.oneOfType([
- PropTypes.string,
- PropTypes.number,
- PropTypes.bool,
- ]).isRequired,
+ label: PropTypes.node.isRequired,
 
  /**
  * The value of the option. This value

components/dash-core-components/tests/integration/misc/test_dcc_components_as_props.py

@@ -0,0 +1,43 @@
+from dash import Dash, dcc, html
+
+
+def test_mdcap001_dcc_components_as_props(dash_dcc):
+ app = Dash(__name__)
+
+ app.layout = html.Div(
+ [
+ dcc.Checklist(
+ [
+ {"label": html.H2("H2 label"), "value": "h2"},
+ {"label": html.A("Link in checklist", href="#"), "value": "a"},
+ ],
+ id="checklist",
+ ),
+ dcc.RadioItems(
+ [
+ {"label": html.H3("on"), "value": "on"},
+ {"label": html.P("off"), "value": "off"},
+ ],
+ id="radio-items",
+ ),
+ dcc.Dropdown(
+ [
+ {"label": html.H4("h4"), "value": "h4"},
+ {"label": html.H6("h6"), "value": "h6"},
+ ],
+ id="dropdown",
+ ),
+ ]
+ )
+
+ dash_dcc.start_server(app)
+
+ dash_dcc.wait_for_text_to_equal("#checklist h2", "H2 label")
+ dash_dcc.wait_for_text_to_equal("#checklist a", "Link in checklist")
+
+ dash_dcc.wait_for_text_to_equal("#radio-items h3", "on")
+ dash_dcc.wait_for_text_to_equal("#radio-items p", "off")
+
+ dash_dcc.find_element("#dropdown").click()
+ dash_dcc.wait_for_text_to_equal("#dropdown h4", "h4")
+ dash_dcc.wait_for_text_to_equal("#dropdown h6", "h6")

dash/dash-renderer/src/AppContainer.react.js

@@ -5,6 +5,7 @@ import APIController from './APIController.react';
 import Loading from './components/core/Loading.react';
 import Toolbar from './components/core/Toolbar.react';
 import Reloader from './components/core/Reloader.react';
+import getConfigFromDOM from './config';
 import {setHooks, setConfig} from './actions/index';
 import {type, memoizeWith, identity} from 'ramda';
 
@@ -35,9 +36,7 @@ class UnconnectedAppContainer extends React.Component {
 
  UNSAFE_componentWillMount() {
  const {dispatch} = this.props;
- const config = JSON.parse(
- document.getElementById('_dash-config').textContent
- );
+ const config = getConfigFromDOM();
 
  // preset common request params in the config
  config.fetch = {

dash/dash-renderer/src/AppProvider.react.tsx

@@ -7,7 +7,6 @@ import AppContainer from './AppContainer.react';
 
 const AppProvider = ({hooks}: any) => {
  const [{store}] = useState(() => new Store());
-
  return (
  <Provider store={store}>
  <AppContainer hooks={hooks} />

dash/dash-renderer/src/TreeContainer.js

@@ -4,17 +4,23 @@ import Registry from './registry';
 import {propTypeErrorHandler} from './exceptions';
 import {
  addIndex,
+ assoc,
+ assocPath,
  concat,
  dissoc,
  equals,
  isEmpty,
  isNil,
+ has,
  keys,
  map,
  mergeRight,
  pick,
  pickBy,
+ pipe,
  propOr,
+ path as rpath,
+ pathOr,
  type
 } from 'ramda';
 import {notifyObservers, updateProps} from './actions';
@@ -67,6 +73,15 @@ function createElement(element, props, extraProps, children) {
  return React.createElement(element, allProps, children);
 }
 
+function isDryComponent(obj) {
+ return (
+ type(obj) === 'Object' &&
+ has('type', obj) &&
+ has('namespace', obj) &&
+ has('props', obj)
+ );
+}
+
 const TreeContainer = memo(props => (
  <DashContext.Consumer>
  {context => (
@@ -180,6 +195,32 @@ class BaseTreeContainer extends Component {
  );
  }
 
+ wrapChildrenProp(node, childrenProp) {
+ if (Array.isArray(node)) {
+ return node.map((n, i) =>
+ isDryComponent(n)
+ ? this.createContainer(
+ this.props,
+ n,
+ concat(this.props._dashprivate_path, [
+ 'props',
+ ...childrenProp,
+ i
+ ])
+ )
+ : n
+ );
+ }
+ if (!isDryComponent(node)) {
+ return node;
+ }
+ return this.createContainer(
+ this.props,
+ node,
+ concat(this.props._dashprivate_path, ['props', ...childrenProp])
+ );
+ }
+
  getComponent(_dashprivate_layout, children, loading_state, setProps) {
  const {_dashprivate_config, _dashprivate_dispatch, _dashprivate_error} =
  this.props;
@@ -195,7 +236,86 @@ class BaseTreeContainer extends Component {
 
  const element = Registry.resolve(_dashprivate_layout);
 
- const props = dissoc('children', _dashprivate_layout.props);
+ // Hydrate components props
+ const childrenProps = pathOr(
+ [],
+ [
+ 'children_props',
+ _dashprivate_layout.namespace,
+ _dashprivate_layout.type
+ ],
+ _dashprivate_config
+ );
+ const props = pipe(
+ dissoc('children'),
+ ...childrenProps
+ .map(childrenProp => {
+ if (childrenProp.includes('.')) {
+ let path = childrenProp.split('.');
+ let node;
+ let nodeValue;
+ if (childrenProp.includes('[]')) {
+ let frontPath = [],
+ backPath = [],
+ found = false;
+ path.forEach(p => {
+ if (!found) {
+ if (p.includes('[]')) {
+ found = true;
+ frontPath.push(p.replace('[]', ''));
+ } else {
+ frontPath.push(p);
+ }
+ } else {
+ backPath.push(p);
+ }
+ });
+
+ node = rpath(frontPath, _dashprivate_layout.props);
+ if (node === undefined) {
+ return;
+ }
+ if (!node.length) {
+ return assocPath(frontPath, node);
+ }
+ const firstNode = rpath(backPath, node[0]);
+ if (!firstNode) {
+ return assocPath(frontPath, node);
+ }
+ nodeValue = node.map((element, i) => {
+ const elementPath = concat(
+ frontPath,
+ concat([i], backPath)
+ );
+ return assocPath(
+ backPath,
+ this.wrapChildrenProp(
+ rpath(backPath, element),
+ elementPath
+ ),
+ element
+ );
+ });
+ path = frontPath;
+ } else {
+ node = rpath(path, _dashprivate_layout.props);
+ if (node === undefined) {
+ return;
+ }
+ nodeValue = this.wrapChildrenProp(node, path);
+ }
+ return assocPath(path, nodeValue);
+ }
+ const node = _dashprivate_layout.props[childrenProp];
+ if (node !== undefined) {
+ return assoc(
+ childrenProp,
+ this.wrapChildrenProp(node, [childrenProp])
+ );
+ }
+ })
+ .filter(e => e !== undefined)
+ )(_dashprivate_layout.props);
 
  if (type(props.id) === 'Object') {
  // Turn object ids (for wildcards) into unique strings.

dash/dash-renderer/src/actions/utils.js

@@ -1,4 +1,4 @@
-import {append, concat, has, path, type} from 'ramda';
+import {append, concat, has, path, pathOr, type, path as rpath} from 'ramda';
 
 /*
  * requests_pathname_prefix is the new config parameter introduced in
@@ -27,11 +27,24 @@ export function urlBase(config) {
 const propsChildren = ['props', 'children'];
 
 // crawl a layout object or children array, apply a function on every object
-export const crawlLayout = (object, func, currentPath = []) => {
+export const crawlLayout = (
+ object,
+ func,
+ currentPath = [],
+ extraPath = undefined
+) => {
  if (Array.isArray(object)) {
  // children array
  object.forEach((child, i) => {
- crawlLayout(child, func, append(i, currentPath));
+ if (extraPath) {
+ crawlLayout(
+ rpath(extraPath, child),
+ func,
+ concat(currentPath, concat([i], extraPath))
+ );
+ } else {
+ crawlLayout(child, func, append(i, currentPath));
+ }
  });
  } else if (type(object) === 'Object') {
  func(object, currentPath);
@@ -41,6 +54,32 @@ export const crawlLayout = (object, func, currentPath = []) => {
  const newPath = concat(currentPath, propsChildren);
  crawlLayout(children, func, newPath);
  }
+
+ const childrenProps = pathOr(
+ [],
+ [object.namespace, object.type],
+ window.__dashprivate_childrenProps
+ );
+ childrenProps.forEach(childrenProp => {
+ if (childrenProp.includes('[]')) {
+ let [frontPath, backPath] = childrenProp
+ .split('[]')
+ .map(p => p.split('.').filter(e => e));
+ const front = concat(['props'], frontPath);
+ const basePath = concat(currentPath, front);
+ crawlLayout(path(front, object), func, basePath, backPath);
+ } else {
+ const newPath = concat(currentPath, [
+ 'props',
+ ...childrenProp.split('.')
+ ]);
+ crawlLayout(
+ path(['props', ...childrenProp.split('.')], object),
+ func,
+ newPath
+ );
+ }
+ });
  }
 };
 

@plotly/dash-test-components/src/components/ComponentAsProp.js

@@ -0,0 +1,34 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+
+
+const ComponentAsProp = (props) => {
+ const { element, id, shapeEl, list_of_shapes } = props;
+ return (
+ <div id={id}>
+ {shapeEl && shapeEl.header}
+ {element}
+ {shapeEl && shapeEl.footer}
+ {list_of_shapes && <ul>{list_of_shapes.map(e => <li key={e.value}>{e.label}</li>)}</ul> }
+ </div>
+ )
+}
+
+ComponentAsProp.propTypes = {
+ id: PropTypes.string,
+ element: PropTypes.node,
+
+ shapeEl: PropTypes.shape({
+ header: PropTypes.node,
+ footer: PropTypes.node,
+ }),
+
+ list_of_shapes: PropTypes.arrayOf(
+ PropTypes.exact({
+ label: PropTypes.node,
+ value: PropTypes.number,
+ })
+ )
+}
+
+export default ComponentAsProp;

@plotly/dash-test-components/src/index.js

@@ -6,6 +6,7 @@ import MyPersistedComponent from './components/MyPersistedComponent';
 import MyPersistedComponentNested from './components/MyPersistedComponentNested';
 import StyledComponent from './components/StyledComponent';
 import WidthComponent from './components/WidthComponent';
+import ComponentAsProp from './components/ComponentAsProp';
 
 export {
  AsyncComponent,
@@ -15,5 +16,6 @@ export {
  MyPersistedComponent,
  MyPersistedComponentNested,
  StyledComponent,
- WidthComponent
+ WidthComponent,
+ ComponentAsProp,
 };

CHANGELOG.md

@@ -19,6 +19,7 @@ This project adheres to [Semantic Versioning](https://semver.org/).
 ### Added
 
 - [#2049](https://github.com/plotly/dash/pull/2043) Added `wait_for_class_to_equal` and `wait_for_contains_class` methods to `dash.testing`
+- [#1965](https://github.com/plotly/dash/pull/1965) Add component as props.
 
 ## [2.4.1] - 2022-05-11
 

components/dash-core-components/src/components/Checklist.react.js

@@ -104,11 +104,7 @@ Checklist.propTypes = {
  /**
  * The option's label
  */
- label: PropTypes.oneOfType([
- PropTypes.string,
- PropTypes.number,
- PropTypes.bool,
- ]).isRequired,
+ label: PropTypes.node.isRequired,
 
  /**
  * The value of the option. This value

components/dash-core-components/src/components/Dropdown.react.js

@@ -56,8 +56,7 @@ Dropdown.propTypes = {
  /**
  * The option's label
  */
- label: PropTypes.oneOfType([PropTypes.string, PropTypes.number])
- .isRequired,
+ label: PropTypes.node.isRequired,
 
  /**
  * The value of the option. This value

components/dash-core-components/src/components/RadioItems.react.js

@@ -99,11 +99,7 @@ RadioItems.propTypes = {
  /**
  * The option's label
  */
- label: PropTypes.oneOfType([
- PropTypes.string,
- PropTypes.number,
- PropTypes.bool,
- ]).isRequired,
+ label: PropTypes.node.isRequired,
 
  /**
  * The value of the option. This value

components/dash-core-components/tests/integration/misc/test_dcc_components_as_props.py

@@ -0,0 +1,43 @@
+from dash import Dash, dcc, html
+
+
+def test_mdcap001_dcc_components_as_props(dash_dcc):
+ app = Dash(__name__)
+
+ app.layout = html.Div(
+ [
+ dcc.Checklist(
+ [
+ {"label": html.H2("H2 label"), "value": "h2"},
+ {"label": html.A("Link in checklist", href="#"), "value": "a"},
+ ],
+ id="checklist",
+ ),
+ dcc.RadioItems(
+ [
+ {"label": html.H3("on"), "value": "on"},
+ {"label": html.P("off"), "value": "off"},
+ ],
+ id="radio-items",
+ ),
+ dcc.Dropdown(
+ [
+ {"label": html.H4("h4"), "value": "h4"},
+ {"label": html.H6("h6"), "value": "h6"},
+ ],
+ id="dropdown",
+ ),
+ ]
+ )
+
+ dash_dcc.start_server(app)
+
+ dash_dcc.wait_for_text_to_equal("#checklist h2", "H2 label")
+ dash_dcc.wait_for_text_to_equal("#checklist a", "Link in checklist")
+
+ dash_dcc.wait_for_text_to_equal("#radio-items h3", "on")
+ dash_dcc.wait_for_text_to_equal("#radio-items p", "off")
+
+ dash_dcc.find_element("#dropdown").click()
+ dash_dcc.wait_for_text_to_equal("#dropdown h4", "h4")
+ dash_dcc.wait_for_text_to_equal("#dropdown h6", "h6")

dash/dash-renderer/src/AppContainer.react.js

@@ -5,6 +5,7 @@ import APIController from './APIController.react';
 import Loading from './components/core/Loading.react';
 import Toolbar from './components/core/Toolbar.react';
 import Reloader from './components/core/Reloader.react';
+import getConfigFromDOM from './config';
 import {setHooks, setConfig} from './actions/index';
 import {type, memoizeWith, identity} from 'ramda';
 
@@ -35,9 +36,7 @@ class UnconnectedAppContainer extends React.Component {
 
  UNSAFE_componentWillMount() {
  const {dispatch} = this.props;
- const config = JSON.parse(
- document.getElementById('_dash-config').textContent
- );
+ const config = getConfigFromDOM();
 
  // preset common request params in the config
  config.fetch = {

dash/dash-renderer/src/AppProvider.react.tsx

@@ -7,7 +7,6 @@ import AppContainer from './AppContainer.react';
 
 const AppProvider = ({hooks}: any) => {
  const [{store}] = useState(() => new Store());
-
  return (
  <Provider store={store}>
  <AppContainer hooks={hooks} />

dash/dash-renderer/src/TreeContainer.js

@@ -4,17 +4,23 @@ import Registry from './registry';
 import {propTypeErrorHandler} from './exceptions';
 import {
  addIndex,
+ assoc,
+ assocPath,
  concat,
  dissoc,
  equals,
  isEmpty,
  isNil,
+ has,
  keys,
  map,
  mergeRight,
  pick,
  pickBy,
+ pipe,
  propOr,
+ path as rpath,
+ pathOr,
  type
 } from 'ramda';
 import {notifyObservers, updateProps} from './actions';
@@ -67,6 +73,15 @@ function createElement(element, props, extraProps, children) {
  return React.createElement(element, allProps, children);
 }
 
+function isDryComponent(obj) {
+ return (
+ type(obj) === 'Object' &&
+ has('type', obj) &&
+ has('namespace', obj) &&
+ has('props', obj)
+ );
+}
+
 const TreeContainer = memo(props => (
  <DashContext.Consumer>
  {context => (
@@ -180,6 +195,32 @@ class BaseTreeContainer extends Component {
  );
  }
 
+ wrapChildrenProp(node, childrenProp) {
+ if (Array.isArray(node)) {
+ return node.map((n, i) =>
+ isDryComponent(n)
+ ? this.createContainer(
+ this.props,
+ n,
+ concat(this.props._dashprivate_path, [
+ 'props',
+ ...childrenProp,
+ i
+ ])
+ )
+ : n
+ );
+ }
+ if (!isDryComponent(node)) {
+ return node;
+ }
+ return this.createContainer(
+ this.props,
+ node,
+ concat(this.props._dashprivate_path, ['props', ...childrenProp])
+ );
+ }
+
  getComponent(_dashprivate_layout, children, loading_state, setProps) {
  const {_dashprivate_config, _dashprivate_dispatch, _dashprivate_error} =
  this.props;
@@ -195,7 +236,86 @@ class BaseTreeContainer extends Component {
 
  const element = Registry.resolve(_dashprivate_layout);
 
- const props = dissoc('children', _dashprivate_layout.props);
+ // Hydrate components props
+ const childrenProps = pathOr(
+ [],
+ [
+ 'children_props',
+ _dashprivate_layout.namespace,
+ _dashprivate_layout.type
+ ],
+ _dashprivate_config
+ );
+ const props = pipe(
+ dissoc('children'),
+ ...childrenProps
+ .map(childrenProp => {
+ if (childrenProp.includes('.')) {
+ let path = childrenProp.split('.');
+ let node;
+ let nodeValue;
+ if (childrenProp.includes('[]')) {
+ let frontPath = [],
+ backPath = [],
+ found = false;
+ path.forEach(p => {
+ if (!found) {
+ if (p.includes('[]')) {
+ found = true;
+ frontPath.push(p.replace('[]', ''));
+ } else {
+ frontPath.push(p);
+ }
+ } else {
+ backPath.push(p);
+ }
+ });
+
+ node = rpath(frontPath, _dashprivate_layout.props);
+ if (node === undefined) {
+ return;
+ }
+ if (!node.length) {
+ return assocPath(frontPath, node);
+ }
+ const firstNode = rpath(backPath, node[0]);
+ if (!firstNode) {
+ return assocPath(frontPath, node);
+ }
+ nodeValue = node.map((element, i) => {
+ const elementPath = concat(
+ frontPath,
+ concat([i], backPath)
+ );
+ return assocPath(
+ backPath,
+ this.wrapChildrenProp(
+ rpath(backPath, element),
+ elementPath
+ ),
+ element
+ );
+ });
+ path = frontPath;
+ } else {
+ node = rpath(path, _dashprivate_layout.props);
+ if (node === undefined) {
+ return;
+ }
+ nodeValue = this.wrapChildrenProp(node, path);
+ }
+ return assocPath(path, nodeValue);
+ }
+ const node = _dashprivate_layout.props[childrenProp];
+ if (node !== undefined) {
+ return assoc(
+ childrenProp,
+ this.wrapChildrenProp(node, [childrenProp])
+ );
+ }
+ })
+ .filter(e => e !== undefined)
+ )(_dashprivate_layout.props);
 
  if (type(props.id) === 'Object') {
  // Turn object ids (for wildcards) into unique strings.

dash/dash-renderer/src/actions/utils.js

@@ -1,4 +1,4 @@
-import {append, concat, has, path, type} from 'ramda';
+import {append, concat, has, path, pathOr, type, path as rpath} from 'ramda';
 
 /*
  * requests_pathname_prefix is the new config parameter introduced in
@@ -27,11 +27,24 @@ export function urlBase(config) {
 const propsChildren = ['props', 'children'];
 
 // crawl a layout object or children array, apply a function on every object
-export const crawlLayout = (object, func, currentPath = []) => {
+export const crawlLayout = (
+ object,
+ func,
+ currentPath = [],
+ extraPath = undefined
+) => {
  if (Array.isArray(object)) {
  // children array
  object.forEach((child, i) => {
- crawlLayout(child, func, append(i, currentPath));
+ if (extraPath) {
+ crawlLayout(
+ rpath(extraPath, child),
+ func,
+ concat(currentPath, concat([i], extraPath))
+ );
+ } else {
+ crawlLayout(child, func, append(i, currentPath));
+ }
  });
  } else if (type(object) === 'Object') {
  func(object, currentPath);
@@ -41,6 +54,32 @@ export const crawlLayout = (object, func, currentPath = []) => {
  const newPath = concat(currentPath, propsChildren);
  crawlLayout(children, func, newPath);
  }
+
+ const childrenProps = pathOr(
+ [],
+ [object.namespace, object.type],
+ window.__dashprivate_childrenProps
+ );
+ childrenProps.forEach(childrenProp => {
+ if (childrenProp.includes('[]')) {
+ let [frontPath, backPath] = childrenProp
+ .split('[]')
+ .map(p => p.split('.').filter(e => e));
+ const front = concat(['props'], frontPath);
+ const basePath = concat(currentPath, front);
+ crawlLayout(path(front, object), func, basePath, backPath);
+ } else {
+ const newPath = concat(currentPath, [
+ 'props',
+ ...childrenProp.split('.')
+ ]);
+ crawlLayout(
+ path(['props', ...childrenProp.split('.')], object),
+ func,
+ newPath
+ );
+ }
+ });
  }
 };
 

@plotly/dash-test-components/src/components/ComponentAsProp.js

@@ -0,0 +1,34 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+
+
+const ComponentAsProp = (props) => {
+ const { element, id, shapeEl, list_of_shapes } = props;
+ return (
+ <div id={id}>
+ {shapeEl && shapeEl.header}
+ {element}
+ {shapeEl && shapeEl.footer}
+ {list_of_shapes && <ul>{list_of_shapes.map(e => <li key={e.value}>{e.label}</li>)}</ul> }
+ </div>
+ )
+}
+
+ComponentAsProp.propTypes = {
+ id: PropTypes.string,
+ element: PropTypes.node,
+
+ shapeEl: PropTypes.shape({
+ header: PropTypes.node,
+ footer: PropTypes.node,
+ }),
+
+ list_of_shapes: PropTypes.arrayOf(
+ PropTypes.exact({
+ label: PropTypes.node,
+ value: PropTypes.number,
+ })
+ )
+}
+
+export default ComponentAsProp;

@plotly/dash-test-components/src/index.js

@@ -6,6 +6,7 @@ import MyPersistedComponent from './components/MyPersistedComponent';
 import MyPersistedComponentNested from './components/MyPersistedComponentNested';
 import StyledComponent from './components/StyledComponent';
 import WidthComponent from './components/WidthComponent';
+import ComponentAsProp from './components/ComponentAsProp';
 
 export {
  AsyncComponent,
@@ -15,5 +16,6 @@ export {
  MyPersistedComponent,
  MyPersistedComponentNested,
  StyledComponent,
- WidthComponent
+ WidthComponent,
+ ComponentAsProp,
 };

CHANGELOG.md

@@ -19,6 +19,7 @@ This project adheres to [Semantic Versioning](https://semver.org/).
 ### Added
 
 - [#2049](https://github.com/plotly/dash/pull/2043) Added `wait_for_class_to_equal` and `wait_for_contains_class` methods to `dash.testing`
+- [#1965](https://github.com/plotly/dash/pull/1965) Add component as props.
 
 ## [2.4.1] - 2022-05-11
 

components/dash-core-components/src/components/Checklist.react.js

@@ -104,11 +104,7 @@ Checklist.propTypes = {
  /**
  * The option's label
  */
- label: PropTypes.oneOfType([
- PropTypes.string,
- PropTypes.number,
- PropTypes.bool,
- ]).isRequired,
+ label: PropTypes.node.isRequired,
 
  /**
  * The value of the option. This value

components/dash-core-components/src/components/Dropdown.react.js

@@ -56,8 +56,7 @@ Dropdown.propTypes = {
  /**
  * The option's label
  */
- label: PropTypes.oneOfType([PropTypes.string, PropTypes.number])
- .isRequired,
+ label: PropTypes.node.isRequired,
 
  /**
  * The value of the option. This value

components/dash-core-components/src/components/RadioItems.react.js

@@ -99,11 +99,7 @@ RadioItems.propTypes = {
  /**
  * The option's label
  */
- label: PropTypes.oneOfType([
- PropTypes.string,
- PropTypes.number,
- PropTypes.bool,
- ]).isRequired,
+ label: PropTypes.node.isRequired,
 
  /**
  * The value of the option. This value

components/dash-core-components/tests/integration/misc/test_dcc_components_as_props.py

@@ -0,0 +1,43 @@
+from dash import Dash, dcc, html
+
+
+def test_mdcap001_dcc_components_as_props(dash_dcc):
+ app = Dash(__name__)
+
+ app.layout = html.Div(
+ [
+ dcc.Checklist(
+ [
+ {"label": html.H2("H2 label"), "value": "h2"},
+ {"label": html.A("Link in checklist", href="#"), "value": "a"},
+ ],
+ id="checklist",
+ ),
+ dcc.RadioItems(
+ [
+ {"label": html.H3("on"), "value": "on"},
+ {"label": html.P("off"), "value": "off"},
+ ],
+ id="radio-items",
+ ),
+ dcc.Dropdown(
+ [
+ {"label": html.H4("h4"), "value": "h4"},
+ {"label": html.H6("h6"), "value": "h6"},
+ ],
+ id="dropdown",
+ ),
+ ]
+ )
+
+ dash_dcc.start_server(app)
+
+ dash_dcc.wait_for_text_to_equal("#checklist h2", "H2 label")
+ dash_dcc.wait_for_text_to_equal("#checklist a", "Link in checklist")
+
+ dash_dcc.wait_for_text_to_equal("#radio-items h3", "on")
+ dash_dcc.wait_for_text_to_equal("#radio-items p", "off")
+
+ dash_dcc.find_element("#dropdown").click()
+ dash_dcc.wait_for_text_to_equal("#dropdown h4", "h4")
+ dash_dcc.wait_for_text_to_equal("#dropdown h6", "h6")

dash/dash-renderer/src/AppContainer.react.js

@@ -5,6 +5,7 @@ import APIController from './APIController.react';
 import Loading from './components/core/Loading.react';
 import Toolbar from './components/core/Toolbar.react';
 import Reloader from './components/core/Reloader.react';
+import getConfigFromDOM from './config';
 import {setHooks, setConfig} from './actions/index';
 import {type, memoizeWith, identity} from 'ramda';
 
@@ -35,9 +36,7 @@ class UnconnectedAppContainer extends React.Component {
 
  UNSAFE_componentWillMount() {
  const {dispatch} = this.props;
- const config = JSON.parse(
- document.getElementById('_dash-config').textContent
- );
+ const config = getConfigFromDOM();
 
  // preset common request params in the config
  config.fetch = {

dash/dash-renderer/src/AppProvider.react.tsx

@@ -7,7 +7,6 @@ import AppContainer from './AppContainer.react';
 
 const AppProvider = ({hooks}: any) => {
  const [{store}] = useState(() => new Store());
-
  return (
  <Provider store={store}>
  <AppContainer hooks={hooks} />

dash/dash-renderer/src/TreeContainer.js

@@ -4,17 +4,23 @@ import Registry from './registry';
 import {propTypeErrorHandler} from './exceptions';
 import {
  addIndex,
+ assoc,
+ assocPath,
  concat,
  dissoc,
  equals,
  isEmpty,
  isNil,
+ has,
  keys,
  map,
  mergeRight,
  pick,
  pickBy,
+ pipe,
  propOr,
+ path as rpath,
+ pathOr,
  type
 } from 'ramda';
 import {notifyObservers, updateProps} from './actions';
@@ -67,6 +73,15 @@ function createElement(element, props, extraProps, children) {
  return React.createElement(element, allProps, children);
 }
 
+function isDryComponent(obj) {
+ return (
+ type(obj) === 'Object' &&
+ has('type', obj) &&
+ has('namespace', obj) &&
+ has('props', obj)
+ );
+}
+
 const TreeContainer = memo(props => (
  <DashContext.Consumer>
  {context => (
@@ -180,6 +195,32 @@ class BaseTreeContainer extends Component {
  );
  }
 
+ wrapChildrenProp(node, childrenProp) {
+ if (Array.isArray(node)) {
+ return node.map((n, i) =>
+ isDryComponent(n)
+ ? this.createContainer(
+ this.props,
+ n,
+ concat(this.props._dashprivate_path, [
+ 'props',
+ ...childrenProp,
+ i
+ ])
+ )
+ : n
+ );
+ }
+ if (!isDryComponent(node)) {
+ return node;
+ }
+ return this.createContainer(
+ this.props,
+ node,
+ concat(this.props._dashprivate_path, ['props', ...childrenProp])
+ );
+ }
+
  getComponent(_dashprivate_layout, children, loading_state, setProps) {
  const {_dashprivate_config, _dashprivate_dispatch, _dashprivate_error} =
  this.props;
@@ -195,7 +236,86 @@ class BaseTreeContainer extends Component {
 
  const element = Registry.resolve(_dashprivate_layout);
 
- const props = dissoc('children', _dashprivate_layout.props);
+ // Hydrate components props
+ const childrenProps = pathOr(
+ [],
+ [
+ 'children_props',
+ _dashprivate_layout.namespace,
+ _dashprivate_layout.type
+ ],
+ _dashprivate_config
+ );
+ const props = pipe(
+ dissoc('children'),
+ ...childrenProps
+ .map(childrenProp => {
+ if (childrenProp.includes('.')) {
+ let path = childrenProp.split('.');
+ let node;
+ let nodeValue;
+ if (childrenProp.includes('[]')) {
+ let frontPath = [],
+ backPath = [],
+ found = false;
+ path.forEach(p => {
+ if (!found) {
+ if (p.includes('[]')) {
+ found = true;
+ frontPath.push(p.replace('[]', ''));
+ } else {
+ frontPath.push(p);
+ }
+ } else {
+ backPath.push(p);
+ }
+ });
+
+ node = rpath(frontPath, _dashprivate_layout.props);
+ if (node === undefined) {
+ return;
+ }
+ if (!node.length) {
+ return assocPath(frontPath, node);
+ }
+ const firstNode = rpath(backPath, node[0]);
+ if (!firstNode) {
+ return assocPath(frontPath, node);
+ }
+ nodeValue = node.map((element, i) => {
+ const elementPath = concat(
+ frontPath,
+ concat([i], backPath)
+ );
+ return assocPath(
+ backPath,
+ this.wrapChildrenProp(
+ rpath(backPath, element),
+ elementPath
+ ),
+ element
+ );
+ });
+ path = frontPath;
+ } else {
+ node = rpath(path, _dashprivate_layout.props);
+ if (node === undefined) {
+ return;
+ }
+ nodeValue = this.wrapChildrenProp(node, path);
+ }
+ return assocPath(path, nodeValue);
+ }
+ const node = _dashprivate_layout.props[childrenProp];
+ if (node !== undefined) {
+ return assoc(
+ childrenProp,
+ this.wrapChildrenProp(node, [childrenProp])
+ );
+ }
+ })
+ .filter(e => e !== undefined)
+ )(_dashprivate_layout.props);
 
  if (type(props.id) === 'Object') {
  // Turn object ids (for wildcards) into unique strings.

dash/dash-renderer/src/actions/utils.js

@@ -1,4 +1,4 @@
-import {append, concat, has, path, type} from 'ramda';
+import {append, concat, has, path, pathOr, type, path as rpath} from 'ramda';
 
 /*
  * requests_pathname_prefix is the new config parameter introduced in
@@ -27,11 +27,24 @@ export function urlBase(config) {
 const propsChildren = ['props', 'children'];
 
 // crawl a layout object or children array, apply a function on every object
-export const crawlLayout = (object, func, currentPath = []) => {
+export const crawlLayout = (
+ object,
+ func,
+ currentPath = [],
+ extraPath = undefined
+) => {
  if (Array.isArray(object)) {
  // children array
  object.forEach((child, i) => {
- crawlLayout(child, func, append(i, currentPath));
+ if (extraPath) {
+ crawlLayout(
+ rpath(extraPath, child),
+ func,
+ concat(currentPath, concat([i], extraPath))
+ );
+ } else {
+ crawlLayout(child, func, append(i, currentPath));
+ }
  });
  } else if (type(object) === 'Object') {
  func(object, currentPath);
@@ -41,6 +54,32 @@ export const crawlLayout = (object, func, currentPath = []) => {
  const newPath = concat(currentPath, propsChildren);
  crawlLayout(children, func, newPath);
  }
+
+ const childrenProps = pathOr(
+ [],
+ [object.namespace, object.type],
+ window.__dashprivate_childrenProps
+ );
+ childrenProps.forEach(childrenProp => {
+ if (childrenProp.includes('[]')) {
+ let [frontPath, backPath] = childrenProp
+ .split('[]')
+ .map(p => p.split('.').filter(e => e));
+ const front = concat(['props'], frontPath);
+ const basePath = concat(currentPath, front);
+ crawlLayout(path(front, object), func, basePath, backPath);
+ } else {
+ const newPath = concat(currentPath, [
+ 'props',
+ ...childrenProp.split('.')
+ ]);
+ crawlLayout(
+ path(['props', ...childrenProp.split('.')], object),
+ func,
+ newPath
+ );
+ }
+ });
  }
 };
 

@plotly/dash-test-components/src/components/ComponentAsProp.js

@@ -0,0 +1,34 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+
+
+const ComponentAsProp = (props) => {
+ const { element, id, shapeEl, list_of_shapes } = props;
+ return (
+ <div id={id}>
+ {shapeEl && shapeEl.header}
+ {element}
+ {shapeEl && shapeEl.footer}
+ {list_of_shapes && <ul>{list_of_shapes.map(e => <li key={e.value}>{e.label}</li>)}</ul> }
+ </div>
+ )
+}
+
+ComponentAsProp.propTypes = {
+ id: PropTypes.string,
+ element: PropTypes.node,
+
+ shapeEl: PropTypes.shape({
+ header: PropTypes.node,
+ footer: PropTypes.node,
+ }),
+
+ list_of_shapes: PropTypes.arrayOf(
+ PropTypes.exact({
+ label: PropTypes.node,
+ value: PropTypes.number,
+ })
+ )
+}
+
+export default ComponentAsProp;

@plotly/dash-test-components/src/index.js

@@ -6,6 +6,7 @@ import MyPersistedComponent from './components/MyPersistedComponent';
 import MyPersistedComponentNested from './components/MyPersistedComponentNested';
 import StyledComponent from './components/StyledComponent';
 import WidthComponent from './components/WidthComponent';
+import ComponentAsProp from './components/ComponentAsProp';
 
 export {
  AsyncComponent,
@@ -15,5 +16,6 @@ export {
  MyPersistedComponent,
  MyPersistedComponentNested,
  StyledComponent,
- WidthComponent
+ WidthComponent,
+ ComponentAsProp,
 };

CHANGELOG.md

@@ -19,6 +19,7 @@ This project adheres to [Semantic Versioning](https://semver.org/).
 ### Added
 
 - [#2049](https://github.com/plotly/dash/pull/2043) Added `wait_for_class_to_equal` and `wait_for_contains_class` methods to `dash.testing`
+- [#1965](https://github.com/plotly/dash/pull/1965) Add component as props.
 
 ## [2.4.1] - 2022-05-11
 

components/dash-core-components/src/components/Checklist.react.js

@@ -104,11 +104,7 @@ Checklist.propTypes = {
  /**
  * The option's label
  */
- label: PropTypes.oneOfType([
- PropTypes.string,
- PropTypes.number,
- PropTypes.bool,
- ]).isRequired,
+ label: PropTypes.node.isRequired,
 
  /**
  * The value of the option. This value

components/dash-core-components/src/components/Dropdown.react.js

@@ -56,8 +56,7 @@ Dropdown.propTypes = {
  /**
  * The option's label
  */
- label: PropTypes.oneOfType([PropTypes.string, PropTypes.number])
- .isRequired,
+ label: PropTypes.node.isRequired,
 
  /**
  * The value of the option. This value

components/dash-core-components/src/components/RadioItems.react.js

@@ -99,11 +99,7 @@ RadioItems.propTypes = {
  /**
  * The option's label
  */
- label: PropTypes.oneOfType([
- PropTypes.string,
- PropTypes.number,
- PropTypes.bool,
- ]).isRequired,
+ label: PropTypes.node.isRequired,
 
  /**
  * The value of the option. This value

components/dash-core-components/tests/integration/misc/test_dcc_components_as_props.py

@@ -0,0 +1,43 @@
+from dash import Dash, dcc, html
+
+
+def test_mdcap001_dcc_components_as_props(dash_dcc):
+ app = Dash(__name__)
+
+ app.layout = html.Div(
+ [
+ dcc.Checklist(
+ [
+ {"label": html.H2("H2 label"), "value": "h2"},
+ {"label": html.A("Link in checklist", href="#"), "value": "a"},
+ ],
+ id="checklist",
+ ),
+ dcc.RadioItems(
+ [
+ {"label": html.H3("on"), "value": "on"},
+ {"label": html.P("off"), "value": "off"},
+ ],
+ id="radio-items",
+ ),
+ dcc.Dropdown(
+ [
+ {"label": html.H4("h4"), "value": "h4"},
+ {"label": html.H6("h6"), "value": "h6"},
+ ],
+ id="dropdown",
+ ),
+ ]
+ )
+
+ dash_dcc.start_server(app)
+
+ dash_dcc.wait_for_text_to_equal("#checklist h2", "H2 label")
+ dash_dcc.wait_for_text_to_equal("#checklist a", "Link in checklist")
+
+ dash_dcc.wait_for_text_to_equal("#radio-items h3", "on")
+ dash_dcc.wait_for_text_to_equal("#radio-items p", "off")
+
+ dash_dcc.find_element("#dropdown").click()
+ dash_dcc.wait_for_text_to_equal("#dropdown h4", "h4")
+ dash_dcc.wait_for_text_to_equal("#dropdown h6", "h6")

dash/dash-renderer/src/AppContainer.react.js

@@ -5,6 +5,7 @@ import APIController from './APIController.react';
 import Loading from './components/core/Loading.react';
 import Toolbar from './components/core/Toolbar.react';
 import Reloader from './components/core/Reloader.react';
+import getConfigFromDOM from './config';
 import {setHooks, setConfig} from './actions/index';
 import {type, memoizeWith, identity} from 'ramda';
 
@@ -35,9 +36,7 @@ class UnconnectedAppContainer extends React.Component {
 
  UNSAFE_componentWillMount() {
  const {dispatch} = this.props;
- const config = JSON.parse(
- document.getElementById('_dash-config').textContent
- );
+ const config = getConfigFromDOM();
 
  // preset common request params in the config
  config.fetch = {

dash/dash-renderer/src/AppProvider.react.tsx

@@ -7,7 +7,6 @@ import AppContainer from './AppContainer.react';
 
 const AppProvider = ({hooks}: any) => {
  const [{store}] = useState(() => new Store());
-
  return (
  <Provider store={store}>
  <AppContainer hooks={hooks} />

dash/dash-renderer/src/TreeContainer.js

@@ -4,17 +4,23 @@ import Registry from './registry';
 import {propTypeErrorHandler} from './exceptions';
 import {
  addIndex,
+ assoc,
+ assocPath,
  concat,
  dissoc,
  equals,
  isEmpty,
  isNil,
+ has,
  keys,
  map,
  mergeRight,
  pick,
  pickBy,
+ pipe,
  propOr,
+ path as rpath,
+ pathOr,
  type
 } from 'ramda';
 import {notifyObservers, updateProps} from './actions';
@@ -67,6 +73,15 @@ function createElement(element, props, extraProps, children) {
  return React.createElement(element, allProps, children);
 }
 
+function isDryComponent(obj) {
+ return (
+ type(obj) === 'Object' &&
+ has('type', obj) &&
+ has('namespace', obj) &&
+ has('props', obj)
+ );
+}
+
 const TreeContainer = memo(props => (
  <DashContext.Consumer>
  {context => (
@@ -180,6 +195,32 @@ class BaseTreeContainer extends Component {
  );
  }
 
+ wrapChildrenProp(node, childrenProp) {
+ if (Array.isArray(node)) {
+ return node.map((n, i) =>
+ isDryComponent(n)
+ ? this.createContainer(
+ this.props,
+ n,
+ concat(this.props._dashprivate_path, [
+ 'props',
+ ...childrenProp,
+ i
+ ])
+ )
+ : n
+ );
+ }
+ if (!isDryComponent(node)) {
+ return node;
+ }
+ return this.createContainer(
+ this.props,
+ node,
+ concat(this.props._dashprivate_path, ['props', ...childrenProp])
+ );
+ }
+
  getComponent(_dashprivate_layout, children, loading_state, setProps) {
  const {_dashprivate_config, _dashprivate_dispatch, _dashprivate_error} =
  this.props;
@@ -195,7 +236,86 @@ class BaseTreeContainer extends Component {
 
  const element = Registry.resolve(_dashprivate_layout);
 
- const props = dissoc('children', _dashprivate_layout.props);
+ // Hydrate components props
+ const childrenProps = pathOr(
+ [],
+ [
+ 'children_props',
+ _dashprivate_layout.namespace,
+ _dashprivate_layout.type
+ ],
+ _dashprivate_config
+ );
+ const props = pipe(
+ dissoc('children'),
+ ...childrenProps
+ .map(childrenProp => {
+ if (childrenProp.includes('.')) {
+ let path = childrenProp.split('.');
+ let node;
+ let nodeValue;
+ if (childrenProp.includes('[]')) {
+ let frontPath = [],
+ backPath = [],
+ found = false;
+ path.forEach(p => {
+ if (!found) {
+ if (p.includes('[]')) {
+ found = true;
+ frontPath.push(p.replace('[]', ''));
+ } else {
+ frontPath.push(p);
+ }
+ } else {
+ backPath.push(p);
+ }
+ });
+
+ node = rpath(frontPath, _dashprivate_layout.props);
+ if (node === undefined) {
+ return;
+ }
+ if (!node.length) {
+ return assocPath(frontPath, node);
+ }
+ const firstNode = rpath(backPath, node[0]);
+ if (!firstNode) {
+ return assocPath(frontPath, node);
+ }
+ nodeValue = node.map((element, i) => {
+ const elementPath = concat(
+ frontPath,
+ concat([i], backPath)
+ );
+ return assocPath(
+ backPath,
+ this.wrapChildrenProp(
+ rpath(backPath, element),
+ elementPath
+ ),
+ element
+ );
+ });
+ path = frontPath;
+ } else {
+ node = rpath(path, _dashprivate_layout.props);
+ if (node === undefined) {
+ return;
+ }
+ nodeValue = this.wrapChildrenProp(node, path);
+ }
+ return assocPath(path, nodeValue);
+ }
+ const node = _dashprivate_layout.props[childrenProp];
+ if (node !== undefined) {
+ return assoc(
+ childrenProp,
+ this.wrapChildrenProp(node, [childrenProp])
+ );
+ }
+ })
+ .filter(e => e !== undefined)
+ )(_dashprivate_layout.props);
 
  if (type(props.id) === 'Object') {
  // Turn object ids (for wildcards) into unique strings.

dash/dash-renderer/src/actions/utils.js

@@ -1,4 +1,4 @@
-import {append, concat, has, path, type} from 'ramda';
+import {append, concat, has, path, pathOr, type, path as rpath} from 'ramda';
 
 /*
  * requests_pathname_prefix is the new config parameter introduced in
@@ -27,11 +27,24 @@ export function urlBase(config) {
 const propsChildren = ['props', 'children'];
 
 // crawl a layout object or children array, apply a function on every object
-export const crawlLayout = (object, func, currentPath = []) => {
+export const crawlLayout = (
+ object,
+ func,
+ currentPath = [],
+ extraPath = undefined
+) => {
  if (Array.isArray(object)) {
  // children array
  object.forEach((child, i) => {
- crawlLayout(child, func, append(i, currentPath));
+ if (extraPath) {
+ crawlLayout(
+ rpath(extraPath, child),
+ func,
+ concat(currentPath, concat([i], extraPath))
+ );
+ } else {
+ crawlLayout(child, func, append(i, currentPath));
+ }
  });
  } else if (type(object) === 'Object') {
  func(object, currentPath);
@@ -41,6 +54,32 @@ export const crawlLayout = (object, func, currentPath = []) => {
  const newPath = concat(currentPath, propsChildren);
  crawlLayout(children, func, newPath);
  }
+
+ const childrenProps = pathOr(
+ [],
+ [object.namespace, object.type],
+ window.__dashprivate_childrenProps
+ );
+ childrenProps.forEach(childrenProp => {
+ if (childrenProp.includes('[]')) {
+ let [frontPath, backPath] = childrenProp
+ .split('[]')
+ .map(p => p.split('.').filter(e => e));
+ const front = concat(['props'], frontPath);
+ const basePath = concat(currentPath, front);
+ crawlLayout(path(front, object), func, basePath, backPath);
+ } else {
+ const newPath = concat(currentPath, [
+ 'props',
+ ...childrenProp.split('.')
+ ]);
+ crawlLayout(
+ path(['props', ...childrenProp.split('.')], object),
+ func,
+ newPath
+ );
+ }
+ });
  }
 };
 

@plotly/dash-test-components/src/components/ComponentAsProp.js

@@ -0,0 +1,34 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+
+
+const ComponentAsProp = (props) => {
+ const { element, id, shapeEl, list_of_shapes } = props;
+ return (
+ <div id={id}>
+ {shapeEl && shapeEl.header}
+ {element}
+ {shapeEl && shapeEl.footer}
+ {list_of_shapes && <ul>{list_of_shapes.map(e => <li key={e.value}>{e.label}</li>)}</ul> }
+ </div>
+ )
+}
+
+ComponentAsProp.propTypes = {
+ id: PropTypes.string,
+ element: PropTypes.node,
+
+ shapeEl: PropTypes.shape({
+ header: PropTypes.node,
+ footer: PropTypes.node,
+ }),
+
+ list_of_shapes: PropTypes.arrayOf(
+ PropTypes.exact({
+ label: PropTypes.node,
+ value: PropTypes.number,
+ })
+ )
+}
+
+export default ComponentAsProp;

@plotly/dash-test-components/src/index.js

@@ -6,6 +6,7 @@ import MyPersistedComponent from './components/MyPersistedComponent';
 import MyPersistedComponentNested from './components/MyPersistedComponentNested';
 import StyledComponent from './components/StyledComponent';
 import WidthComponent from './components/WidthComponent';
+import ComponentAsProp from './components/ComponentAsProp';
 
 export {
  AsyncComponent,
@@ -15,5 +16,6 @@ export {
  MyPersistedComponent,
  MyPersistedComponentNested,
  StyledComponent,
- WidthComponent
+ WidthComponent,
+ ComponentAsProp,
 };

CHANGELOG.md

@@ -19,6 +19,7 @@ This project adheres to [Semantic Versioning](https://semver.org/).
 ### Added
 
 - [#2049](https://github.com/plotly/dash/pull/2043) Added `wait_for_class_to_equal` and `wait_for_contains_class` methods to `dash.testing`
+- [#1965](https://github.com/plotly/dash/pull/1965) Add component as props.
 
 ## [2.4.1] - 2022-05-11
 

components/dash-core-components/src/components/Checklist.react.js

@@ -104,11 +104,7 @@ Checklist.propTypes = {
  /**
  * The option's label
  */
- label: PropTypes.oneOfType([
- PropTypes.string,
- PropTypes.number,
- PropTypes.bool,
- ]).isRequired,
+ label: PropTypes.node.isRequired,
 
  /**
  * The value of the option. This value

components/dash-core-components/src/components/Dropdown.react.js

@@ -56,8 +56,7 @@ Dropdown.propTypes = {
  /**
  * The option's label
  */
- label: PropTypes.oneOfType([PropTypes.string, PropTypes.number])
- .isRequired,
+ label: PropTypes.node.isRequired,
 
  /**
  * The value of the option. This value

components/dash-core-components/src/components/RadioItems.react.js

@@ -99,11 +99,7 @@ RadioItems.propTypes = {
  /**
  * The option's label
  */
- label: PropTypes.oneOfType([
- PropTypes.string,
- PropTypes.number,
- PropTypes.bool,
- ]).isRequired,
+ label: PropTypes.node.isRequired,
 
  /**
  * The value of the option. This value

components/dash-core-components/tests/integration/misc/test_dcc_components_as_props.py

@@ -0,0 +1,43 @@
+from dash import Dash, dcc, html
+
+
+def test_mdcap001_dcc_components_as_props(dash_dcc):
+ app = Dash(__name__)
+
+ app.layout = html.Div(
+ [
+ dcc.Checklist(
+ [
+ {"label": html.H2("H2 label"), "value": "h2"},
+ {"label": html.A("Link in checklist", href="#"), "value": "a"},
+ ],
+ id="checklist",
+ ),
+ dcc.RadioItems(
+ [
+ {"label": html.H3("on"), "value": "on"},
+ {"label": html.P("off"), "value": "off"},
+ ],
+ id="radio-items",
+ ),
+ dcc.Dropdown(
+ [
+ {"label": html.H4("h4"), "value": "h4"},
+ {"label": html.H6("h6"), "value": "h6"},
+ ],
+ id="dropdown",
+ ),
+ ]
+ )
+
+ dash_dcc.start_server(app)
+
+ dash_dcc.wait_for_text_to_equal("#checklist h2", "H2 label")
+ dash_dcc.wait_for_text_to_equal("#checklist a", "Link in checklist")
+
+ dash_dcc.wait_for_text_to_equal("#radio-items h3", "on")
+ dash_dcc.wait_for_text_to_equal("#radio-items p", "off")
+
+ dash_dcc.find_element("#dropdown").click()
+ dash_dcc.wait_for_text_to_equal("#dropdown h4", "h4")
+ dash_dcc.wait_for_text_to_equal("#dropdown h6", "h6")

dash/dash-renderer/src/AppContainer.react.js

@@ -5,6 +5,7 @@ import APIController from './APIController.react';
 import Loading from './components/core/Loading.react';
 import Toolbar from './components/core/Toolbar.react';
 import Reloader from './components/core/Reloader.react';
+import getConfigFromDOM from './config';
 import {setHooks, setConfig} from './actions/index';
 import {type, memoizeWith, identity} from 'ramda';
 
@@ -35,9 +36,7 @@ class UnconnectedAppContainer extends React.Component {
 
  UNSAFE_componentWillMount() {
  const {dispatch} = this.props;
- const config = JSON.parse(
- document.getElementById('_dash-config').textContent
- );
+ const config = getConfigFromDOM();
 
  // preset common request params in the config
  config.fetch = {

dash/dash-renderer/src/AppProvider.react.tsx

@@ -7,7 +7,6 @@ import AppContainer from './AppContainer.react';
 
 const AppProvider = ({hooks}: any) => {
  const [{store}] = useState(() => new Store());
-
  return (
  <Provider store={store}>
  <AppContainer hooks={hooks} />

dash/dash-renderer/src/TreeContainer.js

@@ -4,17 +4,23 @@ import Registry from './registry';
 import {propTypeErrorHandler} from './exceptions';
 import {
  addIndex,
+ assoc,
+ assocPath,
  concat,
  dissoc,
  equals,
  isEmpty,
  isNil,
+ has,
  keys,
  map,
  mergeRight,
  pick,
  pickBy,
+ pipe,
  propOr,
+ path as rpath,
+ pathOr,
  type
 } from 'ramda';
 import {notifyObservers, updateProps} from './actions';
@@ -67,6 +73,15 @@ function createElement(element, props, extraProps, children) {
  return React.createElement(element, allProps, children);
 }
 
+function isDryComponent(obj) {
+ return (
+ type(obj) === 'Object' &&
+ has('type', obj) &&
+ has('namespace', obj) &&
+ has('props', obj)
+ );
+}
+
 const TreeContainer = memo(props => (
  <DashContext.Consumer>
  {context => (
@@ -180,6 +195,32 @@ class BaseTreeContainer extends Component {
  );
  }
 
+ wrapChildrenProp(node, childrenProp) {
+ if (Array.isArray(node)) {
+ return node.map((n, i) =>
+ isDryComponent(n)
+ ? this.createContainer(
+ this.props,
+ n,
+ concat(this.props._dashprivate_path, [
+ 'props',
+ ...childrenProp,
+ i
+ ])
+ )
+ : n
+ );
+ }
+ if (!isDryComponent(node)) {
+ return node;
+ }
+ return this.createContainer(
+ this.props,
+ node,
+ concat(this.props._dashprivate_path, ['props', ...childrenProp])
+ );
+ }
+
  getComponent(_dashprivate_layout, children, loading_state, setProps) {
  const {_dashprivate_config, _dashprivate_dispatch, _dashprivate_error} =
  this.props;
@@ -195,7 +236,86 @@ class BaseTreeContainer extends Component {
 
  const element = Registry.resolve(_dashprivate_layout);
 
- const props = dissoc('children', _dashprivate_layout.props);
+ // Hydrate components props
+ const childrenProps = pathOr(
+ [],
+ [
+ 'children_props',
+ _dashprivate_layout.namespace,
+ _dashprivate_layout.type
+ ],
+ _dashprivate_config
+ );
+ const props = pipe(
+ dissoc('children'),
+ ...childrenProps
+ .map(childrenProp => {
+ if (childrenProp.includes('.')) {
+ let path = childrenProp.split('.');
+ let node;
+ let nodeValue;
+ if (childrenProp.includes('[]')) {
+ let frontPath = [],
+ backPath = [],
+ found = false;
+ path.forEach(p => {
+ if (!found) {
+ if (p.includes('[]')) {
+ found = true;
+ frontPath.push(p.replace('[]', ''));
+ } else {
+ frontPath.push(p);
+ }
+ } else {
+ backPath.push(p);
+ }
+ });
+
+ node = rpath(frontPath, _dashprivate_layout.props);
+ if (node === undefined) {
+ return;
+ }
+ if (!node.length) {
+ return assocPath(frontPath, node);
+ }
+ const firstNode = rpath(backPath, node[0]);
+ if (!firstNode) {
+ return assocPath(frontPath, node);
+ }
+ nodeValue = node.map((element, i) => {
+ const elementPath = concat(
+ frontPath,
+ concat([i], backPath)
+ );
+ return assocPath(
+ backPath,
+ this.wrapChildrenProp(
+ rpath(backPath, element),
+ elementPath
+ ),
+ element
+ );
+ });
+ path = frontPath;
+ } else {
+ node = rpath(path, _dashprivate_layout.props);
+ if (node === undefined) {
+ return;
+ }
+ nodeValue = this.wrapChildrenProp(node, path);
+ }
+ return assocPath(path, nodeValue);
+ }
+ const node = _dashprivate_layout.props[childrenProp];
+ if (node !== undefined) {
+ return assoc(
+ childrenProp,
+ this.wrapChildrenProp(node, [childrenProp])
+ );
+ }
+ })
+ .filter(e => e !== undefined)
+ )(_dashprivate_layout.props);
 
  if (type(props.id) === 'Object') {
  // Turn object ids (for wildcards) into unique strings.

dash/dash-renderer/src/actions/utils.js

@@ -1,4 +1,4 @@
-import {append, concat, has, path, type} from 'ramda';
+import {append, concat, has, path, pathOr, type, path as rpath} from 'ramda';
 
 /*
  * requests_pathname_prefix is the new config parameter introduced in
@@ -27,11 +27,24 @@ export function urlBase(config) {
 const propsChildren = ['props', 'children'];
 
 // crawl a layout object or children array, apply a function on every object
-export const crawlLayout = (object, func, currentPath = []) => {
+export const crawlLayout = (
+ object,
+ func,
+ currentPath = [],
+ extraPath = undefined
+) => {
  if (Array.isArray(object)) {
  // children array
  object.forEach((child, i) => {
- crawlLayout(child, func, append(i, currentPath));
+ if (extraPath) {
+ crawlLayout(
+ rpath(extraPath, child),
+ func,
+ concat(currentPath, concat([i], extraPath))
+ );
+ } else {
+ crawlLayout(child, func, append(i, currentPath));
+ }
  });
  } else if (type(object) === 'Object') {
  func(object, currentPath);
@@ -41,6 +54,32 @@ export const crawlLayout = (object, func, currentPath = []) => {
  const newPath = concat(currentPath, propsChildren);
  crawlLayout(children, func, newPath);
  }
+
+ const childrenProps = pathOr(
+ [],
+ [object.namespace, object.type],
+ window.__dashprivate_childrenProps
+ );
+ childrenProps.forEach(childrenProp => {
+ if (childrenProp.includes('[]')) {
+ let [frontPath, backPath] = childrenProp
+ .split('[]')
+ .map(p => p.split('.').filter(e => e));
+ const front = concat(['props'], frontPath);
+ const basePath = concat(currentPath, front);
+ crawlLayout(path(front, object), func, basePath, backPath);
+ } else {
+ const newPath = concat(currentPath, [
+ 'props',
+ ...childrenProp.split('.')
+ ]);
+ crawlLayout(
+ path(['props', ...childrenProp.split('.')], object),
+ func,
+ newPath
+ );
+ }
+ });
  }
 };