stream-chat-react/dist/components/ChannelSearch/SearchBar.js

React components to create chat conversations or livestream style chat

var __assign = (this && this.__assign) || function () {
    __assign = Object.assign || function(t) {
        for (var s, i = 1, n = arguments.length; i < n; i++) {
            s = arguments[i];
            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
                t[p] = s[p];
        }
        return t;
    };
    return __assign.apply(this, arguments);
};
var __rest = (this && this.__rest) || function (s, e) {
    var t = {};
    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
        t[p] = s[p];
    if (s != null && typeof Object.getOwnPropertySymbols === "function")
        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
                t[p[i]] = s[p[i]];
        }
    return t;
};
import React, { useCallback, useEffect, useRef, useState, } from 'react';
import clsx from 'clsx';
import { MenuIcon as DefaultMenuIcon, SearchIcon as DefaultSearchInputIcon, ReturnIcon, XIcon, } from './icons';
import { SearchInput as DefaultSearchInput } from './SearchInput';
var SearchBarButton = function (_a) {
    var children = _a.children, className = _a.className, onClick = _a.onClick;
    return (React.createElement("button", { className: clsx('str-chat__channel-search-bar-button', className), "data-testid": 'search-bar-button', onClick: onClick }, children));
};
// todo: add context menu control logic
export var SearchBar = function (props) {
    var activateSearch = props.activateSearch, AppMenu = props.AppMenu, _a = props.ClearInputIcon, ClearInputIcon = _a === void 0 ? XIcon : _a, exitSearch = props.exitSearch, _b = props.ExitSearchIcon, ExitSearchIcon = _b === void 0 ? ReturnIcon : _b, inputIsFocused = props.inputIsFocused, _c = props.MenuIcon, MenuIcon = _c === void 0 ? DefaultMenuIcon : _c, searchBarRef = props.searchBarRef, _d = props.SearchInput, SearchInput = _d === void 0 ? DefaultSearchInput : _d, _e = props.SearchInputIcon, SearchInputIcon = _e === void 0 ? DefaultSearchInputIcon : _e, inputProps = __rest(props, ["activateSearch", "AppMenu", "ClearInputIcon", "exitSearch", "ExitSearchIcon", "inputIsFocused", "MenuIcon", "searchBarRef", "SearchInput", "SearchInputIcon"]);
    var _f = useState(false), menuIsOpen = _f[0], setMenuIsOpen = _f[1];
    var appMenuRef = useRef(null);
    useEffect(function () {
        if (!appMenuRef.current)
            return;
        var handleKeyDown = function (event) {
            if (menuIsOpen && event.key === 'Escape') {
                setMenuIsOpen(false);
            }
        };
        var clickListener = function (e) {
            var _a;
            if (!(e.target instanceof HTMLElement) ||
                !menuIsOpen ||
                ((_a = appMenuRef.current) === null || _a === void 0 ? void 0 : _a.contains(e.target)))
                return;
            setMenuIsOpen(false);
        };
        document.addEventListener('keydown', handleKeyDown);
        document.addEventListener('click', clickListener);
        return function () {
            document.removeEventListener('keydown', handleKeyDown);
            document.removeEventListener('click', clickListener);
        };
    }, [menuIsOpen]);
    useEffect(function () {
        if (!props.inputRef.current)
            return;
        var handleFocus = function () {
            activateSearch();
        };
        var handleBlur = function (e) {
            e.stopPropagation(); // handle blur/focus state with React state
        };
        props.inputRef.current.addEventListener('focus', handleFocus);
        props.inputRef.current.addEventListener('blur', handleBlur);
        return function () {
            var _a, _b;
            (_a = props.inputRef.current) === null || _a === void 0 ? void 0 : _a.removeEventListener('focus', handleFocus);
            (_b = props.inputRef.current) === null || _b === void 0 ? void 0 : _b.addEventListener('blur', handleBlur);
        };
    }, []);
    var handleClearClick = useCallback(function () {
        var _a;
        exitSearch();
        (_a = inputProps.inputRef.current) === null || _a === void 0 ? void 0 : _a.focus();
    }, []);
    return (React.createElement("div", { className: 'str-chat__channel-search-bar', "data-testid": 'search-bar', ref: searchBarRef },
        inputIsFocused ? (React.createElement(SearchBarButton, { className: 'str-chat__channel-search-bar-button--exit-search', onClick: exitSearch },
            React.createElement(ExitSearchIcon, null))) : AppMenu ? (React.createElement(SearchBarButton, { className: 'str-chat__channel-search-bar-button--menu', onClick: function () { return setMenuIsOpen(function (prev) { return !prev; }); } },
            React.createElement(MenuIcon, null))) : null,
        React.createElement("div", { className: clsx('str-chat__channel-search-input--wrapper', inputProps.query && 'str-chat__channel-search-input--wrapper-active') },
            React.createElement("div", { className: 'str-chat__channel-search-input--icon' },
                React.createElement(SearchInputIcon, null)),
            React.createElement(SearchInput, __assign({}, inputProps)),
            React.createElement("button", { className: 'str-chat__channel-search-input--clear-button', "data-testid": 'clear-input-button', disabled: !inputProps.query, onClick: handleClearClick },
                React.createElement(ClearInputIcon, null))),
        menuIsOpen && AppMenu && (React.createElement("div", { ref: appMenuRef },
            React.createElement(AppMenu, null)))));
};