/
CssLayout.tsx
47 lines (43 loc) · 1.62 KB
/
CssLayout.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
/*
Copyright 2019 Adobe
All Rights Reserved.
NOTICE: Adobe permits you to use, modify, and distribute this file in
accordance with the terms of the Adobe license agreement accompanying
it. If you have received this file from a source other than Adobe,
then your use, modification, or distribution of it requires the prior
written permission of Adobe.
*/
import { getRecord, Record } from "../lines";
import React, { useState, forwardRef } from "react";
import Virtualizer from "../../Virtualizer";
import "./CssLayout.css";
function Row(properties: { children: string, [other: string]: any }) {
let { children, ...otherProps } = properties;
let [selected, setSelected] = useState(false);
return (
<div
className={`SampleRow${selected ? " selected" : ""}`}
onClick={() => setSelected(!selected) }
{...otherProps}
>{children}</div>
);
}
let items: any[] = [];
let itemsPerSection = 20;
for (let section = 0; section < 100; section++) {
// for (let i = 0; i < 300; i++) {
items.push({ key: String(- section - 1), type: "row", row: `Section Header: ${section}`})
// }
for (let i = 0; i < itemsPerSection; i++) {
items.push(getRecord(section * itemsPerSection + i));
};
}
export default forwardRef(function CssLayout(props, ref) {
return <Virtualizer id="virtualizer" items={items} itemKey="key" itemType="type" className="SampleContainer" ref={ref}>
{
item => item.row
? <Row>{item.row}</Row>
: <img className="SampleCell" src={item.images[0]} title={item.text}></img>
}
</Virtualizer>;
})