Added disabled prop

README.md

@@ -35,6 +35,7 @@ This component requires 4 dependencies :
 | hintTextAutocomplete | string | 'Type something' | Placeholder text for the autocomplete. |
 | noMatchFound | string | 'No match found' | Placeholder text when the autocomplete filter fails. |
 | multiple | bool | false | Include this property to turn superSelectField into a multi-selection dropdown. Checkboxes will appear.|
+| disabled | bool | false | Include this property to disable superSelectField.|
 | value | null, object, object[] | null | Selected value(s).<br>/!\ REQUIRED: each object must expose a 'value' property. |
 | onChange | function | | Triggers when selecting/unselecting an option from the Menu.<br>signature: (selectedValues, name) with `selectedValues` array of selected values based on selected nodes' value property, and `name` the value of the superSelectField instance's name property |
 | children | any | [] | Datasource is an array of any type of nodes, styled at your convenience.<br>/!\ REQUIRED: each node must expose a `value` property. This value property will be used by default for both option's value and label.<br>A `label` property can be provided to specify a different value than `value`. |
@@ -57,6 +58,9 @@ PropTypes should raise warnings if implementing otherwise.
 | innerDivStyle | object | {} | Styles to be applied to the inner div of MenuItems hosting each of your children components. |
 | selectedMenuItemStyle | object | {color: muiTheme.menuItem.selectedTextColor} | Styles to be applied to the selected MenuItem. |
 | selectionsRenderer | function | see below | Provide your own renderer for selected options. Defaults to concatenating children's values text. Check CodeExample4 for a more advanced renderer example. |
+| checkedIcon | SVGicon | <CheckedIcon /> | The SvgIcon to use for the checked state. This is useful to create icon toggles. |
+| uncheckedIcon | SVGicon | | The SvgIcon to use for the unchecked state. This is useful to create icon toggles. |
+| hoverColor | string | 'rgba(69, 90, 100, 0.1)' | Override the hover background color. |
 
 ####Default functions
 | Name | Default function |
@@ -95,6 +99,8 @@ npm test
 ## Contributing
 In lieu of a formal style guide, take care to maintain the existing coding style. Add unit tests for any new or changed functionality. Lint and test your code.
 
+## Known bugs
+- keyboard-focus handling
 
 ## TodoList
 
@@ -119,6 +125,8 @@ In lieu of a formal style guide, take care to maintain the existing coding style
   - [ ] canAutoPosition
   - [ ] anchorOrigin
   - [ ] popoverStyle
+  - [ ] hoverColor
+  - [x] disabled
   - [ ] required
   - [ ] errorMessage
   - [ ] errorStyle

package.json

@@ -1,6 +1,6 @@
 {
   "name": "material-ui-superselectfield",
-  "version": "1.0.0",
+  "version": "1.1.0",
   "description": "original Material-UI's SelectField component enhanced with autocompletion, multiselection, custom renderers, and infinite loading.",
   "private": false,
   "author": "Raphaël Morineau <raphael.morineau@gmail.com>",

src/CodeExample1.js

@@ -58,6 +58,18 @@ class CodeExample extends Component {
         </SuperSelectField>
       </div>
 
+      <SuperSelectField
+        name='disabled'
+        disabled
+        hintText='Disabled'
+        value={state1}
+        style={{ minWidth: 150, marginTop: 40 }}
+      >
+        <div value='A'>Option A</div>
+        <div value='B'>Option B</div>
+        <div value='C'>Option C</div>
+      </SuperSelectField>
+
     </section>
   }
 }

src/SuperSelectField.js

@@ -115,9 +115,13 @@ SelectionsPresenter.defaultProps = {
   hintText: 'Click me',
   value: null,
   selectionsRenderer: (values, hintText) => {
-    if (!values || !values.length) return hintText
+    if (!values) return hintText
     const { value, label } = values
-    if (Array.isArray(values)) return values.map(({ value, label }) => label || value).join(', ')
+    if (Array.isArray(values)) {
+      return values.length
+        ? values.map(({ value, label }) => label || value).join(', ')
+        : hintText
+    }
     else if (label || value) return label || value
     else return hintText
   }
@@ -176,7 +180,7 @@ class SelectField extends Component {
 
   focusFirstMenuItem () {
     const firstMenuItem = findDOMNode(this.menu).querySelector('span')
-    firstMenuItem.focus()
+    if (firstMenuItem) firstMenuItem.focus()
     /* const firstMenuItem = this.menuItems.find(item => item !== null)
     this.setState({ menuItemsfocusState: [...this.state.menuItemsfocusState] })
     firstMenuItem.props.focusState = 'keyboard-focused' */
@@ -192,11 +196,11 @@ class SelectField extends Component {
    * Main Component Wrapper methods
    */
   handleClick = () => {
-    this.openMenu() // toggle instead of close ? (in case user changes  targetOrigin/anchorOrigin)
+    if (!this.props.disabled) this.openMenu() // toggle instead of close ? (in case user changes  targetOrigin/anchorOrigin)
   }
 
   handleKeyDown = (event) => {
-    if (/ArrowDown|Enter/.test(event.key)) this.openMenu()
+    if (!this.props.disabled && /ArrowDown|Enter/.test(event.key)) this.openMenu()
   }
 
   /**
@@ -277,13 +281,15 @@ class SelectField extends Component {
   }
 
   render () {
-    const { value, hintText, hintTextAutocomplete, noMatchFound, multiple, children, nb2show,
+    const { value, hintText, hintTextAutocomplete, noMatchFound, multiple, disabled, children, nb2show,
       showAutocompleteTreshold, autocompleteFilter, selectionsRenderer,
       style, menuStyle, elementHeight, innerDivStyle, selectedMenuItemStyle, menuGroupStyle } = this.props
 
+    const { baseTheme: {palette}, menuItem: {selectedTextColor} } = this.context.muiTheme
+
     // Default style depending on Material-UI context
     const mergedSelectedMenuItemStyle = {
-      color: this.context.muiTheme.menuItem.selectedTextColor, ...selectedMenuItemStyle
+      color: selectedTextColor, ...selectedMenuItemStyle
     }
 
     /**
@@ -303,8 +309,8 @@ class SelectField extends Component {
         <MenuItem
           key={groupIndex + index}
           tabIndex={index}
-          ref={ref => (this.menuItems[groupIndex + index] = ref)}
-          focusState={this.state.menuItemsfocusState[groupIndex + index]}
+          ref={ref => (this.menuItems[index] = ref)}
+          focusState={this.state.menuItemsfocusState[index]}
           checked={multiple && isSelected}
           leftIcon={(multiple && !isSelected) ? <UnCheckedIcon /> : null}
           primaryText={child}
@@ -314,7 +320,8 @@ class SelectField extends Component {
           onTouchTap={this.handleMenuSelection({ value: childValue, label })}
         />)]
     }
-    const menuItems = this.state.isOpen && children &&
+
+    const menuItems = !disabled && this.state.isOpen && children &&
       children.reduce((nodes, child, index) => {
         if (child.type !== 'optgroup') return menuItemBuilder(nodes, child, index)
 
@@ -339,10 +346,14 @@ class SelectField extends Component {
       <div
         ref={ref => (this.root = ref)}
         tabIndex='0'
-        style={{ cursor: 'pointer', ...style }}
         onKeyDown={this.handleKeyDown}
         onClick={this.handleClick}
         onBlur={this.handleBlur}
+        style={{
+          cursor: disabled ? 'not-allowed' : 'pointer',
+          color: disabled ? palette.disabledColor : palette.textColor,
+          ...style
+        }}
       >
 
         <SelectionsPresenter
@@ -455,12 +466,14 @@ SelectField.propTypes = {
   autocompleteFilter: PropTypes.func,
   selectionsRenderer: PropTypes.func,
   multiple: PropTypes.bool,
+  disabled: PropTypes.bool,
   onChange: PropTypes.func
 }
 
 // noinspection JSUnusedGlobalSymbols
 SelectField.defaultProps = {
   multiple: false,
+  disabled: false,
   nb2show: 5,
   hintText: 'Click me',
   hintTextAutocomplete: 'Type something',