feat(lib): add additional options for TextInput and TextArea (#121)

Author: piotr-suwala

packages/common/src/message-input/message-input.tsx

@@ -42,10 +42,12 @@ export interface CommonMessageInputProps {
  * Allows users to compose messages using text and emojis
  * and automatically publish them on PubNub channels upon sending.
  */
-export const useMessageInputCore = (props: CommonMessageInputProps) => {
+export const useMessageInputCore = <T extends CommonMessageInputProps>(props: T) => {
   const pubnub = usePubNub();
 
-  const [text, setText] = useState(props.draftMessage || "");
+  const { draftMessage, senderInfo, onSend, onBeforeSend, typingIndicator, ...inputProps } = props;
+
+  const [text, setText] = useState(draftMessage || "");
   const [file, setFile] = useState<File | UriFileInput>(null);
   const [typingIndicatorSent, setTypingIndicatorSent] = useState(false);
   const [loader, setLoader] = useState(false);
@@ -75,21 +77,21 @@ export const useMessageInputCore = (props: CommonMessageInputProps) => {
         id: uuid.v4(),
         text: file ? "" : text,
         type: file ? "" : "default",
-        ...(props.senderInfo && { sender: users.find((u) => u.id === pubnub.getUUID()) }),
+        ...(senderInfo && { sender: users.find((u) => u.id === pubnub.getUUID()) }),
         createdAt: new Date().toISOString(),
       } as MessagePayload;
       setLoader(true);
 
       if (file) {
         await pubnub.sendFile({ channel, file, message });
-        props.onSend && props.onSend(file);
+        onSend && onSend(file);
       } else if (text) {
-        if (props.onBeforeSend) message = props.onBeforeSend(message) || message;
+        if (onBeforeSend) message = onBeforeSend(message) || message;
         await pubnub.publish({ channel, message });
-        props.onSend && props.onSend(message);
+        onSend && onSend(message);
       }
 
-      if (props.typingIndicator) stopTypingIndicator();
+      if (typingIndicator) stopTypingIndicator();
       clearInput();
     } catch (e) {
       onError(e);
@@ -153,5 +155,6 @@ export const useMessageInputCore = (props: CommonMessageInputProps) => {
     theme,
     startTypingIndicator,
     stopTypingIndicator,
+    ...inputProps,
   };
 };

packages/react-native/src/message-input/message-input.tsx

@@ -1,5 +1,5 @@
 import React, { FC, useState } from "react";
-import { View, Image, TouchableOpacity, TextInput, Animated } from "react-native";
+import { View, Image, TouchableOpacity, TextInput, Animated, TextInputProps } from "react-native";
 import { CommonMessageInputProps, useMessageInputCore } from "@pubnub/common-chat-components";
 import { getDocumentAsync } from "expo-document-picker";
 import { useStyle, useRotation } from "../helpers";
@@ -12,6 +12,8 @@ import ImageIcon from "../icons/image.png";
 import XCircleIcon from "../icons/x-circle.png";
 import * as ImagePicker from "expo-image-picker";
 import { FileModal } from "./file-modal";
+import { NativeSyntheticEvent } from "react-native/Libraries/Types/CoreEventTypes";
+import { TextInputKeyPressEventData } from "react-native/Libraries/Components/TextInput/TextInput";
 
 export type MessageInputProps = CommonMessageInputProps & {
   /** Options to provide custom StyleSheet for the component. It will be merged with the default styles. */
@@ -23,7 +25,19 @@ export type MessageInputProps = CommonMessageInputProps & {
     setModalVisible: React.Dispatch<React.SetStateAction<boolean>>;
   }) => JSX.Element;
   onChange?: (newText: string) => void;
-};
+  sendMessageOnSubmitEditing?: boolean;
+} & Omit<
+    TextInputProps,
+    | "testID"
+    | "autoComplete"
+    | "multiline"
+    | "onChangeText"
+    | "placeholder"
+    | "style"
+    | "placeholderTextColor"
+    | "editable"
+    | "value"
+  >;
 
 /**
  * Allows users to compose messages using text and emojis
@@ -42,6 +56,7 @@ export const MessageInput: FC<MessageInputProps> = (props: MessageInputProps) =>
     file,
     setText,
     onError,
+    ...otherTextInputProps
   } = useMessageInputCore(props);
   const style = useStyle<MessageInputStyle>({
     theme,
@@ -120,6 +135,14 @@ export const MessageInput: FC<MessageInputProps> = (props: MessageInputProps) =>
     }
   };
 
+  const handleKeyPress = (e: NativeSyntheticEvent<TextInputKeyPressEventData>) => {
+    props.onKeyPress && props.onKeyPress(e);
+
+    if (e.nativeEvent.key == "Enter" && props.sendMessageOnSubmitEditing) {
+      sendMessage();
+    }
+  };
+
   /*
   /* Renderers
   */
@@ -202,6 +225,7 @@ export const MessageInput: FC<MessageInputProps> = (props: MessageInputProps) =>
       {renderFileModal()}
       {!props.actionsAfterInput && renderActions()}
       <TextInput
+        {...otherTextInputProps}
         testID="message-input"
         autoComplete="off"
         multiline={true}
@@ -211,6 +235,7 @@ export const MessageInput: FC<MessageInputProps> = (props: MessageInputProps) =>
         placeholderTextColor={style.messageInputPlaceholder.color}
         editable={!props.disabled && file == null}
         value={text}
+        onKeyPress={handleKeyPress}
       />
       {props.actionsAfterInput && renderActions()}
       {!props.disabled && (

packages/react/src/message-input/message-input.tsx

@@ -7,6 +7,8 @@ import React, {
   useEffect,
   useRef,
   useState,
+  DetailedHTMLProps,
+  TextareaHTMLAttributes,
 } from "react";
 import { CommonMessageInputProps, useMessageInputCore } from "@pubnub/common-chat-components";
 import { EmojiPickerElementProps } from "../types";
@@ -28,7 +30,18 @@ export type MessageInputProps = CommonMessageInputProps & {
   onChange?: (event: ChangeEvent<HTMLTextAreaElement>) => void;
   /** Callback to handle an event when the key is pressed in textarea. */
   onKeyPress?: (event: KeyboardEvent<HTMLTextAreaElement>) => void;
-};
+} & Omit<
+    DetailedHTMLProps<TextareaHTMLAttributes<HTMLTextAreaElement>, HTMLTextAreaElement>,
+    | "className"
+    | "data-testid"
+    | "disabled"
+    | "onChange"
+    | "onKeyPress"
+    | "placeholder"
+    | "ref"
+    | "rows"
+    | "value"
+  >;
 
 /**
  * Allows users to compose messages using text and emojis
@@ -48,6 +61,10 @@ export const MessageInput: FC<MessageInputProps> = (props: MessageInputProps) =>
     theme,
     startTypingIndicator,
     stopTypingIndicator,
+    fileUpload,
+    sendButton,
+    hideSendButton,
+    ...otherTextAreaProps
   } = useMessageInputCore(props);
 
   const [emojiPickerShown, setEmojiPickerShown] = useState(false);
@@ -158,10 +175,10 @@ export const MessageInput: FC<MessageInputProps> = (props: MessageInputProps) =>
         ) : (
           <>
             <button aria-label={addTitle} title={addTitle} onClick={() => fileRef.current.click()}>
-              {props.fileUpload === "image" ? <ImageIcon /> : <FileIcon />}
+              {fileUpload === "image" ? <ImageIcon /> : <FileIcon />}
             </button>
             <input
-              accept={props.fileUpload === "image" ? "image/*" : "*"}
+              accept={fileUpload === "image" ? "image/*" : "*"}
               className="pn-msg-input__fileInput"
               data-testid="file-upload"
               id="file-upload"
@@ -201,7 +218,7 @@ export const MessageInput: FC<MessageInputProps> = (props: MessageInputProps) =>
       <div className="pn-msg-input__emoji-toggle">
         {!props.disabled && props.emojiPicker && renderEmojiPicker()}
       </div>
-      {!props.disabled && props.fileUpload && renderFileUpload()}
+      {!props.disabled && fileUpload && renderFileUpload()}
       {props.extraActionsRenderer && props.extraActionsRenderer()}
     </div>
   );
@@ -215,6 +232,7 @@ export const MessageInput: FC<MessageInputProps> = (props: MessageInputProps) =>
       <div className="pn-msg-input__wrapper">
         {!props.actionsAfterInput && renderActions()}
         <textarea
+          {...otherTextAreaProps}
           className="pn-msg-input__textarea"
           data-testid="message-input"
           disabled={props.disabled || !!file}
@@ -226,15 +244,15 @@ export const MessageInput: FC<MessageInputProps> = (props: MessageInputProps) =>
           value={text}
         />
         {props.actionsAfterInput && renderActions()}
-        {!props.hideSendButton && !props.disabled && (
+        {!hideSendButton && !props.disabled && (
           <button
             className={`pn-msg-input__send ${isValidInputText() && "pn-msg-input__send--active"}`}
             disabled={loader || props.disabled}
             onClick={handleSendClick}
             aria-label="Send"
             title="Send"
           >
-            {loader ? <SpinnerIcon /> : props.sendButton}
+            {loader ? <SpinnerIcon /> : sendButton}
           </button>
         )}
       </div>