-
-
Notifications
You must be signed in to change notification settings - Fork 303
/
VirtualizedMenu.tsx
78 lines (71 loc) · 2.05 KB
/
VirtualizedMenu.tsx
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
import React, { ReactElement, ReactNode, useState } from "react";
import { List, ListRowRenderer } from "react-virtualized";
import scssVariables from "@react-md/list/dist/scssVariables";
import { ListItemAddonType } from "@react-md/list";
import { DropdownMenu, Menu, MenuItem, MenuRenderer } from "@react-md/menu";
import { Text } from "@react-md/typography";
import { unitToNumber, useAppSize } from "@react-md/utils";
import Code from "components/Code";
const mobileHeight = unitToNumber(scssVariables["rmd-list-item-large-height"]);
const desktopHeight = unitToNumber(
scssVariables["rmd-list-item-dense-large-height"]
);
interface Item {
leftAddon: ReactNode;
leftAddonType: ListItemAddonType;
children: string;
}
export default function VirtualizedMenu({
items,
}: {
items: Item[];
}): ReactElement {
const { isDesktop } = useAppSize();
const [value, setValue] = useState("None");
const rowRenderer: ListRowRenderer = ({ key, index, style }) => (
<MenuItem
key={key}
style={style}
{...items[index]}
aria-setsize={items.length}
aria-posinset={index + 1}
onClick={() => setValue(items[index].children)}
/>
);
const menuRenderer: MenuRenderer = (
{ horizontal: _horizontal, children: _children, ...props },
// this is really just added to show that it is provided as the second argument.
// it isn't really required for these examples
items
) => {
const height = isDesktop ? desktopHeight : mobileHeight;
return (
<Menu {...props}>
<List
height={height * 5.6}
rowCount={items.length}
rowRenderer={rowRenderer}
rowHeight={height}
tabIndex={null}
width={200}
className="rmd-list"
/>
</Menu>
);
};
return (
<>
<Text>
Last clicked value: <Code>{value}</Code>
</Text>
<DropdownMenu
id="virtualized-example"
items={items}
menuRenderer={menuRenderer}
theme="secondary"
>
Virtualized
</DropdownMenu>
</>
);
}