53 lines
1.1 KiB
TypeScript
53 lines
1.1 KiB
TypeScript
import { PropsWithChildren } from 'react'
|
|
import { ScrollView, View } from '@tarojs/components'
|
|
import { useSystemLayout } from '@/hooks/useSystemLayout'
|
|
import './index.scss'
|
|
|
|
interface PageShellProps {
|
|
className?: string
|
|
scroll?: boolean
|
|
withTabBar?: boolean
|
|
lowerThreshold?: number
|
|
onScrollToLower?: () => void
|
|
}
|
|
|
|
export function PageShell({
|
|
children,
|
|
className = '',
|
|
scroll = true,
|
|
withTabBar = true,
|
|
lowerThreshold = 80,
|
|
onScrollToLower
|
|
}: PropsWithChildren<PageShellProps>) {
|
|
const { safeBottom } = useSystemLayout()
|
|
const content = (
|
|
<View
|
|
className={`page-shell__inner ${className}`}
|
|
style={{ paddingBottom: withTabBar ? `${108 + safeBottom}px` : `${24 + safeBottom}px` }}
|
|
>
|
|
{children}
|
|
</View>
|
|
)
|
|
|
|
return (
|
|
<View className='page-shell'>
|
|
{scroll ? (
|
|
<ScrollView
|
|
scrollY
|
|
className='page-shell__scroll'
|
|
enhanced
|
|
showScrollbar={false}
|
|
lowerThreshold={lowerThreshold}
|
|
onScrollToLower={onScrollToLower}
|
|
>
|
|
{content}
|
|
</ScrollView>
|
|
) : (
|
|
content
|
|
)}
|
|
</View>
|
|
)
|
|
}
|
|
|
|
export default PageShell
|