64 lines
1.6 KiB
TypeScript
64 lines
1.6 KiB
TypeScript
import { Image, View } from '@tarojs/components'
|
|
import classnames from 'classnames'
|
|
import { useEffect, useState } from 'react'
|
|
import style from './index.module.scss'
|
|
import { usePropsValue } from '@/use/useCommon'
|
|
|
|
interface PropsType {
|
|
showOverLay?: boolean
|
|
show: boolean
|
|
onClose?: (show: boolean) => void
|
|
onChange?: (isShow) => void
|
|
children?: React.ReactNode
|
|
}
|
|
// 弹出框
|
|
const Dialog = (props: PropsType) => {
|
|
const { showOverLay = true, show = false, onClose: _onClose, onChange: _onChange, children } = props
|
|
|
|
const [_show, setShow] = usePropsValue({
|
|
value: show,
|
|
defaultValue: false,
|
|
onChange: (value) => {
|
|
_onChange?.(value)
|
|
},
|
|
})
|
|
|
|
const [animShow, setAnimShow] = useState(false)
|
|
|
|
const handleAnimShow = () => {
|
|
setShow(true)
|
|
setTimeout(() => {
|
|
setAnimShow(true)
|
|
}, 200)
|
|
}
|
|
const handleAnimHide = () => {
|
|
setAnimShow(false)
|
|
setTimeout(() => {
|
|
setShow(false)
|
|
}, 200)
|
|
}
|
|
const onClose = () => {
|
|
handleAnimHide()
|
|
_onClose?.(_show)
|
|
}
|
|
useEffect(() => {
|
|
if (show) {
|
|
handleAnimShow()
|
|
}
|
|
}, [show])
|
|
return _show
|
|
? <View className={style.dialog}>
|
|
{/* 遮罩层 start */}
|
|
<View
|
|
className={classnames(style.dialog_mask, { [style.dialog_mask_active]: animShow, [style['drawer_mask--hidden']]: !showOverLay })}
|
|
onClick={onClose}
|
|
></View>
|
|
{/* 遮罩层 end */}
|
|
<View className={classnames(style.dialog_content, { [style.dialog_content_active]: animShow })}>
|
|
{children}
|
|
</View>
|
|
</View>
|
|
: <View></View>
|
|
}
|
|
export default Dialog
|