@droppii-org/chat-sdk
Version:
Droppii React Chat SDK
34 lines (33 loc) • 2.48 kB
JavaScript
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import { Button, Drawer, Input } from "antd";
import { Icon } from "../icon";
import { useIsMobile } from "../../hooks/common/useIsMobile";
import useBoolean from "ahooks/lib/useBoolean";
import { useTranslation } from "react-i18next";
import { useEffect, useRef, useState } from "react";
import SearchMessageOnCurrentConversation from "./SearchMessageOnCurrentConversation";
const SearchDrawer = () => {
const { t } = useTranslation();
const searchInputRef = useRef(null);
const [isOpen, { toggle }] = useBoolean(false);
const [search, setSearch] = useState("");
const isMobile = useIsMobile();
useEffect(() => {
if (isOpen) {
const timer = setTimeout(() => {
var _a;
(_a = searchInputRef.current) === null || _a === void 0 ? void 0 : _a.focus();
}, 100);
return () => clearTimeout(timer);
}
}, [isOpen]);
return (_jsxs("div", { children: [_jsx(Button, { type: "text", shape: "default", className: "text-gray-500 w-8 h-8 p-0", onClick: toggle, children: _jsx(Icon, { icon: "search-o", size: 22 }) }), _jsx(Drawer, { open: isOpen, onClose: toggle, mask: false, closeIcon: false, styles: {
body: {
padding: 0,
height: "100%",
},
}, getContainer: false, width: isMobile ? "100%" : 360, children: _jsxs("div", { className: "flex flex-col h-full", children: [_jsxs("div", { className: "flex items-center justify-between p-3", children: [_jsx("span", { className: "text-lg font-medium", children: "T\u00ECm ki\u1EBFm tin nh\u1EAFn" }), _jsx(Button, { type: "text", shape: "default", className: "text-gray-500 w-8 h-8 p-0", onClick: toggle, children: _jsx(Icon, { icon: "close-b", size: 22 }) })] }), _jsx("div", { className: "px-3", children: _jsx(Input, { ref: searchInputRef, placeholder: t("search"), prefix: _jsx(Icon, { icon: "search-o", size: 18, className: "text-gray-400" }), onChange: (e) => {
setSearch(e.target.value);
}, className: "rounded-lg text-sm", size: "large", allowClear: true, value: search, autoFocus: false }) }), _jsx("div", { className: "flex-1 py-3 overflow-auto", children: _jsx(SearchMessageOnCurrentConversation, { searchTerm: search, onClose: toggle }) })] }) })] }));
};
export default SearchDrawer;