Mirrors/movie-web
2
0
Fork 0
mirror of https://github.com/movie-web/movie-web.git synced 2024-09-21 10:19:56 +02:00
Code Issues Packages Projects Releases Wiki Activity

Removed clear pointer/action when not visible

Browse Source
This commit is contained in:
RyloRiz 2024-01-27 21:38:01 -08:00
parent 2a93804fbd
commit 32c6bf12c7
1 changed files with 8 additions and 4 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

12
src/components/form/SearchBar.tsx
View File

@ -15,13 +15,15 @@ export interface SearchBarProps {
export const SearchBarInput = forwardRef<HTMLInputElement, SearchBarProps>(
(props, ref) => {
const [canClear, setCanClear] = useState(false);
const [focused, setFocused] = useState(false);
const clearButtonRef = useRef<HTMLDivElement>(null);
function setSearch(value: string) {
props.onChange(value, false);
const opacity = value.length > 0 ? "1" : "0";
clearButtonRef.current!.style.opacity = opacity;
setCanClear(value.length > 0);
clearButtonRef.current!.style.opacity = canClear ? "1" : "0";
clearButtonRef.current!.style.cursor = canClear ? "pointer" : "auto";
}
function refocusSearch() {
@ -79,8 +81,10 @@ export const SearchBarInput = forwardRef<HTMLInputElement, SearchBarProps>(
<div
ref={clearButtonRef}
onClick={() => {
setSearch("");
setTimeout(() => refocusSearch(), 10);
if (canClear) {
setSearch("");
setTimeout(() => refocusSearch(), 10);
}
}}
className="group/clear cursor-pointer absolute p-1 bottom-0 right-2 top-0 flex justify-center my-auto max-h-10 max-w-10 h-full w-full items-center hover:bg-search-hoverBackground active:scale-110 text-search-icon rounded-full opacity-0 transition duration-100"
>