fix/linting

RocketChat · Feb 18, 2024 · 0e9bb43 · 0e9bb43
1 parent f866be0
commit 0e9bb43
Show file tree

Hide file tree

Showing 4 changed files with 53 additions and 27 deletions.
diff --git a/packages/react/src/components/ChatInput/ChatInput.js b/packages/react/src/components/ChatInput/ChatInput.js
@@ -60,7 +60,8 @@ const ChatInput = ({ scrollToBottom }) => {
 
         RCInstance.getChannelMembers(isChannelPrivate)
           .then((channelMembers) =>
-            setMembersHandler(channelMembers.members || []))
+            setMembersHandler(channelMembers.members || [])
+          )
           .catch(console.error);
       }
     });
@@ -280,13 +281,9 @@ const ChatInput = ({ scrollToBottom }) => {
     let insertionText;
     if (selectedItem === 'all') {
       insertionText = `@all `;
-    }
-
-    else if (selectedItem === 'here') {
+    } else if (selectedItem === 'here') {
       insertionText = `@here `;
-    }
-
-    else {
+    } else {
       insertionText = `${messageRef.current.value.substring(
         0,
         messageRef.current.value.lastIndexOf('@')
@@ -300,7 +297,6 @@ const ChatInput = ({ scrollToBottom }) => {
     messageRef.current.focus();
   };
 
-
   const showCommands = useCallback(
     async (e) => {
       const cursor = e.target.selectionStart;
@@ -490,8 +486,8 @@ const ChatInput = ({ scrollToBottom }) => {
               isUserAuthenticated && canSendMsg
                 ? 'Message'
                 : isUserAuthenticated
-                  ? 'This room is read only'
-                  : 'Sign in to chat'
+                ? 'This room is read only'
+                : 'Sign in to chat'
             }
             className={styles.textInput}
             onChange={onTextChange}

diff --git a/packages/react/src/components/Markup/elements/Mention.js b/packages/react/src/components/Markup/elements/Mention.js
@@ -11,24 +11,22 @@ const Mention = ({ contents }) => {
     background-color: ${contents.value === 'all' || contents.value === 'here'
       ? '#f38c39'
       : contents.value === username
-        ? '#ec0d2a'
-        : '#e4e7ea'
-    };
+      ? '#ec0d2a'
+      : '#e4e7ea'};
     color: ${contents.value === 'all' || contents.value === 'here'
-      ? '#ffffff' :
-      contents.value === username
-        ? '#ffffff'
-        : '#2f343d'
-    };
+      ? '#ffffff'
+      : contents.value === username
+      ? '#ffffff'
+      : '#2f343d'};
     font-weight: bold;
     cursor: pointer;
     padding: 1.5px;
     border-radius: 3px;
 
     &:hover {
       text-decoration: ${contents.value === 'all' || contents.value === 'here'
-      ? 'none'
-      : 'underline'}; 
+        ? 'none'
+        : 'underline'};
     }
   `;
 

diff --git a/packages/react/src/components/Mentions/MembersList.js b/packages/react/src/components/Mentions/MembersList.js
@@ -57,30 +57,51 @@ function MembersList({ mentionIndex, filteredMembers = [], onMemberClick }) {
           mentionIndex < filteredMembers.length
             ? filteredMembers[mentionIndex]
             : mentionIndex === filteredMembers.length
-              ? 'all'
-              : 'here';
+            ? 'all'
+            : 'here';
         handleMemberClick(selectedItem);
       }
     };
 
+    const handleKeyDown = (event) => {
+      if (event.key === 'Enter') {
+        event.preventDefault();
+      }
+    };
+
     document.addEventListener('keydown', handleKeyPress);
+    document.addEventListener('keydown', handleKeyDown);
 
     return () => {
       document.removeEventListener('keydown', handleKeyPress);
+      document.removeEventListener('keydown', handleKeyDown);
     };
   }, [mentionIndex, filteredMembers, handleMemberClick]);
 
   return (
-    <Box css={listStyle}>
+    <Box
+      css={listStyle}
+      onKeyDown={(e) => {
+        if (e.key === 'Enter') {
+          e.preventDefault();
+        }
+      }}
+    >
       <ul style={{ listStyle: 'none' }}>
         {filteredMembers.map((member, index) => (
           <li
             key={member._id}
             css={listItemStyle}
+            onClick={() => handleMemberClick(member)}
+            onKeyDown={(e) => {
+              if (e.key === 'Enter') {
+                handleMemberClick(member);
+              }
+            }}
+            tabIndex={0}
             style={{
               backgroundColor: index === mentionIndex && '#dddddd',
             }}
-            onClick={() => handleMemberClick(member)}
           >
             <span style={{ justifyContent: 'space-evenly' }}>
               <span css={listTextStyle}>{member.name}</span>
@@ -92,22 +113,34 @@ function MembersList({ mentionIndex, filteredMembers = [], onMemberClick }) {
         <li
           key="all"
           css={listItemStyle}
+          onClick={() => handleMemberClick('all')}
+          onKeyDown={(e) => {
+            if (e.key === 'Enter') {
+              handleMemberClick('all');
+            }
+          }}
+          tabIndex={0}
           style={{
             backgroundColor:
               mentionIndex === filteredMembers.length && '#dddddd',
           }}
-          onClick={() => handleMemberClick('all')}
         >
           <span css={listTextStyle}>all</span>
         </li>
         <li
           key="here"
           css={listItemStyle}
+          onClick={() => handleMemberClick('here')}
+          onKeyDown={(e) => {
+            if (e.key === 'Enter') {
+              handleMemberClick('here');
+            }
+          }}
+          tabIndex={0}
           style={{
             backgroundColor:
               mentionIndex === filteredMembers.length + 1 && '#dddddd',
           }}
-          onClick={() => handleMemberClick('here')}
         >
           <span css={listTextStyle}>here</span>
         </li>

diff --git a/packages/react/src/lib/searchToMentionUser.js b/packages/react/src/lib/searchToMentionUser.js
@@ -46,7 +46,6 @@ export const searchToMentionUser = (
           member.username.toLowerCase().includes(query)
       );
 
-
       if (isValidUsername) {
         setshowMembersList(true);
         setmentionIndex(0);