Added nested Tablist Support

[McPo]

You can now nest TabList as per #114

ie.

<Tabs>
  <div id="tabs-nav-wrapper">
    <button>Left</button>
    <div className="tabs-container">
      <TabList>...</TabList>
    </div>
    <button>Right</button>
  </div>
  {tabPanels}
</Tabs>

Few things

• As its recursive, it could be slow depending on the complexity of the nodes. (Should this be a switch, or should we define the tablist via refs or something?)
• I have removed a check within propTypes.js, as it no longer makes sense.
• As such, I think we should just call getTabsCount and getPanelsCount, as opposed to duplicating code.
• The 2nd filter in getTabsCount is now redundant, we could just count the tabs directly
• Haven't tested nested TabPanel (This could probably be added with minimal effort)
• react-children-utilities has a deepFind feature as opposed to using deepForEach, however it doesn't appear to search all nodes (due to a toArray)

Thoughts?

[tengis]

Much needed feature +1

[MindRave]

Much needed feature indeed, and nested TabPanels are much needed as well. There's simply no reason for not being able to wrap a TabPanel in a div, for example.

[danez]

Thanks for the PR. As commented inline this will break nesting of react-tabs right now. Maybe you have an idea how to work around this?

[danez]

This will not work when another react-tabs instance is nested inside I think, as it will find all children.

<Tabs>
<TabPanel>
  <Tabs>
  <TabPanel></TabPanel>
  </Tabs>
</TabPanel>
</Tabs>

Not sure how to avoid this, as we also couldn't check if child === Tabs as children seem to be visited first.

[danez]

This is also the reason why the tests are failing.

[danez]

When we use deepMap, we could actually remove the nested map here, as we would visit the Tab anyway in the outer map?

[danez]

Could use deepFind here?

[danez]

Oh I see your comment now in the inital message...hmm

[danez]

Yes this could be removed then.

[danez]

Merged in #180 and 430ed30