@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.
315 lines (314 loc) • 12.6 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(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
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(_reactNative.View, {
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(_reactNative.View, {
style: styles.userNickAndTimeContainer
}, /*#__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(_reactNative.View, {
style: styles.replyContainer
}, /*#__PURE__*/_react.default.createElement(_uikitReactNativeFoundation.Text, {
caption3: true,
color: colors.onBackground03,
style: styles.replyText
}, 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,
marginLeft: 8
},
userNickname: {
marginBottom: 2
},
messageTime: {
marginTop: 2
},
contextMenuButton: {
width: 34,
height: 34,
justifyContent: 'flex-end'
},
messageContainer: {
paddingHorizontal: 16,
paddingVertical: 8
},
reactionButtonContainer: {
paddingLeft: 16,
marginBottom: 16
},
replyContainer: {
flexDirection: 'column'
},
replyText: {
justifyContent: 'center',
paddingHorizontal: 16,
paddingVertical: 12
}
});
const useCreateMessagePressActions = _ref => {
let {
channel,
currentUserId,
onDeleteMessage,
onPressMediaMessage,
onEditMessage
} = _ref;
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)) {
onPressMediaMessage === null || onPressMediaMessage === void 0 ? void 0 : onPressMediaMessage(message, () => onDeleteMessage === null || onDeleteMessage === void 0 ? void 0 : onDeleteMessage(message), (0, _uikitUtils.getAvailableUriFromFileMessage)(message));
} else {
_SBUUtils.default.openURL(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 === null || onDeleteMessage === void 0 ? void 0 : onDeleteMessage(message).catch(onDeleteFailure);
}
}]
});
};
return _ref2 => {
let {
message
} = _ref2;
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)) ? _ref3 => {
let {
onClose
} = _ref3;
return /*#__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 = /*#__PURE__*/_react.default.memo(GroupChannelThreadParentMessageInfo);
exports.default = _default;
//# sourceMappingURL=GroupChannelThreadParentMessageInfo.js.map