Mirrors/movie-web
2
0
Fork 0
mirror of https://github.com/movie-web/movie-web.git synced 2024-06-03 03:18:44 +02:00
Code Issues Packages Projects Releases Wiki Activity

Restyled clear button & visibility

Browse Source
This commit is contained in:
RyloRiz 2024-01-27 21:32:04 -08:00
parent ef9792827a
commit 2a93804fbd
2 changed files with 16 additions and 5 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -1,5 +1,5 @@
import c from "classnames";
import { forwardRef, useRef, useState } from "react";
import { forwardRef, useEffect, useRef, useState } from "react";
import { Flare } from "@/components/utils/Flare";
@ -20,7 +20,8 @@ export const SearchBarInput = forwardRef<HTMLInputElement, SearchBarProps>(
function setSearch(value: string) {
props.onChange(value, false);
clearButtonRef.current!.hidden = value.length >= 0;
const opacity = value.length > 0 ? "1" : "0";
clearButtonRef.current!.style.opacity = opacity;
}
function refocusSearch() {
@ -32,6 +33,12 @@ export const SearchBarInput = forwardRef<HTMLInputElement, SearchBarProps>(
}
}
useEffect(() => {
if (ref && typeof ref !== "function") {
setSearch(ref.current?.value || "");
}
});
return (
<Flare.Base
className={c({
@ -73,11 +80,14 @@ export const SearchBarInput = forwardRef<HTMLInputElement, SearchBarProps>(
ref={clearButtonRef}
onClick={() => {
setSearch("");
setTimeout(() => refocusSearch(), 100);
setTimeout(() => refocusSearch(), 10);
}}
className="cursor-pointer absolute bottom-0 right-5 top-0 flex max-h-14 items-center text-search-icon"
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"
>
<Icon icon={Icons.X} />
<Icon
icon={Icons.X}
className="group-hover/clear:text-white transition duration-100"
/>
</div>
</Flare.Child>
</Flare.Base>

1
themes/default.ts
View File

@ -160,6 +160,7 @@ export const defaultTheme = {
// search bar
search: {
background: tokens.shade.c500,
hoverBackground: tokens.shade.c600,
focused: tokens.shade.c400,
placeholder: tokens.shade.c100,
icon: tokens.shade.c100,