feat(lib): return change event and expose onKeyPress callback (#115)

* feat(lib): return change event and expose onKeyPress callback

* fix(lib): fix a test

* PubNub SDK v0.24.0 release.

---------

Co-authored-by: PubNub Release Bot <[email protected]>

Author: piotr-suwala

.pubnub.yml

@@ -1,12 +1,17 @@
 ---
 name: pubnub-react-chat-components
-version: v0.23.0
+version: v0.24.0
 scm: github.com/pubnub/react-chat-components
 schema: 1
 files:
   - lib/dist/index.js
   - lib/dist/index.es.js
 changelog:
+  - date: 2023-04-11
+    version: v0.24.0
+    changes:
+      - type: feature
+        text: "Return change event and expose onKeyPress callback."
   - date: 2023-04-04
     version: v0.23.0
     changes:

packages/common/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@pubnub/common-chat-components",
-  "version": "0.23.0",
+  "version": "0.24.0",
   "main": "src/index.ts",
   "license": "MIT",
   "scripts": {

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

@@ -1,4 +1,4 @@
-import { useState, useEffect } from "react";
+import { useState, useEffect, ChangeEvent } from "react";
 import { useAtom } from "jotai";
 import { usePubNub } from "pubnub-react";
 import uuid from "react-native-uuid";
@@ -28,8 +28,6 @@ export interface CommonMessageInputProps {
   disabled?: boolean;
   /** Custom UI component to override default display for the Send button. */
   sendButton?: JSX.Element | string;
-  /** Callback to handle an event when the text value changes. */
-  onChange?: (value: string) => void;
   /** Callback to modify message content before sending it. This only works for text messages, not files. */
   onBeforeSend?: (value: MessagePayload) => MessagePayload;
   /** Callback for extra actions after sending a message. */
@@ -125,22 +123,6 @@ export const useMessageInputCore = (props: CommonMessageInputProps) => {
     setText("");
   };
 
-  /*
-  /* Event handlers
-  */
-
-  const handleInputChange = (newText: string) => {
-    try {
-      if (props.typingIndicator) {
-        newText.length ? startTypingIndicator() : stopTypingIndicator();
-      }
-      props.onChange && props.onChange(newText);
-      setText(newText);
-    } catch (e) {
-      onError(e);
-    }
-  };
-
   /*
   /* Lifecycle
   */
@@ -160,13 +142,14 @@ export const useMessageInputCore = (props: CommonMessageInputProps) => {
     clearInput,
     file,
     setFile,
-    handleInputChange,
     isValidInputText,
     loader,
     onError,
     sendMessage,
     setText,
     text,
     theme,
+    startTypingIndicator,
+    stopTypingIndicator,
   };
 };

packages/react-native/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@pubnub/react-native-chat-components",
-  "version": "0.23.0",
+  "version": "0.24.0",
   "description": "PubNub Chat Components is a development kit of React Native components that aims to help you to easily build Chat applications using PubNub infrastructure. It removes the complexicity of picking an adequate Chat engine, learning its APIs and dealing with its low-level internals. As the same time it allows you to create apps of various use cases, with different functionalities and customizable looks.",
   "author": "PubNub <[email protected]>",
   "main": "dist/commonjs/index",

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

@@ -22,6 +22,7 @@ export type MessageInputProps = CommonMessageInputProps & {
     modalVisible: boolean;
     setModalVisible: React.Dispatch<React.SetStateAction<boolean>>;
   }) => JSX.Element;
+  onChange?: (newText: string) => void;
 };
 
 /**
@@ -30,7 +31,8 @@ export type MessageInputProps = CommonMessageInputProps & {
  */
 export const MessageInput: FC<MessageInputProps> = (props: MessageInputProps) => {
   const {
-    handleInputChange,
+    startTypingIndicator,
+    stopTypingIndicator,
     isValidInputText,
     loader,
     sendMessage,
@@ -106,6 +108,18 @@ export const MessageInput: FC<MessageInputProps> = (props: MessageInputProps) =>
     setText("");
   };
 
+  const handleInputChange = (newText: string) => {
+    try {
+      if (props.typingIndicator) {
+        newText.length ? startTypingIndicator() : stopTypingIndicator();
+      }
+      props.onChange && props.onChange(newText);
+      setText(newText);
+    } catch (e) {
+      onError(e);
+    }
+  };
+
   /*
   /* Renderers
   */

packages/react/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@pubnub/react-chat-components",
-  "version": "0.23.0",
+  "version": "0.24.0",
   "description": "PubNub Chat Components is a development kit of React components that aims to help you to easily build Chat applications using PubNub infrastructure. It removes the complexicity of picking an adequate Chat engine, learning its APIs and dealing with its low-level internals. As the same time it allows you to create apps of various use cases, with different functionalities and customizable looks.",
   "author": "PubNub <[email protected]>",
   "main": "dist/index.js",

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

@@ -24,6 +24,10 @@ export type MessageInputProps = CommonMessageInputProps & {
   hideSendButton?: boolean;
   /** Option to pass in an emoji picker if you want it to be rendered in the input. For more details, refer to the Emoji Pickers section in the docs. */
   emojiPicker?: ReactElement<EmojiPickerElementProps>;
+  /** Callback to handle an event when the text value changes. */
+  onChange?: (event: ChangeEvent<HTMLTextAreaElement>) => void;
+  /** Callback to handle an event when the key is pressed in textarea. */
+  onKeyPress?: (event: KeyboardEvent<HTMLTextAreaElement>) => void;
 };
 
 /**
@@ -35,14 +39,15 @@ export const MessageInput: FC<MessageInputProps> = (props: MessageInputProps) =>
     clearInput,
     file,
     setFile,
-    handleInputChange,
     isValidInputText,
     loader,
     onError,
     sendMessage,
     setText,
     text,
     theme,
+    startTypingIndicator,
+    stopTypingIndicator,
   } = useMessageInputCore(props);
 
   const [emojiPickerShown, setEmojiPickerShown] = useState(false);
@@ -73,13 +78,27 @@ export const MessageInput: FC<MessageInputProps> = (props: MessageInputProps) =>
   /* Event handlers
   */
 
+  const handleInputChange = (event: ChangeEvent<HTMLTextAreaElement>) => {
+    try {
+      const { value: newText } = event.target;
+      if (props.typingIndicator) {
+        newText.length ? startTypingIndicator() : stopTypingIndicator();
+      }
+      props.onChange && props.onChange(event);
+      setText(newText);
+    } catch (e) {
+      onError(e);
+    }
+  };
+
   const handleKeyPress = (event: KeyboardEvent<HTMLTextAreaElement>) => {
     try {
       if (event.key === "Enter" && !event.shiftKey) {
         event.preventDefault();
         sendMessage();
         if (fileRef.current) fileRef.current.value = "";
       }
+      props.onKeyPress(event);
     } catch (e) {
       onError(e);
     }
@@ -188,10 +207,8 @@ export const MessageInput: FC<MessageInputProps> = (props: MessageInputProps) =>
           className="pn-msg-input__textarea"
           data-testid="message-input"
           disabled={props.disabled || !!file}
-          onChange={(e) => {
-            handleInputChange(e.target.value);
-          }}
-          onKeyPress={(e) => handleKeyPress(e)}
+          onChange={handleInputChange}
+          onKeyPress={handleKeyPress}
           placeholder={props.placeholder}
           ref={inputRef}
           rows={1}

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

@@ -30,7 +30,13 @@ describe("Message Input", () => {
 
     await userEvent.type(screen.getByPlaceholderText("Send message"), "Changed Value");
 
-    expect(handleChange).toHaveBeenCalledWith("Changed Value");
+    expect(handleChange).toHaveBeenCalledWith(
+      expect.objectContaining({
+        target: expect.objectContaining({
+          value: "Changed Value",
+        }),
+      })
+    );
   });
 
   test("renders custom placeholders", () => {