stream-chat-react-native-core 4.0.0-beta.3 → 4.0.0-beta.4

package/lib/typescript/icons/index.d.ts

@@ -29,7 +29,6 @@ export * from './Grid';
 export * from './Group';
 export * from './HTML';
 export * from './Imgur';
-export * from './Left';
 export * from './Lightning';
 export * from './Link';
 export * from './Loading';
@@ -53,7 +52,6 @@ export * from './PPT';
 export * from './PPTX';
 export * from './RAR';
 export * from './Refresh';
-export * from './Right';
 export * from './RTF';
 export * from './Search';
 export * from './SendRight';

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "stream-chat-react-native-core",
   "description": "The official React Native and Expo components for Stream Chat, a service for building chat applications",
-  "version": "4.0.0-beta.3",
+  "version": "4.0.0-beta.4",
   "author": {
     "company": "Stream.io Inc",
     "name": "Stream.io Inc"

package/src/components/Attachment/Giphy.tsx

@@ -12,9 +12,8 @@ import {
   useMessagesContext,
 } from '../../contexts/messagesContext/MessagesContext';
 import { useTheme } from '../../contexts/themeContext/ThemeContext';
-import { Left } from '../../icons/Left';
+import { GiphyIcon } from '../../icons';
 import { Lightning } from '../../icons/Lightning';
-import { Right } from '../../icons/Right';
 import type {
   DefaultAttachmentType,
   DefaultChannelType,
@@ -28,25 +27,20 @@ import type {
 import { makeImageCompatibleUrl } from '../../utils/utils';
 
 const styles = StyleSheet.create({
+  buttonContainer: { alignItems: 'center', borderTopWidth: 1, flex: 1, justifyContent: 'center' },
   cancel: {
     fontSize: 14,
     fontWeight: '600',
     paddingVertical: 16,
   },
-  cancelContainer: {
-    alignItems: 'center',
-    borderRightWidth: 1,
-    flex: 1,
-    justifyContent: 'center',
-  },
   container: {
     overflow: 'hidden',
-    width: 256,
+    width: 270,
   },
   giphy: {
-    borderTopLeftRadius: 8,
-    borderTopRightRadius: 8,
-    height: 140,
+    borderRadius: 2,
+    height: 170,
+    width: 270,
   },
   giphyContainer: {
     alignItems: 'center',
@@ -56,36 +50,47 @@ const styles = StyleSheet.create({
     justifyContent: 'center',
     width: 68,
   },
+  giphyHeaderText: {
+    fontSize: 16,
+    fontWeight: '600',
+  },
+  giphyHeaderTitle: {
+    fontSize: 14,
+  },
   giphyMask: {
     bottom: 8,
     left: 8,
     position: 'absolute',
   },
-  giphyText: { fontSize: 11, fontWeight: '600' },
+  giphyMaskText: { fontSize: 13, fontWeight: '600' },
+  header: {
+    alignItems: 'center',
+    display: 'flex',
+    flexDirection: 'row',
+    justifyContent: 'space-between',
+    padding: 8,
+    width: '60%',
+  },
   margin: {
-    margin: 8,
+    margin: 1,
   },
   row: { flexDirection: 'row' },
   selectionContainer: {
-    borderRadius: 8,
+    borderBottomLeftRadius: 8,
     borderWidth: 1,
     overflow: 'hidden',
-    width: 250,
-  },
-  selector: {
-    alignItems: 'center',
-    borderBottomWidth: 1,
-    flexDirection: 'row',
-    justifyContent: 'space-between',
-    paddingBottom: 8,
-    paddingHorizontal: 8,
+    width: 272,
   },
   send: {
     fontSize: 14,
     fontWeight: '600',
     paddingVertical: 16,
   },
-  sendContainer: { alignItems: 'center', flex: 1, justifyContent: 'center' },
+  shuffle: {
+    fontSize: 14,
+    fontWeight: '600',
+    paddingVertical: 16,
+  },
   shuffleButton: {
     alignItems: 'center',
     borderRadius: 16,
@@ -94,11 +99,6 @@ const styles = StyleSheet.create({
     justifyContent: 'center',
     width: 32,
   },
-  title: {
-    fontSize: 14,
-    fontStyle: 'italic',
-    fontWeight: '500',
-  },
 });
 
 export type GiphyPropsWithContext<
@@ -142,22 +142,22 @@ const GiphyWithContext = <
 
   const {
     theme: {
-      colors: { accent_blue, black, border, grey, overlay, white },
+      colors: { accent_blue, black, grey, grey_dark, grey_gainsboro, white },
       messageSimple: {
         giphy: {
+          buttonContainer,
           cancel,
-          cancelContainer,
           container,
           giphy,
           giphyContainer,
+          giphyHeaderText,
+          giphyHeaderTitle,
           giphyMask,
-          giphyText,
+          giphyMaskText,
+          header,
           selectionContainer,
-          selector,
           send,
-          sendContainer,
-          shuffleButton,
-          title: titleStyle,
+          shuffle,
         },
       },
     },
@@ -175,51 +175,49 @@ const GiphyWithContext = <
         selectionContainer,
       ]}
     >
+      <View style={[styles.header, header]}>
+        <GiphyIcon />
+        <Text style={[styles.giphyHeaderText, giphyHeaderText]}>Giphy</Text>
+        <Text
+          style={[styles.giphyHeaderTitle, giphyHeaderTitle, { color: grey_dark }]}
+        >{`/giphy ${title}`}</Text>
+      </View>
       <View style={styles.margin}>
         <Image
           resizeMode='cover'
           source={{ uri: makeImageCompatibleUrl(uri) }}
           style={[styles.giphy, giphy]}
         />
-        <View style={[styles.giphyMask, giphyMask]}>
-          <View style={[styles.giphyContainer, { backgroundColor: overlay }, giphyContainer]}>
-            <Lightning height={16} pathFill={white} width={16} />
-            <Text style={[styles.giphyText, { color: white }, giphyText]}>
-              {type?.toUpperCase()}
-            </Text>
-          </View>
-        </View>
       </View>
       <View>
-        <View style={[styles.selector, { borderBottomColor: border }, selector]}>
-          <TouchableOpacity
-            onPress={() => handleAction('image_action', 'shuffle')}
-            style={[styles.shuffleButton, { borderColor: border }, shuffleButton]}
-          >
-            <Left />
-          </TouchableOpacity>
-          <Text style={[styles.title, { color: black }, titleStyle]}>{`"${title}"`}</Text>
+        <View style={styles.row}>
           <TouchableOpacity
             onPress={() => {
-              if (actions?.[1].name && actions?.[1].value && handleAction) {
-                handleAction(actions[1].name, actions[1].value);
+              if (actions?.[2].name && actions?.[2].value && handleAction) {
+                handleAction(actions[2].name, actions[2].value);
               }
             }}
-            style={[styles.shuffleButton, shuffleButton]}
+            style={[
+              styles.buttonContainer,
+              { borderColor: grey_gainsboro, borderRightWidth: 1 },
+              buttonContainer,
+            ]}
           >
-            <Right />
+            <Text style={[styles.cancel, { color: grey }, cancel]}>{actions?.[2].text}</Text>
           </TouchableOpacity>
-        </View>
-        <View style={styles.row}>
           <TouchableOpacity
             onPress={() => {
-              if (actions?.[2].name && actions?.[2].value && handleAction) {
-                handleAction(actions[2].name, actions[2].value);
+              if (actions?.[1].name && actions?.[1].value && handleAction) {
+                handleAction(actions[1].name, actions[1].value);
               }
             }}
-            style={[styles.cancelContainer, { borderRightColor: border }, cancelContainer]}
+            style={[
+              styles.buttonContainer,
+              { borderColor: grey_gainsboro, borderRightWidth: 1 },
+              buttonContainer,
+            ]}
           >
-            <Text style={[styles.cancel, { color: grey }, cancel]}>{actions?.[2].text}</Text>
+            <Text style={[styles.shuffle, { color: grey }, shuffle]}>{actions?.[1].text}</Text>
           </TouchableOpacity>
           <TouchableOpacity
             onPress={() => {
@@ -227,7 +225,7 @@ const GiphyWithContext = <
                 handleAction(actions[0].name, actions[0].value);
               }
             }}
-            style={[styles.sendContainer, sendContainer]}
+            style={[styles.buttonContainer, { borderColor: grey_gainsboro }, buttonContainer]}
           >
             <Text style={[styles.send, { color: accent_blue }, send]}>{actions?.[0].text}</Text>
           </TouchableOpacity>
@@ -272,9 +270,9 @@ const GiphyWithContext = <
           style={[styles.giphy, giphy]}
         />
         <View style={[styles.giphyMask, giphyMask]}>
-          <View style={[styles.giphyContainer, { backgroundColor: overlay }, giphyContainer]}>
+          <View style={[styles.giphyContainer, { backgroundColor: grey_dark }, giphyContainer]}>
             <Lightning height={16} pathFill={white} width={16} />
-            <Text style={[styles.giphyText, { color: white }, giphyText]}>
+            <Text style={[styles.giphyMaskText, { color: white }, giphyMaskText]}>
               {type?.toUpperCase()}
             </Text>
           </View>

package/src/components/Message/MessageSimple/MessageFooter.tsx

@@ -86,7 +86,7 @@ const MessageFooterWithContext = <
 
   const {
     theme: {
-      colors: { grey },
+      colors: { grey, grey_dark },
       messageSimple: {
         content: { deletedMetaText, eyeIcon, messageUser, metaContainer, metaText },
       },
@@ -99,11 +99,11 @@ const MessageFooterWithContext = <
       <View style={metaContainer} testID='message-deleted'>
         {deletedMessagesVisibilityType === 'sender' && (
           <>
-            <Eye pathFill={isDeleted ? undefined : grey} {...eyeIcon} />
+            <Eye pathFill={grey_dark} {...eyeIcon} />
             <Text
               style={[
                 {
-                  color: grey,
+                  color: grey_dark,
                   textAlign: alignment,
                 },
                 metaText,
@@ -138,11 +138,11 @@ const MessageFooterWithContext = <
     <View style={metaContainer} testID='message-status-time'>
       {otherAttachments.length && otherAttachments[0].actions ? (
         <>
-          <Eye {...eyeIcon} />
+          <Eye pathFill={grey_dark} {...eyeIcon} />
           <Text
             style={[
               {
-                color: grey,
+                color: grey_dark,
                 textAlign: alignment,
               },
               metaText,

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

@@ -0,0 +1,70 @@
+import React from 'react';
+import { Text } from 'react-native';
+
+import { render, waitFor } from '@testing-library/react-native';
+
+// @ts-ignore
+import { ASTNode, SingleASTNode } from 'simple-markdown';
+
+import { ListOutput, ListOutputProps } from './renderText';
+
+describe('list', () => {
+  const createNode = ({
+    amount,
+    ordered = false,
+    start = 1,
+  }: {
+    amount: number;
+    ordered?: boolean;
+    start?: number;
+  }): SingleASTNode => ({
+    items: Array.from(Array(amount).keys()),
+    ordered,
+    start,
+    type: 'text',
+  });
+
+  const mockOutput = (node: ASTNode) => <Text>{node}</Text>;
+  const MockText = ({ node, output, state }: ListOutputProps) => (
+    <>
+      <ListOutput node={node} output={output} state={state} styles={{}} />
+    </>
+  );
+
+  it('renders numbered items', async () => {
+    const node = createNode({ amount: 3, ordered: true, start: 1 });
+    const { getByText } = render(<MockText node={node} output={mockOutput} state={{}} />);
+
+    await waitFor(() => expect(getByText('1. ')).toBeTruthy());
+    await waitFor(() => expect(getByText('2. ')).toBeTruthy());
+    await waitFor(() => expect(getByText('3. ')).toBeTruthy());
+  });
+
+  it('renders numbered items from a start index', async () => {
+    const node = createNode({ amount: 3, ordered: true, start: 3 });
+    const { getByText } = render(<MockText node={node} output={mockOutput} state={{}} />);
+
+    await waitFor(() => expect(getByText('3. ')).toBeTruthy());
+    await waitFor(() => expect(getByText('4. ')).toBeTruthy());
+    await waitFor(() => expect(getByText('5. ')).toBeTruthy());
+  });
+
+  it('does not throw an error if an item is empty', async () => {
+    const node = {
+      ...createNode({ amount: 3, ordered: true }),
+      items: ['Not empty', null, 'Not empty'],
+    };
+    const { getByText } = render(<MockText node={node} output={mockOutput} state={{}} />);
+
+    await waitFor(() => expect(getByText('1. ')).toBeTruthy());
+    await waitFor(() => expect(getByText('2. ')).toBeTruthy());
+    await waitFor(() => expect(getByText('3. ')).toBeTruthy());
+  });
+
+  it('renders an unordered list', async () => {
+    const node = createNode({ amount: 3 });
+    const { getAllByText } = render(<MockText node={node} output={mockOutput} state={{}} />);
+
+    await waitFor(() => expect(getAllByText('\u2022 ')).toHaveLength(3));
+  });
+});

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

@@ -1,5 +1,5 @@
-import React from 'react';
-import { GestureResponderEvent, Linking, Text, View } from 'react-native';
+import React, { PropsWithChildren } from 'react';
+import { GestureResponderEvent, Linking, Text, TextProps, View, ViewProps } from 'react-native';
 
 // @ts-expect-error
 import Markdown from 'react-native-markdown-package';
@@ -12,7 +12,9 @@ import {
   ParseFunction,
   parseInline,
   ReactNodeOutput,
+  ReactOutput,
   SingleASTNode,
+  State,
 } from 'simple-markdown';
 
 import { parseLinksFromText } from './parseLinks';
@@ -171,7 +173,7 @@ export const renderText = <
       ? onLinkParams(url)
       : Linking.canOpenURL(url).then((canOpenUrl) => canOpenUrl && Linking.openURL(url));
 
-  const react: ReactNodeOutput = (node, output, { ...state }) => {
+  const link: ReactNodeOutput = (node, output, { ...state }) => {
     const onPress = (event: GestureResponderEvent) => {
       if (!preventPress && onPressParam) {
         onPressParam({
@@ -249,56 +251,18 @@ export const renderText = <
     );
   };
 
-  const listLevels = {
-    sub: 'sub',
-    top: 'top',
-  };
-
-  /**
-   * For lists and sublists, the default behavior of the markdown library we use is
-   * to always renumber any list, so all ordered lists start from 1.
-   *
-   * 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 }) => {
-      const items = node.items.map((item: Array<SingleASTNode>, index: number) => {
-        const withinList = item.length > 1 && item[1].type === 'list';
-        const content = output(item, { ...state, withinList });
-
-        const isTopLevelText =
-          ['text', 'paragraph', 'strong'].includes(item[0].type) && withinList === false;
-
-        return (
-          <View key={index} style={styles.listRow}>
-            <Text style={styles.listItemNumber}>
-              {node.ordered ? `${node.start + index}. ` : `\u2022`}
-            </Text>
-            <Text style={[styles.listItemText, isTopLevelText && { marginBottom: 0 }]}>
-              {content}
-            </Text>
-          </View>
-        );
-      });
-
-      const isSublist = level === 'sub';
-      return (
-        <View key={state.key} style={[isSublist ? styles.list : styles.sublist]}>
-          {items}
-        </View>
-      );
-    };
+  const list: ReactNodeOutput = (node, output, state) => (
+    <ListOutput node={node} output={output} state={state} styles={styles} />
+  );
 
   const customRules = {
-    link: { react },
-    list: { react: customListAtLevel('top') },
+    link: { link },
+    list: { react: list },
     // 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') },
+    sublist: { react: list },
     ...(mentionedUsers
       ? {
           mentions: {
@@ -327,3 +291,69 @@ export const renderText = <
     </Markdown>
   );
 };
+
+export interface ListOutputProps {
+  node: SingleASTNode;
+  output: ReactOutput;
+  state: State;
+  styles?: Partial<MarkdownStyle>;
+}
+
+/**
+ * For lists and sublists, the default behavior of the markdown library we use is
+ * to always renumber any list, so all ordered lists start from 1.
+ *
+ * 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.
+ */
+export const ListOutput = ({ node, output, state, styles }: ListOutputProps) => {
+  let isSublist = state.withinList;
+  const parentTypes = ['text', 'paragraph', 'strong'];
+
+  return (
+    <View key={state.key} style={isSublist ? styles?.sublist : styles?.list}>
+      {node.items.map((item: SingleASTNode, index: number) => {
+        const indexAfterStart = node.start + index;
+
+        if (item === null) {
+          return (
+            <ListRow key={index} style={styles?.listRow} testID='list-item'>
+              <Bullet index={node.ordered && indexAfterStart} />
+            </ListRow>
+          );
+        }
+
+        isSublist = item.length > 1 && item[1].type === 'list';
+        const isSublistWithinText = parentTypes.includes((item[0] ?? {}).type) && isSublist;
+        const style = isSublistWithinText ? { marginBottom: 0 } : {};
+
+        return (
+          <ListRow key={index} style={styles?.listRow} testID='list-item'>
+            <Bullet index={node.ordered && indexAfterStart} />
+            <ListItem key={1} style={[styles?.listItemText, style]}>
+              {output(item, state)}
+            </ListItem>
+          </ListRow>
+        );
+      })}
+    </View>
+  );
+};
+
+interface BulletProps extends TextProps {
+  index?: number;
+}
+
+const Bullet = ({ index, style }: BulletProps) => (
+  <Text key={0} style={[style, defaultMarkdownStyles.listItemNumber]}>
+    {index ? `${index}. ` : '\u2022 '}
+  </Text>
+);
+
+const ListRow = (props: PropsWithChildren<ViewProps>) => (
+  <Text style={[props.style, defaultMarkdownStyles.listRow]}>{props.children}</Text>
+);
+
+const ListItem = ({ children, style }: PropsWithChildren<TextProps>) => (
+  <Text style={style}>{children}</Text>
+);

package/src/contexts/themeContext/utils/theme.ts

@@ -417,18 +417,19 @@ export type Theme = {
       moreImagesText: TextStyle;
     };
     giphy: {
+      buttonContainer: ViewStyle;
       cancel: TextStyle;
-      cancelContainer: ViewStyle;
       container: ViewStyle;
       giphy: ImageStyle;
       giphyContainer: ViewStyle;
+      giphyHeaderText: TextStyle;
+      giphyHeaderTitle: TextStyle;
       giphyMask: ViewStyle;
-      giphyText: TextStyle;
+      giphyMaskText: TextStyle;
+      header: ViewStyle;
       selectionContainer: ViewStyle;
-      selector: ViewStyle;
       send: TextStyle;
-      sendContainer: ViewStyle;
-      shuffleButton: ViewStyle;
+      shuffle: TextStyle;
       title: TextStyle;
     };
     pinnedHeader: {
@@ -837,7 +838,7 @@ export const defaultTheme: Theme = {
       deletedContainer: {},
       deletedContainerInner: {},
       deletedMetaText: {
-        paddingHorizontal: 10,
+        paddingHorizontal: 5,
       },
       deletedText: {
         em: {
@@ -908,18 +909,19 @@ export const defaultTheme: Theme = {
       moreImagesText: {},
     },
     giphy: {
+      buttonContainer: {},
       cancel: {},
-      cancelContainer: {},
       container: {},
       giphy: {},
       giphyContainer: {},
+      giphyHeaderText: {},
+      giphyHeaderTitle: {},
       giphyMask: {},
-      giphyText: {},
+      giphyMaskText: {},
+      header: {},
       selectionContainer: {},
-      selector: {},
       send: {},
-      sendContainer: {},
-      shuffleButton: {},
+      shuffle: {},
       title: {},
     },
     pinnedHeader: {

package/src/icons/index.ts

@@ -30,7 +30,6 @@ export * from './Grid';
 export * from './Group';
 export * from './HTML';
 export * from './Imgur';
-export * from './Left';
 export * from './Lightning';
 export * from './Link';
 export * from './Loading';
@@ -54,7 +53,6 @@ export * from './PPT';
 export * from './PPTX';
 export * from './RAR';
 export * from './Refresh';
-export * from './Right';
 export * from './RTF';
 export * from './Search';
 export * from './SendRight';

package/src/version.json

@@ -1,3 +1,3 @@
 {
-  "version": "4.0.0-beta.3"
+  "version": "4.0.0-beta.4"
 }

package/lib/commonjs/icons/Left.js

@@ -1,38 +0,0 @@
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.Left = void 0;
-
-var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
-
-var _react = _interopRequireDefault(require("react"));
-
-var _base = require("./utils/base");
-
-var _this = this,
-    _jsxFileName = "/home/runner/work/stream-chat-react-native/stream-chat-react-native/package/src/icons/Left.tsx";
-
-var Left = function Left(props) {
-  return _react["default"].createElement(_base.RootSvg, (0, _extends2["default"])({}, props, {
-    __self: _this,
-    __source: {
-      fileName: _jsxFileName,
-      lineNumber: 6,
-      columnNumber: 3
-    }
-  }), _react["default"].createElement(_base.RootPath, (0, _extends2["default"])({
-    d: "M15.694 18.694a1.043 1.043 0 000-1.476L10.47 12l5.224-5.218a1.043 1.043 0 000-1.476 1.046 1.046 0 00-1.478 0l-5.91 5.904a1.04 1.04 0 00-.305.79 1.04 1.04 0 00.305.79l5.91 5.904c.408.408 1.07.408 1.478 0z"
-  }, props, {
-    __self: _this,
-    __source: {
-      fileName: _jsxFileName,
-      lineNumber: 7,
-      columnNumber: 5
-    }
-  })));
-};
-
-exports.Left = Left;
-//# sourceMappingURL=Left.js.map

package/lib/commonjs/icons/Left.js.map

@@ -1 +0,0 @@
-{"version":3,"sources":["Left.tsx"],"names":["Left","props"],"mappings":";;;;;;;;;AAAA;;AAEA;;;;;AAEO,IAAMA,IAAyB,GAAG,SAA5BA,IAA4B,CAACC,KAAD;AAAA,SACvC,gCAAC,aAAD,gCAAaA,KAAb;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,MACE,gCAAC,cAAD;AACE,IAAA,CAAC,EAAC;AADJ,KAEMA,KAFN;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,KADF,CADuC;AAAA,CAAlC","sourcesContent":["import React from 'react';\n\nimport { IconProps, RootPath, RootSvg } from './utils/base';\n\nexport const Left: React.FC<IconProps> = (props) => (\n  <RootSvg {...props}>\n    <RootPath\n      d='M15.694 18.694a1.043 1.043 0 000-1.476L10.47 12l5.224-5.218a1.043 1.043 0 000-1.476 1.046 1.046 0 00-1.478 0l-5.91 5.904a1.04 1.04 0 00-.305.79 1.04 1.04 0 00.305.79l5.91 5.904c.408.408 1.07.408 1.478 0z'\n      {...props}\n    />\n  </RootSvg>\n);\n"]}