stream-chat-react-native-core/lib/commonjs/components/MessageMenu/MessageUserReactions.js

The official React Native and Expo components for Stream Chat, a service for building chat applications

var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.MessageUserReactionsSelectorItem = exports.MessageUserReactions = void 0;
var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
var _react = _interopRequireWildcard(require("react"));
var _reactNative = require("react-native");
var _reactNativeGestureHandler = require("react-native-gesture-handler");
var _reactNativeReanimated = _interopRequireWildcard(require("react-native-reanimated"));
var _EmojiPickerList = require("./EmojiPickerList");
var _useFetchReactions2 = require("./hooks/useFetchReactions");
var _ReactionButton = require("./ReactionButton");
var _contexts = require("../../contexts");
var _ComponentsContext = require("../../contexts/componentsContext/ComponentsContext");
var _MessageContext = require("../../contexts/messageContext/MessageContext");
var _MessagesContext = require("../../contexts/messagesContext/MessagesContext");
var _ThemeContext = require("../../contexts/themeContext/ThemeContext");
var _TranslationContext = require("../../contexts/translationContext/TranslationContext");
var _hooks = require("../../hooks");
var _theme = require("../../theme");
var _ui = require("../ui");
var _UIComponents = require("../UIComponents");
var _jsxRuntime = require("react/jsx-runtime");
var _jsxFileName = "/home/runner/work/stream-chat-react-native/stream-chat-react-native/package/src/components/MessageMenu/MessageUserReactions.tsx";
function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function (e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != typeof e && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (var _t in e) "default" !== _t && {}.hasOwnProperty.call(e, _t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, _t)) && (i.get || i.set) ? o(f, _t, i) : f[_t] = e[_t]); return f; })(e, t); }
var ITEM_WIDTH = 60;
var getItemLayout = (_, index) => ({
  length: ITEM_WIDTH,
  offset: ITEM_WIDTH * index,
  index
});
var sort = {
  created_at: -1
};
var MessageUserReactionsSelectorItem = props => {
  var Icon = props.Icon,
    type = props.type,
    onSelectReaction = props.onSelectReaction,
    selectedReaction = props.selectedReaction,
    count = props.count;
  var SelectorIcon = (0, _react.useCallback)(({
    ...props
  }) => (0, _jsxRuntime.jsx)(Icon, {
    ...props,
    size: 16
  }), [Icon]);
  return (0, _jsxRuntime.jsx)(_ReactionButton.ReactionButton, {
    Icon: SelectorIcon,
    onPress: onSelectReaction,
    selected: selectedReaction === type,
    type: type,
    count: count,
    size: 'sm'
  });
};
exports.MessageUserReactionsSelectorItem = MessageUserReactionsSelectorItem;
var renderSelectorItem = ({
  index,
  item
}) => (0, _jsxRuntime.jsx)(MessageUserReactionsSelectorItem, {
  Icon: item.Icon,
  onSelectReaction: item.onSelectReaction,
  selectedReaction: item.selectedReaction,
  type: item.type,
  count: item.count
}, `${item.type}_${index}`);
var reactionsKeyExtractor = item => `${item.id}-${item.type}`;
var reactionSelectorKeyExtractor = item => item.type;
var MessageUserReactions = props => {
  var styles = useStyles();
  var _useState = (0, _react.useState)(false),
    _useState2 = (0, _slicedToArray2.default)(_useState, 2),
    showMoreReactions = _useState2[0],
    setShowMoreReactions = _useState2[1];
  var message = props.message,
    propReactions = props.reactions,
    propSelectedReaction = props.selectedReaction,
    propSupportedReactions = props.supportedReactions;
  var selectorListRef = (0, _react.useRef)(null);
  var _useBottomSheetContex = (0, _contexts.useBottomSheetContext)(),
    close = _useBottomSheetContex.close;
  var reactionTypes = (0, _react.useMemo)(() => Object.keys(message?.reaction_groups ?? {}), [message?.reaction_groups]);
  var _useState3 = (0, _react.useState)(propSelectedReaction),
    _useState4 = (0, _slicedToArray2.default)(_useState3, 2),
    selectedReaction = _useState4[0],
    setSelectedReaction = _useState4[1];
  var _useMessagesContext = (0, _MessagesContext.useMessagesContext)(),
    contextSupportedReactions = _useMessagesContext.supportedReactions;
  var _useComponentsContext = (0, _ComponentsContext.useComponentsContext)(),
    icons = _useComponentsContext.icons,
    MessageUserReactionsItem = _useComponentsContext.MessageUserReactionsItem;
  var _useMessageContext = (0, _MessageContext.useMessageContext)(),
    handleReaction = _useMessageContext.handleReaction;
  var supportedReactions = propSupportedReactions ?? contextSupportedReactions;
  var onSelectReaction = (0, _hooks.useStableCallback)(reactionType => {
    setSelectedReaction(currentReaction => currentReaction === reactionType ? undefined : reactionType);
  });
  (0, _react.useEffect)(() => {
    if (selectedReaction && reactionTypes.length > 0 && !reactionTypes.includes(selectedReaction)) {
      setSelectedReaction(undefined);
    }
  }, [reactionTypes, selectedReaction]);
  var selectorReactions = (0, _react.useMemo)(() => reactionTypes.reduce((acc, reaction) => {
    var reactionData = supportedReactions?.find(supportedReaction => supportedReaction.type === reaction);
    if (reactionData) {
      acc.push({
        ...reactionData,
        onSelectReaction,
        selectedReaction,
        count: (message?.reaction_counts?.[reactionData.type] ?? 0).toString()
      });
    }
    return acc;
  }, []), [message?.reaction_counts, onSelectReaction, reactionTypes, selectedReaction, supportedReactions]);
  var selectedIndex = (0, _react.useMemo)(() => {
    if (!selectedReaction) {
      return -1;
    }
    return selectorReactions.findIndex(reaction => reaction.type === selectedReaction);
  }, [selectedReaction, selectorReactions]);
  (0, _react.useEffect)(() => {
    if (selectedIndex !== -1 && selectorListRef.current) {
      selectorListRef.current?.scrollToIndex({
        index: selectedIndex,
        animated: true
      });
    }
  }, [selectedIndex]);
  var _useFetchReactions = (0, _useFetchReactions2.useFetchReactions)({
      message,
      reactionType: selectedReaction,
      sort
    }),
    loading = _useFetchReactions.loading,
    loadNextPage = _useFetchReactions.loadNextPage,
    fetchedReactions = _useFetchReactions.reactions;
  var _useTheme = (0, _ThemeContext.useTheme)(),
    _useTheme$theme$messa = _useTheme.theme.messageMenu.userReactions,
    container = _useTheme$theme$messa.container,
    contentContainer = _useTheme$theme$messa.contentContainer,
    flatlistContainer = _useTheme$theme$messa.flatlistContainer,
    reactionSelectorContainer = _useTheme$theme$messa.reactionSelectorContainer,
    reactionsText = _useTheme$theme$messa.reactionsText;
  var _useTranslationContex = (0, _TranslationContext.useTranslationContext)(),
    t = _useTranslationContex.t;
  var totalReactionCount = (0, _react.useMemo)(() => Object.values(message?.reaction_counts ?? {}).reduce((acc, reactionCount) => acc + reactionCount, 0), [message?.reaction_counts]);
  var reactions = (0, _react.useMemo)(() => propReactions || fetchedReactions.map(reaction => ({
    id: reaction.user?.id,
    image: reaction.user?.image,
    name: reaction.user?.name,
    type: reaction.type
  })), [propReactions, fetchedReactions]);
  var renderItem = (0, _react.useCallback)(({
    item
  }) => (0, _jsxRuntime.jsx)(MessageUserReactionsItem, {
    reaction: item,
    supportedReactions: supportedReactions ?? []
  }), [MessageUserReactionsItem, supportedReactions]);
  var handleSelectReaction = (0, _hooks.useStableCallback)(emoji => {
    if (handleReaction) {
      handleReaction(emoji);
    }
    close();
  });
  var onShowMoreReactionsPress = (0, _hooks.useStableCallback)(() => setShowMoreReactions(true));
  var MoreEmojisIcon = (0, _react.useCallback)(props => (0, _jsxRuntime.jsx)(_reactNative.View, {
    style: styles.showMoreReactionsButton,
    children: (0, _jsxRuntime.jsx)(icons.MoreEmojis, {
      ...props
    })
  }), [icons, styles.showMoreReactionsButton]);
  var ShowMoreReactionsButton = (0, _react.useCallback)(() => (0, _jsxRuntime.jsx)(_ui.Button, {
    accessibilityLabel: 'more-reactions-button',
    variant: 'secondary',
    type: 'outline',
    size: 'sm',
    LeadingIcon: MoreEmojisIcon,
    onPress: onShowMoreReactionsPress
  }), [onShowMoreReactionsPress, MoreEmojisIcon]);
  return (0, _jsxRuntime.jsx)(_reactNative.View, {
    accessibilityLabel: "User Reactions on long press message",
    style: [styles.container, container],
    children: showMoreReactions ? (0, _jsxRuntime.jsx)(_reactNativeReanimated.default.View, {
      entering: _reactNativeReanimated.FadeIn.duration(200),
      exiting: _reactNativeReanimated.FadeOut.duration(200),
      children: (0, _jsxRuntime.jsx)(_EmojiPickerList.EmojiPickerList, {
        onSelectReaction: handleSelectReaction,
        renderFullInitially: false
      })
    }, 'emoji-viewer') : (0, _jsxRuntime.jsxs)(_reactNativeReanimated.default.View, {
      exiting: _reactNativeReanimated.FadeOut.duration(200),
      children: [(0, _jsxRuntime.jsx)(_reactNative.Text, {
        style: [styles.reactionsText, reactionsText],
        children: t('{{count}} Reactions', {
          count: totalReactionCount
        })
      }), (0, _jsxRuntime.jsx)(_reactNative.View, {
        style: [styles.reactionSelectorContainer, reactionSelectorContainer],
        children: (0, _jsxRuntime.jsx)(_reactNativeGestureHandler.FlatList, {
          showsHorizontalScrollIndicator: false,
          contentContainerStyle: [styles.contentContainer, contentContainer],
          data: selectorReactions,
          getItemLayout: getItemLayout,
          horizontal: true,
          keyExtractor: reactionSelectorKeyExtractor,
          ListHeaderComponent: ShowMoreReactionsButton,
          renderItem: renderSelectorItem,
          ref: selectorListRef
        })
      }), !loading ? (0, _jsxRuntime.jsx)(_UIComponents.StreamBottomSheetModalFlatList, {
        accessibilityLabel: "reaction-flat-list",
        contentContainerStyle: [styles.flatListContainer, flatlistContainer],
        data: reactions,
        keyExtractor: reactionsKeyExtractor,
        onEndReached: loadNextPage,
        renderItem: renderItem
      }) : null]
    }, 'reaction-details')
  });
};
exports.MessageUserReactions = MessageUserReactions;
var useStyles = () => {
  var _useTheme2 = (0, _ThemeContext.useTheme)(),
    semantics = _useTheme2.theme.semantics;
  return (0, _react.useMemo)(() => _reactNative.StyleSheet.create({
    container: {
      flex: 1
    },
    contentContainer: {
      flexGrow: 1,
      gap: _theme.primitives.spacingXs,
      paddingHorizontal: _theme.primitives.spacingMd,
      paddingVertical: _theme.primitives.spacingSm
    },
    flatListContainer: {
      justifyContent: 'center'
    },
    reactionSelectorContainer: {
      flexDirection: 'row'
    },
    reactionsText: {
      fontSize: _theme.primitives.typographyFontSizeMd,
      fontWeight: _theme.primitives.typographyFontWeightSemiBold,
      color: semantics.textPrimary,
      paddingVertical: _theme.primitives.spacingSm,
      textAlign: 'center'
    },
    showMoreReactionsButton: {
      paddingHorizontal: _theme.primitives.spacingXs
    }
  }), [semantics.textPrimary]);
};
//# sourceMappingURL=MessageUserReactions.js.map