jobiqo-cl/lib/src/components/02-atoms/15-modal/index.js

[](https://circleci.com/gh/jobiqo/jobiqo-cl)

'use strict';

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

function _interopDefault (ex) { return (ex && (typeof ex === 'object') && 'default' in ex) ? ex['default'] : ex; }

var tslib_es6 = require('../../../../node_modules/tslib/tslib.es6.js');
var React = require('react');
var React__default = _interopDefault(React);
var styled = require('styled-components');
var styled__default = _interopDefault(styled);
var index_esm$9 = require('../../../../node_modules/@styled-system/space/dist/index.esm.js');
require('../../../../node_modules/styled-system/dist/index.esm.js');
var Close = require('../../../icons/Close.js');
var index = require('../../../../node_modules/@reach/dialog/es/index.js');
var styles = require('../../../../node_modules/@reach/dialog/styles.css.js');

const dialogStyles = styled.css `
  body [data-reach-dialog-content] {
    position: relative;
    box-shadow: ${props => props.theme.modal.boxShadow};
    background: ${props => props.theme.modal.background};
    width: 90vw;
    ${props => props.theme.mediaQueries.small} {
      width: 70vw;
    }
    ${props => props.theme.mediaQueries.medium} {
      width: 60vw;
    }
    ${index_esm$9.space}
  }
  body [data-reach-dialog-overlay] {
    background: ${props => props.theme.modal.overlay.background};
    z-index: 100;
  }
`;
const GlobalDialogStyle = styled.createGlobalStyle `
  ${styles}
  ${dialogStyles}
`;
const StyledCloseButton = styled__default.button `
  position: absolute;
  cursor: pointer;
  border: none;
  top: ${props => props.theme.modal.close.top};
  right: ${props => props.theme.modal.close.right};
  left: ${props => props.theme.modal.close.left};
  bottom: ${props => props.theme.modal.close.bottom};
  color: ${props => props.theme.modal.close.color};
`;
const Modal = (_a) => {
    var { children, isShown, onHide, showClose = true, closeTitle = "Close" } = _a, props = tslib_es6.__rest(_a, ["children", "isShown", "onHide", "showClose", "closeTitle"]);
    return (React__default.createElement(React__default.Fragment, null,
        React__default.createElement(GlobalDialogStyle, Object.assign({}, props)),
        React__default.createElement(index.DialogOverlay, { isOpen: isShown, onDismiss: () => onHide() },
            React__default.createElement(index.DialogContent, { "aria-label": "Modal content" },
                React__default.createElement("div", null, children),
                showClose && (React__default.createElement(StyledCloseButton, { onClick: () => onHide() },
                    React__default.createElement(Close.CloseIcon, { title: closeTitle })))))));
};

exports.GlobalDialogStyle = GlobalDialogStyle;
exports.Modal = Modal;
exports.StyledCloseButton = StyledCloseButton;
exports.dialogStyles = dialogStyles;