stream-chat-react-native-core/lib/module/components/MessageMenu/MessageReactionPicker.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.MessageReactionPickerList = exports.MessageReactionPicker = exports.EmojiViewerButton = 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 _EmojiPickerList = require("./EmojiPickerList");
var _useMessageOwnReactions = require("./hooks/useMessageOwnReactions");
var _ReactionButton = require("./ReactionButton");
var _ComponentsContext = require("../../contexts/componentsContext/ComponentsContext");
var _MessagesContext = require("../../contexts/messagesContext/MessagesContext");
var _OwnCapabilitiesContext = require("../../contexts/ownCapabilitiesContext/OwnCapabilitiesContext");
var _ThemeContext = require("../../contexts/themeContext/ThemeContext");
var _hooks = require("../../hooks");
var _native = require("../../native");
var _stateStore = require("../../state-store");
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/MessageReactionPicker.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 keyExtractor = item => item.type;
var renderItem = ({
  index,
  item
}) => (0, _jsxRuntime.jsx)(_ReactionButton.ReactionButton, {
  Icon: item.Icon,
  onPress: item.onSelectReaction,
  selected: item.ownReactionTypes.includes(item.type),
  type: item.type
}, `${item.type}_${index}`);
var MessageReactionPickerList = ({
  onSelectReaction
}) => {
  var ownReactionTypes = (0, _useMessageOwnReactions.useMessageOwnReactions)();
  var _useMessagesContext = (0, _MessagesContext.useMessagesContext)(),
    supportedReactions = _useMessagesContext.supportedReactions;
  var _useTheme = (0, _ThemeContext.useTheme)(),
    contentContainer = _useTheme.theme.messageMenu.reactionPicker.contentContainer;
  var styles = useStyles();
  var reactions = (0, _react.useMemo)(() => supportedReactions?.filter(reaction => reaction.isMain)?.map(reaction => ({
    ...reaction,
    onSelectReaction,
    ownReactionTypes
  })) ?? [], [onSelectReaction, ownReactionTypes, supportedReactions]);
  return (0, _jsxRuntime.jsx)(_reactNativeGestureHandler.FlatList, {
    contentContainerStyle: [styles.reactionListContent, contentContainer],
    data: reactions,
    horizontal: true,
    keyExtractor: keyExtractor,
    renderItem: renderItem
  });
};
exports.MessageReactionPickerList = MessageReactionPickerList;
var EmojiViewerButton = ({
  onSelectReaction
}) => {
  var styles = useStyles();
  var _React$useState = _react.default.useState(false),
    _React$useState2 = (0, _slicedToArray2.default)(_React$useState, 2),
    emojiViewerOpened = _React$useState2[0],
    setEmojiViewerOpened = _React$useState2[1];
  var _useComponentsContext = (0, _ComponentsContext.useComponentsContext)(),
    icons = _useComponentsContext.icons;
  var _useTheme2 = (0, _ThemeContext.useTheme)(),
    emojiViewerButton = _useTheme2.theme.messageMenu.reactionPicker.emojiViewerButton;
  var handleSelectReaction = (0, _hooks.useStableCallback)(type => {
    setEmojiViewerOpened(false);
    onSelectReaction(type);
  });
  var onOpenEmojiViewer = (0, _hooks.useStableCallback)(() => {
    _native.NativeHandlers.triggerHaptic('impactLight');
    setEmojiViewerOpened(true);
  });
  var closeModal = (0, _hooks.useStableCallback)(() => setEmojiViewerOpened(false));
  return (0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
    children: [(0, _jsxRuntime.jsx)(_reactNative.View, {
      style: [styles.emojiViewerButton, emojiViewerButton],
      children: (0, _jsxRuntime.jsx)(_ui.Button, {
        accessibilityLabelKey: "a11y/Open more reactions",
        variant: "secondary",
        type: "outline",
        size: "sm",
        iconOnly: true,
        LeadingIcon: icons.Plus,
        onPress: onOpenEmojiViewer,
        testID: "more-reactions-button"
      })
    }), emojiViewerOpened ? (0, _jsxRuntime.jsx)(_UIComponents.BottomSheetModal, {
      height: 424,
      lazy: true,
      onClose: closeModal,
      visible: true,
      children: (0, _jsxRuntime.jsx)(_EmojiPickerList.EmojiPickerList, {
        onSelectReaction: handleSelectReaction
      })
    }) : null]
  });
};
exports.EmojiViewerButton = EmojiViewerButton;
var MessageReactionPicker = props => {
  var dismissOverlay = props.dismissOverlay,
    handleReaction = props.handleReaction;
  var _useTheme3 = (0, _ThemeContext.useTheme)(),
    container = _useTheme3.theme.messageMenu.reactionPicker.container;
  var styles = useStyles();
  var own_capabilities = (0, _OwnCapabilitiesContext.useOwnCapabilitiesContext)();
  var onSelectReaction = (0, _hooks.useStableCallback)(type => {
    _native.NativeHandlers.triggerHaptic('impactLight');
    dismissOverlay();
    if (handleReaction) {
      (0, _stateStore.scheduleActionOnClose)(() => handleReaction(type));
    }
  });
  if (!own_capabilities.sendReaction) {
    return null;
  }
  return (0, _jsxRuntime.jsxs)(_reactNative.View, {
    accessibilityLabel: "Reaction Selector on long pressing message",
    accessibilityRole: "menu",
    style: [styles.container, container],
    children: [(0, _jsxRuntime.jsx)(MessageReactionPickerList, {
      onSelectReaction: onSelectReaction
    }), (0, _jsxRuntime.jsx)(EmojiViewerButton, {
      onSelectReaction: onSelectReaction
    })]
  });
};
exports.MessageReactionPicker = MessageReactionPicker;
var useStyles = () => {
  var _useTheme4 = (0, _ThemeContext.useTheme)(),
    semantics = _useTheme4.theme.semantics;
  var scheme = (0, _reactNative.useColorScheme)();
  var isDark = scheme === 'dark';
  return (0, _react.useMemo)(() => _reactNative.StyleSheet.create({
    container: {
      flexDirection: 'row',
      alignSelf: 'stretch',
      borderRadius: _theme.primitives.radius4xl,
      marginVertical: 8,
      overflow: 'visible',
      ...(isDark ? _theme.primitives.darkElevation3 : _theme.primitives.lightElevation3),
      backgroundColor: semantics.backgroundCoreElevation2
    },
    reactionListContent: {
      flexGrow: 1,
      justifyContent: 'space-around',
      gap: _theme.primitives.spacingXxxs,
      paddingVertical: _theme.primitives.spacingXxs,
      paddingLeft: _theme.primitives.spacingXxs
    },
    emojiViewerButton: {
      alignItems: 'center',
      justifyContent: 'center',
      paddingRight: _theme.primitives.spacingXs,
      paddingLeft: _theme.primitives.spacingXs
    }
  }), [isDark, semantics.backgroundCoreElevation2]);
};
//# sourceMappingURL=MessageReactionPicker.js.map