Add custom chips story and fix isDisabled being undefined instead of …

…false.

src/ChipInput.js

@@ -460,7 +460,7 @@ class ChipInput extends React.Component {
               value,
               text: dataSourceConfig ? tag[dataSourceConfig.text] : tag,
               chip: tag,
-              isDisabled: disabled,
+              isDisabled: !!disabled,
               isFocused: this.state.focusedChip === i,
               handleClick: () => this.setState({ focusedChip: i }),
               handleRequestDelete: () => this.handleDeleteChip(value, i),

src/ChipInput.spec.js

@@ -1,6 +1,7 @@
 /* eslint-env jest */
 import React from 'react'
 import { mount } from 'enzyme'
+import Chip from 'material-ui/Chip'
 import ChipInput from './ChipInput'
 
 describe('uncontrolled mode', () => {
@@ -276,3 +277,25 @@ describe('helper text', () => {
     expect(tree.find('FormHelperText').text()).toBe('Helper text')
   })
 })
+
+describe('custom chips', () => {
+  it('calls a chip renderer for every chip', () => {
+    const chipRenderer = jest.fn(({ text }, key) => <Chip key={key} label={text.toUpperCase()} />)
+    const tree = mount(
+      <ChipInput value={['a', 'b']} chipRenderer={chipRenderer} />
+    )
+    expect(chipRenderer).toHaveBeenCalledTimes(2)
+    expect(tree.find('Chip').map((chip) => chip.text())).toEqual(['A', 'B'])
+
+    expect(chipRenderer.mock.calls[0][0]).toEqual({
+      value: 'a',
+      text: 'a',
+      chip: 'a',
+      isDisabled: false,
+      isFocused: false,
+      handleClick: expect.any(Function),
+      handleRequestDelete: expect.any(Function),
+      defaultStyle: expect.any(Object)
+    })
+  })
+})

stories/index.js

@@ -1,10 +1,10 @@
 import React from 'react'
 import { storiesOf } from '@storybook/react'
 import { action } from '@storybook/addon-actions'
-// import Avatar from 'material-ui/Avatar'
-// import Chip from 'material-ui/Chip'
+import Avatar from 'material-ui/Avatar'
+import Chip from 'material-ui/Chip'
 // import AutoComplete from 'material-ui/AutoComplete'
-// import { green800, green300 } from 'material-ui/styles/colors'
+import { green } from 'material-ui/colors'
 import ChipInput from '../src/ChipInput'
 // import ControlledChipInput from './ControlledChipInput'
 // import ClipboardExample from './ClipboardExample'
@@ -99,26 +99,22 @@ storiesOf('ChipInput', module)
       style={{ width: 321 }}
     />
   )
-  /*
   .add('with custom chips', () =>
     <ChipInput
       defaultValue={['foo', 'bar']}
       fullWidth
       chipRenderer={({ value, isFocused, isDisabled, handleClick, handleRequestDelete, defaultStyle }, key) => (
         <Chip
           key={key}
-          style={{ ...defaultStyle, pointerEvents: isDisabled ? 'none' : undefined }}
-          backgroundColor={isFocused ? green800 : green300}
+          style={{ ...defaultStyle, pointerEvents: isDisabled ? 'none' : undefined, backgroundColor: isFocused ? green[800] : green[300] }}
           onClick={handleClick}
           onRequestDelete={handleRequestDelete}
-        >
-          <Avatar size={32}>{value[0].toUpperCase()}</Avatar>
-          {value}
-        </Chip>
+          label={value}
+          avatar={<Avatar size={32}>{value[0].toUpperCase()}</Avatar>}
+        />
       )}
     />
   )
-  */
   .add('with helperText', () =>
     <ChipInput
       helperText='This text is here to help you.'