Untitled
raw download clone
JSX
views 3
,
size 8364 b
import * as React from "react"
import State, { useState, useEffect, useRef } from "react"
import { Frame, addPropertyControls, ControlType } from "framer"
import { motion, AnimatePresence, usePresence } from "framer"

// Learn more: https://framer.com/api

const style = `
    
    .cover {
        background-color: rgba(48, 49, 51, 0.8);
        width: 100vw;
        height: 100vh;
        position: absolute;
        z-index: 1;
    }

    .modal {
        position: absolute;
        top: 50%;
        left: 50%;
        z-index: 9999;
        transform-origin: center;
        transform: translate(-50%, -50%);
        display:flex;
        flex-direction: column;
        justify-content: space-between;
        width: 496px;
        height: 224px;
        background-color: #fff;
        font-family: SF Pro Display;
        color: #222224;
        
    }

    .modal-container {
        position: relative;
        z-index: 1000;
    }

    .main-content {
        padding: 16px;
    } 

    .row {
        display: flex;
    }

    .col {
        display: flex;
        flex-direction: column;
    }

    .icon {
        width: 16px;
        height: 16px;
        display: block;
    }

    .icon.close {
        background-image: url("https://res.cloudinary.com/dqgrrnuiy/image/upload/v1623093283/react-dropdown/Close_canezz.svg");
        background-repeat: no-repeat;
        background-position: center;
        
    }

    h4 {
        font-size: 22px;
        line-height: 26px;
        margin:0;
    }

    p {
        font-size: 16px;
        line-height: 24px;
    }

    .controls {
        background-color: #E4E5E6;
        height:40px;
        display:flex;
        justify-content: flex-end;
    }

    .button {
        font-size: 16px;
        text-decoration: none;
        color: #193D6A;
        padding: 8px 12px;
        line-height: 24px;
        font-weight: 600;
    }

    .button.primary {
        background-color: #193D6A;
        color: #fff;
    }

    .button.primary:hover {
        background-color: #2B69B7;
    }

    .button.primary.launch {
        position: absolute;
        top: 50%;
        left: 50%;
        transform-origin: center;
        transform: translate(-50%, -50%);
    }

    .button-x {
        padding: 24px;
        margin-right: -16px;
        margin-top: -16px;
        transition: background-color .08;
        transition-timing-function: cubic-bezier(0.25, 0, 0.4, 0.9);
    }

    .icon.close.button-x:hover {
        background-color: #E0EBF8;
    }

    --exitAnimation: 

`

export function React_Modal(props) {
    const [visible, setVisible] = React.useState(false)
    const isMountedVal = useRef(1)
    const [primaryAnimation, setPrimaryAnimation] = React.useState(false)
    const [variants, setVariants] = React.useState("default")

    const exitVariants = {
        default: { opacity: 0, trnslateY: "calc(50vh - 24px)" },
        primary: { opacity: 0, trnslateY: "calc(50vh + 24px)" },
    }

    useEffect(() => {
        isMountedVal.current = 1

        return () => {
            isMountedVal.current = 0
        }
    })

    const updateState = (callback) => {
        if (isMountedVal.current) {
            callback()
        }
    }

    return (
        <div className="container">
            <AnimatePresence>
                {visible && (
                    <div>
                        <motion.div
                            className="modal-container"
                            key="modal"
                            initial={{
                                opacity: 0,
                                translateY: "calc(50vh - 24px)",
                                transition: {
                                    ease: [0, 0, 0.4, 0.9],
                                    duration: 0.25,
                                },
                            }}
                            animate={{
                                opacity: 1,
                                translateY: "calc(50vh - 0px)",
                                transition: {
                                    ease: [0, 0, 0.4, 0.9],
                                    duration: 0.25,
                                },
                            }}
                            exit={{
                                opacity: 0,
                                translateY: "calc(50vh - 24px)",
                                transition: {
                                    ease: [0, 0, 0.4, 0.9],
                                    duration: 0.25,
                                },
                            }}
                        >
                            <div className="modal">
                                <div className="row main-content">
                                    <div className="col">
                                        <h4>Modal Title - Small</h4>
                                        <p>
                                            This is the content paragraph, it
                                            will wrap when needed. We
                                            recommended to have no more than a
                                            couple of sentences.
                                        </p>
                                    </div>
                                    <div className="col">
                                        <span className="icon close button-x" />
                                    </div>
                                </div>
                                <div className="row controls">
                                    <a
                                        href="#"
                                        className="button cancel"
                                        onClick={() => setVisible(!visible)}
                                    >
                                        Cancel
                                    </a>
                                    <a
                                        href="#"
                                        className="button primary"
                                        onClick={() =>
                                            setPrimaryAnimation(
                                                !primaryAnimation
                                            )
                                        }
                                    >
                                        Primary Button
                                    </a>
                                </div>
                            </div>
                        </motion.div>
                        <motion.div
                            className="cover"
                            key="cover"
                            onClick={() => setVisible(!visible)}
                            initial={{
                                opacity: 0,
                                transition: {
                                    ease: [0, 0, 0.4, 0.9],
                                    duration: 0.08,
                                },
                            }}
                            animate={{
                                opacity: 1,
                                transition: {
                                    ease: [0, 0, 0.4, 0.9],
                                    duration: 0.08,
                                },
                            }}
                            exit={{
                                opacity: 0,
                                transition: {
                                    ease: [0.25, 0, 1, 0.9],
                                    duration: 0.08,
                                },
                            }}
                        ></motion.div>
                    </div>
                )}
            </AnimatePresence>
            <a
                href="#"
                onClick={() => setVisible(!visible)}
                className="button primary launch"
            >
                Launch Modal
            </a>
            <style>{style}</style>
        </div>
    )
}
close fullscreen
Login or Register to edit or fork this paste. It's free.