[🐴] New chat dialog refresh (#4071)

* Checkpoint, header styled, empty * Checkpoint, styles * Show recent follows in initial state, finesse some styles * Add skeleton * Add some limits * Fix autofocus on web, use bottom sheet input on native * Ignore type * Clean up edits * Format * Tweak icon placement * Fix type * use prop for dismissing keyboard --------- Co-authored-by: Hailey <[email protected]>
bluesky-social · May 17, 2024 · 1cdcb3e · 1cdcb3e
1 parent d02e088
commit 1cdcb3e
Show file tree

Hide file tree

Showing 9 changed files with 530 additions and 292 deletions.
diff --git a/src/components/Dialog/index.tsx b/src/components/Dialog/index.tsx
@@ -1,5 +1,5 @@
 import React, {useImperativeHandle} from 'react'
-import {Dimensions, Pressable, View} from 'react-native'
+import {Dimensions, Pressable, StyleProp, View, ViewStyle} from 'react-native'
 import Animated, {useAnimatedStyle} from 'react-native-reanimated'
 import {useSafeAreaInsets} from 'react-native-safe-area-context'
 import BottomSheet, {
@@ -257,9 +257,10 @@ export const ScrollableInner = React.forwardRef<
 
 export const InnerFlatList = React.forwardRef<
   BottomSheetFlatListMethods,
-  BottomSheetFlatListProps<any>
+  BottomSheetFlatListProps<any> & {webInnerStyle?: StyleProp<ViewStyle>}
 >(function InnerFlatList({style, contentContainerStyle, ...props}, ref) {
   const insets = useSafeAreaInsets()
+
   return (
     <BottomSheetFlatList
       keyboardShouldPersistTaps="handled"
@@ -276,6 +277,8 @@ export const InnerFlatList = React.forwardRef<
         a.h_full,
         {
           marginTop: 40,
+          borderTopLeftRadius: 40,
+          borderTopRightRadius: 40,
         },
         flatten(style),
       ]}

diff --git a/src/components/Dialog/index.web.tsx b/src/components/Dialog/index.web.tsx
@@ -2,8 +2,10 @@ import React, {useImperativeHandle} from 'react'
 import {
   FlatList,
   FlatListProps,
+  StyleProp,
   TouchableWithoutFeedback,
   View,
+  ViewStyle,
 } from 'react-native'
 import Animated, {FadeIn, FadeInDown} from 'react-native-reanimated'
 import {msg} from '@lingui/macro'
@@ -199,18 +201,21 @@ export const ScrollableInner = Inner
 
 export const InnerFlatList = React.forwardRef<
   FlatList,
-  FlatListProps<any> & {label: string}
->(function InnerFlatList({label, style, ...props}, ref) {
+  FlatListProps<any> & {label: string} & {webInnerStyle?: StyleProp<ViewStyle>}
+>(function InnerFlatList({label, style, webInnerStyle, ...props}, ref) {
   const {gtMobile} = useBreakpoints()
   return (
     <Inner
       label={label}
-      // @ts-ignore web only -sfn
-      style={{
-        paddingHorizontal: 0,
-        maxHeight: 'calc(-36px + 100vh)',
-        overflow: 'hidden',
-      }}>
+      style={[
+        // @ts-ignore web only -sfn
+        {
+          paddingHorizontal: 0,
+          maxHeight: 'calc(-36px + 100vh)',
+          overflow: 'hidden',
+        },
+        webInnerStyle,
+      ]}>
       <FlatList
         ref={ref}
         style={[gtMobile ? a.px_2xl : a.px_xl, flatten(style)]}

diff --git a/src/components/dms/NewChat.tsx b/src/components/dms/NewChat.tsx
diff --git a/src/components/dms/NewChatDialog/TextInput.tsx b/src/components/dms/NewChatDialog/TextInput.tsx
@@ -0,0 +1 @@
+export {BottomSheetTextInput as TextInput} from '@discord/bottom-sheet/src'
diff --git a/src/components/dms/NewChatDialog/TextInput.web.tsx b/src/components/dms/NewChatDialog/TextInput.web.tsx
@@ -0,0 +1 @@
+export {TextInput} from 'react-native'
Original file line number	Diff line number	Diff line change
		@@ -0,0 +1 @@
		export {BottomSheetTextInput as TextInput} from '@discord/bottom-sheet/src'