diff options
author | kumavis <kumavis@users.noreply.github.com> | 2018-02-28 03:25:29 +0800 |
---|---|---|
committer | GitHub <noreply@github.com> | 2018-02-28 03:25:29 +0800 |
commit | 3fefccd37219c9b4b513fc8d929723e07022b9c4 (patch) | |
tree | 22865ecd672570a6162ac3c9402ec9d63ad3f7ef /ui/app/components/dropdowns/simple-dropdown.js | |
parent | 6a7ea00cd34f83b257f6b4280a5f4e20aa5d34ee (diff) | |
parent | ced62ac551a095c8f94f550f0c01a9d4fd04ce5b (diff) | |
download | tangerine-wallet-browser-3fefccd37219c9b4b513fc8d929723e07022b9c4.tar.gz tangerine-wallet-browser-3fefccd37219c9b4b513fc8d929723e07022b9c4.tar.zst tangerine-wallet-browser-3fefccd37219c9b4b513fc8d929723e07022b9c4.zip |
Merge branch 'master' into mascara-deploy
Diffstat (limited to 'ui/app/components/dropdowns/simple-dropdown.js')
-rw-r--r-- | ui/app/components/dropdowns/simple-dropdown.js | 92 |
1 files changed, 92 insertions, 0 deletions
diff --git a/ui/app/components/dropdowns/simple-dropdown.js b/ui/app/components/dropdowns/simple-dropdown.js new file mode 100644 index 000000000..bba088ed1 --- /dev/null +++ b/ui/app/components/dropdowns/simple-dropdown.js @@ -0,0 +1,92 @@ +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 |