@sendbird/uikit-react
Version:
Sendbird UIKit for React: A feature-rich and customizable chat UI kit with messaging, channel management, and user authentication.
180 lines (172 loc) • 14.3 kB
JavaScript
;
var React = require('react');
var ui_Label = require('./bundle-zgmRG2KL.js');
var ui_Icon = require('../ui/Icon.js');
var ui_Avatar = require('./bundle-B7KG10z2.js');
var LocalizationContext = require('./bundle-DPDyqKIJ.js');
var uuid = require('./bundle-t8BQsgL5.js');
var utils = require('./bundle-CkQrhwR6.js');
var _const$1 = require('./bundle-BLz2EOZ5.js');
var _const = require('./bundle-Bomzwcdt.js');
var _tslib = require('./bundle-Conb-pOy.js');
var useSendbird = require('./bundle-Bq15P9qk.js');
function _interopDefaultCompat (e) { return e && typeof e === 'object' && 'default' in e ? e : { default: e }; }
var React__default = /*#__PURE__*/_interopDefaultCompat(React);
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 = React.useRef(null);
var stringSet = React.useContext(LocalizationContext.LocalizationContext).stringSet;
React.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 = React.useMemo(function () {
if (renderUserMentionItem) {
return (React__default.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) || uuid.uuidv4(), ref: scrollRef }, renderUserMentionItem({ user: member })));
}
}, [renderUserMentionItem]);
if (customMentionItem) {
return customMentionItem;
}
return (React__default.default.createElement("div", { className: utils.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) || uuid.uuidv4(), ref: scrollRef },
React__default.default.createElement(ui_Avatar.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.default.createElement(ui_Label.Label, { className: "sendbird-mention-suggest-list__user-item__nickname", testID: "sendbird-mention-suggest-list__user-item__nickname", type: ui_Label.LabelTypography.SUBTITLE_2, color: (member === null || member === void 0 ? void 0 : member.nickname) ? ui_Label.LabelColors.ONBACKGROUND_1 : ui_Label.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.default.createElement(ui_Label.Label, { className: "sendbird-mention-suggest-list__user-item__user-id", testID: "sendbird-mention-suggest-list__user-item__user-id", type: ui_Label.LabelTypography.SUBTITLE_2, color: ui_Label.LabelColors.ONBACKGROUND_2 }, member === null || member === void 0 ? void 0 : member.userId)));
}
function fetchMembersFromChannel(currentUserId, channel, maxSuggestionCount, searchString) {
return _tslib.__awaiter(this, void 0, void 0, function () {
return _tslib.__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 _tslib.__awaiter(this, void 0, void 0, function () {
var query;
return _tslib.__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 ? _const$1.MAX_USER_MENTION_COUNT : _f, _g = props.maxSuggestionCount, maxSuggestionCount = _g === void 0 ? _const$1.MAX_USER_SUGGESTION_COUNT : _g;
var state = useSendbird.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 = React.useRef(null);
var stringSet = LocalizationContext.useLocalization().stringSet;
var _h = React.useState(null), timer = _h[0], setTimer = _h[1];
var _j = React.useState(''), searchString = _j[0], setSearchString = _j[1];
var _k = React.useState(''), lastSearchString = _k[0], setLastSearchString = _k[1];
var _l = React.useState(null), currentFocusedMember = _l[0], setCurrentFocusedMember = _l[1];
var _m = React.useState([]), currentMemberList = _m[0], setCurrentMemberList = _m[1];
React.useEffect(function () {
clearTimeout(timer !== null && timer !== void 0 ? timer : undefined);
setTimer(setTimeout(function () {
setSearchString(targetNickname);
}, DEBOUNCING_TIME));
}, [targetNickname]);
React.useEffect(function () {
if ((inputEvent === null || inputEvent === void 0 ? void 0 : inputEvent.key) === _const.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) === _const.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) === _const.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]);
React.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(_const$1.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.default.createElement("div", { className: utils.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.default.createElement(SuggestedUserMentionItem, { key: (member === null || member === void 0 ? void 0 : member.userId) || uuid.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.default.createElement("div", { className: "sendbird-mention-suggest-list__notice-item" },
React__default.default.createElement(ui_Icon.default, { className: "sendbird-mention-suggest-list__notice-item__icon", type: ui_Icon.IconTypes.INFO, fillColor: ui_Icon.IconColors.ON_BACKGROUND_2, width: "20px", height: "20px" }),
React__default.default.createElement(ui_Label.Label, { className: "sendbird-mention-suggest-list__notice-item__text", type: ui_Label.LabelTypography.SUBTITLE_2, color: ui_Label.LabelColors.ONBACKGROUND_2 }, stringSet.MENTION_COUNT__OVER_LIMIT.replace('%d', String(maxMentionCount)))))));
};
exports.SuggestedMentionListView = SuggestedMentionListView;
//# sourceMappingURL=bundle-B7tlFbQZ.js.map