mirror of
https://github.com/luminous-devs/lume.git
synced 2024-09-19 19:46:34 +00:00
working on new virtual scroller
This commit is contained in:
parent
207ef68aa1
commit
b3baacb3e0
@ -20,6 +20,7 @@
|
|||||||
"@radix-ui/react-tabs": "^1.0.3",
|
"@radix-ui/react-tabs": "^1.0.3",
|
||||||
"@rehooks/local-storage": "^2.4.4",
|
"@rehooks/local-storage": "^2.4.4",
|
||||||
"@supabase/supabase-js": "^2.12.0",
|
"@supabase/supabase-js": "^2.12.0",
|
||||||
|
"@tanstack/react-virtual": "3.0.0-beta.54",
|
||||||
"@tauri-apps/api": "^1.2.0",
|
"@tauri-apps/api": "^1.2.0",
|
||||||
"@uiw/react-markdown-preview": "^4.1.10",
|
"@uiw/react-markdown-preview": "^4.1.10",
|
||||||
"@uiw/react-md-editor": "^3.20.5",
|
"@uiw/react-md-editor": "^3.20.5",
|
||||||
|
@ -10,6 +10,7 @@ specifiers:
|
|||||||
'@rehooks/local-storage': ^2.4.4
|
'@rehooks/local-storage': ^2.4.4
|
||||||
'@supabase/supabase-js': ^2.12.0
|
'@supabase/supabase-js': ^2.12.0
|
||||||
'@tailwindcss/typography': ^0.5.9
|
'@tailwindcss/typography': ^0.5.9
|
||||||
|
'@tanstack/react-virtual': 3.0.0-beta.54
|
||||||
'@tauri-apps/api': ^1.2.0
|
'@tauri-apps/api': ^1.2.0
|
||||||
'@tauri-apps/cli': ^1.2.3
|
'@tauri-apps/cli': ^1.2.3
|
||||||
'@trivago/prettier-plugin-sort-imports': ^4.1.1
|
'@trivago/prettier-plugin-sort-imports': ^4.1.1
|
||||||
@ -63,6 +64,7 @@ dependencies:
|
|||||||
'@radix-ui/react-tabs': 1.0.3_biqbaboplfbrettd7655fr4n2y
|
'@radix-ui/react-tabs': 1.0.3_biqbaboplfbrettd7655fr4n2y
|
||||||
'@rehooks/local-storage': 2.4.4_react@18.2.0
|
'@rehooks/local-storage': 2.4.4_react@18.2.0
|
||||||
'@supabase/supabase-js': 2.12.0
|
'@supabase/supabase-js': 2.12.0
|
||||||
|
'@tanstack/react-virtual': 3.0.0-beta.54_react@18.2.0
|
||||||
'@tauri-apps/api': 1.2.0
|
'@tauri-apps/api': 1.2.0
|
||||||
'@uiw/react-markdown-preview': 4.1.10_zula6vjvt3wdocc4mwcxqa6nzi
|
'@uiw/react-markdown-preview': 4.1.10_zula6vjvt3wdocc4mwcxqa6nzi
|
||||||
'@uiw/react-md-editor': 3.20.5_zula6vjvt3wdocc4mwcxqa6nzi
|
'@uiw/react-md-editor': 3.20.5_zula6vjvt3wdocc4mwcxqa6nzi
|
||||||
@ -1298,6 +1300,21 @@ packages:
|
|||||||
tailwindcss: 3.2.7_postcss@8.4.21
|
tailwindcss: 3.2.7_postcss@8.4.21
|
||||||
dev: true
|
dev: true
|
||||||
|
|
||||||
|
/@tanstack/react-virtual/3.0.0-beta.54_react@18.2.0:
|
||||||
|
resolution:
|
||||||
|
{ integrity: sha512-D1mDMf4UPbrtHRZZriCly5bXTBMhylslm4dhcHqTtDJ6brQcgGmk8YD9JdWBGWfGSWPKoh2x1H3e7eh+hgPXtQ== }
|
||||||
|
peerDependencies:
|
||||||
|
react: ^16.8.0 || ^17.0.0 || ^18.0.0
|
||||||
|
dependencies:
|
||||||
|
'@tanstack/virtual-core': 3.0.0-beta.54
|
||||||
|
react: 18.2.0
|
||||||
|
dev: false
|
||||||
|
|
||||||
|
/@tanstack/virtual-core/3.0.0-beta.54:
|
||||||
|
resolution:
|
||||||
|
{ integrity: sha512-jtkwqdP2rY2iCCDVAFuaNBH3fiEi29aTn2RhtIoky8DTTiCdc48plpHHreLwmv1PICJ4AJUUESaq3xa8fZH8+g== }
|
||||||
|
dev: false
|
||||||
|
|
||||||
/@tauri-apps/api/1.2.0:
|
/@tauri-apps/api/1.2.0:
|
||||||
resolution:
|
resolution:
|
||||||
{ integrity: sha512-lsI54KI6HGf7VImuf/T9pnoejfgkNoXveP14pVV7XarrQ46rOejIVJLFqHI9sRReJMGdh2YuCoI3cc/yCWCsrw== }
|
{ integrity: sha512-lsI54KI6HGf7VImuf/T9pnoejfgkNoXveP14pVV7XarrQ46rOejIVJLFqHI9sRReJMGdh2YuCoI3cc/yCWCsrw== }
|
||||||
|
@ -2,6 +2,7 @@ import DatabaseProvider from '@components/contexts/database';
|
|||||||
import RelayProvider from '@components/contexts/relay';
|
import RelayProvider from '@components/contexts/relay';
|
||||||
|
|
||||||
import { useLocalStorage } from '@rehooks/local-storage';
|
import { useLocalStorage } from '@rehooks/local-storage';
|
||||||
|
import { Provider } from 'jotai';
|
||||||
import type { NextPage } from 'next';
|
import type { NextPage } from 'next';
|
||||||
import type { AppProps } from 'next/app';
|
import type { AppProps } from 'next/app';
|
||||||
import { ReactElement, ReactNode } from 'react';
|
import { ReactElement, ReactNode } from 'react';
|
||||||
@ -24,8 +25,10 @@ export default function MyApp({ Component, pageProps }: AppPropsWithLayout) {
|
|||||||
const [relays] = useLocalStorage('relays');
|
const [relays] = useLocalStorage('relays');
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<DatabaseProvider>
|
<Provider>
|
||||||
<RelayProvider relays={relays}>{getLayout(<Component {...pageProps} />)}</RelayProvider>
|
<DatabaseProvider>
|
||||||
</DatabaseProvider>
|
<RelayProvider relays={relays}>{getLayout(<Component {...pageProps} />)}</RelayProvider>
|
||||||
|
</DatabaseProvider>
|
||||||
|
</Provider>
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
@ -1,10 +1,43 @@
|
|||||||
import BaseLayout from '@layouts/base';
|
import BaseLayout from '@layouts/base';
|
||||||
import WithSidebarLayout from '@layouts/withSidebar';
|
import WithSidebarLayout from '@layouts/withSidebar';
|
||||||
|
|
||||||
import { JSXElementConstructor, ReactElement, ReactFragment, ReactPortal } from 'react';
|
import { Note } from '@components/note';
|
||||||
|
|
||||||
|
import { notesAtom } from '@stores/note';
|
||||||
|
|
||||||
|
import { useVirtualizer } from '@tanstack/react-virtual';
|
||||||
|
import { useAtom } from 'jotai';
|
||||||
|
import { JSXElementConstructor, ReactElement, ReactFragment, ReactPortal, useRef } from 'react';
|
||||||
|
|
||||||
export default function Page() {
|
export default function Page() {
|
||||||
return <></>;
|
const [data]: any = useAtom(notesAtom);
|
||||||
|
|
||||||
|
const parentRef = useRef(null);
|
||||||
|
|
||||||
|
const virtualizer = useVirtualizer({
|
||||||
|
count: data.length,
|
||||||
|
overscan: 5,
|
||||||
|
estimateSize: () => 600,
|
||||||
|
getScrollElement: () => parentRef.current,
|
||||||
|
getItemKey: (index) => data[index].id,
|
||||||
|
});
|
||||||
|
const items = virtualizer.getVirtualItems();
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div ref={parentRef} className="scrollbar-hide h-full w-full overflow-y-auto" style={{ contain: 'strict' }}>
|
||||||
|
{items.length > 0 && (
|
||||||
|
<div className="relative w-full" style={{ height: virtualizer.getTotalSize() }}>
|
||||||
|
<div className="absolute top-0 left-0 w-full" style={{ transform: `translateY(${items[0].start}px)` }}>
|
||||||
|
{items.map((virtualRow) => (
|
||||||
|
<div key={virtualRow.key} data-index={virtualRow.index} ref={virtualizer.measureElement}>
|
||||||
|
<Note event={data[virtualRow.index]} />
|
||||||
|
</div>
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
);
|
||||||
}
|
}
|
||||||
|
|
||||||
Page.getLayout = function getLayout(
|
Page.getLayout = function getLayout(
|
||||||
|
@ -2,3 +2,5 @@ import { atom } from 'jotai';
|
|||||||
|
|
||||||
// usecase: notify user that connector has receive newer note
|
// usecase: notify user that connector has receive newer note
|
||||||
export const hasNewerNoteAtom = atom(false);
|
export const hasNewerNoteAtom = atom(false);
|
||||||
|
// usecase: query notes from database
|
||||||
|
export const notesAtom = atom([]);
|
||||||
|
Loading…
Reference in New Issue
Block a user