Add new layout components
This commit is contained in:
Eric Bailey
@@ -0,0 +1,160 @@
|
||||
import React from 'react'
|
||||
import {View} from 'react-native'
|
||||
import {msg} from '@lingui/macro'
|
||||
import {useLingui} from '@lingui/react'
|
||||
import {useNavigation} from '@react-navigation/native'
|
||||
|
||||
import {NavigationProp} from '#/lib/routes/types'
|
||||
import {isIOS} from '#/platform/detection'
|
||||
import {useSetDrawerOpen} from '#/state/shell'
|
||||
import {
|
||||
atoms as a,
|
||||
useBreakpoints,
|
||||
useGutterStyles,
|
||||
useTheme,
|
||||
ViewStyleProp,
|
||||
} from '#/alf'
|
||||
import {Button, ButtonIcon} from '#/components/Button'
|
||||
import {ArrowLeft_Stroke2_Corner0_Rounded as ArrowLeft} from '#/components/icons/Arrow'
|
||||
import {Menu_Stroke2_Corner0_Rounded as Menu} from '#/components/icons/Menu'
|
||||
import {Text} from '#/components/Typography'
|
||||
|
||||
const BUTTON_VISUAL_ALIGNMENT_OFFSET = 3
|
||||
const BUTTON_SIZE = 34 // small button
|
||||
|
||||
export function Outer({children}: {children: React.ReactNode}) {
|
||||
const t = useTheme()
|
||||
const gutter = useGutterStyles()
|
||||
|
||||
return (
|
||||
<View
|
||||
style={[
|
||||
a.w_full,
|
||||
a.border_b,
|
||||
a.flex_row,
|
||||
a.align_center,
|
||||
a.gap_sm,
|
||||
gutter,
|
||||
a.py_sm,
|
||||
t.atoms.border_contrast_low,
|
||||
]}>
|
||||
<View style={[a.flex_1]}>{children}</View>
|
||||
</View>
|
||||
)
|
||||
}
|
||||
|
||||
export function Content({children}: {children: React.ReactNode}) {
|
||||
return (
|
||||
<View
|
||||
style={[
|
||||
a.flex_1,
|
||||
a.justify_center,
|
||||
a.py_xs,
|
||||
isIOS && a.align_center,
|
||||
{
|
||||
paddingHorizontal: BUTTON_SIZE + a.gap_sm.gap,
|
||||
minHeight: BUTTON_SIZE,
|
||||
},
|
||||
]}>
|
||||
{children}
|
||||
</View>
|
||||
)
|
||||
}
|
||||
|
||||
export function Slot({
|
||||
children,
|
||||
style,
|
||||
}: {children?: React.ReactNode} & ViewStyleProp) {
|
||||
return (
|
||||
<View
|
||||
style={[
|
||||
a.absolute,
|
||||
a.inset_0,
|
||||
a.z_50,
|
||||
{
|
||||
width: BUTTON_SIZE,
|
||||
right: 'auto',
|
||||
},
|
||||
style,
|
||||
]}>
|
||||
{children}
|
||||
</View>
|
||||
)
|
||||
}
|
||||
|
||||
export function BackButton() {
|
||||
const {_} = useLingui()
|
||||
const navigation = useNavigation<NavigationProp>()
|
||||
|
||||
const onPressBack = React.useCallback(() => {
|
||||
if (navigation.canGoBack()) {
|
||||
navigation.goBack()
|
||||
} else {
|
||||
navigation.navigate('Home')
|
||||
}
|
||||
}, [navigation])
|
||||
|
||||
return (
|
||||
<Slot>
|
||||
<Button
|
||||
label={_(msg`Go back`)}
|
||||
size="small"
|
||||
variant="ghost"
|
||||
color="secondary"
|
||||
shape="round"
|
||||
onPress={onPressBack}
|
||||
style={[{marginLeft: -BUTTON_VISUAL_ALIGNMENT_OFFSET}]}>
|
||||
<ButtonIcon icon={ArrowLeft} size="lg" />
|
||||
</Button>
|
||||
</Slot>
|
||||
)
|
||||
}
|
||||
|
||||
export function MenuButton() {
|
||||
const {_} = useLingui()
|
||||
const setDrawerOpen = useSetDrawerOpen()
|
||||
const {gtMobile} = useBreakpoints()
|
||||
|
||||
const onPress = React.useCallback(() => {
|
||||
setDrawerOpen(true)
|
||||
}, [setDrawerOpen])
|
||||
|
||||
return gtMobile ? null : (
|
||||
<Slot>
|
||||
<Button
|
||||
label={_(msg`Open drawer menu`)}
|
||||
size="small"
|
||||
variant="ghost"
|
||||
color="secondary"
|
||||
shape="round"
|
||||
onPress={onPress}
|
||||
style={[{marginLeft: -BUTTON_VISUAL_ALIGNMENT_OFFSET}]}>
|
||||
<ButtonIcon icon={Menu} size="lg" />
|
||||
</Button>
|
||||
</Slot>
|
||||
)
|
||||
}
|
||||
|
||||
export function TitleText({children}: {children: React.ReactNode}) {
|
||||
const {gtMobile} = useBreakpoints()
|
||||
return (
|
||||
<Text
|
||||
style={[
|
||||
a.text_lg,
|
||||
a.font_heavy,
|
||||
a.leading_snug,
|
||||
gtMobile && [a.text_xl],
|
||||
]}>
|
||||
{children}
|
||||
</Text>
|
||||
)
|
||||
}
|
||||
|
||||
export function SubtitleText({children}: {children: React.ReactNode}) {
|
||||
const t = useTheme()
|
||||
return (
|
||||
<Text style={[a.text_sm, a.leading_tight, t.atoms.text_contrast_medium]}>
|
||||
{children}
|
||||
</Text>
|
||||
)
|
||||
}
|
||||
@@ -0,0 +1,183 @@
|
||||
import React, {useContext, useMemo} from 'react'
|
||||
import {StyleSheet, View, ViewProps, ViewStyle} from 'react-native'
|
||||
import {StyleProp} from 'react-native'
|
||||
import {
|
||||
KeyboardAwareScrollView,
|
||||
KeyboardAwareScrollViewProps,
|
||||
} from 'react-native-keyboard-controller'
|
||||
import Animated, {AnimatedScrollViewProps} from 'react-native-reanimated'
|
||||
import {useSafeAreaInsets} from 'react-native-safe-area-context'
|
||||
|
||||
import {isWeb} from '#/platform/detection'
|
||||
import {atoms as a, useBreakpoints, useTheme, web} from '#/alf'
|
||||
|
||||
export * as Header from '#/components/Layout/Header'
|
||||
|
||||
// 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,
|
||||
})
|
||||
|
||||
export type ScreenProps = React.ComponentProps<typeof View> & {
|
||||
disableTopPadding?: boolean
|
||||
style?: StyleProp<ViewStyle>
|
||||
}
|
||||
|
||||
/**
|
||||
* 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
|
||||
*/
|
||||
export const Screen = React.memo(function Screen({
|
||||
disableTopPadding = false,
|
||||
style,
|
||||
...props
|
||||
}: ScreenProps) {
|
||||
const {top} = useSafeAreaInsets()
|
||||
const context = useMemo(
|
||||
() => ({
|
||||
withinScreen: true,
|
||||
topPaddingDisabled: disableTopPadding,
|
||||
withinScrollView: false,
|
||||
}),
|
||||
[disableTopPadding],
|
||||
)
|
||||
return (
|
||||
<LayoutContext.Provider value={context}>
|
||||
{isWeb && <WebCenterBorders />}
|
||||
<View
|
||||
style={[
|
||||
{paddingTop: disableTopPadding ? 0 : top},
|
||||
a.util_screen_outer,
|
||||
style,
|
||||
]}
|
||||
{...props}
|
||||
/>
|
||||
</LayoutContext.Provider>
|
||||
)
|
||||
})
|
||||
|
||||
export type ContentProps = AnimatedScrollViewProps & {
|
||||
style?: StyleProp<ViewStyle>
|
||||
contentContainerStyle?: StyleProp<ViewStyle>
|
||||
}
|
||||
|
||||
export const Content = React.memo(function Content({
|
||||
children,
|
||||
style,
|
||||
contentContainerStyle,
|
||||
...props
|
||||
}: ContentProps) {
|
||||
const context = useContext(LayoutContext)
|
||||
const newContext = useMemo(
|
||||
() => ({...context, withinScrollView: true}),
|
||||
[context],
|
||||
)
|
||||
return (
|
||||
<LayoutContext.Provider value={newContext}>
|
||||
<Animated.ScrollView
|
||||
id="content"
|
||||
style={[styles.scrollViewCommonStyles, style]}
|
||||
contentContainerStyle={[
|
||||
styles.scrollViewContentContainer,
|
||||
contentContainerStyle,
|
||||
]}
|
||||
{...props}>
|
||||
{isWeb ? (
|
||||
// @ts-ignore web only -esb
|
||||
<Center>{children}</Center>
|
||||
) : (
|
||||
children
|
||||
)}
|
||||
</Animated.ScrollView>
|
||||
</LayoutContext.Provider>
|
||||
)
|
||||
})
|
||||
|
||||
export type KeyboardAwareContentProps = KeyboardAwareScrollViewProps & {
|
||||
children: React.ReactNode
|
||||
contentContainerStyle?: StyleProp<ViewStyle>
|
||||
}
|
||||
|
||||
export const KeyboardAwareContent = React.forwardRef(function LayoutScrollView(
|
||||
{children, style, contentContainerStyle, ...props}: KeyboardAwareContentProps,
|
||||
_ref: React.Ref<typeof KeyboardAwareScrollView>,
|
||||
) {
|
||||
return (
|
||||
<KeyboardAwareScrollView
|
||||
style={[styles.scrollViewCommonStyles, style]}
|
||||
contentContainerStyle={[
|
||||
styles.scrollViewContentContainer,
|
||||
contentContainerStyle,
|
||||
]}
|
||||
keyboardShouldPersistTaps="handled"
|
||||
{...props}>
|
||||
{isWeb ? <Center>{children}</Center> : children}
|
||||
</KeyboardAwareScrollView>
|
||||
)
|
||||
})
|
||||
|
||||
export const WebCenterBorders = React.forwardRef(function LayoutContent() {
|
||||
const t = useTheme()
|
||||
const {gtMobile} = useBreakpoints()
|
||||
return gtMobile ? (
|
||||
<View
|
||||
style={[
|
||||
a.fixed,
|
||||
a.inset_0,
|
||||
a.border_l,
|
||||
a.border_r,
|
||||
t.atoms.border_contrast_low,
|
||||
web({
|
||||
width: 602,
|
||||
left: '50%',
|
||||
transform: [
|
||||
{
|
||||
translateX: '-50%',
|
||||
},
|
||||
{
|
||||
translateX: `var(--scrollbar-offset-negative)`,
|
||||
},
|
||||
],
|
||||
}),
|
||||
]}
|
||||
/>
|
||||
) : null
|
||||
})
|
||||
|
||||
export const Center = React.forwardRef(function LayoutContent(
|
||||
{children, style, ...props}: ViewProps,
|
||||
ref: React.Ref<View>,
|
||||
) {
|
||||
const {gtMobile} = useBreakpoints()
|
||||
return (
|
||||
<View
|
||||
ref={ref}
|
||||
style={[
|
||||
a.util_screen_outer,
|
||||
a.w_full,
|
||||
a.mx_auto,
|
||||
gtMobile && {
|
||||
maxWidth: 600,
|
||||
},
|
||||
style,
|
||||
]}
|
||||
{...props}>
|
||||
{children}
|
||||
</View>
|
||||
)
|
||||
})
|
||||
|
||||
const styles = StyleSheet.create({
|
||||
scrollViewCommonStyles: {
|
||||
width: '100%',
|
||||
},
|
||||
scrollViewContentContainer: {
|
||||
paddingBottom: 100,
|
||||
},
|
||||
})
|
||||
Reference in New Issue
Block a user