@sendbird/uikit-react/ui/MentionLabel.js

Sendbird UIKit for React: A feature-rich and customizable chat UI kit with messaging, channel management, and user authentication.

import React__default, { useRef, useState, useCallback } from 'react';
import { C as ContextMenu, b as MenuItems } from '../chunks/bundle-BRB1saAI.js';
import { L as Label, a as LabelTypography, b as LabelColors } from '../chunks/bundle-FZ_FdxZT.js';
import UserProfile from './UserProfile.js';
import { c as classnames } from '../chunks/bundle-CaW4IP0_.js';
import { u as useSendbird } from '../chunks/bundle-BnaoVUUl.js';
import '../chunks/bundle-DlZj_j5B.js';
import 'react-dom';
import '@sendbird/chat';
import '@sendbird/chat/openChannel';
import './SortByRow.js';
import '../chunks/bundle-CSjCAZib.js';
import './IconButton.js';
import '../chunks/bundle-C5Cl3Igw.js';
import '@sendbird/chat/groupChannel';
import '../utils/message/getOutgoingMessageState.js';
import '../chunks/bundle-OJHU7Q3U.js';
import '../chunks/bundle-DZaN4z9l.js';
import '../chunks/bundle-0bJlK18Z.js';
import '../chunks/bundle-C8kxBudB.js';
import '../chunks/bundle-DxLnjDoJ.js';
import '../chunks/bundle-Dhutxl0X.js';
import '../chunks/bundle-D89Qj0P4.js';
import '../chunks/bundle-C1jTnXNH.js';
import '../chunks/bundle-tDk7wyaM.js';
import '../sendbirdSelectors.js';
import '../chunks/bundle-D9lZlE3H.js';
import '../chunks/bundle-Dgt7lb2O.js';
import './ImageRenderer.js';
import '../chunks/bundle-h43SVTxb.js';
import './Icon.js';
import './Button.js';

function MentionLabel(props) {
    var _a, _b, _c;
    var mentionTemplate = props.mentionTemplate, mentionedUserId = props.mentionedUserId, mentionedUserNickname = props.mentionedUserNickname, isByMe = props.isByMe;
    var mentionRef = useRef();
    var state = useSendbird().state;
    var userId = (_a = state === null || state === void 0 ? void 0 : state.config) === null || _a === void 0 ? void 0 : _a.userId;
    var sdk = (_c = (_b = state === null || state === void 0 ? void 0 : state.stores) === null || _b === void 0 ? void 0 : _b.sdkStore) === null || _c === void 0 ? void 0 : _c.sdk;
    var amIBeingMentioned = userId === mentionedUserId;
    var _d = useState(), user = _d[0], setUser = _d[1];
    var fetchUser = useCallback(function (toggleDropdown) {
        if (user || !(sdk === null || sdk === void 0 ? void 0 : sdk.createApplicationUserListQuery)) {
            toggleDropdown();
            return;
        }
        var query = sdk === null || sdk === void 0 ? void 0 : sdk.createApplicationUserListQuery({
            userIdsFilter: [mentionedUserId],
        });
        query.next().then(function (members) {
            if ((members === null || members === void 0 ? void 0 : members.length) > 0) {
                setUser(members[0]);
            }
            toggleDropdown();
        });
    }, [sdk, mentionedUserId]);
    return (React__default.createElement(ContextMenu, { menuTrigger: function (toggleDropdown) { return (React__default.createElement("a", { className: classnames('sendbird-word__mention', amIBeingMentioned && 'sendbird-word__mention--me'), onClick: function () { return fetchUser(toggleDropdown); }, ref: mentionRef, "data-userid": mentionedUserId, "data-nickname": mentionedUserNickname, "data-sb-mention": true },
            React__default.createElement(Label, { type: LabelTypography.CAPTION_1, color: isByMe ? LabelColors.ONCONTENT_1 : LabelColors.ONBACKGROUND_1 }, "".concat(mentionTemplate).concat(mentionedUserNickname)))); }, menuItems: function (closeDropdown) { return (React__default.createElement(MenuItems
        /**
        * parentRef: For catching location(x, y) of MenuItems
        * parentContainRef: For toggling more options(menus & reactions)
        */
        , { 
            /**
            * parentRef: For catching location(x, y) of MenuItems
            * parentContainRef: For toggling more options(menus & reactions)
            */
            parentRef: mentionRef, parentContainRef: mentionRef, closeDropdown: closeDropdown, style: { paddingTop: '0px', paddingBottom: '0px' } },
            React__default.createElement(UserProfile, { user: user, onSuccess: closeDropdown, currentUserId: userId }))); } }));
}

export { MentionLabel as default };
//# sourceMappingURL=MentionLabel.js.map