marcacyr / material-ui-superselectfield Goto Github PK

#material-ui-superSelectField

• Preview
• Installation
• Properties
• Usage examples
• Building
• Tests
• Contributing
• TodoList

##Preview (Live demo)

##Installation yarn add material-ui-superselectfield

This component requires 4 dependencies :

• react
• react-dom
• react-tap-event-plugin
• material-ui

... so make sure they are installed in your project, or install them as well ;)

Also don't forget to update your index.js entry file with :

import injectTapEventPlugin from 'react-tap-event-plugin'
injectTapEventPlugin()

##Properties

####Styling properties

####Default functions

(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
}

Check the CodeExampleX.js provided in the repository.

##Building

You can build the project with :

git clone https://github.com/Sharlaan/material-ui-superselectfield.git
yarn && yarn start

It should open a new page on your default browser @ localhost:3000

yarn test

In lieu of a formal style guide, take care to maintain the existing coding style. Add unit tests for any new or changed functionality. Lint and test your code.

• keyboard-focus handling combined with optgroups and autocompleted results
• dynamic heights calculation

• implement onClose handler for multiple mode, to allow registering selected values in oneshot instead of exposing values at each selection (ie one single server request)

• set autoWidth to false automatically if width prop has a value

• add a css rule for this.root :focus { outline: 'none' }, and :hover { darken }

• add tests for focus states/styles when tabbing between multiple superSelectFields

• add tests for keystrokes

• add proptypes checking for value and children

• support of <optgroup />

• check rendering performance with 200 MenuItems (integrate react-infinite)

• implement the container for errors (absolutely positioned below the focusedLine)

  Expose more props :

  • noMatchFound message
  • floatingLabelText
  • canAutoPosition
  • checkPosition
  • anchorOrigin
  • popoverStyle
  • hoverColor
  • disabled
  • required
  • errorMessage
  • errorStyle

• add props.disableAutoComplete (default: false), or a nbItems2showAutocomplete (default: null, meaning never show the searchTextField)

• make Autocomplete appears only if current numberOfMenuItems > props.autocompleteTreshold

• implement a checkboxRenderer for MenuItem (or expose 2 properties CheckIconFalse & CheckIconTrue)

• make a PR reimplementing MenuItem.insetChildren replaced with checkPosition={'left'(default) or 'right'}

• add an example with GooglePlaces