Nighttime Pachinko Marathon

    material-ui-enhanced-fields

    2.0.0 • Public • Published

    material-ui-enhanced-fields

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

    demo2.gif

    See storybook for live demos.

    Install

    yarn add material-ui-enhanced-fields@next
    
    npm i material-ui-enhanced-fields@next
    

    Components

    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.

    Install

    npm i material-ui-enhanced-fields

    DownloadsWeekly Downloads

    10

    Version

    2.0.0

    License

    MIT

    Unpacked Size

    24.2 kB

    Total Files

    4

    Last publish

    Collaborators

    • jf248