boldr-ui/Dialog/Dialog.js

UI components for Boldr

'use strict';

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

var _extends2 = require('babel-runtime/helpers/extends');

var _extends3 = _interopRequireDefault(_extends2);

var _objectWithoutProperties2 = require('babel-runtime/helpers/objectWithoutProperties');

var _objectWithoutProperties3 = _interopRequireDefault(_objectWithoutProperties2);

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

var _taggedTemplateLiteral3 = _interopRequireDefault(_taggedTemplateLiteral2);

var _templateObject = (0, _taggedTemplateLiteral3.default)(['\n  position: fixed;\n  background-color: rgba(0, 0, 0, 0.5);\n  top: 0;\n  right: 0;\n  left: 0;\n  bottom: 0;\n  z-index: 9999;\n  transition: opacity 250ms ease-in-out;\n  opacity: 0;\n  &[class*="after-open"] {\n    opacity: 1;\n  }\n  &[class*="before-close"] {\n    opacity: 0;\n  }\n'], ['\n  position: fixed;\n  background-color: rgba(0, 0, 0, 0.5);\n  top: 0;\n  right: 0;\n  left: 0;\n  bottom: 0;\n  z-index: 9999;\n  transition: opacity 250ms ease-in-out;\n  opacity: 0;\n  &[class*="after-open"] {\n    opacity: 1;\n  }\n  &[class*="before-close"] {\n    opacity: 0;\n  }\n']),
    _templateObject2 = (0, _taggedTemplateLiteral3.default)(['\n  position: absolute;\n  display: flex;\n  flex-direction: column;\n  font-family: ', ';\n  font-size: 1rem;\n  background-color: ', ';\n  border-radius: 0.125em;\n  color: ', ';\n  top: calc(50% - 1rem);\n  left: calc(50% - 1rem);\n  right: auto;\n  bottom: auto;\n  margin: 1rem calc(-50% + 1rem) 1rem 1rem;\n  transform: translate(-50%, 100%);\n  transition: transform 250ms ease-in-out;\n  outline: none;\n  box-sizing: border-box;\n  min-width: 320px;\n  max-width: calc(640px - 1rem);\n  max-height: calc(100% - 1rem);\n  padding-top: ', ';\n  @media screen and (max-width: 640px) {\n    width: calc(100% - 1rem);\n    min-width: 0;\n  }\n  &[class*="after-open"] {\n    transform: translate(-50%, -50%);\n  }\n  &[class*="before-close"] {\n    transform: translate(-50%, 100%);\n  }\n'], ['\n  position: absolute;\n  display: flex;\n  flex-direction: column;\n  font-family: ', ';\n  font-size: 1rem;\n  background-color: ', ';\n  border-radius: 0.125em;\n  color: ', ';\n  top: calc(50% - 1rem);\n  left: calc(50% - 1rem);\n  right: auto;\n  bottom: auto;\n  margin: 1rem calc(-50% + 1rem) 1rem 1rem;\n  transform: translate(-50%, 100%);\n  transition: transform 250ms ease-in-out;\n  outline: none;\n  box-sizing: border-box;\n  min-width: 320px;\n  max-width: calc(640px - 1rem);\n  max-height: calc(100% - 1rem);\n  padding-top: ', ';\n  @media screen and (max-width: 640px) {\n    width: calc(100% - 1rem);\n    min-width: 0;\n  }\n  &[class*="after-open"] {\n    transform: translate(-50%, -50%);\n  }\n  &[class*="before-close"] {\n    transform: translate(-50%, 100%);\n  }\n']),
    _templateObject3 = (0, _taggedTemplateLiteral3.default)(['\n  display: flex;\n  align-items: center;\n  padding: 1rem;\n  > *:first-child {\n    flex: 1;\n  }\n'], ['\n  display: flex;\n  align-items: center;\n  padding: 1rem;\n  > *:first-child {\n    flex: 1;\n  }\n']),
    _templateObject4 = (0, _taggedTemplateLiteral3.default)(['\n  margin: 0 1rem 0 0;\n  text-overflow: ellipsis;\n  overflow: hidden;\n  white-space: nowrap;\n'], ['\n  margin: 0 1rem 0 0;\n  text-overflow: ellipsis;\n  overflow: hidden;\n  white-space: nowrap;\n']),
    _templateObject5 = (0, _taggedTemplateLiteral3.default)(['\n  overflow: auto;\n  padding: 0 1rem;\n  margin-bottom: 1rem;\n'], ['\n  overflow: auto;\n  padding: 0 1rem;\n  margin-bottom: 1rem;\n']),
    _templateObject6 = (0, _taggedTemplateLiteral3.default)(['', ''], ['', '']);
/* eslint-disable react/no-find-dom-node, react/prop-types */


var _react = require('react');

var _react2 = _interopRequireDefault(_react);

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

var _styledComponents2 = _interopRequireDefault(_styledComponents);

var _reactModal = require('react-modal');

var _reactModal2 = _interopRequireDefault(_reactModal);

var _styledTheme = require('styled-theme');

var _Headline = require('../Headline');

var _Headline2 = _interopRequireDefault(_Headline);

var _Icons = require('../Icons');

var _Icons2 = _interopRequireDefault(_Icons);

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

var overlayStyles = (0, _styledComponents.css)(_templateObject);
// $FlowIssue
var ModalBox = (0, _styledComponents2.default)(_reactModal2.default)(_templateObject2, (0, _styledTheme.font)('primary'), (0, _styledTheme.palette)('grayscale', 0, true), (0, _styledTheme.palette)('grayscale', 0), function (_ref) {
  var hasHeader = _ref.hasHeader;
  return hasHeader ? 0 : '1rem';
});

var Header = _styledComponents2.default.header(_templateObject3);

var StyledHeading = (0, _styledComponents2.default)(_Headline2.default)(_templateObject4);

var Content = _styledComponents2.default.div(_templateObject5);
// $FlowIssue
var StyledReactModal = (0, _styledComponents2.default)(function (_ref2) {
  var className = _ref2.className,
      props = (0, _objectWithoutProperties3.default)(_ref2, ['className']);
  return _react2.default.createElement(ModalBox, (0, _extends3.default)({ overlayClassName: className, closeTimeoutMS: 250 }, props));
})(_templateObject6, overlayStyles);
// $FlowIssue
var Dialog = function Dialog(_ref3) {
  var children = _ref3.children,
      title = _ref3.title,
      closeable = _ref3.closeable,
      onClose = _ref3.onClose,
      props = (0, _objectWithoutProperties3.default)(_ref3, ['children', 'title', 'closeable', 'onClose']);

  var hasHeader = title || closeable;
  return _react2.default.createElement(
    StyledReactModal,
    (0, _extends3.default)({
      contentLabel: title || 'Modal',
      onRequestClose: onClose,
      hasHeader: hasHeader
    }, props),
    hasHeader && _react2.default.createElement(
      Header,
      null,
      _react2.default.createElement(
        StyledHeading,
        { type: 'h2' },
        title
      ),
      closeable && _react2.default.createElement(_Icons2.default, { kind: 'close', color: '#222', onClick: onClose })
    ),
    _react2.default.createElement(
      Content,
      null,
      children
    )
  );
};

exports.default = Dialog;