feat(footer): 0.2.0 support custom footer

vokhuyetOz · May 13, 2024 · 0d0cca0 · 0d0cca0
1 parent 5608b90
commit 0d0cca0
Show file tree

Hide file tree

Showing 4 changed files with 28 additions and 11 deletions.
diff --git a/README.md b/README.md
@@ -59,6 +59,9 @@ import { Messy } from '@vokhuyet/react-native-messy';
         }}
         user={{id: account?.user?.id}}
         footerProps={{
+          hideEmoji: false;
+          hideFooterAction: false;
+          Send: <Image source={require('NewSendIcon.png')} />
           onSend,
           ExtraLeft: <ChatListExtraLeft />,
           ExtraActionLeft: <ChatListExtraActionLeft />,
@@ -137,6 +140,9 @@ import { Messy } from '@vokhuyet/react-native-messy';
 ### TMessyFooterProps
 
 ```ts
+  hideEmoji?: false;
+  hideFooterAction?: false;
+  Send?: React.ReactNode;
   onSend?: (message?: TMessyMessage) => Promise<void> | void;
   inputProps?: TextInputProps;
   ExtraLeft?: React.ReactNode;

diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@vokhuyet/react-native-messy",
-  "version": "0.1.9",
+  "version": "0.2.0",
   "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
@@ -8,6 +8,7 @@ import React, {
   type RefObject,
   useCallback,
   cloneElement,
+  isValidElement,
 } from 'react';
 import {
   Image,
@@ -402,7 +403,18 @@ function MessyFooterTextInput({
 function MessyFooterSend({ onPress }: TMessyFooterSend) {
   const Sizes = useSizes();
   const { footerProps } = useMessyPropsContext();
-
+  const renderSend = () => {
+    if (isValidElement(footerProps?.Send)) {
+      return footerProps.Send;
+    }
+    return (
+      <Image
+        source={require('../utils/images/send.png')}
+        style={{ width: Sizes.button_image, height: Sizes.button_image }}
+        resizeMode={'contain'}
+      />
+    );
+  };
   return (
     <Pressable
       disabled={footerProps?.disabled}
@@ -411,11 +423,7 @@ function MessyFooterSend({ onPress }: TMessyFooterSend) {
         paddingLeft: Sizes.padding,
       }}
     >
-      <Image
-        source={require('../utils/images/send.png')}
-        style={{ width: Sizes.button_image, height: Sizes.button_image }}
-        resizeMode={'contain'}
-      />
+      {renderSend()}
     </Pressable>
   );
 }
@@ -485,7 +493,7 @@ export function MessyFooterDefault(props: TMessyFooterProps) {
   let ExtraLeftWithProps = props.ExtraLeft;
   if (props.ExtraLeft) {
     ExtraLeftWithProps = cloneElement(props.ExtraLeft as React.ReactElement, {
-      animatedPosition: emojiShared,
+      animatedPosition: leftExtraShared,
     });
   }
 
@@ -519,11 +527,11 @@ export function MessyFooterDefault(props: TMessyFooterProps) {
               textInputRef={textInputRef}
               onChangeText={onChangeText}
             />
-            <MessyFooterEmoji emojiShared={emojiShared} />
+            {!props.hideEmoji && <MessyFooterEmoji emojiShared={emojiShared} />}
           </View>
           <MessyFooterSend onPress={onPressSendText} />
         </View>
-        <MessyFooterAction />
+        {!props.hideFooterAction && <MessyFooterAction />}
       </View>
       {/* fakeview keyboard */}
       <Animated.View style={fakeViewKeyboard} />

diff --git a/src/types.d.ts b/src/types.d.ts
@@ -7,7 +7,7 @@ import type {
 } from 'react-native';
 import type { ParseShape } from 'react-native-parsed-text';
 import type { Asset } from 'react-native-image-picker';
-import { TColor } from './modules';
+import type { TColor } from './modules';
 
 type TListProps = Omit<
   FlatListProps<any>,
@@ -122,8 +122,11 @@ export type TMessyMessage = {
 
 export type TMessyFooterProps = Readonly<{
   disabled?: boolean;
+  hideEmoji?: boolean;
+  hideFooterAction?: boolean;
   onSend?: (message?: TMessyMessage) => Promise<void> | void;
   inputProps?: TextInputProps;
+  Send?: React.ReactNode;
   ExtraLeft?: React.ReactNode;
   ExtraActionLeft?: React.ReactNode;
   renderFooter?: FC<TMessyFooterProps>;