Stringify ids in child components (AccordionItem, Tabs) (dbc-team#937)

Author: tcbegley

src/components/accordion/Accordion.js

@@ -3,7 +3,11 @@ import PropTypes from 'prop-types';
 import {omit} from 'ramda';
 import RBAccordion from 'react-bootstrap/Accordion';
 
-import {parseChildrenToArray, resolveChildProps} from '../../private/util';
+import {
+  parseChildrenToArray,
+  resolveChildProps,
+  stringifyId
+} from '../../private/util';
 
 /**
  * A self contained Accordion component. Build up the children using the
@@ -59,17 +63,18 @@ const Accordion = props => {
     children.map((child, idx) => {
       const childProps = resolveChildProps(child);
       const {
-        children,
         title,
         item_id,
         loading_state,
         class_name,
         className,
+        id,
         ...otherProps
       } = childProps;
       const itemID = item_id || 'item-' + idx;
       return (
         <RBAccordion.Item
+          id={stringifyId(id)}
           key={itemID}
           eventKey={itemID}
           className={class_name || className}

src/components/tabs/Tabs.js

@@ -5,7 +5,11 @@ import classnames from 'classnames';
 import RBNav from 'react-bootstrap/Nav';
 import RBTab from 'react-bootstrap/Tab';
 
-import {parseChildrenToArray, resolveChildProps} from '../../private/util';
+import {
+  parseChildrenToArray,
+  resolveChildProps,
+  stringifyId
+} from '../../private/util';
 
 /**
  * Create Bootstrap styled tabs. Use the `active_tab` property to set, or get
@@ -52,7 +56,7 @@ const Tabs = props => {
       const active = active_tab === tabId;
       return (
         <RBNav.Item
-          id={childProps.id}
+          id={stringifyId(childProps.id)}
           key={tabId}
           style={
             active

src/private/util.js

@@ -62,4 +62,15 @@ const sanitizeOptions = options => {
   return options;
 };
 
-export {parseChildrenToArray, resolveChildProps, sanitizeOptions};
+const stringifyId = id => {
+  if (typeof id !== 'object') {
+    return id;
+  }
+  const stringifyVal = v => (v && v.wild) || JSON.stringify(v);
+  const parts = Object.keys(id)
+    .sort()
+    .map(k => JSON.stringify(k) + ':' + stringifyVal(id[k]));
+  return '{' + parts.join(',') + '}';
+};
+
+export {parseChildrenToArray, resolveChildProps, sanitizeOptions, stringifyId};