original Material-UI's SelectField component enhanced with autocompletion, multiselection, custom renderers, and infinite loading.
npm install material-ui-superselectfield-effco[npm-image]: https://img.shields.io/npm/v/material-ui-superselectfield.svg
[npm-url]: https://npmjs.org/package/material-ui-superselectfield
[downloads-image]: https://img.shields.io/npm/dm/material-ui-superselectfield.svg
[downloads-url]: https://npmjs.org/package/material-ui-superselectfield
[standard-image]: https://img.shields.io/badge/code_style-standard-brightgreen.svg
[standard-url]: https://standardjs.com
npm i material-ui-superselectfield This component requires 4 dependencies :
- react
- react-dom
- material-ui
... so make sure they are installed in your project, or install them as well ;)
{ vertical: 'top', horizontal: 'left' } | Anchor position of the menu, accepted values: top, bottom / left, right |'', left, right |selectedValues array of selected values based on selected nodes' value property, and name the value of the superSelectField instance's name property |value property. This value property will be used by default for both option's value and label.label property can be provided to specify a different value than value. |showAutocompleteThreshold).label props, 'value' otherwise. |onRequestClose('clickAway') call. |#### Styling properties
| Name | Type | Default | Description |
|:---- |:---- |:---- |:---- |
| style | object | {} | Insert your own inlined styles, applied to the root component. |
| menuStyle | object | {} | Styles applied to the comtainer which will receive your children components. |
| menuGroupStyle | object | {} | Styles applied to the MenuItems hosting your \. |
| innerDivStyle | object | {} | Styles applied to the inner div of MenuItems hosting each of your children components. |
| menuFooterStyle | object | {} | Styles applied to the Menu's footer. |
| menuCloseButton | node | | A button for an explicit closing of the menu. Useful on mobiles. |
| 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 | see below | The SvgIcon to use for the checked state. This is useful to create icon toggles. |
| unCheckedIcon | SVGicon | see below | The SvgIcon to use for the unchecked state. This is useful to create icon toggles. |
| hoverColor | string | 'rgba(69, 90, 100, 0.1)' | Overrides the hover background color. |
| floatingLabelStyle | object | | Allows to change the styles of the floating label. |
| floatingLabelFocusStyle | object | | Allows to change the styles of the floating label when focused. |
| underlineStyle | object | | Allows to change the styles of the underline. |
| underlineFocusStyle | object | | Allows to change the styles of the underline when focused. |
| autocompleteUnderlineStyle | object | | Allows to change the styles of the searchTextField's underline. |
| autocompleteUnderlineFocusStyle | object | | Allows to change the styles of the searchTextField's underline when focused. |
#### Default functions
| Name | Default function |
|:---- |:---- |
| checkedIcon | |
| unCheckedIcon | |
| autocompleteFilter | ``(searchText, text) => !text || text.toLowerCase().includes(searchText.toLowerCase())` |
| selectionsRenderer | |(values, hintText) => {
if (!values) return hintText
const { value, label } = values
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
}
provided in the repository.Building
You can build the project with :
`
git clone https://github.com/Sharlaan/material-ui-superselectfield.git
npm i && npm start
`
It should open a new page on your default browser @ localhost:3000
Tests
npm test`- [x] implement onClose handler for multiple mode, to allow registering selected values in oneshot instead of exposing values at each selection (ie one single server request)
- [ ] set autoWidth to false automatically if width prop has a value
- [ ] add a css rule for this.root :focus { outline: 'none' }, and :hover { darken }
- [ ] add tests for focus states/styles when tabbing between multiple superSelectFields
- [ ] add tests for keystrokes
- [x] add proptypes checking for value and children
- [x] support of \
- [x] check rendering performance with 200 MenuItems (integrate react-infinite)
- [ ] implement the container for errors (absolutely positioned below the focusedLine)
Expose more props :
- [x] noMatchFound message
- [ ] floatingLabelText
- [ ] canAutoPosition
- [x] checkPosition
- [x] anchorOrigin
- [ ] popoverStyle
- [x] hoverColor
- [x] disabled
- [ ] required
- [ ] errorMessage
- [ ] errorStyle
- [x] add props.disableAutoComplete (default: false), or a nbItems2showAutocomplete (default: null, meaning never show the searchTextField)
- [x] make Autocomplete appears only if current numberOfMenuItems > props.autocompleteTreshold
- [x] implement a checkboxRenderer for MenuItem (or expose 2 properties CheckIconFalse & CheckIconTrue)
- [x] make a PR reimplementing MenuItem.insetChildren replaced with checkPosition={'left'(default) or 'right'}
- [ ] add an example with GooglePlaces