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

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

import _taggedTemplateLiteral from "babel-runtime/helpers/taggedTemplateLiteral";

var _templateObject = _taggedTemplateLiteral(["\n\tposition: fixed;\n\ttop: 0;\n\tright: 0;\n\tbottom: 0;\n\tleft: 0;\n\tbackground: rgba(0, 0, 0, 0.5);\n\tz-index: 100;\n\tpadding: 4em;\n\tcursor: pointer;\n\tdisplay: block;\n"], ["\n\tposition: fixed;\n\ttop: 0;\n\tright: 0;\n\tbottom: 0;\n\tleft: 0;\n\tbackground: rgba(0, 0, 0, 0.5);\n\tz-index: 100;\n\tpadding: 4em;\n\tcursor: pointer;\n\tdisplay: block;\n"]),
    _templateObject2 = _taggedTemplateLiteral(["\n\tbackground: white;\n\tmargin: 0 auto;\n\twidth: 100%;\n\tmax-width: 800px;\n\tcursor: auto;\n\tpadding: 2.5em;\n\tdisplay: block;\n\n\t& > ", " {\n\t\tflex-shrink: 0;\n\t}\n"], ["\n\tbackground: white;\n\tmargin: 0 auto;\n\twidth: 100%;\n\tmax-width: 800px;\n\tcursor: auto;\n\tpadding: 2.5em;\n\tdisplay: block;\n\n\t& > ", " {\n\t\tflex-shrink: 0;\n\t}\n"]),
    _templateObject3 = _taggedTemplateLiteral(["\n\tfont-size: 1.6em;\n\tflex-shrink: 0;\n"], ["\n\tfont-size: 1.6em;\n\tflex-shrink: 0;\n"]),
    _templateObject4 = _taggedTemplateLiteral(["\n\tdisplay: block;\n\tflex-grow: 1;\n\tflex-shrink: 1;\n\tmargin: 1.5em 0;\n\toverflow-y: auto;\n\toverflow-x: hidden;\n"], ["\n\tdisplay: block;\n\tflex-grow: 1;\n\tflex-shrink: 1;\n\tmargin: 1.5em 0;\n\toverflow-y: auto;\n\toverflow-x: hidden;\n"]);

import React from "react";
import { compose } from "recompose";
import styled from "styled-components";

import Button from "./button";

var Overlay = styled.div(_templateObject);

var Box = styled.div(_templateObject2, Button.Container);

var Title = styled.div(_templateObject3);

var Content = styled.div(_templateObject4);

var enhance = compose();

var stopPropagation = function stopPropagation(e) {
	return e.stopPropagation();
};

var noop = function noop() {};

var Modal = function Modal(props) {
	return props.visible ? React.createElement(
		Overlay,
		{ onClick: props.noDismiss ? noop : props.close },
		React.createElement(
			Box,
			{ onClick: stopPropagation },
			React.createElement(
				Title,
				null,
				props.title || "<Modal title goes here>"
			),
			React.createElement(
				Content,
				null,
				props.children
			),
			React.createElement(
				Button.Container,
				{ alignRight: true },
				props.options ? props.options.map(function (_ref, i) {
					var label = _ref.label,
					    fn = _ref.fn,
					    type = _ref.type;
					return React.createElement(Button, {
						type: type || "CONFIRM",
						onClick: fn,
						text: label,
						key: i
					});
				}) : React.createElement(Button, {
					type: "CONFIRM",
					onClick: props.close,
					text: "Close"
				})
			)
		)
	) : null;
};

export default enhance(Modal);

// EXAMPLE MODAL
// don't delete this unless you're gonna put this info somewhere else
//
// <Modal
// 	close = { someFunction }
// 	visible = { someBoolean }
// 	title = "someString"
// 	options = {
// 		[
// 			{
// 				label: "someString",
// 				fn: someFunction,
// 				type: "SOME_TYPE",
// 			},
// 			...
// 		]
// 	}
// >
// 	{ whateverContentYouWant }
// </Modal>