stream-chat-react-native-core
Version:
The official React Native and Expo components for Stream Chat, a service for building chat applications
309 lines • 14.2 kB
JavaScript
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.ReplyWithContext = exports.Reply = exports.MemoizedReply = void 0;
var _react = _interopRequireWildcard(require("react"));
var _reactNative = require("react-native");
var _streamChat = require("stream-chat");
var _ReplyMessageView = require("./ReplyMessageView");
var _useAnnounceOnShow = require("../../a11y/hooks/useAnnounceOnShow");
var _ChatContext = require("../../contexts/chatContext/ChatContext");
var _ComponentsContext = require("../../contexts/componentsContext/ComponentsContext");
var _MessageContext = require("../../contexts/messageContext/MessageContext");
var _useMessageComposer = require("../../contexts/messageInputContext/hooks/useMessageComposer");
var _ThemeContext = require("../../contexts/themeContext/ThemeContext");
var _TranslationContext = require("../../contexts/translationContext/TranslationContext");
var _hooks = require("../../hooks");
var _theme = require("../../theme");
var _types = require("../../types/types");
var _utils = require("../../utils/utils");
var _FileIcon = require("../Attachment/FileIcon");
var _AttachmentRemoveControl = require("../MessageInput/components/AttachmentPreview/AttachmentRemoveControl");
var _VideoPlayIndicator = require("../ui/VideoPlayIndicator");
var _jsxRuntime = require("react/jsx-runtime");
var _jsxFileName = "/home/runner/work/stream-chat-react-native/stream-chat-react-native/package/src/components/Reply/Reply.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 messageComposerStateStoreSelector = state => ({
quotedMessage: state.quotedMessage
});
var ANNOUNCEMENT_TEXT_MAX_LENGTH = 120;
var RightContent = _react.default.memo(props => {
var ImageComponent = props.ImageComponent,
message = props.message;
var attachments = message == null ? void 0 : message.attachments;
var styles = useStyles();
if (!attachments || attachments.length > 1) {
return null;
}
var attachment = attachments == null ? void 0 : attachments[0];
var uri = (attachment == null ? void 0 : attachment.image_url) || (attachment == null ? void 0 : attachment.thumb_url);
if (attachment && ((0, _streamChat.isImageAttachment)(attachment) || attachment.type === _types.FileTypes.Giphy || attachment.type === _types.FileTypes.Imgur)) {
return (0, _jsxRuntime.jsx)(_reactNative.View, {
style: [styles.contentWrapper, styles.contentBorder],
children: (0, _jsxRuntime.jsx)(ImageComponent, {
source: {
uri
},
style: _reactNative.StyleSheet.absoluteFill
})
});
}
if (attachment && (0, _streamChat.isVideoAttachment)(attachment)) {
return (0, _jsxRuntime.jsx)(_reactNative.View, {
style: [styles.contentWrapper, styles.contentBorder],
children: (0, _jsxRuntime.jsxs)(_reactNative.View, {
style: styles.attachmentContainer,
children: [(0, _jsxRuntime.jsx)(_reactNative.Image, {
source: {
uri: attachment.thumb_url
},
style: _reactNative.StyleSheet.absoluteFill
}), (0, _jsxRuntime.jsx)(_VideoPlayIndicator.VideoPlayIndicator, {
size: "sm"
})]
})
});
}
if ((attachment == null ? void 0 : attachment.type) === _types.FileTypes.VoiceRecording) {
return null;
}
if (attachment && (0, _streamChat.isFileAttachment)(attachment)) {
return (0, _jsxRuntime.jsx)(_FileIcon.FileIcon, {
mimeType: attachment.mime_type
});
}
return null;
});
var ReplyWithContext = props => {
var _quotedMessage$user3;
var _useTranslationContex = (0, _TranslationContext.useTranslationContext)(),
t = _useTranslationContex.t;
var isMyMessage = props.isMyMessage,
_props$isParentMessag = props.isParentMessageMine,
isParentMessageMine = _props$isParentMessag === void 0 ? isMyMessage : _props$isParentMessag,
ImageComponent = props.ImageComponent,
messageFromContext = props.message,
mode = props.mode,
onDismiss = props.onDismiss,
quotedMessage = props.quotedMessage,
stylesProp = props.styles;
var _useTheme = (0, _ThemeContext.useTheme)(),
_useTheme$theme$reply = _useTheme.theme.reply,
wrapper = _useTheme$theme$reply.wrapper,
container = _useTheme$theme$reply.container,
leftContainer = _useTheme$theme$reply.leftContainer,
rightContainer = _useTheme$theme$reply.rightContainer,
titleStyle = _useTheme$theme$reply.title,
dismissWrapper = _useTheme$theme$reply.dismissWrapper;
var styles = useStyles({
isMyMessage: isParentMessageMine
});
var title = (0, _react.useMemo)(() => {
var _quotedMessage$user, _quotedMessage$user2;
return mode === 'edit' ? t('Edit Message') : isMyMessage ? t('You') : quotedMessage != null && (_quotedMessage$user = quotedMessage.user) != null && _quotedMessage$user.name ? t('Reply to {{name}}', {
name: quotedMessage == null || (_quotedMessage$user2 = quotedMessage.user) == null ? void 0 : _quotedMessage$user2.name
}) : t('Reply');
}, [mode, isMyMessage, quotedMessage == null || (_quotedMessage$user3 = quotedMessage.user) == null ? void 0 : _quotedMessage$user3.name, t]);
if (!quotedMessage) {
return null;
}
return (0, _jsxRuntime.jsxs)(_reactNative.View, {
accessibilityLabel: title,
accessibilityRole: "text",
style: [!(messageFromContext != null && messageFromContext.quoted_message) ? styles.wrapper : null, wrapper],
children: [(0, _jsxRuntime.jsxs)(_reactNative.View, {
style: [styles.container, container, stylesProp == null ? void 0 : stylesProp.container],
children: [(0, _jsxRuntime.jsxs)(_reactNative.View, {
style: [styles.leftContainer, leftContainer, stylesProp == null ? void 0 : stylesProp.leftContainer],
children: [(0, _jsxRuntime.jsx)(_reactNative.Text, {
numberOfLines: 1,
style: [styles.title, titleStyle, stylesProp == null ? void 0 : stylesProp.title],
children: title
}), (0, _jsxRuntime.jsx)(_ReplyMessageView.ReplyMessageView, {
message: quotedMessage,
isMyMessage: isParentMessageMine
})]
}), (0, _jsxRuntime.jsx)(_reactNative.View, {
style: [styles.rightContainer, rightContainer, stylesProp == null ? void 0 : stylesProp.rightContainer],
children: (0, _jsxRuntime.jsx)(RightContent, {
ImageComponent: ImageComponent,
message: quotedMessage
})
})]
}), onDismiss ? (0, _jsxRuntime.jsx)(_reactNative.View, {
style: [styles.dismissWrapper, dismissWrapper, stylesProp == null ? void 0 : stylesProp.dismissWrapper],
children: (0, _jsxRuntime.jsx)(_AttachmentRemoveControl.AttachmentRemoveControl, {
accessibilityLabelKey: mode === 'edit' ? 'a11y/Remove edit' : 'a11y/Remove reply',
onPress: onDismiss
})
}) : null]
});
};
exports.ReplyWithContext = ReplyWithContext;
var areEqual = (prevProps, nextProps) => {
var prevStyles = prevProps.styles,
prevIsMyMessage = prevProps.isMyMessage,
prevIsParentMessageMine = prevProps.isParentMessageMine,
prevMode = prevProps.mode,
prevQuotedMessage = prevProps.quotedMessage,
prevOnDismiss = prevProps.onDismiss;
var nextStyles = nextProps.styles,
nextIsMyMessage = nextProps.isMyMessage,
nextIsParentMessageMine = nextProps.isParentMessageMine,
nextMode = nextProps.mode,
nextQuotedMessage = nextProps.quotedMessage,
nextOnDismiss = nextProps.onDismiss;
if (prevStyles !== nextStyles) {
return false;
}
var isMyMessageEqual = prevIsMyMessage === nextIsMyMessage;
if (!isMyMessageEqual) {
return false;
}
var isParentMessageMineEqual = prevIsParentMessageMine === nextIsParentMessageMine;
if (!isParentMessageMineEqual) {
return false;
}
var modeEqual = prevMode === nextMode;
if (!modeEqual) {
return false;
}
var onDismissEqual = prevOnDismiss === nextOnDismiss;
if (!onDismissEqual) {
return false;
}
var messageEqual = prevQuotedMessage && nextQuotedMessage && (0, _utils.checkQuotedMessageEquality)(prevQuotedMessage, nextQuotedMessage);
if (!messageEqual) {
return false;
}
return true;
};
var MemoizedReply = exports.MemoizedReply = _react.default.memo(ReplyWithContext, areEqual);
var ReplyComposerAnnouncer = ({
message,
mode
}) => {
var _message$user2;
var _useTranslationContex2 = (0, _TranslationContext.useTranslationContext)(),
t = _useTranslationContex2.t;
var truncatedText = (0, _react.useMemo)(() => {
var _message$text;
var raw = message == null || (_message$text = message.text) == null ? void 0 : _message$text.trim();
if (!raw) return undefined;
return raw.length > ANNOUNCEMENT_TEXT_MAX_LENGTH ? `${raw.slice(0, ANNOUNCEMENT_TEXT_MAX_LENGTH).trimEnd()}…` : raw;
}, [message == null ? void 0 : message.text]);
var announcement = (0, _react.useMemo)(() => {
var _message$user;
if (mode === 'edit') {
return truncatedText ? t('a11y/Editing message: {{text}}', {
text: truncatedText
}) : t('a11y/Editing message');
}
var name = message == null || (_message$user = message.user) == null ? void 0 : _message$user.name;
if (!name) return undefined;
return truncatedText ? t('a11y/Replying to {{user}}: {{text}}', {
text: truncatedText,
user: name
}) : t('a11y/Replying to {{user}}', {
user: name
});
}, [mode, message == null || (_message$user2 = message.user) == null ? void 0 : _message$user2.name, truncatedText, t]);
(0, _useAnnounceOnShow.useAnnounceOnShow)(true, announcement);
return null;
};
var Reply = props => {
var _client$user, _ref, _props$quotedMessage, _props$quotedMessage2;
var _useMessageContext = (0, _MessageContext.useMessageContext)(),
isMyMessageFromContext = _useMessageContext.isMyMessage,
messageFromContext = _useMessageContext.message;
var _useChatContext = (0, _ChatContext.useChatContext)(),
client = _useChatContext.client;
var _useComponentsContext = (0, _ComponentsContext.useComponentsContext)(),
ImageComponent = _useComponentsContext.ImageComponent;
var messageComposer = (0, _useMessageComposer.useMessageComposer)();
var _useStateStore = (0, _hooks.useStateStore)(messageComposer.state, messageComposerStateStoreSelector),
quotedMessageFromComposer = _useStateStore.quotedMessage;
var quotedMessage = messageFromContext ? messageFromContext.quoted_message : quotedMessageFromComposer;
var isMyMessage = ((_client$user = client.user) == null ? void 0 : _client$user.id) === ((_ref = (_props$quotedMessage = props.quotedMessage) != null ? _props$quotedMessage : quotedMessage) == null || (_ref = _ref.user) == null ? void 0 : _ref.id);
var isParentMessageMine = messageFromContext ? !!isMyMessageFromContext : undefined;
var isComposerPreview = !!props.onDismiss;
return (0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
children: [isComposerPreview ? (0, _jsxRuntime.jsx)(ReplyComposerAnnouncer, {
message: (_props$quotedMessage2 = props.quotedMessage) != null ? _props$quotedMessage2 : quotedMessage,
mode: props.mode
}) : null, (0, _jsxRuntime.jsx)(MemoizedReply, {
ImageComponent: ImageComponent,
isMyMessage: isMyMessage,
isParentMessageMine: isParentMessageMine,
message: messageFromContext,
quotedMessage: quotedMessage,
...props
})]
});
};
exports.Reply = Reply;
var useStyles = ({
isMyMessage = false
} = {}) => {
var _useTheme2 = (0, _ThemeContext.useTheme)(),
semantics = _useTheme2.theme.semantics;
var isRTL = _reactNative.I18nManager.isRTL;
return (0, _react.useMemo)(() => _reactNative.StyleSheet.create({
attachmentContainer: {
alignItems: 'center',
flex: 1,
justifyContent: 'center'
},
container: {
borderRadius: _theme.primitives.radiusLg,
flexDirection: isRTL ? 'row-reverse' : 'row',
padding: _theme.primitives.spacingXs,
backgroundColor: isMyMessage ? semantics.chatBgOutgoing : semantics.chatBgIncoming
},
contentWrapper: {
borderRadius: _theme.primitives.radiusMd,
borderWidth: 1,
height: 40,
overflow: 'hidden',
width: 40
},
contentBorder: {
borderColor: semantics.borderCoreOpacitySubtle
},
dismissWrapper: {
position: 'absolute',
right: 0,
top: 0
},
leftContainer: {
flex: 1,
justifyContent: 'center',
paddingHorizontal: _theme.primitives.spacingXs,
gap: _theme.primitives.spacingXxxs,
alignItems: 'flex-start',
...(_reactNative.Platform.OS === 'android' ? {
borderLeftColor: isMyMessage ? semantics.chatReplyIndicatorOutgoing : semantics.chatReplyIndicatorIncoming,
borderLeftWidth: 2
} : isRTL ? {
borderRightColor: isMyMessage ? semantics.chatReplyIndicatorOutgoing : semantics.chatReplyIndicatorIncoming,
borderRightWidth: 2
} : {
borderLeftColor: isMyMessage ? semantics.chatReplyIndicatorOutgoing : semantics.chatReplyIndicatorIncoming,
borderLeftWidth: 2
})
},
rightContainer: {},
title: {
color: isMyMessage ? semantics.chatTextOutgoing : semantics.chatTextIncoming,
fontSize: _theme.primitives.typographyFontSizeXs,
fontWeight: _theme.primitives.typographyFontWeightSemiBold,
includeFontPadding: false,
lineHeight: _theme.primitives.typographyLineHeightTight,
textAlign: isRTL ? 'right' : 'left'
},
wrapper: {
padding: _theme.primitives.spacingXxs
}
}), [isMyMessage, isRTL, semantics]);
};
//# sourceMappingURL=Reply.js.map