76 lines
2.3 KiB
TypeScript
76 lines
2.3 KiB
TypeScript
import { View } from '@tarojs/components'
|
|
import classnames from 'classnames'
|
|
import type { ReactNode } from 'react'
|
|
import { memo, useEffect, useMemo, useRef } from 'react'
|
|
import style from './index.module.scss'
|
|
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 // 弹出动画结束
|
|
}
|
|
export default memo((
|
|
{
|
|
title = '标题',
|
|
show = false,
|
|
showTitle = true,
|
|
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)
|
|
}
|
|
}, [])
|
|
|
|
return (
|
|
<>
|
|
<View className={style.drawer_main}>
|
|
<View catchMove className={`${style.drawer} ${show ? style.drawer_active : ''}`}>
|
|
<View
|
|
className={classnames(style.drawer_mask, { [style.drawer_mask_active]: show })}
|
|
onClick={() => onClose?.()}
|
|
>
|
|
<View
|
|
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}>
|
|
{show && children}
|
|
</View>
|
|
<View className="common_safe_area_y"></View>
|
|
</View>
|
|
</View>
|
|
</View>
|
|
</View>
|
|
</>
|
|
)
|
|
})
|