@uzum-tech/ui 1.7.2 → 1.8.1

package/lib/chat/src/ChatListItems.js

@@ -0,0 +1,194 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.chatListItemsProps = void 0;
+const vue_1 = require("vue");
+const interface_1 = require("./interface");
+const empty_1 = require("../../empty");
+const avatar_1 = require("../../avatar");
+const list_1 = require("../../list");
+const badge_1 = require("../../badge");
+const icon_1 = require("../../icon");
+const index_cssr_1 = __importDefault(require("./styles/index.cssr"));
+const styles_1 = require("../styles");
+const _mixins_1 = require("../../_mixins");
+const icons_1 = require("../../_internal/icons");
+const statusIconMapper = {
+    [interface_1.MessageStatus.READ]: icons_1.CheckmarkDoneSharp,
+    [interface_1.MessageStatus.PENDING]: icons_1.MdTime,
+    [interface_1.MessageStatus.RETRY]: icons_1.Refresh,
+    [interface_1.MessageStatus.UNREAD]: icons_1.CheckmarkDoneSharp
+};
+exports.chatListItemsProps = Object.assign(Object.assign({}, _mixins_1.useTheme.props), { chatItems: {
+        type: Array,
+        default: () => []
+    }, selectedChatId: {
+        type: [String, Number, Symbol],
+        default: undefined
+    }, typingChatIds: {
+        type: Array,
+        default: () => []
+    }, typingText: {
+        type: String,
+        default: undefined
+    }, loading: {
+        type: Boolean,
+        default: false
+    }, loadingCount: {
+        type: Number,
+        default: 10
+    }, emptyProps: {
+        type: Object,
+        default: undefined
+    }, avatarProps: {
+        type: Object,
+        default: undefined
+    }, badgeProps: {
+        type: Object,
+        default: undefined
+    }, onChatSelect: {
+        type: Function,
+        default: undefined
+    }, notificationsShown: {
+        type: Object,
+        default: () => new Set()
+    } });
+exports.default = (0, vue_1.defineComponent)({
+    name: 'ChatListItems',
+    props: exports.chatListItemsProps,
+    setup(props, { slots }) {
+        var _a;
+        const UChat = (0, vue_1.inject)(interface_1.chatInjectionKey, null);
+        const { mergedClsPrefixRef } = (0, _mixins_1.useConfig)(props);
+        const themeRef = (_a = UChat === null || UChat === void 0 ? void 0 : UChat.mergedThemeRef) !== null && _a !== void 0 ? _a : (0, _mixins_1.useTheme)('Chat', '-chat', index_cssr_1.default, styles_1.chatLight, props, mergedClsPrefixRef);
+        const { localeRef } = (0, _mixins_1.useLocale)('Chat');
+        const cssVarsRef = (0, vue_1.computed)(() => {
+            const { common: { cubicBezierEaseInOut, brandPrimary500, staticGreen, staticRed, textPrimary, textSecondary, textTertiary }, self: { backgroundColor, borderColor, sidebarBackgroundColor, sidebarBorderColor, sidebarItemBackgroundColor, sidebarItemBackgroundColorHover, sidebarItemBackgroundColorSelected, sidebarItemTextColor, sidebarItemTextColorSelected, sidebarItemSubtitleColor, sidebarItemTimeColor, unreadNotificationBackgroundColor, borderRadius } } = themeRef.value;
+            return {
+                '--u-bezier': cubicBezierEaseInOut,
+                '--u-color-primary': brandPrimary500,
+                '--u-color-success': staticGreen,
+                '--u-color-error': staticRed,
+                '--u-text-color-base': textPrimary,
+                '--u-text-color-secondary': textSecondary,
+                '--u-text-color-disabled': textTertiary,
+                '--u-background-color': backgroundColor,
+                '--u-border-color': borderColor,
+                '--u-sidebar-background-color': sidebarBackgroundColor,
+                '--u-sidebar-border-color': sidebarBorderColor,
+                '--u-sidebar-item-background-color': sidebarItemBackgroundColor,
+                '--u-sidebar-item-background-color-hover': sidebarItemBackgroundColorHover,
+                '--u-sidebar-item-background-color-selected': sidebarItemBackgroundColorSelected,
+                '--u-sidebar-item-text-color': sidebarItemTextColor,
+                '--u-sidebar-item-text-color-selected': sidebarItemTextColorSelected,
+                '--u-sidebar-item-subtitle-color': sidebarItemSubtitleColor,
+                '--u-sidebar-item-time-color': sidebarItemTimeColor,
+                '--u-unread-notification-background-color': unreadNotificationBackgroundColor,
+                '--u-border-radius': borderRadius
+            };
+        });
+        const themeClassHandle = (0, _mixins_1.useThemeClass)('chat-list-items', (0, vue_1.computed)(() => ''), cssVarsRef, props);
+        const mergedTypingTextRef = (0, vue_1.computed)(() => { var _a; return (_a = props.typingText) !== null && _a !== void 0 ? _a : localeRef.value.typingText; });
+        const handleChatSelect = (chatId) => {
+            var _a;
+            (_a = props.onChatSelect) === null || _a === void 0 ? void 0 : _a.call(props, chatId);
+        };
+        const renderChatItem = (item) => {
+            var _a, _b;
+            const isSelected = props.selectedChatId === item.id;
+            const isTyping = (_b = (_a = props.typingChatIds) === null || _a === void 0 ? void 0 : _a.includes(item.id)) !== null && _b !== void 0 ? _b : false;
+            return ((0, vue_1.h)(list_1.UListItem, { key: item.id, showIcon: false, onClick: () => {
+                    handleChatSelect(item.id);
+                }, class: [
+                    `${mergedClsPrefixRef.value}-chat-sidebar__item`,
+                    isSelected &&
+                        `${mergedClsPrefixRef.value}-chat-sidebar__item--selected`,
+                    isTyping && `${mergedClsPrefixRef.value}-chat-sidebar__item--typing`
+                ] }, {
+                prefix: () => ((0, vue_1.h)(avatar_1.UAvatar, Object.assign({ size: "medium", src: typeof item.avatar === 'string' ? item.avatar : undefined }, props.avatarProps, { theme: themeRef.value.peers.Avatar, themeOverrides: themeRef.value.peerOverrides.Avatar }), {
+                    default: () => {
+                        var _a;
+                        return typeof item.avatar === 'function'
+                            ? item.avatar()
+                            : typeof item.title === 'string'
+                                ? (_a = item.title.charAt(0)) === null || _a === void 0 ? void 0 : _a.toUpperCase()
+                                : '?';
+                    }
+                })),
+                header: () => ((0, vue_1.h)("span", { class: `${mergedClsPrefixRef.value}-chat-sidebar__item-title` }, typeof item.title === 'function' ? item.title() : item.title)),
+                description: () => ((0, vue_1.h)("span", { class: [
+                        `${mergedClsPrefixRef.value}-chat-sidebar__item-subtitle`,
+                        isTyping && 'typing'
+                    ], style: {
+                        display: 'block',
+                        overflow: 'hidden',
+                        textOverflow: 'ellipsis',
+                        whiteSpace: 'nowrap',
+                        minWidth: 0,
+                        maxWidth: '100%'
+                    } }, isTyping
+                    ? mergedTypingTextRef.value
+                    : typeof item.subtitle === 'string'
+                        ? item.subtitle
+                        : typeof item.subtitle === 'function'
+                            ? item.subtitle()
+                            : item.subtitle)),
+                suffix: () => {
+                    const displayUnreadCount = item.unreadCount || 0;
+                    const hasUnreadIncoming = displayUnreadCount > 0;
+                    const lastMessageIsOwn = item.lastMessageIsOwn;
+                    return ((0, vue_1.h)("div", { class: `${mergedClsPrefixRef.value}-chat-sidebar__item-indicators` },
+                        (0, vue_1.h)("div", { class: `${mergedClsPrefixRef.value}-chat-sidebar__item-time` }, item.datetime),
+                        (0, vue_1.h)("div", { class: `${mergedClsPrefixRef.value}-chat-sidebar__item-status` },
+                            lastMessageIsOwn &&
+                                (slots.chatItemStatus ? (slots.chatItemStatus(item)) : item.messageStatus &&
+                                    statusIconMapper[item.messageStatus] ? ((0, vue_1.h)(icon_1.UIcon, { size: 16, component: statusIconMapper[item.messageStatus], class: [
+                                        `${mergedClsPrefixRef.value}-chat-sidebar__item-status-icon`,
+                                        `${mergedClsPrefixRef.value}-chat-sidebar__item-status-icon--${item.messageStatus}`
+                                    ], theme: themeRef.value.peers.Icon, themeOverrides: themeRef.value.peerOverrides.Icon })) : null),
+                            !lastMessageIsOwn && hasUnreadIncoming && ((0, vue_1.h)(badge_1.UBadge, Object.assign({ value: displayUnreadCount }, props.badgeProps, { theme: themeRef.value.peers.Badge, themeOverrides: themeRef.value.peerOverrides.Badge }))))));
+                }
+            }));
+        };
+        return {
+            mergedClsPrefixRef,
+            mergedTheme: themeRef,
+            renderChatItem,
+            cssVars: cssVarsRef,
+            themeClass: themeClassHandle === null || themeClassHandle === void 0 ? void 0 : themeClassHandle.themeClass,
+            onRender: themeClassHandle === null || themeClassHandle === void 0 ? void 0 : themeClassHandle.onRender
+        };
+    },
+    render() {
+        var _a;
+        (_a = this.onRender) === null || _a === void 0 ? void 0 : _a.call(this);
+        const { mergedClsPrefixRef, renderChatItem } = this;
+        const content = (() => {
+            var _a;
+            if (this.loading) {
+                return ((0, vue_1.h)(list_1.UList, { loading: true, theme: this.mergedTheme.peers.List, themeOverrides: this.mergedTheme.peerOverrides.List }, {
+                    default: () => Array.from({ length: this.loadingCount || 10 }).map((_, index) => ((0, vue_1.h)(list_1.UListItem, { key: index, avatar: { icon: icons_1.PersonOutline }, description: { text: 'Loading...' }, header: { text: 'Loading...' } })))
+                }));
+            }
+            if ((_a = this.chatItems) === null || _a === void 0 ? void 0 : _a.length) {
+                return ((0, vue_1.h)(list_1.UList, { showIcon: false, theme: this.mergedTheme.peers.List, themeOverrides: this.mergedTheme.peerOverrides.List }, {
+                    default: () => { var _a; return (_a = this.chatItems) === null || _a === void 0 ? void 0 : _a.map((item) => renderChatItem(item)); }
+                }));
+            }
+            return ((0, vue_1.h)(empty_1.UEmpty, Object.assign({}, this.emptyProps, { theme: this.mergedTheme.peers.Empty, themeOverrides: this.mergedTheme.peerOverrides.Empty })));
+        })();
+        return ((0, vue_1.h)("div", { class: [`${mergedClsPrefixRef}-chat`, this.themeClass], style: this.cssVars },
+            (0, vue_1.h)("div", { class: `${mergedClsPrefixRef}-chat-sidebar`, style: {
+                    border: 'none',
+                    borderRadius: '0',
+                    padding: '0',
+                    maxWidth: '100%',
+                    background: 'transparent'
+                } },
+                (0, vue_1.h)("div", { class: `${mergedClsPrefixRef}-chat-sidebar__content`, style: {
+                        padding: '0'
+                    } }, content))));
+    }
+});