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

get scrollview working

Browse Source
This commit is contained in:
Hailey
2024-10-01 15:10:43 -07:00
parent 6dec099b58
commit d0149a96bc
3 changed files with 64 additions and 70 deletions
Download Patch File Download Diff File Expand all files Collapse all files
package.json
+1
View File
@@ -68,6 +68,7 @@
"@fortawesome/free-regular-svg-icons": "^6.1.1",
"@fortawesome/free-solid-svg-icons": "^6.1.1",
"@fortawesome/react-native-fontawesome": "^0.3.2",
"@haileyok/bluesky-bottom-sheet": "^0.1.1-alpha.7",
"@haileyok/bluesky-video": "0.1.10",
"@lingui/react": "^4.5.0",
"@mattermost/react-native-paste-input": "^0.7.1",
src/components/Dialog/index.tsx
+59 -66
View File
@@ -1,15 +1,14 @@
import React, {useImperativeHandle} from 'react'
import {Dimensions, Keyboard, StyleProp, View, ViewStyle} from 'react-native'
import {ScrollView, StyleProp, View, ViewStyle} from 'react-native'
import {useSafeAreaInsets} from 'react-native-safe-area-context'
import BottomSheet, {
import {
BottomSheetFlatList,
BottomSheetFlatListMethods,
BottomSheetScrollView,
BottomSheetScrollViewMethods,
BottomSheetTextInput,
BottomSheetView,
} from '@discord/bottom-sheet/src'
import {BottomSheetFlatListProps} from '@discord/bottom-sheet/src/components/bottomSheetScrollable/types'
import {BlueskyBottomSheetView} from '@haileyok/bluesky-bottom-sheet'
import {logger} from '#/logger'
import {useDialogStateControlContext} from '#/state/dialogs'
@@ -37,7 +36,7 @@ export function Outer({
testID,
}: React.PropsWithChildren<DialogOuterProps>) {
const t = useTheme()
const sheet = React.useRef<BottomSheet>(null)
const ref = React.useRef<BlueskyBottomSheetView>(null)
const insets = useSafeAreaInsets()
const closeCallbacks = React.useRef<(() => void)[]>([])
const {setDialogIsOpen} = useDialogStateControlContext()
@@ -61,7 +60,7 @@ export function Outer({
callQueuedCallbacks()
setIsOpen(true)
setDialogIsOpen(control.id, true)
// sheet.current?.open() // @TODO DIALOG REFACTOR
ref.current?.present()
}, [setDialogIsOpen, control.id, callQueuedCallbacks])
// This is the function that we call when we want to dismiss the dialog.
@@ -70,7 +69,7 @@ export function Outer({
if (typeof cb === 'function') {
closeCallbacks.current.push(cb)
}
// sheet.current?.close() // @TODO DIALOG REFACTOR
ref.current?.dismiss()
}, [])
// This is the actual thing we are doing once we "confirm" the dialog. We want the dialog's close animation to
@@ -102,39 +101,36 @@ export function Outer({
const context = React.useMemo(() => ({close}), [close])
return (
isOpen && (
<Portal>
<View
// iOS
accessibilityViewIsModal
style={[a.absolute, a.inset_0]}
testID={testID}
onTouchMove={() => Keyboard.dismiss()}>
<BottomSheet
topInset={insets.top}
bottomInset={insets.bottom}
ref={sheet}
// handleIndicatorStyle={{backgroundColor: t.palette.primary_500}} // @TODO DIALOG REFACTOR need to add this to lib!
onClose={onCloseAnimationComplete}>
<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>
</View>
</Portal>
)
<Portal>
<Context.Provider value={context}>
<BlueskyBottomSheetView
// handleIndicatorStyle={{backgroundColor: t.palette.primary_500}} // @TODO DIALOG REFACTOR need to add this to lib!*/
ref={ref}
topInset={insets.top}
bottomInset={insets.bottom}
onStateChange={e => {
if (e.nativeEvent.state === 'closed') {
onCloseAnimationComplete()
}
}}>
<View testID={testID} style={[t.atoms.bg]}>
{/*<View*/}
{/* style={[*/}
{/* a.absolute,*/}
{/* a.inset_0,*/}
{/* t.atoms.bg,*/}
{/* {*/}
{/* borderTopLeftRadius: 40,*/}
{/* borderTopRightRadius: 40,*/}
{/* height: Dimensions.get('window').height * 2,*/}
{/* },*/}
{/* ]}*/}
{/*/>*/}
{children}
</View>
</BlueskyBottomSheetView>
</Context.Provider>
</Portal>
)
}
@@ -158,32 +154,29 @@ export function Inner({children, style}: DialogInnerProps) {
)
}
export const ScrollableInner = React.forwardRef<
BottomSheetScrollViewMethods,
DialogInnerProps
>(function ScrollableInner({children, style}, ref) {
const insets = useSafeAreaInsets()
return (
<BottomSheetScrollView
keyboardShouldPersistTaps="handled"
style={[
a.flex_1, // main diff is this
a.p_xl,
a.h_full,
{
paddingTop: 40,
borderTopLeftRadius: 40,
borderTopRightRadius: 40,
},
style,
]}
contentContainerStyle={a.pb_4xl}
ref={ref}>
{children}
<View style={{height: insets.bottom + a.pt_5xl.paddingTop}} />
</BottomSheetScrollView>
)
})
export const ScrollableInner = React.forwardRef<ScrollView, DialogInnerProps>(
function ScrollableInner({children, style}, ref) {
const insets = useSafeAreaInsets()
return (
<View
// style={[
// a.p_xl,
// a.h_full,
// {
// paddingTop: 40,
// borderTopLeftRadius: 40,
// borderTopRightRadius: 40,
// },
// style,
// ]}
// ref={ref}
>
{children}
<View style={{height: insets.bottom + a.pt_5xl.paddingTop}} />
</View>
)
},
)
export const InnerFlatList = React.forwardRef<
BottomSheetFlatListMethods,
yarn.lock
+4 -4
View File
@@ -4120,10 +4120,10 @@
resolved "https://registry.yarnpkg.com/@graphql-typed-document-node/core/-/core-3.2.0.tgz#5f3d96ec6b2354ad6d8a28bf216a1d97b5426861"
integrity sha512-mB9oAsNCm9aM3/SOv4YtBMqZbYj10R7dkq8byBqxGY/ncFwhf2oQzMV+LCRlWoDSEBJ3COiR1yeDvMtsoOsuFQ==
"@haileyok/bluesky-bottom-sheet@^0.1.1-alpha.4":
version "0.1.1-alpha.4"
resolved "https://registry.yarnpkg.com/@haileyok/bluesky-bottom-sheet/-/bluesky-bottom-sheet-0.1.1-alpha.4.tgz#19717e57e63d70e79b8bd86984903c448deb83bc"
integrity sha512-bEZRbErsI6OJCgmFolbr9Ta5LxNvyaltzRPFOVtwsykIwL8tqNJeNlmfxP8EdJa5lSu2kK1MauQcygmCIouzwg==
"@haileyok/bluesky-bottom-sheet@^0.1.1-alpha.7":
version "0.1.1-alpha.7"
resolved "https://registry.yarnpkg.com/@haileyok/bluesky-bottom-sheet/-/bluesky-bottom-sheet-0.1.1-alpha.7.tgz#a5845cd2ac386b78716db5940b65b3e78b392042"
integrity sha512-Ps2nsNmfjqUmP/LPAM94/2dWZerwZEjnvSUfi/ipFNHlNp/McIYIObxDaPJaZ0ZLxUcRXxdhmC3UonK25sJKSw==
"@haileyok/bluesky-video@0.1.10":
version "0.1.10"