Feature: custom options classes

package.json

@@ -1,6 +1,6 @@
 {
   "name": "material-input-chips",
-  "version": "1.3.9",
+  "version": "1.4.0",
   "description": "A chip input field using Material-UI@next.",
   "homepage": "https://rodrigonehring.github.io/material-input-chips/styleguide/",
   "main": "dist/material-input-chips.js",

src/MaterialChips/Index.md

@@ -122,16 +122,46 @@ const validators = [
 ```
 ------
 
-### Custom Chip Component
+### Custom Chip Component and Options custom classes
+
+#### Options classes:
+* optionsContainer
+* menuItemRoot
+* menuItemSelected
+* optionsContainerOpen
 
 ```js
 const selected = [{ label: 'CUSTOM CHIP COMPONENT', Email: 'value' }];
+const options = [
+  { label: 'big field some words', Email: 'Email' },
+  { label: 'big field some words 2', Email: 'Email 2' },
+  { label: 'big field some words 3', Email: 'Email 3' },
+  { label: 'big field some words 4', Email: 'Email 4' },
+  { label: 'big field some words 5', Email: 'Email 5' },
+  { label: 'big field some words 6', Email: 'Email 6' },
+  { label: 'big field some words 7', Email: 'Email 7' },
+];
+const customOptionsClasses = function() {
+  return {
+    optionsContainer: {
+      border: '3px solid red !important',
+    },
+    menuItemRoot: {
+      color: 'green',
+    },
+    menuItemSelected: {
+      border: '3px solid blue !important',
+    }
+  };
+}
 const chipComponent = function({ chip }) { return ( <span style={{ border: '1px solid red' }}>{chip.label}</span> )};
 
 <Handler>
   <MaterialChips
     selected={selected}
+    options={options}
     chipComponent={chipComponent}
+    optionsClasses={customOptionsClasses}
     label="Label"
   />
 </Handler>

src/MaterialChips/Options.js

@@ -4,6 +4,7 @@ import cx from 'classnames'
 import Paper from 'material-ui/Paper'
 import { MenuItem } from 'material-ui/Menu'
 import { withStyles } from 'material-ui/styles'
+import deepmerge from 'deepmerge'
 
 const styles = theme => ({
   optionsContainer: {
@@ -56,6 +57,10 @@ const Options = ({ classes, open, options, onSelect, fields, focus }) => {
           <MenuItem
             key={option.label + option.Email}
             onClick={() => onSelect(option)}
+            classes={{
+              root: classes.menuItemRoot,
+              selected: classes.menuItemSelected,
+            }}
             selected={focus === index}
           >
             <span
@@ -77,4 +82,10 @@ Options.propTypes = {
   focus: PropTypes.number,
 }
 
-export default withStyles(styles)(Options)
+export default (customStyles) => {
+  if (customStyles) {
+    return withStyles(theme => deepmerge(styles(theme), customStyles(theme)))(Options)
+  }
+
+  return withStyles(styles)(Options)
+}

src/MaterialChips/index.js

@@ -8,7 +8,7 @@ import Fuse from 'fuse.js'
 import copy from 'copy-to-clipboard'
 
 import Chip from './Chip'
-import Options from './Options'
+import createOptions from './Options'
 import { TYPES, acceptedCharCodes, validate, mimicFuseSearch } from './helpers'
 import styles from './styles'
 
@@ -29,6 +29,7 @@ class MaterialChips extends Component {
     /** clear input text after add an item */
     clearAfterAdd: PropTypes.bool,
 
+    /** react component to render a chip */
     chipComponent: PropTypes.func,
 
     /** Disable input */
@@ -65,6 +66,9 @@ class MaterialChips extends Component {
     /** To show in autocomplete  */
     options: PropTypes.arrayOf(PropTypes.object),
 
+    /** fn(theme) => ({ optionsContainer, optionsContainerOpen }) to override options styles */
+    optionsClasses: PropTypes.func,
+
     /** Must receive state from props */
     selected: PropTypes.arrayOf(PropTypes.object),
 
@@ -82,7 +86,6 @@ class MaterialChips extends Component {
     openOnFocus: false,
     chipsDisabled: false,
     inputDisabled: false,
-    // inputProps: {},
     options: [],
     submitKeyCodes: [13, 9, 191],
     clearAfterAdd: true,
@@ -103,6 +106,8 @@ class MaterialChips extends Component {
     optionsFocus: null,
   }
 
+  OptionsComponent = createOptions(this.props.optionsClasses)
+
   componentDidMount() {
     document.addEventListener('mousedown', this.handleClickOutside)
     this.configureFuse()
@@ -653,12 +658,13 @@ class MaterialChips extends Component {
           }
         </FormControl>
 
-        <Options
+        <this.OptionsComponent
           open={optionsOpen}
           options={this.state.options}
           focus={this.state.optionsFocus}
           onSelect={this.addItemObject}
           fields={this.props.fields}
+          optionsClasses={this.props.optionsClasses}
         />
 
       </div>

styleguide/index.html

@@ -7,5 +7,5 @@
 	</head>
 	<body>
 		<div id="app"></div>
-	<script type="text/javascript" src="build/bundle.c104071a.js"></script></body>
+	<script type="text/javascript" src="build/bundle.9d6628f6.js"></script></body>
 </html>