144 lines
3.6 KiB
JavaScript
144 lines
3.6 KiB
JavaScript
// Copyright (c) 2018 Dominic Masters
|
|
//
|
|
// MIT License
|
|
//
|
|
// Permission is hereby granted, free of charge, to any person obtaining
|
|
// a copy of this software and associated documentation files (the
|
|
// "Software"), to deal in the Software without restriction, including
|
|
// without limitation the rights to use, copy, modify, merge, publish,
|
|
// distribute, sublicense, and/or sell copies of the Software, and to
|
|
// permit persons to whom the Software is furnished to do so, subject to
|
|
// the following conditions:
|
|
//
|
|
// The above copyright notice and this permission notice shall be
|
|
// included in all copies or substantial portions of the Software.
|
|
//
|
|
// THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND,
|
|
// EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF
|
|
// MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND
|
|
// NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE
|
|
// LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION
|
|
// OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION
|
|
// WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
|
|
|
|
import React from 'react';
|
|
import ContextMenu from './ContextMenu';
|
|
import { Link } from 'react-router-dom';
|
|
|
|
export default (props) => {
|
|
return (
|
|
<div className="o-window__menu-bar">
|
|
{ props.children }
|
|
</div>
|
|
);
|
|
}
|
|
|
|
class MenuOption extends React.Component {
|
|
constructor(props) {
|
|
super(props);
|
|
|
|
//Bound Methods
|
|
this.onClickBound = this.onClick.bind(this);
|
|
this.onMouseLeaveBound = this.onMouseLeave.bind(this);
|
|
|
|
this.state = {
|
|
open: false,
|
|
disabled: props.disabled || false
|
|
}
|
|
}
|
|
|
|
|
|
hasMenu() {
|
|
return this.props.menu;
|
|
}
|
|
|
|
isMenuOpen() { return this.state.open; }
|
|
isDisabled() { return this.state.disabled; }
|
|
|
|
//Event Handlers
|
|
onClick() {
|
|
if(this.isDisabled()) return;
|
|
if(this.hasMenu()) {
|
|
this.setState({
|
|
open: !this.state.open
|
|
});
|
|
}
|
|
}
|
|
|
|
onMouseLeave() {
|
|
if(!this.hasMenu()) return;
|
|
if(!this.isMenuOpen()) return;
|
|
|
|
this.setState({
|
|
open: false
|
|
});
|
|
}
|
|
|
|
componentDidMount() {
|
|
//Add event listeners
|
|
this.refs.button.addEventListener('click', this.onClickBound);
|
|
this.refs.option.addEventListener('mouseleave', this.onMouseLeaveBound);
|
|
}
|
|
|
|
componentWillUnmount() {
|
|
//Remove event listeners
|
|
this.refs.button.removeEventListener('click', this.onClickBound);
|
|
this.refs.option.removeEventListener('mouseleave', this.onMouseLeaveBound);
|
|
}
|
|
|
|
//Render method
|
|
render() {
|
|
let menu;
|
|
let button;
|
|
|
|
if(this.props.menu) {
|
|
menu = (
|
|
<ContextMenu>
|
|
{ this.props.menu }
|
|
</ContextMenu>
|
|
);
|
|
clazz += " has-menu";
|
|
}
|
|
|
|
if(this.props.href) {
|
|
button = (
|
|
<a href={this.props.href} className="o-window__menu-bar-button" ref="button" target={this.props.target}>
|
|
{ this.props.title }
|
|
</a>
|
|
);
|
|
} else if(this.props.to) {
|
|
button = (
|
|
<Link to={this.props.to} className="o-window__menu-bar-button" ref="button" target={this.props.target}>
|
|
{ this.props.title }
|
|
</Link>
|
|
);
|
|
} else {
|
|
button = (
|
|
<div className="o-window__menu-bar-button" ref="button">
|
|
{this.props.title}
|
|
</div>
|
|
);
|
|
}
|
|
|
|
let clazz = "o-window__menu-bar-option"
|
|
if(this.props.disabled) {
|
|
clazz += " is-disabled";
|
|
}
|
|
|
|
if(this.state.open) {
|
|
clazz += " is-active";
|
|
}
|
|
|
|
return (
|
|
<div className={clazz} ref="option">
|
|
{ button }
|
|
{ menu }
|
|
</div>
|
|
);
|
|
}
|
|
};
|
|
|
|
export {
|
|
MenuOption
|
|
};
|