jobiqo-cl
Version:
[](https://circleci.com/gh/jobiqo/jobiqo-cl)
68 lines (65 loc) • 3.62 kB
JavaScript
import { __rest } from '../../../../node_modules/tslib/tslib.es6.js';
import React__default from 'react';
import styled, { css, createGlobalStyle } from 'styled-components';
import { space } from '../../../../node_modules/@styled-system/space/dist/index.esm.js';
import '../../../../node_modules/styled-system/dist/index.esm.js';
import { Button } from '../01-forms/01-button/styles.js';
import FlexItems from '../06-layout/03-flex/index.js';
import FlexItem from '../06-layout/03-flex/02-flex-item/index.js';
import Spacing from '../06-layout/07-spacing/index.js';
import * as reachDialogGlobbalStyle from '../../../../node_modules/@reach/dialog/styles.css.js';
import { AlertDialogOverlay, AlertDialogContent, AlertDialogLabel } from '../../../../node_modules/@reach/alert-dialog/es/index.js';
const StyledAlertLabel = styled.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.div `
text-align: center;
`;
const dialogStyles = 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;
}
${space}
}
body [data-reach-alert-dialog-overlay] {
background: ${props => props.theme.alertDialog.overlay.background};
z-index: 100;
}
`;
const GlobalDialogStyle = createGlobalStyle `
${reachDialogGlobbalStyle}
${dialogStyles}
`;
const Alert = (_a) => {
var { children, isShown, onClose, onConfirm, confirmText, cancelText, alertLabel } = _a, props = __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(AlertDialogOverlay, { leastDestructiveRef: cancelRef },
React__default.createElement(AlertDialogContent, null,
React__default.createElement(AlertDialogLabel, null,
React__default.createElement(StyledAlertLabel, null, alertLabel)),
React__default.createElement(Spacing, { size: "medium" }),
React__default.createElement(StyledContent, null, children),
React__default.createElement(Spacing, { size: "medium" }),
React__default.createElement(FlexItems, { flexWrap: "wrap", justifyContent: "center" },
React__default.createElement(FlexItem, null,
React__default.createElement(Button, { buttonStyle: "primary", raised: true, onClick: onConfirm }, confirmText)),
React__default.createElement(FlexItem, { ml: [0, 6], mt: [6, 0] },
React__default.createElement(Button, { buttonStyle: "danger", raised: false, ref: cancelRef, onClick: onClose }, cancelText))))))) : null;
};
export { Alert, GlobalDialogStyle, StyledAlertLabel, StyledContent, dialogStyles };