diff options
author | beatrix <beatrix.bitrot@gmail.com> | 2017-11-18 20:32:17 -0500 |
---|---|---|
committer | GitHub <noreply@github.com> | 2017-11-18 20:32:17 -0500 |
commit | bcda3f85ce1473e9285299979a471525b2cd7034 (patch) | |
tree | 80c346945531fe17bdf94b70ecd206a07edd5258 /app/javascript/themes/glitch/features/compose/components/dropdown.js | |
parent | dec960c828390466c8fa802ac30e68041a64bff6 (diff) | |
parent | 92cc79be7206534e8c9a9957cc89b5d0eb0bcfac (diff) |
Merge pull request #226 from glitch-soc/glitch-theme
Glitch/Vanilla themes
Diffstat (limited to 'app/javascript/themes/glitch/features/compose/components/dropdown.js')
-rw-r--r-- | app/javascript/themes/glitch/features/compose/components/dropdown.js | 77 |
1 files changed, 77 insertions, 0 deletions
diff --git a/app/javascript/themes/glitch/features/compose/components/dropdown.js b/app/javascript/themes/glitch/features/compose/components/dropdown.js new file mode 100644 index 000000000..f3d9f094e --- /dev/null +++ b/app/javascript/themes/glitch/features/compose/components/dropdown.js @@ -0,0 +1,77 @@ +// Package imports. +import React from 'react'; +import PropTypes from 'prop-types'; + +// Our imports. +import IconButton from 'themes/glitch/components/icon_button'; + +const iconStyle = { + height : null, + lineHeight : '27px', +}; + +export default class ComposeDropdown extends React.PureComponent { + + static propTypes = { + title: PropTypes.string.isRequired, + icon: PropTypes.string, + highlight: PropTypes.bool, + disabled: PropTypes.bool, + children: PropTypes.arrayOf(PropTypes.node).isRequired, + }; + + state = { + open: false, + }; + + onGlobalClick = (e) => { + if (e.target !== this.node && !this.node.contains(e.target) && this.state.open) { + this.setState({ open: false }); + } + }; + + componentDidMount () { + window.addEventListener('click', this.onGlobalClick); + window.addEventListener('touchstart', this.onGlobalClick); + } + componentWillUnmount () { + window.removeEventListener('click', this.onGlobalClick); + window.removeEventListener('touchstart', this.onGlobalClick); + } + + onToggleDropdown = () => { + if (this.props.disabled) return; + this.setState({ open: !this.state.open }); + }; + + setRef = (c) => { + this.node = c; + }; + + render () { + const { open } = this.state; + let { highlight, title, icon, disabled } = this.props; + + if (!icon) icon = 'ellipsis-h'; + + return ( + <div ref={this.setRef} className={`advanced-options-dropdown ${open ? 'open' : ''} ${highlight ? 'active' : ''} `}> + <div className='advanced-options-dropdown__value'> + <IconButton + className={'inverted'} + title={title} + icon={icon} active={open || highlight} + size={18} + style={iconStyle} + disabled={disabled} + onClick={this.onToggleDropdown} + /> + </div> + <div className='advanced-options-dropdown__dropdown'> + {this.props.children} + </div> + </div> + ); + } + +} |