Merge pull request #4 from NDKien349/main

feat: render other message
vokhuyetOz · May 17, 2024 · 1be9adc · 1be9adc
2 parents c178b85 + cacb08f
commit 1be9adc
Show file tree

Hide file tree

Showing 4 changed files with 73 additions and 48 deletions.
diff --git a/README.md b/README.md
@@ -1,6 +1,7 @@
 # react-native-messy
 
 Chat ui for React Native
+
 <p>
     <img src="preview/demo_1.png" width="200px">
   <img src="preview/demo_2.png" width="200px">
@@ -74,10 +75,10 @@ import { Messy } from '@vokhuyet/react-native-messy';
 ### TMessyMessageLocation
 
 ```typescript
-  name: string;
-  image: ImageProps['source'];
-  latitude: string;
-  longitude: string;
+name: string;
+image: ImageProps['source'];
+latitude: string;
+longitude: string;
 ```
 
 ### TMessyMessage
@@ -102,31 +103,31 @@ import { Messy } from '@vokhuyet/react-native-messy';
 ### TColor
 
 ```ts
+background: string;
+primary: string;
+accent: string;
+placeholder: string;
+shadow: string;
+success: string;
+message_left: {
   background: string;
-  primary: string;
-  accent: string;
-  placeholder: string;
-  shadow: string;
-  success: string;
-  message_left: {
-    background: string;
-    text: string;
-    link: string;
-    email: string;
-    phone: string;
-    audio: string;
-  };
-  message_right: {
-    background: string;
-    text: string;
-    link: string;
-    email: string;
-    phone: string;
-    audio: string;
-  };
-  input: {
-    text: string; //text color in TextInput
-  };
+  text: string;
+  link: string;
+  email: string;
+  phone: string;
+  audio: string;
+}
+message_right: {
+  background: string;
+  text: string;
+  link: string;
+  email: string;
+  phone: string;
+  audio: string;
+}
+input: {
+  text: string; //text color in TextInput
+}
 ```
 
 ### TUser
@@ -173,26 +174,27 @@ import { Messy } from '@vokhuyet/react-native-messy';
 
 ## Props
 
-- ```loading```(boolean): loading status
-- **```messages```**([TMessyMessage[]](#tmessymessage)): list of messages
-- ```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;
-- ```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;
-- ```renderLoading```(FC<{}>): component when loading list message;
-- ```renderMessageSystem```(FC<{ data?: TMessyMessage }>): custom system message;
-- ```renderMessage```((data: TMessyMessageProps) => JSX.Element): custom whole message item view;
-- ```renderAvatar```FC<{ user?: TUser }>: custom ;
-- ```renderMessageText```((data: TMessyMessageProps) => JSX.Element): custom text message;
-- ```renderMessageAudio```(data: TMessyMessageProps) => JSX.Element;
-- ```renderMessageImage```(data: TMessyMessageProps) => JSX.Element;
-- ```renderMessageVideo```(data: TMessyMessageProps) => JSX.Element;
-- ```renderMessageDateTime```((data: TMessyMessage) => JSX.Element): custom datetime value in message item
-- ```renderMessageLocation```: (data: TMessyMessageProps) => JSX.Element;
-- ```BaseModule```([TBaseModule](#tbasemodule));
+- `loading`(boolean): loading status
+- **`messages`**([TMessyMessage[]](#tmessymessage)): list of messages
+- `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;
+- `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;
+- `renderLoading`(FC<{}>): component when loading list message;
+- `renderMessageSystem`(FC<{ data?: TMessyMessage }>): custom system message;
+- `renderMessage`((data: TMessyMessageProps) => JSX.Element): custom whole message item view;
+- `renderAvatar`FC<{ user?: TUser }>: custom ;
+- `renderMessageText`((data: TMessyMessageProps) => JSX.Element): custom text message;
+- `renderMessageAudio`(data: TMessyMessageProps) => JSX.Element;
+- `renderMessageImage`(data: TMessyMessageProps) => JSX.Element;
+- `renderMessageVideo`(data: TMessyMessageProps) => JSX.Element;
+- `renderMessageDateTime`((data: TMessyMessage) => JSX.Element): custom datetime value in message item
+- `renderMessageLocation`: (data: TMessyMessageProps) => JSX.Element;
+- `renderMessageOther`(data: TMessyMessageProps) => JSX.Element: Customize other message types that the library does not yet support
+- `BaseModule`([TBaseModule](#tbasemodule));
 
 ## Contributing
 

diff --git a/src/MessyMessage/MessyMessageContent.tsx b/src/MessyMessage/MessyMessageContent.tsx
@@ -13,6 +13,7 @@ import { MessyMessageContentStatus } from './MessyMessageContentStatus';
 import { MessyMessageContentLocation } from './MessyMessageContentLocation';
 import { MessyMessageContentVideo } from './MessyMessageContentVideo';
 import { MText } from '../elements/MText/MText';
+import { MessyMessageContentOther } from './MessyMessageContentOther';
 
 export function MessyMessageContent(props: TMessyMessageProps) {
   const Sizes = useSizes();
@@ -95,6 +96,7 @@ export function MessyMessageContent(props: TMessyMessageProps) {
           <MessyMessageContentImage {...props} />
           <MessyMessageContentLocation {...props} />
           <MessyMessageContentVideo {...props} />
+          <MessyMessageContentOther {...props} />
         </View>
         <View
           style={{

diff --git a/src/MessyMessage/MessyMessageContentOther.tsx b/src/MessyMessage/MessyMessageContentOther.tsx
@@ -0,0 +1,20 @@
+import type { TMessyMessageProps } from '../types';
+
+export function MessyMessageContentOther(props: TMessyMessageProps) {
+  const { renderMessageOther, value } = props;
+  if (
+    value?.text ||
+    value?.audio ||
+    value?.image ||
+    value?.video ||
+    value?.location
+  ) {
+    return null;
+  }
+
+  if (typeof renderMessageOther === 'function') {
+    return renderMessageOther(props);
+  }
+
+  return null;
+}
diff --git a/src/types.d.ts b/src/types.d.ts
@@ -77,6 +77,7 @@ export type TMessyProps = Readonly<{
   renderMessageVideo?: (data: TMessyMessageProps) => JSX.Element;
   renderMessageDateTime?: (data: TMessyMessage) => JSX.Element;
   renderMessageLocation?: (data: TMessyMessageProps) => JSX.Element;
+  renderMessageOther?: (data: TMessyMessageProps) => JSX.Element;
   BaseModule?: TBaseModule;
 }>;