/
index.jsx
97 lines (92 loc) · 2.94 KB
/
index.jsx
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
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
import React, { useState } from "react";
import { Code } from "../../components/code";
import { TwicAbstract } from "../../components/demo-wrapper/twicAbstract";
import { TwicWrapper } from "../../components/demo-wrapper/twicWrapper";
import { TwicImg, TwicView } from "@twicpics/components/react";
import "./index.scss";
const images = [
{
url: `components/bulk-loading/pool-1.jpg`,
},
{
url: `components/bulk-loading/pool-2.jpg`,
},
{
url: `components/bulk-loading/pool-3.jpg`,
},
{
url: `components/bulk-loading/pool-4.jpg`,
},
{
url: `components/bulk-loading/pool-5.jpg`,
},
];
const TwicBulkLoading = () => {
const [current, setCurrent] = useState(2);
const [last, setLast] = useState(1);
const [penultimate, setPenultimate] = useState(0);
const changeImage = () => {
setCurrent((current + 1) % images.length);
setLast((last + 1) % images.length);
setPenultimate((penultimate + 1) % images.length);
};
return (
<div id="twic-bulk-loading-container">
<TwicWrapper gitHubUrl="src/pages/bulk-loading/index.jsx">
<TwicAbstract title="Bulk loading">
<p>
With<Code>TwicImg</Code>and<Code>TwicVideo</Code>your medias will
only start loading when they come into the viewport.
</p>
<p>
But sometimes you may want to load multiple assets in bulk instead
of lazy loading them.
</p>
<p>
This is where<Code>TwicView</Code>comes into play.
</p>
<p>
The<Code>TwicView</Code>components eager loads all of his
<Code>TwicImg</Code>and
<Code>TwicVideo</Code>children as soon as<Code>TwicView</Code>comes
into the viewport (depending on your anticipation settings).
</p>
<p>
See also the
<a href="/eager" target="_blank" rel="noreferrer">
eager property
</a>
that disables lazy loading for a given media.
</p>
</TwicAbstract>
<TwicView>
<div className="polaroids" onClick={changeImage}>
<div
className={`polaroid bottom ${current % 2 === 0 ? `left` : ``}`}
>
<TwicImg src={images[penultimate].url} />
</div>
<div
className={`polaroid bottom previous ${
(current - 1) % 2 === 0 ? `left` : ``
}`}
>
<TwicImg src={images[last].url} />
</div>
{images.map((image, i) => (
<div
className={`polaroid ${i === current ? `top` : ``} ${
i % 2 === 0 ? `left` : ``
}`}
key={i}
>
<TwicImg src={image.url} />
</div>
))}
</div>
</TwicView>
</TwicWrapper>
</div>
);
};
export default TwicBulkLoading;