stream-chat-react-native-core
Version:
The official React Native and Expo components for Stream Chat, a service for building chat applications
258 lines • 11.2 kB
JavaScript
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.attachmentTypeIconMap = exports.ThreadListItemComponent = exports.ThreadListItem = void 0;
var _react = _interopRequireWildcard(require("react"));
var _reactNative = require("react-native");
var _contexts = require("../../contexts");
var _ComponentsContext = require("../../contexts/componentsContext/ComponentsContext");
var _ThreadListItemContext = require("../../contexts/threadsContext/ThreadListItemContext");
var _ThreadsContext = require("../../contexts/threadsContext/ThreadsContext");
var _hooks = require("../../hooks");
var _theme = require("../../theme");
var _getDateString = require("../../utils/i18n/getDateString");
var _hooks2 = require("../ChannelPreview/hooks");
var _useChannelPreviewDisplayName = require("../ChannelPreview/hooks/useChannelPreviewDisplayName");
var _ui = require("../ui");
var _UserAvatar = require("../ui/Avatar/UserAvatar");
var _jsxRuntime = require("react/jsx-runtime");
var _jsxFileName = "/home/runner/work/stream-chat-react-native/stream-chat-react-native/package/src/components/ThreadList/ThreadListItem.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 attachmentTypeIconMap = exports.attachmentTypeIconMap = {
audio: '🔈',
file: '📄',
image: '📷',
video: '🎥',
voiceRecording: '🎙️'
};
var textComposerStateSelector = state => ({
text: state.text
});
var attachmentManagerStateSelector = state => ({
attachments: state.attachments
});
var ThreadListItemComponent = () => {
var _useThreadListItemCon = (0, _ThreadListItemContext.useThreadListItemContext)(),
channel = _useThreadListItemCon.channel,
dateString = _useThreadListItemCon.dateString,
deletedAtDateString = _useThreadListItemCon.deletedAtDateString,
draftMessage = _useThreadListItemCon.draftMessage,
lastReply = _useThreadListItemCon.lastReply,
ownUnreadMessageCount = _useThreadListItemCon.ownUnreadMessageCount,
parentMessage = _useThreadListItemCon.parentMessage,
thread = _useThreadListItemCon.thread;
var online = (0, _hooks2.useChannelPreviewDisplayPresence)(channel);
var displayName = (0, _useChannelPreviewDisplayName.useChannelPreviewDisplayName)(channel);
var _useThreadsContext = (0, _ThreadsContext.useThreadsContext)(),
onThreadSelect = _useThreadsContext.onThreadSelect;
var _useComponentsContext = (0, _ComponentsContext.useComponentsContext)(),
ThreadListItemMessagePreview = _useComponentsContext.ThreadListItemMessagePreview,
ThreadMessagePreviewDeliveryStatus = _useComponentsContext.ThreadMessagePreviewDeliveryStatus;
var _useTheme = (0, _contexts.useTheme)(),
semantics = _useTheme.theme.semantics;
var styles = useStyles();
var _useTranslationContex = (0, _contexts.useTranslationContext)(),
t = _useTranslationContex.t;
var shouldRenderPreview = !!draftMessage || !!lastReply;
return (0, _jsxRuntime.jsx)(_reactNative.View, {
style: styles.wrapper,
children: (0, _jsxRuntime.jsxs)(_reactNative.Pressable, {
onPress: () => {
if (onThreadSelect) {
onThreadSelect({
thread: parentMessage,
threadInstance: thread
}, channel);
}
},
style: ({
pressed
}) => [styles.container, {
backgroundColor: pressed ? semantics.backgroundUtilityPressed : 'transparent'
}],
testID: "thread-list-item",
children: [lastReply?.user ? (0, _jsxRuntime.jsx)(_UserAvatar.UserAvatar, {
user: lastReply?.user,
size: "xl",
showOnlineIndicator: online,
showBorder: true
}) : null, (0, _jsxRuntime.jsxs)(_reactNative.View, {
style: styles.content,
children: [(0, _jsxRuntime.jsx)(_reactNative.Text, {
numberOfLines: 1,
style: styles.channelName,
children: displayName || 'N/A'
}), shouldRenderPreview ? (0, _jsxRuntime.jsxs)(_reactNative.View, {
style: styles.previewMessageContainer,
children: [!draftMessage ? (0, _jsxRuntime.jsx)(ThreadMessagePreviewDeliveryStatus, {
channel: channel,
message: parentMessage
}) : null, (0, _jsxRuntime.jsx)(ThreadListItemMessagePreview, {
message: parentMessage
})]
}) : null, (0, _jsxRuntime.jsxs)(_reactNative.View, {
style: styles.lowerRow,
children: [(0, _jsxRuntime.jsx)(_ui.UserAvatarStack, {
users: parentMessage?.thread_participants || [],
avatarSize: "sm",
maxVisible: 3,
overlap: 0.4
}), (0, _jsxRuntime.jsx)(_reactNative.Text, {
style: styles.messageRepliesText,
children: parentMessage?.reply_count === 1 ? t('1 Reply') : t('{{ replyCount }} Replies', {
replyCount: parentMessage?.reply_count
})
}), (0, _jsxRuntime.jsx)(_reactNative.Text, {
style: styles.dateText,
children: deletedAtDateString ?? dateString
})]
})]
}), ownUnreadMessageCount > 0 && !deletedAtDateString ? (0, _jsxRuntime.jsx)(_reactNative.View, {
style: styles.unreadBubbleWrapper,
children: (0, _jsxRuntime.jsx)(_ui.BadgeNotification, {
count: ownUnreadMessageCount,
size: "sm"
})
}) : null]
})
});
};
exports.ThreadListItemComponent = ThreadListItemComponent;
var ThreadListItem = props => {
var _useChatContext = (0, _contexts.useChatContext)(),
client = _useChatContext.client;
var _useTranslationContex2 = (0, _contexts.useTranslationContext)(),
t = _useTranslationContex2.t,
tDateTimeParser = _useTranslationContex2.tDateTimeParser;
var thread = props.thread,
_props$timestampTrans = props.timestampTranslationKey,
timestampTranslationKey = _props$timestampTrans === void 0 ? 'timestamp/ThreadListItem' : _props$timestampTrans;
var _useComponentsContext2 = (0, _ComponentsContext.useComponentsContext)(),
ThreadListItemOverride = _useComponentsContext2.ThreadListItem;
var _useStateStore = (0, _hooks.useStateStore)(thread.messageComposer.textComposer.state, textComposerStateSelector),
draftText = _useStateStore.text;
var _useStateStore2 = (0, _hooks.useStateStore)(thread.messageComposer.attachmentManager.state, attachmentManagerStateSelector),
attachments = _useStateStore2.attachments;
var selector = (0, _react.useCallback)(nextValue => ({
channel: nextValue.channel,
deletedAt: nextValue.deletedAt,
lastReply: nextValue.replies.at(-1),
ownUnreadMessageCount: client.userID && nextValue.read[client.userID]?.unreadMessageCount || 0,
parentMessage: nextValue.parentMessage
}), [client]);
var _useStateStore3 = (0, _hooks.useStateStore)(thread.state, selector),
channel = _useStateStore3.channel,
deletedAt = _useStateStore3.deletedAt,
lastReply = _useStateStore3.lastReply,
ownUnreadMessageCount = _useStateStore3.ownUnreadMessageCount,
parentMessage = _useStateStore3.parentMessage;
var timestamp = lastReply?.created_at;
(0, _react.useEffect)(() => {
var unsubscribe = thread.messageComposer.registerDraftEventSubscriptions();
return () => unsubscribe();
}, [thread.messageComposer]);
var draftMessage = (0, _react.useMemo)(() => {
if (thread.messageComposer.compositionIsEmpty) {
return undefined;
}
if (!draftText && !attachments?.length) {
return undefined;
}
return {
attachments,
id: thread.messageComposer.id,
text: draftText ?? ''
};
}, [attachments, draftText, thread.messageComposer]);
var dateString = (0, _react.useMemo)(() => (0, _getDateString.getDateString)({
date: timestamp,
t,
tDateTimeParser,
timestampTranslationKey
}), [timestamp, t, tDateTimeParser, timestampTranslationKey]);
var deletedAtDateString = (0, _react.useMemo)(() => (0, _getDateString.getDateString)({
date: deletedAt,
t,
tDateTimeParser,
timestampTranslationKey
}), [deletedAt, t, tDateTimeParser, timestampTranslationKey]);
return (0, _jsxRuntime.jsx)(_ThreadListItemContext.ThreadListItemProvider, {
value: {
channel,
dateString,
deletedAtDateString,
draftMessage,
lastReply,
ownUnreadMessageCount,
parentMessage,
thread
},
children: (0, _jsxRuntime.jsx)(ThreadListItemOverride, {})
});
};
exports.ThreadListItem = ThreadListItem;
var useStyles = () => {
var _useTheme2 = (0, _contexts.useTheme)(),
_useTheme2$theme = _useTheme2.theme,
threadListItem = _useTheme2$theme.threadListItem,
semantics = _useTheme2$theme.semantics;
return (0, _react.useMemo)(() => _reactNative.StyleSheet.create({
wrapper: {
flex: 1,
padding: _theme.primitives.spacingXxs,
borderBottomWidth: 1,
borderBottomColor: semantics.borderCoreSubtle,
...threadListItem.wrapper
},
container: {
flexDirection: 'row',
gap: _theme.primitives.spacingSm,
padding: _theme.primitives.spacingSm,
borderRadius: _theme.primitives.radiusLg,
...threadListItem.container
},
channelName: {
color: semantics.textTertiary,
fontSize: _theme.primitives.typographyFontSizeSm,
fontWeight: _theme.primitives.typographyFontWeightSemiBold,
lineHeight: _theme.primitives.typographyLineHeightNormal,
textAlign: 'left',
...threadListItem.channelName
},
content: {
flex: 1,
gap: _theme.primitives.spacingXs,
...threadListItem.content
},
previewMessageContainer: {
flexDirection: 'row',
alignItems: 'center',
gap: _theme.primitives.spacingXxs,
...threadListItem.previewMessageContainer
},
lowerRow: {
flexDirection: 'row',
alignItems: 'center',
gap: _theme.primitives.spacingXs,
...threadListItem.lowerRow
},
messageRepliesText: {
color: semantics.textLink,
fontSize: _theme.primitives.typographyFontSizeSm,
fontWeight: _theme.primitives.typographyFontWeightSemiBold,
lineHeight: _theme.primitives.typographyLineHeightNormal,
...threadListItem.messageRepliesText
},
dateText: {
color: semantics.textTertiary,
fontSize: _theme.primitives.typographyFontSizeSm,
fontWeight: _theme.primitives.typographyFontWeightRegular,
lineHeight: _theme.primitives.typographyLineHeightNormal,
...threadListItem.dateText
},
unreadBubbleWrapper: {
...threadListItem.unreadBubbleWrapper
}
}), [semantics, threadListItem]);
};
//# sourceMappingURL=ThreadListItem.js.map