jobiqo-cl/lib/src/components/02-atoms/18-alert/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 styles = require('../01-forms/01-button/styles.js');
var index$2 = require('../06-layout/03-flex/index.js');
var index$3 = require('../06-layout/03-flex/02-flex-item/index.js');
var index = require('../06-layout/07-spacing/index.js');
var styles$1 = require('../../../../node_modules/@reach/dialog/styles.css.js');
var index$1 = require('../../../../node_modules/@reach/alert-dialog/es/index.js');

const StyledAlertLabel = styled__default.div `
  text-align: center;
  font-size: ${props => props.theme.alertDialog.label.fontSize};
  font-weight: ${props => props.theme.alertDialog.label.fontWeight};
  letter-spacing: ${props => props.theme.alertDialog.label.letterSpacing};
  text-transform: ${props => props.theme.alertDialog.label.textTransform};
`;
const StyledContent = styled__default.div `
  text-align: center;
`;
const dialogStyles = styled.css `
  body [data-reach-alert-dialog-content] {
    position: relative;
    box-shadow: ${props => props.theme.alertDialog.boxShadow};
    background: ${props => props.theme.alertDialog.background};
    max-width: ${props => props.theme.alertDialog.maxWidth};
    width: 60vw;
    ${props => props.theme.mediaQueries.small} {
      width: 60vw;
    }
    ${props => props.theme.mediaQueries.medium} {
      width: 50vw;
    }
    ${index_esm$9.space}
  }
  body [data-reach-alert-dialog-overlay] {
    background: ${props => props.theme.alertDialog.overlay.background};
    z-index: 100;
  }
`;
const GlobalDialogStyle = styled.createGlobalStyle `
  ${styles$1}
  ${dialogStyles}
`;
const Alert = (_a) => {
    var { children, isShown, onClose, onConfirm, confirmText, cancelText, alertLabel } = _a, props = tslib_es6.__rest(_a, ["children", "isShown", "onClose", "onConfirm", "confirmText", "cancelText", "alertLabel"]);
    // we'll pass this ref to both AlertDialog and our button
    const cancelRef = React__default.useRef();
    return isShown ? (React__default.createElement(React__default.Fragment, null,
        React__default.createElement(GlobalDialogStyle, Object.assign({}, props)),
        React__default.createElement(index$1.AlertDialogOverlay, { leastDestructiveRef: cancelRef },
            React__default.createElement(index$1.AlertDialogContent, null,
                React__default.createElement(index$1.AlertDialogLabel, null,
                    React__default.createElement(StyledAlertLabel, null, alertLabel)),
                React__default.createElement(index.default, { size: "medium" }),
                React__default.createElement(StyledContent, null, children),
                React__default.createElement(index.default, { size: "medium" }),
                React__default.createElement(index$2.default, { flexWrap: "wrap", justifyContent: "center" },
                    React__default.createElement(index$3.default, null,
                        React__default.createElement(styles.Button, { buttonStyle: "primary", raised: true, onClick: onConfirm }, confirmText)),
                    React__default.createElement(index$3.default, { ml: [0, 6], mt: [6, 0] },
                        React__default.createElement(styles.Button, { buttonStyle: "danger", raised: false, ref: cancelRef, onClick: onClose }, cancelText))))))) : null;
};

exports.Alert = Alert;
exports.GlobalDialogStyle = GlobalDialogStyle;
exports.StyledAlertLabel = StyledAlertLabel;
exports.StyledContent = StyledContent;
exports.dialogStyles = dialogStyles;