@sendbird/uikit-react
Version:
Sendbird UIKit for React: A feature-rich and customizable chat UI kit with messaging, channel management, and user authentication.
174 lines (169 loc) • 14 kB
JavaScript
import React__default, { useRef, useContext, useEffect, useMemo, useState } from 'react';
import { L as Label, a as LabelTypography, b as LabelColors } from './bundle-FZ_FdxZT.js';
import Icon, { IconTypes, IconColors } from '../ui/Icon.js';
import { A as Avatar } from './bundle-Dgt7lb2O.js';
import { L as LocalizationContext, u as useLocalization } from './bundle-DxLnjDoJ.js';
import { u as uuidv4 } from './bundle-CSjCAZib.js';
import { c as classnames } from './bundle-CaW4IP0_.js';
import { a as USER_MENTION_TEMP_CHAR, M as MAX_USER_MENTION_COUNT, b as MAX_USER_SUGGESTION_COUNT } from './bundle-CVos_O7L.js';
import { M as MessageInputKeys } from './bundle-LDv-FNzw.js';
import { a as __awaiter, b as __generator } from './bundle-DlZj_j5B.js';
import { u as useSendbird } from './bundle-BnaoVUUl.js';
function SuggestedUserMentionItem(props) {
var member = props.member, _a = props.isFocused, isFocused = _a === void 0 ? false : _a, parentScrollRef = props.parentScrollRef, onClick = props.onClick, onMouseOver = props.onMouseOver, onMouseMove = props.onMouseMove, renderUserMentionItem = props.renderUserMentionItem;
var scrollRef = useRef(null);
var stringSet = useContext(LocalizationContext).stringSet;
useEffect(function () {
if (isFocused && (parentScrollRef === null || parentScrollRef === void 0 ? void 0 : parentScrollRef.current) != null && (scrollRef === null || scrollRef === void 0 ? void 0 : scrollRef.current) != null
&& (parentScrollRef.current.scrollTop >= scrollRef.current.offsetTop
|| parentScrollRef.current.scrollTop + parentScrollRef.current.clientHeight <= scrollRef.current.offsetTop)) {
scrollRef.current.scrollIntoView({ block: 'nearest', inline: 'nearest' });
}
}, [isFocused]);
var customMentionItem = useMemo(function () {
if (renderUserMentionItem) {
return (React__default.createElement("div", { className: "sendbird-mention-suggest-list__user-item", onClick: function (event) { return onClick === null || onClick === void 0 ? void 0 : onClick({ event: event, member: member, itemRef: scrollRef }); }, onMouseOver: function (event) { return onMouseOver === null || onMouseOver === void 0 ? void 0 : onMouseOver({ event: event, member: member, itemRef: scrollRef }); }, onMouseMove: function (event) { return onMouseMove === null || onMouseMove === void 0 ? void 0 : onMouseMove({ event: event, member: member, itemRef: scrollRef }); }, key: (member === null || member === void 0 ? void 0 : member.userId) || uuidv4(), ref: scrollRef }, renderUserMentionItem({ user: member })));
}
}, [renderUserMentionItem]);
if (customMentionItem) {
return customMentionItem;
}
return (React__default.createElement("div", { className: classnames('sendbird-mention-suggest-list__user-item', isFocused && 'focused'), onClick: function (event) { return onClick === null || onClick === void 0 ? void 0 : onClick({ event: event, member: member, itemRef: scrollRef }); }, onMouseOver: function (event) { return onMouseOver === null || onMouseOver === void 0 ? void 0 : onMouseOver({ event: event, member: member, itemRef: scrollRef }); }, onMouseMove: function (event) { return onMouseMove === null || onMouseMove === void 0 ? void 0 : onMouseMove({ event: event, member: member, itemRef: scrollRef }); }, key: (member === null || member === void 0 ? void 0 : member.userId) || uuidv4(), ref: scrollRef },
React__default.createElement(Avatar, { className: "sendbird-mention-suggest-list__user-item__avatar", src: member === null || member === void 0 ? void 0 : member.profileUrl, alt: "user-profile", width: "24px", height: "24px" }),
React__default.createElement(Label, { className: "sendbird-mention-suggest-list__user-item__nickname", testID: "sendbird-mention-suggest-list__user-item__nickname", type: LabelTypography.SUBTITLE_2, color: (member === null || member === void 0 ? void 0 : member.nickname) ? LabelColors.ONBACKGROUND_1 : LabelColors.ONBACKGROUND_3 }, (member === null || member === void 0 ? void 0 : member.nickname) || (stringSet === null || stringSet === void 0 ? void 0 : stringSet.MENTION_NAME__NO_NAME)),
React__default.createElement(Label, { className: "sendbird-mention-suggest-list__user-item__user-id", testID: "sendbird-mention-suggest-list__user-item__user-id", type: LabelTypography.SUBTITLE_2, color: LabelColors.ONBACKGROUND_2 }, member === null || member === void 0 ? void 0 : member.userId)));
}
function fetchMembersFromChannel(currentUserId, channel, maxSuggestionCount, searchString) {
return __awaiter(this, void 0, void 0, function () {
return __generator(this, function (_a) {
return [2 /*return*/, channel.members
.sort(function (a, b) { var _a; return (_a = a.nickname) === null || _a === void 0 ? void 0 : _a.localeCompare(b.nickname); })
.filter(function (member) {
var _a;
return ((_a = member.nickname) === null || _a === void 0 ? void 0 : _a.toLowerCase().startsWith(searchString.toLowerCase()))
&& member.userId !== currentUserId
&& member.isActive;
}).slice(0, maxSuggestionCount)];
});
});
}
function fetchMembersFromQuery(currentUserId, channel, maxSuggestionCount, searchString) {
return __awaiter(this, void 0, void 0, function () {
var query;
return __generator(this, function (_a) {
query = channel.createMemberListQuery({
limit: maxSuggestionCount + 1, // because current user could be included
nicknameStartsWithFilter: searchString,
});
return [2 /*return*/, query.next()
.then(function (memberList) {
return memberList
.filter(function (member) { return currentUserId !== (member === null || member === void 0 ? void 0 : member.userId); })
.slice(0, maxSuggestionCount);
})];
});
});
}
var DEBOUNCING_TIME = 300;
var SuggestedMentionListView = function (props) {
var _a, _b, _c;
var className = props.className, currentChannel = props.currentChannel, _d = props.targetNickname, targetNickname = _d === void 0 ? '' : _d,
// memberListQuery,
onUserItemClick = props.onUserItemClick, onFocusItemChange = props.onFocusItemChange, onFetchUsers = props.onFetchUsers, renderUserMentionItem = props.renderUserMentionItem, inputEvent = props.inputEvent, _e = props.ableAddMention, ableAddMention = _e === void 0 ? true : _e, _f = props.maxMentionCount, maxMentionCount = _f === void 0 ? MAX_USER_MENTION_COUNT : _f, _g = props.maxSuggestionCount, maxSuggestionCount = _g === void 0 ? MAX_USER_SUGGESTION_COUNT : _g;
var state = useSendbird().state;
var config = state.config, stores = state.stores;
var logger = config.logger;
var currentUserId = ((_c = (_b = (_a = stores === null || stores === void 0 ? void 0 : stores.sdkStore) === null || _a === void 0 ? void 0 : _a.sdk) === null || _b === void 0 ? void 0 : _b.currentUser) === null || _c === void 0 ? void 0 : _c.userId) || '';
var scrollRef = useRef(null);
var stringSet = useLocalization().stringSet;
var _h = useState(null), timer = _h[0], setTimer = _h[1];
var _j = useState(''), searchString = _j[0], setSearchString = _j[1];
var _k = useState(''), lastSearchString = _k[0], setLastSearchString = _k[1];
var _l = useState(null), currentFocusedMember = _l[0], setCurrentFocusedMember = _l[1];
var _m = useState([]), currentMemberList = _m[0], setCurrentMemberList = _m[1];
useEffect(function () {
clearTimeout(timer !== null && timer !== void 0 ? timer : undefined);
setTimer(setTimeout(function () {
setSearchString(targetNickname);
}, DEBOUNCING_TIME));
}, [targetNickname]);
useEffect(function () {
if ((inputEvent === null || inputEvent === void 0 ? void 0 : inputEvent.key) === MessageInputKeys.Enter) {
if (currentFocusedMember && currentMemberList.length > 0) {
onUserItemClick === null || onUserItemClick === void 0 ? void 0 : onUserItemClick(currentFocusedMember);
}
}
if ((inputEvent === null || inputEvent === void 0 ? void 0 : inputEvent.key) === MessageInputKeys.ArrowUp) {
var currentUserIndex = currentMemberList.findIndex(function (member) { return (member === null || member === void 0 ? void 0 : member.userId) === (currentFocusedMember === null || currentFocusedMember === void 0 ? void 0 : currentFocusedMember.userId); });
if (0 < currentUserIndex) {
setCurrentFocusedMember(currentMemberList[currentUserIndex - 1]);
onFocusItemChange === null || onFocusItemChange === void 0 ? void 0 : onFocusItemChange(currentMemberList[currentUserIndex - 1]);
}
}
if ((inputEvent === null || inputEvent === void 0 ? void 0 : inputEvent.key) === MessageInputKeys.ArrowDown) {
var currentUserIndex = currentMemberList.findIndex(function (member) { return (member === null || member === void 0 ? void 0 : member.userId) === (currentFocusedMember === null || currentFocusedMember === void 0 ? void 0 : currentFocusedMember.userId); });
if (currentUserIndex < currentMemberList.length - 1) {
setCurrentFocusedMember(currentMemberList[currentUserIndex + 1]);
onFocusItemChange === null || onFocusItemChange === void 0 ? void 0 : onFocusItemChange(currentMemberList[currentUserIndex + 1]);
}
}
}, [inputEvent]);
useEffect(function () {
if (lastSearchString && searchString.indexOf(lastSearchString) === 0 && currentMemberList.length === 0) {
// Don't need to request query again
return;
}
if (currentChannel === null || currentChannel === void 0 ? void 0 : currentChannel.isSuper) {
if (!(currentChannel === null || currentChannel === void 0 ? void 0 : currentChannel.createMemberListQuery)) {
logger.warning('SuggestedMentionList: Creating member list query failed');
return;
}
}
var fetcher = (currentChannel === null || currentChannel === void 0 ? void 0 : currentChannel.isSuper) ? fetchMembersFromQuery : fetchMembersFromChannel;
fetcher(currentUserId, currentChannel, maxSuggestionCount, searchString.slice(USER_MENTION_TEMP_CHAR.length))
.then(function (suggestingMembers) {
if (suggestingMembers.length < 1) {
logger.info('SuggestedMentionList: Fetched member list is empty');
}
else {
logger.info('SuggestedMentionList: Fetching member list succeeded', { memberList: suggestingMembers });
setCurrentFocusedMember(suggestingMembers[0]);
}
setLastSearchString(searchString);
onFetchUsers === null || onFetchUsers === void 0 ? void 0 : onFetchUsers(suggestingMembers);
setCurrentMemberList(suggestingMembers);
})
.catch(function (error) {
if (error) {
logger.error('SuggestedMentionList: Fetching member list failed', error);
}
});
}, [
currentChannel === null || currentChannel === void 0 ? void 0 : currentChannel.url,
// We have to be specific like this or React would not recognize the changes in instances.
currentChannel === null || currentChannel === void 0 ? void 0 : currentChannel.members.map(function (member) { return member.nickname; }).join(),
currentChannel === null || currentChannel === void 0 ? void 0 : currentChannel.members.map(function (member) { return member.isActive; }).join(),
searchString,
maxSuggestionCount,
currentUserId,
currentMemberList.length,
lastSearchString,
]);
if (!ableAddMention && currentMemberList.length === 0) {
return null;
}
return (React__default.createElement("div", { className: classnames('sendbird-mention-suggest-list', className), "data-testid": "sendbird-mention-suggest-list", key: "sendbird-mention-suggest-list", ref: scrollRef },
ableAddMention
&& (currentMemberList === null || currentMemberList === void 0 ? void 0 : currentMemberList.map(function (member) { return (React__default.createElement(SuggestedUserMentionItem, { key: (member === null || member === void 0 ? void 0 : member.userId) || uuidv4(), member: member, isFocused: (member === null || member === void 0 ? void 0 : member.userId) === (currentFocusedMember === null || currentFocusedMember === void 0 ? void 0 : currentFocusedMember.userId), parentScrollRef: scrollRef, onClick: function (_a) {
var member = _a.member;
onUserItemClick === null || onUserItemClick === void 0 ? void 0 : onUserItemClick(member);
}, onMouseOver: function (_a) {
var member = _a.member;
setCurrentFocusedMember(member);
}, renderUserMentionItem: renderUserMentionItem })); })),
!ableAddMention && (React__default.createElement("div", { className: "sendbird-mention-suggest-list__notice-item" },
React__default.createElement(Icon, { className: "sendbird-mention-suggest-list__notice-item__icon", type: IconTypes.INFO, fillColor: IconColors.ON_BACKGROUND_2, width: "20px", height: "20px" }),
React__default.createElement(Label, { className: "sendbird-mention-suggest-list__notice-item__text", type: LabelTypography.SUBTITLE_2, color: LabelColors.ONBACKGROUND_2 }, stringSet.MENTION_COUNT__OVER_LIMIT.replace('%d', String(maxMentionCount)))))));
};
export { SuggestedMentionListView as S };
//# sourceMappingURL=bundle-DaZcJrxP.js.map