mirror/spacedrive
1
0
Fork 0
mirror of https://github.com/spacedriveapp/spacedrive.git synced 2026-04-21 06:59:17 -04:00
Code Issues Packages Projects Releases Wiki Activity

[ENG-882] Overview page scroll position on category change (#1071)

Browse Source 
* Page layout context & overview page scroll on category change

* Move PageLayout
This commit is contained in:
nikec
2023-07-04 14:14:33 +02:00
committed by GitHub
parent f1ceeba2fd
commit ee4ccf511d
4 changed files with 46 additions and 27 deletions
Download Patch File Download Diff File Expand all files Collapse all files

24
interface/app/$libraryId/PageLayout.tsx
View File

@@ -1,24 +0,0 @@
import { RefObject, createContext, useContext, useRef } from 'react';
import { Outlet } from 'react-router';
import { TOP_BAR_HEIGHT } from './TopBar';
const PageContext = createContext<{ ref: RefObject<HTMLDivElement> } | undefined>(undefined);
export const usePageLayout = () => useContext(PageContext);
export const Component = () => {
const ref = useRef<HTMLDivElement>(null);
return (
<div
ref={ref}
className="custom-scroll topbar-page-scroll app-background flex h-screen w-full flex-col"
style={{ paddingTop: TOP_BAR_HEIGHT }}
>
<PageContext.Provider value={{ ref }}>
<div className="flex h-screen w-full flex-col">
<Outlet />
</div>
</PageContext.Provider>
</div>
);
};

14
interface/app/$libraryId/PageLayout/Context.tsx Normal file
View File

@@ -0,0 +1,14 @@
import { RefObject, createContext, useContext } from 'react';
/**
* Context to hold the ref value of the page layout
*/
export const PageLayoutContext = createContext<{ ref: RefObject<HTMLDivElement> } | null>(null);
export const usePageLayoutContext = () => {
const ctx = useContext(PageLayoutContext);
if (ctx === null) throw new Error('PageLayoutContext.Provider not found!');
return ctx;
};

22
interface/app/$libraryId/PageLayout/index.tsx Normal file
View File

@@ -0,0 +1,22 @@
import { useRef } from 'react';
import { Outlet } from 'react-router';
import { TOP_BAR_HEIGHT } from '../TopBar';
import { PageLayoutContext } from './Context';
export const Component = () => {
const ref = useRef<HTMLDivElement>(null);
return (
<PageLayoutContext.Provider value={{ ref }}>
<div
ref={ref}
className="custom-scroll topbar-page-scroll app-background flex h-screen w-full flex-col"
style={{ paddingTop: TOP_BAR_HEIGHT }}
>
<div className="flex h-screen w-full flex-col">
<Outlet />
</div>
</div>
</PageLayoutContext.Provider>
);
};

13
interface/app/$libraryId/overview/index.tsx
View File

@@ -1,4 +1,4 @@
import { useMemo, useState } from 'react';
import { useEffect, useMemo, useState } from 'react';
import 'react-loading-skeleton/dist/skeleton.css';
import { Category } from '@sd/client';
import { ExplorerContext } from '../Explorer/Context';
@@ -8,7 +8,7 @@ import { Inspector } from '../Explorer/Inspector';
import { DefaultTopBarOptions } from '../Explorer/TopBarOptions';
import View from '../Explorer/View';
import { useExplorerStore } from '../Explorer/store';
import { usePageLayout } from '../PageLayout';
import { usePageLayoutContext } from '../PageLayout/Context';
import { TopBarPortal } from '../TopBar/Portal';
import Statistics from '../overview/Statistics';
import { Categories } from './Categories';
@@ -16,7 +16,7 @@ import { useItems } from './data';
export const Component = () => {
const explorerStore = useExplorerStore();
const page = usePageLayout();
const page = usePageLayoutContext();
const [selectedCategory, setSelectedCategory] = useState<Category>('Recents');
@@ -29,6 +29,13 @@ export const Component = () => {
[selectedItemId, items]
);
useEffect(() => {
if (page?.ref.current) {
const { scrollTop } = page.ref.current;
if (scrollTop > 100) page.ref.current.scrollTo({ top: 100 });
}
}, [selectedCategory, page?.ref]);
return (
<ExplorerContext.Provider value={{}}>
<TopBarPortal right={<DefaultTopBarOptions />} />