diff options
Diffstat (limited to 'src/components/Layout.tsx')
-rw-r--r-- | src/components/Layout.tsx | 100 |
1 files changed, 0 insertions, 100 deletions
diff --git a/src/components/Layout.tsx b/src/components/Layout.tsx deleted file mode 100644 index ea11e2217..000000000 --- a/src/components/Layout.tsx +++ /dev/null @@ -1,100 +0,0 @@ -import React, {useContext, useMemo} from 'react' -import {View, ViewStyle} from 'react-native' -import {StyleProp} from 'react-native' -import {useSafeAreaInsets} from 'react-native-safe-area-context' - -import {ViewHeader} from '#/view/com/util/ViewHeader' -import {ScrollView} from '#/view/com/util/Views' -import {CenteredView} from '#/view/com/util/Views' -import {atoms as a} from '#/alf' - -// Every screen should have a Layout component wrapping it. -// This component provides a default padding for the top of the screen. -// This allows certain screens to avoid the top padding if they want to. - -const LayoutContext = React.createContext({ - withinScreen: false, - topPaddingDisabled: false, - withinScrollView: false, -}) - -/** - * Every screen should have a Layout.Screen component wrapping it. - * This component provides a default padding for the top of the screen - * and height/minHeight - */ -let Screen = ({ - disableTopPadding = false, - style, - ...props -}: React.ComponentProps<typeof View> & { - disableTopPadding?: boolean - style?: StyleProp<ViewStyle> -}): React.ReactNode => { - const {top} = useSafeAreaInsets() - const context = useMemo( - () => ({ - withinScreen: true, - topPaddingDisabled: disableTopPadding, - withinScrollView: false, - }), - [disableTopPadding], - ) - return ( - <LayoutContext.Provider value={context}> - <View - style={[ - {paddingTop: disableTopPadding ? 0 : top}, - a.util_screen_outer, - style, - ]} - {...props} - /> - </LayoutContext.Provider> - ) -} -Screen = React.memo(Screen) -export {Screen} - -let Header = ( - props: React.ComponentProps<typeof ViewHeader>, -): React.ReactNode => { - const {withinScrollView} = useContext(LayoutContext) - if (!withinScrollView) { - return ( - <CenteredView topBorder={false} sideBorders> - <ViewHeader showOnDesktop showBorder {...props} /> - </CenteredView> - ) - } else { - return <ViewHeader showOnDesktop showBorder {...props} /> - } -} -Header = React.memo(Header) -export {Header} - -let Content = ({ - style, - contentContainerStyle, - ...props -}: React.ComponentProps<typeof ScrollView> & { - style?: StyleProp<ViewStyle> - contentContainerStyle?: StyleProp<ViewStyle> -}): React.ReactNode => { - const context = useContext(LayoutContext) - const newContext = useMemo( - () => ({...context, withinScrollView: true}), - [context], - ) - return ( - <LayoutContext.Provider value={newContext}> - <ScrollView - style={[a.flex_1, style]} - contentContainerStyle={[{paddingBottom: 100}, contentContainerStyle]} - {...props} - /> - </LayoutContext.Provider> - ) -} -Content = React.memo(Content) -export {Content} |