likeopera-frontend/DropDownButton.js

import React from 'react';
import PropTypes from 'prop-types';

import DropDownBase from './DropDownBase.js';

export default class DropDownButton extends React.PureComponent
{
    static propTypes = {
        checkable: PropTypes.bool,
        whole: PropTypes.bool,
        checked: PropTypes.bool,
        className: PropTypes.string,
        icon: PropTypes.string,
        checkedIcon: PropTypes.string,
        text: PropTypes.string,
        checkedText: PropTypes.string,
        onClick: PropTypes.func,
    }

    state = { pressed: false }

    componentDidUpdate(prevProps, prevState)
    {
        if (prevProps.hidden && !this.props.hidden &&
            DropDownBase.instances[this.props.dropdownId].isVisible())
        {
            DropDownBase.instances[this.props.dropdownId].showAt(this.refs.btn, this.unpress);
        }
    }

    render()
    {
        return <a ref="btn" title={(this.props.checked ? this.props.checkedTitle : null) || this.props.title} onClick={this.onClickButton}
            className={'button '+(this.props.dropdownId ? 'show-dropdown ' : '')+(this.props.checked ? 'checked ' : '')+
            (this.props.hidden ? 'hidden ' : '')+
            (this.state.pressed ? 'pressed ' : '')+(this.props.className || '')}>
            {this.props.icon ? <img src={'icons/'+(this.props.checked ? this.props.checkedIcon : this.props.icon)+'.png'} /> : null}
            {(this.props.checked ? this.props.checkedText : this.props.text) || null}
            {this.props.dropdownId ? <span className="down" onClick={this.onClickDown}></span> : null}
        </a>
    }

    toggle = () =>
    {
        if (!this.state.pressed)
        {
            DropDownBase.hideAll();
            DropDownBase.instances[this.props.dropdownId].showAt(this.refs.btn, this.unpress);
        }
        else
            DropDownBase.instances[this.props.dropdownId].hide();
        this.setState({ pressed: !this.state.pressed });
    }

    unpress = () =>
    {
        this.setState({ pressed: false });
    }

    onClickButton = (ev) =>
    {
        if (this.props.whole || this.props.checkable && this.state.pressed)
            this.toggle();
        if (this.props.checkable)
        {
            if (this.props.onClick)
                this.props.onClick(!this.props.checked);
        }
        else if (this.props.onClick)
            this.props.onClick();
        ev.stopPropagation();
    }

    onClickDown = (ev) =>
    {
        this.toggle();
        ev.stopPropagation();
    }
}