@bigfishtv/cockpit/src/components/button/dropdown/DropdownButton.js

import PropTypes from 'prop-types'
import React, { Component } from 'react'
import classnames from 'classnames'

import Button from '../Button'
import Icon from '../../Icon'

/**
 * Is the core Dropdown component
 */
export default class DropdownButton extends Component {
	static propTypes = {
		/** Size string as per turret guidelines i.e. xsmall, small, medium, large, xlarge */
		size: PropTypes.string,
		/** Button's text, by default is just a carat button with no button text */
		text: PropTypes.oneOfType([PropTypes.string, PropTypes.node]),
		/** Outputs custom button class e.g 'primary' = 'button-primary' */
		style: PropTypes.string,
		/** Direction of dropdown menu -- up or down */
		direction: PropTypes.oneOf(['up', 'down']),
		/** whether or not to align dropdown menu to left of button  */
		pullRight: PropTypes.bool,
		/** Whether or not to display carat */
		caret: PropTypes.bool,
		/** Icon name to display */
		icon: PropTypes.string,
	}

	static defaultProps = {
		text: null,
		size: 'medium',
		style: 'default',
		direction: 'down',
		pullRight: false,
		caret: true,
		icon: null,
	}

	constructor() {
		super()
		this.state = { expanded: false }
		this.toggleOpen = this.toggleOpen.bind(this)
	}

	componentDidUpdate(prevProps, prevState) {
		const { wasExpanded } = prevState
		const { expanded } = this.state
		if (expanded != wasExpanded) {
			if (expanded) {
				document.addEventListener('mouseup', this.toggleOpen)
			} else {
				document.removeEventListener('mouseup', this.toggleOpen)
			}
		}
	}

	toggleOpen() {
		this.setState({ expanded: !this.state.expanded })
	}

	render() {
		const { icon, text, direction, pullRight, style, size, caret, disabled, children } = this.props
		return (
			<div className={'button-group drop' + direction}>
				<Button style={style} size={size} disabled={disabled} onClick={this.toggleOpen}>
					{icon && (
						<span>
							<Icon name={icon} size={18} />{' '}
						</span>
					)}
					<span>{text} </span>
					{caret && <span className="caret caret-right" />}
				</Button>
				<ul className={classnames('dropdown-menu', { open: this.state.expanded, 'dropdown-menu-right': pullRight })}>
					{children}
				</ul>
			</div>
		)
	}
}