stream-chat-react-native-core 3.10.2-next.1 → 4.0.0-beta.3

package/src/components/Message/MessageSimple/__tests__/MessagePinnedHeader.test.js

@@ -0,0 +1,53 @@
+import React from 'react';
+
+import { cleanup, render, waitFor } from '@testing-library/react-native';
+
+import { ThemeProvider } from '../../../../contexts/themeContext/ThemeContext';
+import { defaultTheme } from '../../../../contexts/themeContext/utils/theme';
+import {
+  generateMessage,
+  generateStaticMessage,
+} from '../../../../mock-builders/generator/message';
+import { generateStaticUser } from '../../../../mock-builders/generator/user';
+import { MessagePinnedHeader } from '../MessagePinnedHeader';
+
+afterEach(cleanup);
+
+describe('MessagePinnedHeader', () => {
+  it('should render message pinned', async () => {
+    const staticUser = generateStaticUser(0);
+    const message = generateMessage({
+      user: { ...staticUser, image: undefined },
+    });
+    const { getByTestId, rerender, toJSON } = render(
+      <ThemeProvider style={defaultTheme}>
+        <MessagePinnedHeader alignment='right' message={message} />
+      </ThemeProvider>,
+    );
+
+    await waitFor(() => {
+      expect(getByTestId('message-pinned')).toBeTruthy();
+    });
+
+    rerender(
+      <ThemeProvider style={defaultTheme}>
+        <MessagePinnedHeader alignment='right' message={message} />
+      </ThemeProvider>,
+    );
+
+    const staticMessage = generateStaticMessage('hi', {
+      user: staticUser,
+    });
+
+    rerender(
+      <ThemeProvider style={defaultTheme}>
+        <MessagePinnedHeader alignment='left' message={staticMessage} />
+      </ThemeProvider>,
+    );
+
+    await waitFor(() => {
+      expect(getByTestId('message-pinned')).toBeTruthy();
+      expect(toJSON()).toMatchSnapshot();
+    });
+  });
+});

package/src/components/Message/MessageSimple/__tests__/MessageReplies.test.js

@@ -1,13 +1,13 @@
 import React from 'react';
-import { cleanup, fireEvent, render, waitFor } from '@testing-library/react-native';
 
-import { MessageReplies } from '../MessageReplies';
+import { cleanup, fireEvent, render, waitFor } from '@testing-library/react-native';
 
 import { ThemeProvider } from '../../../../contexts/themeContext/ThemeContext';
 import { defaultTheme } from '../../../../contexts/themeContext/utils/theme';
 import { TranslationProvider } from '../../../../contexts/translationContext/TranslationContext';
 import { generateMessage } from '../../../../mock-builders/generator/message';
 import { generateStaticUser, generateUser } from '../../../../mock-builders/generator/user';
+import { MessageReplies } from '../MessageReplies';
 import { MessageRepliesAvatars } from '../MessageRepliesAvatars';
 
 afterEach(cleanup);

package/src/components/Message/MessageSimple/__tests__/MessageStatus.test.js

@@ -1,14 +1,13 @@
 import React from 'react';
-import { cleanup, render, waitFor } from '@testing-library/react-native';
-
-import { MessageStatus } from '../MessageStatus';
 
-import { Chat } from '../../../Chat/Chat';
+import { cleanup, render, waitFor } from '@testing-library/react-native';
 
-import { Streami18n } from '../../../../utils/Streami18n';
 import { generateMessage } from '../../../../mock-builders/generator/message';
 import { generateStaticUser, generateUser } from '../../../../mock-builders/generator/user';
 import { getTestClientWithUser } from '../../../../mock-builders/mock';
+import { Streami18n } from '../../../../utils/Streami18n';
+import { Chat } from '../../../Chat/Chat';
+import { MessageStatus } from '../MessageStatus';
 
 let chatClient;
 let id;

package/src/components/Message/MessageSimple/__tests__/MessageTextContainer.test.js

@@ -1,8 +1,7 @@
 import React from 'react';
 import { Text } from 'react-native';
-import { cleanup, render, waitFor } from '@testing-library/react-native';
 
-import { MessageTextContainer } from '../MessageTextContainer';
+import { cleanup, render, waitFor } from '@testing-library/react-native';
 
 import { ThemeProvider } from '../../../../contexts/themeContext/ThemeContext';
 import { defaultTheme } from '../../../../contexts/themeContext/utils/theme';
@@ -11,6 +10,7 @@ import {
   generateStaticMessage,
 } from '../../../../mock-builders/generator/message';
 import { generateStaticUser } from '../../../../mock-builders/generator/user';
+import { MessageTextContainer } from '../MessageTextContainer';
 
 afterEach(cleanup);
 

package/src/components/Message/MessageSimple/__tests__/__snapshots__/MessageAvatar.test.js.snap

@@ -36,7 +36,7 @@ exports[`MessageAvatar should render message avatar 1`] = `
         onError={[Function]}
         source={
           Object {
-            "uri": "https://images-na.ssl-images-amazon.com/images/I/51t29lLkg8L._AC_SL1000_.jpg",
+            "uri": "https://i.imgur.com/ytIyojl.png",
           }
         }
         style={

package/src/components/Message/MessageSimple/__tests__/__snapshots__/MessagePinnedHeader.test.js.snap

@@ -0,0 +1,80 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`MessagePinnedHeader should render message pinned 1`] = `
+<View
+  style={
+    Array [
+      Object {
+        "display": "flex",
+        "flexDirection": "row",
+        "marginBottom": 8,
+        "marginLeft": 30,
+        "marginTop": 5,
+      },
+      Object {
+        "justifyContent": "flex-start",
+      },
+      Object {},
+    ]
+  }
+  testID="message-pinned"
+>
+  <RNSVGSvgView
+    align="xMidYMid"
+    bbHeight={24}
+    bbWidth={24}
+    focusable={false}
+    height={24}
+    meetOrSlice={0}
+    minX={0}
+    minY={0}
+    pathFill="#7A7A7A"
+    style={
+      Array [
+        Object {
+          "backgroundColor": "transparent",
+          "borderWidth": 0,
+        },
+        Object {
+          "flex": 0,
+          "height": 24,
+          "width": 24,
+        },
+      ]
+    }
+    vbHeight={24}
+    vbWidth={24}
+    width={24}
+  >
+    <RNSVGGroup>
+      <RNSVGPath
+        clipRule={0}
+        d="M10.694 1.52908C10.5304 1.36544 10.2937 1.2982 10.0685 1.35137C9.84327 1.40454 9.6616 1.57053 9.5884 1.79006L9.16613 3.05694L6.72027 5.50284C5.12809 5.14216 3.59999 5.79028 2.19557 7.1947C1.93481 7.45543 1.93481 7.87823 2.19557 8.13896L4.55625 10.4997L3.1399 11.916C2.87915 12.1768 2.87915 12.5995 3.1399 12.8603C3.40065 13.1211 3.82342 13.1211 4.08417 12.8603L5.50051 11.4439L7.8612 13.8046C8.12193 14.0654 8.54473 14.0654 8.80547 13.8046C10.2099 12.4002 10.858 10.8721 10.4973 9.2799L12.9432 6.83403L14.2101 6.41173C14.4296 6.33855 14.5956 6.15692 14.6488 5.9317C14.7019 5.70648 14.6347 5.46979 14.4711 5.30616L10.694 1.52908ZM10.3832 3.62876L10.5137 3.23728L12.7629 5.4865L12.3714 5.617C12.2731 5.64977 12.1837 5.705 12.1104 5.7783L9.2776 8.6111C9.09873 8.78996 9.03633 9.05443 9.11627 9.29436C9.43453 10.249 9.2382 11.2566 8.31287 12.3678L3.6324 7.6873C4.74353 6.76196 5.7511 6.56564 6.7058 6.8839C6.94573 6.96383 7.2102 6.90143 7.38906 6.72256L10.2219 3.88975C10.2951 3.81646 10.3504 3.7271 10.3832 3.62876Z"
+        fill={4286216826}
+        fillRule={0}
+        propList={
+          Array [
+            "fill",
+            "fillRule",
+          ]
+        }
+      />
+    </RNSVGGroup>
+  </RNSVGSvgView>
+  <Text
+    style={
+      Array [
+        Object {
+          "color": "#7A7A7A",
+        },
+        Object {},
+        Object {},
+      ]
+    }
+  >
+    Pinned by
+     
+    You
+  </Text>
+</View>
+`;

package/src/components/Message/MessageSimple/utils/parseLinks.test.ts

@@ -0,0 +1,100 @@
+import { parseLinksFromText } from './parseLinks';
+
+describe('parseLinksFromText', () => {
+  it.each([
+    ['www.getstream.io', 'www.getstream.io'],
+    ['getstream.io', 'getstream.io'],
+    ['scrn://team-chat', 'team-chat'],
+    ['https://localhost', 'localhost'],
+    [
+      'https://localhost/with/path?and=query&multiple=params',
+      'localhost/with/path?and=query&multiple=params',
+    ],
+    ['https://localhost/with/path?and=query#fragment', 'localhost/with/path?and=query#fragment'],
+    ['reactnative.stream', 'reactnative.stream'],
+    [
+      'https://zh.wikipedia.org/wiki/挪威牛油危機',
+      'zh.wikipedia.org/wiki/%E6%8C%AA%E5%A8%81%E7%89%9B%E6%B2%B9%E5%8D%B1%E6%A9%9F',
+    ],
+    [
+      'https://getstream.io/chat/docs/react-native/?language=javascript',
+      'getstream.io/chat/docs/react-native/?language=javascript',
+    ],
+    ['127.0.0.1/local_(development)_server', '127.0.0.1/local_(development)_server'],
+    ['https://a.co:8999/ab.php?p=12', 'a.co:8999/ab.php?p=12'],
+  ])('Returns the encoded value of %p as %p', (link, expected) => {
+    const result = parseLinksFromText(link);
+
+    expect(result[0].encoded).toBe(expected);
+  });
+
+  it('parses fqdn', () => {
+    const input = `We have put the apim bol,
+temporarily so :sj: we can later put the monitors on my grasp
+on reality right now is
+https://www.contrived-example.com:8080/sub/page.php?p1=1🇳🇴&p2=2#fragment-identifier
+:)`;
+
+    const result = parseLinksFromText(input);
+
+    expect(result).toEqual([
+      {
+        encoded:
+          'www.contrived-example.com:8080/sub/page.php?p1=1%F0%9F%87%B3%F0%9F%87%B4&p2=2#fragment-identifier',
+        raw: 'https://www.contrived-example.com:8080/sub/page.php?p1=1🇳🇴&p2=2#fragment-identifier',
+        scheme: 'https://',
+      },
+    ]);
+  });
+
+  it.each([
+    ['support+rn@getstream.io'],
+    ['support.rn@getstream.io'],
+    ['support-rn@getstream.io'],
+    ['support_rn@getstream.io'],
+  ])('Can parse the email address %p', (email) => {
+    const result = parseLinksFromText(email);
+
+    expect(result[0].encoded).toBe(email);
+    expect(result[0].scheme).toBe('mailto:');
+  });
+
+  it("doesn't double the mailto prefix", () => {
+    const input = 'mailto:support@getstream.io';
+
+    const result = parseLinksFromText(input);
+
+    expect(result[0]).toEqual({
+      encoded: 'support@getstream.io',
+      raw: input,
+      scheme: 'mailto:',
+    });
+  });
+
+  it('Does not falsely parse LINKs from text content', () => {
+    const input = `#This string exists to test that we don't produce false positives
+
+Existing links:
+[already a parsed link](https://getstream.io/blog/react-native-how-to-build-bidirectional-infinite-scroll/)
+[even a bogus one]( should not match )
+
+## These should, however, be parsed:
+www.getstream.io
+getstream.io
+`;
+    const result = parseLinksFromText(input);
+
+    expect(result).toHaveLength(2);
+  });
+
+  it('Encodes incomplete emoji unicode', () => {
+    const input = 'https://getstream.io/�';
+    const result = parseLinksFromText(input);
+
+    expect(result[0]).toEqual({
+      encoded: 'getstream.io/%EF%BF%BD',
+      raw: 'https://getstream.io/�',
+      scheme: 'https://',
+    });
+  });
+});

package/src/components/Message/MessageSimple/utils/parseLinks.ts

@@ -0,0 +1,95 @@
+/**
+ * 📣 Note: Do not use named capture groups, as
+ *          it is not yet available in Hermes.
+ *
+ * These helpers indend to make it easier to skim read
+ * the patterns below, but note that some are optional,
+ * specified in the patterns these are added to.
+ * */
+const emailUserName = '[\\w+\\.~$_-]+';
+const schema = `(\\w{2,15}:\\/\\/)`;
+const domain = `((?:\\w+\\.\\w+)+(?:[^:\\/\\s]+))`;
+const port = `(:[0-9]{1,5})`;
+const path = `((?:\\/)?[^?#\\s]+)`;
+const queryString = `(\\?[^#\\s]+)`;
+const fragment = `(#[\\w_-]+)`;
+
+/**
+ * Match any email address, with and without `mailto:`
+ */
+const emailPattern = `(mailto:)?((?:${emailUserName})@(?:${domain}))`;
+
+/**
+ * Match any string starting with something that seems like it's a schema.
+ * */
+const schemePrefixedLinkPattern = `${schema}(\\S+)`;
+
+/**
+ * Match as much as possible of a fqdn, at least with a domain name formed as
+ * something.tld
+ */
+const fqdnLinkPattern = `${schema}?${domain}${port}?${path}?${queryString}?${fragment}?`;
+
+interface Link {
+  encoded: string;
+  raw: string;
+  scheme: string;
+}
+
+/**
+ * This is done separately because of the version of javascript run
+ * for expo
+ * */
+const removeMarkdownLinksFromText = (input: string) => input.replace(/\[[\w\s]+\]\(.*\)/g, '');
+
+export const parseLinksFromText = (input: string): Link[] => {
+  let matches;
+
+  const inputWithoutMarkdownLinks = removeMarkdownLinksFromText(input);
+
+  const results: Link[] = [];
+
+  const emailRegExp = new RegExp(emailPattern, 'gi');
+  while ((matches = emailRegExp.exec(input)) !== null) {
+    const [raw, scheme = 'mailto:', displayValue] = matches;
+    results.push({ encoded: encodeURI(displayValue), raw, scheme });
+  }
+
+  /**
+   * The two link patterns are checked with an "or" (`|`)
+   * to avoid overlapping matches being duplicated in the output.
+   * */
+  const linkRegex = new RegExp(`${fqdnLinkPattern}|${schemePrefixedLinkPattern}`, 'gi');
+  while ((matches = linkRegex.exec(inputWithoutMarkdownLinks)) !== null) {
+    const [
+      raw,
+      fqdnScheme = '',
+      fqdnDomainName = '',
+      fqdnPort = '',
+      fqdnPath = '',
+      fqdnQueryStraing = '',
+      fqdnFragment = '',
+      schemePrefixedScheme = '',
+      schemePrefixedPath = '',
+    ] = matches;
+
+    if (schemePrefixedScheme !== '') {
+      results.push({
+        encoded: encodeURI(schemePrefixedPath),
+        raw,
+        scheme: schemePrefixedScheme,
+      });
+      continue;
+    }
+
+    results.push({
+      encoded: encodeURI(
+        [fqdnDomainName, fqdnPort, fqdnPath, fqdnQueryStraing, fqdnFragment].join(''),
+      ),
+      raw,
+      scheme: fqdnScheme,
+    });
+  }
+
+  return results;
+};

package/src/components/Message/MessageSimple/utils/renderText.tsx

@@ -1,9 +1,10 @@
 import React from 'react';
 import { GestureResponderEvent, Linking, Text, View } from 'react-native';
-import anchorme from 'anchorme';
-import truncate from 'lodash/truncate';
+
 // @ts-expect-error
 import Markdown from 'react-native-markdown-package';
+
+import truncate from 'lodash/truncate';
 import {
   DefaultRules,
   defaultRules,
@@ -14,8 +15,10 @@ import {
   SingleASTNode,
 } from 'simple-markdown';
 
-import type { MessageType } from '../../../MessageList/hooks/useMessageList';
+import { parseLinksFromText } from './parseLinks';
 
+import type { MessageContextValue } from '../../../../contexts/messageContext/MessageContext';
+import type { Colors, MarkdownStyle } from '../../../../contexts/themeContext/utils/theme';
 import type {
   DefaultAttachmentType,
   DefaultChannelType,
@@ -26,8 +29,7 @@ import type {
   DefaultUserType,
   UnknownType,
 } from '../../../../types/types';
-import type { MessageContextValue } from '../../../../contexts/messageContext/MessageContext';
-import type { Colors, MarkdownStyle } from '../../../../contexts/themeContext/utils/theme';
+import type { MessageType } from '../../../MessageList/hooks/useMessageList';
 
 const defaultMarkdownStyles: MarkdownStyle = {
   inlineCode: {
@@ -51,7 +53,6 @@ const defaultMarkdownStyles: MarkdownStyle = {
   mentions: {
     fontWeight: '700',
   },
-  // unfortunately marginVertical doesn't override the defaults for these within the 3rd party lib
   paragraph: {
     marginBottom: 8,
     marginTop: 8,
@@ -88,6 +89,7 @@ export type RenderTextParams<
   markdownRules?: MarkdownRules;
   markdownStyles?: MarkdownStyle;
   messageOverlay?: boolean;
+  messageTextNumberOfLines?: number;
   onLink?: (url: string) => Promise<void>;
   onlyEmojis?: boolean;
 };
@@ -109,6 +111,7 @@ export const renderText = <
     markdownStyles,
     message,
     messageOverlay,
+    messageTextNumberOfLines,
     onLink: onLinkParams,
     onLongPress: onLongPressParam,
     onlyEmojis,
@@ -123,20 +126,19 @@ export const renderText = <
   if (!text) return null;
 
   let newText = text.trim();
-  const urls = anchorme(newText, {
-    list: true,
-  });
+  const urls = parseLinksFromText(newText);
 
   for (const urlInfo of urls) {
-    const displayLink = truncate(urlInfo.encoded.replace(/^(www\.)/, ''), {
+    const displayLink = truncate(urlInfo.encoded, {
       length: 200,
       omission: '...',
     });
-    const markdown = `[${displayLink}](${urlInfo.protocol}${urlInfo.encoded})`;
+    const markdown = `[${displayLink}](${urlInfo.scheme}${urlInfo.encoded})`;
     newText = newText.replace(urlInfo.raw, markdown);
   }
 
   newText = newText.replace(/[<&"'>]/g, '\\$&');
+
   const styles: MarkdownStyle = {
     ...defaultMarkdownStyles,
     ...markdownStyles,
@@ -202,6 +204,12 @@ export const renderText = <
     );
   };
 
+  const paragraphText: ReactNodeOutput = (node, output, { ...state }) => (
+    <Text key={state.key} numberOfLines={messageTextNumberOfLines} style={styles.paragraph}>
+      {output(node.content, state)}
+    </Text>
+  );
+
   const mentionedUsers = Array.isArray(mentioned_users)
     ? mentioned_users.reduce((acc, cur) => {
         const userName = cur.name || cur.id || '';
@@ -252,7 +260,7 @@ export const renderText = <
    *
    * This custom rule overrides this behavior both for top level lists and sublists,
    * in order to start the numbering from the number of the first list item provided.
-   * */
+   */
   const customListAtLevel =
     (level: keyof typeof listLevels): ReactNodeOutput =>
     (node, output, { ...state }) => {
@@ -286,6 +294,8 @@ export const renderText = <
   const customRules = {
     link: { react },
     list: { react: customListAtLevel('top') },
+    // Truncate long text content in the message overlay
+    paragraph: messageTextNumberOfLines ? { react: paragraphText } : {},
     // we have no react rendering support for reflinks
     reflink: { match: () => null },
     sublist: { react: customListAtLevel('sub') },

package/src/components/Message/hooks/useCreateMessageContext.ts

@@ -1,7 +1,5 @@
 import { useMemo } from 'react';
 
-import { isMessageWithStylesReadByAndDateSeparator } from '../../MessageList/hooks/useMessageList';
-
 import type { MessageContextValue } from '../../../contexts/messageContext/MessageContext';
 import type {
   DefaultAttachmentType,
@@ -13,6 +11,7 @@ import type {
   DefaultUserType,
   UnknownType,
 } from '../../../types/types';
+import { isMessageWithStylesReadByAndDateSeparator } from '../../MessageList/hooks/useMessageList';
 
 export const useCreateMessageContext = <
   At extends UnknownType = DefaultAttachmentType,
@@ -25,7 +24,6 @@ export const useCreateMessageContext = <
 >({
   actionsEnabled,
   alignment,
-  canModifyMessage,
   channel,
   disabled,
   files,
@@ -55,7 +53,6 @@ export const useCreateMessageContext = <
   otherAttachments,
   preventPress,
   reactions,
-  readEventsEnabled,
   showAvatar,
   showMessageOverlay,
   showMessageStatus,
@@ -78,7 +75,6 @@ export const useCreateMessageContext = <
     () => ({
       actionsEnabled,
       alignment,
-      canModifyMessage,
       channel,
       disabled,
       files,
@@ -108,7 +104,6 @@ export const useCreateMessageContext = <
       otherAttachments,
       preventPress,
       reactions,
-      readEventsEnabled,
       showAvatar,
       showMessageOverlay,
       showMessageStatus,
@@ -127,7 +122,6 @@ export const useCreateMessageContext = <
       membersValue,
       messageValue,
       reactionsValue,
-      readEventsEnabled,
       showAvatar,
       showMessageStatus,
       threadList,