stream-chat-react-native-core 5.40.0-rc.2 → 5.41.0-beta.1

package/src/components/{MessageMenu/MessageUserReactionsAvatar.tsx → MessageOverlay/OverlayReactionsAvatar.tsx}

@@ -1,17 +1,15 @@
 import React from 'react';
 
+import type { Reaction } from './OverlayReactions';
+
 import { useTheme } from '../../contexts/themeContext/ThemeContext';
-import { Reaction } from '../../types/types';
 import { Avatar, AvatarProps } from '../Avatar/Avatar';
 
-export type MessageUserReactionsAvatarProps = {
-  /**
-   * The reaction object
-   */
+export type OverlayReactionsAvatarProps = {
   reaction: Reaction;
 } & Partial<Pick<AvatarProps, 'size'>>;
 
-export const MessageUserReactionsAvatar = (props: MessageUserReactionsAvatarProps) => {
+export const OverlayReactionsAvatar = (props: OverlayReactionsAvatarProps) => {
   const {
     reaction: { image, name },
     size,
@@ -25,3 +23,5 @@ export const MessageUserReactionsAvatar = (props: MessageUserReactionsAvatarProp
 
   return <Avatar image={image} name={name} size={size || BASE_AVATAR_SIZE} />;
 };
+
+OverlayReactionsAvatar.displayName = 'OverlayReactionsAvatar{overlay{reactionsAvatar}}';

package/src/components/MessageOverlay/OverlayReactionsItem.tsx

@@ -0,0 +1,188 @@
+import React from 'react';
+
+import { StyleSheet, Text, View } from 'react-native';
+import Svg, { Circle } from 'react-native-svg';
+
+import { ReactionResponse } from 'stream-chat';
+
+import { Reaction } from './OverlayReactions';
+
+import { useChatContext } from '../../contexts/chatContext/ChatContext';
+import type { MessageOverlayContextValue } from '../../contexts/messageOverlayContext/MessageOverlayContext';
+import { useTheme } from '../../contexts/themeContext/ThemeContext';
+import { Unknown } from '../../icons';
+
+import type { DefaultStreamChatGenerics } from '../../types/types';
+import { ReactionData } from '../../utils/utils';
+
+export type OverlayReactionsItemProps<
+  StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics,
+> = Pick<MessageOverlayContextValue<StreamChatGenerics>, 'OverlayReactionsAvatar'> & {
+  reaction: Reaction;
+  supportedReactions: ReactionData[];
+};
+
+type ReactionIconProps<
+  StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics,
+> = Pick<ReactionResponse<StreamChatGenerics>, 'type'> & {
+  pathFill: string;
+  size: number;
+  supportedReactions: ReactionData[];
+};
+
+const ReactionIcon = ({ pathFill, size, supportedReactions, type }: ReactionIconProps) => {
+  const Icon = supportedReactions.find((reaction) => reaction.type === type)?.Icon || Unknown;
+  return <Icon height={size} pathFill={pathFill} width={size} />;
+};
+
+export const OverlayReactionsItem = <
+  StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics,
+>({
+  OverlayReactionsAvatar,
+  reaction,
+  supportedReactions,
+}: OverlayReactionsItemProps<StreamChatGenerics>) => {
+  const { id, name, type } = reaction;
+  const {
+    theme: {
+      colors: { accent_blue, black, grey_gainsboro, white },
+      overlay: {
+        reactions: {
+          avatarContainer,
+          avatarName,
+          avatarSize,
+          radius,
+          reactionBubble,
+          reactionBubbleBackground,
+          reactionBubbleBorderRadius,
+        },
+      },
+    },
+  } = useTheme();
+  const { client } = useChatContext();
+  const alignment = client.userID && client.userID === id ? 'right' : 'left';
+  const x = avatarSize / 2 - (avatarSize / (radius * 4)) * (alignment === 'left' ? 1 : -1);
+  const y = avatarSize - radius;
+
+  const left =
+    alignment === 'left'
+      ? x -
+        (Number(reactionBubbleBackground.width || 0) || styles.reactionBubbleBackground.width) +
+        radius
+      : x - radius;
+  const top =
+    y -
+    radius -
+    (Number(reactionBubbleBackground.height || 0) || styles.reactionBubbleBackground.height);
+
+  return (
+    <View style={[styles.avatarContainer, avatarContainer]}>
+      <View style={styles.avatarInnerContainer}>
+        <OverlayReactionsAvatar reaction={reaction} size={avatarSize} />
+        <View style={[StyleSheet.absoluteFill]}>
+          <Svg>
+            <Circle
+              cx={x - (radius * 2 - radius / 4) * (alignment === 'left' ? 1 : -1)}
+              cy={y - radius * 2 - radius / 4}
+              fill={alignment === 'left' ? grey_gainsboro : white}
+              r={radius * 2}
+              stroke={alignment === 'left' ? white : grey_gainsboro}
+              strokeWidth={radius / 2}
+            />
+            <Circle
+              cx={x}
+              cy={y}
+              fill={alignment === 'left' ? grey_gainsboro : white}
+              r={radius}
+              stroke={alignment === 'left' ? white : grey_gainsboro}
+              strokeWidth={radius / 2}
+            />
+          </Svg>
+          <View
+            style={[
+              styles.reactionBubbleBackground,
+              {
+                backgroundColor: alignment === 'left' ? grey_gainsboro : white,
+                borderColor: alignment === 'left' ? white : grey_gainsboro,
+                borderWidth: radius / 2,
+                left,
+                top,
+              },
+              reactionBubbleBackground,
+            ]}
+          />
+          <View style={[StyleSheet.absoluteFill]}>
+            <Svg>
+              <Circle
+                cx={x - (radius * 2 - radius / 4) * (alignment === 'left' ? 1 : -1)}
+                cy={y - radius * 2 - radius / 4}
+                fill={alignment === 'left' ? grey_gainsboro : white}
+                r={radius * 2 - radius / 2}
+              />
+            </Svg>
+          </View>
+          <View
+            style={[
+              styles.reactionBubble,
+              {
+                backgroundColor: alignment === 'left' ? grey_gainsboro : white,
+                height:
+                  (reactionBubbleBorderRadius || styles.reactionBubble.borderRadius) - radius / 2,
+                left,
+                top,
+                width:
+                  (reactionBubbleBorderRadius || styles.reactionBubble.borderRadius) - radius / 2,
+              },
+              reactionBubble,
+            ]}
+          >
+            <ReactionIcon
+              pathFill={accent_blue}
+              size={(reactionBubbleBorderRadius || styles.reactionBubble.borderRadius) / 2}
+              supportedReactions={supportedReactions}
+              type={type}
+            />
+          </View>
+        </View>
+      </View>
+      <View style={styles.avatarNameContainer}>
+        <Text numberOfLines={2} style={[styles.avatarName, { color: black }, avatarName]}>
+          {name}
+        </Text>
+      </View>
+    </View>
+  );
+};
+
+const styles = StyleSheet.create({
+  avatarContainer: {
+    padding: 8,
+  },
+  avatarInnerContainer: {
+    alignSelf: 'center',
+  },
+  avatarName: {
+    flex: 1,
+    fontSize: 12,
+    fontWeight: '700',
+    paddingTop: 6,
+    textAlign: 'center',
+  },
+  avatarNameContainer: {
+    alignItems: 'center',
+    flexDirection: 'row',
+    flexGrow: 1,
+  },
+  reactionBubble: {
+    alignItems: 'center',
+    borderRadius: 24,
+    justifyContent: 'center',
+    position: 'absolute',
+  },
+  reactionBubbleBackground: {
+    borderRadius: 24,
+    height: 24,
+    position: 'absolute',
+    width: 24,
+  },
+});

package/src/components/{MessageMenu → MessageOverlay}/hooks/useFetchReactions.ts

@@ -80,8 +80,6 @@ export const useFetchReactions = <
   }, [fetchReactions]);
 
   useEffect(() => {
-    setReactions([]);
-    setNext(undefined);
     fetchReactions();
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [messageId, reactionType, sortString]);

package/src/components/MessageOverlay/hooks/useMessageActionAnimation.tsx

@@ -0,0 +1,44 @@
+import type { ViewStyle } from 'react-native';
+import type { TapGestureHandlerStateChangeEvent } from 'react-native-gesture-handler';
+import {
+  runOnJS,
+  useAnimatedGestureHandler,
+  useAnimatedStyle,
+  useSharedValue,
+} from 'react-native-reanimated';
+
+import type { MessageActionListItemProps } from '../MessageActionListItem';
+
+export const useMessageActionAnimation = ({
+  action,
+  activeOpacity = 0.2,
+}: Pick<MessageActionListItemProps, 'action'> & {
+  activeOpacity?: number;
+}) => {
+  const opacity = useSharedValue(1);
+
+  const onTap = useAnimatedGestureHandler<TapGestureHandlerStateChangeEvent>(
+    {
+      onEnd: () => {
+        runOnJS(action)();
+      },
+      onFinish: () => {
+        opacity.value = 1;
+      },
+      onStart: () => {
+        opacity.value = activeOpacity;
+      },
+    },
+    [action],
+  );
+
+  const animatedStyle = useAnimatedStyle<ViewStyle>(() => ({
+    opacity: opacity.value,
+  }));
+
+  return {
+    animatedStyle,
+    onTap,
+    opacity,
+  };
+};

package/src/components/Poll/CreatePollContent.tsx

@@ -0,0 +1,299 @@
+import React, { useCallback, useEffect, useState } from 'react';
+import { StyleSheet, Switch, Text, TextInput, TouchableOpacity, View } from 'react-native';
+
+import { ScrollView } from 'react-native-gesture-handler';
+import { useSharedValue } from 'react-native-reanimated';
+
+import { CreatePollData, PollOptionData, VotingVisibility } from 'stream-chat';
+
+import { CreatePollOptions, CurrentOptionPositionsCache, PollModalHeader } from './components';
+
+import {
+  CreatePollContentContextValue,
+  CreatePollContentProvider,
+  InputMessageInputContextValue,
+  useChatContext,
+  useCreatePollContentContext,
+  useTheme,
+  useTranslationContext,
+} from '../../contexts';
+import { SendPoll } from '../../icons';
+
+export const isMaxNumberOfVotesValid = (maxNumberOfVotes: string) => {
+  const parsedMaxNumberOfVotes = Number(maxNumberOfVotes);
+
+  return (
+    !isNaN(parsedMaxNumberOfVotes) && parsedMaxNumberOfVotes > 1 && parsedMaxNumberOfVotes <= 10
+  );
+};
+
+export const CreatePollContent = () => {
+  const { t } = useTranslationContext();
+  const [pollTitle, setPollTitle] = useState('');
+  const [pollOptions, setPollOptions] = useState<PollOptionData[]>([{ text: '' }]);
+  const [multipleAnswersAllowed, setMultipleAnswersAllowed] = useState(false);
+  const [maxVotesPerPerson, setMaxVotesPerPerson] = useState('');
+  const [maxVotesPerPersonEnabled, setMaxVotesPerPersonEnabled] = useState(false);
+  const [isAnonymous, setIsAnonymous] = useState(false);
+  const [optionSuggestionsAllowed, setOptionSuggestionsAllowed] = useState(false);
+  const [commentsAllowed, setCommentsAllowed] = useState(false);
+  const [duplicates, setDuplicates] = useState<string[]>([]);
+
+  const { closePollCreationDialog, createAndSendPoll } = useCreatePollContentContext();
+
+  // positions and index lookup map
+  // TODO: Please rethink the structure of this, bidirectional data flow is not great
+  const currentOptionPositions = useSharedValue<CurrentOptionPositionsCache>({
+    inverseIndexCache: { 0: 0 },
+    positionCache: { 0: { updatedIndex: 0, updatedTop: 0 } },
+  });
+
+  const {
+    theme: {
+      colors: { accent_error, bg_user, black, white },
+      poll: {
+        createContent: {
+          addComment,
+          anonymousPoll,
+          headerContainer,
+          maxVotes,
+          multipleAnswers,
+          name,
+          scrollView,
+          sendButton,
+          suggestOption,
+        },
+      },
+    },
+  } = useTheme();
+
+  useEffect(() => {
+    const seenTexts = new Set<string>();
+    const duplicateTexts = new Set<string>();
+    for (const option of pollOptions) {
+      const { text } = option;
+      if (seenTexts.has(text)) {
+        duplicateTexts.add(text);
+      }
+      if (text.length > 0) {
+        seenTexts.add(text);
+      }
+    }
+
+    setDuplicates(Array.from(duplicateTexts));
+  }, [pollOptions]);
+
+  const isPollValid =
+    pollTitle &&
+    pollTitle?.length > 0 &&
+    duplicates.length === 0 &&
+    ((maxVotesPerPersonEnabled && isMaxNumberOfVotesValid(maxVotesPerPerson)) ||
+      !maxVotesPerPersonEnabled);
+
+  return (
+    <>
+      <View style={[styles.headerContainer, { backgroundColor: white }, headerContainer]}>
+        <PollModalHeader onPress={() => closePollCreationDialog?.()} title={t('Create Poll')} />
+        <TouchableOpacity
+          disabled={!isPollValid}
+          onPress={() => {
+            const currentPollOptions = Object.assign({}, pollOptions);
+            const reorderedPollOptions = [];
+
+            for (let i = 0; i < pollOptions.length; i++) {
+              const currentOption =
+                currentPollOptions[currentOptionPositions.value.inverseIndexCache[i]];
+              if (currentOption.text.length > 0) {
+                reorderedPollOptions.push(currentOption);
+              }
+            }
+
+            createAndSendPoll({
+              allow_answers: commentsAllowed,
+              allow_user_suggested_options: optionSuggestionsAllowed,
+              enforce_unique_vote: !multipleAnswersAllowed,
+              name: pollTitle,
+              options: reorderedPollOptions,
+              voting_visibility: isAnonymous ? VotingVisibility.anonymous : VotingVisibility.public,
+              ...(isMaxNumberOfVotesValid(maxVotesPerPerson) && maxVotesPerPersonEnabled
+                ? { max_votes_allowed: Number(maxVotesPerPerson) }
+                : {}),
+            });
+          }}
+          style={[styles.sendButton, sendButton]}
+        >
+          <SendPoll
+            height={24}
+            pathFill={isPollValid ? '#005DFF' : '#B4BBBA'}
+            viewBox='0 0 24 24'
+            width={24}
+          />
+        </TouchableOpacity>
+      </View>
+      <ScrollView
+        contentContainerStyle={{ paddingBottom: 70 }}
+        style={[styles.scrollView, { backgroundColor: white }, scrollView]}
+      >
+        <Text style={[styles.text, { color: black }, name.title]}>{t<string>('Questions')}</Text>
+        <TextInput
+          onChangeText={setPollTitle}
+          placeholder={t('Ask a question')}
+          style={[
+            styles.textInputWrapper,
+            styles.text,
+            { backgroundColor: bg_user, color: black },
+            name.input,
+          ]}
+          value={pollTitle}
+        />
+        <CreatePollOptions
+          currentOptionPositions={currentOptionPositions}
+          duplicates={duplicates}
+          pollOptions={pollOptions}
+          setPollOptions={setPollOptions}
+        />
+        <View
+          style={[
+            styles.multipleAnswersWrapper,
+            { backgroundColor: bg_user },
+            multipleAnswers.wrapper,
+          ]}
+        >
+          <View style={[styles.multipleAnswersRow, multipleAnswers.row]}>
+            <Text style={[styles.text, { color: black }, multipleAnswers.title]}>
+              {t<string>('Multiple answers')}
+            </Text>
+            <Switch
+              onValueChange={() => setMultipleAnswersAllowed(!multipleAnswersAllowed)}
+              value={multipleAnswersAllowed}
+            />
+          </View>
+          {multipleAnswersAllowed ? (
+            <View style={[styles.maxVotesWrapper, maxVotes.wrapper]}>
+              {maxVotesPerPersonEnabled && !isMaxNumberOfVotesValid(maxVotesPerPerson) ? (
+                <Text
+                  style={[
+                    styles.maxVotesValidationText,
+                    { color: accent_error },
+                    maxVotes.validationText,
+                  ]}
+                >
+                  {t<string>('Type a number from 2 to 10')}
+                </Text>
+              ) : null}
+              <View style={{ flexDirection: 'row' }}>
+                <TextInput
+                  inputMode='numeric'
+                  onChangeText={setMaxVotesPerPerson}
+                  placeholder={t('Maximum votes per person')}
+                  style={[styles.maxVotesInput, { color: black }, maxVotes.input]}
+                  value={maxVotesPerPerson}
+                />
+                <Switch
+                  onValueChange={() => setMaxVotesPerPersonEnabled(!maxVotesPerPersonEnabled)}
+                  value={maxVotesPerPersonEnabled}
+                />
+              </View>
+            </View>
+          ) : null}
+        </View>
+        <View
+          style={[styles.textInputWrapper, { backgroundColor: bg_user }, anonymousPoll.wrapper]}
+        >
+          <Text style={[styles.text, { color: black }, anonymousPoll.title]}>
+            {t<string>('Anonymous poll')}
+          </Text>
+          <Switch onValueChange={() => setIsAnonymous(!isAnonymous)} value={isAnonymous} />
+        </View>
+        <View
+          style={[styles.textInputWrapper, { backgroundColor: bg_user }, suggestOption.wrapper]}
+        >
+          <Text style={[styles.text, { color: black }, suggestOption.title]}>
+            {t<string>('Suggest an option')}
+          </Text>
+          <Switch
+            onValueChange={() => setOptionSuggestionsAllowed(!optionSuggestionsAllowed)}
+            value={optionSuggestionsAllowed}
+          />
+        </View>
+        <View style={[styles.textInputWrapper, { backgroundColor: bg_user }, addComment.wrapper]}>
+          <Text style={[styles.text, { color: black }, addComment.title]}>
+            {t<string>('Add a comment')}
+          </Text>
+          <Switch
+            onValueChange={() => setCommentsAllowed(!commentsAllowed)}
+            value={commentsAllowed}
+          />
+        </View>
+      </ScrollView>
+    </>
+  );
+};
+
+export const CreatePoll = ({
+  closePollCreationDialog,
+  CreatePollContent: CreatePollContentOverride,
+  createPollOptionHeight,
+  sendMessage,
+}: Pick<
+  CreatePollContentContextValue,
+  'createPollOptionHeight' | 'closePollCreationDialog' | 'sendMessage'
+> &
+  Pick<InputMessageInputContextValue, 'CreatePollContent'>) => {
+  const { client } = useChatContext();
+
+  const createAndSendPoll = useCallback(
+    async (pollData: CreatePollData) => {
+      const poll = await client.polls.createPoll(pollData);
+      await sendMessage({ customMessageData: { poll_id: poll.id } });
+      closePollCreationDialog?.();
+    },
+    [client, sendMessage, closePollCreationDialog],
+  );
+
+  return (
+    <CreatePollContentProvider
+      value={{ closePollCreationDialog, createAndSendPoll, createPollOptionHeight, sendMessage }}
+    >
+      {CreatePollContentOverride ? <CreatePollContentOverride /> : <CreatePollContent />}
+    </CreatePollContentProvider>
+  );
+};
+
+const styles = StyleSheet.create({
+  headerContainer: { flexDirection: 'row', justifyContent: 'space-between' },
+  maxVotesInput: { flex: 1, fontSize: 16 },
+  maxVotesValidationText: {
+    fontSize: 12,
+    left: 16,
+    position: 'absolute',
+    top: 0,
+  },
+  maxVotesWrapper: {
+    alignItems: 'flex-start',
+    flexDirection: 'column',
+    justifyContent: 'space-between',
+    paddingHorizontal: 16,
+    paddingVertical: 18,
+  },
+  multipleAnswersRow: {
+    alignItems: 'center',
+    flexDirection: 'row',
+    justifyContent: 'space-between',
+    paddingHorizontal: 16,
+    paddingVertical: 18,
+  },
+  multipleAnswersWrapper: { borderRadius: 12, marginTop: 16 },
+  scrollView: { flex: 1, padding: 16 },
+  sendButton: { paddingHorizontal: 16, paddingVertical: 18 },
+  text: { fontSize: 16 },
+  textInputWrapper: {
+    alignItems: 'center',
+    borderRadius: 12,
+    flexDirection: 'row',
+    justifyContent: 'space-between',
+    marginTop: 16,
+    paddingHorizontal: 16,
+    paddingVertical: 18,
+  },
+});

package/src/components/Poll/Poll.tsx

@@ -0,0 +1,126 @@
+import React, { useMemo } from 'react';
+import { StyleSheet, Text, View } from 'react-native';
+
+import { PollOption as PollOptionClass } from 'stream-chat';
+
+import {
+  AddCommentButton,
+  EndVoteButton,
+  PollOption,
+  ShowAllCommentsButton,
+  ShowAllOptionsButton,
+  SuggestOptionButton,
+  ViewResultsButton,
+} from './components';
+
+import { usePollState } from './hooks/usePollState';
+
+import {
+  MessagesContextValue,
+  PollContextProvider,
+  PollContextValue,
+  useTheme,
+  useTranslationContext,
+} from '../../contexts';
+import type { DefaultStreamChatGenerics } from '../../types/types';
+
+export type PollProps<
+  StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics,
+> = Pick<PollContextValue<StreamChatGenerics>, 'poll' | 'message'> &
+  Pick<MessagesContextValue<StreamChatGenerics>, 'PollContent'>;
+
+export type PollContentProps = {
+  PollButtons?: React.ComponentType;
+  PollHeader?: React.ComponentType;
+};
+
+export const PollButtons = () => (
+  <>
+    <ShowAllOptionsButton />
+    <ShowAllCommentsButton />
+    <SuggestOptionButton />
+    <AddCommentButton />
+    <ViewResultsButton />
+    <EndVoteButton />
+  </>
+);
+
+export const PollHeader = () => {
+  const { t } = useTranslationContext();
+  const { enforceUniqueVote, isClosed, maxVotesAllowed, name } = usePollState();
+  const subtitle = useMemo(() => {
+    if (isClosed) return t('Vote ended');
+    if (enforceUniqueVote) return t('Select one');
+    if (maxVotesAllowed) return t('Select up to {{count}}', { count: maxVotesAllowed });
+    return t('Select one or more');
+  }, [isClosed, t, enforceUniqueVote, maxVotesAllowed]);
+
+  const {
+    theme: {
+      colors: { text_high_emphasis, text_low_emphasis },
+      poll: {
+        message: { header },
+      },
+    },
+  } = useTheme();
+
+  return (
+    <>
+      <Text style={[styles.headerTitle, { color: text_high_emphasis }, header.title]}>{name}</Text>
+      <Text style={[styles.headerSubtitle, { color: text_low_emphasis }, header.subtitle]}>
+        {subtitle}
+      </Text>
+    </>
+  );
+};
+
+export const PollContent = ({
+  PollButtons: PollButtonsOverride,
+  PollHeader: PollHeaderOverride,
+}: PollContentProps) => {
+  const { options } = usePollState();
+
+  const {
+    theme: {
+      poll: {
+        message: { container, optionsWrapper },
+      },
+    },
+  } = useTheme();
+
+  return (
+    <View style={[styles.container, container]}>
+      {PollHeaderOverride ? <PollHeaderOverride /> : <PollHeader />}
+      <View style={[styles.optionsWrapper, optionsWrapper]}>
+        {options?.slice(0, 10)?.map((option: PollOptionClass) => (
+          <PollOption key={`message_poll_option_${option.id}`} option={option} />
+        ))}
+      </View>
+      {PollButtonsOverride ? <PollButtonsOverride /> : <PollButtons />}
+    </View>
+  );
+};
+
+export const Poll = <
+  StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics,
+>({
+  message,
+  poll,
+  PollContent: PollContentOverride,
+}: PollProps<StreamChatGenerics>) => (
+  <PollContextProvider
+    value={{
+      message,
+      poll,
+    }}
+  >
+    {PollContentOverride ? <PollContentOverride /> : <PollContent />}
+  </PollContextProvider>
+);
+
+const styles = StyleSheet.create({
+  container: { padding: 15, width: 270 },
+  headerSubtitle: { fontSize: 12, marginTop: 4 },
+  headerTitle: { fontSize: 16, fontWeight: '500' },
+  optionsWrapper: { marginTop: 12 },
+});