@sendbird/uikit-react-native/lib/commonjs/components/ReactionBottomSheets/ReactionListBottomSheet.js

Sendbird UIKit for React Native: A feature-rich and customizable chat UI kit with messaging, channel management, and user authentication.

"use strict";

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.default = void 0;
var _react = _interopRequireWildcard(require("react"));
var _reactNative = require("react-native");
var _uikitReactNativeFoundation = require("@sendbird/uikit-react-native-foundation");
var _uikitUtils = require("@sendbird/uikit-utils");
var _constants = require("../../constants");
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 (const 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); }
const ReactionEmojiPressable = ({
  emojiKey,
  url,
  message,
  channel,
  currentUserId,
  selectedBackground,
  enabledBackground,
  onClose
}) => {
  var _message$reactions;
  const [pressed, setPressed] = (0, _react.useState)(false);
  const reactedUserIds = (message === null || message === void 0 || (_message$reactions = message.reactions) === null || _message$reactions === void 0 || (_message$reactions = _message$reactions.find(it => it.key === emojiKey)) === null || _message$reactions === void 0 ? void 0 : _message$reactions.userIds) ?? [];
  const idx = reactedUserIds.indexOf(currentUserId ?? _constants.UNKNOWN_USER_ID);
  const reacted = idx > -1;
  return /*#__PURE__*/_react.default.createElement(_reactNative.Pressable, {
    onPress: async () => {
      if (message && channel) {
        const action = (msg, key) => {
          return reacted ? channel.deleteReaction(msg, key) : channel.addReaction(msg, key);
        };
        action(message, emojiKey).catch(error => {
          const operation = reacted ? 'remove' : 'add';
          _uikitUtils.Logger.warn(`Failed to ${operation} reaction (emojiKey=${emojiKey})`, error);
        });
      }
      await onClose();
    },
    onPressIn: () => setPressed(true),
    onPressOut: () => setPressed(false),
    style: [styles.button, {
      backgroundColor: reacted || pressed ? selectedBackground : enabledBackground
    }]
  }, /*#__PURE__*/_react.default.createElement(_uikitReactNativeFoundation.Image, {
    source: {
      uri: url
    },
    style: styles.emoji
  }));
};
const NUM_COLUMN = 6;
const ReactionListBottomSheet = ({
  visible,
  onClose,
  onDismiss,
  reactionCtx,
  chatCtx
}) => {
  const {
    width
  } = (0, _reactNative.useWindowDimensions)();
  const safeArea = (0, _uikitUtils.useSafeAreaPadding)(['bottom', 'left', 'right']);
  const {
    colors
  } = (0, _uikitReactNativeFoundation.useUIKitTheme)();
  const {
    currentUser,
    emojiManager
  } = chatCtx;
  const {
    channel,
    message
  } = reactionCtx;
  const color = colors.ui.reaction.default;
  return /*#__PURE__*/_react.default.createElement(_uikitReactNativeFoundation.Modal, {
    type: 'slide',
    visible: Boolean(visible && channel && message),
    onClose: onClose,
    onDismiss: onDismiss,
    backgroundStyle: styles.modal
  }, /*#__PURE__*/_react.default.createElement(_reactNative.View, {
    style: [styles.container, {
      width,
      paddingBottom: safeArea.paddingBottom,
      backgroundColor: colors.ui.dialog.default.none.background,
      paddingStart: safeArea.paddingStart + styles.container.paddingHorizontal,
      paddingEnd: safeArea.paddingEnd + styles.container.paddingHorizontal
    }]
  }, /*#__PURE__*/_react.default.createElement(_reactNative.FlatList, {
    data: emojiManager.allEmoji,
    numColumns: NUM_COLUMN,
    keyExtractor: item => item.key,
    contentContainerStyle: styles.flatlist,
    ItemSeparatorComponent: () => /*#__PURE__*/_react.default.createElement(_reactNative.View, {
      style: {
        height: 16
      }
    }),
    renderItem: ({
      item: {
        key,
        url
      }
    }) => {
      return /*#__PURE__*/_react.default.createElement(_reactNative.View, {
        style: styles.emojiItem
      }, /*#__PURE__*/_react.default.createElement(ReactionEmojiPressable, {
        emojiKey: key,
        url: url,
        message: message,
        channel: channel,
        currentUserId: currentUser === null || currentUser === void 0 ? void 0 : currentUser.userId,
        selectedBackground: color.selected.background,
        enabledBackground: color.enabled.background,
        onClose: onClose
      }));
    }
  })));
};
const styles = (0, _uikitReactNativeFoundation.createStyleSheet)({
  container: {
    overflow: 'hidden',
    borderTopStartRadius: 8,
    borderTopEndRadius: 8,
    paddingTop: 16,
    paddingHorizontal: 18,
    flexDirection: 'row'
  },
  modal: {
    alignItems: 'center',
    justifyContent: 'flex-end'
  },
  flatlist: {
    width: '100%',
    flexDirection: 'column',
    justifyContent: 'space-between'
  },
  emojiItem: {
    width: `${100 / NUM_COLUMN}%`,
    alignItems: 'center'
  },
  button: {
    width: 44,
    height: 44,
    padding: 4,
    borderRadius: 8
  },
  emoji: {
    width: '100%',
    height: '100%'
  }
});
var _default = exports.default = ReactionListBottomSheet;
//# sourceMappingURL=ReactionListBottomSheet.js.map