Skip to content

Commit

Permalink
move auth flows scrollview to loggedin layout
Browse files Browse the repository at this point in the history
  • Loading branch information
mozzius committed Mar 22, 2024
1 parent 6f2dfcb commit 4ec4349
Show file tree
Hide file tree
Showing 5 changed files with 95 additions and 81 deletions.
41 changes: 10 additions & 31 deletions src/screens/Login/FormContainer.tsx
Original file line number Diff line number Diff line change
@@ -1,13 +1,6 @@
import React from 'react'
import {
ScrollView,
type StyleProp,
StyleSheet,
View,
type ViewStyle,
} from 'react-native'
import {type StyleProp, View, type ViewStyle} from 'react-native'

import {isWeb} from '#/platform/detection'
import {atoms as a, useBreakpoints, useTheme} from '#/alf'
import {Text} from '#/components/Typography'

Expand All @@ -16,38 +9,24 @@ export function FormContainer({
title,
children,
style,
contentContainerStyle,
}: {
testID?: string
title?: React.ReactNode
children: React.ReactNode
style?: StyleProp<ViewStyle>
contentContainerStyle?: StyleProp<ViewStyle>
}) {
const {gtMobile} = useBreakpoints()
const t = useTheme()
return (
<ScrollView
<View
testID={testID}
style={[styles.maxHeight, contentContainerStyle]}
keyboardShouldPersistTaps="handled">
<View
style={[a.gap_md, a.flex_1, !gtMobile && [a.px_lg, a.pt_md], style]}>
{title && !gtMobile && (
<Text style={[a.text_xl, a.font_bold, t.atoms.text_contrast_high]}>
{title}
</Text>
)}
{children}
</View>
</ScrollView>
style={[a.gap_md, a.flex_1, !gtMobile && [a.px_lg, a.py_md], style]}>
{title && !gtMobile && (
<Text style={[a.text_xl, a.font_bold, t.atoms.text_contrast_high]}>
{title}
</Text>
)}
{children}
</View>
)
}

const styles = StyleSheet.create({
maxHeight: {
// @ts-ignore web only -prf
maxHeight: isWeb ? '100vh' : undefined,
height: !isWeb ? '100%' : undefined,
},
})
6 changes: 5 additions & 1 deletion src/screens/Login/index.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -164,7 +164,11 @@ export const Login = ({onPressBack}: {onPressBack: () => void}) => {

return (
<KeyboardAvoidingView testID="signIn" behavior="padding" style={a.flex_1}>
<LoggedOutLayout leadin="" title={title} description={description}>
<LoggedOutLayout
leadin=""
title={title}
description={description}
scrollable>
<LayoutAnimationConfig skipEntering skipExiting>
<ScreenTransition key={currentForm}>{content}</ScreenTransition>
</LayoutAnimationConfig>
Expand Down
33 changes: 9 additions & 24 deletions src/screens/Signup/StepCaptcha/index.tsx
Original file line number Diff line number Diff line change
@@ -1,11 +1,10 @@
import React from 'react'
import {ActivityIndicator, StyleSheet, View} from 'react-native'
import {ActivityIndicator, View} from 'react-native'
import {msg} from '@lingui/macro'
import {useLingui} from '@lingui/react'
import {nanoid} from 'nanoid/non-secure'

import {createFullHandle} from '#/lib/strings/handles'
import {isWeb} from '#/platform/detection'
import {ScreenTransition} from '#/screens/Login/ScreenTransition'
import {useSignupContext, useSubmitSignup} from '#/screens/Signup/state'
import {CaptchaWebView} from '#/screens/Signup/StepCaptcha/CaptchaWebView'
Expand Down Expand Up @@ -54,7 +53,14 @@ export function StepCaptcha() {
return (
<ScreenTransition>
<View style={[a.gap_lg]}>
<View style={[styles.container, completed && styles.center]}>
<View
style={[
a.w_full,
a.pb_xl,
a.overflow_hidden,
{minHeight: 500},
completed && [a.align_center, a.justify_center],
]}>
{!completed ? (
<CaptchaWebView
url={url}
Expand All @@ -72,24 +78,3 @@ export function StepCaptcha() {
</ScreenTransition>
)
}

const styles = StyleSheet.create({
error: {
borderRadius: 6,
marginTop: 10,
},
// @ts-expect-error: Suppressing error due to incomplete `ViewStyle` type definition in react-native-web, missing `cursor` prop as discussed in https://github.com/necolas/react-native-web/issues/832.
touchable: {
...(isWeb && {cursor: 'pointer'}),
},
container: {
minHeight: 500,
width: '100%',
paddingBottom: 20,
overflow: 'hidden',
},
center: {
alignItems: 'center',
justifyContent: 'center',
},
})
41 changes: 24 additions & 17 deletions src/screens/Signup/index.tsx
Original file line number Diff line number Diff line change
@@ -1,5 +1,6 @@
import React from 'react'
import {ScrollView, View} from 'react-native'
import {View} from 'react-native'
import {LayoutAnimationConfig} from 'react-native-reanimated'
import {msg, Trans} from '@lingui/macro'
import {useLingui} from '@lingui/react'

Expand All @@ -20,7 +21,7 @@ import {
import {StepCaptcha} from '#/screens/Signup/StepCaptcha'
import {StepHandle} from '#/screens/Signup/StepHandle'
import {StepInfo} from '#/screens/Signup/StepInfo'
import {atoms as a, useTheme} from '#/alf'
import {atoms as a, useBreakpoints, useTheme} from '#/alf'
import {Button, ButtonText} from '#/components/Button'
import {Divider} from '#/components/Divider'
import {InlineLink} from '#/components/Link'
Expand All @@ -32,6 +33,7 @@ export function Signup({onPressBack}: {onPressBack: () => void}) {
const {screen} = useAnalytics()
const [state, dispatch] = React.useReducer(reducer, initialState)
const submit = useSubmitSignup({state, dispatch})
const {gtMobile} = useBreakpoints()

const {
data: serviceInfo,
Expand Down Expand Up @@ -125,13 +127,16 @@ export function Signup({onPressBack}: {onPressBack: () => void}) {
<LoggedOutLayout
leadin=""
title={_(msg`Create Account`)}
description={_(msg`We're so excited to have you join us!`)}>
<ScrollView
testID="createAccount"
keyboardShouldPersistTaps="handled"
style={a.h_full}
keyboardDismissMode="on-drag">
<View style={[a.flex_1, a.px_xl, a.pt_2xl, {paddingBottom: 100}]}>
description={_(msg`We're so excited to have you join us!`)}
scrollable>
<View testID="createAccount" style={a.flex_1}>
<View
style={[
a.flex_1,
a.px_xl,
a.pt_2xl,
!gtMobile && {paddingBottom: 100},
]}>
<View style={[a.gap_sm, a.pb_3xl]}>
<Text style={[a.font_semibold, t.atoms.text_contrast_medium]}>
<Trans>Step</Trans> {state.activeStep + 1} <Trans>of</Trans>{' '}
Expand All @@ -152,13 +157,15 @@ export function Signup({onPressBack}: {onPressBack: () => void}) {
</View>

<View style={[a.pb_3xl]}>
{state.activeStep === SignupStep.INFO ? (
<StepInfo />
) : state.activeStep === SignupStep.HANDLE ? (
<StepHandle />
) : (
<StepCaptcha />
)}
<LayoutAnimationConfig skipEntering skipExiting>
{state.activeStep === SignupStep.INFO ? (
<StepInfo />
) : state.activeStep === SignupStep.HANDLE ? (
<StepHandle />
) : (
<StepCaptcha />
)}
</LayoutAnimationConfig>
</View>

<View style={[a.flex_row, a.justify_between, a.pb_lg]}>
Expand Down Expand Up @@ -208,7 +215,7 @@ export function Signup({onPressBack}: {onPressBack: () => void}) {
</Text>
</View>
</View>
</ScrollView>
</View>
</LoggedOutLayout>
</SignupContext.Provider>
)
Expand Down
55 changes: 47 additions & 8 deletions src/view/com/util/layouts/LoggedOutLayout.tsx
Original file line number Diff line number Diff line change
@@ -1,19 +1,24 @@
import React from 'react'
import {StyleSheet, View} from 'react-native'
import {Text} from '../text/Text'
import {ScrollView, StyleSheet, View} from 'react-native'

import {isWeb} from '#/platform/detection'
import {useColorSchemeStyle} from 'lib/hooks/useColorSchemeStyle'
import {usePalette} from 'lib/hooks/usePalette'
import {useWebMediaQueries} from 'lib/hooks/useWebMediaQueries'
import {useColorSchemeStyle} from 'lib/hooks/useColorSchemeStyle'
import {atoms as a} from '#/alf'
import {Text} from '../text/Text'

export const LoggedOutLayout = ({
leadin,
title,
description,
children,
scrollable,
}: React.PropsWithChildren<{
leadin: string
title: string
description: string
scrollable?: boolean
}>) => {
const {isMobile, isTabletOrMobile} = useWebMediaQueries()
const pal = usePalette('default')
Expand All @@ -25,7 +30,18 @@ export const LoggedOutLayout = ({
})

if (isMobile) {
return <View style={{paddingTop: 10}}>{children}</View>
if (scrollable) {
return (
<ScrollView
style={styles.scrollview}
keyboardShouldPersistTaps="handled"
keyboardDismissMode="on-drag">
<View style={a.pt_md}>{children}</View>
</ScrollView>
)
} else {
return <View style={a.pt_md}>{children}</View>
}
}
return (
<View style={styles.container}>
Expand All @@ -50,9 +66,23 @@ export const LoggedOutLayout = ({
{description}
</Text>
</View>
<View style={[styles.content, contentBg]}>
<View style={styles.contentWrapper}>{children}</View>
</View>
{scrollable ? (
<View style={[styles.scrollableContent, contentBg]}>
<ScrollView
style={styles.scrollview}
contentContainerStyle={styles.scrollViewContentContainer}
keyboardShouldPersistTaps="handled"
keyboardDismissMode="on-drag">
<View style={[styles.contentWrapper, isWeb && a.my_auto]}>
{children}
</View>
</ScrollView>
</View>
) : (
<View style={[styles.content, contentBg]}>
<View style={styles.contentWrapper}>{children}</View>
</View>
)}
</View>
)
}
Expand All @@ -74,7 +104,16 @@ const styles = StyleSheet.create({
paddingHorizontal: 40,
justifyContent: 'center',
},

scrollableContent: {
flex: 2,
},
scrollview: {
flex: 1,
},
scrollViewContentContainer: {
flex: 1,
paddingHorizontal: 40,
},
leadinText: {
fontSize: 36,
fontWeight: '800',
Expand Down

0 comments on commit 4ec4349

Please sign in to comment.