62 lines
1.8 KiB
TypeScript
62 lines
1.8 KiB
TypeScript
import BaseLayout from '@layouts/base';
|
|
import WithSidebarLayout from '@layouts/withSidebar';
|
|
|
|
import { Note } from '@components/note';
|
|
|
|
import { initialNotesAtom } from '@stores/note';
|
|
|
|
import { useVirtualizer } from '@tanstack/react-virtual';
|
|
import { useAtom } from 'jotai';
|
|
import { JSXElementConstructor, ReactElement, ReactFragment, ReactPortal, useMemo, useRef } from 'react';
|
|
|
|
export default function Page() {
|
|
const [data]: any = useAtom(initialNotesAtom);
|
|
|
|
const parentRef = useRef(null);
|
|
const count = useMemo(() => data.length, [data]);
|
|
|
|
const virtualizer = useVirtualizer({
|
|
count,
|
|
getScrollElement: () => parentRef.current,
|
|
getItemKey: (index: number) => data[index].id,
|
|
estimateSize: () => 500,
|
|
overscan: 5,
|
|
});
|
|
|
|
const items = virtualizer.getVirtualItems();
|
|
|
|
return (
|
|
<div className="h-full w-full">
|
|
{items.length > 0 && (
|
|
<div ref={parentRef} className="scrollbar-hide h-full w-full overflow-y-auto" style={{ contain: 'strict' }}>
|
|
<div className={`relative w-full h-${virtualizer.getTotalSize()}px`}>
|
|
<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>
|
|
)}
|
|
</div>
|
|
);
|
|
}
|
|
|
|
Page.getLayout = function getLayout(
|
|
page:
|
|
| string
|
|
| number
|
|
| boolean
|
|
| ReactElement<unknown, string | JSXElementConstructor<unknown>>
|
|
| ReactFragment
|
|
| ReactPortal
|
|
) {
|
|
return (
|
|
<BaseLayout>
|
|
<WithSidebarLayout>{page}</WithSidebarLayout>
|
|
</BaseLayout>
|
|
);
|
|
};
|