65 lines
2.5 KiB
TypeScript
65 lines
2.5 KiB
TypeScript
import { View } from '@tarojs/components'
|
|
import style from './index.module.scss'
|
|
import classnames from 'classnames'
|
|
import { memo, ReactNode, useEffect, useMemo, useRef, useState } from 'react'
|
|
import CloseBtnIcon from '@/components/closeBtn'
|
|
|
|
export interface Params {
|
|
title?: string //标题
|
|
show?: false | true //显示显示弹窗
|
|
showTitle?: false | true //是否显示标题
|
|
onClose?: () => void //关闭事件
|
|
children?: ReactNode //插槽内容
|
|
// IconButton?: ReactNode, //
|
|
showIconButton?: false | true //是否显示关闭按钮
|
|
position?: 'bottom' | 'top' | 'right' //弹出位置
|
|
animationEnd?: () => void, //弹出动画结束
|
|
isFixed?: boolean //二次弹窗触发
|
|
}
|
|
export default memo(
|
|
({ title = '标题', show = false, showTitle = true, isFixed = false, onClose, showIconButton = false, children, position = 'bottom', animationEnd }: Params) => {
|
|
const animationTime = useRef<any>(null)
|
|
useEffect(() => {
|
|
if (show) {
|
|
animationTime.current = setTimeout(() => {
|
|
animationEnd?.()
|
|
}, 260)
|
|
} else {
|
|
clearTimeout(animationTime.current)
|
|
}
|
|
}, [show])
|
|
|
|
useEffect(() => {
|
|
return () => {
|
|
|
|
clearTimeout(animationTime.current)
|
|
}
|
|
}, [])
|
|
|
|
const [ShowContext, setShowContext] = useState(false)
|
|
return (
|
|
<>
|
|
<View className={style.drawer_main}>
|
|
<View catchMove={true} className={`${style.drawer} ${show ? style.drawer_active : ''}`}>
|
|
<View className={classnames(style.drawer_mask, { [style.drawer_mask_active]: show })} onClick={() => onClose?.()}>
|
|
<View
|
|
style={{ position: `${isFixed == true ? 'fixed' : 'absolute'}`, }}
|
|
className={classnames(style.drawer_container, style['drawer_container_' + position], { [style.drawer_container_active]: show })}
|
|
onClick={(e) => e.stopPropagation()}>
|
|
{showTitle && <View className={style.drawer_container_title}>{title}</View>}
|
|
{showIconButton && (
|
|
<View className={style.common_close_btn_icon}>
|
|
<CloseBtnIcon onClose={() => onClose?.()} />
|
|
</View>
|
|
)}
|
|
<View className={style.drawer_container_context}>{children}</View>
|
|
<View className='common_safe_area_y'></View>
|
|
</View>
|
|
</View>
|
|
</View>
|
|
</View>
|
|
</>
|
|
)
|
|
},
|
|
)
|