2016-06-04 00:44:33 +03:00
|
|
|
import React, { Component, PropTypes } from 'react';
|
2015-10-17 22:20:15 +03:00
|
|
|
import ReactDOM from 'react-dom';
|
2016-05-22 21:15:45 +03:00
|
|
|
import classnames from 'classnames';
|
2016-05-29 22:24:22 +03:00
|
|
|
import { themr } from 'react-css-themr';
|
|
|
|
import { MENU } from '../identifiers.js';
|
2015-11-21 16:26:17 +03:00
|
|
|
import { events, utils } from '../utils';
|
2016-05-29 22:24:22 +03:00
|
|
|
import InjectMenuItem from './MenuItem.js';
|
2015-10-13 03:37:11 +03:00
|
|
|
|
2015-10-17 22:20:15 +03:00
|
|
|
const POSITION = {
|
|
|
|
AUTO: 'auto',
|
|
|
|
STATIC: 'static',
|
2016-05-22 21:36:06 +03:00
|
|
|
TOP_LEFT: 'topLeft',
|
|
|
|
TOP_RIGHT: 'topRight',
|
|
|
|
BOTTOM_LEFT: 'bottomLeft',
|
|
|
|
BOTTOM_RIGHT: 'bottomRight'
|
2015-10-17 22:20:15 +03:00
|
|
|
};
|
2015-10-13 03:37:11 +03:00
|
|
|
|
2016-05-29 22:24:22 +03:00
|
|
|
const factory = (MenuItem) => {
|
2016-06-04 00:44:33 +03:00
|
|
|
class Menu extends Component {
|
2016-05-29 22:24:22 +03:00
|
|
|
static propTypes = {
|
2016-06-04 00:44:33 +03:00
|
|
|
active: PropTypes.bool,
|
|
|
|
children: PropTypes.node,
|
|
|
|
className: PropTypes.string,
|
|
|
|
onHide: PropTypes.func,
|
|
|
|
onSelect: PropTypes.func,
|
|
|
|
onShow: PropTypes.func,
|
|
|
|
outline: PropTypes.bool,
|
2016-06-10 00:12:29 +03:00
|
|
|
position: PropTypes.oneOf(Object.keys(POSITION).map(key => POSITION[key])),
|
2016-06-04 00:44:33 +03:00
|
|
|
ripple: PropTypes.bool,
|
|
|
|
selectable: PropTypes.bool,
|
|
|
|
selected: PropTypes.any,
|
|
|
|
theme: PropTypes.shape({
|
|
|
|
active: PropTypes.string,
|
|
|
|
bottomLeft: PropTypes.string,
|
|
|
|
bottomRight: PropTypes.string,
|
|
|
|
menu: PropTypes.string,
|
|
|
|
menuInner: PropTypes.string,
|
|
|
|
outline: PropTypes.string,
|
|
|
|
rippled: PropTypes.string,
|
|
|
|
static: PropTypes.string,
|
|
|
|
topLeft: PropTypes.string,
|
|
|
|
topRight: PropTypes.string
|
2016-05-29 22:24:22 +03:00
|
|
|
})
|
|
|
|
};
|
|
|
|
|
|
|
|
static defaultProps = {
|
|
|
|
active: false,
|
|
|
|
outline: true,
|
|
|
|
position: POSITION.STATIC,
|
|
|
|
ripple: true,
|
|
|
|
selectable: true
|
|
|
|
};
|
|
|
|
|
|
|
|
state = {
|
|
|
|
active: this.props.active,
|
|
|
|
rippled: false
|
|
|
|
};
|
|
|
|
|
|
|
|
componentDidMount () {
|
|
|
|
this.positionTimeoutHandle = setTimeout(() => {
|
|
|
|
const { width, height } = this.refs.menu.getBoundingClientRect();
|
2016-07-18 11:45:03 +03:00
|
|
|
const position = this.props.position === POSITION.AUTO
|
|
|
|
? this.calculatePosition()
|
|
|
|
: this.props.position;
|
2016-05-29 22:24:22 +03:00
|
|
|
this.setState({ position, width, height });
|
|
|
|
});
|
2015-10-17 22:20:15 +03:00
|
|
|
}
|
2016-05-22 21:15:45 +03:00
|
|
|
|
2016-05-29 22:24:22 +03:00
|
|
|
componentWillReceiveProps (nextProps) {
|
|
|
|
if (this.props.position !== nextProps.position) {
|
2016-07-18 11:45:03 +03:00
|
|
|
const position = nextProps.position === POSITION.AUTO
|
|
|
|
? this.calculatePosition()
|
|
|
|
: nextProps.position;
|
2016-05-29 22:24:22 +03:00
|
|
|
this.setState({ position });
|
|
|
|
}
|
|
|
|
|
2016-07-18 11:45:03 +03:00
|
|
|
/**
|
|
|
|
* If the menu is going to be activated via props and its not active, verify
|
|
|
|
* the position is appropriated and then show it recalculating position if its
|
|
|
|
* wrong. It should be shown in two consecutive setState.
|
|
|
|
*/
|
2016-05-29 22:24:22 +03:00
|
|
|
if (!this.props.active && nextProps.active && !this.state.active) {
|
2016-07-18 11:45:03 +03:00
|
|
|
if (nextProps.position === POSITION.AUTO) {
|
|
|
|
const position = this.calculatePosition();
|
|
|
|
if (this.state.position !== position) {
|
|
|
|
this.setState({ position, active: false }, () => {
|
|
|
|
this.activateTimeoutHandle = setTimeout(() => { this.show(); }, 20);
|
|
|
|
});
|
|
|
|
} else {
|
|
|
|
this.show();
|
|
|
|
}
|
|
|
|
} else {
|
|
|
|
this.show();
|
|
|
|
}
|
2016-05-29 22:24:22 +03:00
|
|
|
}
|
|
|
|
|
2016-07-18 11:45:03 +03:00
|
|
|
/**
|
|
|
|
* If the menu is being deactivated via props and the current state is
|
|
|
|
* active, it should be hid.
|
|
|
|
*/
|
2016-05-29 22:24:22 +03:00
|
|
|
if (this.props.active && !nextProps.active && this.state.active) {
|
|
|
|
this.hide();
|
|
|
|
}
|
2016-05-22 21:15:45 +03:00
|
|
|
}
|
|
|
|
|
2016-05-29 22:24:22 +03:00
|
|
|
componentWillUpdate (nextProps, nextState) {
|
|
|
|
if (!this.state.active && nextState.active) {
|
2016-10-06 21:18:35 +03:00
|
|
|
events.addEventsToDocument({
|
|
|
|
click: this.handleDocumentClick,
|
|
|
|
touchstart: this.handleDocumentClick
|
|
|
|
});
|
2015-10-17 22:20:15 +03:00
|
|
|
}
|
|
|
|
}
|
|
|
|
|
2016-05-29 22:24:22 +03:00
|
|
|
componentDidUpdate (prevProps, prevState) {
|
|
|
|
if (prevState.active && !this.state.active) {
|
|
|
|
if (this.props.onHide) this.props.onHide();
|
2016-10-06 21:18:35 +03:00
|
|
|
events.removeEventsFromDocument({
|
|
|
|
click: this.handleDocumentClick,
|
|
|
|
touchstart: this.handleDocumentClick
|
|
|
|
});
|
2016-05-29 22:24:22 +03:00
|
|
|
} else if (!prevState.active && this.state.active && this.props.onShow) {
|
|
|
|
this.props.onShow();
|
|
|
|
}
|
2015-11-22 21:20:05 +03:00
|
|
|
}
|
|
|
|
|
2016-05-29 22:24:22 +03:00
|
|
|
componentWillUnmount () {
|
2016-10-06 21:18:35 +03:00
|
|
|
if (this.state.active) {
|
|
|
|
events.removeEventsFromDocument({
|
|
|
|
click: this.handleDocumentClick,
|
|
|
|
touchstart: this.handleDocumentClick
|
|
|
|
});
|
|
|
|
}
|
2016-05-29 22:24:22 +03:00
|
|
|
clearTimeout(this.positionTimeoutHandle);
|
|
|
|
clearTimeout(this.activateTimeoutHandle);
|
2015-11-22 21:20:05 +03:00
|
|
|
}
|
|
|
|
|
2016-05-29 22:24:22 +03:00
|
|
|
handleDocumentClick = (event) => {
|
|
|
|
if (this.state.active && !events.targetIsDescendant(event, ReactDOM.findDOMNode(this))) {
|
|
|
|
this.setState({active: false, rippled: false});
|
|
|
|
}
|
|
|
|
};
|
|
|
|
|
2016-06-10 16:47:06 +03:00
|
|
|
handleSelect = (item, event) => {
|
2016-05-29 22:24:22 +03:00
|
|
|
const { value, onClick } = item.props;
|
2016-06-10 16:47:06 +03:00
|
|
|
if (onClick) event.persist();
|
2016-05-29 22:24:22 +03:00
|
|
|
this.setState({ active: false, rippled: this.props.ripple }, () => {
|
2016-06-10 16:47:06 +03:00
|
|
|
if (onClick) onClick(event);
|
2016-05-29 22:24:22 +03:00
|
|
|
if (this.props.onSelect) this.props.onSelect(value);
|
|
|
|
});
|
|
|
|
};
|
|
|
|
|
|
|
|
calculatePosition () {
|
|
|
|
const parentNode = ReactDOM.findDOMNode(this).parentNode;
|
|
|
|
if (!parentNode) return;
|
|
|
|
const {top, left, height, width} = parentNode.getBoundingClientRect();
|
|
|
|
const {height: wh, width: ww} = utils.getViewport();
|
|
|
|
const toTop = top < ((wh / 2) - height / 2);
|
|
|
|
const toLeft = left < ((ww / 2) - width / 2);
|
|
|
|
return `${toTop ? 'top' : 'bottom'}${toLeft ? 'Left' : 'Right'}`;
|
2016-02-10 19:48:14 +03:00
|
|
|
}
|
|
|
|
|
2016-05-29 22:24:22 +03:00
|
|
|
getMenuStyle () {
|
|
|
|
const { width, height, position } = this.state;
|
|
|
|
if (position !== POSITION.STATIC) {
|
|
|
|
if (this.state.active) {
|
|
|
|
return { clip: `rect(0 ${width}px ${height}px 0)` };
|
|
|
|
} else if (position === POSITION.TOP_RIGHT) {
|
|
|
|
return { clip: `rect(0 ${width}px 0 ${width}px)` };
|
|
|
|
} else if (position === POSITION.BOTTOM_RIGHT) {
|
|
|
|
return { clip: `rect(${height}px ${width}px ${height}px ${width}px)` };
|
|
|
|
} else if (position === POSITION.BOTTOM_LEFT) {
|
|
|
|
return { clip: `rect(${height}px 0 ${height}px 0)` };
|
|
|
|
} else if (position === POSITION.TOP_LEFT) {
|
|
|
|
return { clip: 'rect(0 0 0 0)' };
|
|
|
|
}
|
|
|
|
}
|
2015-10-17 22:20:15 +03:00
|
|
|
}
|
|
|
|
|
2016-05-29 22:24:22 +03:00
|
|
|
getRootStyle () {
|
|
|
|
if (this.state.position !== POSITION.STATIC) {
|
|
|
|
return { width: this.state.width, height: this.state.height };
|
2015-10-17 22:20:15 +03:00
|
|
|
}
|
2015-10-13 03:37:11 +03:00
|
|
|
}
|
|
|
|
|
2016-05-29 22:24:22 +03:00
|
|
|
renderItems () {
|
|
|
|
return React.Children.map(this.props.children, (item) => {
|
|
|
|
if (!item) return item;
|
|
|
|
if (item.type === MenuItem) {
|
|
|
|
return React.cloneElement(item, {
|
|
|
|
ripple: item.props.ripple || this.props.ripple,
|
|
|
|
selected: typeof item.props.value !== 'undefined' && this.props.selectable && item.props.value === this.props.selected,
|
|
|
|
onClick: this.handleSelect.bind(this, item)
|
|
|
|
});
|
|
|
|
} else {
|
|
|
|
return React.cloneElement(item);
|
|
|
|
}
|
|
|
|
});
|
2015-11-07 05:36:51 +03:00
|
|
|
}
|
|
|
|
|
2016-05-29 22:24:22 +03:00
|
|
|
show () {
|
|
|
|
const { width, height } = this.refs.menu.getBoundingClientRect();
|
|
|
|
this.setState({active: true, width, height});
|
|
|
|
}
|
2015-10-13 03:37:11 +03:00
|
|
|
|
2016-05-29 22:24:22 +03:00
|
|
|
hide () {
|
|
|
|
this.setState({active: false});
|
|
|
|
}
|
2015-11-24 02:29:02 +03:00
|
|
|
|
2016-05-29 22:24:22 +03:00
|
|
|
render () {
|
|
|
|
const { theme } = this.props;
|
|
|
|
const outlineStyle = { width: this.state.width, height: this.state.height };
|
|
|
|
const className = classnames([theme.menu, theme[this.state.position]], {
|
|
|
|
[theme.active]: this.state.active,
|
|
|
|
[theme.rippled]: this.state.rippled
|
|
|
|
}, this.props.className);
|
|
|
|
|
|
|
|
return (
|
|
|
|
<div data-react-toolbox='menu' className={className} style={this.getRootStyle()}>
|
2016-08-07 22:23:14 +03:00
|
|
|
{this.props.outline ? <div className={theme.outline} style={outlineStyle} /> : null}
|
2016-05-29 22:24:22 +03:00
|
|
|
<ul ref='menu' className={theme.menuInner} style={this.getMenuStyle()}>
|
|
|
|
{this.renderItems()}
|
|
|
|
</ul>
|
|
|
|
</div>
|
|
|
|
);
|
|
|
|
}
|
2015-11-24 02:29:02 +03:00
|
|
|
}
|
|
|
|
|
2016-05-29 22:24:22 +03:00
|
|
|
return Menu;
|
|
|
|
};
|
2015-10-22 02:31:17 +03:00
|
|
|
|
2016-05-29 22:24:22 +03:00
|
|
|
const Menu = factory(InjectMenuItem);
|
|
|
|
export default themr(MENU)(Menu);
|
|
|
|
export { factory as menuFactory };
|
|
|
|
export { Menu };
|