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

Simplify header code

Browse source
This commit is contained in:
Jackson Harper 2024-02-14 13:58:06 +08:00
parent 1f7fe5a2b2
commit b4f3469210
1 changed files with 70 additions and 72 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

142
packages/web/components/templates/homeFeed/LibraryHeader.tsx
View file

@ -123,15 +123,6 @@ export function LibraryHeader(props: LibraryHeaderProps): JSX.Element {
}
function LargeHeaderLayout(props: LibraryHeaderProps): JSX.Element {
const [showSearchBar, setShowSearchBar] = useState(false)
const [pinnedSearches, setPinnedSearches] = usePersistedState<
PinnedSearch[] | null
>({
key: `--library-pinned-searches`,
initialValue: [],
isSessionStorage: false,
})
return (
<HStack
alignment="center"
@ -147,74 +138,81 @@ function LargeHeaderLayout(props: LibraryHeaderProps): JSX.Element {
<MultiSelectControls {...props} />
</HStack>
) : (
<>
<SpanBox
css={{
display: 'none',
'@mdDown': { display: 'flex' },
}}
>
<MenuHeaderButton {...props} />
</SpanBox>
<Button
title="Select multiple"
style="plainIcon"
css={{ display: 'flex', '&:hover': { opacity: '1.0' } }}
onClick={(e) => {
props.setMultiSelectMode('visible')
e.preventDefault()
}}
>
<HeaderCheckboxIcon />
</Button>
{showSearchBar ? (
<SearchBox {...props} setShowSearchBar={setShowSearchBar} />
) : (
<Button
title="search"
style="plainIcon"
css={{ display: 'flex', '&:hover': { opacity: '1.0' } }}
onClick={(e) => {
setShowSearchBar(true)
e.preventDefault()
}}
>
<HeaderSearchIcon />
</Button>
)}
<Button
title={
props.layout == 'GRID_LAYOUT'
? 'Switch to list layout'
: 'Switch to grid layout'
}
style="plainIcon"
css={{
display: 'flex',
marginLeft: 'auto',
'&:hover': { opacity: '1.0' },
}}
onClick={(e) => {
props.updateLayout(
props.layout == 'GRID_LAYOUT' ? 'LIST_LAYOUT' : 'GRID_LAYOUT'
)
e.preventDefault()
}}
>
{props.layout == 'LIST_LAYOUT' ? (
<HeaderToggleGridIcon />
) : (
<HeaderToggleListIcon />
)}
</Button>
</>
<HeaderControls {...props} />
)}
</HStack>
)
}
const HeaderControls = (props: LibraryHeaderProps): JSX.Element => {
const [showSearchBar, setShowSearchBar] = useState(false)
return (
<>
<SpanBox
css={{
display: 'none',
'@mdDown': { display: 'flex' },
}}
>
<MenuHeaderButton {...props} />
</SpanBox>
<Button
title="Select multiple"
style="plainIcon"
css={{ display: 'flex', '&:hover': { opacity: '1.0' } }}
onClick={(e) => {
props.setMultiSelectMode('visible')
e.preventDefault()
}}
>
<HeaderCheckboxIcon />
</Button>
{showSearchBar ? (
<SearchBox {...props} setShowSearchBar={setShowSearchBar} />
) : (
<Button
title="search"
style="plainIcon"
css={{ display: 'flex', '&:hover': { opacity: '1.0' } }}
onClick={(e) => {
setShowSearchBar(true)
e.preventDefault()
}}
>
<HeaderSearchIcon />
</Button>
)}
<Button
title={
props.layout == 'GRID_LAYOUT'
? 'Switch to list layout'
: 'Switch to grid layout'
}
style="plainIcon"
css={{
display: 'flex',
marginLeft: 'auto',
'&:hover': { opacity: '1.0' },
}}
onClick={(e) => {
props.updateLayout(
props.layout == 'GRID_LAYOUT' ? 'LIST_LAYOUT' : 'GRID_LAYOUT'
)
e.preventDefault()
}}
>
{props.layout == 'LIST_LAYOUT' ? (
<HeaderToggleGridIcon />
) : (
<HeaderToggleListIcon />
)}
</Button>
</>
)
}
type MenuHeaderButtonProps = {
showFilterMenu: boolean
setShowFilterMenu: (show: boolean) => void