MoleculeSelect

MoleculeSelect is a customized select created from a combination of AtomInput, MoleculeInputTags, MoleculeDropdownList and MoleculeDropdownOption

It allows Single and Multiple Selection



Installation

``sh
$ npm install @s-ui/react-molecule-select --save
`

Usage

`js
import MoleculeSelect, {
moleculeSelectDropdownListSizes
} from '@s-ui/react-molecule-select'
import MoleculeSelectOption from '@s-ui/react-molecule-dropdown-option'

const IconCloseTag = () => x
const IconArrowDown = () => ▼

const options = ['John', 'Paul', 'George', 'Ringo']
`

$3

#### Basic usage

`js
placeholder="Select a Country..."
onChange={(_, {value}) => console.log(value)}
iconArrowDown={}
>
{options.map((option, i) => (

{option}

))}

`

#### With default value

`js
placeholder="Select a Country..."
onChange={(_, {value}) => console.log(value)}
iconArrowDown={}
value="John"
>
{options.map((option, i) => (

{option}

))}

`

#### Large List

`js
placeholder="Select a Country..."
onChange={(_, {value}) => console.log(value)}
iconArrowDown={}
size={moleculeSelectDropdownListSizes.LARGE}
>
{options.map((option, i) => (

{option}

))}

`

#### With a search input

`js
placeholder="Select a Country..."
onChange={(_, {value}) => console.log(value)}
iconArrowDown={}
hasSearch
onSearch={({value}) => console.log(value)}
searchPlaceholder="Search a country..."
noResults={



}
size={moleculeSelectDropdownListSizes.LARGE}
>
{options.map((option, i) => (

{option}

))}

`

#### With state highlight

Can be success, error or alert.

`js
placeholder="Select a Country..."
onChange={(_, {value}) => console.log(value)}
iconArrowDown={}
state="success"
>
{options.map((option, i) => (

{option}

))}

`

$3

#### Basic usage

`js
iconCloseTag={}
iconArrowDown={}
multiselection
value={['John', 'Paul']}
>
{options.map((option, i) => (

{option}

))}

`

#### With selected items limit

`js
iconCloseTag={}
iconArrowDown={}
multiselection
value={['John', 'Paul']}
max={2}
>
{options.map((option, i) => (

{option}

))}

`

Managing State

$3

MoleculeSelect is a stateless component, so to manage dynamic options we need to create a wrapper component that manages this and pass proper props and proper children (MoleculeSelectOption) to MoleculeSelect

Example:

`js
import React, {Component} from 'react'

import MoleculeSelect from '@s-ui/react-molecule-select'
import MoleculeSelectOption from '@s-ui/react-molecule-dropdown-option'

const options = ['John', 'Paul', 'George', 'Ringo']

export default class SelectSingleWithAsyncOptions extends Component {
state = {value: ''}

onChange = async (e, {value}) => {
this.setState({value})
}

render() {
const {value} = this.state
const {onChange, props} = this

return (

{options.map((option, i) => (

{option}

))}

)
}
}
`

so then, the SelectSingleWithAsyncOptions can used in this way...

`js
} />
`

$3

There's a hoc called withStateValue available at @s-ui/hoc
that can be used to simplify the use of this component with internal state

`js
import MoleculeSelect from '@s-ui/react-molecule-select'
import MoleculeSelectOption from '@s-ui/react-molecule-dropdown-option'

import withDynamicOptions from './hoc/withDynamicOptions'
import {withStateValue} from '@s-ui/hoc'

const MoleculeSelectWithState = withStateValue(MoleculeSelect)
const options = ['John', 'Paul', 'George', 'Ringo']
`

so then, the MoleculeSelectWithState can be used in this way...

`js
placeholder="Type a Country name..."
onChange={(_, {value}) => console.log(value)}
iconClear={}
>
{options.map((option, i) => (

{option}

))}

`

Create custom option compatible w/ MoleculeSelect

If you need an option that cannot be customized from MoleculeDropdownOption you can create your own option compatible w/ MoleculeSelect y MoleculeSelect by using the handlersFactory method available in MoleculeDropdownOption that you can use to create proper handlers needed to work properly along w/ MoleculeSelect y MoleculeSelect

`js
import React from 'react'
import {handlersFactory} from '@s-ui/react-molecule-dropdown-option'

const BASE_CLASS = 'AlternativeOption'

const AlternativeOption = ({children, onSelect, innerRef, value}) => {
const {handleClick, handleKeyDown, handleFocus} = handlersFactory({
value,
onSelect
})

return (
className={BASE_CLASS}
ref={innerRef}
tabIndex="0"
onFocus={handleFocus}
onClick={handleClick}
onKeyDown={handleKeyDown}
>
{children}