1786f0d707
- 所有原子/组合组件添加 import React from 'react'（修复 React is not defined） - 修复 SCSS import 路径：components/ui 和 patterns 需要 ../../../ 而非 ../../ - 修复 action-inbox 页面 SCSS import 层级
56 lines
1.1 KiB
TypeScript
56 lines
1.1 KiB
TypeScript
import React from 'react';
|
|
import { View, ScrollView } from '@tarojs/components';
|
|
import { ReactNode, useMemo } from 'react';
|
|
import './index.scss';
|
|
|
|
interface PageShellProps {
|
|
padding?: 'none' | 'sm' | 'md' | 'lg';
|
|
safeBottom?: boolean;
|
|
scroll?: boolean;
|
|
className?: string;
|
|
children: ReactNode;
|
|
}
|
|
|
|
const PADDING_MAP = {
|
|
none: '0',
|
|
sm: '16px',
|
|
md: 'var(--tk-page-padding)',
|
|
lg: '32px',
|
|
} as const;
|
|
|
|
const PageShell: React.FC<PageShellProps> = ({
|
|
padding = 'md',
|
|
safeBottom = true,
|
|
scroll = true,
|
|
className,
|
|
children,
|
|
}) => {
|
|
const style = useMemo(() => ({
|
|
paddingLeft: PADDING_MAP[padding],
|
|
paddingRight: PADDING_MAP[padding],
|
|
paddingTop: PADDING_MAP[padding],
|
|
}), [padding]);
|
|
|
|
const cls = [
|
|
'page-shell',
|
|
safeBottom && 'page-shell--safe-bottom',
|
|
className,
|
|
].filter(Boolean).join(' ');
|
|
|
|
if (scroll) {
|
|
return (
|
|
<ScrollView scrollY className={cls} style={style}>
|
|
{children}
|
|
</ScrollView>
|
|
);
|
|
}
|
|
|
|
return (
|
|
<View className={cls} style={style}>
|
|
{children}
|
|
</View>
|
|
);
|
|
};
|
|
|
|
export default React.memo(PageShell);
|