All files ContextMenuPopupOption.js

100% Statements 20/20
100% Branches 16/16
100% Functions 6/6
100% Lines 20/20
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84      1x           1x                             23x                       23x       2x 1x   1x         1x           1x           23x 23x   23x 2x     21x 1x     20x 17x     3x 1x     2x        
import React from 'react';
// import classNames from 'classnames';
 
const styles = {
	padding: '10px',
	whiteSpace: 'nowrap',
	cursor: 'pointer'
};
 
const hoverStyles = {
	backgroundColor: 'rgb(207, 207, 207)'
};
 
class ContextMenuPopupOption extends React.Component {
	/* istanbul ignore next */
	constructor() {
		super();
 
		this.state = {
			hovered: false
		}
	}
 
	render() {
		return (
			<div
				className={this.getClassName()}
				style={this.getStyle()}
				onMouseEnter={this.onMouseEnter.bind(this)}
				onMouseLeave={this.onMouseLeave.bind(this)}
				onClick={this.handleOptionClick.bind(this)}
			>{this.props.children}</div>
		)
	}
 
	getClassName() {
		return this.props.className || 'context-menu-popup__option';
	}
 
	handleOptionClick() {
		if (this.props.onOptionSelect) {
			this.props.onOptionSelect(this.props.id, this.props.contextMenuPopup);
		} else {
			this.props.onClick(this.props.contextMenuPopup);
		}
	}
 
	onMouseEnter() {
		this.setState({
			hovered: true
		})
	}
 
	onMouseLeave() {
		this.setState({
			hovered: false
		})
	}
 
	getStyle() {
		const {style, hoverStyle, initialStyles} = this.props;
		const {hovered} = this.state;
 
		if (style && !hovered) {
		    return style;
		}
 
		if (style && hovered) {
			return Object.assign({}, style, hoverStyle);
		}
 
		if (!initialStyles) {
		    return {};
		}
 
		if (hovered) {
			return Object.assign({}, styles, hoverStyles);
		}
 
		return styles;
	}
}
 
export default ContextMenuPopupOption;