acetheking987/bsky-social-app
1
0
Fork 0
Code Issues Actions Packages Projects Releases 1 Wiki Activity

Scrollable dialogs

Browse Source
This commit is contained in:
Eric Bailey
2024-01-15 15:58:57 -06:00
parent 94d31d4cc5
commit 048ce0244f
8 changed files with 67 additions and 52 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/App.native.tsx
+1 -5
View File
@@ -41,10 +41,7 @@ import {
import {Provider as UnreadNotifsProvider} from 'state/queries/notifications/unread'
import * as persisted from '#/state/persisted'
import {Splash} from '#/Splash'
import {
Provider as PortalProvider,
Outlet as PortalOutlet,
} from '#/components/Portal'
import {Provider as PortalProvider} from '#/components/Portal'
SplashScreen.preventAutoHideAsync()
@@ -80,7 +77,6 @@ function InnerApp() {
<GestureHandlerRootView style={s.h100pct}>
<TestCtrls />
<Shell />
<PortalOutlet />
</GestureHandlerRootView>
</RootSiblingParent>
</ThemeProvider>
src/App.web.tsx
+1 -5
View File
@@ -30,10 +30,7 @@ import {
} from 'state/session'
import {Provider as UnreadNotifsProvider} from 'state/queries/notifications/unread'
import * as persisted from '#/state/persisted'
import {
Provider as PortalProvider,
Outlet as PortalOutlet,
} from '#/components/Portal'
import {Provider as PortalProvider} from '#/components/Portal'
function InnerApp() {
const {isInitialLoad, currentAccount} = useSession()
@@ -62,7 +59,6 @@ function InnerApp() {
<RootSiblingParent>
<SafeAreaProvider>
<Shell />
<PortalOutlet />
</SafeAreaProvider>
</RootSiblingParent>
<ToastContainer />
src/components/Dialog/index.tsx
+47 -33
View File
@@ -2,6 +2,7 @@ import React, {useImperativeHandle} from 'react'
import {View, Dimensions} from 'react-native'
import BottomSheet, {
BottomSheetBackdrop,
BottomSheetScrollView,
BottomSheetView,
} from '@gorhom/bottom-sheet'
import {useSafeAreaInsets} from 'react-native-safe-area-context'
@@ -16,13 +17,6 @@ import {
} from '#/components/Dialog/types'
import {Context} from '#/components/Dialog/context'
/**
* Exports
*/
export {
BottomSheetScrollView as ScrollView,
BottomSheetTextInput as TextInput,
} from '@gorhom/bottom-sheet'
export {useDialogControl, useDialogContext} from '#/components/Dialog/context'
export * from '#/components/Dialog/types'
@@ -34,6 +28,8 @@ export function Outer({
}: React.PropsWithChildren<DialogOuterProps>) {
const t = useTheme()
const sheet = React.useRef<BottomSheet>(null)
const sheetOptions = nativeOptions?.sheet || {}
const hasSnapPoints = !!sheetOptions.snapPoints
const open = React.useCallback<DialogControlProps['open']>((i = 0) => {
sheet.current?.snapToIndex(i)
@@ -58,15 +54,15 @@ export function Outer({
return (
<Portal>
<BottomSheet
enableDynamicSizing
enableDynamicSizing={!hasSnapPoints}
enablePanDownToClose
keyboardBehavior="interactive"
android_keyboardInputMode="adjustResize"
keyboardBlurBehavior="restore"
{...(nativeOptions?.sheet || {})}
{...sheetOptions}
ref={sheet}
index={-1}
backgroundStyle={{backgroundColor: 'transparent'}}
backgroundStyle={{backgroundColor: t.atoms.bg.backgroundColor}}
backdropComponent={props => (
<BottomSheetBackdrop
appearsOnIndex={0}
@@ -77,23 +73,21 @@ export function Outer({
handleIndicatorStyle={{backgroundColor: t.palette.primary_500}}
handleStyle={{display: 'none'}}
onClose={onClose}>
<BottomSheetView>
<Context.Provider value={context}>
<View
style={[
a.absolute,
a.inset_0,
t.atoms.bg,
{
borderTopLeftRadius: 40,
borderTopRightRadius: 40,
height: Dimensions.get('window').height * 2,
},
]}
/>
{children}
</Context.Provider>
</BottomSheetView>
<Context.Provider value={context}>
<View
style={[
a.absolute,
a.inset_0,
t.atoms.bg,
{
borderTopLeftRadius: 40,
borderTopRightRadius: 40,
height: Dimensions.get('window').height * 2,
},
]}
/>
{children}
</Context.Provider>
</BottomSheet>
</Portal>
)
@@ -103,7 +97,7 @@ export function Outer({
export function Inner(props: DialogInnerProps) {
const insets = useSafeAreaInsets()
return (
<View
<BottomSheetView
style={[
a.p_lg,
a.pt_3xl,
@@ -114,7 +108,26 @@ export function Inner(props: DialogInnerProps) {
},
]}>
{props.children}
</View>
</BottomSheetView>
)
}
export function ScrollableInner(props: DialogInnerProps) {
const insets = useSafeAreaInsets()
return (
<BottomSheetScrollView
style={[
a.flex_1, // main diff is this
a.p_lg,
a.pt_3xl,
{
borderTopLeftRadius: 40,
borderTopRightRadius: 40,
paddingBottom: insets.bottom + a.pb_5xl.paddingBottom,
},
]}>
{props.children}
</BottomSheetScrollView>
)
}
@@ -126,12 +139,13 @@ export function Handle() {
a.absolute,
a.rounded_sm,
a.z_10,
t.atoms.bg_contrast_200,
{
top: 12,
width: 50,
height: 6,
top: a.pt_lg.paddingTop,
width: 35,
height: 4,
alignSelf: 'center',
backgroundColor: t.palette.contrast_900,
opacity: 0.5,
},
]}
/>
src/components/Dialog/index.web.tsx
+4 -3
View File
@@ -11,7 +11,6 @@ import {Button} from '#/components/Button'
import {DialogOuterProps, DialogInnerProps} from '#/components/Dialog/types'
import {Context, useDialogContext} from '#/components/Dialog/context'
export {ScrollView, TextInput} from 'react-native'
export {useDialogControl, useDialogContext} from '#/components/Dialog/context'
export * from '#/components/Dialog/types'
@@ -91,7 +90,7 @@ export function Outer({
style={[
web(a.fixed),
a.inset_0,
t.atoms.bg_contrast_300,
t.atoms.bg_contrast_100,
{opacity: 0.8},
]}
/>
@@ -145,7 +144,7 @@ export function Inner({
a.border,
gtMobile ? a.p_xl : a.p_lg,
t.atoms.bg,
{maxWidth: 600, borderColor: t.palette.contrast_300},
{maxWidth: 600, borderColor: t.palette.contrast_200},
...(Array.isArray(style) ? style : [style || {}]),
]}>
{children}
@@ -154,6 +153,8 @@ export function Inner({
)
}
export const ScrollableInner = Inner
export function Handle() {
return null
}
src/components/Prompt.tsx
+2 -1
View File
@@ -34,11 +34,12 @@ export function Outer({
return (
<Dialog.Outer control={control}>
<Context.Provider value={context}>
<Dialog.Handle />
<Dialog.Inner
accessibilityLabelledBy={titleId}
accessibilityDescribedBy={descriptionId}
style={{width: 'auto', maxWidth: 400}}>
<Dialog.Handle />
{children}
</Dialog.Inner>
</Context.Provider>
src/view/screens/Storybook/Dialogs.tsx
+8 -5
View File
@@ -45,15 +45,18 @@ export function Dialogs() {
</Prompt.Actions>
</Prompt.Outer>
<Dialog.Outer control={control}>
<Dialog.Inner
<Dialog.Outer
control={control}
nativeOptions={{sheet: {snapPoints: ['90%']}}}>
<Dialog.Handle />
<Dialog.ScrollableInner
accessibilityLabelledBy="dialog-title"
accessibilityDescribedBy="dialog-description">
<Dialog.Handle />
<View style={[a.relative, a.gap_md, a.w_full]}>
<H3 nativeID="dialog-title">Dialog</H3>
<P nativeID="dialog-description">Description</P>
<View style={{height: 1000}} />
<View style={[a.flex_row, a.justify_end]}>
<Button
variant="outline"
@@ -66,7 +69,7 @@ export function Dialogs() {
</Button>
</View>
</View>
</Dialog.Inner>
</Dialog.ScrollableInner>
</Dialog.Outer>
</>
)
src/view/shell/index.tsx
+2
View File
@@ -28,6 +28,7 @@ import {isAndroid} from 'platform/detection'
import {useSession} from '#/state/session'
import {useCloseAnyActiveElement} from '#/state/util'
import * as notifications from 'lib/notifications/notifications'
import {Outlet as PortalOutlet} from '#/components/Portal'
function ShellInner() {
const isDrawerOpen = useIsDrawerOpen()
@@ -94,6 +95,7 @@ function ShellInner() {
</View>
<Composer winHeight={winDim.height} />
<ModalsContainer />
<PortalOutlet />
<Lightbox />
</>
)
src/view/shell/index.web.tsx
+2
View File
@@ -15,6 +15,7 @@ import {useAuxClick} from 'lib/hooks/useAuxClick'
import {t} from '@lingui/macro'
import {useIsDrawerOpen, useSetDrawerOpen} from '#/state/shell'
import {useCloseAllActiveElements} from '#/state/util'
import {Outlet as PortalOutlet} from '#/components/Portal'
function ShellInner() {
const isDrawerOpen = useIsDrawerOpen()
@@ -41,6 +42,7 @@ function ShellInner() {
</View>
<Composer winHeight={0} />
<ModalsContainer />
<PortalOutlet />
<Lightbox />
{!isDesktop && isDrawerOpen && (
<TouchableOpacity