search

MaximilianPichler / material-ui-selectfield

https://maximilianpichler.github.io/material-ui-selectfield/
6 stars 4 forks source link
dropdown material-ui material-ui-selectfield react selectfield

readme

material-ui-selectfield

Travis npm package

:no_entry: [DEPRECATED]

THIS PROJECT IS DEPRECATED! PLEASE HEAD OVER TO https://github.com/Sharlaan/material-ui-superselectfield FOR UPDATES!

This repository was originally a fork of: https://github.com/Sharlaan/material-ui-superselectfield

Check it out and don't forget to star it ;)

Demo

https://maximilianpichler.github.io/material-ui-selectfield/

Installation

npm i -S material-ui-selectfield

Dependencies

Properties

Name Type Default Description
name string Required to differentiate between multiple instances of superSelectField in same page.
floatingLabel string or node The content to use for the floating label element.
hintText string Placeholder text for the main selections display.
hintTextAutocomplete string 'Search' Placeholder text for the autocomplete.
errorText string Include this property to show an error text.
noMatchFound string 'No match found' Placeholder text when the autocomplete filter fails.
anchorOrigin object { vertical: 'top', horizontal: 'left' } Anchor position of the menu, accepted values: top, bottom / left, right
checkPosition string '' Position of the checkboxes in multiple mode. Accepted values: '', left, right. If the default value is selected, the checkboxes are not shown
canAutoPosition bool true If present, this property allows the inner Popover component to position the menu in such way options are not hidden by the screen edges.
multiple bool false Include this property to turn superSelectField into a multi-selection dropdown. Checkboxes will appear.
open bool false Include this property to make the dropdown stay always open.
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.
onMenuOpen function () => {} Triggers when the dropdown menu is opened
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
onAutoCompleteTyping function () => {} Exposes the word typed in AutoComplete. Useful for triggering onType API requests.
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.
nb2show number 5 Number of options displayed from the menu.
elementHeight number, number[] 36 Height in pixels of each option element. If elements have different heights, you can provide them in an array.
showAutocompleteThreshold number 10 Maximum number of options from which to display the autocomplete search field.
For example, if autoComplete textfield need to be disabled, just set this prop with a value higher than children length.
autocompleteFilter function see below Provide your own filtering parser. Default: case insensitive.
The search field will appear only if there are more than 10 children (see showAutocompleteThreshold).
By default, the parser will check for label props, 'value' otherwise.
useLayerForClickAway bool false If true, the popover dropdown will render on top of an invisible layer, which will prevent clicks to the underlying elements, and trigger an 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 <CheckedIcon style={{ top: 'calc(50% - 12px)' }} />
unCheckedIcon <UnCheckedIcon style={{ top: 'calc(50% - 12px)' }} />
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
}