Mirrors/movie-web
2
0
Fork 0
mirror of https://github.com/movie-web/movie-web.git synced 2024-12-26 18:21:54 +01:00
Code Issues Packages Projects Releases Wiki Activity

Reviewed changes & simplified clearing process

Browse Source
This commit is contained in:
RyloRiz 2024-01-29 17:58:13 -08:00
parent 32c6bf12c7
commit 6cf870d246
6 changed files with 26 additions and 39 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -1,5 +1,5 @@
import c from "classnames";
import { forwardRef, useEffect, useRef, useState } from "react";
import { forwardRef, useState } from "react";
import { Flare } from "@/components/utils/Flare";
@ -9,38 +9,18 @@ import { TextInputControl } from "../text-inputs/TextInputControl";
export interface SearchBarProps {
placeholder?: string;
onChange: (value: string, force: boolean) => void;
onUnFocus: () => void;
onUnFocus: (newSearch?: string) => void;
value: string;
}
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);
setCanClear(value.length > 0);
clearButtonRef.current!.style.opacity = canClear ? "1" : "0";
clearButtonRef.current!.style.cursor = canClear ? "pointer" : "auto";
}
function refocusSearch() {
if (ref && typeof ref !== "function") {
ref.current?.blur();
setTimeout(() => ref.current?.focus(), 10);
setTimeout(() => ref.current?.blur(), 20);
setTimeout(() => ref.current?.focus(), 30);
}
}
useEffect(() => {
if (ref && typeof ref !== "function") {
setSearch(ref.current?.value || "");
}
});
return (
<Flare.Base
className={c({
@ -78,21 +58,22 @@ export const SearchBarInput = forwardRef<HTMLInputElement, SearchBarProps>(
placeholder={props.placeholder}
/>
<div
ref={clearButtonRef}
onClick={() => {
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"
>
<Icon
icon={Icons.X}
className="group-hover/clear:text-white transition duration-100"
/>
</div>
{props.value.length > 0 && (
<div
onClick={() => {
props.onUnFocus("");
if (ref && typeof ref !== "function") {
ref.current?.focus();
}
}}
className="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 transition duration-100"
>
<Icon
icon={Icons.X}
className="hover:text-white transition duration-100"
/>
</div>
)}
</Flare.Child>
</Flare.Base>
);

6
src/hooks/useSearchQuery.ts
View File

@ -33,8 +33,10 @@ export function useSearchQuery(): [
);
};
const onUnFocus = () => {
updateParams(search, true);
const onUnFocus = (newSearch?: string) => {
// eslint-disable-next-line eqeqeq
const updated = newSearch == undefined ? search : newSearch;
updateParams(updated, true);
};
return [search, updateParams, onUnFocus];

1
themes/list/blue.ts
View File

@ -111,6 +111,7 @@ export default createTheme({
search: {
background: tokens.shade.c500,
hoverBackground: tokens.shade.c600,
focused: tokens.shade.c400,
placeholder: tokens.shade.c100,
icon: tokens.shade.c100

1
themes/list/gray.ts
View File

@ -111,6 +111,7 @@ export default createTheme({
search: {
background: tokens.shade.c500,
hoverBackground: tokens.shade.c600,
focused: tokens.shade.c400,
placeholder: tokens.shade.c100,
icon: tokens.shade.c100

1
themes/list/red.ts
View File

@ -111,6 +111,7 @@ export default createTheme({
search: {
background: tokens.shade.c500,
hoverBackground: tokens.shade.c600,
focused: tokens.shade.c400,
placeholder: tokens.shade.c100,
icon: tokens.shade.c100

1
themes/list/teal.ts
View File

@ -111,6 +111,7 @@ export default createTheme({
search: {
background: tokens.shade.c500,
hoverBackground: tokens.shade.c600,
focused: tokens.shade.c400,
placeholder: tokens.shade.c100,
icon: tokens.shade.c100