Mirrors/movie-web
2
0
Fork 0
mirror of https://github.com/movie-web/movie-web.git synced 2024-12-28 02:31:48 +01: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 c from "classnames";
import { forwardRef, useRef, useState } from "react"; import { forwardRef, useEffect, useRef, useState } from "react";
import { Flare } from "@/components/utils/Flare"; import { Flare } from "@/components/utils/Flare";
@ -20,7 +20,8 @@ export const SearchBarInput = forwardRef<HTMLInputElement, SearchBarProps>(
function setSearch(value: string) { function setSearch(value: string) {
props.onChange(value, false); props.onChange(value, false);
clearButtonRef.current!.hidden = value.length >= 0; const opacity = value.length > 0 ? "1" : "0";
clearButtonRef.current!.style.opacity = opacity;
} }
function refocusSearch() { function refocusSearch() {
@ -32,6 +33,12 @@ export const SearchBarInput = forwardRef<HTMLInputElement, SearchBarProps>(
} }
} }
useEffect(() => {
if (ref && typeof ref !== "function") {
setSearch(ref.current?.value || "");
}
});
return ( return (
<Flare.Base <Flare.Base
className={c({ className={c({
@ -73,11 +80,14 @@ export const SearchBarInput = forwardRef<HTMLInputElement, SearchBarProps>(
ref={clearButtonRef} ref={clearButtonRef}
onClick={() => { onClick={() => {
setSearch(""); 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> </div>
</Flare.Child> </Flare.Child>
</Flare.Base> </Flare.Base>

1
themes/default.ts
View File

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