import React from 'react'; import ReactDOM from 'react-dom'; import styled from 'styled-components'; import '../main.scss'; import { Grid } from '../../'; import { createPopup } from '../notification'; import Button from '../button'; import { mobileWidth, primaryColor } from '../../config'; import svg from '../../assets/message3.svg'; type Position = 'top-left' | 'top-right' | 'top-center' | 'bottom-left' | 'bottom-right' | 'bottom-center'; interface ModalProps { title: string; message: any; position?: Position; hideCancel?: boolean; } const Wrapper = styled.div` position: fixed; z-index: 20; left: 0; top: 0; width: 100%; height: 100%; transition: 200ms ease-out; background-color: rgba(0,0,0,0.5);`; const Btn = styled.button` background: ${primaryColor};`; const Modall = styled.div` margin: 2% auto; background: white; box-shadow: 0 14px 28px rgba(0,0,0,0.25), 0 10px 10px rgba(0,0,0,0.22); border-radius: 1em; width: 80%; display: grid; place-items: stretch; grid-template-rows: auto 1fr; text-align: center; font-size: 1.2em; padding: 0; min-height: 260px; max-width: 900px; color: black; @media(max-width: ${mobileWidth}){ position: absolute; bottom: 90px; width: 90vw; left: 50%; -webkit-transform: translateX(-50%); transform: translateX(-50%) }`; const Header = styled.div` color: white; background-image: linear-gradient( ${primaryColor}, rgba(50, 150, 178, 0.8)); border-top-right-radius: .75em; border-top-left-radius: .75em; border: 0; margin: 0; height: 2.5em;`; const Body = styled.div` color: white; minHeight: 5em; padding: .0em; display: grid; place-items: center; grid-template-rows: 1fr auto; font-weight: bolder; background-image: linear-gradient(rgba(208, 211, 212 , 0.7), rgba(32, 100, 78 , 0.6)), url(${svg}); border-bottom-right-radius: .75em; border-bottom-left-radius: .75em; `; const Modal = ({ title, message, hideCancel, position = 'top-center' }: ModalProps) => { const { container, child } = createPopup({ type: "modal", position }); const close = () =>{ try{ container.removeChild(child); ReactDOM.unmountComponentAtNode(child); } catch(e){ console.log(e) } } const El = (

{title}

{typeof message === 'string' || React.isValidElement(message) ? message : 'Error'} {!hideCancel &&

} ); return { close, open: ()=> { if(!container.contains(child)) container.appendChild(child) ReactDOM.render(El, child)} } } export default Modal;