Mirrors/movie-web
2
0
Fork 0
mirror of https://github.com/movie-web/movie-web.git synced 2024-09-21 15:29:48 +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

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

@ -15,13 +15,15 @@ export interface SearchBarProps {
export const SearchBarInput = forwardRef<HTMLInputElement, SearchBarProps>( export const SearchBarInput = forwardRef<HTMLInputElement, SearchBarProps>(
(props, ref) => { (props, ref) => {
const [canClear, setCanClear] = useState(false);
const [focused, setFocused] = useState(false); const [focused, setFocused] = useState(false);
const clearButtonRef = useRef<HTMLDivElement>(null); const clearButtonRef = useRef<HTMLDivElement>(null);
function setSearch(value: string) { function setSearch(value: string) {
props.onChange(value, false); props.onChange(value, false);
const opacity = value.length > 0 ? "1" : "0"; setCanClear(value.length > 0);
clearButtonRef.current!.style.opacity = opacity; clearButtonRef.current!.style.opacity = canClear ? "1" : "0";
clearButtonRef.current!.style.cursor = canClear ? "pointer" : "auto";
} }
function refocusSearch() { function refocusSearch() {
@ -79,8 +81,10 @@ export const SearchBarInput = forwardRef<HTMLInputElement, SearchBarProps>(
<div <div
ref={clearButtonRef} ref={clearButtonRef}
onClick={() => { onClick={() => {
if (canClear) {
setSearch(""); setSearch("");
setTimeout(() => refocusSearch(), 10); 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" 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"
> >