prehistoric-systems/omnivore
1
0
Fork 0
mirror of https://github.com/omnivore-app/omnivore.git synced 2026-03-11 08:54:26 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions

Adding onClick on X on the Menu list items, fixing layout and moving props of Downshift - that fixed the layout and click events

Browse source
This commit is contained in:
Rupin Khandelwal 2022-09-15 10:40:50 -06:00
parent eb98154b70
commit c6980fa843
1 changed files with 23 additions and 11 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

34
packages/web/components/templates/library/LibrarySearchBar.tsx
View file

@ -47,16 +47,19 @@ export function LibrarySearchBar(props: LibrarySearchBarProps): JSX.Element {
useEffect(() => {
setRecentSearches(Object.values(localStorage))
//localStorage.clear()
if (recentSearches.length > 0) {
console.log('recentSearches recentSearches', recentSearches)
}
}, [])
return (
<>
<Downshift
onChange={(selection) =>
console.log(
selection ? `You selected ${selection}` : 'Selection Cleared'
)
}
// onChange={(selection) =>
// console.log(
// selection ? `You selected ${selection}` : 'Selection Cleared'
// )
// }
itemToString={(item) => (item ? item : '')}
>
{({
@ -147,6 +150,7 @@ export function LibrarySearchBar(props: LibrarySearchBarProps): JSX.Element {
event.preventDefault()
if (inputValue !== null) {
localStorage.setItem(inputValue, inputValue)
setRecentSearches(Object.values(localStorage))
}
// props.applySearchQuery('')
// inputRef.current?.blur()
@ -170,7 +174,7 @@ export function LibrarySearchBar(props: LibrarySearchBarProps): JSX.Element {
{/* )} */}
</HStack>
<List {...getMenuProps()}>
<List>
{isOpen &&
recentSearches
.filter(
@ -178,10 +182,7 @@ export function LibrarySearchBar(props: LibrarySearchBarProps): JSX.Element {
)
.map((item, index) => (
<SpanBox
{...getItemProps({
item,
index,
})}
{...getMenuProps()}
key={item}
css={{
display: 'flex',
@ -198,11 +199,22 @@ export function LibrarySearchBar(props: LibrarySearchBarProps): JSX.Element {
}}
>
<Clock size={20} />
<Item>{item}</Item>
<Item
{...getItemProps({
item,
index,
})}
>
{item}
</Item>
<X
width={20}
height={20}
color={theme.colors.grayTextContrast.toString()}
onClick={() => {
localStorage.removeItem(`${item}`)
setRecentSearches(Object.values(localStorage))
}}
/>
</SpanBox>
))}