@sendbird/uikit-react-native
Version:
Sendbird UIKit for React Native: A feature-rich and customizable chat UI kit with messaging, channel management, and user authentication.
154 lines (153 loc) • 5.96 kB
JavaScript
"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 _uikitTools = require("@sendbird/uikit-tools");
var _uikitUtils = require("@sendbird/uikit-utils");
var _constants = require("../../constants");
var _useContext = require("../../hooks/useContext");
var _ReactionRoundedButton = _interopRequireDefault(require("./ReactionRoundedButton"));
function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
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 NUM_COL = 4;
const REACTION_MORE_KEY = 'reaction-more-button';
const createOnPressReaction = (reaction, channel, message, reacted) => {
return () => {
if (reacted) {
return channel.deleteReaction(message, reaction.key);
} else {
return channel.addReaction(message, reaction.key);
}
};
};
const ReactionPressable = ({
reaction,
channel,
message,
source,
onOpenReactionUserList,
index,
style
}) => {
const [pressed, setPressed] = (0, _react.useState)(false);
return /*#__PURE__*/_react.default.createElement(_reactNative.Pressable, {
onPress: createOnPressReaction(reaction, channel, message, reaction.hasCurrentUserReacted),
onLongPress: () => onOpenReactionUserList(index),
delayLongPress: _constants.DEFAULT_LONG_PRESS_DELAY,
onPressIn: () => setPressed(true),
onPressOut: () => setPressed(false)
}, /*#__PURE__*/_react.default.createElement(_ReactionRoundedButton.default, {
source: source,
count: (0, _uikitUtils.getReactionCount)(reaction),
reacted: pressed || reaction.hasCurrentUserReacted,
style: style
}));
};
const ReactionMorePressable = ({
onPress
}) => {
const [pressed, setPressed] = (0, _react.useState)(false);
return /*#__PURE__*/_react.default.createElement(_reactNative.Pressable, {
onPress: onPress,
onPressIn: () => setPressed(true),
onPressOut: () => setPressed(false)
}, /*#__PURE__*/_react.default.createElement(_ReactionRoundedButton.default.More, {
pressed: pressed
}));
};
const createReactionButtons = (channel, message, getIconSource, emojiLimit, onOpenReactionList, onOpenReactionUserList, reactionAddonType) => {
const reactions = message.reactions ?? [];
const buttons = reactions.map((reaction, index) => {
const isNotLastOfRow = index % NUM_COL !== NUM_COL - 1;
const isNotLastOfCol = index < NUM_COL && reactions.length >= NUM_COL;
return /*#__PURE__*/_react.default.createElement(ReactionPressable, {
key: reaction.key,
reaction: reaction,
channel: channel,
message: message,
source: getIconSource(reaction.key),
onOpenReactionUserList: onOpenReactionUserList,
index: index,
style: reactionAddonType === 'default' ? [isNotLastOfRow && styles.marginEnd, isNotLastOfCol && styles.marginBottom] : [styles.marginEnd, styles.marginBottom]
});
});
if (buttons.length < emojiLimit) {
buttons.push(/*#__PURE__*/_react.default.createElement(ReactionMorePressable, {
key: REACTION_MORE_KEY,
onPress: onOpenReactionList
}));
}
return buttons;
};
const MessageReactionAddon = ({
channel,
message,
reactionAddonType = 'default'
}) => {
var _message$reactions;
const {
colors
} = (0, _uikitReactNativeFoundation.useUIKitTheme)();
const {
sdk,
emojiManager
} = (0, _useContext.useSendbirdChat)();
const {
openReactionList,
openReactionUserList
} = (0, _useContext.useReaction)();
const forceUpdate = (0, _uikitTools.useForceUpdate)();
(0, _uikitTools.useGroupChannelHandler)(sdk, {
async onReactionUpdated(_, event) {
if (event.messageId === message.messageId) {
message.applyReactionEvent(event);
forceUpdate();
}
}
});
if (reactionAddonType === 'default' && !((_message$reactions = message.reactions) !== null && _message$reactions !== void 0 && _message$reactions.length)) return null;
const reactionButtons = createReactionButtons(channel, message, reactionKey => {
const emoji = emojiManager.allEmojiMap[reactionKey];
return emojiManager.getEmojiIconSource(emoji);
}, emojiManager.allEmoji.length, () => openReactionList({
channel,
message
}), focusIndex => openReactionUserList({
channel,
message,
focusIndex
}), reactionAddonType);
const containerStyle = reactionAddonType === 'default' ? styles.reactionContainer : styles.reactionThreadParentMessageContainer;
return /*#__PURE__*/_react.default.createElement(_reactNative.Pressable, {
style: [containerStyle, {
backgroundColor: colors.background,
borderColor: colors.ui.reaction.rounded.enabled.background
}]
}, reactionButtons);
};
const styles = (0, _uikitReactNativeFoundation.createStyleSheet)({
reactionContainer: {
alignItems: 'stretch',
flexDirection: 'row',
flexWrap: 'wrap',
padding: 8,
borderRadius: 16,
borderWidth: 1
},
reactionThreadParentMessageContainer: {
flexDirection: 'row',
flexWrap: 'wrap'
},
marginEnd: {
marginEnd: 4.5
},
marginBottom: {
marginBottom: 4
}
});
var _default = exports.default = MessageReactionAddon;
//# sourceMappingURL=MessageReactionAddon.js.map