mui-downshift

mui-downshift

Thin layer over paypal's downshift to use Material-UI 1.0 visual components

For examples of in action, see demo or view the source

$3

- Uses windowing for performance (via react-virtualized)
- Asynchronous loading of items
- Infinite scrolling
- Paginated loading
- Delayed loading of items until menu is opened
- Customizable rendering (see getListItem, getInputProps, etc)
- Control opening menu on input focus (or only on explict toggle)
- Control height of menu based on number of items or pixels
- Dynamic row heights using react-virtualized's CellMeasurer
- Uses a portal to solve the z-index / stacking context problem and Material-UI's popover z-index value
- All other capabilities inherited from downshift

$3

Property | Type | Required | Description
-------- | ---- | -------- | -----------
items | Array | ✓ | Items to show in menu
getListItem | Function | | Return an instance of Material-UI's for each item. defaultProps implementation handles simple cases.
getListItemKey | Function | | If defined, should return a deterministic key based on index within items, instead of just the default (default). Passed to react-virtualized's CellMeasurer keyMapper prop. Defining helps resolve an issue with menu changing size or the scroll position jumping around when appending more items. See the paginated fetch for an example.
getInputProps | Function | | Customize look of Material-UI's and . Result of function is merged with Downshift's getInputProps
showEmpty | Boolean | | If true, will render a single item if items is empty. Will call getListItem (if defined) with a null item to handle display
includeFooter | Boolean | | If true, will render an additional item as the last item. Will call getListItem (if defined) with a null item to handle display. Useful for paginated scrolling (see demo) and showing loading status beyond the loading prop.
getInfiniteLoaderProps | Function | | If provided, will wrap menu in react-virtualized InfiniteLoader and pass the props returned from the function. Be sure to provide all required props (isRowLoaded, rowCount, and loadMoreRows). Used for infinite scrolling (see demo).
getVirtualListProps | Function | | Pass or override props provided to underlying react-virtualized List component. Note: Setting rowHeight will remove CellMeasurer usage, which is used to calculate heights dynamically. This can provide better performance, especially if set as a static value (ex. 48)
getRootProps | Function | | Provide props to the root element that wraps the input and menu components
menuItemCount | Number | | Number of items to show on menu before scrolling. Default 5
menuHeight | Number | | Number of pixels to set menu before scrolling. Overrides menuItemCount if set. Default null
loading | Boolean | | Show loading indicator
focusOnClear | Boolean | | Focus input after clearing. See issue #9
all props available on downshift | | | itemToString, onChange, onStateChange, ...
variant | 'standard', 'filled', 'outlined' | | MUI input variant. Default 'standard'

$3

This project has some storybook stories.

To run storybook, you have to install the story dependencies first:

``bash
$ cd stories
$ yarn install
$ cd ..
`

Then use yarn to run the storybook script:

`bash
$ yarn storybook
``