75 lines
2.7 KiB
TypeScript
75 lines
2.7 KiB
TypeScript
import { View } from "@tarojs/components";
|
|
import style from "./index.module.scss"
|
|
import classnames from "classnames";
|
|
import { memo, ReactNode, useEffect, useMemo, useRef } 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 //弹出动画结束
|
|
}
|
|
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={true} 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>
|
|
</>
|
|
)
|
|
})
|