codogo-react-widgets/lib/components/contextMenu.js

Provides a unified way to access the styling of commonly used widgets across different apps

import _classCallCheck from "babel-runtime/helpers/classCallCheck";
import _createClass from "babel-runtime/helpers/createClass";
import _possibleConstructorReturn from "babel-runtime/helpers/possibleConstructorReturn";
import _inherits from "babel-runtime/helpers/inherits";
import _taggedTemplateLiteral from "babel-runtime/helpers/taggedTemplateLiteral";

var _class, _desc, _value, _class2;

var _templateObject = _taggedTemplateLiteral(["\n\tbackground: white;\n\twidth: 20em;\n\tpadding: 0.5em 0;\n\tposition: fixed;\n\t", ";\n\tz-index: 1000000000;\n"], ["\n\tbackground: white;\n\twidth: 20em;\n\tpadding: 0.5em 0;\n\tposition: fixed;\n\t", ";\n\tz-index: 1000000000;\n"]),
    _templateObject2 = _taggedTemplateLiteral(["\n\tpadding: 0.5em 1em;\n\twhite-space: nowrap;\n\toverflow: hidden;\n\ttext-overflow: ellipsis;\n\tcursor: pointer;\n\tdisplay: flex;\n\tflex-direction: row;\n\n\t&:hover {\n\t\tbackground: rgba(0, 0, 0, 0.1);\n\t}\n"], ["\n\tpadding: 0.5em 1em;\n\twhite-space: nowrap;\n\toverflow: hidden;\n\ttext-overflow: ellipsis;\n\tcursor: pointer;\n\tdisplay: flex;\n\tflex-direction: row;\n\n\t&:hover {\n\t\tbackground: rgba(0, 0, 0, 0.1);\n\t}\n"]),
    _templateObject3 = _taggedTemplateLiteral(["\n\tline-height: 1;\n"], ["\n\tline-height: 1;\n"]),
    _templateObject4 = _taggedTemplateLiteral(["\n\tmargin-right: 0.5em;\n"], ["\n\tmargin-right: 0.5em;\n"]);

function _applyDecoratedDescriptor(target, property, decorators, descriptor, context) {
	var desc = {};
	Object['ke' + 'ys'](descriptor).forEach(function (key) {
		desc[key] = descriptor[key];
	});
	desc.enumerable = !!desc.enumerable;
	desc.configurable = !!desc.configurable;

	if ('value' in desc || desc.initializer) {
		desc.writable = true;
	}

	desc = decorators.slice().reverse().reduce(function (desc, decorator) {
		return decorator(target, property, desc) || desc;
	}, desc);

	if (context && desc.initializer !== void 0) {
		desc.value = desc.initializer ? desc.initializer.call(context) : void 0;
		desc.initializer = undefined;
	}

	if (desc.initializer === void 0) {
		Object['define' + 'Property'](target, property, desc);
		desc = null;
	}

	return desc;
}

import React from "react";
import styled from "styled-components";
import autobind from "autobind-decorator";
import clickOutside from "react-onclickoutside";
import * as R from "ramda";
import Icon from "./icon";

// --------------------------------------------------

var Menu = styled.div(_templateObject, function (props) {
	var s = R.path(["theme", "functions", "shadow"])(props);
	if (s) {
		return s(2);
	} else {
		return "\n\t\t\t\tbox-shadow:\n\t\t\t\t\t0px\t3px 3px -3px rgba(0, 0, 0, 0.3),\n\t\t\t\t\t0px 3px 6px 3px rgba(0, 0, 0, 0.15);\n\t\t\t";
	}
});

var Option = styled.div(_templateObject2);

var Label = styled.span(_templateObject3);

var CMIcon = styled(Icon)(_templateObject4);

// --------------------------------------------------

var optionCallBackAndClose = function optionCallBackAndClose(close) {
	return function (fn) {
		return function (e) {
			e.preventDefault();
			e.stopPropagation();
			if (fn) {
				fn(e);
			}
			close();
		};
	};
};

var ContextMenu = clickOutside(_class = (_class2 = function (_React$Component) {
	_inherits(ContextMenu, _React$Component);

	function ContextMenu(props) {
		_classCallCheck(this, ContextMenu);

		var _this = _possibleConstructorReturn(this, (ContextMenu.__proto__ || Object.getPrototypeOf(ContextMenu)).call(this, props));

		_this.state = {
			top: true,
			left: true
		};
		return _this;
	}

	_createClass(ContextMenu, [{
		key: "handleClickOutside",
		value: function handleClickOutside() {
			this.props.close();
		}
	}, {
		key: "menuRef",
		value: function menuRef(el) {
			if (el) {
				var bounds = el.getBoundingClientRect();
				if (bounds.bottom > window.innerHeight) {
					this.setState({ top: false });
				}
				if (bounds.right > window.innerWidth) {
					this.setState({ left: false });
				}
			}
		}
	}, {
		key: "render",
		value: function render() {
			var props = this.props;
			var style = {};
			style.top = this.state.top ? props.y : null;
			style.bottom = this.state.top ? null : window.innerHeight - props.y;
			style.left = this.state.left ? props.x : null;
			style.right = this.state.left ? null : window.innerWidth - props.x;

			var optionCallback = optionCallBackAndClose(props.close);

			// const optionsWithIcons = R.pipe(
			// 	R.when(
			// 		R.any(R.prop("icon")),
			// 		R.map(R.over(R.lensProp("icon"), R.defaultTo(ChevronIcon))),
			// 	),
			// )(this.props.options);

			return React.createElement(
				Menu,
				{ style: style, innerRef: this.menuRef },
				this.props.options.map(function (option, i) {
					return React.createElement(
						Option,
						{ key: i, onClick: optionCallback(option.fn) },
						option.icon ? React.createElement(CMIcon, { icon: option.icon }) : React.createElement(CMIcon, {
							iconKey: option.iconKey || "chevron-right"
						}),
						React.createElement(
							Label,
							null,
							option.label
						)
					);
				})
			);
		}
	}]);

	return ContextMenu;
}(React.Component), (_applyDecoratedDescriptor(_class2.prototype, "handleClickOutside", [autobind], Object.getOwnPropertyDescriptor(_class2.prototype, "handleClickOutside"), _class2.prototype), _applyDecoratedDescriptor(_class2.prototype, "menuRef", [autobind], Object.getOwnPropertyDescriptor(_class2.prototype, "menuRef"), _class2.prototype)), _class2)) || _class;

export default ContextMenu;