feat(lib): actionsAfterInput option in MessageInput (#120)

* feat(lib): actionsAfterInput option in MessageInput

* test: playwright configuration fix

* test: playwright setup debug

* test: playwright add to dev dependencies

* test: yarn update

* test: playwright cache strategy change

* test: cache cleaned for playwright

* test: playwright version update

* test: dep install

* test: cache debugging

* test: cache debugging change key file

* test: cache debugging continue

* test: cache debugging syntax fix

* test: cache debugging syntax fix

* test: cache debugging fix

* test: cache synatax fix

* test: npm install add

* test: dependencies update add

* test: dependencies upgrade

* Update run-tests.yml

* PubNub SDK v0.28.0 release.

---------

Co-authored-by: anton-pub <[email protected]>
Co-authored-by: Serhii Mamontov <[email protected]>
Co-authored-by: PubNub Release Bot <[email protected]>

Author: 4 people

.github/workflows/run-tests.yml

@@ -54,11 +54,14 @@ jobs:
         id: playwright-browsers-cache
         uses: actions/cache@v3
         with:
-          key: ${{ runner.os }}-playwright-${{ hashFiles('react/package-lock.json') }}
+          key: ${{ runner.os }}-playwright-${{ hashFiles('react/yarn.lock') }}
           restore-keys: ${{ runner.os }}-playwright-
           path: ~/.cache/ms-playwright
+      - name: Clear Playwright cache
+        run: npx playwright install-deps
+      - name: Install project dependencies
+        run: npm install
       - name: Install Playwright browsers
-        if: steps.playwright-browsers-cache.outputs.cache-hit != 'true'
         run: npx playwright install
       - name: Checkout repository
         uses: actions/checkout@v3

.pubnub.yml

@@ -1,12 +1,17 @@
 ---
 name: pubnub-react-chat-components
-version: v0.27.0
+version: v0.28.0
 scm: github.com/pubnub/react-chat-components
 schema: 1
 files:
   - lib/dist/index.js
   - lib/dist/index.es.js
 changelog:
+  - date: 2023-06-27
+    version: v0.28.0
+    changes:
+      - type: feature
+        text: "MessageInput - actionsAfterInput option to reorder elements."
   - date: 2023-04-19
     version: v0.27.0
     changes:

package.json

@@ -45,6 +45,7 @@
   "devDependencies": {
     "@commitlint/cli": "17.1.2",
     "@commitlint/config-conventional": "17.1.0",
+    "@playwright/test": "^1.35.1",
     "@typescript-eslint/eslint-plugin": "5.37.0",
     "@typescript-eslint/parser": "5.37.0",
     "concurrently": "7.4.0",

packages/common/package.json

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

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

@@ -1,4 +1,4 @@
-import { useState, useEffect, ChangeEvent } from "react";
+import { useState, useEffect } from "react";
 import { useAtom } from "jotai";
 import { usePubNub } from "pubnub-react";
 import uuid from "react-native-uuid";
@@ -28,6 +28,8 @@ export interface CommonMessageInputProps {
   disabled?: boolean;
   /** Custom UI component to override default display for the Send button. */
   sendButton?: JSX.Element | string;
+  /** Option to move action buttons (eg. file upload icon) to the right of the text input. */
+  actionsAfterInput?: boolean;
   /** 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. */

packages/react-native/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@pubnub/react-native-chat-components",
-  "version": "0.27.0",
+  "version": "0.28.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.style.ts

@@ -51,20 +51,20 @@ export default (theme: Themes): MessageInputStyle => {
   return StyleSheet.create<MessageInputStyle>({
     messageInputWrapper: {
       backgroundColor: colors.wrapperBackground,
-      paddingHorizontal: 16,
+      paddingHorizontal: 8,
       paddingVertical: 10,
       flexDirection: "row",
       alignItems: "center",
     },
     messageInputFileLabel: {
       width: 20,
       height: 20,
-      marginRight: 18,
+      marginHorizontal: 9,
     },
     messageInputRemoveFileLabel: {
       width: 20,
       height: 20,
-      marginRight: 18,
+      marginHorizontal: 9,
     },
     messageInput: {
       backgroundColor: colors.inputBackground,
@@ -74,21 +74,22 @@ export default (theme: Themes): MessageInputStyle => {
       paddingTop: 8,
       paddingBottom: 10,
       fontSize: 16,
+      marginHorizontal: 9,
       flex: 1,
     },
     messageInputPlaceholder: {
       color: colors.inputPlaceholder,
     },
     sendButton: {
-      marginLeft: 16,
+      marginHorizontal: 9,
     },
     sendButtonActive: {},
     icon: {
       height: 20,
       width: 20,
     },
     extraActions: {
-      marginRight: 16,
+      marginRight: 8,
     },
     fileUploadModalContent: {
       flex: 1,

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

@@ -141,31 +141,32 @@ export const MessageInput: FC<MessageInputProps> = (props: MessageInputProps) =>
   const renderFileUpload = () => {
     return (
       <>
-        <View>
-          <>
-            {props.fileUpload === "image" ? (
-              <TouchableOpacity
-                style={style.messageInputFileLabel}
-                onPress={pickPhoto}
-                testID="message-input-photo-icon-container"
-              >
-                <Image source={{ uri: ImageIcon }} style={style.icon} />
-              </TouchableOpacity>
-            ) : (
-              <TouchableOpacity
-                style={style.messageInputFileLabel}
-                onPress={() => setModalVisible(true)}
-                testID="message-input-file-icon-container"
-              >
-                <Image source={{ uri: FileIcon }} style={style.icon} />
-              </TouchableOpacity>
-            )}
-          </>
-        </View>
-        {file && (
+        {file ? (
           <TouchableOpacity style={style.messageInputRemoveFileLabel} onPress={handleRemoveFile}>
             <Image source={{ uri: XCircleIcon }} style={style.icon} />
           </TouchableOpacity>
+        ) : (
+          <View>
+            <>
+              {props.fileUpload === "image" ? (
+                <TouchableOpacity
+                  style={style.messageInputFileLabel}
+                  onPress={pickPhoto}
+                  testID="message-input-photo-icon-container"
+                >
+                  <Image source={{ uri: ImageIcon }} style={style.icon} />
+                </TouchableOpacity>
+              ) : (
+                <TouchableOpacity
+                  style={style.messageInputFileLabel}
+                  onPress={() => setModalVisible(true)}
+                  testID="message-input-file-icon-container"
+                >
+                  <Image source={{ uri: FileIcon }} style={style.icon} />
+                </TouchableOpacity>
+              )}
+            </>
+          </View>
         )}
       </>
     );
@@ -187,13 +188,19 @@ export const MessageInput: FC<MessageInputProps> = (props: MessageInputProps) =>
     );
   };
 
-  return (
-    <View style={style.messageInputWrapper}>
-      {renderFileModal()}
+  const renderActions = () => (
+    <>
       {!props.disabled && props.fileUpload && renderFileUpload()}
       {props.extraActionsRenderer && (
         <View style={style.extraActions}>{props.extraActionsRenderer()}</View>
       )}
+    </>
+  );
+
+  return (
+    <View style={style.messageInputWrapper}>
+      {renderFileModal()}
+      {!props.actionsAfterInput && renderActions()}
       <TextInput
         testID="message-input"
         autoComplete="off"
@@ -205,6 +212,7 @@ export const MessageInput: FC<MessageInputProps> = (props: MessageInputProps) =>
         editable={!props.disabled && file == null}
         value={text}
       />
+      {props.actionsAfterInput && renderActions()}
       {!props.disabled && (
         <View style={style.sendButton}>
           {loader ? (

packages/react/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@pubnub/react-chat-components",
-  "version": "0.27.0",
+  "version": "0.28.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/icons/file.svg

@@ -3,12 +3,16 @@
 ** ********************* */
 :root {
   --msg-input__background: var(--chat--light__background--1);
-  --msg-input__padding: 10px 18px;
-  --msg-input__emoji-picker__bottom: 14px;
-  --msg-input__emoji-picker__left: 10px;
+  --msg-input__padding: 10px 9px;
+  --msg-input__emoji-picker__bottom: 16px;
+  --msg-input__emoji-picker__left: 16px;
+  --msg-input__emoji-picker__right: 95px;
+  --msg-input__icon__background: none;
+  --msg-input__icon__border: none;
   --msg-input__icon__color: var(--chat--light__color--2);
-  --msg-input__icon__margin: 0 18px 0 0;
   --msg-input__icon__fontSize: 13px;
+  --msg-input__icon__margin: 0 9px;
+  --msg-input__icon__padding: 0;
   --msg-input__send__background: transparent;
   --msg-input__send__border: none;
   --msg-input__send__borderRadius: 5px;
@@ -17,7 +21,7 @@
   --msg-input__send__fontFamily: inherit;
   --msg-input__send__fontSize: 13px;
   --msg-input__send__fontWeight: bold;
-  --msg-input__send__margin: 0 0 0 18px;
+  --msg-input__send__margin: 0 9px;
   --msg-input__send__minWidth: 0;
   --msg-input__send__padding: 0;
   --msg-input--disabled__placeholder__color: rgba(var(--chat--light__color--2-rgb), 0.5);
@@ -37,6 +41,7 @@
   --msg-input__textarea__lineHeight: 18px;
   --msg-input__textarea__outline: none;
   --msg-input__textarea__padding: 6px 14px 8px;
+  --msg-input__textarea__margin: 0 9px;
   --msg-input__textarea__resize: none;
   --msg-input__textarea__width: 100%;
   --msg-input__textarea__overflow: hidden;
@@ -67,11 +72,12 @@
     font-size: var(--msg-input__textarea__fontSize);
     height: var(--msg-input__textarea__height);
     line-height: var(--msg-input__textarea__lineHeight);
+    margin: var(--msg-input__textarea__margin);
     outline: var(--msg-input__textarea__outline);
+    overflow: var(--msg-input__textarea__overflow);
     padding: var(--msg-input__textarea__padding);
     resize: var(--msg-input__textarea__resize);
     width: var(--msg-input__textarea__width);
-    overflow: var(--msg-input__textarea__overflow);
 
     &:focus-within {
       outline: var(--msg-input__textarea--focus__outline);
@@ -95,7 +101,6 @@
     font-weight: var(--msg-input__send__fontWeight);
     margin: var(--msg-input__send__margin);
     min-width: var(--msg-input__send__minWidth);
-    outline: none;
     padding: var(--msg-input__send__padding);
     white-space: nowrap;
 
@@ -107,18 +112,22 @@
   &__emoji-picker {
     bottom: var(--msg-input__emoji-picker__bottom);
     left: var(--msg-input__emoji-picker__left);
+    right: var(--msg-input__emoji-picker__right);
     position: absolute;
   }
 
   &__icons {
     align-items: center;
     display: flex;
 
-    & > * {
-      cursor: pointer;
+    button {
+      background: var(--msg-input__icon__background);
+      border: var(--msg-input__icon__border);
       color: var(--msg-input__icon__color);
+      cursor: pointer;
       font-size: var(--msg-input__icon__fontSize);
       margin: var(--msg-input__icon__margin);
+      padding: var(--msg-input__icon__padding);
     }
   }