@sendbird/uikit-react/cjs/GroupChannel/components/TypingIndicator.js

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

'use strict';

Object.defineProperty(exports, '__esModule', { value: true });

var React = require('react');
var groupChannel = require('@sendbird/chat/groupChannel');
var ui_Label = require('../../chunks/bundle-zgmRG2KL.js');
var LocalizationContext = require('../../chunks/bundle-DPDyqKIJ.js');
var uuid = require('../../chunks/bundle-t8BQsgL5.js');
var useSendbird = require('../../chunks/bundle-Bq15P9qk.js');
require('../../chunks/bundle-Conb-pOy.js');
require('../../chunks/bundle-BbrBawlX.js');
require('../../chunks/bundle-Cyl6_qLo.js');
require('../../chunks/bundle-B19RHFpR.js');
require('../../chunks/bundle-Cfh78Xnm.js');
require('@sendbird/chat');
require('@sendbird/chat/openChannel');

function _interopDefaultCompat (e) { return e && typeof e === 'object' && 'default' in e ? e : { default: e }; }

var React__default = /*#__PURE__*/_interopDefaultCompat(React);

var TypingIndicatorText = function (_a) {
    var members = _a.members;
    function getText() {
        var stringSet = React.useContext(LocalizationContext.LocalizationContext).stringSet;
        if (!members || members.length === 0) {
            return '';
        }
        if (members && members.length === 1) {
            return "".concat(members[0].nickname, " ").concat(stringSet.TYPING_INDICATOR__IS_TYPING);
        }
        if (members && members.length === 2) {
            return "".concat(members[0].nickname, " ").concat(stringSet.TYPING_INDICATOR__AND, " ").concat(members[1].nickname, " ").concat(stringSet.TYPING_INDICATOR__ARE_TYPING);
        }
        return stringSet.TYPING_INDICATOR__MULTIPLE_TYPING;
    }
    return React__default.default.createElement(React__default.default.Fragment, null, getText());
};
var TypingIndicator = function (_a) {
    var _b, _c, _d;
    var channelUrl = _a.channelUrl;
    var state = useSendbird.useSendbird().state;
    var sb = (_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 logger = (_d = state === null || state === void 0 ? void 0 : state.config) === null || _d === void 0 ? void 0 : _d.logger;
    var _e = React.useState(uuid.uuidv4()), handlerId = _e[0], setHandlerId = _e[1];
    var _f = React.useState([]), typingMembers = _f[0], setTypingMembers = _f[1];
    React.useEffect(function () {
        var _a;
        if ((_a = sb === null || sb === void 0 ? void 0 : sb.groupChannel) === null || _a === void 0 ? void 0 : _a.addGroupChannelHandler) {
            sb.groupChannel.removeGroupChannelHandler(handlerId);
            var newHandlerId = uuid.uuidv4();
            var handler = new groupChannel.GroupChannelHandler({
                onTypingStatusUpdated: function (groupChannel) {
                    // there is a possible warning in here - setState called after unmount
                    logger.info('Channel > Typing Indicator: onTypingStatusUpdated', groupChannel);
                    if (groupChannel.url === channelUrl) {
                        var members = groupChannel.getTypingUsers();
                        setTypingMembers(members);
                    }
                },
            });
            sb.groupChannel.addGroupChannelHandler(newHandlerId, handler);
            setHandlerId(newHandlerId);
        }
        return function () {
            var _a;
            setTypingMembers([]);
            if ((_a = sb === null || sb === void 0 ? void 0 : sb.groupChannel) === null || _a === void 0 ? void 0 : _a.removeGroupChannelHandler) {
                sb.groupChannel.removeGroupChannelHandler(handlerId);
            }
        };
    }, [channelUrl]);
    return (React__default.default.createElement(ui_Label.Label, { className: "sendbird-conversation__footer__typing-indicator__text", type: ui_Label.LabelTypography.CAPTION_2, color: ui_Label.LabelColors.ONBACKGROUND_2 },
        React__default.default.createElement(TypingIndicatorText, { members: typingMembers })));
};

exports.TypingIndicator = TypingIndicator;
exports.TypingIndicatorText = TypingIndicatorText;
exports.default = TypingIndicator;
//# sourceMappingURL=TypingIndicator.js.map