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

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

"use strict";

Object.defineProperty(exports, "__esModule", {
	value: true
});

var _classCallCheck2 = require("babel-runtime/helpers/classCallCheck");

var _classCallCheck3 = _interopRequireDefault(_classCallCheck2);

var _createClass2 = require("babel-runtime/helpers/createClass");

var _createClass3 = _interopRequireDefault(_createClass2);

var _possibleConstructorReturn2 = require("babel-runtime/helpers/possibleConstructorReturn");

var _possibleConstructorReturn3 = _interopRequireDefault(_possibleConstructorReturn2);

var _inherits2 = require("babel-runtime/helpers/inherits");

var _inherits3 = _interopRequireDefault(_inherits2);

var _taggedTemplateLiteral2 = require("babel-runtime/helpers/taggedTemplateLiteral");

var _taggedTemplateLiteral3 = _interopRequireDefault(_taggedTemplateLiteral2);

var _desc, _value, _class;

var _templateObject = (0, _taggedTemplateLiteral3.default)(["\n\tbackground: white;\n\twidth: 20em;\n\tfont-size: 16px;\n\tpadding: 0.5em 0;\n\tposition: fixed;\n\tz-index: 1000000000;\n"], ["\n\tbackground: white;\n\twidth: 20em;\n\tfont-size: 16px;\n\tpadding: 0.5em 0;\n\tposition: fixed;\n\tz-index: 1000000000;\n"]),
    _templateObject2 = (0, _taggedTemplateLiteral3.default)(["\n\tborder: 0;\n\theight: 3em;\n\tpadding: 0 1.5em 0 3.5em;\n\tline-height: 3;\n\tposition: relative;\n\twhite-space: nowrap;\n\toverflow: hidden;\n\ttext-overflow: ellipsis;\n\tcursor: pointer;\n\n\t&:hover {\n\t\tbackground: rgba(0,0,0,0.1);\n\t}\n"], ["\n\tborder: 0;\n\theight: 3em;\n\tpadding: 0 1.5em 0 3.5em;\n\tline-height: 3;\n\tposition: relative;\n\twhite-space: nowrap;\n\toverflow: hidden;\n\ttext-overflow: ellipsis;\n\tcursor: pointer;\n\n\t&:hover {\n\t\tbackground: rgba(0,0,0,0.1);\n\t}\n"]),
    _templateObject3 = (0, _taggedTemplateLiteral3.default)([""], [""]),
    _templateObject4 = (0, _taggedTemplateLiteral3.default)(["\n\tposition: fixed;\n\twidth: 200px;\n\theight: 200px;\n\tbackground-color: blue;\n\ttop: 50%;\n\tleft: 50%;\n\tmargin-top: -100px;\n\tmargin-left: -100px;\n"], ["\n\tposition: fixed;\n\twidth: 200px;\n\theight: 200px;\n\tbackground-color: blue;\n\ttop: 50%;\n\tleft: 50%;\n\tmargin-top: -100px;\n\tmargin-left: -100px;\n"]);

var _react = require("react");

var _react2 = _interopRequireDefault(_react);

var _styledComponents = require("styled-components");

var _styledComponents2 = _interopRequireDefault(_styledComponents);

var _autobindDecorator = require("autobind-decorator");

var _autobindDecorator2 = _interopRequireDefault(_autobindDecorator);

var _reactOnclickoutside = require("react-onclickoutside");

var _reactOnclickoutside2 = _interopRequireDefault(_reactOnclickoutside);

function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }

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;
}

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

var Menu = _styledComponents2.default.div(_templateObject);

var Option = _styledComponents2.default.div(_templateObject2);

var Label = _styledComponents2.default.span(_templateObject3);

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

var ContextMenu = (_class = function (_React$Component) {
	(0, _inherits3.default)(ContextMenu, _React$Component);

	function ContextMenu(props) {
		(0, _classCallCheck3.default)(this, ContextMenu);

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

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

	(0, _createClass3.default)(ContextMenu, [{
		key: "handleClickOutside",
		value: function handleClickOutside() {
			this.props.close();
		}
	}, {
		key: "componentDidMount",
		value: function componentDidMount() {
			// const el = this.menuEl;
			// const bounds = el.getBoundingClientRect();
			// if(bounds.bottom > window.innerHeight) {
			// 	this.setState({ top: false, });
			// }
			// if(bounds.right > window.innerWidth) {
			// 	this.setState({ left: false, });
			// }
		}
	}, {
		key: "menuRef",
		value: function menuRef(cmp) {
			this.menuEl = cmp || this.menuEl;
		}
	}, {
		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;

			return _react2.default.createElement(
				"div",
				null,
				_react2.default.createElement(
					Menu,
					{
						style: style,
						innerRef: this.menuRef
					},
					props.options.map(function (option, i) {
						return _react2.default.createElement(
							Option,
							{
								className: "ooption",
								key: i,
								onClick: function onClick(e) {
									e.stopPropagation();
									option.fn(e);
									props.close();
								}
							},
							_react2.default.createElement(
								Label,
								null,
								option.label
							)
						);
					})
				)
			);
		}
	}]);
	return ContextMenu;
}(_react2.default.Component), (_applyDecoratedDescriptor(_class.prototype, "handleClickOutside", [_autobindDecorator2.default], Object.getOwnPropertyDescriptor(_class.prototype, "handleClickOutside"), _class.prototype), _applyDecoratedDescriptor(_class.prototype, "menuRef", [_autobindDecorator2.default], Object.getOwnPropertyDescriptor(_class.prototype, "menuRef"), _class.prototype)), _class);


var Test = _styledComponents2.default.div(_templateObject4);

exports.default = ContextMenu;
// export default onClickOutside(ContextMenu);
// export default onClickOutside(Test);

//# sourceMappingURL=contextMenu.js.map