@sendbird/uikit-react
Version:
Sendbird UIKit for React: A feature-rich and customizable chat UI kit with messaging, channel management, and user authentication.
83 lines (80 loc) • 5.54 kB
JavaScript
import React__default, { useState, useContext, useEffect } from 'react';
import { MessageSearchUI } from './MessageSearch/components/MessageSearchUI.js';
import { L as LocalizationContext } from './chunks/bundle-Del33VzI.js';
import Icon, { IconTypes, IconColors } from './ui/Icon.js';
import Loader from './ui/Loader.js';
import { a as MessageSearchProvider } from './chunks/bundle-HVqdm8Dj.js';
import Header from './ui/Header.js';
import './ui/MessageSearchItem.js';
import './chunks/bundle-yl5d1NoZ.js';
import './chunks/bundle-mGsud0ec.js';
import './chunks/bundle-fdEQfX2s.js';
import './chunks/bundle-BZGITC2g.js';
import './chunks/bundle-BhhLSKSz.js';
import './chunks/bundle-Cl9rtdlj.js';
import './chunks/bundle-CAEBoiEz.js';
import './ui/ImageRenderer.js';
import './chunks/bundle-MlG9piGf.js';
import './chunks/bundle-Dl_v8XoN.js';
import './chunks/bundle-viBng0Kh.js';
import './chunks/bundle-C1dqPUnT.js';
import './ui/PlaceHolder.js';
import './ui/MessageSearchFileItem.js';
import './chunks/bundle-vmZ9LoYK.js';
import '@sendbird/chat/groupChannel';
import './utils/message/getOutgoingMessageState.js';
import './chunks/bundle-DgosLQK9.js';
import './chunks/bundle-DEuCwnTn.js';
import './chunks/bundle-CqLLOVG5.js';
import './chunks/bundle-h6bAY7E9.js';
import './chunks/bundle-BUYU9H94.js';
import './chunks/bundle-i_3w58Zd.js';
import '@sendbird/chat';
import '@sendbird/chat/openChannel';
import './chunks/bundle-DBhJIxHw.js';
import './ui/TextButton.js';
import './chunks/bundle-Bokm7tQ9.js';
import './ui/IconButton.js';
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 = useState(''), searchString = _a[0], setSearchString = _a[1];
var _b = useState(''), inputString = _b[0], setInputString = _b[1];
var _c = useState(false), loading = _c[0], setLoading = _c[1];
var stringSet = useContext(LocalizationContext).stringSet;
var timeout = null;
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__default.createElement("div", { className: "sendbird-message-search-pannel" },
React__default.createElement(Header, { className: "sendbird-message-search-pannel__header", renderMiddle: function () { return (React__default.createElement(Header.Title, { title: stringSet.SEARCH_IN_CHANNEL })); }, renderRight: function () { return (React__default.createElement(Header.IconButton, { className: "sendbird-message-search-pannel__header__close-button", onClick: onCloseClick, type: IconTypes.CLOSE, color: IconColors.ON_BACKGROUND_1 })); } }),
React__default.createElement("div", { className: "sendbird-message-search-pannel__input" },
React__default.createElement("div", { className: "sendbird-message-search-pannel__input__container" },
React__default.createElement(Icon, { className: "sendbird-message-search-pannel__input__container__search-icon", type: IconTypes.SEARCH, fillColor: IconColors.ON_BACKGROUND_3, width: "24px", height: "24px" }),
React__default.createElement("input", { className: "sendbird-message-search-pannel__input__container__input-area", placeholder: stringSet.SEARCH, value: inputString, onChange: handleOnChangeInputString }),
inputString && loading && (React__default.createElement(Loader, { className: "sendbird-message-search-pannel__input__container__spinner", width: "20px", height: "20px" },
React__default.createElement(Icon, { type: IconTypes.SPINNER, fillColor: IconColors.PRIMARY, width: "20px", height: "20px" }))),
!loading && inputString && (React__default.createElement(Icon, { className: "sendbird-message-search-pannel__input__container__reset-input-button", type: IconTypes.REMOVE, fillColor: IconColors.ON_BACKGROUND_3, width: "20px", height: "20px", onClick: handleOnClickResetStringButton })))),
React__default.createElement("div", { className: "sendbird-message-search-pannel__message-search" },
React__default.createElement(MessageSearchProvider, { channelUrl: channelUrl, searchString: searchString, onResultClick: onResultClick, onResultLoaded: handleOnResultLoaded, messageSearchQuery: messageSearchQuery },
React__default.createElement(MessageSearchUI, { renderPlaceHolderError: renderPlaceHolderError, renderPlaceHolderLoading: renderPlaceHolderLoading, renderPlaceHolderNoString: renderPlaceHolderNoString, renderPlaceHolderEmptyList: renderPlaceHolderEmptyList, renderSearchItem: renderSearchItem })))));
}
export { MessageSearchPannel as default };
//# sourceMappingURL=MessageSearch.js.map