|
- import React from 'react'
- import PropTypes from 'prop-types'
- import { motion, AnimatePresence } from "framer-motion"
-
- export const Popup = (props) => {
- const { opened, title, close, children } = props
-
- const popupMotionVariants = {
- hidden: {
- opacity: 0,
- scaleY: 0,
- transition: {
- type: "linear",
- duration: .3
- }
- },
- visible: {
- opacity: 1,
- scaleY: 1,
- transition: {
- type: "spring",
- damping: 50,
- stiffness: 50000,
- }
- },
- }
-
- //document.body.style.overflow='hidden';
- // Если надо закрывать по клику за попапом, то в первый див надо добавить onClick={close}
- return <>
- <AnimatePresence>
- {opened &&
- <div className="modal z-50 fixed w-full min-h-screen top-0 left-0 flex items-center justify-center">
- <div className="modal-overlay absolute top-0 left-0 w-full h-full bg-primary-900 opacity-50 backdrop-blur"></div>
- <div className="modal-wrapper relative w-full">
- <div className="max-w-full max-h-screen sm:max-w-lg mx-auto">
- <motion.div
- variants={popupMotionVariants}
- initial="hidden"
- animate="visible"
- exit="hidden"
- >
- <div tabIndex="0" aria-label={title} aria-modal className="ma-0 bg-gray-200 shadow-lg border-white border-t-2 border-b-2 sm:border-2 sm:mx-4 sm:rounded-lg transition-opacity duration-300" onClick={e => e.stopPropagation()}>
- <div className="px-3 h-12 bg-primary-800 text-white border-b sm:rounded-t-lg border-white font-semibold relative flex items-center">
- <div className="w-full text-xl">{title}</div>
- <button type="button" aria-label="Close modal" className="absolute top-0 right-0 w-12 h-12 pb-1 text-3xl leading-none cursor-pointer flex items-center justify-center" onClick={close}>×</button>
- </div>
- {children}
- </div>
- </motion.div>
- </div>
- </div>
- </div>
- }
- </AnimatePresence>
-
- </>
- }
-
- export default Popup;
-
-
- Popup.propTypes = {
- opened: PropTypes.bool,
- title: PropTypes.string,
- close: PropTypes.func,
- children: PropTypes.element,
- }
|