80 lines
2.5 KiB
JavaScript
80 lines
2.5 KiB
JavaScript
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();
|
|
}
|
|
}
|