feat: virtuoso header and list

RSSNext · May 30, 2024 · 3458138 · 3458138
1 parent bcd398a
commit 3458138
Showing 1 changed file with 50 additions and 46 deletions.
diff --git a/src/renderer/src/components/entry-column/index.tsx b/src/renderer/src/components/entry-column/index.tsx
@@ -3,7 +3,7 @@ import { cn } from "@renderer/lib/utils"
 import { useEntries } from "@renderer/queries/entries"
 import { useFeedStore } from "@renderer/store"
 import { m } from "framer-motion"
-import { useState } from "react"
+import { forwardRef, useState } from "react"
 import { Virtuoso } from "react-virtuoso"
 
 import { ArticleItem } from "./article-item"
@@ -54,52 +54,56 @@ export function EntryColumn() {
   }
 
   return (
-    <div className="px-2 h-full flex flex-col">
-      <div className="mb-5 px-9 flex justify-between items-center w-full">
-        <div>
-          <div className="text-lg font-bold">{activeList?.name}</div>
-          <div className="text-xs font-medium text-zinc-400">
-            {entries.data?.pages?.[0].total}
-            {" "}
-            Items
+    <Virtuoso
+      components={{
+        // eslint-disable-next-line @eslint-react/no-nested-components
+        Header: () => (
+          <div className="mb-5 px-9 flex justify-between items-center w-full">
+            <div>
+              <div className="text-lg font-bold">{activeList?.name}</div>
+              <div className="text-xs font-medium text-zinc-400">
+                {entries.data?.pages?.[0].total}
+                {" "}
+                Items
+              </div>
+            </div>
+            <Tabs value={filterTab} onValueChange={setFilterTab}>
+              <TabsList variant="rounded">
+                <TabsTrigger variant="rounded" value="unread">Unread</TabsTrigger>
+                <TabsTrigger variant="rounded" value="all">All</TabsTrigger>
+              </TabsList>
+            </Tabs>
           </div>
-        </div>
-        <Tabs value={filterTab} onValueChange={setFilterTab}>
-          <TabsList variant="rounded">
-            <TabsTrigger variant="rounded" value="unread">Unread</TabsTrigger>
-            <TabsTrigger variant="rounded" value="all">All</TabsTrigger>
-          </TabsList>
-        </Tabs>
-      </div>
-      <div className="flex-1">
-        <m.div
-          key={`${activeList?.level}-${activeList?.id}`}
-          initial={{ opacity: 0.01, y: 100 }}
-          animate={{ opacity: 1, y: 0 }}
-          exit={{ opacity: 0.01, y: -100 }}
-          className={cn(
-            "h-full",
-            activeList?.view &&
-            gridMode.has(activeList.view) &&
-            "grid grid-cols-2 gap-2 px-2 md:grid-cols-3 lg:grid-cols-4",
-          )}
-        >
-          <Virtuoso
-            endReached={() =>
-              entries.hasNextPage && entries.fetchNextPage()}
-            data={entries.data?.pages}
-            itemContent={(_, page) => page?.data?.map((entry) => (
-              <EntryItemWrapper
-                key={entry.entries.id}
-                entry={entry}
-                view={activeList?.view}
-              >
-                <Item entry={entry} />
-              </EntryItemWrapper>
-            ))}
+        ),
+        List: forwardRef((props, ref) => (
+          <m.div
+            key={`${activeList?.level}-${activeList?.id}`}
+            initial={{ opacity: 0.01, y: 100 }}
+            animate={{ opacity: 1, y: 0 }}
+            exit={{ opacity: 0.01, y: -100 }}
+            className={cn(
+              "h-full px-2",
+              activeList?.view &&
+              gridMode.has(activeList.view) &&
+              "grid grid-cols-2 gap-2 md:grid-cols-3 lg:grid-cols-4",
+            )}
+            {...props}
+            ref={ref}
           />
-        </m.div>
-      </div>
-    </div>
+        )),
+      }}
+      endReached={() =>
+        entries.hasNextPage && entries.fetchNextPage()}
+      data={entries.data?.pages}
+      itemContent={(_, page) => page?.data?.map((entry) => (
+        <EntryItemWrapper
+          key={entry.entries.id}
+          entry={entry}
+          view={activeList?.view}
+        >
+          <Item entry={entry} />
+        </EntryItemWrapper>
+      ))}
+    />
   )
 }