Add support for component in dictionaries props.

Author: T4rk1n

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

@@ -3,10 +3,12 @@ import PropTypes from 'prop-types';
 
 
 const ComponentAsProp = (props) => {
-    const { element, elements, id } = props;
+    const { element, elements, id, shapeEl } = props;
     return (
         <div id={id}>
+            {shapeEl && shapeEl.header}
             {elements || element}
+            {shapeEl && shapeEl.footer}
         </div>
     )
 }
@@ -16,6 +18,11 @@ ComponentAsProp.propTypes = {
     element: PropTypes.node,
 
     elements: PropTypes.arrayOf(PropTypes.node),
+
+    shapeEl: PropTypes.shape({
+        header: PropTypes.node,
+        footer: PropTypes.node,
+    })
 }
 
 export default ComponentAsProp;

dash/dash-renderer/src/TreeContainer.js

@@ -5,6 +5,7 @@ import {propTypeErrorHandler} from './exceptions';
 import {
     addIndex,
     assoc,
+    assocPath,
     concat,
     dissoc,
     equals,
@@ -203,6 +204,23 @@ class BaseTreeContainer extends Component {
             dissoc('children'),
             ...childrenProps
                 .map(childrenProp => {
+                    if (childrenProp.includes('.')) {
+                        const path = childrenProp.split('.');
+                        const node =
+                            _dashprivate_layout.props[path[0]][path[1]];
+                        return assocPath(
+                            path,
+                            this.createContainer(
+                                this.props,
+                                node,
+                                concat(this.props._dashprivate_path, [
+                                    'props',
+                                    path[0],
+                                    path[1]
+                                ])
+                            )
+                        );
+                    }
                     const node = _dashprivate_layout.props[childrenProp];
                     if (node) {
                         if (Array.isArray(node)) {

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

@@ -43,8 +43,15 @@ export const crawlLayout = (object, func, currentPath = []) => {
         }
         const childrenProps = pathOr([], ['childrenProps'], object);
         childrenProps.forEach(childrenProp => {
-            const newPath = concat(currentPath, ['props', childrenProp]);
-            crawlLayout(path(['props', childrenProp], object), func, newPath);
+            const newPath = concat(currentPath, [
+                'props',
+                ...childrenProp.split('.')
+            ]);
+            crawlLayout(
+                path(['props', ...childrenProp.split('.')], object),
+                func,
+                newPath
+            );
         });
     }
 };

dash/development/base_component.py

@@ -137,7 +137,11 @@ def __init__(self, **kwargs):  # pylint: disable=too-many-branches
             if k not in ("children", "id", "style", "className") and not k_in_wildcards:
                 if isinstance(v, Component):
                     self._children_props.append(k)
-                if hasattr(v, "__iter__"):
+                elif isinstance(v, dict):
+                    for key, value in v.items():
+                        if isinstance(value, Component):
+                            self._children_props.append(k + "." + key)
+                elif hasattr(v, "__iter__"):
                     for item in v:
                         if isinstance(item, Component):
                             self._children_props.append(k)

tests/integration/renderer/test_component_as_prop.py

@@ -40,7 +40,16 @@ def test_rdcap001_component_as_prop(dash_duo):
                 [
                     Button("click-list", id="to-list"),
                     Div(id="output-from-list"),
-                ]
+                    Button("click footer", id="to-footer"),
+                    Div(id="from-header"),
+                ],
+            ),
+            ComponentAsProp(
+                id="shaped",
+                shapeEl={
+                    "header": Button("header", id="button-header"),
+                    "footer": Div("initial", id="footer"),
+                },
             ),
         ]
     )
@@ -67,10 +76,26 @@ def send_list_output(n_clicks):
     def send_to_list(n_clicks):
         return f"To list: {n_clicks}"
 
+    @app.callback(
+        Output("from-header", "children"), [Input("button-header", "n_clicks")]
+    )
+    def from_header(n_clicks):
+        return f"From header: {n_clicks}"
+
+    @app.callback(Output("footer", "children"), [Input("to-footer", "n_clicks")])
+    def send_to_footer(n_clicks):
+        return f"To footer: {n_clicks}"
+
     dash_duo.start_server(app)
 
+    assert dash_duo.get_logs() == []
+
     dash_duo.wait_for_text_to_equal("#as-props", "as-props")
 
+    elements = dash_duo.find_elements("#elements div")
+
+    assert len(elements) == 3
+
     clicker = dash_duo.wait_for_element("#clicker")
     clicker.click()
     dash_duo.wait_for_text_to_equal("#output-from-prop", "From prop: 1")
@@ -79,14 +104,20 @@ def send_to_list(n_clicks):
     nested.click()
     dash_duo.wait_for_text_to_equal("#nested-output", "Nested: 1")
 
-    elements = dash_duo.find_elements("#elements div")
-
-    assert len(elements) == 3
-
     to_list = dash_duo.find_element("#to-list")
     to_list.click()
     dash_duo.wait_for_text_to_equal("#list-output", "To list: 1")
 
     from_list = dash_duo.find_element("#list-two")
     from_list.click()
     dash_duo.wait_for_text_to_equal("#output-from-list", "From list: 1")
+
+    from_header = dash_duo.find_element("#button-header")
+    from_header.click()
+    dash_duo.wait_for_text_to_equal("#from-header", "From header: 1")
+
+    to_footer = dash_duo.find_element("#to-footer")
+    to_footer.click()
+    dash_duo.wait_for_text_to_equal("#footer", "To footer: 1")
+
+    assert dash_duo.get_logs() == []