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

resize the shortcuts tree view

Browse Source
This commit is contained in:
Jackson Harper
2024-06-12 21:43:49 +08:00
parent 25082b3182
commit 9f6e65cb9d
3 changed files with 11 additions and 5 deletions
Download Patch File Download Diff File Expand all files Collapse all files

11
packages/web/components/templates/navMenu/NavigationMenu.tsx
View File

@ -39,6 +39,7 @@ import { NavMoreButtonUpIcon } from '../../elements/icons/NavMoreButtonUp'
import { ShortcutFolderClosed } from '../../elements/icons/ShortcutFolderClosed' import { ShortcutFolderClosed } from '../../elements/icons/ShortcutFolderClosed'
import { TrashSectionIcon } from '../../elements/icons/TrashSectionIcon' import { TrashSectionIcon } from '../../elements/icons/TrashSectionIcon'
import { ShortcutFolderOpen } from '../../elements/icons/ShortcutFolderOpen' import { ShortcutFolderOpen } from '../../elements/icons/ShortcutFolderOpen'
import useResizeObserver from 'use-resize-observer'
export const LIBRARY_LEFT_MENU_WIDTH = '275px' export const LIBRARY_LEFT_MENU_WIDTH = '275px'
@ -356,6 +357,8 @@ const Shortcuts = (props: NavigationMenuProps): JSX.Element => {
</HStack> </HStack>
<Box <Box
css={{ css={{
width: '100%',
height: '100%',
'[role="treeitem"]': { '[role="treeitem"]': {
outline: 'none', outline: 'none',
}, },
@ -456,6 +459,7 @@ const cachedShortcutsData = (): Shortcut[] | undefined => {
const ShortcutsTree = (props: ShortcutsTreeProps): JSX.Element => { const ShortcutsTree = (props: ShortcutsTreeProps): JSX.Element => {
const router = useRouter() const router = useRouter()
const { ref, width, height } = useResizeObserver()
const { isValidating, data } = useSWR('/api/shortcuts', getShortcuts, { const { isValidating, data } = useSWR('/api/shortcuts', getShortcuts, {
fallbackData: cachedShortcutsData(), fallbackData: cachedShortcutsData(),
@ -562,7 +566,7 @@ const ShortcutsTree = (props: ShortcutsTreeProps): JSX.Element => {
) )
return ( return (
<> <div ref={ref}>
{!isValidating && ( {!isValidating && (
<Tree <Tree
ref={props.treeRef} ref={props.treeRef}
@ -575,12 +579,13 @@ const ShortcutsTree = (props: ShortcutsTreeProps): JSX.Element => {
onActivate={onActivate} onActivate={onActivate}
rowHeight={36} rowHeight={36}
initialOpenState={folderOpenState} initialOpenState={folderOpenState}
width={275} width={width}
height={640}
> >
{NodeRenderer} {NodeRenderer}
</Tree> </Tree>
)} )}
</> </div>
) )
} }

3
packages/web/package.json
View File

@ -67,6 +67,7 @@
"remark-gfm": "^3.0.1", "remark-gfm": "^3.0.1",
"sharp": "^0.32.6", "sharp": "^0.32.6",
"swr": "^2.2.5", "swr": "^2.2.5",
"use-resize-observer": "^9.1.0",
"uuid": "^8.3.2", "uuid": "^8.3.2",
"yet-another-react-lightbox": "^3.12.0" "yet-another-react-lightbox": "^3.12.0"
}, },
@ -108,4 +109,4 @@
"volta": { "volta": {
"extends": "../../package.json" "extends": "../../package.json"
} }
} }

2
yarn.lock
View File

@ -31183,7 +31183,7 @@ use-latest@^1.0.0:
dependencies: dependencies:
use-isomorphic-layout-effect "^1.0.0" use-isomorphic-layout-effect "^1.0.0"
use-resize-observer@^9.0.0: use-resize-observer@^9.0.0, use-resize-observer@^9.1.0:
version "9.1.0" version "9.1.0"
resolved "https://registry.yarnpkg.com/use-resize-observer/-/use-resize-observer-9.1.0.tgz#14735235cf3268569c1ea468f8a90c5789fc5c6c" resolved "https://registry.yarnpkg.com/use-resize-observer/-/use-resize-observer-9.1.0.tgz#14735235cf3268569c1ea468f8a90c5789fc5c6c"
integrity sha512-R25VqO9Wb3asSD4eqtcxk8sJalvIOYBqS8MNZlpDSQ4l4xMQxC/J7Id9HoTqPq8FwULIn0PVW+OAqF2dyYbjow== integrity sha512-R25VqO9Wb3asSD4eqtcxk8sJalvIOYBqS8MNZlpDSQ4l4xMQxC/J7Id9HoTqPq8FwULIn0PVW+OAqF2dyYbjow==