revite/src/components/navigation/right/MemberList.tsx

import AutoSizer from "react-virtualized-auto-sizer";
import { FixedSizeList as List } from "react-window";
import { User } from "revolt.js/dist/maps/Users";
import styled from "styled-components";

import { Text } from "preact-i18n";
import { forwardRef } from "preact/compat";

import { UserButton } from "../items/ButtonItem";

export type MemberListEntry = string | User;
interface ItemData {
    entries: MemberListEntry[];
}

const PADDING_SIZE = 6;

const ListCategory = styled.div`
    display: flex;
    padding: 14px;
    font-size: 0.8em;
    font-weight: 600;
    user-select: none;
    flex-direction: column;
    justify-content: flex-end;
    color: var(--secondary-foreground);
`;

const Row = ({
    data,
    style,
    index,
}: {
    data: ItemData;
    index: number;
    style: JSX.CSSProperties;
}) => {
    const item = data.entries[index];
    style.top = `${parseFloat(style.top as string) + PADDING_SIZE}px`;

    if (typeof item === "string") {
        const [cat, count] = item.split(":");
        return (
            <div style={style}>
                <ListCategory>
                    {cat === "online" ? (
                        <Text id="app.status.online" />
                    ) : (
                        <Text id="app.status.offline" />
                    )}
                    {" - "}
                    {count}
                </ListCategory>
            </div>
        );
        // eslint-disable-next-line
    } else {
        return (
            <div style={style}>
                <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>
    );
}