-
-
Notifications
You must be signed in to change notification settings - Fork 784
/
VariableSizeList.js
81 lines (75 loc) · 2.4 KB
/
VariableSizeList.js
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
79
80
81
import React from 'react';
import { VariableSizeList } from 'react-window';
import CodeBlock from '../../components/CodeBlock';
import CodeSandboxLink from '../../components/CodeSandboxLink';
import CODE_HORIZONTAL from '../../code/VariableSizeListHorizontal.js';
import CODE_VERTICAL from '../../code/VariableSizeListVertical.js';
import styles from './shared.module.css';
const columnSizes = new Array(1000)
.fill(true)
.map(() => 75 + Math.round(Math.random() * 50));
const rowSizes = new Array(1000)
.fill(true)
.map(() => 25 + Math.round(Math.random() * 50));
export default function() {
return (
<div className={styles.ExampleWrapper}>
<h1 className={styles.ExampleHeader}>Variable Size List</h1>
<div className={styles.Example}>
<div className={styles.ExampleDemo}>
<VariableSizeList
className={styles.List}
height={150}
itemCount={1000}
itemSize={index => rowSizes[index]}
width={300}
>
{({ index, style }) => (
<div
className={index % 2 ? styles.ListItemOdd : styles.ListItemEven}
style={style}
>
Row {index}
</div>
)}
</VariableSizeList>
<CodeSandboxLink
className={styles.TryItOutLink}
sandbox="variable-size-list-vertical"
/>
</div>
<div className={styles.ExampleCode}>
<CodeBlock value={CODE_VERTICAL} />
</div>
</div>
<div className={styles.Example}>
<div className={styles.ExampleDemo}>
<VariableSizeList
className={styles.List}
direction="horizontal"
height={75}
itemCount={1000}
itemSize={index => columnSizes[index]}
width={300}
>
{({ index, style }) => (
<div
className={index % 2 ? styles.ListItemOdd : styles.ListItemEven}
style={style}
>
Column {index}
</div>
)}
</VariableSizeList>
<CodeSandboxLink
className={styles.TryItOutLink}
sandbox="variable-size-list-horizontal"
/>
</div>
<div className={styles.ExampleCode}>
<CodeBlock value={CODE_HORIZONTAL} />
</div>
</div>
</div>
);
}