@sendbird/uikit-react 3.9.0 → 3.9.1-rc-2

package/dist/cjs/CreateOpenChannel.js

@@ -0,0 +1,35 @@
+'use strict';
+
+var React = require('react');
+var CreateOpenChannel_components_CreateOpenChannelUI = require('./CreateOpenChannel/components/CreateOpenChannelUI.js');
+var CreateOpenChannel_context = require('./CreateOpenChannel/context.js');
+require('./chunks/bundle--gwwLhzk.js');
+require('./chunks/bundle-4c_n4Hqm.js');
+require('./chunks/bundle-oTWBtf3l.js');
+require('./chunks/bundle-9-nr_N-b.js');
+require('./chunks/bundle-0pCHXNhB.js');
+require('./ui/ImageRenderer.js');
+require('./chunks/bundle-f_lSJlZS.js');
+require('./chunks/bundle-NrEnVvdl.js');
+require('./ui/Icon.js');
+require('./chunks/bundle-V1HT7uWN.js');
+require('./chunks/bundle-4RnnhACR.js');
+require('./ui/Button.js');
+require('./chunks/bundle-2Gla4s_W.js');
+require('react-dom');
+require('./chunks/bundle-oXJwwgxy.js');
+require('./ui/IconButton.js');
+require('./ui/Input.js');
+require('./ui/TextButton.js');
+require('./chunks/bundle-NE9TILWI.js');
+require('./useSendbirdStateContext.js');
+require('./withSendbird.js');
+
+function CreateOpenChannel(_a) {
+    var className = _a.className, onCreateChannel = _a.onCreateChannel, onBeforeCreateChannel = _a.onBeforeCreateChannel, closeModal = _a.closeModal, renderHeader = _a.renderHeader, renderProfileInput = _a.renderProfileInput;
+    return (React.createElement(CreateOpenChannel_context.CreateOpenChannelProvider, { className: className, onCreateChannel: onCreateChannel, onBeforeCreateChannel: onBeforeCreateChannel },
+        React.createElement(CreateOpenChannel_components_CreateOpenChannelUI, { closeModal: closeModal, renderHeader: renderHeader, renderProfileInput: renderProfileInput })));
+}
+
+module.exports = CreateOpenChannel;
+//# sourceMappingURL=CreateOpenChannel.js.map

package/dist/cjs/EditUserProfile/components/EditUserProfileUI.js

@@ -0,0 +1,125 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var React = require('react');
+var useSendbirdStateContext = require('../../useSendbirdStateContext.js');
+var EditUserProfile_context = require('../context.js');
+var LocalizationContext = require('../../chunks/bundle--gwwLhzk.js');
+var actionTypes = require('../../chunks/bundle-zpXEP6A3.js');
+var ui_Modal = require('../../chunks/bundle-2Gla4s_W.js');
+require('../../chunks/bundle-0pCHXNhB.js');
+var ui_Label = require('../../chunks/bundle-4RnnhACR.js');
+var ui_Button = require('../../ui/Button.js');
+var ui_Input = require('../../ui/Input.js');
+var ui_Avatar = require('../../chunks/bundle-9-nr_N-b.js');
+var ui_TextButton = require('../../ui/TextButton.js');
+var ui_Icon = require('../../ui/Icon.js');
+require('../../withSendbird.js');
+require('../../chunks/bundle-4c_n4Hqm.js');
+require('../../chunks/bundle-oTWBtf3l.js');
+require('react-dom');
+require('../../chunks/bundle-V1HT7uWN.js');
+require('../../chunks/bundle-oXJwwgxy.js');
+require('../../ui/IconButton.js');
+require('../../ui/ImageRenderer.js');
+require('../../chunks/bundle-f_lSJlZS.js');
+require('../../chunks/bundle-NrEnVvdl.js');
+require('../../chunks/bundle-NE9TILWI.js');
+
+var EditUserProfileUIView = function (_a) {
+    var _b;
+    var formRef = _a.formRef, inputRef = _a.inputRef, onThemeChange = _a.onThemeChange, setProfileImage = _a.setProfileImage;
+    var _c = useSendbirdStateContext.useSendbirdStateContext(), stores = _c.stores, config = _c.config;
+    var theme = config.theme, setCurrentTheme = config.setCurrentTheme;
+    var user = (_b = stores.userStore) === null || _b === void 0 ? void 0 : _b.user;
+    var stringSet = LocalizationContext.useLocalization().stringSet;
+    var _d = React.useState(null), currentImg = _d[0], setCurrentImg = _d[1];
+    var hiddenInputRef = React.useRef(null);
+    return (React.createElement("form", { className: "sendbird-edit-user-profile", ref: formRef, onSubmit: function (e) { e.preventDefault(); } },
+        React.createElement("section", { className: "sendbird-edit-user-profile__img" },
+            React.createElement(ui_Input.InputLabel, null, stringSet.EDIT_PROFILE__IMAGE_LABEL),
+            React.createElement("div", { className: "sendbird-edit-user-profile__img__avatar" },
+                React.createElement(ui_Avatar.Avatar, { width: "80px", height: "80px", src: currentImg || (user === null || user === void 0 ? void 0 : user.profileUrl) })),
+            React.createElement("input", { ref: hiddenInputRef, type: "file", accept: "image/gif, image/jpeg, image/png", style: { display: 'none' }, onChange: function (e) {
+                    setCurrentImg(URL.createObjectURL(e.target.files[0]));
+                    setProfileImage(e.target.files[0]);
+                    hiddenInputRef.current.value = '';
+                } }),
+            React.createElement(ui_TextButton, { className: "sendbird-edit-user-profile__img__avatar-button", disableUnderline: true, onClick: function () { return hiddenInputRef.current.click(); } },
+                React.createElement(ui_Label.Label, { type: ui_Label.LabelTypography.BUTTON_1, color: ui_Label.LabelColors.PRIMARY }, stringSet.EDIT_PROFILE__IMAGE_UPLOAD))),
+        React.createElement("section", { className: "sendbird-edit-user-profile__name" },
+            React.createElement(ui_Input.InputLabel, null, stringSet.EDIT_PROFILE__NICKNAME_LABEL),
+            React.createElement(ui_Input.default, { required: (user === null || user === void 0 ? void 0 : user.nickname) !== '', name: "sendbird-edit-user-profile__name__input", ref: inputRef, value: user === null || user === void 0 ? void 0 : user.nickname, placeHolder: stringSet.EDIT_PROFILE__NICKNAME_PLACEHOLDER })),
+        React.createElement("section", { className: "sendbird-edit-user-profile__userid" },
+            React.createElement(ui_Input.InputLabel, null, stringSet.EDIT_PROFILE__USERID_LABEL),
+            React.createElement(ui_Input.default, { disabled: true, name: "sendbird-edit-user-profile__userid__input", value: user === null || user === void 0 ? void 0 : user.userId })),
+        React.createElement("section", { className: "sendbird-edit-user-profile__theme" },
+            React.createElement(ui_Input.InputLabel, null, stringSet.EDIT_PROFILE__THEME_LABEL),
+            React.createElement("div", { className: "sendbird-edit-user-profile__theme__theme-icon" }, theme === 'dark'
+                ? (React.createElement(ui_Icon.default, { onClick: function () {
+                        setCurrentTheme('light');
+                        onThemeChange === null || onThemeChange === void 0 ? void 0 : onThemeChange('light');
+                    }, type: ui_Icon.IconTypes.TOGGLE_ON, width: 44, height: 24 }))
+                : (React.createElement(ui_Icon.default, { onClick: function () {
+                        setCurrentTheme('dark');
+                        onThemeChange === null || onThemeChange === void 0 ? void 0 : onThemeChange('dark');
+                    }, type: ui_Icon.IconTypes.TOGGLE_OFF, width: 44, height: 24 }))))));
+};
+
+var handleUpdateUserInfo = function (_a) {
+    var _b, _c, _d;
+    var globalContext = _a.globalContext, formRef = _a.formRef, inputRef = _a.inputRef, profileImage = _a.profileImage, onEditProfile = _a.onEditProfile;
+    var stores = globalContext.stores, dispatchers = globalContext.dispatchers;
+    var sdk = stores.sdkStore.sdk;
+    var user = stores.userStore.user;
+    var userDispatcher = dispatchers.userDispatcher;
+    if ((user === null || user === void 0 ? void 0 : user.nickname) !== '' && !inputRef.current.value) {
+        (_c = (_b = formRef.current).reportValidity) === null || _c === void 0 ? void 0 : _c.call(_b); // might not work in explorer
+        return;
+    }
+    sdk === null || sdk === void 0 ? void 0 : sdk.updateCurrentUserInfo({
+        nickname: (_d = inputRef === null || inputRef === void 0 ? void 0 : inputRef.current) === null || _d === void 0 ? void 0 : _d.value,
+        profileImage: profileImage,
+    }).then(function (updatedUser) {
+        userDispatcher({ type: actionTypes.USER_ACTIONS.UPDATE_USER_INFO, payload: updatedUser });
+        onEditProfile === null || onEditProfile === void 0 ? void 0 : onEditProfile(updatedUser);
+    });
+};
+var useEditUserProfileUISates = function (_a) {
+    var onEditProfile = _a.onEditProfile;
+    var globalContext = useSendbirdStateContext.useSendbirdStateContext();
+    var inputRef = React.useRef(null);
+    var formRef = React.useRef(null);
+    var _b = React.useState(null), profileImage = _b[0], setProfileImage = _b[1];
+    var updateUserInfo = function () {
+        handleUpdateUserInfo({
+            globalContext: globalContext,
+            formRef: formRef,
+            inputRef: inputRef,
+            profileImage: profileImage,
+            onEditProfile: onEditProfile,
+        });
+    };
+    return {
+        formRef: formRef,
+        inputRef: inputRef,
+        updateUserInfo: updateUserInfo,
+        profileImage: profileImage,
+        setProfileImage: setProfileImage,
+    };
+};
+var EditUserProfileUI = function () {
+    var editProfileContext = EditUserProfile_context.useEditUserProfileContext();
+    var onEditProfile = editProfileContext.onEditProfile, onCancel = editProfileContext.onCancel, onThemeChange = editProfileContext.onThemeChange;
+    var stringSet = React.useContext(LocalizationContext.LocalizationContext).stringSet;
+    var _a = useEditUserProfileUISates({ onEditProfile: onEditProfile }), formRef = _a.formRef, inputRef = _a.inputRef, updateUserInfo = _a.updateUserInfo, setProfileImage = _a.setProfileImage;
+    return (React.createElement(ui_Modal.Modal, { titleText: stringSet.EDIT_PROFILE__TITLE, submitText: stringSet.BUTTON__SAVE, type: ui_Button.ButtonTypes.PRIMARY, onCancel: onCancel, isFullScreenOnMobile: true, onSubmit: updateUserInfo },
+        React.createElement(EditUserProfileUIView, { formRef: formRef, inputRef: inputRef, setProfileImage: setProfileImage, onThemeChange: onThemeChange })));
+};
+
+exports.EditUserProfileUI = EditUserProfileUI;
+exports.EditUserProfileUIView = EditUserProfileUIView;
+exports.default = EditUserProfileUI;
+exports.useEditUserProfileUISates = useEditUserProfileUISates;
+//# sourceMappingURL=EditUserProfileUI.js.map

package/dist/cjs/EditUserProfile/components/EditUserProfileUI.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"EditUserProfileUI.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/dist/cjs/EditUserProfile.js

@@ -0,0 +1,36 @@
+'use strict';
+
+var React = require('react');
+var EditUserProfile_context = require('./EditUserProfile/context.js');
+var EditUserProfile_components_EditUserProfileUI = require('./EditUserProfile/components/EditUserProfileUI.js');
+require('./useSendbirdStateContext.js');
+require('./withSendbird.js');
+require('./chunks/bundle-0pCHXNhB.js');
+require('./chunks/bundle--gwwLhzk.js');
+require('./chunks/bundle-4c_n4Hqm.js');
+require('./chunks/bundle-oTWBtf3l.js');
+require('./chunks/bundle-zpXEP6A3.js');
+require('./chunks/bundle-2Gla4s_W.js');
+require('react-dom');
+require('./chunks/bundle-V1HT7uWN.js');
+require('./chunks/bundle-oXJwwgxy.js');
+require('./ui/IconButton.js');
+require('./ui/Button.js');
+require('./chunks/bundle-4RnnhACR.js');
+require('./ui/Icon.js');
+require('./ui/Input.js');
+require('./chunks/bundle-9-nr_N-b.js');
+require('./ui/ImageRenderer.js');
+require('./chunks/bundle-f_lSJlZS.js');
+require('./chunks/bundle-NrEnVvdl.js');
+require('./ui/TextButton.js');
+require('./chunks/bundle-NE9TILWI.js');
+
+var EditUserProfile = function (props) {
+    var onEditProfile = props.onEditProfile, onCancel = props.onCancel, onThemeChange = props.onThemeChange;
+    return (React.createElement(EditUserProfile_context.EditUserProfileProvider, { onEditProfile: onEditProfile, onCancel: onCancel, onThemeChange: onThemeChange },
+        React.createElement(EditUserProfile_components_EditUserProfileUI.EditUserProfileUI, null)));
+};
+
+module.exports = EditUserProfile;
+//# sourceMappingURL=EditUserProfile.js.map

package/dist/cjs/MessageSearch/components/MessageSearchUI.js

@@ -0,0 +1,94 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var React = require('react');
+var LocalizationContext = require('../../chunks/bundle--gwwLhzk.js');
+var MessageSearch_context = require('../context.js');
+var ui_MessageSearchItem = require('../../ui/MessageSearchItem.js');
+var ui_PlaceHolder = require('../../ui/PlaceHolder.js');
+var ui_MessageSearchFileItem = require('../../ui/MessageSearchFileItem.js');
+require('../../chunks/bundle-4c_n4Hqm.js');
+require('../../chunks/bundle-oTWBtf3l.js');
+require('../../useSendbirdStateContext.js');
+require('../../withSendbird.js');
+require('../../chunks/bundle-0pCHXNhB.js');
+require('../../chunks/bundle-3CEbSubz.js');
+require('../../chunks/bundle-9pKlhVIU.js');
+require('../../chunks/bundle-aKKIV6sp.js');
+require('../../chunks/bundle-9-nr_N-b.js');
+require('../../ui/ImageRenderer.js');
+require('../../chunks/bundle-f_lSJlZS.js');
+require('../../chunks/bundle-NrEnVvdl.js');
+require('../../ui/Icon.js');
+require('../../chunks/bundle-V1HT7uWN.js');
+require('../../chunks/bundle-4RnnhACR.js');
+require('../../ui/Loader.js');
+require('../../chunks/bundle-5ApFd_AY.js');
+require('../../utils/message/getOutgoingMessageState.js');
+require('../../chunks/bundle-tWIm10AV.js');
+require('../../chunks/bundle-Et2Mrxtk.js');
+
+var COMPONENT_CLASS_NAME = 'sendbird-message-search';
+var MessageSearchUI = function (_a) {
+    var renderPlaceHolderError = _a.renderPlaceHolderError, renderPlaceHolderLoading = _a.renderPlaceHolderLoading, renderPlaceHolderNoString = _a.renderPlaceHolderNoString, renderPlaceHolderEmptyList = _a.renderPlaceHolderEmptyList, renderSearchItem = _a.renderSearchItem;
+    var _b = MessageSearch_context.useMessageSearchContext(), isInvalid = _b.isInvalid, searchString = _b.searchString, requestString = _b.requestString, currentChannel = _b.currentChannel, retryCount = _b.retryCount, setRetryCount = _b.setRetryCount, loading = _b.loading, scrollRef = _b.scrollRef, hasMoreResult = _b.hasMoreResult, onScroll = _b.onScroll, allMessages = _b.allMessages, onResultClick = _b.onResultClick, selectedMessageId = _b.selectedMessageId, setSelectedMessageId = _b.setSelectedMessageId;
+    var stringSet = React.useContext(LocalizationContext.LocalizationContext).stringSet;
+    var handleRetryToConnect = function () {
+        setRetryCount(retryCount + 1);
+    };
+    var handleOnScroll = function (e) {
+        var scrollElement = e.target;
+        var scrollTop = scrollElement.scrollTop, scrollHeight = scrollElement.scrollHeight, clientHeight = scrollElement.clientHeight;
+        if (!hasMoreResult) {
+            return;
+        }
+        if (scrollTop + clientHeight >= scrollHeight - 1) {
+            onScroll(function () {
+                // after load more searched messages
+            });
+        }
+    };
+    var getChannelName = function () {
+        if (currentChannel && (currentChannel === null || currentChannel === void 0 ? void 0 : currentChannel.name) && (currentChannel === null || currentChannel === void 0 ? void 0 : currentChannel.name) !== 'Group Channel') {
+            return currentChannel === null || currentChannel === void 0 ? void 0 : currentChannel.name;
+        }
+        if (currentChannel && ((currentChannel === null || currentChannel === void 0 ? void 0 : currentChannel.name) === 'Group Channel' || !(currentChannel === null || currentChannel === void 0 ? void 0 : currentChannel.name))) {
+            return currentChannel.members.map(function (member) { return member.nickname || stringSet.NO_NAME; }).join(', ');
+        }
+        return stringSet.NO_TITLE;
+    };
+    if (isInvalid && searchString && requestString) {
+        return (renderPlaceHolderError === null || renderPlaceHolderError === void 0 ? void 0 : renderPlaceHolderError()) || (React.createElement("div", { className: COMPONENT_CLASS_NAME },
+            React.createElement(ui_PlaceHolder.default, { type: ui_PlaceHolder.PlaceHolderTypes.WRONG, retryToConnect: handleRetryToConnect })));
+    }
+    if (loading && searchString && requestString) {
+        return (renderPlaceHolderLoading === null || renderPlaceHolderLoading === void 0 ? void 0 : renderPlaceHolderLoading()) || (React.createElement("div", { className: COMPONENT_CLASS_NAME },
+            React.createElement(ui_PlaceHolder.default, { type: ui_PlaceHolder.PlaceHolderTypes.SEARCHING })));
+    }
+    if (!searchString) {
+        return (renderPlaceHolderNoString === null || renderPlaceHolderNoString === void 0 ? void 0 : renderPlaceHolderNoString()) || (React.createElement("div", { className: COMPONENT_CLASS_NAME },
+            React.createElement(ui_PlaceHolder.default, { type: ui_PlaceHolder.PlaceHolderTypes.SEARCH_IN, searchInString: getChannelName() })));
+    }
+    return (React.createElement("div", { className: COMPONENT_CLASS_NAME, onScroll: handleOnScroll, ref: scrollRef }, (allMessages.length > 0)
+        ? (allMessages.map(function (message) {
+            if (renderSearchItem) {
+                return renderSearchItem({ message: message, onResultClick: onResultClick });
+            }
+            if (message.messageType === 'file') {
+                return (React.createElement(ui_MessageSearchFileItem, { className: "".concat(COMPONENT_CLASS_NAME, "__message-search-item"), message: message, key: message.messageId, selected: (selectedMessageId === message.messageId), onClick: function () {
+                        onResultClick(message);
+                        setSelectedMessageId(message.messageId);
+                    } }));
+            }
+            return (React.createElement(ui_MessageSearchItem, { className: "".concat(COMPONENT_CLASS_NAME, "__message-search-item"), message: message, key: message.messageId, selected: (selectedMessageId === message.messageId), onClick: function () {
+                    onResultClick(message);
+                    setSelectedMessageId(message.messageId);
+                } }));
+        }))
+        : (renderPlaceHolderEmptyList === null || renderPlaceHolderEmptyList === void 0 ? void 0 : renderPlaceHolderEmptyList()) || (React.createElement(ui_PlaceHolder.default, { type: ui_PlaceHolder.PlaceHolderTypes.NO_RESULTS }))));
+};
+
+exports.MessageSearchUI = MessageSearchUI;
+exports.default = MessageSearchUI;
+//# sourceMappingURL=MessageSearchUI.js.map

package/dist/cjs/MessageSearch/context.js

@@ -0,0 +1,261 @@
+'use strict';
+
+var React = require('react');
+var useSendbirdStateContext = require('../useSendbirdStateContext.js');
+var _tslib = require('../chunks/bundle-0pCHXNhB.js');
+require('../withSendbird.js');
+
+var GET_SEARCHED_MESSAGES = 'GET_SEARCHED_MESSAGES';
+var GET_NEXT_SEARCHED_MESSAGES = 'GET_NEXT_SEARCHED_MESSAGES';
+var START_MESSAGE_SEARCH = 'START_MESSAGE_SEARCH';
+var START_GETTING_SEARCHED_MESSAGES = 'START_GETTING_SEARCHED_MESSAGES';
+var SET_QUERY_INVALID = 'SET_QUERY_INVALID';
+var SET_CURRENT_CHANNEL = 'SET_CURRENT_CHANNEL';
+var CHANNEL_INVALID = 'CHANNEL_INVALID';
+var RESET_SEARCH_STRING = 'RESET_SEARCH_STRING';
+
+function reducer(state, action) {
+    switch (action.type) {
+        case SET_CURRENT_CHANNEL: {
+            var currentChannel = action.payload;
+            return _tslib.__assign(_tslib.__assign({}, state), { currentChannel: currentChannel, initialized: true });
+        }
+        case CHANNEL_INVALID: {
+            return _tslib.__assign(_tslib.__assign({}, state), { currentChannel: null, initialized: false });
+        }
+        case GET_SEARCHED_MESSAGES: {
+            var _a = action.payload, messages = _a.messages, createdQuery = _a.createdQuery;
+            if (createdQuery
+                && createdQuery.channelUrl === (state === null || state === void 0 ? void 0 : state.currentMessageSearchQuery).channelUrl
+                && createdQuery.key === (state === null || state === void 0 ? void 0 : state.currentMessageSearchQuery).key) {
+                return _tslib.__assign(_tslib.__assign({}, state), { loading: false, isInvalid: false, allMessages: _tslib.__spreadArray([], messages, true), hasMoreResult: (state === null || state === void 0 ? void 0 : state.currentMessageSearchQuery).hasNext });
+            }
+            return _tslib.__assign({}, state);
+        }
+        case SET_QUERY_INVALID: {
+            return _tslib.__assign(_tslib.__assign({}, state), { isInvalid: true });
+        }
+        case START_MESSAGE_SEARCH: {
+            return _tslib.__assign(_tslib.__assign({}, state), { isInvalid: false, loading: false });
+        }
+        case START_GETTING_SEARCHED_MESSAGES: {
+            var currentMessageSearchQuery = action.payload;
+            return _tslib.__assign(_tslib.__assign({}, state), { loading: true, currentMessageSearchQuery: currentMessageSearchQuery });
+        }
+        case GET_NEXT_SEARCHED_MESSAGES: {
+            var messages = action.payload;
+            return _tslib.__assign(_tslib.__assign({}, state), { allMessages: _tslib.__spreadArray(_tslib.__spreadArray([], state.allMessages, true), messages, true), hasMoreResult: (state === null || state === void 0 ? void 0 : state.currentMessageSearchQuery).hasNext });
+        }
+        case RESET_SEARCH_STRING: {
+            return _tslib.__assign(_tslib.__assign({}, state), { allMessages: [] });
+        }
+        default: {
+            return state;
+        }
+    }
+}
+
+var initialState = {
+    allMessages: [],
+    loading: false,
+    isInvalid: false,
+    initialized: false,
+    currentChannel: null,
+    currentMessageSearchQuery: null,
+    hasMoreResult: false,
+};
+
+function useSetChannel(_a, _b) {
+    var channelUrl = _a.channelUrl, sdkInit = _a.sdkInit;
+    var sdk = _b.sdk, logger = _b.logger, messageSearchDispatcher = _b.messageSearchDispatcher;
+    React.useEffect(function () {
+        if (channelUrl && sdkInit && (sdk === null || sdk === void 0 ? void 0 : sdk.groupChannel)) {
+            sdk.groupChannel.getChannel(channelUrl).then(function (groupChannel) {
+                logger.info('MessageSearch | useSetChannel group channel', groupChannel);
+                messageSearchDispatcher({
+                    type: SET_CURRENT_CHANNEL,
+                    payload: groupChannel,
+                });
+            }).catch(function () {
+                messageSearchDispatcher({
+                    type: CHANNEL_INVALID,
+                    payload: null,
+                });
+            });
+        }
+    }, [channelUrl, sdkInit]);
+}
+
+var MessageSearchOrder;
+(function (MessageSearchOrder) {
+    MessageSearchOrder["SCORE"] = "score";
+    MessageSearchOrder["TIMESTAMP"] = "ts";
+})(MessageSearchOrder || (MessageSearchOrder = {}));
+function useGetSearchedMessages(_a, _b) {
+    var currentChannel = _a.currentChannel, channelUrl = _a.channelUrl, requestString = _a.requestString, messageSearchQuery = _a.messageSearchQuery, onResultLoaded = _a.onResultLoaded, retryCount = _a.retryCount;
+    var sdk = _b.sdk, logger = _b.logger, messageSearchDispatcher = _b.messageSearchDispatcher;
+    React.useEffect(function () {
+        messageSearchDispatcher({
+            type: START_MESSAGE_SEARCH,
+            payload: null,
+        });
+        if (sdk && channelUrl && sdk.createMessageSearchQuery && currentChannel) {
+            if (requestString) {
+                currentChannel.refresh().then(function (channel) {
+                    var inputSearchMessageQueryObject = _tslib.__assign({ order: MessageSearchOrder.TIMESTAMP, channelUrl: channelUrl, messageTimestampFrom: channel.invitedAt, keyword: requestString }, messageSearchQuery);
+                    var createdQuery = sdk.createMessageSearchQuery(inputSearchMessageQueryObject);
+                    createdQuery.next().then(function (messages) {
+                        logger.info('MessageSearch | useGetSearchedMessages: succeeded getting messages', messages);
+                        messageSearchDispatcher({
+                            type: GET_SEARCHED_MESSAGES,
+                            payload: {
+                                messages: messages,
+                                createdQuery: createdQuery,
+                            },
+                        });
+                        if (onResultLoaded && typeof onResultLoaded === 'function') {
+                            onResultLoaded(messages, null);
+                        }
+                    }).catch(function (error) {
+                        logger.warning('MessageSearch | useGetSearchedMessages: getting failed', error);
+                        messageSearchDispatcher({
+                            type: SET_QUERY_INVALID,
+                            payload: null,
+                        });
+                        if (onResultLoaded && typeof onResultLoaded === 'function') {
+                            onResultLoaded(null, error);
+                        }
+                    });
+                    messageSearchDispatcher({
+                        type: START_GETTING_SEARCHED_MESSAGES,
+                        payload: createdQuery,
+                    });
+                });
+            }
+            else {
+                logger.info('MessageSearch | useGetSeasrchedMessages: search string is empty');
+            }
+        }
+    }, [channelUrl, messageSearchQuery, requestString, currentChannel, retryCount]);
+}
+
+function useScrollCallback(_a, _b) {
+    var currentMessageSearchQuery = _a.currentMessageSearchQuery, hasMoreResult = _a.hasMoreResult, onResultLoaded = _a.onResultLoaded;
+    var logger = _b.logger, messageSearchDispatcher = _b.messageSearchDispatcher;
+    return React.useCallback(function (cb) {
+        if (!hasMoreResult) {
+            logger.warning('MessageSearch | useScrollCallback: no more searched results', hasMoreResult);
+        }
+        if (currentMessageSearchQuery && currentMessageSearchQuery.hasNext) {
+            currentMessageSearchQuery.next().then(function (messages) {
+                logger.info('MessageSearch | useScrollCallback: succeeded getting searched messages', messages);
+                messageSearchDispatcher({
+                    type: GET_NEXT_SEARCHED_MESSAGES,
+                    payload: messages,
+                });
+                cb(messages, null);
+                if (onResultLoaded && typeof onResultLoaded === 'function') {
+                    onResultLoaded(messages, null);
+                }
+            }).catch(function (error) {
+                logger.warning('MessageSearch | useScrollCallback: failed getting searched messages', error);
+                cb(null, error);
+                if (onResultLoaded && typeof onResultLoaded === 'function') {
+                    onResultLoaded(null, error);
+                }
+            });
+        }
+        else {
+            logger.warning('MessageSearch | useScrollCallback: no currentMessageSearchQuery');
+        }
+    }, [currentMessageSearchQuery, hasMoreResult]);
+}
+
+var DEBOUNCING_TIME = 500;
+function useSearchStringEffect(_a, _b) {
+    var searchString = _a.searchString;
+    var messageSearchDispatcher = _b.messageSearchDispatcher;
+    var _c = React.useState(''), requestString = _c[0], setRequestString = _c[1];
+    var _d = React.useState(null), debouncingTimer = _d[0], setDebouncingTimer = _d[1];
+    React.useEffect(function () {
+        clearTimeout(debouncingTimer);
+        if (searchString) {
+            setDebouncingTimer(setTimeout(function () {
+                setRequestString(searchString);
+            }, DEBOUNCING_TIME));
+        }
+        else {
+            setRequestString('');
+            messageSearchDispatcher({
+                type: RESET_SEARCH_STRING,
+                payload: '',
+            });
+        }
+    }, [searchString]);
+    return requestString;
+}
+
+var MessageSearchContext = React.createContext(undefined);
+var MessageSearchProvider = function (props) {
+    var _a, _b, _c, _d, _e;
+    var 
+    // message search props
+    channelUrl = props.channelUrl, searchString = props.searchString, messageSearchQuery = props.messageSearchQuery, onResultLoaded = props.onResultLoaded, onResultClick = props.onResultClick;
+    var globalState = useSendbirdStateContext.useSendbirdStateContext();
+    // hook variables
+    var _f = React.useState(0), retryCount = _f[0], setRetryCount = _f[1]; // this is a trigger flag for activating useGetSearchMessages
+    var _g = React.useState(0), selectedMessageId = _g[0], setSelectedMessageId = _g[1];
+    var _h = React.useReducer(reducer, initialState), messageSearchStore = _h[0], messageSearchDispatcher = _h[1];
+    var allMessages = messageSearchStore.allMessages, loading = messageSearchStore.loading, isInvalid = messageSearchStore.isInvalid, currentChannel = messageSearchStore.currentChannel, currentMessageSearchQuery = messageSearchStore.currentMessageSearchQuery, hasMoreResult = messageSearchStore.hasMoreResult;
+    var logger = (_a = globalState === null || globalState === void 0 ? void 0 : globalState.config) === null || _a === void 0 ? void 0 : _a.logger;
+    var sdk = (_c = (_b = globalState === null || globalState === void 0 ? void 0 : globalState.stores) === null || _b === void 0 ? void 0 : _b.sdkStore) === null || _c === void 0 ? void 0 : _c.sdk;
+    var sdkInit = (_e = (_d = globalState === null || globalState === void 0 ? void 0 : globalState.stores) === null || _d === void 0 ? void 0 : _d.sdkStore) === null || _e === void 0 ? void 0 : _e.initialized;
+    var scrollRef = React.useRef(null);
+    var handleOnScroll = function (e) {
+        var scrollElement = e.target;
+        var scrollTop = scrollElement.scrollTop, scrollHeight = scrollElement.scrollHeight, clientHeight = scrollElement.clientHeight;
+        if (!hasMoreResult) {
+            return;
+        }
+        if (scrollTop + clientHeight >= scrollHeight) {
+            onScroll(function () {
+                // after load more searched messages
+            });
+        }
+    };
+    useSetChannel({ channelUrl: channelUrl, sdkInit: sdkInit }, { sdk: sdk, logger: logger, messageSearchDispatcher: messageSearchDispatcher });
+    var requestString = useSearchStringEffect({ searchString: searchString }, { messageSearchDispatcher: messageSearchDispatcher });
+    useGetSearchedMessages({ currentChannel: currentChannel, channelUrl: channelUrl, requestString: requestString, messageSearchQuery: messageSearchQuery, onResultLoaded: onResultLoaded, retryCount: retryCount }, { sdk: sdk, logger: logger, messageSearchDispatcher: messageSearchDispatcher });
+    var onScroll = useScrollCallback({ currentMessageSearchQuery: currentMessageSearchQuery, hasMoreResult: hasMoreResult, onResultLoaded: onResultLoaded }, { logger: logger, messageSearchDispatcher: messageSearchDispatcher });
+    var handleRetryToConnect = function () {
+        setRetryCount(retryCount + 1);
+    };
+    return (React.createElement(MessageSearchContext.Provider, { value: {
+            channelUrl: channelUrl,
+            searchString: searchString,
+            requestString: requestString,
+            messageSearchQuery: messageSearchQuery,
+            onResultLoaded: onResultLoaded,
+            onResultClick: onResultClick,
+            retryCount: retryCount,
+            setRetryCount: setRetryCount,
+            selectedMessageId: selectedMessageId,
+            setSelectedMessageId: setSelectedMessageId,
+            messageSearchDispatcher: messageSearchDispatcher,
+            allMessages: allMessages,
+            loading: loading,
+            isInvalid: isInvalid,
+            currentChannel: currentChannel,
+            currentMessageSearchQuery: currentMessageSearchQuery,
+            hasMoreResult: hasMoreResult,
+            onScroll: onScroll,
+            scrollRef: scrollRef,
+            handleRetryToConnect: handleRetryToConnect,
+            handleOnScroll: handleOnScroll,
+        } }, props === null || props === void 0 ? void 0 : props.children));
+};
+var useMessageSearchContext = function () { return React.useContext(MessageSearchContext); };
+
+exports.MessageSearchProvider = MessageSearchProvider;
+exports.useMessageSearchContext = useMessageSearchContext;
+//# sourceMappingURL=context.js.map

package/dist/cjs/MessageSearch.js

@@ -0,0 +1,79 @@
+'use strict';
+
+var React = require('react');
+var MessageSearch_components_MessageSearchUI = require('./MessageSearch/components/MessageSearchUI.js');
+var LocalizationContext = require('./chunks/bundle--gwwLhzk.js');
+var ui_Icon = require('./ui/Icon.js');
+var ui_IconButton = require('./ui/IconButton.js');
+var ui_Label = require('./chunks/bundle-4RnnhACR.js');
+var ui_Loader = require('./ui/Loader.js');
+var MessageSearch_context = require('./MessageSearch/context.js');
+require('./ui/MessageSearchItem.js');
+require('./chunks/bundle-0pCHXNhB.js');
+require('./chunks/bundle-3CEbSubz.js');
+require('./chunks/bundle-oTWBtf3l.js');
+require('./chunks/bundle-9pKlhVIU.js');
+require('./chunks/bundle-aKKIV6sp.js');
+require('./chunks/bundle-9-nr_N-b.js');
+require('./ui/ImageRenderer.js');
+require('./chunks/bundle-f_lSJlZS.js');
+require('./chunks/bundle-NrEnVvdl.js');
+require('./ui/PlaceHolder.js');
+require('./ui/MessageSearchFileItem.js');
+require('./chunks/bundle-5ApFd_AY.js');
+require('./utils/message/getOutgoingMessageState.js');
+require('./chunks/bundle-tWIm10AV.js');
+require('./chunks/bundle-Et2Mrxtk.js');
+require('./chunks/bundle-4c_n4Hqm.js');
+require('./chunks/bundle-V1HT7uWN.js');
+require('./useSendbirdStateContext.js');
+require('./withSendbird.js');
+
+var COMPONENT_CLASS_NAME = 'sendbird-message-search-pannel';
+function MessageSearchPannel(props) {
+    var channelUrl = props.channelUrl, onResultClick = props.onResultClick, onCloseClick = props.onCloseClick, messageSearchQuery = props.messageSearchQuery, renderPlaceHolderError = props.renderPlaceHolderError, renderPlaceHolderLoading = props.renderPlaceHolderLoading, renderPlaceHolderNoString = props.renderPlaceHolderNoString, renderPlaceHolderEmptyList = props.renderPlaceHolderEmptyList, renderSearchItem = props.renderSearchItem;
+    var _a = React.useState(''), searchString = _a[0], setSearchString = _a[1];
+    var _b = React.useState(''), inputString = _b[0], setInputString = _b[1];
+    var _c = React.useState(false), loading = _c[0], setLoading = _c[1];
+    var stringSet = React.useContext(LocalizationContext.LocalizationContext).stringSet;
+    var timeout = null;
+    React.useEffect(function () {
+        if (timeout) {
+            clearTimeout(timeout);
+        }
+        timeout = setTimeout(function () {
+            setSearchString(inputString);
+            setLoading(true);
+            timeout = null;
+        }, 500);
+    }, [inputString]);
+    var handleOnChangeInputString = function (e) {
+        setInputString(e.target.value);
+    };
+    var handleOnResultLoaded = function () {
+        setLoading(false);
+    };
+    var handleOnClickResetStringButton = function (e) {
+        e.stopPropagation();
+        setInputString('');
+        setSearchString('');
+    };
+    return (React.createElement("div", { className: COMPONENT_CLASS_NAME },
+        React.createElement("div", { className: "".concat(COMPONENT_CLASS_NAME, "__header") },
+            React.createElement(ui_Label.Label, { className: "".concat(COMPONENT_CLASS_NAME, "__header__title"), type: ui_Label.LabelTypography.H_2, color: ui_Label.LabelColors.ONBACKGROUND_1 }, stringSet.SEARCH_IN_CHANNEL),
+            React.createElement(ui_IconButton, { className: "".concat(COMPONENT_CLASS_NAME, "__header__close-button"), width: "32px", height: "32px", onClick: onCloseClick },
+                React.createElement(ui_Icon.default, { type: ui_Icon.IconTypes.CLOSE, fillColor: ui_Icon.IconColors.ON_BACKGROUND_1, width: "22px", height: "22px" }))),
+        React.createElement("div", { className: "".concat(COMPONENT_CLASS_NAME, "__input") },
+            React.createElement("div", { className: "".concat(COMPONENT_CLASS_NAME, "__input__container") },
+                React.createElement(ui_Icon.default, { className: "".concat(COMPONENT_CLASS_NAME, "__input__container__search-icon"), type: ui_Icon.IconTypes.SEARCH, fillColor: ui_Icon.IconColors.ON_BACKGROUND_3, width: "24px", height: "24px" }),
+                React.createElement("input", { className: "".concat(COMPONENT_CLASS_NAME, "__input__container__input-area"), placeholder: stringSet.SEARCH, value: inputString, onChange: handleOnChangeInputString }),
+                inputString && loading && (React.createElement(ui_Loader, { className: "".concat(COMPONENT_CLASS_NAME, "__input__container__spinner"), width: "20px", height: "20px" },
+                    React.createElement(ui_Icon.default, { type: ui_Icon.IconTypes.SPINNER, fillColor: ui_Icon.IconColors.PRIMARY, width: "20px", height: "20px" }))),
+                !loading && inputString && (React.createElement(ui_Icon.default, { className: "".concat(COMPONENT_CLASS_NAME, "__input__container__reset-input-button"), type: ui_Icon.IconTypes.REMOVE, fillColor: ui_Icon.IconColors.ON_BACKGROUND_3, width: "20px", height: "20px", onClick: handleOnClickResetStringButton })))),
+        React.createElement("div", { className: "".concat(COMPONENT_CLASS_NAME, "__message-search") },
+            React.createElement(MessageSearch_context.MessageSearchProvider, { channelUrl: channelUrl, searchString: searchString, onResultClick: onResultClick, onResultLoaded: handleOnResultLoaded, messageSearchQuery: messageSearchQuery },
+                React.createElement(MessageSearch_components_MessageSearchUI.MessageSearchUI, { renderPlaceHolderError: renderPlaceHolderError, renderPlaceHolderLoading: renderPlaceHolderLoading, renderPlaceHolderNoString: renderPlaceHolderNoString, renderPlaceHolderEmptyList: renderPlaceHolderEmptyList, renderSearchItem: renderSearchItem })))));
+}
+
+module.exports = MessageSearchPannel;
+//# sourceMappingURL=MessageSearch.js.map