feat(tabs): Allow for higher order components (#196)

* Allow for higher order components

* Added tests with higher order components.

* Test if solution works with hoist-non-react-statics

Author: karevn

.eslintrc

@@ -17,9 +17,12 @@
     "react/forbid-prop-types": "off",
     "react/sort-comp": "off",
     "jsx-a11y/no-static-element-interactions": "off",
-    "import/no-extraneous-dependencies": ["error", {
-      "devDependencies": ["**/__tests__/*-test.js"],
-      "optionalDependencies": false
-    }]
+    "import/no-extraneous-dependencies": [
+      "error",
+      {
+        "devDependencies": ["**/__tests__/**/*"],
+        "optionalDependencies": false
+      }
+    ]
   }
 }

package.json

@@ -62,6 +62,7 @@
     "eslint-plugin-jsx-a11y": "^5.0.3",
     "eslint-plugin-prettier": "^2.2.0",
     "eslint-plugin-react": "^7.0.1",
+    "hoist-non-react-statics": "^2.3.1",
     "husky": "^0.14.3",
     "jest-cli": "^20.0.0",
     "lint-staged": "^4.0.4",
@@ -84,7 +85,8 @@
   "jest": {
     "roots": [
       "src"
-    ]
+    ],
+    "testRegex": "/__tests__/.+-test\\.js$"
   },
   "lint-staged": {
     "src/**/*.js": [

src/components/Tab.js

@@ -80,3 +80,5 @@ export default class Tab extends Component {
     );
   }
 }
+
+Tab.tabsRole = 'Tab';

src/components/TabList.js

@@ -22,3 +22,5 @@ export default class TabList extends Component {
     );
   }
 }
+
+TabList.tabsRole = 'TabList';

src/components/TabPanel.js

@@ -49,3 +49,5 @@ export default class TabPanel extends Component {
     );
   }
 }
+
+TabPanel.tabsRole = 'TabPanel';

src/components/Tabs.js

@@ -106,3 +106,5 @@ For more information about controlled and uncontrolled mode of react-tabs see th
     return <UncontrolledTabs {...props}>{children}</UncontrolledTabs>;
   }
 }
+
+Tabs.tabsRole = 'Tabs';

src/components/UncontrolledTabs.js

@@ -3,11 +3,9 @@ import React, { cloneElement, Component } from 'react';
 import cx from 'classnames';
 import uuid from '../helpers/uuid';
 import { childrenPropType } from '../helpers/propTypes';
-import Tab from './Tab';
-import TabList from './TabList';
-import TabPanel from './TabPanel';
 import { getPanelsCount, getTabsCount } from '../helpers/count';
 import { deepMap } from '../helpers/childrenDeepMap';
+import { isTabList, isTabPanel, isTab } from '../helpers/elementTypes';
 
 // Determine if a node from event.target is a Tab element
 function isTabNode(node) {
@@ -145,7 +143,7 @@ export default class UncontrolledTabs extends Component {
       let result = child;
 
       // Clone TabList and Tab components to have refs
-      if (child.type === TabList) {
+      if (isTabList(child)) {
         let listIndex = 0;
 
         // Figure out if the current focus in the DOM is set on a Tab
@@ -155,7 +153,7 @@ export default class UncontrolledTabs extends Component {
         if (canUseActiveElement) {
           wasTabFocused = React.Children
             .toArray(child.props.children)
-            .filter(tab => tab.type === Tab)
+            .filter(isTab)
             .some((tab, i) => document.activeElement === this.getTab(i));
         }
 
@@ -182,7 +180,7 @@ export default class UncontrolledTabs extends Component {
             return cloneElement(tab, props);
           }),
         });
-      } else if (child.type === TabPanel) {
+      } else if (isTabPanel(child)) {
         const props = {
           id: this.panelIds[index],
           tabId: this.tabIds[index],

src/components/__tests__/Tab-test.js

@@ -2,6 +2,7 @@
 import React from 'react';
 import renderer from 'react-test-renderer';
 import Tab from '../Tab';
+import { TabWrapper } from './helpers/higherOrder';
 
 function expectToMatchSnapshot(component) {
   expect(renderer.create(component).toJSON()).toMatchSnapshot();
@@ -51,4 +52,8 @@ describe('<Tab />', () => {
     // eslint-disable-next-line jsx-a11y/aria-role
     expectToMatchSnapshot(<Tab role="micro-tab" />);
   });
+
+  it('should allow to be wrapped in higher-order-component', () => {
+    expectToMatchSnapshot(<TabWrapper />);
+  });
 });

src/components/__tests__/TabList-test.js

@@ -5,6 +5,7 @@ import Tab from '../Tab';
 import TabList from '../TabList';
 import TabPanel from '../TabPanel';
 import Tabs from '../Tabs';
+import { TabListWrapper, TabWrapper } from './helpers/higherOrder';
 
 function expectToMatchSnapshot(component) {
   expect(renderer.create(component).toJSON()).toMatchSnapshot();
@@ -77,4 +78,17 @@ describe('<TabList />', () => {
       </Tabs>,
     );
   });
+
+  it('should allow for higher order components', () => {
+    expectToMatchSnapshot(
+      <Tabs>
+        <TabListWrapper>
+          <TabWrapper>Foo</TabWrapper>
+          <TabWrapper>Bar</TabWrapper>
+        </TabListWrapper>
+        <TabPanel>Foo</TabPanel>
+        <TabPanel>Bar</TabPanel>
+      </Tabs>,
+    );
+  });
 });

src/components/__tests__/TabPanel-test.js

@@ -2,6 +2,7 @@
 import React from 'react';
 import renderer from 'react-test-renderer';
 import TabPanel from '../TabPanel';
+import { TabPanelWrapper } from './helpers/higherOrder';
 
 function expectToMatchSnapshot(component) {
   expect(renderer.create(component).toJSON()).toMatchSnapshot();
@@ -55,4 +56,8 @@ describe('<TabPanel />', () => {
     // eslint-disable-next-line jsx-a11y/aria-role
     expectToMatchSnapshot(<TabPanel role="micro-tab" />);
   });
+
+  it('should allow for higher-order components', () => {
+    expectToMatchSnapshot(<TabPanelWrapper />);
+  });
 });