Virtualised sidebar test.

2026-03-06 17:11:55 +00:00 · 2021-08-08 16:17:16 +01:00
parent 031dc64173
commit 6cb1b0df26
11 changed files with 241 additions and 36 deletions
--- a/src/components/navigation/right/MemberList.tsx
+++ b/src/components/navigation/right/MemberList.tsx
@@ -0,0 +1,92 @@
+import AutoSizer from "react-virtualized-auto-sizer";
+import { FixedSizeList as List } from "react-window";
+import { User } from "revolt.js/dist/maps/Users";
+
+import { forwardRef } from "preact/compat";
+
+import { UserButton } from "../items/ButtonItem";
+
+export type MemberListEntry = string | User;
+interface ItemData {
+    entries: MemberListEntry[];
+}
+
+const PADDING_SIZE = 6;
+
+const Row = ({
+    data,
+    style,
+    index,
+}: {
+    data: ItemData;
+    index: number;
+    style: JSX.CSSProperties;
+}) => {
+    const item = data.entries[index];
+
+    return (
+        <div
+            style={{
+                ...style,
+                top: `${parseFloat(style.top as string) + PADDING_SIZE}px`,
+            }}>
+            {typeof item === "string" ? (
+                `cat ${item}`
+            ) : (
+                <UserButton
+                    key={item._id}
+                    user={item}
+                    margin
+                    /* context={channel}
+                    onClick={() =>
+                        openScreen({
+                            id: "profile",
+                            user_id: user._id,
+                        })
+                    } */
+                />
+            )}
+        </div>
+    );
+};
+
+// @ts-expect-error Copied directly from example code.
+const innerElementType = forwardRef(({ style, ...rest }, ref) => (
+    <div
+        // @ts-expect-error Copied directly from example code.
+        ref={ref}
+        style={{
+            ...style,
+            height: `${parseFloat(style.height) + PADDING_SIZE * 2}px`,
+        }}
+        {...rest}
+    />
+));
+
+export default function MemberList({
+    entries,
+}: {
+    entries: MemberListEntry[];
+}) {
+    return (
+        <AutoSizer>
+            {({ width, height }) => (
+                <List
+                    className="virtualList"
+                    width={width}
+                    height={height}
+                    itemData={{
+                        entries,
+                    }}
+                    itemCount={entries.length}
+                    innerElementType={innerElementType}
+                    itemSize={42}>
+                    {
+                        // eslint-disable-next-line
+                        Row as any
+                    }
+                </List>
+            )}
+        </AutoSizer>
+    );
+}