Skip to content

Commit 4a6770d

Browse files
SwizecSwizec
committed
Better organize demo app. Wip dataviz example
1 parent ebbb736 commit 4a6770d

8 files changed

+553
-59
lines changed

‎demo/src/Dataviz.js

+50
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,50 @@
1+
import React, { Component } from "react";
2+
import FadeIn from "../../src";
3+
import * as d3 from "d3";
4+
5+
class PopulationChart extends Component {
6+
state = {
7+
data: []
8+
};
9+
10+
componentDidMount() {
11+
d3
12+
.csv(
13+
"./population.csv",
14+
d => (
15+
console.log(d),
16+
{
17+
country: d.ISO,
18+
noc: d.NOC,
19+
name: d["Country name"],
20+
population: Number(d["pop.2010"].replace(/\./g, ""))
21+
}
22+
)
23+
)
24+
.then(data => {
25+
console.log(error, data);
26+
this.setState({
27+
data
28+
});
29+
this.props.onLoad();
30+
});
31+
}
32+
33+
render() {
34+
const { data } = this.state;
35+
36+
return (
37+
<React.Fragment>
38+
<h2>hai</h2>
39+
</React.Fragment>
40+
);
41+
}
42+
}
43+
44+
export const Dataviz = () => (
45+
<div>
46+
<FadeIn height={600}>
47+
{onload => <PopulationChart onLoad={onload} />}
48+
</FadeIn>
49+
</div>
50+
);

‎demo/src/FunctionAsChildren.js

+16
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,16 @@
1+
import React from "react";
2+
import FadeIn from "../../src";
3+
4+
export const FunctionAsChildren = () => (
5+
<div>
6+
<FadeIn height={600}>
7+
{onload => (
8+
<img
9+
src="https://images.unsplash.com/photo-1494236581341-7d38b2e7d824?ixlib=rb-0.3.5&s=ff97ff4fafca298502452a45ea012698&auto=format&fit=crop&w=1888&q=80"
10+
onLoad={onload}
11+
style={{ height: 600 }}
12+
/>
13+
)}
14+
</FadeIn>
15+
</div>
16+
);

‎demo/src/RenderProp.js

+17
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,17 @@
1+
import React from "react";
2+
import FadeIn from "../../src";
3+
4+
export const RenderProp = () => (
5+
<div>
6+
<FadeIn
7+
height={600}
8+
render={onload => (
9+
<img
10+
src="https://images.unsplash.com/photo-1508606572321-901ea443707f?ixlib=rb-0.3.5&s=445c447b4e24f8ffa34df0c0edb2d2bc&auto=format&fit=crop&w=932&q=80"
11+
onLoad={onload}
12+
style={{ height: 600 }}
13+
/>
14+
)}
15+
/>
16+
</div>
17+
);

‎demo/src/WithMetaInfo.js

+20
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,20 @@
1+
import React from "react";
2+
import FadeIn from "../../src";
3+
4+
export const WithMetaInfo = () => (
5+
<div>
6+
<FadeIn height={600}>
7+
{onload => (
8+
<div>
9+
<h3>Photo By Ivan Dodig</h3>
10+
<img
11+
src="https://images.unsplash.com/photo-1504439904031-93ded9f93e4e?ixlib=rb-0.3.5&s=b7afd4dd0f755f1a465b617ad13da628&auto=format&fit=crop&w=976&q=80"
12+
onLoad={onload}
13+
style={{ height: 500 }}
14+
/>
15+
<p>Mirca, Croatia</p>
16+
</div>
17+
)}
18+
</FadeIn>
19+
</div>
20+
);

‎demo/src/index.js

+8-51
Original file line numberDiff line numberDiff line change
@@ -1,63 +1,20 @@
11
import React, { Component } from "react";
22
import { render } from "react-dom";
33

4-
import FadeIn from "../../src";
5-
6-
const FACExample = () => (
7-
<div>
8-
<FadeIn height={600}>
9-
{onload => (
10-
<img
11-
src="https://images.unsplash.com/photo-1494236581341-7d38b2e7d824?ixlib=rb-0.3.5&s=ff97ff4fafca298502452a45ea012698&auto=format&fit=crop&w=1888&q=80"
12-
onLoad={onload}
13-
style={{ height: 600 }}
14-
/>
15-
)}
16-
</FadeIn>
17-
</div>
18-
);
19-
20-
const RenderPropExample = () => (
21-
<div>
22-
<FadeIn
23-
height={600}
24-
render={onload => (
25-
<img
26-
src="https://images.unsplash.com/photo-1508606572321-901ea443707f?ixlib=rb-0.3.5&s=445c447b4e24f8ffa34df0c0edb2d2bc&auto=format&fit=crop&w=932&q=80"
27-
onLoad={onload}
28-
style={{ height: 600 }}
29-
/>
30-
)}
31-
/>
32-
</div>
33-
);
34-
35-
const ExampleWithMetaInfo = () => (
36-
<div>
37-
<FadeIn height={600}>
38-
{onload => (
39-
<div>
40-
<h3>Photo By Ivan Dodig</h3>
41-
<img
42-
src="https://images.unsplash.com/photo-1504439904031-93ded9f93e4e?ixlib=rb-0.3.5&s=b7afd4dd0f755f1a465b617ad13da628&auto=format&fit=crop&w=976&q=80"
43-
onLoad={onload}
44-
style={{ height: 500 }}
45-
/>
46-
<p>Mirca, Croatia</p>
47-
</div>
48-
)}
49-
</FadeIn>
50-
</div>
51-
);
4+
import { FunctionAsChildren } from "./FunctionAsChildren";
5+
import { RenderProp } from "./RenderProp";
6+
import { WithMetaInfo } from "./WithMetaInfo";
7+
import { Dataviz } from "./Dataviz";
528

539
class Demo extends Component {
5410
render() {
5511
return (
5612
<div>
5713
<h1>react-lazyload-fadein examples</h1>
58-
<FACExample />
59-
<RenderPropExample />
60-
<ExampleWithMetaInfo />
14+
<FunctionAsChildren />
15+
<RenderProp />
16+
<WithMetaInfo />
17+
<Dataviz />
6118
</div>
6219
);
6320
}

‎demo/src/population.csv

+215
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,215 @@
1+
ISO,pop.2010,Country name,NOC
2+
AFG,34.385.000,Afghanistan,AFG
3+
ALB,3.205.000,Albania,ALB
4+
DZA,35.468.000,Algeria,ALG
5+
ASM,68.420,American Samoa,ASA
6+
AND,84.864,Andorra,AND
7+
AGO,19.082.000,Angola,ANG
8+
ATG,88.000,Antigua and Barbuda,ANT
9+
ARG,40.412.000,Argentina,ARG
10+
ARM,3.092.000,Armenia,ARM
11+
ABW,108.000,Aruba,ARU
12+
AUS,22.299.000,Australia,AUS
13+
AUT,8.390.000,Austria,AUT
14+
AZE,9.054.000,Azerbaijan,AZE
15+
BHS,343.000,Bahamas,BAH
16+
BHR,1.262.000,Bahrain,BRN
17+
BGD,148.692.000,Bangladesh,BAN
18+
BRB,274.000,Barbados,BAR
19+
BLR,9.490.000,Belarus,BLR
20+
BEL,10.896.000,Belgium,BEL
21+
BLZ,345.000,Belize,BIZ
22+
BEN,8.850.000,Benin,BEN
23+
BMU,64.600,Bermuda,BER
24+
BTN,726.000,Bhutan,BHU
25+
BOL,9.929.000,Bolivia,BOL
26+
BIH,3.760.000,Bosnia and Herzegovina,BIH
27+
BWA,2.007.000,Botswana,BOT
28+
BRA,194.946.000,Brazil,BRA
29+
VGB,88.000,British Virgin Islands,IVB
30+
BRN,399.000,Brunei,BRU
31+
BGR,7.534.000,Bulgaria,BUL
32+
BFA,16.468.000,Burkina Faso,BUR
33+
MMR,47.963.000,Burma,MYA
34+
BDI,8.382.000,Burundi,BDI
35+
KHM,14.139.000,Cambodia,CAM
36+
CMR,19.599.000,Cameroon,CMR
37+
CAN,34.126.000,Canada,CAN
38+
CPV,496.000,Cape Verde,CPV
39+
CYM,56.230,Cayman Islands,CAY
40+
CAF,4.401.000,Central African Republic,CAF
41+
TCD,11.227.000,Chad,CHA
42+
CHL,17.113.688,Chile,CHI
43+
CHN,1.338.300.000,China,CHN
44+
COL,46.295.000,Colombia,COL
45+
COM,735.000,Comoros,COM
46+
COG,4.043.000,Congo-Brazzaville,CGO
47+
COK,20.000,Cook Islands,COK
48+
CRI,4.659.000,Costa Rica,CRC
49+
HRV,4.418.000,Croatia,CRO
50+
CUB,11.258.000,Cuba,CUB
51+
CYP,659.350,Cyprus,CYP
52+
CZE,10.520.000,Czech Republic,CZE
53+
COD,65.965.000,Democratic Republic of Congo,COD
54+
DNK,5.547.000,Denmark,DEN
55+
DJI,889.000,Djibouti,DJI
56+
DMA,68.000,Dominica,DMA
57+
DOM,9.927.000,Dominican Republic,DOM
58+
TLS,1.124.000,East Timor,TLS
59+
ECU,14.465.000,Ecuador,ECU
60+
EGY,81.121.000,Egypt,EGY
61+
SLV,6.193.000,El Salvador,ESA
62+
GNQ,700.000,Equatorial Guinea,GEQ
63+
ERI,5.254.000,Eritrea,ERI
64+
EST,1.340.000,Estonia,EST
65+
ETH,82.950.000,Ethiopia,ETH
66+
FJI,860.000,Fiji,FIJ
67+
FIN,5.364.000,Finland,FIN
68+
FRA,64.895.000,France,FRA
69+
GAB,1.505.000,Gabon,GAB
70+
GMB,1.729.000,Gambia,GAM
71+
GEO,4.452.000,Georgia,GEO
72+
DEU,81.777.000,Germany,GER
73+
GHA,24.392.000,Ghana,GHA
74+
GRC,11.316.000,Greece,GRE
75+
GRD,104.000,Grenada,GRN
76+
GUM,179.000,Guam,GUM
77+
GTM,14.389.000,Guatemala,GUA
78+
GIN,9.982.000,Guinea,GUI
79+
GNB,1.515.000,Guinea-Bissau,GBS
80+
GUY,755.000,Guyana,GUY
81+
HTI,9.993.000,Haiti,HAI
82+
HND,7.600.000,Honduras,HON
83+
HKG,7.068.000,Hong Kong,HKG
84+
HUN,10.000.000,Hungary,HUN
85+
ISL,318.000,Iceland,ISL
86+
IND,1.224.615.000,India,IND
87+
IDN,239.870.000,Indonesia,INA
88+
IRN,73.973.000,Iran,IRI
89+
IRQ,32.031.000,Iraq,IRQ
90+
IRL,4.475.000,Ireland,IRL
91+
ISR,7.624.000,Israel,ISR
92+
ITA,60.483.000,Italy,ITA
93+
CIV,19.738.000,Ivory Coast,CIV
94+
JAM,2.702.000,Jamaica,JAM
95+
JPN,127.451.000,Japan,JPN
96+
JOR,6.047.000,Jordan,JOR
97+
KAZ,16.323.000,Kazakhstan,KAZ
98+
KEN,40.513.000,Kenya,KEN
99+
KIR,100.000,Kiribati,KIR
100+
KWT,2.736.000,Kuwait,KUW
101+
KGZ,5.448.000,Kyrgyzstan,KGZ
102+
LAO,6.201.000,Laos,LAO
103+
LVA,2.239.000,Latvia,LAT
104+
LBN,4.227.000,Lebanon,LIB
105+
LSO,2.171.000,Lesotho,LES
106+
LBR,3.994.000,Liberia,LBR
107+
LBY,6.355.000,Libya,LBA
108+
LIE,36.032,Liechtenstein,LIE
109+
LTU,3.287.000,Lithuania,LTU
110+
LUX,507.000,Luxembourg,LUX
111+
MKD,2.060.000,Macedonia,MKD
112+
MDG,20.714.000,Madagascar,MAD
113+
MWI,14.901.000,Malawi,MAW
114+
MYS,28.401.000,Malaysia,MAS
115+
MDV,316.000,Maldives,MDV
116+
MLI,15.370.000,Mali,MLI
117+
MLT,416.000,Malta,MLT
118+
MHL,54.038,Marshall Islands,MHL
119+
MRT,3.460.000,Mauritania,MTN
120+
MUS,1.281.000,Mauritius,MRI
121+
MEX,113.423.000,Mexico,MEX
122+
FSM,111.000,Micronesia,FSM
123+
MDA,3.562.000,Moldova,MDA
124+
MCO,35.407,Monaco,MON
125+
MNG,2.756.000,Mongolia,MGL
126+
MNE,632.000,Montenegro,MNE
127+
MAR,31.951.000,Morocco,MAR
128+
MOZ,23.390.000,Mozambique,MOZ
129+
NAM,2.283.000,Namibia,NAM
130+
NRU,10.372,Nauru,NRU
131+
NPL,29.959.000,Nepal,NEP
132+
NLD,16.616.000,Netherlands,NED
133+
NZL,4.368.000,New Zealand,NZL
134+
NIC,5.789.000,Nicaragua,NCA
135+
NER,15.512.000,Niger,NIG
136+
NGA,158.423.000,Nigeria,NGR
137+
PRK,24.589.122,North Korea,PRK
138+
NOR,4.889.000,Norway,NOR
139+
OMN,2.783.000,Oman,OMA
140+
PAK,173.593.000,Pakistan,PAK
141+
PLW,20.472,Palau,PLW
142+
PSE,4.152.000,Palestine,PLE
143+
PAN,3.517.000,Panama,PAN
144+
PNG,6.858.000,Papua New Guinea,PNG
145+
PRY,6.454.000,Paraguay,PAR
146+
PER,29.076.000,Peru,PER
147+
PHL,93.261.000,Philippines,PHI
148+
POL,38.184.000,Poland,POL
149+
PRT,10.638.000,Portugal,POR
150+
PRI,3.978.000,Puerto Rico,PUR
151+
QAT,1.759.000,Qatar,QAT
152+
ROU,21.438.000,Romania,ROU
153+
RUS,141.750.000,Russia,RUS
154+
RWA,10.624.000,Rwanda,RWA
155+
KNA,52.000,Saint Kitts and Nevis,SKN
156+
LCA,174.000,Saint Lucia,LCA
157+
VCT,109.000,Saint Vincent and the Grenadines,VIN
158+
WSM,184.000,Samoa,SAM
159+
SMR,31.534,San Marino,SMR
160+
STP,165.000,Sao Tome and Principe,STP
161+
SAU,27.448.000,Saudi Arabia,KSA
162+
SEN,12.434.000,Senegal,SEN
163+
SRB,7.291.000,Serbia,SRB
164+
SYC,87.000,Seychelles,SEY
165+
SLE,5.867.000,Sierra Leone,SLE
166+
SGP,5.077.000,Singapore,SIN
167+
SVK,5.430.000,Slovakia,SVK
168+
SVN,2.049.000,Slovenia,SLO
169+
SLB,538.000,Solomon Islands,SOL
170+
SOM,9.331.000,Somalia,SOM
171+
ZAF,49.991.000,South Africa,RSA
172+
KOR,48.875.000,South Korea,KOR
173+
ESP,46.071.000,Spain,ESP
174+
LKA,20.860.000,Sri Lanka,SRI
175+
SDN,43.552.000,Sudan,SUD
176+
SUR,525.000,Surinam,SUR
177+
SWZ,1.056.000,Swaziland,SWZ
178+
SWE,9.378.000,Sweden,SWE
179+
CHE,7.826.000,Switzerland,SUI
180+
SYR,20.447.000,Syria,SYR
181+
TWN,23.174.528,Taiwan,TPE
182+
TJK,6.879.000,Tajikistan,TJK
183+
TZA,44.841.000,Tanzania,TAN
184+
THA,69.122.000,Thailand,THA
185+
TGO,6.028.000,Togo,TOG
186+
TON,104.000,Tonga,TGA
187+
TTO,1.341.000,Trinidad and Tobago,TRI
188+
TUN,10.549.000,Tunisia,TUN
189+
TUR,72.752.000,Turkey,TUR
190+
TKM,5.042.000,Turkmenistan,TKM
191+
TUV,9.827,Tuvalu,TUV
192+
UGA,33.424.000,Uganda,UGA
193+
GBR,62.232.000,UK,GBR
194+
UKR,45.871.000,Ukraine,UKR
195+
ARE,7.512.000,United Arab Emirates,UAE
196+
URY,3.357.000,Uruguay,URU
197+
USA,309.349.000,US,USA
198+
UZB,28.228.000,Uzbekistan,UZB
199+
VUT,240.000,Vanuatu,VAN
200+
VEN,28.834.000,Venezuela,VEN
201+
VNM,86.928.000,Vietnam,VIE
202+
VIR,110.000,Virgin Islands,ISV
203+
YEM,24.053.000,Yemen,YEM
204+
ZMB,12.927.000,Zambia,ZAM
205+
ZWE,12.571.000,Zimbabwe,ZIM
206+
,,,
207+
,,,
208+
,,,
209+
,,,
210+
,,,
211+
,,,
212+
,,,
213+
,,,
214+
,,,
215+
,,,

0 commit comments

Comments
 (0)