需求
- 彈窗出現(xiàn)時三圆，固定在屏幕中間
- 彈窗中標題谁撼、內(nèi)容文字自定義
- 取消按鈕可選
- 點擊關(guān)閉按鈕，彈窗消失
- 點擊確定镶骗，Resolve 函數(shù)被執(zhí)行桶现，彈窗消失
- 該彈窗采用一個函數(shù)形式被調(diào)用，返回一個Promise, 在then 中執(zhí)行確定后的邏輯
彈窗設計
鑒于以上需求鼎姊，將整個彈窗拆分為一個UI組件(Dialog)骡和，一個處理函數(shù)部分(Staticize)
Dialog
Props
- title：彈窗標題
- message：內(nèi)容信息
- onConfirm: 確認時調(diào)用的函數(shù)，
- onCancel：點擊關(guān)閉或取消時相寇，調(diào)用的函數(shù)
import React from 'react'
import cx from 'classnames'
import SVGIcon from 'components/SVGIcon'
import styles from './Dialog.scss'
const Dialog = ({
title,
message,
onConfirm,
onCancel,
}) => (
<div className={styles.root}>
<div className={styles.header}>
<SVGIcon
className={styles.icon}
name="dialog/warning"
width="32"
height="32"
/>
<div className={styles.title}>{title}</div>
</div>
<div className={styles.message}>{message}</div>
<div className={styles.buttons}>
<button className={styles.button} onClick={onCancel}>
取消
</button>
<button className={cx(styles.button, styles.active)} onClick={onConfirm}>
確定
</button>
</div>
</div>
)
export default Dialog
Staticize
Props
- title：彈窗標題
- message：內(nèi)容信息
函數(shù)行為
- 返回一個Promise 對象即横，接收一個 fullfill
作為 Resolve 時參數(shù)。 - 創(chuàng)建一個div, 并添加到 body 中裆赵，在該 div 中渲染出 Dialog东囚。
- close 函數(shù)移除該 div， 并作為Dialog 的 onCancel 屬性
- onConfirm 中 執(zhí)行 fullfill 和 close
import React from 'react'
import ReactDOM from 'react-dom'
import Dialog from './Dialog'
const staticize = props =>
new Promise((fulfill) => { // 此處參數(shù)需用圓括號战授，否則 eslint 報錯
const holder = document.createElement('div')
document.body.appendChild(holder)
const close = () => {
document.body.removeChild(holder)
}
ReactDOM.render(
<Dialog
{...props}
onCancel={close}
onConfirm={() => {
close()
fulfill()
}}
/>,
holder
)
})
export default staticize
