diff options
Diffstat (limited to 'app_expo/components/screen')
-rw-r--r-- | app_expo/components/screen/screen.presets.ts | 66 | ||||
-rw-r--r-- | app_expo/components/screen/screen.props.ts | 46 | ||||
-rw-r--r-- | app_expo/components/screen/screen.tsx | 66 |
3 files changed, 0 insertions, 178 deletions
diff --git a/app_expo/components/screen/screen.presets.ts b/app_expo/components/screen/screen.presets.ts deleted file mode 100644 index aa8d8cf..0000000 --- a/app_expo/components/screen/screen.presets.ts +++ /dev/null @@ -1,66 +0,0 @@ -import { ViewStyle } from 'react-native' -import { color } from '../../theme' - -/** - * All screen keyboard offsets. - */ -export const offsets = { - none: 0, -} - -/** - * The variations of keyboard offsets. - */ -export type KeyboardOffsets = keyof typeof offsets - -/** - * All the variations of screens. - */ -export const presets = { - /** - * No scrolling. Suitable for full-screen carousels and components - * which have built-in scrolling like FlatList. - */ - fixed: { - outer: { - backgroundColor: color.background, - flex: 1, - height: '100%', - } as ViewStyle, - inner: { - justifyContent: 'flex-start', - alignItems: 'stretch', - height: '100%', - width: '100%', - } as ViewStyle, - }, - - /** - * Scrolls. Suitable for forms or other things requiring a keyboard. - * - * Pick this one if you don't know which one you want yet. - */ - scroll: { - outer: { - backgroundColor: color.background, - flex: 1, - height: '100%', - } as ViewStyle, - inner: { justifyContent: 'flex-start', alignItems: 'stretch' } as ViewStyle, - }, -} - -/** - * The variations of screens. - */ -export type ScreenPresets = keyof typeof presets - -/** - * Is this preset a non-scrolling one? - * - * @param preset The preset to check - */ -export function isNonScrolling(preset?: ScreenPresets) { - // any of these things will make you scroll - return !preset || !presets[preset] || preset === 'fixed' -} diff --git a/app_expo/components/screen/screen.props.ts b/app_expo/components/screen/screen.props.ts deleted file mode 100644 index 1371c64..0000000 --- a/app_expo/components/screen/screen.props.ts +++ /dev/null @@ -1,46 +0,0 @@ -import React from 'react' -import { StyleProp, ViewStyle } from 'react-native' -import { KeyboardOffsets, ScreenPresets } from './screen.presets' - -export interface ScreenProps { - /** - * Children components. - */ - children?: React.ReactNode - - /** - * An optional style override useful for padding & margin. - */ - style?: StyleProp<ViewStyle> - - /** - * One of the different types of presets. - */ - preset?: ScreenPresets - - /** - * An optional background color - */ - backgroundColor?: string - - /** - * An optional status bar setting. Defaults to light-content. - */ - statusBar?: 'light-content' | 'dark-content' - - /** - * Should we not wrap in SafeAreaView? Defaults to false. - */ - unsafe?: boolean - - /** - * By how much should we offset the keyboard? Defaults to none. - */ - keyboardOffset?: KeyboardOffsets - - /** - * Should keyboard persist on screen tap. Defaults to handled. - * Only applies to scroll preset. - */ - keyboardShouldPersistTaps?: 'handled' | 'always' | 'never' -} diff --git a/app_expo/components/screen/screen.tsx b/app_expo/components/screen/screen.tsx deleted file mode 100644 index dafe36e..0000000 --- a/app_expo/components/screen/screen.tsx +++ /dev/null @@ -1,66 +0,0 @@ -import * as React from 'react' -import { KeyboardAvoidingView, Platform, ScrollView, StatusBar, View } from 'react-native' -import { useSafeAreaInsets } from 'react-native-safe-area-context' -import { ScreenProps } from './screen.props' -import { isNonScrolling, offsets, presets } from './screen.presets' - -const isIos = Platform.OS === 'ios' - -function ScreenWithoutScrolling(props: ScreenProps) { - const insets = useSafeAreaInsets() - const preset = presets.fixed - const style = props.style || {} - const backgroundStyle = props.backgroundColor ? { backgroundColor: props.backgroundColor } : {} - const insetStyle = { paddingTop: props.unsafe ? 0 : insets.top } - - return ( - <KeyboardAvoidingView - style={[preset.outer, backgroundStyle]} - behavior={isIos ? 'padding' : undefined} - keyboardVerticalOffset={offsets[props.keyboardOffset || 'none']} - > - <StatusBar barStyle={props.statusBar || 'light-content'} /> - <View style={[preset.inner, style, insetStyle]}>{props.children}</View> - </KeyboardAvoidingView> - ) -} - -function ScreenWithScrolling(props: ScreenProps) { - const insets = useSafeAreaInsets() - const preset = presets.scroll - const style = props.style || {} - const backgroundStyle = props.backgroundColor ? { backgroundColor: props.backgroundColor } : {} - const insetStyle = { paddingTop: props.unsafe ? 0 : insets.top } - - return ( - <KeyboardAvoidingView - style={[preset.outer, backgroundStyle]} - behavior={isIos ? 'padding' : undefined} - keyboardVerticalOffset={offsets[props.keyboardOffset || 'none']} - > - <StatusBar barStyle={props.statusBar || 'light-content'} /> - <View style={[preset.outer, backgroundStyle, insetStyle]}> - <ScrollView - style={[preset.outer, backgroundStyle]} - contentContainerStyle={[preset.inner, style]} - keyboardShouldPersistTaps={props.keyboardShouldPersistTaps || 'handled'} - > - {props.children} - </ScrollView> - </View> - </KeyboardAvoidingView> - ) -} - -/** - * The starting component on every screen in the app. - * - * @param props The screen props - */ -export function Screen(props: ScreenProps) { - if (isNonScrolling(props.preset)) { - return <ScreenWithoutScrolling {...props} /> - } else { - return <ScreenWithScrolling {...props} /> - } -} |