mirror of
https://github.com/revoltchat/revite.git
synced 2024-11-12 10:19:59 -05:00
Switch to React Virtuoso from react-window
This commit is contained in:
Paul
parent
a3e2ed3b94
commit
a19ff58e12
5 changed files with 105 additions and 148 deletions
2
external/lang
vendored
2
external/lang
vendored
|
|
@ -1 +1 @@
|
||||||
Subproject commit 46a2dcdd88c42d4e6e504ca5c60a4beebc8d0280
|
Subproject commit 8755aa48b2173f1f509e8fe6edaccc5ac32601f5
|
||||||
|
|
@ -79,7 +79,6 @@
|
||||||
"@types/react-router-dom": "^5.1.7",
|
"@types/react-router-dom": "^5.1.7",
|
||||||
"@types/react-scroll": "^1.8.2",
|
"@types/react-scroll": "^1.8.2",
|
||||||
"@types/react-virtualized-auto-sizer": "^1.0.1",
|
"@types/react-virtualized-auto-sizer": "^1.0.1",
|
||||||
"@types/react-window": "^1.8.5",
|
|
||||||
"@types/styled-components": "^5.1.10",
|
"@types/styled-components": "^5.1.10",
|
||||||
"@types/twemoji": "^12.1.1",
|
"@types/twemoji": "^12.1.1",
|
||||||
"@typescript-eslint/eslint-plugin": "^4.27.0",
|
"@typescript-eslint/eslint-plugin": "^4.27.0",
|
||||||
|
|
@ -114,7 +113,7 @@
|
||||||
"react-router-dom": "^5.2.0",
|
"react-router-dom": "^5.2.0",
|
||||||
"react-scroll": "^1.8.2",
|
"react-scroll": "^1.8.2",
|
||||||
"react-virtualized-auto-sizer": "^1.0.5",
|
"react-virtualized-auto-sizer": "^1.0.5",
|
||||||
"react-window": "^1.8.6",
|
"react-virtuoso": "^1.10.4",
|
||||||
"redux": "^4.1.0",
|
"redux": "^4.1.0",
|
||||||
"revolt-api": "0.5.1-alpha.10-patch.0",
|
"revolt-api": "0.5.1-alpha.10-patch.0",
|
||||||
"revolt.js": "5.0.0-alpha.20",
|
"revolt.js": "5.0.0-alpha.20",
|
||||||
|
|
|
||||||
|
|
@ -1,135 +1,92 @@
|
||||||
import AutoSizer from "react-virtualized-auto-sizer";
|
import { GroupedVirtuoso } from "react-virtuoso";
|
||||||
import { VariableSizeList as List } from "react-window";
|
|
||||||
import { Channel } from "revolt.js/dist/maps/Channels";
|
import { Channel } from "revolt.js/dist/maps/Channels";
|
||||||
import { User } from "revolt.js/dist/maps/Users";
|
import { User } from "revolt.js/dist/maps/Users";
|
||||||
import styled from "styled-components";
|
import styled, { css } from "styled-components";
|
||||||
|
|
||||||
import { Text } from "preact-i18n";
|
import { Text } from "preact-i18n";
|
||||||
import { forwardRef } from "preact/compat";
|
|
||||||
|
|
||||||
import {
|
import { useIntermediate } from "../../../context/intermediate/Intermediate";
|
||||||
Screen,
|
|
||||||
useIntermediate,
|
|
||||||
} from "../../../context/intermediate/Intermediate";
|
|
||||||
|
|
||||||
import { UserButton } from "../items/ButtonItem";
|
import { UserButton } from "../items/ButtonItem";
|
||||||
|
|
||||||
export type MemberListEntry = string | User;
|
export type MemberListGroup = {
|
||||||
interface ItemData {
|
type: "online" | "offline" | "role";
|
||||||
entries: MemberListEntry[];
|
name?: string;
|
||||||
context: Channel;
|
users: User[];
|
||||||
openScreen: (screen: Screen) => void;
|
};
|
||||||
}
|
|
||||||
|
|
||||||
const PADDING_SIZE = 6;
|
const ListCategory = styled.div<{ first?: boolean }>`
|
||||||
|
opacity: 0.8;
|
||||||
const ListCategory = styled.div`
|
|
||||||
height: 100%;
|
|
||||||
display: flex;
|
|
||||||
padding: 0 14px;
|
|
||||||
font-size: 0.8em;
|
font-size: 0.8em;
|
||||||
font-weight: 600;
|
font-weight: 600;
|
||||||
user-select: none;
|
user-select: none;
|
||||||
flex-direction: column;
|
|
||||||
justify-content: flex-end;
|
padding: 4px 14px;
|
||||||
|
padding-top: 12px;
|
||||||
|
|
||||||
color: var(--secondary-foreground);
|
color: var(--secondary-foreground);
|
||||||
|
background: var(--secondary-background);
|
||||||
|
|
||||||
|
${(props) =>
|
||||||
|
!props.first &&
|
||||||
|
css`
|
||||||
|
padding-top: 16px;
|
||||||
|
`}
|
||||||
`;
|
`;
|
||||||
|
|
||||||
const Row = ({
|
|
||||||
data,
|
|
||||||
style: styleIn,
|
|
||||||
index,
|
|
||||||
}: {
|
|
||||||
data: ItemData;
|
|
||||||
index: number;
|
|
||||||
style: JSX.CSSProperties;
|
|
||||||
}) => {
|
|
||||||
const item = data.entries[index];
|
|
||||||
const style = {
|
|
||||||
...styleIn,
|
|
||||||
top: `${parseFloat(styleIn.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={data.context}
|
|
||||||
onClick={() =>
|
|
||||||
data.openScreen({
|
|
||||||
id: "profile",
|
|
||||||
user_id: item._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({
|
export default function MemberList({
|
||||||
entries,
|
entries,
|
||||||
context,
|
context,
|
||||||
}: {
|
}: {
|
||||||
entries: MemberListEntry[];
|
entries: MemberListGroup[];
|
||||||
context: Channel;
|
context: Channel;
|
||||||
}) {
|
}) {
|
||||||
const { openScreen } = useIntermediate();
|
const { openScreen } = useIntermediate();
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<AutoSizer>
|
<GroupedVirtuoso
|
||||||
{({ width, height }) => (
|
groupCounts={entries.map((x) => x.users.length)}
|
||||||
<List
|
groupContent={(index) => {
|
||||||
width={width}
|
const type = entries[index].type;
|
||||||
height={height}
|
return (
|
||||||
itemData={{
|
<ListCategory first={index === 0}>
|
||||||
entries,
|
{type === "online" ? (
|
||||||
context,
|
<Text id="app.status.online" />
|
||||||
openScreen,
|
) : (
|
||||||
}}
|
<Text id="app.status.offline" />
|
||||||
itemCount={entries.length}
|
)}
|
||||||
innerElementType={innerElementType}
|
{" - "}
|
||||||
itemSize={(index) =>
|
{entries[index].users.length}
|
||||||
typeof entries[index] === "string" ? 24 : 42
|
</ListCategory>
|
||||||
}
|
);
|
||||||
estimatedItemSize={42}>
|
}}
|
||||||
{
|
itemContent={(absoluteIndex, groupIndex) => {
|
||||||
// eslint-disable-next-line
|
const relativeIndex =
|
||||||
Row as any
|
absoluteIndex -
|
||||||
}
|
entries
|
||||||
</List>
|
.slice(0, groupIndex)
|
||||||
)}
|
.reduce((a, b) => a + b.users.length, 0);
|
||||||
</AutoSizer>
|
|
||||||
|
const item = entries[groupIndex].users[relativeIndex];
|
||||||
|
if (!item) return null;
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div>
|
||||||
|
<UserButton
|
||||||
|
key={item._id}
|
||||||
|
user={item}
|
||||||
|
margin
|
||||||
|
context={context}
|
||||||
|
onClick={() =>
|
||||||
|
openScreen({
|
||||||
|
id: "profile",
|
||||||
|
user_id: item._id,
|
||||||
|
})
|
||||||
|
}
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}}
|
||||||
|
/>
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -14,7 +14,7 @@ import {
|
||||||
} from "../../../context/revoltjs/RevoltClient";
|
} from "../../../context/revoltjs/RevoltClient";
|
||||||
|
|
||||||
import { GenericSidebarBase } from "../SidebarBase";
|
import { GenericSidebarBase } from "../SidebarBase";
|
||||||
import MemberList from "./MemberList";
|
import MemberList, { MemberListGroup } from "./MemberList";
|
||||||
|
|
||||||
export default function MemberSidebar({ channel: obj }: { channel?: Channel }) {
|
export default function MemberSidebar({ channel: obj }: { channel?: Channel }) {
|
||||||
const { channel: channel_id } = useParams<{ channel: string }>();
|
const { channel: channel_id } = useParams<{ channel: string }>();
|
||||||
|
|
@ -73,20 +73,20 @@ function useEntries(channel: Channel, keys: string[], isServer?: boolean) {
|
||||||
categories[key].sort((a, b) => a[1].localeCompare(b[1])),
|
categories[key].sort((a, b) => a[1].localeCompare(b[1])),
|
||||||
);
|
);
|
||||||
|
|
||||||
const entries = [];
|
const entries: MemberListGroup[] = [];
|
||||||
|
|
||||||
if (categories.online.length > 0) {
|
if (categories.online.length > 0) {
|
||||||
entries.push(
|
entries.push({
|
||||||
`online:${categories.online.length}`,
|
type: "online",
|
||||||
...categories.online.map((x) => x[0]),
|
users: categories.online.map((x) => x[0]),
|
||||||
);
|
});
|
||||||
}
|
}
|
||||||
|
|
||||||
if (categories.offline.length > 0) {
|
if (categories.offline.length > 0) {
|
||||||
entries.push(
|
entries.push({
|
||||||
`offline:${categories.offline.length}`,
|
type: "offline",
|
||||||
...categories.offline.map((x) => x[0]),
|
users: categories.offline.map((x) => x[0]),
|
||||||
);
|
});
|
||||||
}
|
}
|
||||||
|
|
||||||
return entries;
|
return entries;
|
||||||
|
|
|
||||||
51
yarn.lock
51
yarn.lock
|
|
@ -872,13 +872,6 @@
|
||||||
"@babel/types" "^7.4.4"
|
"@babel/types" "^7.4.4"
|
||||||
esutils "^2.0.2"
|
esutils "^2.0.2"
|
||||||
|
|
||||||
"@babel/runtime@^7.0.0", "@babel/runtime@^7.14.8":
|
|
||||||
version "7.14.8"
|
|
||||||
resolved "https://registry.yarnpkg.com/@babel/runtime/-/runtime-7.14.8.tgz#7119a56f421018852694290b9f9148097391b446"
|
|
||||||
integrity sha512-twj3L8Og5SaCRCErB4x4ajbvBIVV77CGeFglHpeg5WC5FF8TZzBWXtTJ4MqaD9QszLYTtr+IsaAL2rEUevb+eg==
|
|
||||||
dependencies:
|
|
||||||
regenerator-runtime "^0.13.4"
|
|
||||||
|
|
||||||
"@babel/runtime@^7.1.2", "@babel/runtime@^7.10.5", "@babel/runtime@^7.11.2", "@babel/runtime@^7.12.1", "@babel/runtime@^7.14.0", "@babel/runtime@^7.14.6", "@babel/runtime@^7.8.4", "@babel/runtime@^7.9.2":
|
"@babel/runtime@^7.1.2", "@babel/runtime@^7.10.5", "@babel/runtime@^7.11.2", "@babel/runtime@^7.12.1", "@babel/runtime@^7.14.0", "@babel/runtime@^7.14.6", "@babel/runtime@^7.8.4", "@babel/runtime@^7.9.2":
|
||||||
version "7.14.6"
|
version "7.14.6"
|
||||||
resolved "https://registry.yarnpkg.com/@babel/runtime/-/runtime-7.14.6.tgz#535203bc0892efc7dec60bdc27b2ecf6e409062d"
|
resolved "https://registry.yarnpkg.com/@babel/runtime/-/runtime-7.14.6.tgz#535203bc0892efc7dec60bdc27b2ecf6e409062d"
|
||||||
|
|
@ -886,6 +879,13 @@
|
||||||
dependencies:
|
dependencies:
|
||||||
regenerator-runtime "^0.13.4"
|
regenerator-runtime "^0.13.4"
|
||||||
|
|
||||||
|
"@babel/runtime@^7.14.8":
|
||||||
|
version "7.14.8"
|
||||||
|
resolved "https://registry.yarnpkg.com/@babel/runtime/-/runtime-7.14.8.tgz#7119a56f421018852694290b9f9148097391b446"
|
||||||
|
integrity sha512-twj3L8Og5SaCRCErB4x4ajbvBIVV77CGeFglHpeg5WC5FF8TZzBWXtTJ4MqaD9QszLYTtr+IsaAL2rEUevb+eg==
|
||||||
|
dependencies:
|
||||||
|
regenerator-runtime "^0.13.4"
|
||||||
|
|
||||||
"@babel/template@^7.12.13", "@babel/template@^7.14.5":
|
"@babel/template@^7.12.13", "@babel/template@^7.14.5":
|
||||||
version "7.14.5"
|
version "7.14.5"
|
||||||
resolved "https://registry.yarnpkg.com/@babel/template/-/template-7.14.5.tgz#a9bc9d8b33354ff6e55a9c60d1109200a68974f4"
|
resolved "https://registry.yarnpkg.com/@babel/template/-/template-7.14.5.tgz#a9bc9d8b33354ff6e55a9c60d1109200a68974f4"
|
||||||
|
|
@ -1473,13 +1473,6 @@
|
||||||
dependencies:
|
dependencies:
|
||||||
"@types/react" "*"
|
"@types/react" "*"
|
||||||
|
|
||||||
"@types/react-window@^1.8.5":
|
|
||||||
version "1.8.5"
|
|
||||||
resolved "https://registry.yarnpkg.com/@types/react-window/-/react-window-1.8.5.tgz#285fcc5cea703eef78d90f499e1457e9b5c02fc1"
|
|
||||||
integrity sha512-V9q3CvhC9Jk9bWBOysPGaWy/Z0lxYcTXLtLipkt2cnRj1JOSFNF7wqGpkScSXMgBwC+fnVRg/7shwgddBG5ICw==
|
|
||||||
dependencies:
|
|
||||||
"@types/react" "*"
|
|
||||||
|
|
||||||
"@types/react@*":
|
"@types/react@*":
|
||||||
version "17.0.13"
|
version "17.0.13"
|
||||||
resolved "https://registry.yarnpkg.com/@types/react/-/react-17.0.13.tgz#6b7c9a8f2868586ad87d941c02337c6888fb874f"
|
resolved "https://registry.yarnpkg.com/@types/react/-/react-17.0.13.tgz#6b7c9a8f2868586ad87d941c02337c6888fb874f"
|
||||||
|
|
@ -1607,6 +1600,18 @@
|
||||||
"@typescript-eslint/types" "4.28.2"
|
"@typescript-eslint/types" "4.28.2"
|
||||||
eslint-visitor-keys "^2.0.0"
|
eslint-visitor-keys "^2.0.0"
|
||||||
|
|
||||||
|
"@virtuoso.dev/react-urx@^0.2.5":
|
||||||
|
version "0.2.6"
|
||||||
|
resolved "https://registry.yarnpkg.com/@virtuoso.dev/react-urx/-/react-urx-0.2.6.tgz#e1d8bc717723b2fc23d80ea4e07703dbc276448b"
|
||||||
|
integrity sha512-+PLQ2iWmSH/rW7WGPEf+Kkql+xygHFL43Jij5aREde/O9mE0OFFGqeetA2a6lry3LDVWzupPntvvWhdaYw0TyA==
|
||||||
|
dependencies:
|
||||||
|
"@virtuoso.dev/urx" "^0.2.6"
|
||||||
|
|
||||||
|
"@virtuoso.dev/urx@^0.2.5", "@virtuoso.dev/urx@^0.2.6":
|
||||||
|
version "0.2.6"
|
||||||
|
resolved "https://registry.yarnpkg.com/@virtuoso.dev/urx/-/urx-0.2.6.tgz#0028c49e52037e673993900d32abea83262fbd53"
|
||||||
|
integrity sha512-EKJ0WvJgWaXIz6zKbh9Q63Bcq//p8OHXHbdz4Fy+ruhjJCyI8ADE8E5gwSqBoUchaiYlgwKrT+sX4L2h/H+hMg==
|
||||||
|
|
||||||
acorn-jsx@^5.3.1:
|
acorn-jsx@^5.3.1:
|
||||||
version "5.3.1"
|
version "5.3.1"
|
||||||
resolved "https://registry.yarnpkg.com/acorn-jsx/-/acorn-jsx-5.3.1.tgz#fc8661e11b7ac1539c47dbfea2e72b3af34d267b"
|
resolved "https://registry.yarnpkg.com/acorn-jsx/-/acorn-jsx-5.3.1.tgz#fc8661e11b7ac1539c47dbfea2e72b3af34d267b"
|
||||||
|
|
@ -3047,11 +3052,6 @@ mdurl@^1.0.1:
|
||||||
sdp-transform "^2.14.1"
|
sdp-transform "^2.14.1"
|
||||||
supports-color "^8.1.1"
|
supports-color "^8.1.1"
|
||||||
|
|
||||||
"memoize-one@>=3.1.1 <6":
|
|
||||||
version "5.2.1"
|
|
||||||
resolved "https://registry.yarnpkg.com/memoize-one/-/memoize-one-5.2.1.tgz#8337aa3c4335581839ec01c3d594090cebe8f00e"
|
|
||||||
integrity sha512-zYiwtZUcYyXKo/np96AGZAckk+FWWsUdJ3cHGGmld7+AhvcWmQyGCYUh1hc4Q/pkOhb65dQR/pqCyK0cOaHz4Q==
|
|
||||||
|
|
||||||
merge-stream@^2.0.0:
|
merge-stream@^2.0.0:
|
||||||
version "2.0.0"
|
version "2.0.0"
|
||||||
resolved "https://registry.yarnpkg.com/merge-stream/-/merge-stream-2.0.0.tgz#52823629a14dd00c9770fb6ad47dc6310f2c1f60"
|
resolved "https://registry.yarnpkg.com/merge-stream/-/merge-stream-2.0.0.tgz#52823629a14dd00c9770fb6ad47dc6310f2c1f60"
|
||||||
|
|
@ -3475,13 +3475,14 @@ react-virtualized-auto-sizer@^1.0.5:
|
||||||
resolved "https://registry.yarnpkg.com/react-virtualized-auto-sizer/-/react-virtualized-auto-sizer-1.0.5.tgz#9eeeb8302022de56fbd7a860b08513120ce36509"
|
resolved "https://registry.yarnpkg.com/react-virtualized-auto-sizer/-/react-virtualized-auto-sizer-1.0.5.tgz#9eeeb8302022de56fbd7a860b08513120ce36509"
|
||||||
integrity sha512-kivjYVWX15TX2IUrm8F1jaCEX8EXrpy3DD+u41WGqJ1ZqbljWpiwscV+VxOM1l7sSIM1jwi2LADjhhAJkJ9dxA==
|
integrity sha512-kivjYVWX15TX2IUrm8F1jaCEX8EXrpy3DD+u41WGqJ1ZqbljWpiwscV+VxOM1l7sSIM1jwi2LADjhhAJkJ9dxA==
|
||||||
|
|
||||||
react-window@^1.8.6:
|
react-virtuoso@^1.10.4:
|
||||||
version "1.8.6"
|
version "1.10.4"
|
||||||
resolved "https://registry.yarnpkg.com/react-window/-/react-window-1.8.6.tgz#d011950ac643a994118632665aad0c6382e2a112"
|
resolved "https://registry.yarnpkg.com/react-virtuoso/-/react-virtuoso-1.10.4.tgz#c7ec91f98c3e65f3d98a41df1e01d305b523ba0a"
|
||||||
integrity sha512-8VwEEYyjz6DCnGBsd+MgkD0KJ2/OXFULyDtorIiTz+QzwoP94tBoA7CnbtyXMm+cCeAUER5KJcPtWl9cpKbOBg==
|
integrity sha512-rWXr61gASl+KDEwakwgxoSL+uwuevSsu1wQyDzeCdIN+PgbGfLOcvEsFoTt96E4+VWQ5BawZYkh8iNUgQpucXw==
|
||||||
dependencies:
|
dependencies:
|
||||||
"@babel/runtime" "^7.0.0"
|
"@virtuoso.dev/react-urx" "^0.2.5"
|
||||||
memoize-one ">=3.1.1 <6"
|
"@virtuoso.dev/urx" "^0.2.5"
|
||||||
|
resize-observer-polyfill "^1.5.1"
|
||||||
|
|
||||||
readdirp@~3.6.0:
|
readdirp@~3.6.0:
|
||||||
version "3.6.0"
|
version "3.6.0"
|
||||||
|
|
|
||||||
Loading…
Reference in a new issue