48 lines
1.7 KiB
JavaScript
48 lines
1.7 KiB
JavaScript
|
const React = require('react');
|
||
|
|
const DropDownBase = require('./DropDownBase.js');
|
||
|
|
|
||
|
|
var DropDownButton = module.exports = React.createClass({
|
||
|
|
render: function()
|
||
|
|
{
|
||
|
|
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.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>
|
||
|
|
},
|
||
|
|
getInitialState: function()
|
||
|
|
{
|
||
|
|
return { pressed: false, checked: false };
|
||
|
|
},
|
||
|
|
toggle: function()
|
||
|
|
{
|
||
|
|
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: function()
|
||
|
|
{
|
||
|
|
this.setState({ pressed: false });
|
||
|
|
},
|
||
|
|
onClickButton: function(ev)
|
||
|
|
{
|
||
|
|
if (this.props.whole || this.props.checkable && this.state.pressed)
|
||
|
|
this.toggle();
|
||
|
|
if (this.props.checkable)
|
||
|
|
this.setState({ checked: !this.state.checked });
|
||
|
|
ev.stopPropagation();
|
||
|
|
},
|
||
|
|
onClickDown: function(ev)
|
||
|
|
{
|
||
|
|
this.toggle();
|
||
|
|
ev.stopPropagation();
|
||
|
|
}
|
||
|
|
});
|