diff --git a/src/Forms/FormRadioGroup.js b/src/Forms/FormRadioGroup.js index adec142f0..8803bdbf8 100644 --- a/src/Forms/FormRadioGroup.js +++ b/src/Forms/FormRadioGroup.js @@ -15,17 +15,13 @@ class FormRadioGroup extends Component { return (
- {React.Children.map(children, child => { - if (React.isValidElement(child)) { - return React.cloneElement(child, { - disabled: child.props.disabled || disabled, - inline: child.props.inline || inline, - name: child.props.name || this.groupId, - onChange: child.props.onChange || onChange - }); - } else { - return child; - } + {React.Children.toArray(children).map(child => { + return React.cloneElement(child, { + disabled: child.props.disabled || disabled, + inline: child.props.inline || inline, + name: child.props.name || this.groupId, + onChange: child.props.onChange || onChange + }); })}
); diff --git a/src/SideNavigation/SideNav.js b/src/SideNavigation/SideNav.js index 107a7ebf5..1974da7f3 100644 --- a/src/SideNavigation/SideNav.js +++ b/src/SideNavigation/SideNav.js @@ -40,15 +40,11 @@ class SideNav extends Component { return ( ); diff --git a/src/SideNavigation/_SideNavList.js b/src/SideNavigation/_SideNavList.js index 0c38510ab..d07a2f167 100644 --- a/src/SideNavigation/_SideNavList.js +++ b/src/SideNavigation/_SideNavList.js @@ -30,17 +30,13 @@ class SideNavList extends React.Component { aria-expanded={hasParent && open} aria-hidden={hasParent && !open} className={sideNavListClasses}> - {React.Children.map(children, (child) => { - if (React.isValidElement(child)) { - return React.cloneElement(child, { - isSubItem: hasParent, - onItemSelect: onItemSelect, - selected: selectedId === child.props.id, - selectedId: selectedId - }); - } else { - return child; - } + {React.Children.toArray(children).map(child => { + return React.cloneElement(child, { + isSubItem: hasParent, + onItemSelect: onItemSelect, + selected: selectedId === child.props.id, + selectedId: selectedId + }); })} ); diff --git a/src/SideNavigation/_SideNavListItem.js b/src/SideNavigation/_SideNavListItem.js index faa4e91ce..8906bd102 100644 --- a/src/SideNavigation/_SideNavListItem.js +++ b/src/SideNavigation/_SideNavListItem.js @@ -38,11 +38,8 @@ class SideNavListItem extends React.Component { ); }; - let hasChild = false; - React.Children.forEach(children, (child) => { - if (React.isValidElement(child) && child.type === SideNavList) { - hasChild = true; - } + const hasChild = React.Children.toArray(children).some(child => { + return child.type === SideNavList; }); const renderLink = () => { @@ -72,8 +69,8 @@ class SideNavListItem extends React.Component { className='fd-side-nav__item' key={id}> {url && renderLink()} - {React.Children.map(children, (child) => { - if (React.isValidElement(child) && child.type !== SideNavList) { + {React.Children.toArray(children).map(child => { + if (child.type !== SideNavList) { return React.cloneElement(child, { children: ( {glyph ? ( @@ -92,7 +89,7 @@ class SideNavListItem extends React.Component { } } }); - } else if (React.isValidElement(child) && child.type === SideNavList) { + } else if (child.type === SideNavList) { return React.cloneElement(child, { hasParent: true, onItemSelect: onItemSelect, diff --git a/src/TreeView/TreeRow.test.js b/src/TreeView/TreeRow.test.js index ab57e6e8a..e1de64dff 100644 --- a/src/TreeView/TreeRow.test.js +++ b/src/TreeView/TreeRow.test.js @@ -183,6 +183,42 @@ describe('', () => { ); + const falseyCondition = false; + const conditionalTreeView = ( + + + Column Header 1 + {falseyCondition && Column Header 2} + Column Header 3 + Column Header 4 + + + + + First Level + + + + + {falseyCondition && ( + + First Level + + )} + Second level + + + + {falseyCondition && } + + {falseyCondition && } + + + {falseyCondition && } + + + ); + test('create tree component', () => { // multi-level tree let component = renderer.create(multiLevelTreeView); @@ -193,6 +229,11 @@ describe('', () => { component = renderer.create(richTreeView); tree = component.toJSON(); expect(tree).toMatchSnapshot(); + + // conditional tree + component = renderer.create(conditionalTreeView); + tree = component.toJSON(); + expect(tree).toMatchSnapshot(); }); test('open all tree from header', () => { diff --git a/src/TreeView/TreeView.js b/src/TreeView/TreeView.js index c6d8ace73..c1a08d432 100644 --- a/src/TreeView/TreeView.js +++ b/src/TreeView/TreeView.js @@ -117,30 +117,28 @@ class TreeView extends Component { return (
- { - React.Children.map(children, (child) => { - const isTreeHead = child.type && child.type.displayName === 'TreeView.Head'; - const isTree = child.type && child.type.displayName === 'TreeView.Tree'; - - if (isTreeHead) { - // Pass expand all callbacks to TreeHead - return React.cloneElement(child, { - onExpandAll: this.toggleExpandAll, - isExpanded: isExpandAll - }); - } - - if (isTree) { - // Pass expand callbacks to Tree - return React.cloneElement(child, { - expandData, - onExpandClick: this.toggleExpand - }); - } - - return child; - }) - } + {React.Children.toArray(children).map(child => { + const isTreeHead = child.type && child.type.displayName === 'TreeView.Head'; + const isTree = child.type && child.type.displayName === 'TreeView.Tree'; + + if (isTreeHead) { + // Pass expand all callbacks to TreeHead + return React.cloneElement(child, { + onExpandAll: this.toggleExpandAll, + isExpanded: isExpandAll + }); + } + + if (isTree) { + // Pass expand callbacks to Tree + return React.cloneElement(child, { + expandData, + onExpandClick: this.toggleExpand + }); + } + + return child; + })}
); } diff --git a/src/TreeView/_BaseTree.js b/src/TreeView/_BaseTree.js index 6d53c9c8a..fe5f44d95 100644 --- a/src/TreeView/_BaseTree.js +++ b/src/TreeView/_BaseTree.js @@ -26,15 +26,13 @@ class BaseTree extends Component { aria-hidden={level > 0 && !isExpanded} className={className} role={level === 0 ? 'tree' : 'group'}> - { - React.Children.map(children, (child) => { - return React.cloneElement(child, { - expandData, - level, - onExpandClick - }); - }) - } + {React.Children.toArray(children).map(child => { + return React.cloneElement(child, { + expandData, + level, + onExpandClick + }); + })} ); } diff --git a/src/TreeView/_TreeHead.js b/src/TreeView/_TreeHead.js index 090470638..5521057ff 100644 --- a/src/TreeView/_TreeHead.js +++ b/src/TreeView/_TreeHead.js @@ -23,7 +23,7 @@ class TreeHead extends Component {
{ - React.Children.map(children, (child, index) => { + React.Children.toArray(children).map((child, index) => { const isFirstTreeCol = index === 0 && child.type && child.type.displayName === 'TreeView.Col'; // Add control class to first TreeCol element diff --git a/src/TreeView/_TreeItem.js b/src/TreeView/_TreeItem.js index 529fd3ce9..1bff5388f 100644 --- a/src/TreeView/_TreeItem.js +++ b/src/TreeView/_TreeItem.js @@ -31,33 +31,29 @@ class TreeItem extends Component { const isExpanded = isExpandedProp || !!expandData[this.rowId]; // Render child TreeBranch with correct props - const childBranch = React.Children.map(children, (child) => { - const isTreeBranch = child.type && child.type.displayName === 'TreeView.Branch'; - - return isTreeBranch ? - React.cloneElement(child, { + const childBranch = React.Children.toArray(children) + .filter(child => child.type && child.type.displayName === 'TreeView.Branch') + .map(child => { + return React.cloneElement(child, { expandData, onExpandClick, isExpanded, // Increment child branch level level: level + 1 - }) : - null; - }); + }); + }); // Render child TreeRow with correct props - const childRow = React.Children.map(children, (child) => { - const isTreeRow = child.type && child.type.displayName === 'TreeView.Row'; - - return isTreeRow ? - React.cloneElement(child, { + const childRow = React.Children.toArray(children) + .filter(child => child.type && child.type.displayName === 'TreeView.Row') + .map(child => { + return React.cloneElement(child, { isExpanded, onExpandClick: () => onExpandClick(this.rowId), isParent: !!childBranch[0], rowId: this.rowId - }) : - null; - }); + }); + }); return (
  • { + const cells = React.Children.toArray(children).map((child, index) => { const isTreeCol = child.type && child.type.displayName === 'TreeView.Col'; const isFirstTreeCol = index === 0 && isTreeCol; diff --git a/src/TreeView/__snapshots__/TreeRow.test.js.snap b/src/TreeView/__snapshots__/TreeRow.test.js.snap index 4fc4b8518..ef67b03a2 100644 --- a/src/TreeView/__snapshots__/TreeRow.test.js.snap +++ b/src/TreeView/__snapshots__/TreeRow.test.js.snap @@ -722,3 +722,98 @@ exports[` create tree component 2`] = `
    • `; + +exports[` create tree component 3`] = ` +
    +
    +
    +
    +
    +
    +
    +
    + Column Header 3 +
    +
    + Column Header 4 +
    +
    +
    +
      +
    • +
      +
      +
      +
      +
      +
      +
        +
      • +
        +
        + Second level +
        +
        +
        +
        +
        • +
      +
      • +
    +
    +`;