Support arbitrary Accordion children (#718)

* Support arbitrary children in AccordionItem

* Add non-text components to docs example

Author: tcbegley

docs/components_page/components/accordion/simple.R

@@ -6,11 +6,17 @@ accordion <- htmlDiv(
   dbcAccordion(
     list(
       dbcAccordionItem(
-        "This is the content of the first section",
+        list(
+          htmlP("This is the content of the first section"),
+          dbcButton("Click here")
+        ),
         title = "Item 1"
       ),
       dbcAccordionItem(
-        "This is the content of the second section",
+        list(
+          htmlP("This is the content of the second section"),
+          dbcButton("Don't click me!", color = "danger")
+        ),
         title = "Item 2"
       ),
       dbcAccordionItem(

docs/components_page/components/accordion/simple.jl

@@ -2,8 +2,17 @@ using DashBootstrapComponents, DashCoreComponents, DashHtmlComponents
 
 accordion = html_div(
     dbc_accordion([
-        dbc_accordionitem("This is the content of the first section", title = "Item 1"),
-        dbc_accordionitem("This is the content of the second section", title = "Item 2"),
+        dbc_accordionitem(
+            [html_p("This is the content of the first section"), dbc_button("Click here")],
+            title = "Item 1",
+        ),
+        dbc_accordionitem(
+            [
+                html_p("This is the content of the second section"),
+                dbc_button("Don't click me!", color = "danger"),
+            ],
+            title = "Item 2",
+        ),
         dbc_accordionitem("This is the content of the third section", title = "Item 3"),
     ],),
 )

docs/components_page/components/accordion/simple.py

@@ -5,11 +5,17 @@
     dbc.Accordion(
         [
             dbc.AccordionItem(
-                "This is the content of the first section",
+                [
+                    html.P("This is the content of the first section"),
+                    dbc.Button("Click here"),
+                ],
                 title="Item 1",
             ),
             dbc.AccordionItem(
-                "This is the content of the second section",
+                [
+                    html.P("This is the content of the second section"),
+                    dbc.Button("Don't click me!", color="danger"),
+                ],
                 title="Item 2",
             ),
             dbc.AccordionItem(

src/components/accordion/Accordion.js

@@ -3,26 +3,14 @@ import PropTypes from 'prop-types';
 import {omit} from 'ramda';
 import RBAccordion from 'react-bootstrap/Accordion';
 
-const resolveChildProps = child => {
-  // This may need to change in the future if https://github.com/plotly/dash-renderer/issues/84 is addressed
-  if (
-    child.props._dashprivate_layout &&
-    child.props._dashprivate_layout.props
-  ) {
-    // props are coming from Dash
-    return child.props._dashprivate_layout.props;
-  } else {
-    // else props are coming from React (e.g. Demo.js, or Tabs.test.js)
-    return child.props;
-  }
-};
+import {parseChildrenToArray, resolveChildProps} from '../../private/util';
 
 /**
  * A self contained Accordion component. Build up the children using the
  * AccordionItem component.
  */
 const Accordion = props => {
-  const {
+  let {
     children,
     active_item,
     start_collapsed,
@@ -33,6 +21,7 @@ const Accordion = props => {
     className,
     ...otherProps
   } = props;
+  children = parseChildrenToArray(children);
 
   // if active_item not set initially, choose first item
   useEffect(() => {
@@ -89,7 +78,7 @@ const Accordion = props => {
           >
             {title}
           </RBAccordion.Header>
-          <RBAccordion.Body>{children}</RBAccordion.Body>
+          <RBAccordion.Body>{child}</RBAccordion.Body>
         </RBAccordion.Item>
       );
     });

src/components/accordion/AccordionItem.js

@@ -5,7 +5,7 @@ import PropTypes from 'prop-types';
  * A component to build up the children of the accordion.
  */
 const AccordionItem = props => {
-  return <></>;
+  return <>{props.children}</>;
 };
 
 AccordionItem.propTypes = {

src/components/tabs/Tabs.js

@@ -4,35 +4,8 @@ import {omit} from 'ramda';
 import classnames from 'classnames';
 import RBNav from 'react-bootstrap/Nav';
 import RBTab from 'react-bootstrap/Tab';
-import {isNil} from 'ramda';
 
-const resolveChildProps = child => {
-  // This may need to change in the future if https://github.com/plotly/dash-renderer/issues/84 is addressed
-  if (
-    // disabled is a defaultProp (so it's always set)
-    // meaning that if it's not set on child.props, the actual
-    // props we want are lying a bit deeper - which means they
-    // are coming from Dash
-    isNil(child.props.disabled) &&
-    child.props._dashprivate_layout &&
-    child.props._dashprivate_layout.props
-  ) {
-    // props are coming from Dash
-    return child.props._dashprivate_layout.props;
-  } else {
-    // else props are coming from React (e.g. Demo.js, or Tabs.test.js)
-    return child.props;
-  }
-};
-
-const parseChildrenToArray = children => {
-  if (children && !Array.isArray(children)) {
-    // if dcc.Tabs.children contains just one single element, it gets passed as an object
-    // instead of an array - so we put in in a array ourselves!
-    return [children];
-  }
-  return children;
-};
+import {parseChildrenToArray, resolveChildProps} from '../../private/util';
 
 /**
  * Create Bootstrap styled tabs. Use the `active_tab` property to set, or get

src/private/util.js

@@ -0,0 +1,24 @@
+const parseChildrenToArray = children => {
+  if (children && !Array.isArray(children)) {
+    // if children contains just one single element, it gets passed as an object
+    // instead of an array - so we put in in a array ourselves!
+    return [children];
+  }
+  return children;
+};
+
+const resolveChildProps = child => {
+  // This may need to change in the future if https://github.com/plotly/dash-renderer/issues/84 is addressed
+  if (
+    child.props._dashprivate_layout &&
+    child.props._dashprivate_layout.props
+  ) {
+    // props are coming from Dash
+    return child.props._dashprivate_layout.props;
+  } else {
+    // else props are coming from React (e.g. Demo.js, or Tabs.test.js)
+    return child.props;
+  }
+};
+
+export {parseChildrenToArray, resolveChildProps};