Benature/omnivore
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

adding the basic css to display the list

Browse Source
This commit is contained in:
Rupin Khandelwal
2022-09-06 15:34:22 -06:00
parent b739945a02
commit 0e91aeb2c7
2 changed files with 144 additions and 138 deletions
Download Patch File Download Diff File Expand all files Collapse all files

278
packages/web/components/templates/library/LibrarySearchBar.tsx
View File

@ -11,11 +11,13 @@ import { SearchCoordinator } from './LibraryContainer'
// Styles
const List = styled('ul', {
width: '65%',
alignSelf: 'center',
color: '#0A0806CC',
fontSize: 24,
fontWeight: '700',
width: '93%',
top: '65px',
left: '0',
color: 'var(--colors-utilityTextDefault)',
backgroundColor: 'var(--colors-grayBase)',
position: 'absolute',
zIndex: '2',
'@smDown': {
fontSize: 16,
},
@ -23,6 +25,7 @@ const List = styled('ul', {
const Item = styled('li', {
listStyleType: 'none',
p: '5px 5px 5px 35px',
})
export type LibrarySearchBarProps = {
@ -42,152 +45,153 @@ type OptionType = {
export function LibrarySearchBar(props: LibrarySearchBarProps): JSX.Element {
const [searchTerm, setSearchTerm] = useState('')
const [recentSearches, setRecentSearches] = useState(['apple', 'pear', 'orange', 'grape', 'banana'])
const [recentSearches, setRecentSearches] = useState([
'apple',
'pear',
'orange',
'grape',
'banana',
])
return (
<>
<VStack
alignment="start"
distribution="start"
css={{ pl: '32px', width: '100%', height: '100%' }}
>
<HStack
alignment="start"
distribution="start"
css={{ width: '100%', borderBottom: 'solid 1px $grayBorder' }}
>
<Downshift>
{({
getInputProps,
getRootProps,
getMenuProps,
getItemProps,
getToggleButtonProps,
isOpen,
highlightedIndex,
}) => (
<div
{...getRootProps({ refKey: 'ref' }, { suppressRefError: true })}
>
<form
style={{ width: '100%' }}
onSubmit={(event) => {
event.preventDefault()
// props.applySearchQuery(searchTerm || '')
// inputRef.current?.blur()
}}
{...getRootProps()}
>
<FormInput
css={{
width: '100%',
height: '80px',
fontSize: '24px',
fontFamily: 'Inter',
}}
type="text"
tabIndex={0}
value={searchTerm}
placeholder="Search"
onChange={(event) => {
setSearchTerm(event.target.value)
}}
{...getInputProps()}
/>
<Button {...getToggleButtonProps()}>
{isOpen ? '-' : '+'} .
</Button>
<List {...getMenuProps()}>
{isOpen &&
props.options?.map((item, index) => (
<Item
key={item.value}
{...getItemProps({
item,
index,
style: {
backgroundColor:
index === highlightedIndex
? 'lightgray'
: undefined,
},
})}
>
{item.value}
</Item>
))}
</List>
</form>
</div>
)}
</Downshift>
{!searchTerm && (
<Button
style="plainIcon"
onClick={(event) => {
// Display the advanced search sheet
}}
css={{
display: 'flex',
flexDirection: 'row',
height: '100%',
alignItems: 'center',
}}
>
<Sliders
size={24}
color={theme.colors.utilityTextDefault.toString()}
/>
</Button>
)}
{searchTerm && (
<Downshift>
{({
getInputProps,
getRootProps,
getMenuProps,
getItemProps,
getToggleButtonProps,
isOpen,
highlightedIndex,
}) => (
<VStack
alignment="start"
distribution="start"
css={{ pl: '32px', width: '100%', height: '100%' }}
>
<HStack
alignment="center"
alignment="start"
distribution="start"
css={{ height: '100%' }}
css={{ width: '100%', borderBottom: 'solid 1px $grayBorder' }}
{...getRootProps({ refKey: 'ref' }, { suppressRefError: true })}
>
<Button
style="plainIcon"
onClick={(event) => {
<form
style={{ width: '100%' }}
onSubmit={(event) => {
event.preventDefault()
setSearchTerm('')
//props.applySearchQuery('')
// props.applySearchQuery(searchTerm || '')
// inputRef.current?.blur()
}}
css={{
display: 'flex',
flexDirection: 'row',
mr: '16px',
height: '100%',
alignItems: 'center',
}}
{...getRootProps()}
>
<X
width={24}
height={24}
color={theme.colors.grayTextContrast.toString()}
<FormInput
css={{
width: '100%',
height: '80px',
fontSize: '24px',
fontFamily: 'Inter',
}}
type="text"
tabIndex={0}
value={searchTerm}
placeholder="Search"
onChange={(event) => {
setSearchTerm(event.target.value)
}}
{...getInputProps()}
/>
</Button>
</form>
<Button
style="ctaDarkYellow"
onClick={(event) => {
event.preventDefault()
//recentSearches.push({searchQuery: searchTerm, index: recentSearches.length })
localStorage.setItem(searchTerm, searchTerm)
//setRecentSearches(recentSearches)
<List {...getMenuProps()}>
{isOpen &&
recentSearches?.map((item, index) => (
<Item
key={item}
{...getItemProps({
item,
index,
style: {
backgroundColor:
index === highlightedIndex
? 'lightgray'
: undefined,
},
})}
>
{item}
</Item>
))}
</List>
// props.applySearchQuery('')
// inputRef.current?.blur()
}}
>
Search
</Button>
{searchTerm && (
<HStack
alignment="center"
distribution="start"
css={{ height: '100%' }}
>
<Button
style="plainIcon"
onClick={(event) => {
event.preventDefault()
setSearchTerm('')
//props.applySearchQuery('')
// inputRef.current?.blur()
}}
css={{
display: 'flex',
flexDirection: 'row',
mr: '16px',
height: '100%',
alignItems: 'center',
}}
>
<X
width={24}
height={24}
color={theme.colors.grayTextContrast.toString()}
/>
</Button>
<Button
style="ctaDarkYellow"
onClick={(event) => {
event.preventDefault()
//recentSearches.push({searchQuery: searchTerm, index: recentSearches.length })
localStorage.setItem(searchTerm, searchTerm)
//setRecentSearches(recentSearches)
// props.applySearchQuery('')
// inputRef.current?.blur()
}}
>
Search
</Button>
</HStack>
)}
{!searchTerm && (
<Button
style="plainIcon"
onClick={(event) => {
// Display the advanced search sheet
}}
css={{
display: 'flex',
flexDirection: 'row',
height: '100%',
alignItems: 'center',
}}
>
<Sliders
size={24}
color={theme.colors.utilityTextDefault.toString()}
/>
</Button>
)}
</HStack>
)}
</HStack>
</VStack>
</VStack>
)}
</Downshift>
</>
)
}

4
packages/web/styles/menu.css
View File

@ -1,5 +1,7 @@
/* Menu Override styles */
.pro-sidebar {
z-index: 1;
}
.pro-sidebar > .pro-sidebar-inner,
.pro-menu,
.pro-menu > ul > .pro-sub-menu > .pro-inner-list-item,