Merge branch 'master' into textarea-paste-limit

Author: Dan Carbonell

src/components/AutoCompleteTextarea/List.js

@@ -104,11 +104,12 @@ const List = (props) => {
 
     if (value[0] === ':') {
       const html = `<strong>${value.replace(':', '')}</strong>`;
-      return `${t('Emoji matching')} ${html}}`;
+      return `${t('Emoji matching')} ${html}`;
     }
 
     if (value[0] === '@') {
-      return t('Searching for people');
+      const html = `<strong>${value.replace('@', '')}</strong>`;
+      return `${t('People matching')} ${html}`;
     }
 
     return null;

src/components/AutoCompleteTextarea/Textarea.js

@@ -431,6 +431,7 @@ class ReactTextareaAutocomplete extends React.Component {
       'closeOnClickOutside',
       'containerClassName',
       'containerStyle',
+      'disableMentions',
       'dropdownClassName',
       'dropdownStyle',
       'grow',
@@ -623,6 +624,7 @@ class ReactTextareaAutocomplete extends React.Component {
       className,
       containerClassName,
       containerStyle,
+      disableMentions,
       dropdownClassName,
       dropdownStyle,
       itemClassName,
@@ -632,23 +634,21 @@ class ReactTextareaAutocomplete extends React.Component {
       SuggestionList = DefaultSuggestionList,
     } = this.props;
 
+    let { maxRows } = this.props;
+
     const { component, currentTrigger, dataLoading, value } = this.state;
 
     const selectedItem = this._getItemOnSelect();
     const suggestionData = this._getSuggestions();
     const textToReplace = this._getTextToReplace();
 
-    let { maxRows } = this.props;
-    if (!this.props.grow) maxRows = 1;
-
-    return (
-      <div
-        className={`rta ${dataLoading === true ? 'rta--loading' : ''} ${
-          containerClassName || ''
-        }`}
-        style={containerStyle}
-      >
-        {(dataLoading || suggestionData) && currentTrigger && (
+    const SuggestionListContainer = () => {
+      if (
+        (dataLoading || suggestionData) &&
+        currentTrigger &&
+        !(disableMentions && currentTrigger === '@')
+      ) {
+        return (
           <div
             className={`rta__autocomplete ${dropdownClassName || ''}`}
             ref={(ref) => {
@@ -671,7 +671,21 @@ class ReactTextareaAutocomplete extends React.Component {
               />
             )}
           </div>
-        )}
+        );
+      }
+      return null;
+    };
+
+    if (!this.props.grow) maxRows = 1;
+
+    return (
+      <div
+        className={`rta ${dataLoading === true ? 'rta--loading' : ''} ${
+          containerClassName || ''
+        }`}
+        style={containerStyle}
+      >
+        <SuggestionListContainer />
         <Textarea
           {...this._cleanUpProps()}
           className={`rta__textarea ${className || ''}`}
@@ -700,6 +714,7 @@ ReactTextareaAutocomplete.propTypes = {
   closeOnClickOutside: PropTypes.bool,
   containerClassName: PropTypes.string,
   containerStyle: PropTypes.object,
+  disableMentions: PropTypes.bool,
   dropdownClassName: PropTypes.string,
   dropdownStyle: PropTypes.object,
   itemClassName: PropTypes.string,

src/components/ChatAutoComplete/ChatAutoComplete.js

@@ -25,7 +25,10 @@ const emojiReplace = (word) => {
 
 /** @type {React.FC<import("types").ChatAutoCompleteProps>} */
 const ChatAutoComplete = (props) => {
+  const { commands, onSelectItem, triggers } = props;
+
   const { channel } = useContext(ChannelContext);
+
   const members = channel?.state?.members;
   const watchers = channel?.state?.watchers;
 
@@ -66,7 +69,6 @@ const ChatAutoComplete = (props) => {
     [channel?.queryMembers],
   );
 
-  const { commands, onSelectItem, triggers } = props;
   /**
    * dataProvider accepts `onReady` function, which will executed once the data is ready.
    * Another approach would have been to simply return the data from dataProvider and let the
@@ -187,9 +189,9 @@ const ChatAutoComplete = (props) => {
         },
       },
     [
-      members,
-      getMembersAndWatchers,
       commands,
+      getMembersAndWatchers,
+      members,
       onSelectItem,
       queryMembersdebounced,
       triggers,
@@ -227,6 +229,7 @@ const ChatAutoComplete = (props) => {
       value={props.value}
       grow={props.grow}
       disabled={props.disabled}
+      disableMentions={props.disableMentions}
       SuggestionList={props.SuggestionList}
       additionalTextareaProps={props.additionalTextareaProps}
     />
@@ -242,6 +245,8 @@ ChatAutoComplete.propTypes = {
   maxRows: PropTypes.number,
   /** Make the textarea disabled */
   disabled: PropTypes.bool,
+  /** Disable mentions */
+  disableMentions: PropTypes.bool,
   /** The value of the textarea */
   value: PropTypes.string,
   /** Function to run on pasting within the textarea */

src/components/ChatAutoComplete/__tests__/ChatAutocomplete.test.js

@@ -110,13 +110,13 @@ describe('ChatAutoComplete', () => {
   it('should let you select users when you type @<username>', async () => {
     const onSelectItem = jest.fn();
     const userAutocompleteText = `@${user.name}`;
-    const { typeText, findByText } = await renderComponent({ onSelectItem });
+    const { typeText, getAllByText } = await renderComponent({ onSelectItem });
     typeText(userAutocompleteText);
-    const userText = await findByText(user.name);
+    const userText = await getAllByText(user.name);
 
-    expect(userText).toBeInTheDocument();
+    expect(userText).toHaveLength(2);
 
-    fireEvent.click(userText);
+    fireEvent.click(userText[1]);
 
     expect(onSelectItem).toHaveBeenCalledWith(
       expect.objectContaining({
@@ -165,6 +165,19 @@ describe('ChatAutoComplete', () => {
     expect(textarea.value).toContain('/giphy');
   });
 
+  it('should disable mention popup list', async () => {
+    const onSelectItem = jest.fn();
+    const userAutocompleteText = `@${user.name}`;
+    const { typeText, queryAllByText } = await renderComponent({
+      onSelectItem,
+      disableMentions: true,
+    });
+    typeText(userAutocompleteText);
+    const userText = await queryAllByText(user.name);
+
+    expect(userText).toHaveLength(0);
+  });
+
   it('should use the queryMembers API for mentions if a channel has many members', async () => {
     const users = Array(100).fill().map(generateUser);
     const members = users.map((u) => generateMember({ user: u }));

src/components/MessageInput/MessageInputFlat.js

@@ -64,6 +64,7 @@ const MessageInputFlat = (props) => {
               triggers={props.autocompleteTriggers}
               grow={props.grow}
               disabled={props.disabled}
+              disableMentions={props.disableMentions}
               SuggestionList={props.SuggestionList}
               additionalTextareaProps={props.additionalTextareaProps}
             />
@@ -116,6 +117,8 @@ MessageInputFlat.propTypes = {
   maxRows: PropTypes.number.isRequired,
   /** Make the textarea disabled */
   disabled: PropTypes.bool,
+  /** Disable mentions in textarea */
+  disableMentions: PropTypes.bool,
   /** enable/disable firing the typing event */
   publishTypingEvent: PropTypes.bool,
   /**

src/components/MessageInput/MessageInputLarge.js

@@ -91,6 +91,7 @@ const MessageInputLarge = (props) => {
               triggers={props.autocompleteTriggers}
               grow={props.grow}
               disabled={props.disabled}
+              disableMentions={props.disableMentions}
               SuggestionList={props.SuggestionList}
               additionalTextareaProps={props.additionalTextareaProps}
             />
@@ -161,6 +162,8 @@ MessageInputLarge.propTypes = {
   maxRows: PropTypes.number.isRequired,
   /** Make the textarea disabled */
   disabled: PropTypes.bool,
+  /** Disable mentions in textarea */
+  disableMentions: PropTypes.bool,
   /** enable/disable firing the typing event */
   publishTypingEvent: PropTypes.bool,
   /**

src/components/MessageInput/MessageInputSimple.js

@@ -43,6 +43,7 @@ const MessageInputSimple = (props) => {
             triggers={props.autocompleteTriggers}
             grow={props.grow}
             disabled={props.disabled}
+            disableMentions={props.disableMentions}
             SuggestionList={props.SuggestionList}
             additionalTextareaProps={props.additionalTextareaProps}
           />
@@ -72,6 +73,8 @@ MessageInputSimple.propTypes = {
   maxRows: PropTypes.number.isRequired,
   /** Make the textarea disabled */
   disabled: PropTypes.bool,
+  /** Disable mentions in textarea */
+  disableMentions: PropTypes.bool,
   /** enable/disable firing the typing event */
   publishTypingEvent: PropTypes.bool,
   /**

src/components/MessageInput/MessageInputSmall.js

@@ -65,6 +65,7 @@ const MessageInputSmall = (props) => {
               triggers={props.autocompleteTriggers}
               grow={props.grow}
               disabled={props.disabled}
+              disableMentions={props.disableMentions}
               SuggestionList={props.SuggestionList}
               additionalTextareaProps={props.additionalTextareaProps}
             />
@@ -117,6 +118,8 @@ MessageInputSmall.propTypes = {
   maxRows: PropTypes.number.isRequired,
   /** Make the textarea disabled */
   disabled: PropTypes.bool,
+  /** Disable mentions in textarea */
+  disableMentions: PropTypes.bool,
   /** enable/disable firing the typing event */
   publishTypingEvent: PropTypes.bool,
   /**

src/i18n/en.json

@@ -28,8 +28,8 @@
   "Nothing yet...": "Nothing yet...",
   "Only visible to you": "Only visible to you",
   "Open emoji picker": "Open emoji picker",
+  "People matching": "People matching",
   "Pick your emoji": "Pick your emoji",
-  "Searching for people": "Searching for people",
   "Send": "Send",
   "Sending...": "Sending...",
   "Start of a new thread": "Start of a new thread",

src/i18n/fr.json

@@ -28,8 +28,8 @@
   "Nothing yet...": "Aucun message...",
   "Only visible to you": "Visible uniquement pour vous",
   "Open emoji picker": "Ouvrez le sélecteur d'emoji",
+  "People matching": "Correspondance de personnes",
   "Pick your emoji": "Choisissez votre emoji",
-  "Searching for people": "Recherche de personnes",
   "Send": "Envoyer",
   "Sending...": "Envoi en cours...",
   "Start of a new thread": "Début d'un nouveau fil de discussion",