deku-popup/dist.js

Popup/modal component for deku

'use strict';

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

var _magicVirtualElement = require('magic-virtual-element');

var _magicVirtualElement2 = _interopRequireDefault(_magicVirtualElement);

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

var overlayClasses = function overlayClasses(open) {
	return {
		Overlay: true,
		'is-open': open
	};
}; /** @jsx dom */


var popupClasses = function popupClasses(open) {
	return {
		Popup: true,
		'is-open': open
	};
};

var overlayCss = function overlayCss(open) {
	return {
		'z-index': 9999,
		bottom: 0,
		display: open ? 'block' : 'none',
		height: '100%',
		left: 0,
		position: 'fixed',
		right: 0,
		top: 0,
		width: '100%'
	};
};

var popupCss = {
	position: 'fixed',
	top: '50%',
	left: '50%',
	'-webkit-transform': 'translate(-50%, -50%)',
	transform: 'translate(-50%, -50%)'
};

var handleClickOutside = function handleClickOutside(onClickOutside) {
	return function (e) {
		return onClickOutside && e.delegateTarget === e.target && onClickOutside();
	};
};

var afterMount = function afterMount(_ref, el, setState) {
	var props = _ref.props,
	    state = _ref.state;
	var open = props.open;


	if (open) {
		setState({ open: true });
	}
};

var afterUpdate = function afterUpdate(_ref2, prevProps, prevState, setState) {
	var props = _ref2.props;
	var open = props.open;


	if (!open && (prevProps.open || prevState.open)) {
		setState({ open: false });
	}

	if (open && (!prevProps.open || !prevState.open)) {
		setState({ open: true });
	}
};

var render = function render(_ref3) {
	var props = _ref3.props,
	    state = _ref3.state;
	var children = props.children,
	    onClickOutside = props.onClickOutside;
	var open = state.open;


	return (0, _magicVirtualElement2.default)(
		'div',
		{ 'class': overlayClasses(open), style: overlayCss(open), onClick: handleClickOutside(onClickOutside) },
		(0, _magicVirtualElement2.default)(
			'div',
			{ 'class': [popupClasses(open), props.class], style: popupCss },
			children
		)
	);
};

var propTypes = {
	onClickOutside: {
		type: 'function'
	},
	open: {
		type: 'boolean'
	}
};

exports.default = { afterMount: afterMount, afterUpdate: afterUpdate, propTypes: propTypes, render: render };