68 lines
2.2 KiB
JavaScript
68 lines
2.2 KiB
JavaScript
import React from 'react';
|
|
|
|
import DropDownBase from './DropDownBase.js';
|
|
|
|
export default class DropDownButton extends React.PureComponent
|
|
{
|
|
state = { pressed: false, checked: 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.state.checked ? this.props.checkedTitle : null) || this.props.title} onClick={this.onClickButton}
|
|
className={'button '+(this.props.dropdownId ? 'show-dropdown ' : '')+(this.state.checked ? 'checked ' : '')+
|
|
(this.props.hidden ? 'hidden ' : '')+
|
|
(this.state.pressed ? 'pressed ' : '')+(this.props.className || '')}>
|
|
{this.props.icon ? <img src={'icons/'+(this.state.checked && this.props.checkedIcon || this.props.icon)+'.png'} /> : null}
|
|
{this.state.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)
|
|
{
|
|
this.setState({ checked: !this.state.checked });
|
|
if (this.props.onClick)
|
|
this.props.onClick(this.state.checked);
|
|
}
|
|
else if (this.props.onClick)
|
|
this.props.onClick();
|
|
ev.stopPropagation();
|
|
}
|
|
|
|
onClickDown = (ev) =>
|
|
{
|
|
this.toggle();
|
|
ev.stopPropagation();
|
|
}
|
|
}
|