Merge branch 'website-demos' of github.com:GetStream/stream-chat-reac…

…t into thread-ui

CHANGELOG.md

@@ -1,5 +1,16 @@
 # Changelog
 
+## [6.5.0](https://github.com/GetStream/stream-chat-react/releases/tag/v6.5.0) 2021-08-11
+
+### Feature
+
+- Add `defaultItemHeight` prop to `VirtualizedMessageList` to smooth rendering of long and differently sized lists. Also, prevent new message notification icon from flashing when switching channels. [#1112](https://github.com/GetStream/stream-chat-react/pull/1112)
+
+### Chore
+
+- Improve `EmojiContext` types and documentation [#1107](https://github.com/GetStream/stream-chat-react/pull/1107)
+- Adjust `Attachment` component rendering in Message UI components for cases with no attachment array length [#1115](https://github.com/GetStream/stream-chat-react/pull/1115)
+
 ## [6.4.11](https://github.com/GetStream/stream-chat-react/releases/tag/v6.4.11) 2021-08-06
 
 ### Chore

docusaurus/docs/React/core-components/virtualized-list.mdx

@@ -60,6 +60,16 @@ const customMessages = [
 </Chat>;
 ```
 
+## Scroll Behavior Optimization
+
+By default, the virtualized message list uses the latest message (which gets rendered first) in the list as the default item size.
+This can lead to inaccurate scroll thumb size or scroll jumps if the last item is unusually tall (for example, an attachment).
+To improve this behavior, set the `defaultItemHeight` property to a value close (or equal to) the height of the usual messages.
+
+```jsx
+<VirtualizedMessageList messages={customMessages} defaultItemHeight={76} />
+```
+
 ## Props
 
 ### customMessageRenderer
@@ -70,6 +80,14 @@ Custom message render function, overrides the default `messageRenderer` function
 | ------------------------------------------------------------------ |
 | ( messages: StreamMessage[], index: number ) => React.ReactElement |
 
+### defaultItemHeight
+
+If set, the default item height is used for the calculation of the total list height. Use if you expect messages with a lot of height variance.
+
+| Type   |
+| ------ |
+| number |
+
 ### disableDateSeparator
 
 If true, disables the injection of date separator UI components.

docusaurus/docs/React/custom-code-examples/giphy-preview.mdx

@@ -1,7 +1,7 @@
 ---
 id: giphy_preview
 sidebar_position: 20
-title: Giphy Preview Component
+title: Giphy Preview
 ---
 
 import GiphyPreview from '../assets/GiphyPreview.png';
@@ -24,62 +24,57 @@ Our custom preview component will render an `Attachment` component with a custom
 This functionality is handled with the `handleAction` method via the `Message` component's `useActionHandler` hook.
 
 ```jsx
-    const CustomAttachmentActions: React.FC<AttachmentActionsProps> = (props) => {
-        const { actionHandler, actions } = props;
-
-        const handleClick = async (
-            event: React.MouseEvent<HTMLButtonElement, MouseEvent>,
-            value?: string,
-            name?: string,
-        ) => {
-            try {
-            if (actionHandler) await actionHandler(name, value, event);
-            } catch (err) {
-            console.log(err);
-            }
-        };
-
-        return (
-            <>
-            {actions.map((action) => (
-                <button
-                onClick={(event) => handleClick(event, action.value, action.name)}
-                >
-                {action.value}
-                </button>
-            ))}
-            </>
-        );
-    };
-
-    const customGiphyPreview: React.FC<GiphyPreviewMessageProps> = (props) => {
-        const { message } = props;
-
-        const handleAction = useActionHandler(message)
-
-        if (!message.attachments) return null;
-
-        return (
-            <Attachment
-            actionHandler={handleAction}
-            AttachmentActions={CustomAttachmentActions}
-            attachments={message.attachments}
-            />
-        );
+const CustomAttachmentActions: React.FC<AttachmentActionsProps> = (props) => {
+  const { actionHandler, actions } = props;
+
+  const handleClick = async (
+    event: React.MouseEvent<HTMLButtonElement, MouseEvent>,
+    value?: string,
+    name?: string,
+  ) => {
+    try {
+      if (actionHandler) await actionHandler(name, value, event);
+    } catch (err) {
+      console.log(err);
     }
-
-    <Chat client={chatClient}>
-        <Channel GiphyPreviewMessage={customGiphyPreview}>
-            <ChannelHeader />
-            <VirtualizedMessageList separateGiphyPreview />
-            <MessageInput />
-        </Channel>
-    </Chat>
+  };
+
+  return (
+    <>
+      {actions.map((action) => (
+        <button onClick={(event) => handleClick(event, action.value, action.name)}>
+          {action.value}
+        </button>
+      ))}
+    </>
+  );
+};
+
+const CustomGiphyPreview: React.FC<GiphyPreviewMessageProps> = (props) => {
+  const { message } = props;
+
+  const handleAction = useActionHandler(message);
+
+  if (!message.attachments) return null;
+
+  return (
+    <Attachment
+      actionHandler={handleAction}
+      AttachmentActions={CustomAttachmentActions}
+      attachments={message.attachments}
+    />
+  );
+};
+
+<Chat client={chatClient}>
+  <Channel GiphyPreviewMessage={CustomGiphyPreview}>
+    <ChannelHeader />
+    <VirtualizedMessageList separateGiphyPreview />
+    <MessageInput />
+  </Channel>
+</Chat>;
 ```
 
 ## The Result
 
 <img src={GiphyPreview} alt='Custom GiphyPreview component for Chat' width='700' />
-
-
-

examples/typescript-app/yarn.lock

@@ -10045,10 +10045,10 @@ react-view-pager@^0.6.0:
     resize-observer-polyfill "1.5.0"
     tabbable "1.1.2"
 
-react-virtuoso@^1.10.4:
-  version "1.10.4"
-  resolved "https://registry.yarnpkg.com/react-virtuoso/-/react-virtuoso-1.10.4.tgz#c7ec91f98c3e65f3d98a41df1e01d305b523ba0a"
-  integrity sha512-rWXr61gASl+KDEwakwgxoSL+uwuevSsu1wQyDzeCdIN+PgbGfLOcvEsFoTt96E4+VWQ5BawZYkh8iNUgQpucXw==
+react-virtuoso@^1.10.6:
+  version "1.10.6"
+  resolved "https://registry.yarnpkg.com/react-virtuoso/-/react-virtuoso-1.10.6.tgz#f20bed0040c29253a7be9f104a900c40384f6a17"
+  integrity sha512-cEv6QiYwChHV2ozTWP6UMaopKaJBAuvHdzIxuZ2Wow71Ka6EZRLvwkYOqCmWSprWiueOiwr7TK+zrosjH2CtzQ==
   dependencies:
     "@virtuoso.dev/react-urx" "^0.2.5"
     "@virtuoso.dev/urx" "^0.2.5"

examples/website-demos/virtual-event/package.json

@@ -7,7 +7,7 @@
     "react": "link:../../../node_modules/react",
     "react-dom": "link:../../../node_modules/react-dom",
     "react-scripts": "4.0.3",
-    "stream-chat": "3.13.1",
+    "stream-chat": "4.0.0",
     "stream-chat-react": "link:../../../",
     "typescript": "4.3.5"
   },

examples/website-demos/virtual-event/src/assets/CommandBolt.tsx

@@ -0,0 +1,7 @@
+import React from 'react';
+
+export const CommandBolt: React.FC = () => (
+  <svg xmlns='http://www.w3.org/2000/svg' width='24' height='24' fill='none' viewBox='0 0 24 24'>
+    <path fill='var(--text-mid-emphasis)' d='M11 4h5l-3 7h4L9 22l2-8H7l4-10z'></path>
+  </svg>
+);

examples/website-demos/virtual-event/src/assets/GiphyCommandIcon.tsx

@@ -0,0 +1,15 @@
+import React from 'react';
+
+export const GiphyCommandIcon: React.FC = () => (
+  <svg xmlns='http://www.w3.org/2000/svg' width='24' height='24' fill='none' viewBox='0 0 24 24'>
+    <path
+      fill='#000'
+      d='M0 12C0 5.373 5.373 0 12 0s12 5.373 12 12-5.373 12-12 12S0 18.627 0 12z'
+    ></path>
+    <path fill='#0F9' d='M7 7H8V17H7z'></path>
+    <path fill='#9D34FF' d='M16 10H17V18H16z'></path>
+    <path fill='#FFFF9C' d='M7 6H14V7H7z'></path>
+    <path fill='#0CF' d='M7 17H16V18H7z'></path>
+    <path fill='#F66' d='M14 6h1v1.5h1V9h1v1h-3V6z'></path>
+  </svg>
+);

examples/website-demos/virtual-event/src/assets/MainEventButton.tsx

@@ -9,13 +9,15 @@ export const MainEventButton: React.FC = () => {
     setEventName,
     setSelected,
     setShowChannelList,
+    setVideoOpen,
     showChannelList,
   } = useEventContext();
 
   const handleClick = () => {
     setSelected('main-event');
     setEventName(undefined);
     setChatType('global');
+    setVideoOpen(false);
     if (showChannelList) setShowChannelList(false);
   };
 

examples/website-demos/virtual-event/src/assets/OverviewButton.tsx

@@ -9,10 +9,12 @@ export const OverviewButton: React.FC = () => {
     setEventName,
     setSelected,
     setShowChannelList,
+    setVideoOpen,
     showChannelList,
   } = useEventContext();
 
   const handleClick = () => {
+    setVideoOpen(false);
     setSelected('overview');
     setEventName(undefined);
     setChatType('global');

examples/website-demos/virtual-event/src/assets/ParticipantsIcon.tsx

@@ -4,8 +4,8 @@ export const ParticipantsIcon: React.FC = () => (
   <svg width='11' height='15' viewBox='0 0 11 15' fill='none' xmlns='http://www.w3.org/2000/svg'>
     <path
       d='M0 12.5534C0 10.0006 2.06944 7.93115 4.62222 7.93115H5.77778C8.33056 7.93115 10.4 10.0006 10.4 12.5534C10.4 13.8298 9.36528 14.8645 8.08889 14.8645H2.31111C1.03472 14.8645 0 13.8298 0 12.5534Z'
-      fill='#8A898E'
+      fill='var(--text-mid-emphasis)'
     />
-    <circle cx='5.20008' cy='4.1178' r='3.12' fill='#8A898E' />
+    <circle cx='5.20008' cy='4.1178' r='3.12' fill='var(--text-mid-emphasis)' />
   </svg>
 );

examples/website-demos/virtual-event/src/assets/RoomsButton.tsx

@@ -9,13 +9,15 @@ export const RoomsButton: React.FC = () => {
     setEventName,
     setSelected,
     setShowChannelList,
+    setVideoOpen,
     showChannelList,
   } = useEventContext();
 
   const handleClick = () => {
     setSelected('rooms');
     setEventName(undefined);
     setChatType('global');
+    setVideoOpen(false);
     if (showChannelList) setShowChannelList(false);
   };
 

examples/website-demos/virtual-event/src/assets/VideoViewersIcon.tsx

@@ -6,7 +6,7 @@ export const VideoViewersIcon = () => (
       fillRule='evenodd'
       clipRule='evenodd'
       d='M7.61306 0.931152C11.2077 0.931152 14.1984 3.51782 14.8257 6.93115C14.1991 10.3445 11.2077 12.9312 7.61306 12.9312C4.01839 12.9312 1.02772 10.3445 0.400391 6.93115C1.02706 3.51782 4.01839 0.931152 7.61306 0.931152ZM7.61304 9.93115C5.95618 9.93115 4.61304 8.58801 4.61304 6.93115C4.61304 5.2743 5.95618 3.93115 7.61304 3.93115C8.17251 3.93115 8.69622 4.0843 9.14452 4.35097C8.97758 4.29483 8.79882 4.2644 8.61296 4.2644C7.69248 4.2644 6.94629 5.0106 6.94629 5.93107C6.94629 6.85154 7.69248 7.59774 8.61296 7.59774C9.53343 7.59774 10.2796 6.85154 10.2796 5.93107C10.2796 5.74511 10.2492 5.56627 10.193 5.39925C10.4598 5.84764 10.613 6.3715 10.613 6.93115C10.613 8.58801 9.26989 9.93115 7.61304 9.93115Z'
-      fill='#8A898E'
+      fill='var(--text-mid-emphasis)'
     />
   </svg>
 );

examples/website-demos/virtual-event/src/assets/index.ts

@@ -11,21 +11,23 @@ export { RoomCard5 } from './roomCardPictures/RoomCard5';
 export { RoomCard6 } from './roomCardPictures/RoomCard6';
 export { RoomCard7 } from './roomCardPictures/RoomCard7';
 
-export { CalendarButton } from './CalendarButton';
 export { BackArrow } from './BackArrow';
 export { BlockUser } from './BlockUser';
+export { CalendarButton } from './CalendarButton';
 export { ClearSearchButton } from './ClearSearchButton';
 export { ClickDMIcon } from './ClickDMIcon';
 export { CloseChatButton } from './CloseChatButton';
 export { CloseX } from './CloseX';
 export { CloseSnackbar } from './CloseSnackbar';
+export { CommandBolt } from './CommandBolt';
 export { ConnectionStatus } from './ConnectionStatus';
 export { Ellipse } from './Ellipse';
 export { EmojiPickerIcon } from './EmojiPickerIcon';
 export { EmptyChatIcon } from './EmptyChatIcon';
 export { EmptyDMIcon } from './EmptyDMIcon';
 export { EmptyQAIcon } from './EmptyQAIcon';
 export { EventCardIcon } from './EventCardIcon';
+export { GiphyCommandIcon } from './GiphyCommandIcon';
 export { GiphyIcon } from './GiphyIcon';
 export { GiphySearch } from './GiphySearch';
 export { HackerSummitHero } from './HackerSummitHero';

examples/website-demos/virtual-event/src/components/CentralPanel/EventCard.tsx

@@ -27,7 +27,13 @@ export const EventCard: React.FC<Props> = (props) => {
     viewers,
   } = props;
 
-  const { setChatType, setEventName, setSelected, setShowChannelList } = useEventContext();
+  const {
+    setChatType,
+    setEventName,
+    setSelected,
+    setShowChannelList,
+    setVideoOpen,
+  } = useEventContext();
   const { setLabel, setPresenters, setTitle, setViewers } = useVideoContext();
 
   const handleClick = () => {
@@ -40,6 +46,7 @@ export const EventCard: React.FC<Props> = (props) => {
     setShowChannelList(false);
     setSelected(chatType === 'main-event' ? 'main-event' : 'rooms');
     setTitle(title);
+    setVideoOpen(true);
     setViewers(viewers);
   };
 

examples/website-demos/virtual-event/src/components/CentralPanel/EventsList.tsx

@@ -10,7 +10,7 @@ import { useEventContext } from '../../contexts/EventContext';
 export const EventsList = () => {
   const [dropdownOpen, setDropdownOpen] = useState(false);
 
-  const { chatType, setChatType, setEventName } = useEventContext();
+  const { setChatType, setEventName, setVideoOpen, videoOpen } = useEventContext();
 
   const dropdownRef = useRef<HTMLDivElement | null>(null);
 
@@ -35,12 +35,14 @@ export const EventsList = () => {
   const handleBackArrow = (event: BaseSyntheticEvent) => {
     setChatType('global');
     setEventName(undefined);
+    setVideoOpen(false);
   };
 
   const calendarClick = (event: BaseSyntheticEvent) => {
     event.stopPropagation();
     setDropdownOpen((prev) => !prev);
   };
+
   const currentEvents = [mainEvents[0], mainEvents[1]];
   const upcomingEvents = [mainEvents[2], mainEvents[3]];
 
@@ -86,10 +88,10 @@ export const EventsList = () => {
           </div>
         )}
       </div>
-      <div className={`events-list-video${chatType === 'main-event' ? '' : '-hidden'}`}>
+      <div className={`events-list-video${videoOpen ? '' : '-hidden'}`}>
         <RoomVideo handleBackArrow={handleBackArrow} />
       </div>
-      <div className='events-list-container'>
+      <div className={`events-list-container${videoOpen ? '-hidden' : ''}`}>
         {currentEvents.map((event, i) => (
           <div className='events-list-container-item' key={i}>
             <EventCard

examples/website-demos/virtual-event/src/components/CentralPanel/RoomVideo.tsx

@@ -34,6 +34,7 @@ export const RoomVideo: React.FC<Props> = ({ handleBackArrow }) => {
       setIsPinned(true);
       setPinnedID(event.target.id);
     }
+
     if (isPinned && event.target.id === pinnedID) {
       setIsPinned(false);
       setPinnedID(null);