added search bar improvements
This commit is contained in:
subnub
@@ -10,9 +10,13 @@ import { FileInterface } from "../../types/file";
|
||||
import classNames from "classnames";
|
||||
import { closeDrawer } from "../../reducers/leftSection";
|
||||
import { setPopupSelect } from "../../reducers/selected";
|
||||
import CloseIcon from "../../icons/CloseIcon";
|
||||
import Spinner from "../Spinner/Spinner";
|
||||
import SearchIcon from "../../icons/SearchIcon";
|
||||
|
||||
const SearchBar = memo(() => {
|
||||
const [searchText, setSearchText] = useState("");
|
||||
const [showSuggestions, setShowSuggestions] = useState(false);
|
||||
const dispatch = useAppDispatch();
|
||||
const [debouncedSearchText, setDebouncedSearchText] = useState("");
|
||||
const { data: searchSuggestions, isLoading: isLoadingSearchSuggestions } =
|
||||
@@ -39,6 +43,7 @@ const SearchBar = memo(() => {
|
||||
|
||||
const outOfContainerClick = useCallback(() => {
|
||||
closeDrawer();
|
||||
setShowSuggestions(false);
|
||||
}, []);
|
||||
|
||||
const { wrapperRef } = useClickOutOfBounds(outOfContainerClick);
|
||||
@@ -87,6 +92,7 @@ const SearchBar = memo(() => {
|
||||
|
||||
const onFocus = () => {
|
||||
dispatch(closeDrawer());
|
||||
setShowSuggestions(true);
|
||||
};
|
||||
|
||||
const searchTextPlaceholder = useMemo(() => {
|
||||
@@ -106,32 +112,30 @@ const SearchBar = memo(() => {
|
||||
// @ts-ignore
|
||||
ref={wrapperRef}
|
||||
>
|
||||
<a
|
||||
href="#"
|
||||
className={classNames(
|
||||
"absolute",
|
||||
!isLoadingSearchSuggestions ? "left-[15px]" : "left-[5px]"
|
||||
<div className="absolute left-1">
|
||||
{searchText.length !== 0 && !isLoadingSearchSuggestions && (
|
||||
<CloseIcon
|
||||
className="w-5 h-5 ml-3 cursor-pointer text-primary hover:text-primary-hover"
|
||||
onClick={resetState}
|
||||
/>
|
||||
)}
|
||||
>
|
||||
{isLoadingSearchSuggestions ? (
|
||||
<div className="spinner-small"></div>
|
||||
) : (
|
||||
<img src="/assets/searchicon.svg" alt="search" />
|
||||
)}
|
||||
</a>
|
||||
{isLoadingSearchSuggestions && <div className="spinner-small"></div>}
|
||||
{searchText.length === 0 && <SearchIcon className="w-5 h-5 ml-3" />}
|
||||
</div>
|
||||
<input
|
||||
type="text"
|
||||
onChange={onChangeSearch}
|
||||
value={searchText}
|
||||
placeholder={searchTextPlaceholder}
|
||||
className="w-full min-h-[42px] border border-[#BEC9D3] pl-[45px] pr-[15px] text-[16px] text-black rounded-[5px]"
|
||||
className="w-full h-10 border border-gray-300 pl-11 pr-4 text-base text-black rounded-md"
|
||||
onFocus={onFocus}
|
||||
id="search-bar"
|
||||
autoComplete="off"
|
||||
/>
|
||||
<div
|
||||
className="absolute left-0 bg-white shadow-xl rounded-[4px] w-full top-[42px] max-h-[400px] overflow-y-scroll border border-[#BEC9D3]"
|
||||
className="absolute left-0 top-10 bg-white shadow-xl rounded-md w-full max-h-[400px] overflow-y-scroll border border-gray-secondary"
|
||||
style={
|
||||
debouncedSearchText.length !== 0 && !isLoadingSearchSuggestions
|
||||
debouncedSearchText.length !== 0 && showSuggestions
|
||||
? { display: "block" }
|
||||
: { display: "none" }
|
||||
}
|
||||
|
||||
@@ -26,13 +26,13 @@ const SearchBarItem = (props: SearchBarItemProps) => {
|
||||
if (type === "folder" && folder) {
|
||||
return (
|
||||
<div
|
||||
className="flex flex-row items-center p-2 overflow-hidden text-ellipsis hover:bg-[#f6f5fd] cursor-pointer border-y"
|
||||
className="flex flex-row items-center py-2 px-4 overflow-hidden text-ellipsis hover:bg-gray-secondary cursor-pointer border-y"
|
||||
key={folder._id}
|
||||
onClick={() => folderClick(folder)}
|
||||
>
|
||||
<div>
|
||||
<svg
|
||||
className="w-[30px] h-[30px] text-[#3c85ee]"
|
||||
className="w-7 h-7 text-primary"
|
||||
aria-hidden="true"
|
||||
focusable="false"
|
||||
data-prefix="fas"
|
||||
@@ -48,7 +48,7 @@ const SearchBarItem = (props: SearchBarItemProps) => {
|
||||
></path>
|
||||
</svg>
|
||||
</div>
|
||||
<span className="text-sm ml-4 text-ellipsis overflow-hidden whitespace-nowrap max-w-[50%]">
|
||||
<span className="text-sm ml-3 text-ellipsis overflow-hidden whitespace-nowrap">
|
||||
{folder.name}
|
||||
</span>
|
||||
</div>
|
||||
@@ -56,14 +56,14 @@ const SearchBarItem = (props: SearchBarItemProps) => {
|
||||
} else if (type === "file" && file) {
|
||||
return (
|
||||
<div
|
||||
className="flex flex-row items-center p-2 overflow-hidden text-ellipsis hover:bg-[#f6f5fd] cursor-pointer border-y"
|
||||
className="flex flex-row items-center py-2 px-4 overflow-hidden text-ellipsis hover:bg-gray-secondary cursor-pointer border-y"
|
||||
key={file._id}
|
||||
onClick={() => fileClick(file)}
|
||||
>
|
||||
<div>
|
||||
<span className="inline-flex items-center max-w-[27px] min-w-[27px] min-h-[27px] max-h-[27px]">
|
||||
<span className="inline-flex items-center">
|
||||
<div
|
||||
className="h-[27px] w-[27px] bg-red-500 rounded-[3px] flex flex-row justify-center items-center"
|
||||
className="h-7 w-7 bg-red-500 rounded-md flex flex-row justify-center items-center"
|
||||
style={{ background: imageColor }}
|
||||
>
|
||||
<span className="font-semibold text-[9.5px] text-white">
|
||||
@@ -72,7 +72,7 @@ const SearchBarItem = (props: SearchBarItemProps) => {
|
||||
</div>
|
||||
</span>
|
||||
</div>
|
||||
<span className="text-sm ml-4 text-ellipsis overflow-hidden whitespace-nowrap">
|
||||
<span className="text-sm ml-3 text-ellipsis overflow-hidden whitespace-nowrap">
|
||||
{file.filename}
|
||||
</span>
|
||||
</div>
|
||||
|
||||
@@ -1,7 +1,3 @@
|
||||
import React from "react";
|
||||
|
||||
export default () => (
|
||||
<div className="spinner-image spinner-image-grey">
|
||||
|
||||
</div>
|
||||
)
|
||||
export default () => <div className="spinner-image spinner-image-grey"></div>;
|
||||
|
||||
@@ -0,0 +1,30 @@
|
||||
type SearchIconType = React.SVGAttributes<SVGSVGElement>;
|
||||
|
||||
const SearchIcon: React.FC<SearchIconType> = (props) => {
|
||||
return (
|
||||
<svg
|
||||
width="20"
|
||||
height="20"
|
||||
viewBox="0 0 20 20"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
{...props}
|
||||
>
|
||||
<g id="Group 5">
|
||||
<path
|
||||
id="Shape"
|
||||
fill-rule="evenodd"
|
||||
clip-rule="evenodd"
|
||||
d="M0 8.77551C0 3.93682 3.93682 0 8.77551 0C13.6145 0 17.551 3.93682 17.551 8.77551C17.551 13.6145 13.6145 17.551 8.77551 17.551C3.93682 17.551 0 13.6145 0 8.77551ZM1.6201 8.77555C1.6201 12.721 4.83004 15.931 8.77551 15.931C12.721 15.931 15.9309 12.721 15.9309 8.77551C15.9309 4.83004 12.721 1.6201 8.77551 1.6201C4.83004 1.6201 1.6201 4.83008 1.6201 8.77555Z"
|
||||
fill="currentColor"
|
||||
/>
|
||||
<path
|
||||
id="Path"
|
||||
d="M19.7603 18.6036L15.0699 13.9133C14.7503 13.5937 14.2328 13.5937 13.9132 13.9133C13.5936 14.2326 13.5936 14.7507 13.9132 15.0701L18.6035 19.7604C18.7633 19.9202 18.9725 20.0001 19.1819 20.0001C19.391 20.0001 19.6005 19.9202 19.7603 19.7604C20.0799 19.4411 20.0799 18.923 19.7603 18.6036Z"
|
||||
fill="currentColor"
|
||||
/>
|
||||
</g>
|
||||
</svg>
|
||||
);
|
||||
};
|
||||
|
||||
export default SearchIcon;
|
||||
Reference in New Issue
Block a user