diff --git a/README.md b/README.md index c2f698d..5f3afe2 100644 --- a/README.md +++ b/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).
/!\ REQUIRED: each object must expose a 'value' property. | | onChange | function | | Triggers when selecting/unselecting an option from the Menu.
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.
/!\ REQUIRED: each node must expose a `value` property. This value property will be used by default for both option's value and label.
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 | | 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 diff --git a/package.json b/package.json index 5606db9..f8a1b2d 100644 --- a/package.json +++ b/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 ", diff --git a/src/CodeExample1.js b/src/CodeExample1.js index 5d3854f..c3e7b9a 100644 --- a/src/CodeExample1.js +++ b/src/CodeExample1.js @@ -58,6 +58,18 @@ class CodeExample extends Component { + +
Option A
+
Option B
+
Option C
+
+ } } diff --git a/src/SuperSelectField.js b/src/SuperSelectField.js index 84b03a4..13303de 100644 --- a/src/SuperSelectField.js +++ b/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 { (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) ? : 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 {
(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 + }} >