more flexible html structure for jsx components (#34)

* set siblings after next element sibling to not include hidden prop * fix sibling targeting for tabs and input as well as chaning forEach usage to map to get returned elements
nrkno · May 3, 2018 · 6d00e2e · 6d00e2e
1 parent 1cb3c04
commit 6d00e2e
Show file tree

Hide file tree

Showing 6 changed files with 32 additions and 21 deletions.
diff --git a/packages/core-dialog/core-dialog.js b/packages/core-dialog/core-dialog.js
@@ -15,7 +15,7 @@ const FOCUSABLE_ELEMENTS = `
 export default function dialog (dialogs, open) {
   const options = typeof open === 'object' ? open : {open}
 
-  return queryAll(dialogs).forEach((dialog) => {
+  return queryAll(dialogs).map((dialog) => {
     const hasBackdrop = (dialog.nextElementSibling || {}).nodeName === 'BACKDROP'
 
     dialog.setAttribute(UUID, '')

diff --git a/packages/core-input/core-input.js b/packages/core-input/core-input.js
@@ -9,7 +9,7 @@ export default function input (elements, content) {
   const options = typeof content === 'object' ? content : {content}
   const repaint = typeof options.content === 'string'
 
-  return queryAll(elements).forEach((input) => {
+  return queryAll(elements).map((input) => {
     const list = input.nextElementSibling
 
     input.setAttribute(UUID, '')

diff --git a/packages/core-input/core-input.jsx b/packages/core-input/core-input.jsx
@@ -17,10 +17,15 @@ export default class Input extends React.Component {
   }
   render () {
     return React.createElement('div', exclude(this.props, DEFAULTS, {ref: el => (this.el = el)}),
-      React.Children.map(this.props.children, (child, adjacent) => adjacent
-        ? React.cloneElement(child, {'hidden': !this.props.open})
-        : React.cloneElement(child, {'aria-expanded': String(Boolean(this.props.open))})
-      )
+      React.Children.map(this.props.children, (child, adjacent) => {
+        if (adjacent === 0) {
+          return React.cloneElement(child, {
+            'aria-expanded': String(Boolean(this.props.open))
+          })
+        }
+        if (adjacent === 1) return React.cloneElement(child, {'hidden': !this.props.open})
+        return child
+      })
     )
   }
 }

diff --git a/packages/core-tabs/core-tabs.jsx b/packages/core-tabs/core-tabs.jsx
@@ -16,13 +16,16 @@ export default class Tabs extends React.Component {
     const attr = exclude(this.props, DEFAULTS, {ref: (el) => (this.el = el)})
 
     return React.createElement('div', attr,
-      React.Children.map(this.props.children, (group, isPanelGroup) =>
-        React.cloneElement(group, null, React.Children.map(group.props.children, (child, index) =>
-          React.cloneElement(child, isPanelGroup
-            ? {hidden: open !== index}
-            : {'aria-selected': open === index})
-        ))
-      )
+      React.Children.map(this.props.children, (group, isPanelGroup) => {
+        if (isPanelGroup < 2) {
+          return React.cloneElement(group, null, React.Children.map(group.props.children, (child, index) =>
+            React.cloneElement(child, isPanelGroup
+              ? {hidden: open !== index}
+              : {'aria-selected': open === index})
+          ))
+        }
+        return group
+      })
     )
   }
 }
diff --git a/packages/core-toggle/core-toggle.js b/packages/core-toggle/core-toggle.js
@@ -9,7 +9,7 @@ const POPS = 'aria-haspopup'
 export default function toggle (buttons, open) {
   const options = typeof open === 'object' ? open : {open}
 
-  return queryAll(buttons).forEach((button) => {
+  return queryAll(buttons).map((button) => {
     const open = typeof options.open === 'boolean' ? options.open : button.getAttribute(OPEN) === 'true'
     const pops = typeof options.popup === 'boolean' ? options.popup : button.getAttribute(POPS) === 'true'
     const next = button.nextElementSibling

diff --git a/packages/core-toggle/core-toggle.jsx b/packages/core-toggle/core-toggle.jsx
@@ -13,13 +13,16 @@ export default class Toggle extends React.Component {
   componentWillUnmount () { this.el.removeEventListener('toggle', this.props.onToggle) }
   render () {
     return React.createElement('div', exclude(this.props, DEFAULTS, {ref: (el) => (this.el = el)}),
-      React.Children.map(this.props.children, (child, adjacent) => adjacent
-        ? React.cloneElement(child, {'hidden': !this.props.open})
-        : React.cloneElement(child, {
-          'aria-expanded': String(Boolean(this.props.open)),
-          'aria-haspopup': String(Boolean(this.props.popup))
-        })
-      )
+      React.Children.map(this.props.children, (child, adjacent) => {
+        if (adjacent === 0) {
+          return React.cloneElement(child, {
+            'aria-expanded': String(Boolean(this.props.open)),
+            'aria-haspopup': String(Boolean(this.props.popup))
+          })
+        }
+        if (adjacent === 1) return React.cloneElement(child, {'hidden': !this.props.open})
+        return child
+      })
     )
   }
 }