Fixing TabList so it can have a string selectedKey or an integer selectedKey.

Nate Ross · Nate Ross · commit 184064daf782 · 2016-06-14T16:23:32.000-06:00
diff --git a/lib/TabList.jsx b/lib/TabList.jsx
@@ -36,7 +36,7 @@ export default class TabList extends React.Component {
     }
   }
 
-  onClickItem(selectedKey) {
+  handleClickItem(selectedKey) {
     this.setSelectedKey(selectedKey);
   }
 
@@ -59,12 +59,12 @@ export default class TabList extends React.Component {
     return React.Children.map(children, (child, index) => {
       // If there is no key provide, use the index as default key
       const key = child.key || String(index);
-      const selected = selectedKey === key;
+      const selected = String(selectedKey) === key;
 
       const props = {
         selected,
         tabIndex: index,
-        onClick: this.onClickItem.bind(this, key)
+        onClick: this.handleClickItem.bind(this, key)
       };
 
       return React.cloneElement(child, props);
diff --git a/test/tablist-test.js b/test/tablist-test.js
@@ -71,19 +71,42 @@ describe('TabList', () => {
     expect(spy).toHaveBeenCalledWith('two');
   });
 
-  it('supports selectedKey', () => {
-    const tree = shallow(
-      <TabList selectedKey="1">
+  describe('selectedKey', () => {
+    const renderTabListWithSelectedKey = key => shallow(
+      <TabList selectedKey={ key }>
         <div className="one">a</div>
         <div className="two">b</div>
       </TabList>
     );
-    const child = tree.find('[selected=true]');
 
-    expect(child.length).toBe(1);
-    expect(child.node.props.className).toBe('two');
+    const assertChildTwoSelected = tree => {
+      const child = tree.find('[selected=true]');
+      expect(child.length).toBe(1);
+      expect(child.node.props.className).toBe('two');
+    };
+
+    it('supports string index', () => {
+      const tree = renderTabListWithSelectedKey('1');
+      assertChildTwoSelected(tree);
+    });
+
+    it('supports integer index', () => {
+      const tree = renderTabListWithSelectedKey(1);
+      assertChildTwoSelected(tree);
+    });
+
+    it('support child keys', () => {
+      const tree = shallow(
+        <TabList selectedKey="bar">
+          <div key="foo" className="one">a</div>
+          <div key="bar" className="two">b</div>
+        </TabList>
+      );
+      assertChildTwoSelected(tree);
+    });
   });
 
+
   it('supports defaultSelectedKey', () => {
     const tree = shallow(
       <TabList defaultSelectedKey="1">

Original file line number	Diff line number	Diff line change
`@@ -36,7 +36,7 @@ export default class TabList extends React.Component {`
`36`	`36`	`}`
`37`	`37`	`}`
`38`	`38`
`39`		`- onClickItem(selectedKey) {`
	`39`	`+ handleClickItem(selectedKey) {`
`40`	`40`	`this.setSelectedKey(selectedKey);`
`41`	`41`	`}`
`42`	`42`
`@@ -59,12 +59,12 @@ export default class TabList extends React.Component {`
`59`	`59`	`return React.Children.map(children, (child, index) => {`
`60`	`60`	`// If there is no key provide, use the index as default key`
`61`	`61`	`const key = child.key \|\| String(index);`
`62`		`- const selected = selectedKey === key;`
	`62`	`+ const selected = String(selectedKey) === key;`
`63`	`63`
`64`	`64`	`const props = {`
`65`	`65`	`selected,`
`66`	`66`	`tabIndex: index,`
`67`		`- onClick: this.onClickItem.bind(this, key)`
	`67`	`+ onClick: this.handleClickItem.bind(this, key)`
`68`	`68`	`};`
`69`	`69`
`70`	`70`	`return React.cloneElement(child, props);`