import React, {useMemo, useEffect, useState} from 'react'
import ReactDOM from 'react-dom'


/**
?*
?* 需要把元素渲染到組件之外，用 createPortal 把元素直接渲染到 document.body 下，為了防止函數(shù)組件每一次執(zhí)行都觸發(fā) createPortal， 所以通過(guò) useMemo 做性能優(yōu)化。

?因?yàn)樾枰獫u變的動(dòng)畫(huà)效果，所以需要兩個(gè)變量 modelShow / modelShowAync 來(lái)控制顯示/隱藏，modelShow 讓元素顯示/隱藏，modelShowAync 控制動(dòng)畫(huà)執(zhí)行。

?當(dāng)彈窗要顯示的時(shí)候，要先設(shè)置 modelShow 讓組件顯示，然后用 setTimeout 調(diào)度讓 modelShowAync 觸發(fā)執(zhí)行動(dòng)畫(huà)。
?當(dāng)彈窗要隱藏的時(shí)候，需要先讓動(dòng)畫(huà)執(zhí)行，所以先控制 modelShowAync ，然后通過(guò)控制 modelShow 元素隱藏，和上述流程相反。
?用一個(gè)控制器 controlShow 來(lái)流暢執(zhí)行更新任務(wù)。

?*/


// 控制彈窗隱藏以及動(dòng)畫(huà)效果
const controlShow = (f1, f2, value, timer) => {
? ? f1(value)
? ? return setTimeout(() => {
? ? ? ? f2(value)
? ? }, timer)
}


export const Dialog = (props) => {
? ? const {width, visible, closeCb, onClose} = props
? ? // 控制 modelShow動(dòng)畫(huà)效果
? ? const [modelShow, setModelShow] = useState(visible)
? ? const [modelShowAsync, setModelShowAsync] = useState(visible)

? ? const renderChildren = useMemo(() => {
? ? ? ? // 把元素渲染到組件之外的document.body 上
? ? ? ? return ReactDOM.createPortal(<div style={{display: modelShow ? 'block' : 'none'}}>
? ? ? ? ? ? <div className="model_container" style={{opacity: modelShowAsync ? 1 : 0}}>
? ? ? ? ? ? ? ? <div className="model_wrap">
? ? ? ? ? ? ? ? ? ? <div style={{width: width + 'px'}}> {props.children} </div>
? ? ? ? ? ? ? ? </div>
? ? ? ? ? ? </div>
? ? ? ? ? ? <div className="model_container mast" onClick={() => onClose && onClose()}
? ? ? ? ? ? ? ? ?style={{opacity: modelShowAsync ? 0.6 : 0}}/>
? ? ? ? </div>, document.body)
? ? }, [modelShow, modelShowAsync])

? ? useEffect(() => {
? ? ? ? let timer
? ? ? ? if (visible) {
? ? ? ? ? ? // 打開(kāi)彈窗，
? ? ? ? ? ? timer = controlShow(setModelShow, setModelShowAsync, visible, 30)
? ? ? ? } else {
? ? ? ? ? ? timer = controlShow(setModelShowAsync,setModelShow,visible,1000)
? ? ? ? }
? ? ? ? return () => {
? ? ? ? ? ? timer && clearTimeout(timer)
? ? ? ? }
? ? }, [visible])
? ? return renderChildren
}

二、Modal.js

import {Dialog} from "./Dialog";
import React, {useEffect, useState} from 'react'
import ReactDOM from 'react-dom'
import './style.scss'

class Modal extends React.PureComponent {
? ? // 渲染底部按鈕
? ? renderFooter = () => {
? ? ? ? const {onOk, onCancel, cancelText, okText, footer} = this.props
? ? ? ? // ? ?觸發(fā)onOk / onCancel回調(diào)
? ? ? ? if (footer && React.isValidElement(footer)) return footer
? ? ? ? return <div className="model_bottom">
? ? ? ? ? ? <div className="model_btn_box">
? ? ? ? ? ? ? ? <button className="searchbtn"
? ? ? ? ? ? ? ? ? ? ? ? onClick={(e) => {
? ? ? ? ? ? ? ? ? ? ? ? ? ? onOk && onOk(e)
? ? ? ? ? ? ? ? ? ? ? ? }}>{okText || '確定'}
? ? ? ? ? ? ? ? </button>
? ? ? ? ? ? ? ? <button className="concellbtn"
? ? ? ? ? ? ? ? ? ? ? ? onClick={(e) => {
? ? ? ? ? ? ? ? ? ? ? ? ? ? onCancel && onCancel(e)
? ? ? ? ? ? ? ? ? ? ? ? }}>{cancelText || '取消'}
? ? ? ? ? ? ? ? </button>
? ? ? ? ? ? </div>
? ? ? ? </div>
? ? }

? ? // 渲染底部
? ? renderTop = () => {
? ? ? ? const {title, onClose} = this.props
? ? ? ? return <div className="model_top">
? ? ? ? ? ? <p>{title}</p>
? ? ? ? ? ? <span className="model_top_close" onClick={() => onClose && onClose()}>X</span>
? ? ? ? </div>
? ? }

? ? // 渲染彈窗內(nèi)容
? ? renderContent = () => {
? ? ? ? const {content, children} = this.props
? ? ? ? return React.isValidElement(content) ? content : children ? children : null
? ? }

? ? render() {
? ? ? ? const {visible, width = 500, closeCb, onClose} = this.props
? ? ? ? return <Dialog
? ? ? ? ? ? closeCb={closeCb}
? ? ? ? ? ? onClose={onClose}
? ? ? ? ? ? visible={visible}
? ? ? ? ? ? width={width}
? ? ? ? >
? ? ? ? ? ? {this.renderTop()}
? ? ? ? ? ? {this.renderContent()}
? ? ? ? ? ? {this.renderFooter()}
? ? ? ? </Dialog>
? ? }
}


// 靜態(tài)方法
let ModalContainer = null
const modelSymbol = Symbol('$$_model_Container_hidden')

// 靜態(tài)屬性show——控制
Modal.show = (config) => {
? ? // ?如果modal已經(jīng)存在，name就不需要第二次show
? ? if (ModalContainer) return
? ? const props = {...config, visible: true}
? ? const container = ModalContainer = document.createElement('div')
? ? // 創(chuàng)建一個(gè)管理者，管理model狀態(tài)
? ? const manager = container[modelSymbol] = {
? ? ? ? setShow: null,
? ? ? ? mounted: false,
? ? ? ? hidden() {
? ? ? ? ? ? const {setShow} = manager
? ? ? ? ? ? setShow && setShow(false)
? ? ? ? },
? ? ? ? destroy() {
? ? ? ? ? ? // ? ?卸載組件
? ? ? ? ? ? ReactDOM.unmountComponentAtNode(container)
? ? ? ? ? ? // 移除節(jié)點(diǎn)
? ? ? ? ? ? document.body.removeChild(container)
? ? ? ? ? ? // 置空元素
? ? ? ? ? ? ModalContainer = null
? ? ? ? }
? ? }

? ? const ModelApp = (props) => {
? ? ? ? const [show, setShow] = useState(false)
? ? ? ? manager.setShow = setShow
? ? ? ? const {visible, ...trueProps} = props
? ? ? ? useEffect(() => {
? ? ? ? ? ? // 加載完成，設(shè)置狀態(tài)
? ? ? ? ? ? manager.mounted = true
? ? ? ? ? ? setShow(visible)
? ? ? ? }, [])
? ? ? ? return <Modal {...trueProps} closeCb={() => manager.mounted && manager.destroy()} visible={show}/>
? ? }
? ? // 插入到body中
? ? document.appendChild(container)
? ? // 渲染React元素
? ? ReactDOM.render(<ModelApp/>, container)
? ? return manager
}

Modal.hidden = () => {
? ? if(!ModalContainer) return
? ? // 如果存在ModalContainer 那么隱藏ModalContainer
? ? ModalContainer[modelSymbol] && ModalContainer[modelSymbol].hidden()
}

export default Modal

三、style.scss樣式文件

$bg-linear-gradien-red-light : linear-gradient(135deg, #fc4838 0%, #f6346b ?100%);
$bg-linear-gradien-red-dark : linear-gradient(135deg, #fc4838 0%, #f6346b ?100%);

.constrol{
? padding: 30px;
? width: 500px;
? border: 1px solid #ccc;
? height: 200px;
}

.feel{
? padding: 24px;
}

.model_top{
? height: 40px;
? border-radius: 5px ?5px 0 0 ;
? position: relative;
? p{
? ? height: 40px;
? ? font-weight: bold;
? ? line-height: 40px;
? ? padding-left: 14px;
? }
? background-color: #eee;
? .model_top_close{
? ? position: absolute;
? ? font-size: 16px;
? ? cursor: pointer;
? ? right: 24px;
? ? top: 8px;
? }
}

.model_bottom{
? height: 50px;
? padding-top: 10px;
? .model_btn_box{
? ? display: inline-block;
? ? margin-left: 50%;
? ? transform: translateX(-50%);
? }
}

.model_container{
? .model_wrap{
? ? position: absolute;
? ? border-radius:5px ;
? ? background: #fff;
? ? left:50%;
? ? top:50%;
? ? transform: translate(-50%,-50%);
? }
? position: fixed;
? z-index: 10000;
? left:0;
? top:0;
? transition: opacity 0.3s;
? right: 0;
? bottom: 0;

}

.mast{
? background-color: #000;
? z-index: 9999;
}

.searchbtn{
? background: linear-gradient(135deg, #fc4838 0%, #f6346b ?100%);
? color: #fff;
? min-width: 96px;
? height :36px;
? border :none;
? border-radius: 18px;
? font-size: 14px;
? font-weight: 500;
? cursor: pointer;
? margin-left: 20px !important;
}
.searchbtn:focus{
? background: $bg-linear-gradien-red-dark;
? color: #fff;
? min-width: 96px;
? height: 36px;
? border: none;
? border-radius: 18px;
? font-size: 14px;
? font-weight: 500;
? cursor: pointer;
? margin-left: 20px !important;
? box-shadow: 0 2px 7px 0 #FAA79B;
}
.searchbtn:hover{
? background :$bg-linear-gradien-red-light;
? color :#fff;
? min-width: 96px;
? height :36px;
? margin-left: 20px !important;
? border: none;
? border-radius: 18px;
? font-size :14px;
? font-weight: 500;
? cursor: pointer;
? box-shadow: 0 2px 7px 0 #FAA79B;
}
.searchbtn:disabled{
? background: #c0c6c6;
? color :#fff;
? min-width: 96px;
? height :36px;
? font-size :14px;
? font-weight: 500;
? border: none;
? border-radius: 18px;
? cursor: not-allowed;
}

.concellbtn{
? background :#fff;
? color :#303133;
? width: 96px;
? height: 36px;
? font-size: 14px;
? font-weight: 500;
? border :1px solid #E4E7ED;
? border-radius: 18px;
? cursor: pointer;
? // margin-right: 10px;
? margin-left: 10px;
}
.concellbtn:hover{
? background :rgba(220, 223, 230, 0.1);
? color: #303133;
? width :96px;
? height: 36px;
? font-size: 14px;
? font-weight: 500;
? border :1px solid #E4E7ED;
? border-radius: 18px;
? cursor: pointer;
? // margin-right: 10px;
? margin-left: 10px;
}
.concellbtn:focus{
? background :rgba(220, 223, 230, 0.24);
? color: #303133;
? width :96px;
? height: 36px;
? font-size: 14px;
? font-weight: 500;
? border: 1px solid #C0C4CC;
? border-radius: 18px;
? cursor: pointer;
? margin-right: 10px;
? margin-left: 10px;
}

四、調(diào)用例子

import React, {useState, useMemo} from 'react'
import Modal from './customPopup/Modal'

/* 掛載方式調(diào)用modal */
export default function App() {
? ? const [ visible , setVisible ] = useState(false)
? ? const [ nameShow , setNameShow ] = useState(false)
? ? const handleClick = () => {
? ? ? ? setVisible(!visible)
? ? ? ? setNameShow(!nameShow)
? ? }
? ? /* 防止 Model 的 PureComponent 失去作用 */
? ? const [ handleClose ,handleOk, handleCancel ] = useMemo(()=>{
? ? ? ? const Ok = () => ?console.log('點(diǎn)擊確定按鈕')
? ? ? ? const Close = () => setVisible(false)
? ? ? ? const Cancel = () => console.log('點(diǎn)擊取消按鈕')
? ? ? ? return [Close , Ok , Cancel]
? ? },[])

? ? return <div>
? ? ? ? <Modal
? ? ? ? ? ? onCancel={handleCancel}
? ? ? ? ? ? onClose={handleClose}
? ? ? ? ? ? onOk={handleOk}
? ? ? ? ? ? title={'標(biāo)題'}
? ? ? ? ? ? visible={visible}
? ? ? ? ? ? width={700}
? ? ? ? >
? ? ? ? ? ? <div className="feel" >
? ? ? ? ? ? ? 內(nèi)容。。。。。。。
? ? ? ? ? ? </div>
? ? ? ? </Modal>
? ? ? ? <button onClick={() => {
? ? ? ? ? ? setVisible(!visible)
? ? ? ? ? ? setNameShow(false)
? ? ? ? }}
? ? ? ? > model show </button>
? ? ? ? <button onClick={handleClick} > model show ( 顯示作者 ) </button>
? ? </div>
}

實(shí)現(xiàn)效果