@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.
316 lines (315 loc) • 12.4 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 _uikitUtils = require("@sendbird/uikit-utils");
var _ThreadParentMessageRenderer = _interopRequireDefault(require("../../../components/ThreadParentMessageRenderer"));
var _useContext = require("../../../hooks/useContext");
var _SBUUtils = _interopRequireDefault(require("../../../libs/SBUUtils"));
var _moduleContext = require("../module/moduleContext");
var _ReactionAddons = require("./../../../components/ReactionAddons");
function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
const GroupChannelThreadParentMessageInfo = props => {
var _parentMessage$sender, _parentMessage$thread;
const {
channel,
parentMessage,
setMessageToEdit
} = (0, _react.useContext)(_moduleContext.GroupChannelThreadContexts.Fragment);
const {
STRINGS
} = (0, _useContext.useLocalization)();
const {
colors
} = (0, _uikitReactNativeFoundation.useUIKitTheme)();
const {
sbOptions
} = (0, _useContext.useSendbirdChat)();
const nickName = ((_parentMessage$sender = parentMessage.sender) === null || _parentMessage$sender === void 0 ? void 0 : _parentMessage$sender.nickname) || STRINGS.LABELS.USER_NO_NAME;
const messageTimestamp = STRINGS.GROUP_CHANNEL_THREAD.PARENT_MESSAGE_TIME(parentMessage);
const replyCountText = STRINGS.GROUP_CHANNEL_THREAD.REPLY_COUNT(((_parentMessage$thread = parentMessage.threadInfo) === null || _parentMessage$thread === void 0 ? void 0 : _parentMessage$thread.replyCount) || 0);
const createMessagePressActions = useCreateMessagePressActions({
channel: props.channel,
currentUserId: props.currentUserId,
onDeleteMessage: props.onDeleteMessage,
onPressMediaMessage: props.onPressMediaMessage,
onEditMessage: setMessageToEdit
});
const {
onPress,
onLongPress,
bottomSheetItem
} = createMessagePressActions({
message: parentMessage
});
const renderMessageInfoAndMenu = () => {
var _parentMessage$sender2;
return /*#__PURE__*/_react.default.createElement(_uikitReactNativeFoundation.Box, {
style: styles.infoAndMenuContainer
}, /*#__PURE__*/_react.default.createElement(_uikitReactNativeFoundation.Avatar, {
size: 34,
uri: (_parentMessage$sender2 = parentMessage.sender) === null || _parentMessage$sender2 === void 0 ? void 0 : _parentMessage$sender2.profileUrl
}), /*#__PURE__*/_react.default.createElement(_uikitReactNativeFoundation.Box, {
style: styles.userNickAndTimeContainer,
alignItems: 'flex-start'
}, /*#__PURE__*/_react.default.createElement(_uikitReactNativeFoundation.Text, {
h2: true,
color: colors.onBackground01,
numberOfLines: 1,
style: styles.userNickname
}, nickName), /*#__PURE__*/_react.default.createElement(_uikitReactNativeFoundation.Text, {
caption2: true,
color: colors.onBackground03,
style: styles.messageTime
}, messageTimestamp)), /*#__PURE__*/_react.default.createElement(_reactNative.TouchableOpacity, {
activeOpacity: 0.7,
onPress: bottomSheetItem ? onLongPress : undefined
}, /*#__PURE__*/_react.default.createElement(_uikitReactNativeFoundation.Icon, {
icon: 'more',
color: colors.onBackground02
})));
};
const renderReplyCount = replyCountText => {
if (replyCountText) {
return /*#__PURE__*/_react.default.createElement(_uikitReactNativeFoundation.Box, {
style: styles.replyContainer,
alignItems: 'flex-start'
}, /*#__PURE__*/_react.default.createElement(_uikitReactNativeFoundation.Text, {
caption3: true,
color: colors.onBackground03,
style: styles.replyText,
numberOfLines: 1
}, replyCountText), /*#__PURE__*/_react.default.createElement(_uikitReactNativeFoundation.Divider, null));
} else {
return null;
}
};
const renderReactionAddons = () => {
const configs = sbOptions.uikitWithAppInfo.groupChannel.channel;
if ((0, _uikitUtils.shouldRenderReaction)(channel, channel.isSuper ? configs.enableReactionsSupergroup : configs.enableReactions)) {
return /*#__PURE__*/_react.default.createElement(_reactNative.View, {
style: styles.reactionButtonContainer
}, /*#__PURE__*/_react.default.createElement(_ReactionAddons.ReactionAddons.Message, {
channel: props.channel,
message: parentMessage,
reactionAddonType: 'thread_parent_message'
}));
} else {
return null;
}
};
const messageProps = {
parentMessage,
onPress,
onLongPress
};
return /*#__PURE__*/_react.default.createElement(_reactNative.View, null, /*#__PURE__*/_react.default.createElement(_reactNative.View, {
style: styles.container
}, renderMessageInfoAndMenu()), /*#__PURE__*/_react.default.createElement(_reactNative.View, {
style: styles.messageContainer
}, /*#__PURE__*/_react.default.createElement(_ThreadParentMessageRenderer.default, messageProps)), renderReactionAddons(), /*#__PURE__*/_react.default.createElement(_uikitReactNativeFoundation.Divider, null), renderReplyCount(replyCountText));
};
const styles = (0, _uikitReactNativeFoundation.createStyleSheet)({
container: {
flexDirection: 'column'
},
infoAndMenuContainer: {
flexDirection: 'row',
height: 50,
padding: 16,
paddingBottom: 0
},
userNickAndTimeContainer: {
flexDirection: 'column',
flex: 1,
marginStart: 8
},
userNickname: {
marginBottom: 2
},
messageTime: {
marginTop: 2
},
contextMenuButton: {
width: 34,
height: 34,
justifyContent: 'flex-end'
},
messageContainer: {
paddingHorizontal: 16,
paddingVertical: 8
},
reactionButtonContainer: {
paddingStart: 16,
marginBottom: 16
},
replyContainer: {
flexDirection: 'column'
},
replyText: {
justifyContent: 'center',
paddingHorizontal: 16,
paddingVertical: 12
}
});
const useCreateMessagePressActions = ({
channel,
currentUserId,
onDeleteMessage,
onPressMediaMessage,
onEditMessage
}) => {
const handlers = (0, _useContext.useSBUHandlers)();
const {
STRINGS
} = (0, _useContext.useLocalization)();
const toast = (0, _uikitReactNativeFoundation.useToast)();
const {
openSheet
} = (0, _uikitReactNativeFoundation.useBottomSheet)();
const {
alert
} = (0, _uikitReactNativeFoundation.useAlert)();
const {
clipboardService,
fileService
} = (0, _useContext.usePlatformService)();
const {
sbOptions
} = (0, _useContext.useSendbirdChat)();
const onDeleteFailure = error => {
toast.show(STRINGS.TOAST.DELETE_MSG_ERROR, 'error');
_uikitUtils.Logger.error(STRINGS.TOAST.DELETE_MSG_ERROR, error);
};
const onCopyText = message => {
if (message.isUserMessage()) {
clipboardService.setString(message.message || '');
toast.show(STRINGS.TOAST.COPY_OK, 'success');
}
};
const onDownloadFile = message => {
if (message.isFileMessage()) {
if ((0, _uikitUtils.toMegabyte)(message.size) > 4) {
toast.show(STRINGS.TOAST.DOWNLOAD_START, 'success');
}
fileService.save({
fileUrl: message.url,
fileName: message.name,
fileType: message.type
}).then(response => {
toast.show(STRINGS.TOAST.DOWNLOAD_OK, 'success');
_uikitUtils.Logger.log('File saved to', response);
}).catch(err => {
toast.show(STRINGS.TOAST.DOWNLOAD_ERROR, 'error');
_uikitUtils.Logger.log('File save failure', err);
});
}
};
const onOpenFile = message => {
if (message.isFileMessage()) {
const fileType = (0, _uikitUtils.getFileType)(message.type || (0, _uikitUtils.getFileExtension)(message.name));
if (['image', 'video', 'audio'].includes(fileType)) {
var _handlers$onOpenFileU;
onPressMediaMessage === null || onPressMediaMessage === void 0 || onPressMediaMessage(message, () => onDeleteMessage(message), (0, _uikitUtils.getAvailableUriFromFileMessage)(message));
(_handlers$onOpenFileU = handlers.onOpenFileURL) === null || _handlers$onOpenFileU === void 0 || _handlers$onOpenFileU.call(handlers, message.url);
} else {
const openFile = handlers.onOpenFileURL ?? _SBUUtils.default.openURL;
openFile(message.url);
}
}
};
const alertForMessageDelete = message => {
alert({
title: STRINGS.LABELS.CHANNEL_MESSAGE_DELETE_CONFIRM_TITLE,
buttons: [{
text: STRINGS.LABELS.CHANNEL_MESSAGE_DELETE_CONFIRM_CANCEL
}, {
text: STRINGS.LABELS.CHANNEL_MESSAGE_DELETE_CONFIRM_OK,
style: 'destructive',
onPress: () => {
onDeleteMessage(message).catch(onDeleteFailure);
}
}]
});
};
return ({
message
}) => {
if (!message.isUserMessage() && !message.isFileMessage()) return {};
const sheetItems = [];
const menu = {
copy: message => ({
icon: 'copy',
title: STRINGS.LABELS.CHANNEL_MESSAGE_COPY,
onPress: () => onCopyText(message)
}),
edit: message => ({
icon: 'edit',
title: STRINGS.LABELS.CHANNEL_MESSAGE_EDIT,
onPress: () => onEditMessage === null || onEditMessage === void 0 ? void 0 : onEditMessage(message)
}),
delete: message => ({
disabled: message.threadInfo ? message.threadInfo.replyCount > 0 : undefined,
icon: 'delete',
title: STRINGS.LABELS.CHANNEL_MESSAGE_DELETE,
onPress: () => alertForMessageDelete(message)
}),
download: message => ({
icon: 'download',
title: STRINGS.LABELS.CHANNEL_MESSAGE_SAVE,
onPress: () => onDownloadFile(message)
})
};
if (message.isUserMessage()) {
sheetItems.push(menu.copy(message));
if (!channel.isEphemeral) {
if ((0, _uikitUtils.isMyMessage)(message, currentUserId) && message.sendingStatus === 'succeeded') {
sheetItems.push(menu.edit(message));
sheetItems.push(menu.delete(message));
}
}
}
if (message.isFileMessage()) {
if (!(0, _uikitUtils.isVoiceMessage)(message)) {
sheetItems.push(menu.download(message));
}
if (!channel.isEphemeral) {
if ((0, _uikitUtils.isMyMessage)(message, currentUserId) && message.sendingStatus === 'succeeded') {
sheetItems.push(menu.delete(message));
}
}
}
const configs = sbOptions.uikitWithAppInfo.groupChannel.channel;
const bottomSheetItem = {
sheetItems,
HeaderComponent: (0, _uikitUtils.shouldRenderReaction)(channel, channel.isGroupChannel() && (channel.isSuper ? configs.enableReactionsSupergroup : configs.enableReactions)) ? ({
onClose
}) => /*#__PURE__*/_react.default.createElement(_ReactionAddons.ReactionAddons.BottomSheet, {
message: message,
channel: channel,
onClose: onClose
}) : undefined
};
if (message.isFileMessage()) {
return {
onPress: () => onOpenFile(message),
onLongPress: () => openSheet(bottomSheetItem),
bottomSheetItem
};
} else {
return {
onPress: undefined,
onLongPress: () => openSheet(bottomSheetItem),
bottomSheetItem
};
}
};
};
var _default = exports.default = /*#__PURE__*/_react.default.memo(GroupChannelThreadParentMessageInfo);
//# sourceMappingURL=GroupChannelThreadParentMessageInfo.js.map