Added default style to chip render function. Update storybook example and docs. (#82)

Added default style to chip render function. Updated storybook examples and docs.

Author: DiegoHueltes

README.md

@@ -33,7 +33,7 @@ import ChipInput from 'material-ui-chip-input'
 ## Properties
 | Name | Type | Default | Description |
 | --- | --- | --- | --- |
-| chipRenderer | `function` | | A function of the type `({ value, text, isFocused, isDisabled, handleClick, handleRequestDelete }, key) => node` that returns a chip based on the given properties. This can be used to customize chip styles. |
+| chipRenderer | `function` | | A function of the type `({ value, text, isFocused, isDisabled, handleClick, handleRequestDelete, defaultStyle }, key) => node` that returns a chip based on the given properties. This can be used to customize chip styles. |
 | clearOnBlur | `bool` | `true` | If true, clears the input value after the component loses focus. |
 | dataSource | `array` | | Data source for auto complete. |
 | dataSourceConfig | `object` | | Config for objects list dataSource, e.g. `{ text: 'text', value: 'value' }`. If not specified, the `dataSource` must be a flat array of strings. |

src/ChipInput.js

@@ -70,6 +70,10 @@ const getStyles = (props, context, state) => {
     },
     floatingLabelFocusStyle: {
       transform: 'scale(0.75) translate(0, -36px)'
+    },
+    defaultChip: {
+      margin: '8px 8px 0 0',
+      float: 'left'
     }
   };
 
@@ -90,10 +94,10 @@ const getStyles = (props, context, state) => {
   return styles;
 };
 
-const defaultChipRenderer = ({ value, text, isFocused, isDisabled, handleClick, handleRequestDelete }, key) => (
+const defaultChipRenderer = ({ value, text, isFocused, isDisabled, handleClick, handleRequestDelete, defaultStyle }, key) => (
   <Chip
     key={key}
-    style={{ margin: '8px 8px 0 0', float: 'left', pointerEvents: isDisabled ? 'none' : undefined }}
+    style={{ ...defaultStyle, pointerEvents: isDisabled ? 'none' : undefined }}
     backgroundColor={isFocused ? blue300 : null}
     onTouchTap={handleClick}
     onRequestDelete={handleRequestDelete}
@@ -370,10 +374,10 @@ class ChipInput extends React.Component {
   /**
    * Sets a reference to the AutoComplete instance.
    *
-   * Using a bound class method here to set `autoComplete` to avoid it being set 
+   * Using a bound class method here to set `autoComplete` to avoid it being set
    * to null by an inline ref callback.
    *
-   * See [Isuue #71](https://github.com/TeamWertarbyte/material-ui-chip-input/issues/71)
+   * See [Issue #71](https://github.com/TeamWertarbyte/material-ui-chip-input/issues/71)
    *
    * @param {Object} autoComplete - The AutoComplete DOM element or null
    */
@@ -491,7 +495,8 @@ class ChipInput extends React.Component {
                 isDisabled: disabled,
                 isFocused: this.state.focusedChip === value,
                 handleClick: () => this.setState({ focusedChip: value }),
-                handleRequestDelete: () => this.handleDeleteChip(value, i)
+                handleRequestDelete: () => this.handleDeleteChip(value, i),
+                defaultStyle: styles.defaultChip
               }, i)
             })}
           </div>

stories/index.js

@@ -98,10 +98,10 @@ storiesOf('ChipInput', module)
     <ChipInput
       defaultValue={['foo', 'bar']}
       fullWidth
-      chipRenderer={({ value, isFocused, isDisabled, handleClick, handleRequestDelete }, key) => (
+      chipRenderer={({ value, isFocused, isDisabled, handleClick, handleRequestDelete, defaultStyle }, key) => (
         <Chip
           key={key}
-          style={{ margin: '8px 8px 0 0', float: 'left', pointerEvents: isDisabled ? 'none' : undefined }}
+          style={{ ...defaultStyle, pointerEvents: isDisabled ? 'none' : undefined }}
           backgroundColor={isFocused ? green800 : green300}
           onTouchTap={handleClick}
           onRequestDelete={handleRequestDelete}