@livelike/react-native/lib/module/components/LLReactionPicker/LLUserReactionCounts.js

LiveLike React Native package

import React, { useCallback, useMemo, useState } from 'react';
import { StyleSheet, TouchableOpacity, View } from 'react-native';
import { userProfile } from '@livelike/javascript';
import { useStyles, useReactionSpace, useUserReactions, useUserReactionActions, useAnalytics } from '../../hooks';
import { LLReactionPicker } from './LLReactionPicker';
import { LLUserReactionCountDetail } from './LLUserReactionCountDetail';
import { LLText } from '../LLText';
const DEFAULT_REACTIONS_LIMIT = 4;
const DUMMY_USER_REACTION_ID = 'DUMMY_USER_REACTION_ID';
export function LLUserReactionCounts(_ref) {
  let {
    targetGroupId,
    targetId,
    showReactionPicker,
    onReactionItemPress,
    styles: stylesProp,
    MessageReactionPickerComponentStyles,
    UserReactionCountDetailComponentStyles,
    reactionsLimit = DEFAULT_REACTIONS_LIMIT,
    UserReactionCountDetailComponent = LLUserReactionCountDetail,
    MessageReactionPickerComponent = LLReactionPicker
  } = _ref;
  const [showAllReactions, setShowAllReactions] = useState(false);
  const {
    reactionSpace
  } = useReactionSpace({
    targetGroupId
  });
  const reactionSpaceId = reactionSpace === null || reactionSpace === void 0 ? void 0 : reactionSpace.id;
  const {
    userReactions
  } = useUserReactions({
    reactionSpaceId,
    targetId
  });
  const userReactionCountStyles = useStyles({
    componentStylesFn: getRUserReactionCountStyles,
    stylesProp
  });
  const {
    addReaction,
    removeReaction
  } = useUserReactionActions({
    targetGroupId,
    targetId
  });
  const {
    trackEvent
  } = useAnalytics();
  const onReactionItemPressHandler = useCallback(async reactionId => {
    var _userReactions$reacti;
    const selfReactionId = userReactions === null || userReactions === void 0 || (_userReactions$reacti = userReactions[reactionId]) === null || _userReactions$reacti === void 0 ? void 0 : _userReactions$reacti.self_reacted_user_reaction_id;
    const actionArgs = {
      reactionSpaceId: reactionSpace === null || reactionSpace === void 0 ? void 0 : reactionSpace.id,
      userReaction: {
        target_id: targetId,
        reaction_id: reactionId,
        reacted_by_id: userProfile.id,
        id: DUMMY_USER_REACTION_ID
      },
      profileId: userProfile.id
    };
    if (selfReactionId) {
      removeReaction(actionArgs, selfReactionId);
    } else {
      addReaction(actionArgs);
    }
    onReactionItemPress === null || onReactionItemPress === void 0 || onReactionItemPress();
  }, [userReactions, reactionSpaceId, targetId, addReaction, removeReaction]);
  const onReactionPanelOpen = useCallback(() => {
    trackEvent('Reaction Panel Opened', {
      targetId,
      targetGroupId
    });
  }, []);
  const onReactionPanelClose = useCallback(() => {
    trackEvent('Reaction Panel Closed', {
      targetId,
      targetGroupId
    });
  }, [targetId, targetGroupId, trackEvent]);
  const userReactionValues = useMemo(() => Object.values(userReactions), [userReactions]);
  const reactionsRenderer = useMemo(() => limit => userReactionValues.map((reaction, index) => (!limit || index < limit) && reaction.count > 0 && /*#__PURE__*/React.createElement(UserReactionCountDetailComponent, {
    reaction: reaction,
    onPress: onReactionItemPressHandler,
    key: reaction.reaction_id,
    styles: UserReactionCountDetailComponentStyles
  })), [userReactions]);
  const onShowAllReactionCounts = useCallback(() => {
    setShowAllReactions(true);
  }, [setShowAllReactions]);
  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(View, {
    style: userReactionCountStyles.reactionCountsContainer
  }, reactionsRenderer(showAllReactions ? userReactionValues.length : reactionsLimit), !showAllReactions && userReactionValues.length > reactionsLimit && /*#__PURE__*/React.createElement(TouchableOpacity, {
    onPress: onShowAllReactionCounts,
    accessibilityLabel: "More reactions",
    style: userReactionCountStyles.moreReactionsView
  }, /*#__PURE__*/React.createElement(LLText, {
    style: userReactionCountStyles.moreReactionsText
  }, `+${userReactionValues.length - reactionsLimit} more`))), showReactionPicker && /*#__PURE__*/React.createElement(MessageReactionPickerComponent, {
    visible: showReactionPicker,
    onReactionPanelOpen: onReactionPanelOpen,
    onReactionPanelClose: onReactionPanelClose,
    reactionSpaceId: reactionSpace === null || reactionSpace === void 0 ? void 0 : reactionSpace.id,
    onPress: onReactionItemPressHandler,
    styles: MessageReactionPickerComponentStyles
  }));
}
const getRUserReactionCountStyles = _ref2 => {
  let {
    theme
  } = _ref2;
  return StyleSheet.create({
    reactionCountsContainer: {
      flexDirection: 'row',
      flexWrap: 'wrap',
      marginHorizontal: 3,
      flex: 1
    },
    moreReactionsView: {
      flexDirection: 'row',
      alignItems: 'center',
      backgroundColor: theme.popoverBackground,
      marginHorizontal: 3,
      marginBottom: 4,
      paddingHorizontal: 5,
      paddingVertical: 2,
      borderRadius: 4
    },
    moreReactionsText: {
      color: theme.text,
      fontSize: 11,
      lineHeight: 22,
      fontWeight: 'bold'
    }
  });
};
//# sourceMappingURL=LLUserReactionCounts.js.map