feat(messy): add onPress to list message

vokhuyetOz · May 31, 2024 · 83d064d · 83d064d
1 parent 44523f8
commit 83d064d
Show file tree

Hide file tree

Showing 6 changed files with 78 additions and 45 deletions.
diff --git a/README.md b/README.md
@@ -51,6 +51,12 @@ import { Messy } from '@vokhuyet/react-native-messy';
         listProps={{
           onEndReached,
           ListHeaderComponent: ChatListHeader,
+          onPress: () => {
+              //hide all bottom sheet modal inlcuding: emoji picker,...
+              dismissAll();
+              //hide keyboard
+              Keyboard.dismiss();
+          },
         }}
         messageProps={{
           hideOwnerAvatar: true,
@@ -205,7 +211,7 @@ input: {
 - `user`([TUser](#tuser)): sender information;
 - `theme`: ([TColor](#tcolor)): custom theme for message;
 - `footerProps`([TMessyFooterProps](#tmessyfooterprops)): Custom props for Element below list messages;
-- `listProps`(TListProps): custom flatlist props;
+- `listProps`(TListProps): custom flatlist props and onPress event;
 - `messageProps`([TMessageProps](#tmessageprops));
 - `parsedShape`([ParseShape[]](https://github.com/taskrabbit/react-native-parsed-text)): Custom parse patterns for react-native-parsed-text ;
 - `showDateTime`(boolean): show created time of message;

diff --git a/example/src/App.tsx b/example/src/App.tsx
@@ -276,57 +276,79 @@ function ExtraLeft({ animatedPosition }) {
           elevation: 6,
         }}
         animationConfigs={{ duration: 300 }}
-        snapPoints={[100, 600]}
+        snapPoints={[100, '90%']}
         animatedPosition={animatedPosition}
       >
         <Text style={{ alignSelf: 'center' }}>Demo</Text>
       </BottomSheetModal>
     </View>
   );
 }
-const App = () => {
+function BasicExample() {
   const [mess, setMess] = useState([...mockMessage.reverse()]);
 
+  const { dismissAll } = useBottomSheetModal();
+  return (
+    <Messy
+      BaseModule={{
+        Image: ImageV,
+        Cache: {
+          get: MMKVwithID.getMap,
+          set: MMKVwithID.setMap,
+        },
+      }}
+      messageProps={{
+        hideOwnerAvatar: true,
+        hidePartnerAvatar: false,
+        onPress: () => {
+          console.log('press item');
+        },
+        onLongPress: () => {
+          console.log('long press item');
+        },
+      }}
+      listProps={{
+        onStartReached: () => {
+          console.log('onStartReached');
+        },
+        onEndReached: () => {
+          console.log('onEndReached');
+        },
+        onPress: () => {
+          //hide all bottom sheet modal
+          dismissAll();
+          //hide keyboard
+          Keyboard.dismiss();
+        },
+      }}
+      messages={mess}
+      user={{ id: 2 }}
+      footerProps={{
+        onSend: async (message: TMessyMessage) => {
+          message;
+          mess.unshift(message);
+          setMess([...mess]);
+          // upload image
+          setTimeout(() => {
+            //@ts-ignore
+            mess[0].status = 'sent';
+            setMess([...mess]);
+          }, 2000);
+
+          //send to server by socket
+        },
+        ExtraLeft: <ExtraLeft />,
+      }}
+    />
+  );
+}
+const App = () => {
   return (
     <GestureHandlerRootView style={{ flex: 1 }}>
       <SafeAreaView style={{ flex: 1 }}>
         <BottomSheetModalProvider>
           <KeyboardProvider>
-            <Messy
-              BaseModule={{
-                Image: ImageV,
-                Cache: {
-                  get: MMKVwithID.getMap,
-                  set: MMKVwithID.setMap,
-                },
-              }}
-              listProps={{
-                onStartReached: () => {
-                  console.log('onStartReached');
-                },
-                onEndReached: () => {
-                  console.log('onEndReached');
-                },
-              }}
-              messages={mess}
-              user={{ id: 2 }}
-              footerProps={{
-                onSend: async (message: TMessyMessage) => {
-                  message;
-                  mess.unshift(message);
-                  setMess([...mess]);
-                  // upload image
-                  setTimeout(() => {
-                    //@ts-ignore
-                    mess[0].status = 'sent';
-                    setMess([...mess]);
-                  }, 2000);
-
-                  //send to server by socket
-                },
-                ExtraLeft: <ExtraLeft />,
-              }}
-            />
+            <BasicExample />
           </KeyboardProvider>
         </BottomSheetModalProvider>
       </SafeAreaView>

diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@vokhuyet/react-native-messy",
-  "version": "0.2.5",
+  "version": "0.2.6",
   "description": "chat ui",
   "main": "lib/commonjs/index",
   "module": "lib/module/index",

diff --git a/src/MessyFooter/MessyFooter.default.tsx b/src/MessyFooter/MessyFooter.default.tsx
@@ -453,8 +453,9 @@ export function MessyFooterDefault(props: TMessyFooterProps) {
       Math.abs(height.value),
       Math.abs(leftExtraHeight)
     );
+
     return {
-      height: maxHeight,
+      height: maxHeight - Sizes.padding,
     };
   }, [Sizes.device_height]);
 
@@ -498,7 +499,9 @@ export function MessyFooterDefault(props: TMessyFooterProps) {
   }
 
   return (
-    <View style={{ marginTop: Sizes.padding }}>
+    <View
+      style={{ marginTop: Sizes.padding, backgroundColor: Colors.background }}
+    >
       <View>
         <View
           style={{

diff --git a/src/MessyMessage/MessyMessage.tsx b/src/MessyMessage/MessyMessage.tsx
@@ -1,5 +1,5 @@
 import React from 'react';
-import { View } from 'react-native';
+import { Pressable } from 'react-native';
 
 import { TMessyMessageProps } from '../types';
 
@@ -11,9 +11,9 @@ export function MessyMessage({ renderMessage, ...rest }: TMessyMessageProps) {
     return renderMessage(rest);
   }
   return (
-    <View>
+    <Pressable onPress={rest?.listProps?.onPress}>
       <MessyMessageDateTime {...rest} />
       <MessyMessageContent {...rest} />
-    </View>
+    </Pressable>
   );
 }
diff --git a/src/types.d.ts b/src/types.d.ts
@@ -12,7 +12,9 @@ import type { TColor } from './modules';
 type TListProps = Omit<
   FlatListProps<any>,
   'data' | 'renderItem' | 'keyExtractor'
->;
+> & {
+  onPress?: () => void | Promise<void>;
+};
 type TMessageProps = {
   hideOwnerAvatar: boolean;
   hidePartnerAvatar: boolean;