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

package/src/components/MessageOverlay/OverlayReactionList.tsx

@@ -0,0 +1,447 @@
+import React from 'react';
+import { StyleSheet, useWindowDimensions, View, ViewStyle } from 'react-native';
+import { TapGestureHandler, TapGestureHandlerStateChangeEvent } from 'react-native-gesture-handler';
+import Animated, {
+  cancelAnimation,
+  interpolate,
+  runOnJS,
+  useAnimatedGestureHandler,
+  useAnimatedProps,
+  useAnimatedReaction,
+  useAnimatedStyle,
+  useSharedValue,
+  withDelay,
+  withSequence,
+  withTiming,
+} from 'react-native-reanimated';
+import Svg, { Circle, CircleProps, FillProps } from 'react-native-svg';
+
+import {
+  MessageOverlayData,
+  useMessageOverlayContext,
+} from '../../contexts/messageOverlayContext/MessageOverlayContext';
+import {
+  MessagesContextValue,
+  useMessagesContext,
+} from '../../contexts/messagesContext/MessagesContext';
+import {
+  OverlayContextValue,
+  useOverlayContext,
+} from '../../contexts/overlayContext/OverlayContext';
+import { useTheme } from '../../contexts/themeContext/ThemeContext';
+import {
+  IconProps,
+  LOLReaction,
+  LoveReaction,
+  ThumbsDownReaction,
+  ThumbsUpReaction,
+  WutReaction,
+} from '../../icons';
+
+import { triggerHaptic } from '../../native';
+
+import type { DefaultStreamChatGenerics } from '../../types/types';
+import type { ReactionData } from '../../utils/utils';
+
+const AnimatedCircle = Animated.createAnimatedComponent
+  ? Animated.createAnimatedComponent(Circle)
+  : Circle;
+
+const styles = StyleSheet.create({
+  notLastReaction: {
+    marginRight: 16,
+  },
+  reactionList: {
+    alignItems: 'center',
+    borderRadius: 24,
+    flexDirection: 'row',
+    justifyContent: 'center',
+    paddingHorizontal: 16,
+    paddingVertical: 12,
+    position: 'absolute',
+  },
+  selectedIcon: {
+    position: 'absolute',
+  },
+});
+
+const reactionData: ReactionData[] = [
+  {
+    Icon: LoveReaction,
+    type: 'love',
+  },
+  {
+    Icon: ThumbsUpReaction,
+    type: 'like',
+  },
+  {
+    Icon: ThumbsDownReaction,
+    type: 'sad',
+  },
+  {
+    Icon: LOLReaction,
+    type: 'haha',
+  },
+  {
+    Icon: WutReaction,
+    type: 'wow',
+  },
+];
+
+type ReactionButtonProps<
+  StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics,
+> = Pick<
+  OverlayReactionListPropsWithContext<StreamChatGenerics>,
+  'ownReactionTypes' | 'handleReaction' | 'setOverlay'
+> & {
+  Icon: React.ComponentType<IconProps>;
+  index: number;
+  numberOfReactions: number;
+  showScreen: Animated.SharedValue<number>;
+  type: string;
+};
+
+export const ReactionButton = <
+  StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics,
+>(
+  props: ReactionButtonProps<StreamChatGenerics>,
+) => {
+  const {
+    handleReaction,
+    Icon,
+    index,
+    numberOfReactions,
+    ownReactionTypes,
+    setOverlay,
+    showScreen,
+    type,
+  } = props;
+  const {
+    theme: {
+      colors: { accent_blue, grey },
+      overlay: {
+        reactionsList: { reaction, reactionSize, selectedIcon, unSelectedIcon },
+      },
+    },
+  } = useTheme();
+  const selected = ownReactionTypes.includes(type);
+  const animationScale = useSharedValue(0);
+  const hasShown = useSharedValue(0);
+  const scale = useSharedValue(1);
+  const selectedOpacity = useSharedValue(selected ? 1 : 0);
+
+  const onTap = useAnimatedGestureHandler<TapGestureHandlerStateChangeEvent>(
+    {
+      onEnd: () => {
+        runOnJS(triggerHaptic)('impactLight');
+        selectedOpacity.value = withTiming(selected ? 0 : 1, { duration: 250 }, () => {
+          if (handleReaction) {
+            runOnJS(handleReaction)(type);
+          }
+          runOnJS(setOverlay)('none');
+        });
+      },
+      onFinish: () => {
+        cancelAnimation(scale);
+        scale.value = withTiming(1, { duration: 100 });
+      },
+      onStart: () => {
+        cancelAnimation(scale);
+        scale.value = withTiming(1.5, { duration: 100 });
+      },
+    },
+    [handleReaction, selected, setOverlay, type],
+  );
+
+  useAnimatedReaction(
+    () => {
+      if (showScreen.value > 0.8 && hasShown.value === 0) {
+        return 1;
+      }
+      return 0;
+    },
+    (result) => {
+      if (hasShown.value === 0 && result !== 0) {
+        hasShown.value = 1;
+        animationScale.value = withSequence(
+          withDelay(60 * (numberOfReactions - (index + 1)), withTiming(0.1, { duration: 50 })),
+          withTiming(1.5, { duration: 250 }),
+          withTiming(1, { duration: 250 }),
+        );
+      }
+    },
+    [index, numberOfReactions],
+  );
+
+  const iconStyle = useAnimatedStyle<ViewStyle>(
+    () => ({
+      transform: [
+        {
+          scale: animationScale.value,
+        },
+        {
+          scale: scale.value,
+        },
+      ],
+    }),
+    [],
+  );
+
+  const selectedStyle = useAnimatedStyle<ViewStyle>(() => ({
+    opacity: selectedOpacity.value,
+  }));
+
+  return (
+    <TapGestureHandler
+      hitSlop={{
+        bottom:
+          Number(reaction.paddingVertical || 0) ||
+          Number(reaction.paddingBottom || 0) ||
+          styles.reactionList.paddingVertical,
+        left:
+          (Number(reaction.paddingHorizontal || 0) ||
+            Number(reaction.paddingLeft || 0) ||
+            styles.notLastReaction.marginRight) / 2,
+        right:
+          (Number(reaction.paddingHorizontal || 0) ||
+            Number(reaction.paddingRight || 0) ||
+            styles.notLastReaction.marginRight) / 2,
+        top:
+          Number(reaction.paddingVertical || 0) ||
+          Number(reaction.paddingTop || 0) ||
+          styles.reactionList.paddingVertical,
+      }}
+      maxDurationMs={3000}
+      onHandlerStateChange={onTap}
+    >
+      <Animated.View
+        style={[index !== numberOfReactions - 1 ? styles.notLastReaction : {}, reaction, iconStyle]}
+      >
+        <Icon height={reactionSize} pathFill={grey} width={reactionSize} {...unSelectedIcon} />
+        <Animated.View style={[styles.selectedIcon, selectedStyle]}>
+          <Icon
+            height={reactionSize}
+            pathFill={accent_blue}
+            width={reactionSize}
+            {...selectedIcon}
+          />
+        </Animated.View>
+      </Animated.View>
+    </TapGestureHandler>
+  );
+};
+
+export type OverlayReactionListPropsWithContext<
+  StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics,
+> = Pick<
+  MessageOverlayData<StreamChatGenerics>,
+  'alignment' | 'handleReaction' | 'messagesContext'
+> &
+  Pick<MessagesContextValue<StreamChatGenerics>, 'supportedReactions'> &
+  Pick<OverlayContextValue, 'setOverlay'> & {
+    messageLayout: Animated.SharedValue<{
+      x: number;
+      y: number;
+    }>;
+    ownReactionTypes: string[];
+    setReactionListHeight: React.Dispatch<React.SetStateAction<number>>;
+    showScreen: Animated.SharedValue<number>;
+    fill?: FillProps['fill'];
+  };
+
+const OverlayReactionListWithContext = <
+  StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics,
+>(
+  props: OverlayReactionListPropsWithContext<StreamChatGenerics>,
+) => {
+  const {
+    alignment,
+    fill,
+    handleReaction,
+    messageLayout,
+    ownReactionTypes,
+    setOverlay,
+    setReactionListHeight,
+    showScreen,
+    supportedReactions = reactionData,
+  } = props;
+
+  const {
+    theme: {
+      colors: { white_snow },
+      overlay: {
+        padding: screenPadding,
+        reactionsList: { radius, reactionList, reactionListBorderRadius },
+      },
+    },
+  } = useTheme();
+
+  const reactionListHeight = useSharedValue(0);
+  const reactionBubbleWidth = useSharedValue(0);
+  const reactionListLayout = useSharedValue({
+    height: 0,
+    width: 0,
+  });
+
+  const { width } = useWindowDimensions();
+
+  const animatedStyle = useAnimatedStyle<ViewStyle>(() => {
+    const borderRadius = reactionListBorderRadius || styles.reactionList.borderRadius;
+    const insideLeftBound =
+      messageLayout.value.x - reactionListLayout.value.width + borderRadius > screenPadding;
+    const insideRightBound = messageLayout.value.x + borderRadius < width - screenPadding;
+    const left = !insideLeftBound
+      ? screenPadding
+      : !insideRightBound
+      ? width - screenPadding - reactionListLayout.value.width
+      : messageLayout.value.x - reactionListLayout.value.width + borderRadius;
+    const top = messageLayout.value.y - reactionListLayout.value.height - radius * 2;
+
+    return {
+      left,
+      top,
+    };
+  });
+
+  const animatedBigCircleProps = useAnimatedProps<CircleProps>(() => ({
+    cx: messageLayout.value.x - radius * 3,
+    cy: messageLayout.value.y - radius * 3,
+    r: radius * 2,
+  }));
+
+  const animateSmallCircleProps = useAnimatedProps<CircleProps>(() => ({
+    cx: messageLayout.value.x - radius,
+    cy: messageLayout.value.y,
+    r: radius,
+  }));
+
+  const showScreenStyle = useAnimatedStyle<ViewStyle>(
+    () => ({
+      transform: [
+        {
+          translateY: interpolate(showScreen.value, [0, 1], [-reactionListHeight.value / 2, 0]),
+        },
+        {
+          translateX: interpolate(
+            showScreen.value,
+            [0, 1],
+            [
+              alignment === 'left' ? -reactionBubbleWidth.value / 2 : reactionBubbleWidth.value / 2,
+              0,
+            ],
+          ),
+        },
+        {
+          scale: interpolate(showScreen.value, [0, 0.8, 1], [0, 0, 1]),
+        },
+      ],
+    }),
+    [alignment],
+  );
+
+  const numberOfReactions = supportedReactions.length;
+
+  return (
+    <View style={StyleSheet.absoluteFill} testID='overlay-reaction-list'>
+      <Animated.View
+        onLayout={({ nativeEvent: { layout } }) => {
+          reactionBubbleWidth.value = layout.width;
+        }}
+        style={showScreenStyle}
+      >
+        <Svg>
+          <AnimatedCircle animatedProps={animatedBigCircleProps} fill={fill || white_snow} />
+          <AnimatedCircle animatedProps={animateSmallCircleProps} fill={fill || white_snow} />
+        </Svg>
+        <Animated.View
+          onLayout={({
+            nativeEvent: {
+              layout: { height, width: layoutWidth },
+            },
+          }) => {
+            reactionListLayout.value = { height, width: layoutWidth };
+            reactionListHeight.value = height;
+            setReactionListHeight(height);
+          }}
+          style={[
+            styles.reactionList,
+            { backgroundColor: white_snow },
+            animatedStyle,
+            reactionList,
+          ]}
+        >
+          {supportedReactions?.map(({ Icon, type }, index) => (
+            <ReactionButton<StreamChatGenerics>
+              handleReaction={handleReaction}
+              Icon={Icon}
+              index={index}
+              key={`${type}_${index}`}
+              numberOfReactions={numberOfReactions}
+              ownReactionTypes={ownReactionTypes}
+              setOverlay={setOverlay}
+              showScreen={showScreen}
+              type={type}
+            />
+          ))}
+        </Animated.View>
+      </Animated.View>
+    </View>
+  );
+};
+
+const areEqual = <StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics>(
+  prevProps: OverlayReactionListPropsWithContext<StreamChatGenerics>,
+  nextProps: OverlayReactionListPropsWithContext<StreamChatGenerics>,
+) => {
+  const { alignment: prevAlignment, ownReactionTypes: prevOwnReactionTypes } = prevProps;
+  const { alignment: nextAlignment, ownReactionTypes: nextOwnReactionTypes } = nextProps;
+
+  const alignmentEqual = prevAlignment === nextAlignment;
+  if (!alignmentEqual) return false;
+
+  const ownReactionTypesEqual = prevOwnReactionTypes.length === nextOwnReactionTypes.length;
+  if (!ownReactionTypesEqual) return false;
+
+  return true;
+};
+
+const MemoizedOverlayReactionList = React.memo(
+  OverlayReactionListWithContext,
+  areEqual,
+) as typeof OverlayReactionListWithContext;
+
+export type OverlayReactionListProps<
+  StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics,
+> = Omit<
+  OverlayReactionListPropsWithContext<StreamChatGenerics>,
+  'setOverlay' | 'supportedReactions'
+> &
+  Partial<
+    Pick<
+      OverlayReactionListPropsWithContext<StreamChatGenerics>,
+      'setOverlay' | 'supportedReactions'
+    >
+  >;
+
+/**
+ * OverlayReactionList - A high level component which implements all the logic required for a message overlay reaction list
+ */
+export const OverlayReactionList = <
+  StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics,
+>(
+  props: OverlayReactionListProps<StreamChatGenerics>,
+) => {
+  const { data } = useMessageOverlayContext<StreamChatGenerics>();
+  const { supportedReactions } = useMessagesContext<StreamChatGenerics>();
+  const { setOverlay } = useOverlayContext();
+
+  return (
+    <MemoizedOverlayReactionList
+      {...(data || {})}
+      {...{ setOverlay, supportedReactions }}
+      {...props}
+    />
+  );
+};
+
+OverlayReactionList.displayName = 'OverlayReactionList{overlay{reactionList}}';

package/src/components/MessageOverlay/OverlayReactions.tsx

@@ -0,0 +1,250 @@
+import React, { useMemo } from 'react';
+import { StyleSheet, Text, useWindowDimensions, View, ViewStyle } from 'react-native';
+import { FlatList } from 'react-native-gesture-handler';
+import Animated, { interpolate, useAnimatedStyle, useSharedValue } from 'react-native-reanimated';
+
+import { ReactionSortBase } from 'stream-chat';
+
+import { useFetchReactions } from './hooks/useFetchReactions';
+
+import { OverlayReactionsItem } from './OverlayReactionsItem';
+
+import type { Alignment } from '../../contexts/messageContext/MessageContext';
+import type { MessageOverlayContextValue } from '../../contexts/messageOverlayContext/MessageOverlayContext';
+import { useTheme } from '../../contexts/themeContext/ThemeContext';
+import {
+  LOLReaction,
+  LoveReaction,
+  ThumbsDownReaction,
+  ThumbsUpReaction,
+  WutReaction,
+} from '../../icons';
+
+import type { DefaultStreamChatGenerics } from '../../types/types';
+import type { ReactionData } from '../../utils/utils';
+
+const styles = StyleSheet.create({
+  avatarContainer: {
+    padding: 8,
+  },
+  container: {
+    alignItems: 'center',
+    borderRadius: 16,
+    marginTop: 8,
+    width: '100%',
+  },
+  flatListContainer: {
+    paddingHorizontal: 12,
+    paddingVertical: 8,
+  },
+  flatListContentContainer: {
+    alignItems: 'center',
+    paddingBottom: 12,
+  },
+  title: {
+    fontSize: 16,
+    fontWeight: '700',
+    paddingTop: 16,
+  },
+  unseenItemContainer: {
+    opacity: 0,
+    position: 'absolute',
+  },
+});
+
+const reactionData: ReactionData[] = [
+  {
+    Icon: LoveReaction,
+    type: 'love',
+  },
+  {
+    Icon: ThumbsUpReaction,
+    type: 'like',
+  },
+  {
+    Icon: ThumbsDownReaction,
+    type: 'sad',
+  },
+  {
+    Icon: LOLReaction,
+    type: 'haha',
+  },
+  {
+    Icon: WutReaction,
+    type: 'wow',
+  },
+];
+
+export type Reaction = {
+  alignment: Alignment;
+  id: string;
+  name: string;
+  type: string;
+  image?: string;
+};
+
+export type OverlayReactionsProps<
+  StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics,
+> = Pick<MessageOverlayContextValue<StreamChatGenerics>, 'OverlayReactionsAvatar'> & {
+  showScreen: Animated.SharedValue<number>;
+  title: string;
+  alignment?: Alignment;
+  messageId?: string;
+  reactions?: Reaction[];
+  supportedReactions?: ReactionData[];
+};
+
+const sort: ReactionSortBase = {
+  created_at: -1,
+};
+
+/**
+ * OverlayReactions - A high level component which implements all the logic required for message overlay reactions
+ */
+export const OverlayReactions = (props: OverlayReactionsProps) => {
+  const [itemHeight, setItemHeight] = React.useState(0);
+  const {
+    alignment: overlayAlignment,
+    messageId,
+    OverlayReactionsAvatar,
+    reactions: propReactions,
+    showScreen,
+    supportedReactions = reactionData,
+    title,
+  } = props;
+  const layoutHeight = useSharedValue(0);
+  const layoutWidth = useSharedValue(0);
+  const {
+    loading,
+    loadNextPage,
+    reactions: fetchedReactions,
+  } = useFetchReactions({
+    messageId,
+    sort,
+  });
+
+  const reactions = useMemo(
+    () =>
+      propReactions ||
+      (fetchedReactions.map((reaction) => ({
+        alignment: 'left',
+        id: reaction.user?.id,
+        image: reaction.user?.image,
+        name: reaction.user?.name,
+        type: reaction.type,
+      })) as Reaction[]),
+    [propReactions, fetchedReactions],
+  );
+
+  const {
+    theme: {
+      colors: { black, white },
+      overlay: {
+        padding: overlayPadding,
+        reactions: { avatarContainer, avatarSize, container, flatListContainer, title: titleStyle },
+      },
+    },
+  } = useTheme();
+
+  const width = useWindowDimensions().width;
+
+  const supportedReactionTypes = supportedReactions.map(
+    (supportedReaction) => supportedReaction.type,
+  );
+
+  const filteredReactions = reactions.filter((reaction) =>
+    supportedReactionTypes.includes(reaction.type),
+  );
+
+  const numColumns = Math.floor(
+    (width -
+      overlayPadding * 2 -
+      ((Number(flatListContainer.paddingHorizontal || 0) ||
+        styles.flatListContainer.paddingHorizontal) +
+        (Number(avatarContainer.padding || 0) || styles.avatarContainer.padding)) *
+        2) /
+      (avatarSize + (Number(avatarContainer.padding || 0) || styles.avatarContainer.padding) * 2),
+  );
+
+  const renderItem = ({ item }: { item: Reaction }) => (
+    <OverlayReactionsItem
+      OverlayReactionsAvatar={OverlayReactionsAvatar}
+      reaction={item}
+      supportedReactions={supportedReactions}
+    />
+  );
+
+  const showScreenStyle = useAnimatedStyle<ViewStyle>(
+    () => ({
+      transform: [
+        {
+          translateY: interpolate(showScreen.value, [0, 1], [-layoutHeight.value / 2, 0]),
+        },
+        {
+          translateX: interpolate(
+            showScreen.value,
+            [0, 1],
+            [overlayAlignment === 'left' ? -layoutWidth.value / 2 : layoutWidth.value / 2, 0],
+          ),
+        },
+        {
+          scale: showScreen.value,
+        },
+      ],
+    }),
+    [overlayAlignment],
+  );
+
+  return (
+    <>
+      <Animated.View
+        onLayout={({ nativeEvent: { layout } }) => {
+          layoutWidth.value = layout.width;
+          layoutHeight.value = layout.height;
+        }}
+        style={[
+          styles.container,
+          { backgroundColor: white, opacity: itemHeight ? 1 : 0 },
+          container,
+          showScreenStyle,
+        ]}
+      >
+        <Text style={[styles.title, { color: black }, titleStyle]}>{title}</Text>
+        {!loading && (
+          <FlatList
+            contentContainerStyle={styles.flatListContentContainer}
+            data={filteredReactions}
+            key={numColumns}
+            keyExtractor={({ id, name }, index) => `${name}${id}_${index}`}
+            numColumns={numColumns}
+            onEndReached={loadNextPage}
+            renderItem={renderItem}
+            scrollEnabled={filteredReactions.length / numColumns > 1}
+            style={[
+              styles.flatListContainer,
+              flatListContainer,
+              {
+                // we show the item height plus a little extra to tease for scrolling if there are more than one row
+                maxHeight:
+                  itemHeight + (filteredReactions.length / numColumns > 1 ? itemHeight / 4 : 8),
+              },
+            ]}
+          />
+        )}
+        {/* The below view is unseen by the user, we use it to compute the height that the item must be */}
+        {!loading && (
+          <View
+            onLayout={({ nativeEvent: { layout } }) => {
+              setItemHeight(layout.height);
+            }}
+            style={[styles.unseenItemContainer, styles.flatListContentContainer]}
+          >
+            {renderItem({ item: filteredReactions[0] })}
+          </View>
+        )}
+      </Animated.View>
+    </>
+  );
+};
+
+OverlayReactions.displayName = 'OverlayReactions{overlay{reactions}}';