material-ui-enhanced-fields

A collection of enhanced fields for use with material-ui (v1 beta).

• A ComboboxField.

See storybook for live demos.

Install

yarn add material-ui-enhanced-fields@next

npm i material-ui-enhanced-fields@next

Components

• ComboboxField

ComboboxField

A customisable 'combobox' field that allows both text input and selection from a drop-down menu. With multiple set to false (default) the selected value is displayed as text in the <input/> element. With multiple set to true selectedItems are stored in a prefix. The default rendering is Chip's. Items can be grouped into sublist by supplying the a groupField prop (default is 'group'). Based on the Downshift library.

Basic Examples

const DATA = ['apples', 'oranges'];
 
<ComboboxField
  items={DATA}
  TextFieldProps={{ floatingLabelText: 'Pick a food' }}
/>

const DATA = [{text: 'apple', type: 'fruit'}, {text: 'tomato', type: 'veg'}];
<ComboboxField
  items={DATA}
  itemToString={item => item === null ? '' : item.text}
  groupField={'type'}
  TextFieldProps={{ floatingLabelText: 'Pick a food' }}
/>

Props

prop	type	default	description
classes	Object		Override the CSS classes (see implementation).
className	'string'		CSS class for the root element.
filterFunc	function(items: Array, query: string)		Override the default function for filtering the items based on the field's input value.
items	Array	[]	The array of possible items to select.
groupField	string	'group'	The name of the key to group each item object by. (Optional, if items aren't objects or don't have a field to group by, they won't be grouped.)
menuBottomElement	Object		An element to display at the bottom of the menu.
menuBottomFixed	boolean	true	Fix the menuBottom element so it's reachable without scrolling.
MenuProps	Object		Props to be merged into the Menu component.
multiple	boolean	false	Allow multiple selected items.
noMatchProps	Object		Props to be merged to the component displayed when there are no matched items.
noMatchText	node		Text to be displayed if there are no matched items to display in the menu.
renderMenuItem	function({downShiftProps: {}, index: number, item: any, key: string, selectedItems: Array})		Override the default rendering of each menu item. Should return an element that employ's the Downshift getItemProps 'prop getter' function. See source code and Downshift.
renderSelectedItem	function({deselect: function, hasFocus: boolean, item: any, itemToString: function})		Override the default rendering (uses Chips) of each selected item. (Only applies when the multiple is true.) deselect: A callback that will deselect the item. hasFocus: True if item has been focused with keyboard. item: The item to render. itemToString: The itemToString prop supplied for convenience.
SubheaderProps	Object		Props to be merged ino each Subheader.
TextFieldProps	Object		Props for the TextField component.

In addtion, you can pass all the props of the Downshift component, except the inputValue. See here.