All files ContextMenuPopupOptions.js

100% Statements 22/22
100% Branches 10/10
100% Functions 6/6
100% Lines 22/22
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    1x           1x                 19x   19x 8x               19x                       19x       19x 19x   19x 1x 1x     17x 1x 1x     17x         19x   19x 1x     18x 16x     2x        
import React from 'react';
 
const requiredStyles = {
	position: 'absolute',
	top: 0,
	left: 0
};
 
const styles = {
	boxShadow: '0 0 5px #c7c7c7',
	background: 'white',
	opacity: 0,
    zIndex: 1
};
 
class ContextMenuPopupOptions extends React.Component {
	render() {
		this.align();
 
		const children = React.Children.map(this.props.children, (child, index) => {
			return React.cloneElement(child, {
				contextMenuPopup: this.props.contextMenuPopup,
				onOptionSelect: this.props.onOptionSelect,
				initialStyles: this.props.initialStyles,
				key: index
			})
		});
 
		return (
			<div
				className={this.getClassName()}
				ref="options"
				onMouseLeave={this.props.onMouseLeave}
				style={this.getStyles()}>
				{children}
			</div>
		)
	}
 
	getClassName() {
		return this.props.className || 'context-menu-popup__options';
	}
 
	align () {
		setTimeout(() => {
			const {options} = this.refs;
 
			if (options.getBoundingClientRect().right > window.innerWidth) {
				options.style.left = '';
				options.style.right = '0';
			}
 
			if (options.getBoundingClientRect().bottom > window.innerHeight) {
				options.style.top = '';
				options.style.bottom = '0';
			}
 
			options.style.opacity = 1;
		}, 1);
	}
 
	getStyles() {
		const {props} = this;
 
		if (props.style) {
		    return Object.assign({}, requiredStyles, props.style);
		}
 
		if (!props.initialStyles) {
		    return requiredStyles;
		}
 
		return Object.assign({}, requiredStyles, styles);
	}
}
 
export default ContextMenuPopupOptions;