32 lines
865 B
TypeScript
32 lines
865 B
TypeScript
import { View, Text } from '@tarojs/components'
|
||
import type { ReactNode } from 'react'
|
||
import styles from './index.module.scss'
|
||
|
||
interface Props {
|
||
visible: boolean
|
||
title?: string
|
||
onClose: () => void
|
||
children: ReactNode
|
||
}
|
||
|
||
export function BottomSheet({ visible, title, onClose, children }: Props) {
|
||
if (!visible) return null
|
||
return (
|
||
<>
|
||
<View className={styles.mask} onClick={onClose} />
|
||
<View className={styles.panel}>
|
||
<View className={styles.handle} />
|
||
{title && (
|
||
<View className={styles.header}>
|
||
<Text className={styles.title}>{title}</Text>
|
||
<View className={styles.close} onClick={onClose}>
|
||
<Text className={styles.closeIcon}>×</Text>
|
||
</View>
|
||
</View>
|
||
)}
|
||
<View className={styles.body}>{children}</View>
|
||
</View>
|
||
</>
|
||
)
|
||
}
|