39 lines
812 B
TypeScript
39 lines
812 B
TypeScript
import { View, Text } from '@tarojs/components'
|
||
import type { ReactNode } from 'react'
|
||
import styles from './index.module.scss'
|
||
|
||
interface Props {
|
||
visible: boolean
|
||
position?: 'top' | 'center' | 'bottom'
|
||
onClose: () => void
|
||
children?: ReactNode
|
||
maxHeight?: string // e.g. '60vh'
|
||
}
|
||
|
||
export function Popup({
|
||
visible,
|
||
position = 'bottom',
|
||
onClose,
|
||
children,
|
||
maxHeight = '60vh'
|
||
}: Props) {
|
||
if (!visible) return null
|
||
|
||
const positionClass = styles[`pos-${position}`]
|
||
|
||
return (
|
||
<>
|
||
<View className={styles.mask} onClick={onClose} />
|
||
<View
|
||
className={`${styles.panel} ${positionClass}`}
|
||
style={{ maxHeight }}
|
||
>
|
||
{children}
|
||
<View className={styles.close} onClick={onClose}>
|
||
<Text>×</Text>
|
||
</View>
|
||
</View>
|
||
</>
|
||
)
|
||
}
|