@retailmenot/anchor/ts/Modal/Modal.component.js

A React UI Library by RetailMeNot

var __rest = (this && this.__rest) || function (s, e) {
    var t = {};
    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
        t[p] = s[p];
    if (s != null && typeof Object.getOwnPropertySymbols === "function")
        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
                t[p[i]] = s[p[i]];
        }
    return t;
};
// REACT
import * as React from 'react';
// VENDOR
import * as StyledReactModal from 'styled-react-modal';
import styled, { css } from '@xstyled/styled-components';
import { th, space as spaceStyles } from '@xstyled/system';
import classnames from 'classnames';
// COMPONENTS
import { ModalHeader, StyledHeader } from './Header';
import { ModalContent, StyledContent } from './Content';
import { ModalFooter, StyledFooter } from './Footer';
import { ModalClose } from './Close';
const Sizes = {
    lg: { width: 50, contentPadding: 2.5, footerHeight: 6.5 },
    sm: { width: 25, contentPadding: 2, footerHeight: 5.5 },
};
const defaultSize = 'lg';
const StyledModal = StyledReactModal.default.styled `
    position: relative;
    width: ${({ width, size = defaultSize }) => width || `${Sizes[size].width}rem`};
    height: ${({ height = '42.375rem' }) => height};
    display: flex;
    align-items: center;
    flex-direction: column;
    justify-content: space-between;

    ${({ background = 'white', color }) => css({
    background: th.color(background),
    color,
    borderRadius: 'modal',
})};
    box-shadow: ${({ shadow = '0 0.375rem 0.5rem 0.25rem rgba(0,0,0,0.13)', }) => shadow};

    overflow: hidden;

    // The Modal Content component only gets its bottom padding if
    // its the last-child of the modal. Furthermore, if the Modal Header
    // comes before it, then the Content loses its top padding
    // (see Modal Header styles). The goal is that we have full padding
    // in isolation, but lose the top or bottom padding if the Header or
    // Footer (respectively) are also used.
    ${StyledContent} {
        padding: ${({ size = defaultSize }) => `4rem ${Sizes[size].contentPadding}rem 0 ${Sizes[size].contentPadding}rem`};
        &:last-child {
            padding-bottom: ${({ size = defaultSize }) => `${Sizes[size].contentPadding}rem`};
        }
    }
    ${StyledHeader} {
        padding-left: ${({ size = defaultSize }) => Sizes[size].contentPadding}rem;
    }
    ${StyledFooter} {
        padding: ${({ size = defaultSize }) => `0 ${Sizes[size].contentPadding}rem`};
        min-height: ${({ size = defaultSize }) => Sizes[size].footerHeight}rem;
    }
    ${spaceStyles}
`;
export const Modal = (_a) => {
    var { children, className, margin = 'auto' } = _a, props = __rest(_a, ["children", "className", "margin"]);
    return (React.createElement(StyledModal, Object.assign({}, Object.assign({ className: classnames('anchor-modal', className), margin }, props)), children));
};
Modal.Content = ModalContent;
Modal.Header = ModalHeader;
Modal.Footer = ModalFooter;
Modal.Close = ModalClose;
const CustomModalBackground = styled(StyledReactModal.BaseModalBackground) `
    box-sizing: border-box;
    overflow-y: auto;
    padding: ${({ padding = '2rem 1rem' }) => padding};
    background-color: ${({ opacity = 0.6 }) => `rgba(0,0,0,${opacity})`};
`;
export const BaseModalBackground = CustomModalBackground;
export class ModalProvider extends StyledReactModal.ModalProvider {
}
ModalProvider.defaultProps = { backgroundComponent: BaseModalBackground };
//# sourceMappingURL=Modal.component.js.map