Skip to content

Latest commit

 

History

History
54 lines (45 loc) · 4.17 KB

README.md

File metadata and controls

54 lines (45 loc) · 4.17 KB
Raw

mui-downshift

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

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

Features

  • 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

Props

Property Type Required Description
items Array ✓ Items to show in menu
getListItem Function Return an instance of Material-UI's <ListItem /> 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. Definining 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 <FormControl> and <Input />. 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'

Running Storybook

This project has some storybook stories.

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

$ cd stories
$ yarn install
$ cd ..

Then use yarn to run the storybook script:

$ yarn storybook