import React from 'react' import { IStandardProps } from './types' import styled, { css } from 'styled-components/macro' interface IProps extends IStandardProps { open: boolean closeButton?: boolean close: Function header?: React.ReactNode noOverlayColor?: boolean } const Wrapper = styled.div<{ open: boolean }>` background: transparent; z-index: 52; position: fixed; top: 0; right: 0; bottom: 0; left: 0; text-align: center; display: flex; justify-content: center; opacity: 0; visibility: hidden; transition: opacity 0.3s, visibility 0.3s; ${({ open }) => open && css` opacity: 1; visibility: visible; transition: opacity 0.4s, visibility 0.4s; `} &::after { display: inline-block; height: 100%; margin-left: -0.05em; vertical-align: middle; content: ''; } ` const ModalOverlay = styled.div.attrs({ className: 'modal-overlay' })<{ noOverlayColor: boolean }>` z-index: 10; position: absolute; top: 0; right: 0; bottom: 0; left: 0; background: ${({ noOverlayColor }) => (noOverlayColor ? 'transparent' : 'rgba(0, 0, 0, 0.8)')}; ` function Modal({ closeButton, close, children, header, noOverlayColor, ...rest }: IProps) { const closeModal = () => { typeof close === 'function' && close() } return ( <Wrapper className={'dialog'} {...rest}> <ModalOverlay noOverlayColor={Boolean(noOverlayColor)} onClick={closeModal} /> <div css={` box-sizing: border-box; display: inline-block; z-index: 20; position: relative; width: 65vw; border-radius: 2px; background: #fff; box-shadow: 0 0 30px rgba(0, 0, 0, 0.6); vertical-align: middle; align-self: center; `} > {header && ( <div> <h3> <span>{header}</span> </h3> {closeButton && ( <div onClick={closeModal}> <span> <span css={` z-index: 20; position: absolute; top: 0; right: 0; width: 35px; color: #95979c !important; font-size: 20px; font-weight: 700; line-height: 35px; text-align: center; text-decoration: none; text-indent: 0; cursor: pointer; &:hover { color: #2b2e38 !important; } `} > × </span> </span> </div> )} </div> )} <div css={` max-height: 60vh; overflow-y: auto; `} > {children} </div> </div> </Wrapper> ) } export { Modal }