get scrollview working

bluesky-social · Oct 1, 2024 · d0149a9 · d0149a9
1 parent 6dec099
commit d0149a9
Show file tree

Hide file tree

Showing 3 changed files with 64 additions and 70 deletions.
diff --git a/package.json b/package.json
@@ -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",

diff --git a/src/components/Dialog/index.tsx b/src/components/Dialog/index.tsx
@@ -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,

diff --git a/yarn.lock b/yarn.lock
@@ -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/[email protected]":
   version "0.1.10"