1
0
mirror of https://github.com/kremalicious/metamask-extension.git synced 2024-12-23 09:52:26 +01:00
metamask-extension/ui/app/components/dropdowns/simple-dropdown.js
2018-02-06 22:03:37 -08:00

93 lines
2.3 KiB
JavaScript

const { Component } = require('react')
const PropTypes = require('prop-types')
const h = require('react-hyperscript')
const classnames = require('classnames')
const R = require('ramda')
class SimpleDropdown extends Component {
constructor (props) {
super(props)
this.state = {
isOpen: false,
}
}
getDisplayValue () {
const { selectedOption, options } = this.props
const matchesOption = option => option.value === selectedOption
const matchingOption = R.find(matchesOption)(options)
return matchingOption
? matchingOption.displayValue || matchingOption.value
: selectedOption
}
handleClose () {
this.setState({ isOpen: false })
}
toggleOpen () {
const { isOpen } = this.state
this.setState({ isOpen: !isOpen })
}
renderOptions () {
const { options, onSelect, selectedOption } = this.props
return h('div', [
h('div.simple-dropdown__close-area', {
onClick: event => {
event.stopPropagation()
this.handleClose()
},
}),
h('div.simple-dropdown__options', [
...options.map(option => {
return h(
'div.simple-dropdown__option',
{
className: classnames({
'simple-dropdown__option--selected': option.value === selectedOption,
}),
key: option.value,
onClick: () => {
if (option.value !== selectedOption) {
onSelect(option.value)
}
this.handleClose()
},
},
option.displayValue || option.value,
)
}),
]),
])
}
render () {
const { placeholder } = this.props
const { isOpen } = this.state
return h(
'div.simple-dropdown',
{
onClick: () => this.toggleOpen(),
},
[
h('div.simple-dropdown__selected', this.getDisplayValue() || placeholder || 'Select'),
h('i.fa.fa-caret-down.fa-lg.simple-dropdown__caret'),
isOpen && this.renderOptions(),
]
)
}
}
SimpleDropdown.propTypes = {
options: PropTypes.array.isRequired,
placeholder: PropTypes.string,
onSelect: PropTypes.func,
selectedOption: PropTypes.string,
}
module.exports = SimpleDropdown