From 5be4833b8da535b8036714c51f37665832d5326a Mon Sep 17 00:00:00 2001 From: RyloRiz <91710711+RyloRiz@users.noreply.github.com> Date: Wed, 24 Jan 2024 18:41:45 -0800 Subject: [PATCH 1/6] Created an 'x' button to clear search query --- src/components/form/SearchBar.tsx | 9 +++++++++ 1 file changed, 9 insertions(+) diff --git a/src/components/form/SearchBar.tsx b/src/components/form/SearchBar.tsx index 05e8257d..93b5dbf7 100644 --- a/src/components/form/SearchBar.tsx +++ b/src/components/form/SearchBar.tsx @@ -57,6 +57,15 @@ export const SearchBarInput = forwardRef( 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} /> + +
{ + setSearch(""); + }} + className="cursor-pointer absolute bottom-0 right-5 top-0 flex max-h-14 items-center text-search-icon" + > + +
); From ef9792827a2cfa90d67bb8936b4f5fa5fdd27c54 Mon Sep 17 00:00:00 2001 From: RyloRiz <91710711+RyloRiz@users.noreply.github.com> Date: Sat, 27 Jan 2024 15:34:33 -0800 Subject: [PATCH 2/6] Fixed search query updating on clear --- src/components/form/SearchBar.tsx | 15 ++++++++++++++- 1 file changed, 14 insertions(+), 1 deletion(-) diff --git a/src/components/form/SearchBar.tsx b/src/components/form/SearchBar.tsx index 93b5dbf7..bf994c7b 100644 --- a/src/components/form/SearchBar.tsx +++ b/src/components/form/SearchBar.tsx @@ -1,5 +1,5 @@ import c from "classnames"; -import { forwardRef, useState } from "react"; +import { forwardRef, useRef, useState } from "react"; import { Flare } from "@/components/utils/Flare"; @@ -16,9 +16,20 @@ export interface SearchBarProps { export const SearchBarInput = forwardRef( (props, ref) => { const [focused, setFocused] = useState(false); + const clearButtonRef = useRef(null); function setSearch(value: string) { props.onChange(value, false); + clearButtonRef.current!.hidden = value.length >= 0; + } + + 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); + } } return ( @@ -59,8 +70,10 @@ export const SearchBarInput = forwardRef( />
{ setSearch(""); + setTimeout(() => refocusSearch(), 100); }} className="cursor-pointer absolute bottom-0 right-5 top-0 flex max-h-14 items-center text-search-icon" > From 2a93804fbd8ea216f102c77ca98655a4d4f9e81d Mon Sep 17 00:00:00 2001 From: RyloRiz <91710711+RyloRiz@users.noreply.github.com> Date: Sat, 27 Jan 2024 21:32:04 -0800 Subject: [PATCH 3/6] Restyled clear button & visibility --- src/components/form/SearchBar.tsx | 20 +++++++++++++++----- themes/default.ts | 1 + 2 files changed, 16 insertions(+), 5 deletions(-) diff --git a/src/components/form/SearchBar.tsx b/src/components/form/SearchBar.tsx index bf994c7b..71834a8a 100644 --- a/src/components/form/SearchBar.tsx +++ b/src/components/form/SearchBar.tsx @@ -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( 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( } } + useEffect(() => { + if (ref && typeof ref !== "function") { + setSearch(ref.current?.value || ""); + } + }); + return ( ( 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" > - +
diff --git a/themes/default.ts b/themes/default.ts index bd31b3ff..c4495a0e 100644 --- a/themes/default.ts +++ b/themes/default.ts @@ -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, From 32c6bf12c78ce4e666f5b5b1d312480ae274bf82 Mon Sep 17 00:00:00 2001 From: RyloRiz <91710711+RyloRiz@users.noreply.github.com> Date: Sat, 27 Jan 2024 21:38:01 -0800 Subject: [PATCH 4/6] Removed clear pointer/action when not visible --- src/components/form/SearchBar.tsx | 12 ++++++++---- 1 file changed, 8 insertions(+), 4 deletions(-) diff --git a/src/components/form/SearchBar.tsx b/src/components/form/SearchBar.tsx index 71834a8a..f09684fd 100644 --- a/src/components/form/SearchBar.tsx +++ b/src/components/form/SearchBar.tsx @@ -15,13 +15,15 @@ export interface SearchBarProps { export const SearchBarInput = forwardRef( (props, ref) => { + const [canClear, setCanClear] = useState(false); const [focused, setFocused] = useState(false); const clearButtonRef = useRef(null); function setSearch(value: string) { props.onChange(value, false); - const opacity = value.length > 0 ? "1" : "0"; - clearButtonRef.current!.style.opacity = opacity; + setCanClear(value.length > 0); + clearButtonRef.current!.style.opacity = canClear ? "1" : "0"; + clearButtonRef.current!.style.cursor = canClear ? "pointer" : "auto"; } function refocusSearch() { @@ -79,8 +81,10 @@ export const SearchBarInput = forwardRef(
{ - setSearch(""); - setTimeout(() => refocusSearch(), 10); + 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" > From 6cf870d2468efd64305c143f23a36e0fffc667b7 Mon Sep 17 00:00:00 2001 From: RyloRiz <91710711+RyloRiz@users.noreply.github.com> Date: Mon, 29 Jan 2024 17:58:13 -0800 Subject: [PATCH 5/6] Reviewed changes & simplified clearing process --- src/components/form/SearchBar.tsx | 55 ++++++++++--------------------- src/hooks/useSearchQuery.ts | 6 ++-- themes/list/blue.ts | 1 + themes/list/gray.ts | 1 + themes/list/red.ts | 1 + themes/list/teal.ts | 1 + 6 files changed, 26 insertions(+), 39 deletions(-) diff --git a/src/components/form/SearchBar.tsx b/src/components/form/SearchBar.tsx index f09684fd..8a7cfc4a 100644 --- a/src/components/form/SearchBar.tsx +++ b/src/components/form/SearchBar.tsx @@ -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( (props, ref) => { - const [canClear, setCanClear] = useState(false); const [focused, setFocused] = useState(false); - const clearButtonRef = useRef(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 ( ( placeholder={props.placeholder} /> -
{ - 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" - > - -
+ {props.value.length > 0 && ( +
{ + 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" + > + +
+ )} ); diff --git a/src/hooks/useSearchQuery.ts b/src/hooks/useSearchQuery.ts index 75cd2a28..23942c06 100644 --- a/src/hooks/useSearchQuery.ts +++ b/src/hooks/useSearchQuery.ts @@ -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]; diff --git a/themes/list/blue.ts b/themes/list/blue.ts index e10592dc..2cb43766 100644 --- a/themes/list/blue.ts +++ b/themes/list/blue.ts @@ -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 diff --git a/themes/list/gray.ts b/themes/list/gray.ts index c0c434e8..c6c0144d 100644 --- a/themes/list/gray.ts +++ b/themes/list/gray.ts @@ -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 diff --git a/themes/list/red.ts b/themes/list/red.ts index b42b935f..0ec319e8 100644 --- a/themes/list/red.ts +++ b/themes/list/red.ts @@ -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 diff --git a/themes/list/teal.ts b/themes/list/teal.ts index 742f4a32..1fb66ac4 100644 --- a/themes/list/teal.ts +++ b/themes/list/teal.ts @@ -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 From 5f4cff89755b5ab25af48f1b59c167d82f44f78b Mon Sep 17 00:00:00 2001 From: mrjvs Date: Tue, 30 Jan 2024 20:39:40 +0100 Subject: [PATCH 6/6] Cleanup some styling --- src/components/form/SearchBar.tsx | 7 ++----- src/hooks/useSearchQuery.ts | 4 +--- 2 files changed, 3 insertions(+), 8 deletions(-) diff --git a/src/components/form/SearchBar.tsx b/src/components/form/SearchBar.tsx index 8a7cfc4a..6ac6128f 100644 --- a/src/components/form/SearchBar.tsx +++ b/src/components/form/SearchBar.tsx @@ -66,12 +66,9 @@ export const SearchBarInput = forwardRef( 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" + 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" > - +
)} diff --git a/src/hooks/useSearchQuery.ts b/src/hooks/useSearchQuery.ts index 23942c06..425fe4f1 100644 --- a/src/hooks/useSearchQuery.ts +++ b/src/hooks/useSearchQuery.ts @@ -34,9 +34,7 @@ export function useSearchQuery(): [ }; const onUnFocus = (newSearch?: string) => { - // eslint-disable-next-line eqeqeq - const updated = newSearch == undefined ? search : newSearch; - updateParams(updated, true); + updateParams(newSearch ?? search, true); }; return [search, updateParams, onUnFocus];