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

Merge pull request #825 from RyloRiz/dev

Browse Source 
Created an 'x' button to clear search query
This commit is contained in:
mrjvs 2024-01-30 20:50:29 +01:00 committed by GitHub
commit 81515528cb
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
7 changed files with 22 additions and 3 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -9,7 +9,7 @@ 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;
}
@ -57,6 +57,20 @@ export const SearchBarInput = forwardRef<HTMLInputElement, SearchBarProps>(
className="w-full flex-1 bg-transparent px-4 py-4 pl-12 text-search-text placeholder-search-placeholder focus:outline-none sm:py-4 sm:pr-2"
placeholder={props.placeholder}
/>
{props.value.length > 0 && (
<div
onClick={() => {
props.onUnFocus("");
if (ref && typeof ref !== "function") {
ref.current?.focus();
}
}}
className="cursor-pointer hover:text-white absolute bottom-0 right-2 top-0 flex justify-center my-auto h-10 w-10 items-center hover:bg-search-hoverBackground active:scale-110 text-search-icon rounded-full transition-[transform,background-color] duration-200"
>
<Icon icon={Icons.X} className="transition-colors duration-200" />
</div>
)}
</Flare.Child>
</Flare.Base>
);

4
src/hooks/useSearchQuery.ts
View File

@ -33,8 +33,8 @@ export function useSearchQuery(): [
);
};
const onUnFocus = () => {
updateParams(search, true);
const onUnFocus = (newSearch?: string) => {
updateParams(newSearch ?? search, true);
};
return [search, updateParams, onUnFocus];

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,

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