Compare commits
553 Commits
| Author | SHA1 | Date | |
|---|---|---|---|
|
|
b252e807be | ||
|
|
3b7b50f51f | ||
|
|
d027eca037 | ||
|
|
c96fbd43c4 | ||
|
|
2f696fb289 | ||
|
|
887ccf2534 | ||
|
|
a34c28aaf9 | ||
|
|
f428b39aa1 | ||
|
|
32b3646202 | ||
|
|
cee6c8d54b | ||
|
|
a359efcd68 | ||
|
|
84506e9473 | ||
|
|
44485824f7 | ||
|
|
2586adb41c | ||
|
|
cff02339dd | ||
|
|
a7ba8745cb | ||
|
|
4b8c8bfa7e | ||
|
|
e3dbfcd19d | ||
|
|
2cb3e9060f | ||
|
|
1daac009b3 | ||
|
|
546b9f6d59 | ||
|
|
37639a7c87 | ||
|
|
eb0967749c | ||
|
|
9d80600b63 | ||
|
|
021abead6f | ||
|
|
383128d3d0 | ||
|
|
f1ae286b15 | ||
|
|
62b34d3573 | ||
|
|
56b0878f8c | ||
|
|
eb38eace01 | ||
|
|
af98484233 | ||
|
|
cbf4858b39 | ||
|
|
4221082c8e | ||
|
|
2f89ee4cd5 | ||
|
|
c26241e8a1 | ||
|
|
d62013bfe1 | ||
|
|
c4efcecd98 | ||
|
|
d6d0a17359 | ||
|
|
b26ebafdef | ||
|
|
ea72bd2f92 | ||
|
|
e2317870f1 | ||
|
|
7dc3b723cd | ||
|
|
dfa0f402d4 | ||
|
|
c4aaff43f6 | ||
|
|
ae2fa05da5 | ||
|
|
5f47b8370c | ||
|
|
8faba4cb2f | ||
|
|
0be0c9ca72 | ||
|
|
5f0258bc04 | ||
|
|
6941c84de2 | ||
|
|
7bc32d9148 | ||
|
|
b1e6227e67 | ||
|
|
f3f308ffaf | ||
|
|
e7020c6106 | ||
|
|
dc204718f0 | ||
|
|
e4a9af594f | ||
|
|
c22c398cec | ||
|
|
8862cb0e35 | ||
|
|
4f3eb847b3 | ||
|
|
f11140a0a6 | ||
|
|
c653f07ca8 | ||
|
|
7ceb3fdff9 | ||
|
|
3e9af29f7f | ||
|
|
4eccc7696e | ||
|
|
788d9c8678 | ||
|
|
900ce3cc5f | ||
|
|
4b6a66900f | ||
|
|
651edfe54d | ||
|
|
636d515e62 | ||
|
|
a3b3125c5c | ||
|
|
d6ab9fde20 | ||
|
|
99f82d7243 | ||
|
|
3f2c6bebc0 | ||
|
|
002af59ea3 | ||
|
|
3ec1319427 | ||
|
|
2fefe1edce | ||
|
|
784e29fd65 | ||
|
|
74d10acb03 | ||
|
|
0a7d248cc5 | ||
|
|
0a095d55f4 | ||
|
|
08f6e2f603 | ||
|
|
a1457be82f | ||
|
|
724d87ea40 | ||
|
|
87384331e8 | ||
|
|
0db185e5d7 | ||
|
|
9774f127f8 | ||
|
|
53970c95be | ||
|
|
3842de7f5f | ||
|
|
a941c9928e | ||
|
|
a0924bb67a | ||
|
|
ac6c3d3eae | ||
|
|
9c7bb68d01 | ||
|
|
451cb4c623 | ||
|
|
e8ea302025 | ||
|
|
6bb7a6c60e | ||
|
|
1a60ccde97 | ||
|
|
ed3c401c9e | ||
|
|
be1d6848f0 | ||
|
|
5934242b7e | ||
|
|
e19372d5f4 | ||
|
|
58c129dff9 | ||
|
|
f5b5d9a5f3 | ||
|
|
cd443ca3da | ||
|
|
5b7af23023 | ||
|
|
2039cf87ee | ||
|
|
7149218fa4 | ||
|
|
cb8283877a | ||
|
|
107c74cd7a | ||
|
|
5cef4e9780 | ||
|
|
4aaf555d80 | ||
|
|
dc84614b0c | ||
|
|
625fc71ebb | ||
|
|
659cef8a98 | ||
|
|
6cc07e595a | ||
|
|
fec4df7150 | ||
|
|
88fbe7cc58 | ||
|
|
7eb00d77e9 | ||
|
|
6784bf841e | ||
|
|
7268e9423f | ||
|
|
309de75dc5 | ||
|
|
3dc13b49b9 | ||
|
|
96540f5afd | ||
|
|
6b504aa08b | ||
|
|
e0d718e49c | ||
|
|
01651c2f14 | ||
|
|
f647c99f0a | ||
|
|
1e4e30f9a2 | ||
|
|
139a6d9f9c | ||
|
|
742ad40cec | ||
|
|
d161c0a805 | ||
|
|
9b6bedc109 | ||
|
|
887c2a7386 | ||
|
|
86561ea4e6 | ||
|
|
760706b92b | ||
|
|
92ffaf51d5 | ||
|
|
57e56e8175 | ||
|
|
8a6f8eddde | ||
|
|
2d90a5ba61 | ||
|
|
7c78a4d0d4 | ||
|
|
d3fe28ccd0 | ||
|
|
aac960738a | ||
|
|
d3e0241469 | ||
|
|
22e6d6a6d2 | ||
|
|
1a1d339466 | ||
|
|
3ac0f9fc9a | ||
|
|
e71c772d12 | ||
|
|
00b883302c | ||
|
|
e33d5e7bb1 | ||
|
|
7217ae2671 | ||
|
|
994651f5f9 | ||
|
|
f23fd9c145 | ||
|
|
b12a61d7c6 | ||
|
|
f40e975f3f | ||
|
|
017cc60cf3 | ||
|
|
b0e883b4dc | ||
|
|
9cbc399916 | ||
|
|
ecf1fa5827 | ||
|
|
cf707bc9f7 | ||
|
|
b9cae83735 | ||
|
|
a622002aed | ||
|
|
f5b00d332a | ||
|
|
188230ed62 | ||
|
|
a5c102546b | ||
|
|
ee785cea3a | ||
|
|
e6b4020059 | ||
|
|
aa50560d83 | ||
|
|
1f48f2a157 | ||
|
|
4c213db337 | ||
|
|
7327d9fc5f | ||
|
|
c636a24ab6 | ||
|
|
064d1cf34a | ||
|
|
35ebcd3c55 | ||
|
|
1c8c0bb99e | ||
|
|
d6d06c6ecc | ||
|
|
bd8054ef05 | ||
|
|
725a0679b2 | ||
|
|
c7e6ff57f6 | ||
|
|
ea4f9ef2c6 | ||
|
|
bbc2a37ab8 | ||
|
|
d23d35d15a | ||
|
|
eef19d1a04 | ||
|
|
92ec06b65c | ||
|
|
e2d954d1e7 | ||
|
|
1d9e1aaf2d | ||
|
|
a92c60c8cc | ||
|
|
1ecf70469d | ||
|
|
73ee739d02 | ||
|
|
fadd204d35 | ||
|
|
dd653e305d | ||
|
|
13a7fc0d07 | ||
|
|
4f9905e4d3 | ||
|
|
42979fa4ff | ||
|
|
db8498e15c | ||
|
|
1b94dd8f40 | ||
|
|
181b8454b1 | ||
|
|
01ac4e13d3 | ||
|
|
bf916998f2 | ||
|
|
7ccf5eebc0 | ||
|
|
fec4d82416 | ||
|
|
6d2cc9121a | ||
|
|
853784bc3f | ||
|
|
612ab8f7bd | ||
|
|
29d9a13ffb | ||
|
|
4c2ff9ca34 | ||
|
|
63dff641cf | ||
|
|
f918eaa38c | ||
|
|
49f47947c5 | ||
|
|
bde2c2905b | ||
|
|
781cb6db90 | ||
|
|
c4c17f4f4f | ||
|
|
6aa47d0ebf | ||
|
|
81c8a0732d | ||
|
|
dfbee7f109 | ||
|
|
2714c5d6f2 | ||
|
|
2402eb5a99 | ||
|
|
d957c00dca | ||
|
|
0845e3efae | ||
|
|
3806959a6d | ||
|
|
0b18dbc001 | ||
|
|
f788099ab7 | ||
|
|
e52a41c7be | ||
|
|
45efe53fd2 | ||
|
|
7610b39759 | ||
|
|
94a04746c2 | ||
|
|
b6a74e8abe | ||
|
|
58ccca7f75 | ||
|
|
e97536deb5 | ||
|
|
6851ef63b7 | ||
|
|
e559120849 | ||
|
|
c9cf3bb0c5 | ||
|
|
b1a1e1440b | ||
|
|
89789f974b | ||
|
|
e4e3cb9125 | ||
|
|
d94efdaa96 | ||
|
|
507c52b220 | ||
|
|
330a594d4b | ||
|
|
13b86c3220 | ||
|
|
ce88118f88 | ||
|
|
e6e5795dab | ||
|
|
b12825dee9 | ||
|
|
9bd86524e2 | ||
|
|
609ba0776b | ||
|
|
31f223fc9e | ||
|
|
8b569f5573 | ||
|
|
0ea0bd7d2d | ||
|
|
83ba002377 | ||
|
|
99a02b92d7 | ||
|
|
8fd061c819 | ||
|
|
9bc9c80617 | ||
|
|
3c2848d785 | ||
|
|
c022e0f61b | ||
|
|
49711c27aa | ||
|
|
47d9b441d4 | ||
|
|
d9b99c2d6f | ||
|
|
b06a057dd4 | ||
|
|
a5ea866492 | ||
|
|
2eb3bdb7a3 | ||
|
|
19c9ec1544 | ||
|
|
3ead8e3d11 | ||
|
|
6d6208a7fa | ||
|
|
15707df9bc | ||
|
|
a0b2f21987 | ||
|
|
ea47c6c9f3 | ||
|
|
76c780f3a9 | ||
|
|
556dfa96c5 | ||
|
|
ea6b0b9e56 | ||
|
|
547c811365 | ||
|
|
d26a0ceb1a | ||
|
|
9ce9d5913b | ||
|
|
83e53e59de | ||
|
|
30dec0b6a0 | ||
|
|
fa87fc1234 | ||
|
|
3f52012b40 | ||
|
|
b0091b516c | ||
|
|
1f0e950538 | ||
|
|
a42b28ff58 | ||
|
|
fbeace0f81 | ||
|
|
7a99d421c9 | ||
|
|
5724abb1ed | ||
|
|
0898f44329 | ||
|
|
24a6ed9201 | ||
|
|
3ee0f9c321 | ||
|
|
f9b2f3f53e | ||
|
|
ed7f3299fd | ||
|
|
562937ce28 | ||
|
|
abb04d53f4 | ||
|
|
083c2fa33f | ||
|
|
eae015d0ee | ||
|
|
e46589f784 | ||
|
|
0b5cb01d2f | ||
|
|
0c788b272f | ||
|
|
9aa593096e | ||
|
|
cef5a9d791 | ||
|
|
480d599895 | ||
|
|
813a536d0f | ||
|
|
33ac4ccc76 | ||
|
|
f409f18c0f | ||
|
|
658bd6a67d | ||
|
|
d284e50900 | ||
|
|
459e68f93b | ||
|
|
5bdd8f8640 | ||
|
|
23c85e45b7 | ||
|
|
e3aea2ee0c | ||
|
|
33c1227063 | ||
|
|
0fdb244c6d | ||
|
|
fed91d4a82 | ||
|
|
7f80adf253 | ||
|
|
c24c9e602c | ||
|
|
d8cfaf830f | ||
|
|
a7c4734802 | ||
|
|
8e14fbdc0e | ||
|
|
5b5b7d100d | ||
|
|
431525248b | ||
|
|
248d304421 | ||
|
|
4ff6c8ad51 | ||
|
|
e3075c6cbc | ||
|
|
be7d5de803 | ||
|
|
bf961b2c2a | ||
|
|
c002957436 | ||
|
|
fddf68752e | ||
|
|
55c84b449e | ||
|
|
bcf765dcf3 | ||
|
|
9424d2be52 | ||
|
|
c9767eaae4 | ||
|
|
52f253cfc8 | ||
|
|
f9acc6517a | ||
|
|
75bb7f7355 | ||
|
|
0e591c19ca | ||
|
|
c9d8f02c8e | ||
|
|
0640447cb3 | ||
|
|
d4eed6320c | ||
|
|
237cdbb2fc | ||
|
|
75bdef3e45 | ||
|
|
4eee8efbae | ||
|
|
043584fc6c | ||
|
|
8e5f7ea1d1 | ||
|
|
0a779234d2 | ||
|
|
de204315c6 | ||
|
|
37d795f9bc | ||
|
|
e3ff7dfab3 | ||
|
|
18b46dbb62 | ||
|
|
88b3ce1e7d | ||
|
|
fd857723bd | ||
|
|
4c96ea3517 | ||
|
|
e3d9944ed0 | ||
|
|
d3d258ba5b | ||
|
|
e1fd23515a | ||
|
|
33f553da2c | ||
|
|
331320b80b | ||
|
|
2e578d1f64 | ||
|
|
cfb998a906 | ||
|
|
2af1bffce1 | ||
|
|
738e33cd7f | ||
|
|
0febbe14de | ||
|
|
3b45fd540f | ||
|
|
4c758f484e | ||
|
|
0a207cc1f1 | ||
|
|
6102e015c3 | ||
|
|
20700b9e67 | ||
|
|
780f01a993 | ||
|
|
3d4afaaa5d | ||
|
|
870def7781 | ||
|
|
5ab16ba05d | ||
|
|
f1b8acc7b5 | ||
|
|
dd499fdee2 | ||
|
|
2fb27e9598 | ||
|
|
1dcaad3f8e | ||
|
|
6fe2c0c425 | ||
|
|
58d3bf0352 | ||
|
|
f271ce3b03 | ||
|
|
0a9b79096b | ||
|
|
12b8de2861 | ||
|
|
de16bd5883 | ||
|
|
93572503dd | ||
|
|
23d90ff554 | ||
|
|
ffa032b146 | ||
|
|
654b347d58 | ||
|
|
868c19523d | ||
|
|
252b153e86 | ||
|
|
9220805ebf | ||
|
|
324d956969 | ||
|
|
32525e5797 | ||
|
|
76c5058590 | ||
|
|
c149e9594d | ||
|
|
023e79f085 | ||
|
|
5eca790f0a | ||
|
|
7fa746f7c8 | ||
|
|
37843c4706 | ||
|
|
f60002cd14 | ||
|
|
c031dd3b10 | ||
|
|
4bb397d6e5 | ||
|
|
118e64c400 | ||
|
|
62c4231389 | ||
|
|
741eea6c73 | ||
|
|
4ca56fea73 | ||
|
|
b63c215ac9 | ||
|
|
a99bc749cb | ||
|
|
63a6f74321 | ||
|
|
b18fb3b74d | ||
|
|
b394c5a833 | ||
|
|
910464838a | ||
|
|
f39ed9ee25 | ||
|
|
14bac3b37a | ||
|
|
e9de762c45 | ||
|
|
4ea5b1d20b | ||
|
|
2aa83f71cc | ||
|
|
4bc42dfe73 | ||
|
|
ddf7a5b5f6 | ||
|
|
f6b0e9d59b | ||
|
|
fbc70acf2d | ||
|
|
5720d80e67 | ||
|
|
08656fec3f | ||
|
|
0751a8f0a1 | ||
|
|
b189a7a9c0 | ||
|
|
88348f8c85 | ||
|
|
d4aced0b21 | ||
|
|
2b7ef84999 | ||
|
|
0d18bee5f3 | ||
|
|
6bcf1e5790 | ||
|
|
02d18739d6 | ||
|
|
a30ccf5583 | ||
|
|
7c08596f40 | ||
|
|
02ea1c044c | ||
|
|
ced25b13a4 | ||
|
|
597c4bca44 | ||
|
|
07ea77092d | ||
|
|
5613670284 | ||
|
|
59fe162fe5 | ||
|
|
eecc70cf96 | ||
|
|
431706a330 | ||
|
|
cf7532a1d6 | ||
|
|
eaa87d8b5b | ||
|
|
9c4fea0d1c | ||
|
|
69f231639d | ||
|
|
8a98319d58 | ||
|
|
7e16bb70b1 | ||
|
|
774d877518 | ||
|
|
029dd9bb77 | ||
|
|
645a32032a | ||
|
|
6cfdfa8636 | ||
|
|
4c37b3f818 | ||
|
|
c2e3735ffb | ||
|
|
24c909502d | ||
|
|
77f045ccdc | ||
|
|
36aeb76e5f | ||
|
|
300374d9a8 | ||
|
|
b6d4923fb0 | ||
|
|
4658413aea | ||
|
|
2221fe1132 | ||
|
|
07ac1ea11f | ||
|
|
f1d5e0421b | ||
|
|
8ac8f35db4 | ||
|
|
2d42e44128 | ||
|
|
f414b96c03 | ||
|
|
5af1ac1836 | ||
|
|
9afcad69d1 | ||
|
|
ee5805da65 | ||
|
|
e82227b698 | ||
|
|
bf82413930 | ||
|
|
58deb56ca1 | ||
|
|
4b90c16c15 | ||
|
|
4bd2bfef69 | ||
|
|
c4a2717796 | ||
|
|
ea32d3659c | ||
|
|
d786436367 | ||
|
|
1b7b3bd006 | ||
|
|
84a9d1821b | ||
|
|
f8c5781102 | ||
|
|
777f999db5 | ||
|
|
a276e32f51 | ||
|
|
80dc66474d | ||
|
|
0e32f3669e | ||
|
|
4cb8bc68ba | ||
|
|
65d56feeeb | ||
|
|
a4a466dd26 | ||
|
|
3323ba8f0d | ||
|
|
fb3bd7f583 | ||
|
|
1235527398 | ||
|
|
15e8c64633 | ||
|
|
b4d07a679a | ||
|
|
72296a4385 | ||
|
|
8c153e6427 | ||
|
|
97ec6b66d0 | ||
|
|
ef762b50a7 | ||
|
|
4b46fb97a8 | ||
|
|
e7c875bda8 | ||
|
|
b0305f8b7e | ||
|
|
404810aba8 | ||
|
|
fd93cfb229 | ||
|
|
6d37c780ed | ||
|
|
3ce19cdfb3 | ||
|
|
c4ed771b1f | ||
|
|
7ec2988c71 | ||
|
|
499a3324b1 | ||
|
|
cf1a728e21 | ||
|
|
a07e3ad0b5 | ||
|
|
faada22274 | ||
|
|
4c00e8f69a | ||
|
|
0ac7832631 | ||
|
|
7a8977d175 | ||
|
|
7dd0009c60 | ||
|
|
c7b896be20 | ||
|
|
97654abcaa | ||
|
|
7e99f8eec3 | ||
|
|
7938338441 | ||
|
|
fdb12c2ea3 | ||
|
|
4686b1361a | ||
|
|
d424c06a99 | ||
|
|
079a983672 | ||
|
|
ffa4af3be0 | ||
|
|
caf773d5a6 | ||
|
|
b80668577d | ||
|
|
0495462ad5 | ||
|
|
30d40aa15f | ||
|
|
bacf855ed8 | ||
|
|
33669c1390 | ||
|
|
3a3aa47d32 | ||
|
|
b6526e70d6 | ||
|
|
8af4fbb0f0 | ||
|
|
84d945f7da | ||
|
|
171d3e64a0 | ||
|
|
e1d7e0bece | ||
|
|
59ce7e4a8f | ||
|
|
9f6e8e466a | ||
|
|
9bc285b67e | ||
|
|
6ec7c79cf7 | ||
|
|
3dd6235041 | ||
|
|
3ce6c88952 | ||
|
|
688c56d79c | ||
|
|
aa7ea0637e | ||
|
|
b3aa6ba924 | ||
|
|
be61bebd92 | ||
|
|
6c74abe0ed | ||
|
|
83fe3ddaee | ||
|
|
a7b717162f | ||
|
|
7332a0fe8a | ||
|
|
4f23af6a15 | ||
|
|
30e65b2ba7 | ||
|
|
edaa7881bd | ||
|
|
ff542ff7d7 | ||
|
|
7203dcb145 | ||
|
|
4346b10363 | ||
|
|
d06a7ef606 | ||
|
|
8571e6814b | ||
|
|
1d628ef207 | ||
|
|
cff20b7a4c | ||
|
|
7a92c4bf95 | ||
|
|
8e76af2192 | ||
|
|
ddb56ac56a | ||
|
|
6c61658bba | ||
|
|
757022d229 | ||
|
|
b0e208a155 | ||
|
|
6de0ab3293 |
23
.babelrc
23
.babelrc
@@ -1,23 +0,0 @@
|
||||
{
|
||||
"presets": ["react"],
|
||||
"ignore": ["third_party"],
|
||||
"plugins": [
|
||||
"transform-class-properties",
|
||||
"syntax-trailing-function-commas",
|
||||
["transform-object-rest-spread", { "useBuiltIns": true }],
|
||||
"transform-es2015-template-literals",
|
||||
"transform-es2015-literals",
|
||||
"transform-es2015-arrow-functions",
|
||||
"transform-es2015-block-scoped-functions",
|
||||
["transform-es2015-classes", { "loose": true }],
|
||||
"transform-es2015-object-super",
|
||||
"transform-es2015-shorthand-properties",
|
||||
"transform-es2015-computed-properties",
|
||||
"transform-es2015-for-of",
|
||||
"check-es2015-constants",
|
||||
["transform-es2015-spread", { "loose": true }],
|
||||
"transform-es2015-parameters",
|
||||
["transform-es2015-destructuring", { "loose": true }],
|
||||
["transform-es2015-block-scoping", { "throwIfClosureRequired": true }]
|
||||
]
|
||||
}
|
||||
@@ -1,48 +0,0 @@
|
||||
version: 2
|
||||
jobs:
|
||||
build:
|
||||
|
||||
docker:
|
||||
- image: circleci/openjdk:8-jdk-node-browsers
|
||||
|
||||
environment:
|
||||
TZ: /usr/share/zoneinfo/America/Los_Angeles
|
||||
TRAVIS_REPO_SLUG: facebook/react
|
||||
|
||||
parallelism: 4
|
||||
|
||||
steps:
|
||||
- checkout
|
||||
|
||||
- run: echo $CIRCLE_COMPARE_URL | cut -d/ -f7
|
||||
|
||||
- restore_cache:
|
||||
name: Restore node_modules cache
|
||||
keys:
|
||||
- v1-node-{{ arch }}-{{ .Branch }}-{{ checksum "yarn.lock" }}
|
||||
- v1-node-{{ arch }}-{{ .Branch }}-
|
||||
- v1-node-{{ arch }}-
|
||||
|
||||
- run:
|
||||
name: Nodejs Version
|
||||
command: node --version
|
||||
|
||||
- run:
|
||||
name: Install Packages
|
||||
command: yarn install --frozen-lockfile
|
||||
|
||||
- run:
|
||||
name: Test Packages
|
||||
command: ./scripts/circleci/test_entry_point.sh
|
||||
|
||||
- save_cache:
|
||||
name: Save node_modules cache
|
||||
key: v1-node-{{ arch }}-{{ .Branch }}-{{ checksum "yarn.lock" }}
|
||||
paths:
|
||||
- node_modules
|
||||
|
||||
- store_artifacts:
|
||||
path: ./node_modules.tgz
|
||||
|
||||
- store_artifacts:
|
||||
path: ./scripts/error-codes/codes.json
|
||||
@@ -1,18 +0,0 @@
|
||||
# http://editorconfig.org
|
||||
root = true
|
||||
|
||||
[*]
|
||||
charset = utf-8
|
||||
end_of_line = lf
|
||||
indent_size = 2
|
||||
indent_style = space
|
||||
insert_final_newline = true
|
||||
max_line_length = 80
|
||||
trim_trailing_whitespace = true
|
||||
|
||||
[*.md]
|
||||
max_line_length = 0
|
||||
trim_trailing_whitespace = false
|
||||
|
||||
[COMMIT_EDITMSG]
|
||||
max_line_length = 0
|
||||
@@ -1,14 +0,0 @@
|
||||
# Third party
|
||||
**/node_modules
|
||||
|
||||
# Not written by hand
|
||||
packages/react-art/npm/lib
|
||||
|
||||
# Build products
|
||||
build/
|
||||
coverage/
|
||||
fixtures/
|
||||
scripts/bench/benchmarks/**/*.js
|
||||
|
||||
# React repository clone
|
||||
scripts/bench/remote-repo/
|
||||
138
.eslintrc.js
138
.eslintrc.js
@@ -1,138 +0,0 @@
|
||||
'use strict';
|
||||
|
||||
const {
|
||||
es5Paths,
|
||||
esNextPaths,
|
||||
} = require('./scripts/shared/pathsByLanguageVersion');
|
||||
|
||||
const OFF = 0;
|
||||
const ERROR = 2;
|
||||
|
||||
module.exports = {
|
||||
extends: 'fbjs',
|
||||
|
||||
// Stop ESLint from looking for a configuration file in parent folders
|
||||
'root': true,
|
||||
|
||||
plugins: [
|
||||
'jest',
|
||||
'no-for-of-loops',
|
||||
'react',
|
||||
'react-internal',
|
||||
],
|
||||
|
||||
parser: 'espree',
|
||||
parserOptions: {
|
||||
ecmaVersion: 2017,
|
||||
sourceType: 'script',
|
||||
ecmaFeatures: {
|
||||
experimentalObjectRestSpread: true,
|
||||
},
|
||||
},
|
||||
|
||||
// We're stricter than the default config, mostly. We'll override a few rules
|
||||
// and then enable some React specific ones.
|
||||
rules: {
|
||||
'accessor-pairs': OFF,
|
||||
'brace-style': [ERROR, '1tbs'],
|
||||
'comma-dangle': [ERROR, 'always-multiline'],
|
||||
'consistent-return': OFF,
|
||||
'dot-location': [ERROR, 'property'],
|
||||
'dot-notation': ERROR,
|
||||
'eol-last': ERROR,
|
||||
'eqeqeq': [ERROR, 'allow-null'],
|
||||
'indent': OFF,
|
||||
'jsx-quotes': [ERROR, 'prefer-double'],
|
||||
'keyword-spacing': [ERROR, {after: true, before: true}],
|
||||
'no-bitwise': OFF,
|
||||
'no-inner-declarations': [ERROR, 'functions'],
|
||||
'no-multi-spaces': ERROR,
|
||||
'no-restricted-syntax': [ERROR, 'WithStatement'],
|
||||
'no-shadow': ERROR,
|
||||
'no-unused-expressions': ERROR,
|
||||
'no-unused-vars': [ERROR, {args: 'none'}],
|
||||
'no-use-before-define': [ERROR, {functions: false, variables: false}],
|
||||
'no-useless-concat': OFF,
|
||||
'quotes': [ERROR, 'single', {avoidEscape: true, allowTemplateLiterals: true }],
|
||||
'space-before-blocks': ERROR,
|
||||
'space-before-function-paren': OFF,
|
||||
'valid-typeof': [ERROR, {requireStringLiterals: true}],
|
||||
|
||||
// We apply these settings to files that should run on Node.
|
||||
// They can't use JSX or ES6 modules, and must be in strict mode.
|
||||
// They can, however, use other ES6 features.
|
||||
// (Note these rules are overridden later for source files.)
|
||||
'no-var': ERROR,
|
||||
strict: ERROR,
|
||||
|
||||
// React & JSX
|
||||
// Our transforms set this automatically
|
||||
'react/jsx-boolean-value': [ERROR, 'always'],
|
||||
'react/jsx-no-undef': ERROR,
|
||||
// We don't care to do this
|
||||
'react/jsx-sort-prop-types': OFF,
|
||||
'react/jsx-space-before-closing': ERROR,
|
||||
'react/jsx-uses-react': ERROR,
|
||||
'react/no-is-mounted': OFF,
|
||||
// This isn't useful in our test code
|
||||
'react/react-in-jsx-scope': ERROR,
|
||||
'react/self-closing-comp': ERROR,
|
||||
// We don't care to do this
|
||||
'react/jsx-wrap-multilines': [ERROR, {declaration: false, assignment: false}],
|
||||
|
||||
// Prevent for...of loops because they require a Symbol polyfill.
|
||||
// You can disable this rule for code that isn't shipped (e.g. build scripts and tests).
|
||||
'no-for-of-loops/no-for-of-loops': ERROR,
|
||||
|
||||
// CUSTOM RULES
|
||||
// the second argument of warning/invariant should be a literal string
|
||||
'react-internal/no-primitive-constructors': ERROR,
|
||||
'react-internal/no-to-warn-dev-within-to-throw': ERROR,
|
||||
'react-internal/warning-and-invariant-args': ERROR,
|
||||
},
|
||||
|
||||
overrides: [
|
||||
{
|
||||
// We apply these settings to files that we ship through npm.
|
||||
// They must be ES5.
|
||||
files: es5Paths,
|
||||
parser: 'espree',
|
||||
parserOptions: {
|
||||
ecmaVersion: 5,
|
||||
sourceType: 'script',
|
||||
},
|
||||
rules: {
|
||||
'no-var': OFF,
|
||||
strict: ERROR,
|
||||
},
|
||||
},
|
||||
{
|
||||
// We apply these settings to the source files that get compiled.
|
||||
// They can use all features including JSX (but shouldn't use `var`).
|
||||
files: esNextPaths,
|
||||
parser: 'babel-eslint',
|
||||
parserOptions: {
|
||||
sourceType: 'module',
|
||||
},
|
||||
rules: {
|
||||
'no-var': ERROR,
|
||||
strict: OFF,
|
||||
},
|
||||
},
|
||||
{
|
||||
files: ['**/__tests__/*.js'],
|
||||
rules: {
|
||||
// https://github.com/jest-community/eslint-plugin-jest
|
||||
'jest/no-focused-tests': ERROR,
|
||||
}
|
||||
}
|
||||
],
|
||||
|
||||
globals: {
|
||||
spyOnDev: true,
|
||||
spyOnDevAndProd: true,
|
||||
spyOnProd: true,
|
||||
__PROFILE__: true,
|
||||
__UMD__: true,
|
||||
},
|
||||
};
|
||||
1
.gitattributes
vendored
1
.gitattributes
vendored
@@ -1 +0,0 @@
|
||||
* text=auto
|
||||
14
.github/ISSUE_TEMPLATE.md
vendored
14
.github/ISSUE_TEMPLATE.md
vendored
@@ -1,14 +0,0 @@
|
||||
<!--
|
||||
Note: if the issue is about documentation or the website, please file it at:
|
||||
https://github.com/reactjs/reactjs.org/issues/new
|
||||
-->
|
||||
|
||||
**Do you want to request a *feature* or report a *bug*?**
|
||||
|
||||
**What is the current behavior?**
|
||||
|
||||
**If the current behavior is a bug, please provide the steps to reproduce and if possible a minimal demo of the problem. Your bug will get fixed much faster if we can run your code and it doesn't have dependencies other than React. Paste the link to your JSFiddle (https://jsfiddle.net/Luktwrdm/) or CodeSandbox (https://codesandbox.io/s/new) example below:**
|
||||
|
||||
**What is the expected behavior?**
|
||||
|
||||
**Which versions of React, and which browser / OS are affected by this issue? Did this work in previous versions of React?**
|
||||
14
.github/PULL_REQUEST_TEMPLATE.md
vendored
14
.github/PULL_REQUEST_TEMPLATE.md
vendored
@@ -1,14 +0,0 @@
|
||||
**Before submitting a pull request,** please make sure the following is done:
|
||||
|
||||
1. Fork [the repository](https://github.com/facebook/react) and create your branch from `master`.
|
||||
2. Run `yarn` in the repository root.
|
||||
3. If you've fixed a bug or added code that should be tested, add tests!
|
||||
4. Ensure the test suite passes (`yarn test`). Tip: `yarn test --watch TestName` is helpful in development.
|
||||
5. Run `yarn test-prod` to test in the production environment. It supports the same options as `yarn test`.
|
||||
6. If you need a debugger, run `yarn debug-test --watch TestName`, open `chrome://inspect`, and press "Inspect".
|
||||
7. Format your code with [prettier](https://github.com/prettier/prettier) (`yarn prettier`).
|
||||
8. Make sure your code lints (`yarn lint`). Tip: `yarn linc` to only check changed files.
|
||||
9. Run the [Flow](https://flowtype.org/) typechecks (`yarn flow`).
|
||||
10. If you haven't already, complete the CLA.
|
||||
|
||||
**Learn more about contributing:** https://reactjs.org/docs/how-to-contribute.html
|
||||
24
.gitignore
vendored
24
.gitignore
vendored
@@ -1,24 +0,0 @@
|
||||
.DS_STORE
|
||||
node_modules
|
||||
scripts/flow/*/.flowconfig
|
||||
*~
|
||||
*.pyc
|
||||
.grunt
|
||||
_SpecRunner.html
|
||||
__benchmarks__
|
||||
build/
|
||||
remote-repo/
|
||||
coverage/
|
||||
.module-cache
|
||||
fixtures/dom/public/react-dom.js
|
||||
fixtures/dom/public/react.js
|
||||
test/the-files-to-test.generated.js
|
||||
*.log*
|
||||
chrome-user-data
|
||||
*.sublime-project
|
||||
*.sublime-workspace
|
||||
.idea
|
||||
*.iml
|
||||
.vscode
|
||||
*.swp
|
||||
*.swo
|
||||
164
.mailmap
164
.mailmap
@@ -1,164 +0,0 @@
|
||||
Adam Timberlake <adam.timberlake@gmail.com>
|
||||
Alex Mykyta <dancingwithcows@gmail.com>
|
||||
Alex Pien <alexpien@gmail.com>
|
||||
Alex Pien <alexpien@gmail.com> <pien@pien-mbp.dhcp.thefacebook.com>
|
||||
Alex Pien <alexpien@gmail.com> <pien@pien-mbp.local>
|
||||
Andreas Savvides <asavvides@twitter.com> <AnSavvides@users.noreply.github.com>
|
||||
Andreas Savvides <asavvides@twitter.com> <andreas@nibbli.com>
|
||||
Andreas Svensson <andreas@syranide.com>
|
||||
Andres Suarez <zertosh@gmail.com>
|
||||
Andrew Kulakov <avk@8xx8.ru>
|
||||
Andrew Sokolov <asokolov@atlassian.com>
|
||||
Anto Aravinth <anto.aravinth.cse@gmail.com>
|
||||
Baraa Hamodi <bhamodi@uwaterloo.ca> <baraa@optimizely.com>
|
||||
Ben Halpern <bendhalpern@gmail.com>
|
||||
Ben Newman <bn@cs.stanford.edu> <benjamn@fb.com>
|
||||
Benjamin Woodruff <github@benjam.info> <bgw@fb.com>
|
||||
Bill Fisher <fisherwebdev@gmail.com>
|
||||
Blaine Kasten <blainekasten@gmail.com>
|
||||
Brandon Tilley <brandon@brandontilley.com>
|
||||
Changsoon Bok <winmain@gmail.com>
|
||||
Cheng Lou <chenglou92@gmail.com> <chenglou@fb.com>
|
||||
Christian Oliff <christianoliff@yahoo.com>
|
||||
Christoph Pojer <christoph.pojer@gmail.com>
|
||||
Christoph Pojer <christoph.pojer@gmail.com> <cpojer@fb.com>
|
||||
Connor McSheffrey <c@conr.me> <connor.mcsheffrey@gmail.com>
|
||||
Conor Hastings <hastings.conorm@gmail.com> <conor@socialtables.com>
|
||||
Dan Schafer <dschafer@fb.com>
|
||||
Daniel Gasienica <daniel@gasienica.ch> <daniel@fiftythree.com>
|
||||
Daniel Gasienica <daniel@gasienica.ch> <dgasienica@zynga.com>
|
||||
Daniel Hejl <daniel.hejl@hotmail.com>
|
||||
Daniel Lo Nigro <daniel@dan.cx> <danlo@fb.com>
|
||||
Dave Galbraith <dave@jut.io>
|
||||
Dennis Johnson <songawee@gmail.com>
|
||||
Dmitry Blues <dmitri.blyus@gmail.com>
|
||||
Dongsheng Liu <bellanchor@gmail.com>
|
||||
Erik Harper <eharper@mixpo.com>
|
||||
Evan Coonrod <evan@paloalto.com>
|
||||
Fabio M. Costa <fabiomcosta@gmail.com> <fabs@fb.com>
|
||||
Felix Kling <felix.kling@gmx.net> <fkling@fb.com>
|
||||
François-Xavier Bois <fxbois@gmail.com>
|
||||
Fyodor Ivanishchev <cbrwizard@gmail.com>
|
||||
Gabe Levi <gabelevi@gmail.com> <glevi@fb.com>
|
||||
Geert Pasteels <geert.pasteels@gmail.com>
|
||||
George A Sisco III <george.sisco@gmail.com>
|
||||
Georgii Dolzhykov <thorn.mailbox@gmail.com>
|
||||
Harry Hull <harry.hull1@gmail.com>
|
||||
Hendrik Swanepoel <hendrik.swanepoel@gmail.com>
|
||||
Hyeock Kwon <doublus@gmail.com>
|
||||
Ian Obermiller <ian@obermillers.com> <iano@fb.com>
|
||||
Ilia Pavlenkov <dortonway@gmail.com>
|
||||
Ilyá Belsky <gelias.gbelsky@gmail.com>
|
||||
Ingvar Stepanyan <me@rreverser.com> <rreverser@ubuntu.rreverser.a4.internal.cloudapp.net>
|
||||
Irae Carvalho <irae@irae.pro.br>
|
||||
Ivan Vergiliev <ivan.vergiliev@gmail.com>
|
||||
JJ Weber <jj.weber@gmail.com>
|
||||
Jae Hun Ro <jhr24@duke.edu>
|
||||
Jaime Mingo <j.mingov@3boll.com>
|
||||
James Brantly <james@jbrantly.com>
|
||||
Jan Hancic <jan.hancic@gmail.com> <jan.hancic@caplin.com>
|
||||
Jan Kassens <jan@kassens.net> <jkassens@fb.com>
|
||||
Jason Bonta <jbonta@gmail.com> <jasonbonta@fb.com>
|
||||
Jason Quense <monastic.panic@gmail.com>
|
||||
Jason Trill <jason@jasontrill.com>
|
||||
Jeff Chan <jefftchan@gmail.com> <jeff@quizlet.com>
|
||||
Jeff Morrison <jeff@anafx.com> <Jeff@anafx.com>
|
||||
Jeff Morrison <jeff@anafx.com> <jeffmo@fb.com>
|
||||
Jeff Morrison <jeff@anafx.com> <lbljeffmo@gmail.com>
|
||||
Jeffrey Lin <lin.jeffrey@gmail.com> <jeffreylin@fb.com>
|
||||
Jim Sproch <jsproch@fb.com>
|
||||
Jim Sproch <jsproch@fb.com> <jsfb@github>
|
||||
Jim Sproch <jsproch@fb.com> <none@no-reply.com>
|
||||
Jinwoo Oh <arkist@gmail.com>
|
||||
Jinxiu Lee <lee.jinxiu@gmail.com>
|
||||
Jiyeon Seo <zzzeons@gmail.com>
|
||||
Jon Chester <jonchester@fb.com>
|
||||
Jon Madison <jon@tfftech.com>
|
||||
Jonathan Hsu <jhiswin@gmail.com>
|
||||
Jonathan Persson <persson.jonathan@gmail.com> <jonathan.persson@creuna.se>
|
||||
Jordan Walke <jordojw@gmail.com>
|
||||
Jordan Walke <jordojw@gmail.com> <jordanjcw@fb.com>
|
||||
Joseph Savona <joesavona@fb.com> <josephsavona@users.noreply.github.com>
|
||||
Josh Duck <josh@fb.com> <github@joshduck.com>
|
||||
Juan Serrano <germ13@users.noreply.github.com>
|
||||
Jun Wu <quark@lihdd.net>
|
||||
Justin Robison <jrobison151@gmail.com>
|
||||
Keito Uchiyama <projects@keito.me> <keito@fb.com>
|
||||
Kevin Coughlin <kevintcoughlin@gmail.com> <kevincoughlin@tumblr.com>
|
||||
Krystian Karczewski <karcz.k@gmail.com>
|
||||
Kunal Mehta <k.mehta@berkeley.edu> <kunalm@fb.com>
|
||||
Laurence Rowe <l@lrowe.co.uk> <laurence@lrowe.co.uk>
|
||||
Marcin K. <katzoo@github.mail>
|
||||
Mark Anderson <undernewmanagement@users.noreply.github.com>
|
||||
Mark Funk <mfunk86@gmail.com> <mark@boomtownroi.com>
|
||||
Martin Andert <mandert@gmail.com>
|
||||
Mathieu M-Gosselin <mathieumg@gmail.com> <mathieumg@atx33.com>
|
||||
Matsunoki <himkt@klis.tsukuba.ac.jp>
|
||||
Matt Brookes <matt@brookes.net>
|
||||
Matt Dunn-Rankin <mdunnrankin@gmail.com> <matchu1993@gmail.com>
|
||||
Matt Zabriskie <mzabriskie@gmail.com>
|
||||
Matthew Johnston <matthewjohnston4@outlook.com> <matthewjohnston4@users.noreply.github.com>
|
||||
Matthew Looi <looi.matthew@gmail.com>
|
||||
Mattijs Kneppers <mattijs@arttech.nl>
|
||||
Max Heiber <max.heiber@gmail.com>
|
||||
Max Stoiber <contact@mstoiber.com>
|
||||
Michal Srb <xixixao@seznam.cz> xixixao <xixixao@seznam.cz>
|
||||
Michelle Todd <himichelletodd@gmail.com> <michelle@khanacademy.org>
|
||||
Mihai Parparita <mihai.parparita@gmail.com> <mihai@persistent.info>
|
||||
Minwe LUO <minwe@yunshipei.com>
|
||||
Murray M. Moss <murray@mmoss.name> <MMoss@cainc.com>
|
||||
Murray M. Moss <murray@mmoss.name> <mmoss@users.noreply.github.com>
|
||||
Neri Marschik <marschik_neri@cyberagent.co.jp>
|
||||
Nick Gavalas <njg57@cornell.edu>
|
||||
Nick Thompson <ncthom91@gmail.com> <nickt@instagram.com>
|
||||
Patrick Stapleton <github@gdi2290.com>
|
||||
Paul O’Shannessy <paul@oshannessy.com> <poshannessy@fb.com>
|
||||
Paul Shen <paul@mnml0.com> <paulshen@fb.com>
|
||||
Pete Hunt <floydophone@gmail.com>
|
||||
Pete Hunt <floydophone@gmail.com> <pete.hunt@fb.com>
|
||||
Pete Hunt <floydophone@gmail.com> <pete@instagram.com>
|
||||
Pete Hunt <floydophone@gmail.com> <phunt@instagram.com>
|
||||
Petri Lievonen <plievone@cc.hut.fi>
|
||||
Petri Lievonen <plievone@cc.hut.fi> <petri.lievonen@tkk.fi>
|
||||
Pieter Vanderwerff <me@pieter.io> <pieter@heyday.co.nz>
|
||||
Pouja Nikray <poujanik@gmail.com>
|
||||
Rainer Oviir <roviir@gmail.com> <raineroviir@rainers-MacBook-Pro.local>
|
||||
Ray <ray@tomo.im>
|
||||
Richard Feldman <richard.t.feldman@gmail.com> <richard@noredink.com>
|
||||
Richard Livesey <Livesey7@hotmail.co.uk>
|
||||
Rob Arnold <robarnold@cs.cmu.edu>
|
||||
Robert Binna <rbinna@gmail.com> <speedskater@users.noreply.github.com>
|
||||
Robin Frischmann <robin@rofrischmann.de>
|
||||
Sander Spies <sandermail@gmail.com>
|
||||
Scott Feeney <scott@oceanbase.org> <smf@fb.com>
|
||||
Sebastian Markbåge <sebastian@calyptus.eu> <sema@fb.com>
|
||||
Sergey Rubanov <chi187@gmail.com>
|
||||
Shogun Sea <shogunsea08@gmail.com> <xxin@groupon.com>
|
||||
Soichiro Kawamura <mail@w-st.com>
|
||||
Sophie Alpert <git@sophiebits.com> <balpert@fb.com>
|
||||
Sophie Alpert <git@sophiebits.com> <ben@benalpert.com>
|
||||
Sophie Alpert <git@sophiebits.com> <sophiebits@fb.com>
|
||||
Sophie Alpert <git@sophiebits.com> <spicyjalapeno@gmail.com>
|
||||
Sota Ohara <ohrst.18@gmail.com>
|
||||
Steven Luscher <react@steveluscher.com> <github@steveluscher.com>
|
||||
Steven Luscher <react@steveluscher.com> <steveluscher@fb.com>
|
||||
Steven Luscher <react@steveluscher.com> <steveluscher@instagram.com>
|
||||
Steven Luscher <react@steveluscher.com> <steveluscher@users.noreply.github.com>
|
||||
Stoyan Stefanov <ssttoo@ymail.com>
|
||||
Tengfei Guo <terryr3rd@yeah.net> <tfguo369@gmail.com>
|
||||
Thomas Aylott <oblivious@subtlegradient.com> <aylott@fb.com>
|
||||
Timothy Yung <yungsters@gmail.com> <yungsters@fb.com>
|
||||
Tomoya Suzuki <tmysz.dev@gmail.com>
|
||||
Vasiliy Loginevskiy <Yeti.or@gmail.com>
|
||||
Vasiliy Loginevskiy <Yeti.or@gmail.com> <yeti-or@yandex-team.ru>
|
||||
Vjeux <vjeuxx@gmail.com>
|
||||
Vjeux <vjeuxx@gmail.com> <vjeux@fb.com>
|
||||
Volkan Unsal <spocksplanet@gmail.com>
|
||||
Wander Wang <wander.wang@ismole.com>
|
||||
Xavier Morel <xmo-odoo@users.noreply.github.com>
|
||||
YouBao Nong <noyobo@gmail.com> <nongyoubao@alibaba-inc.com>
|
||||
Yutaka Nakajima <nakazye@gmail.com>
|
||||
Zach Bruggeman <mail@bruggie.com> <zbruggeman@me.com>
|
||||
iawia002 <z2d@jifangcheng.com> <850127508@qq.com>
|
||||
元彦 <yuanyan@users.noreply.github.com>
|
||||
张敏 <cookfront@gmail.com>
|
||||
@@ -1,21 +0,0 @@
|
||||
'use strict';
|
||||
|
||||
const {esNextPaths} = require('./scripts/shared/pathsByLanguageVersion');
|
||||
|
||||
module.exports = {
|
||||
bracketSpacing: false,
|
||||
singleQuote: true,
|
||||
jsxBracketSameLine: true,
|
||||
trailingComma: 'es5',
|
||||
printWidth: 80,
|
||||
parser: 'babylon',
|
||||
|
||||
overrides: [
|
||||
{
|
||||
files: esNextPaths,
|
||||
options: {
|
||||
trailingComma: 'all',
|
||||
},
|
||||
},
|
||||
],
|
||||
};
|
||||
1818
CHANGELOG.md
1818
CHANGELOG.md
File diff suppressed because it is too large
Load Diff
@@ -1,3 +0,0 @@
|
||||
# Code of Conduct
|
||||
|
||||
Facebook has adopted a Code of Conduct that we expect project participants to adhere to. Please [read the full text](https://code.fb.com/codeofconduct/) so that you can understand what actions will and will not be tolerated.
|
||||
@@ -1,5 +0,0 @@
|
||||
# Contributing to React
|
||||
|
||||
Want to contribute to React? There are a few things you need to know.
|
||||
|
||||
We wrote a **[contribution guide](https://reactjs.org/contributing/how-to-contribute.html)** to help you get started.
|
||||
21
LICENSE
21
LICENSE
@@ -1,21 +0,0 @@
|
||||
MIT License
|
||||
|
||||
Copyright (c) Facebook, Inc. and its affiliates.
|
||||
|
||||
Permission is hereby granted, free of charge, to any person obtaining a copy
|
||||
of this software and associated documentation files (the "Software"), to deal
|
||||
in the Software without restriction, including without limitation the rights
|
||||
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
|
||||
copies of the Software, and to permit persons to whom the Software is
|
||||
furnished to do so, subject to the following conditions:
|
||||
|
||||
The above copyright notice and this permission notice shall be included in all
|
||||
copies or substantial portions of the Software.
|
||||
|
||||
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
|
||||
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
|
||||
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
|
||||
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
|
||||
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
|
||||
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
|
||||
SOFTWARE.
|
||||
75
README.md
75
README.md
@@ -1,75 +0,0 @@
|
||||
# [React](https://reactjs.org/) · [](https://github.com/facebook/react/blob/master/LICENSE) [](https://www.npmjs.com/package/react) [](https://coveralls.io/github/facebook/react?branch=master) [](https://circleci.com/gh/facebook/react) [](https://reactjs.org/docs/how-to-contribute.html#your-first-pull-request)
|
||||
|
||||
React is a JavaScript library for building user interfaces.
|
||||
|
||||
* **Declarative:** React makes it painless to create interactive UIs. Design simple views for each state in your application, and React will efficiently update and render just the right components when your data changes. Declarative views make your code more predictable, simpler to understand, and easier to debug.
|
||||
* **Component-Based:** Build encapsulated components that manage their own state, then compose them to make complex UIs. Since component logic is written in JavaScript instead of templates, you can easily pass rich data through your app and keep state out of the DOM.
|
||||
* **Learn Once, Write Anywhere:** We don't make assumptions about the rest of your technology stack, so you can develop new features in React without rewriting existing code. React can also render on the server using Node and power mobile apps using [React Native](https://facebook.github.io/react-native/).
|
||||
|
||||
[Learn how to use React in your own project](https://reactjs.org/docs/getting-started.html).
|
||||
|
||||
## Installation
|
||||
|
||||
React has been designed for gradual adoption from the start, and **you can use as little or as much React as you need**:
|
||||
|
||||
* Use [Online Playgrounds](https://reactjs.org/docs/getting-started.html#online-playgrounds) to get a taste of React.
|
||||
* [Add React to a Website](https://reactjs.org/docs/add-react-to-a-website.html) as a `<script>` tag in one minute.
|
||||
* [Create a New React App](https://reactjs.org/docs/create-a-new-react-app.html) if you're looking for a powerful JavaScript toolchain.
|
||||
|
||||
You can use React as a `<script>` tag from a [CDN](https://reactjs.org/docs/cdn-links.html), or as a `react` package on [npm](https://www.npmjs.com/).
|
||||
|
||||
## Documentation
|
||||
|
||||
You can find the React documentation [on the website](https://reactjs.org/docs).
|
||||
|
||||
Check out the [Getting Started](https://reactjs.org/docs/getting-started.html) page for a quick overview.
|
||||
|
||||
The documentation is divided into several sections:
|
||||
|
||||
* [Tutorial](https://reactjs.org/tutorial/tutorial.html)
|
||||
* [Main Concepts](https://reactjs.org/docs/hello-world.html)
|
||||
* [Advanced Guides](https://reactjs.org/docs/jsx-in-depth.html)
|
||||
* [API Reference](https://reactjs.org/docs/react-api.html)
|
||||
* [Where to Get Support](https://reactjs.org/community/support.html)
|
||||
* [Contributing Guide](https://reactjs.org/docs/how-to-contribute.html)
|
||||
|
||||
You can improve it by sending pull requests to [this repository](https://github.com/reactjs/reactjs.org).
|
||||
|
||||
## Examples
|
||||
|
||||
We have several examples [on the website](https://reactjs.org/). Here is the first one to get you started:
|
||||
|
||||
```jsx
|
||||
function HelloMessage({ name }) {
|
||||
return <div>Hello {name}</div>;
|
||||
}
|
||||
|
||||
ReactDOM.render(
|
||||
<HelloMessage name="Taylor" />,
|
||||
document.getElementById('container')
|
||||
);
|
||||
```
|
||||
|
||||
This example will render "Hello Taylor" into a container on the page.
|
||||
|
||||
You'll notice that we used an HTML-like syntax; [we call it JSX](https://reactjs.org/docs/introducing-jsx.html). JSX is not required to use React, but it makes code more readable, and writing it feels like writing HTML. If you're using React as a `<script>` tag, read [this section](https://reactjs.org/docs/add-react-to-a-website.html#optional-try-react-with-jsx) on integrating JSX; otherwise, the [recommended JavaScript toolchains](https://reactjs.org/docs/create-a-new-react-app.html) handle it automatically.
|
||||
|
||||
## Contributing
|
||||
|
||||
The main purpose of this repository is to continue to evolve React core, making it faster and easier to use. Development of React happens in the open on GitHub, and we are grateful to the community for contributing bugfixes and improvements. Read below to learn how you can take part in improving React.
|
||||
|
||||
### [Code of Conduct](https://code.fb.com/codeofconduct)
|
||||
|
||||
Facebook has adopted a Code of Conduct that we expect project participants to adhere to. Please read [the full text](https://code.fb.com/codeofconduct) so that you can understand what actions will and will not be tolerated.
|
||||
|
||||
### [Contributing Guide](https://reactjs.org/contributing/how-to-contribute.html)
|
||||
|
||||
Read our [contributing guide](https://reactjs.org/contributing/how-to-contribute.html) to learn about our development process, how to propose bugfixes and improvements, and how to build and test your changes to React.
|
||||
|
||||
### Good First Issues
|
||||
|
||||
To help you get your feet wet and get you familiar with our contribution process, we have a list of [good first issues](https://github.com/facebook/react/labels/good%20first%20issue) that contain bugs which have a relatively limited scope. This is a great place to get started.
|
||||
|
||||
### License
|
||||
|
||||
React is [MIT licensed](./LICENSE).
|
||||
41
appveyor.yml
41
appveyor.yml
@@ -1,41 +0,0 @@
|
||||
image: Visual Studio 2017
|
||||
|
||||
# Fix line endings in Windows. (runs before repo cloning)
|
||||
init:
|
||||
- git config --global core.autocrlf input
|
||||
|
||||
environment:
|
||||
JAVA_HOME: C:\Program Files\Java\jdk1.8.0
|
||||
matrix:
|
||||
- nodejs_version: 10
|
||||
|
||||
# Finish on first failed build
|
||||
matrix:
|
||||
fast_finish: true
|
||||
|
||||
platform:
|
||||
- x64
|
||||
|
||||
branches:
|
||||
only:
|
||||
- master
|
||||
|
||||
# Disable Visual Studio build and deploy
|
||||
build: off
|
||||
deploy: off
|
||||
|
||||
install:
|
||||
- ps: Install-Product node $env:nodejs_version $env:platform
|
||||
- yarn install --frozen-lockfile
|
||||
|
||||
test_script:
|
||||
- node --version
|
||||
- yarn lint
|
||||
# - yarn flow-ci
|
||||
- yarn build
|
||||
- yarn test
|
||||
- yarn prettier
|
||||
|
||||
cache:
|
||||
- node_modules
|
||||
- "%LOCALAPPDATA%/Yarn"
|
||||
224
dangerfile.js
224
dangerfile.js
@@ -1,224 +0,0 @@
|
||||
/**
|
||||
* Copyright (c) Facebook, Inc. and its affiliates.
|
||||
*
|
||||
* This source code is licensed under the MIT license found in the
|
||||
* LICENSE file in the root directory of this source tree.
|
||||
*/
|
||||
|
||||
'use strict';
|
||||
|
||||
// Hi, if this is your first time editing/reading a Dangerfile, here's a summary:
|
||||
// It's a JS runtime which helps you provide continuous feedback inside GitHub.
|
||||
//
|
||||
// You can see the docs here: http://danger.systems/js/
|
||||
//
|
||||
// If you want to test changes Danger, I'd recommend checking out an existing PR
|
||||
// and then running the `danger pr` command.
|
||||
//
|
||||
// You'll need a GitHub token, you can re-use this one:
|
||||
//
|
||||
// 0a7d5c3cad9a6dbec2d9 9a5222cf49062a4c1ef7
|
||||
//
|
||||
// (Just remove the space)
|
||||
//
|
||||
// So, for example:
|
||||
//
|
||||
// `DANGER_GITHUB_API_TOKEN=[ENV_ABOVE] yarn danger pr https://github.com/facebook/react/pull/11865
|
||||
|
||||
const {markdown, danger} = require('danger');
|
||||
const fetch = require('node-fetch');
|
||||
|
||||
const {generateResultsArray} = require('./scripts/rollup/stats');
|
||||
const {existsSync, readFileSync} = require('fs');
|
||||
const {exec} = require('child_process');
|
||||
|
||||
if (!existsSync('./scripts/rollup/results.json')) {
|
||||
// This indicates the build failed previously.
|
||||
// In that case, there's nothing for the Dangerfile to do.
|
||||
// Exit early to avoid leaving a redundant (and potentially confusing) PR comment.
|
||||
process.exit(0);
|
||||
}
|
||||
|
||||
const currentBuildResults = JSON.parse(
|
||||
readFileSync('./scripts/rollup/results.json')
|
||||
);
|
||||
|
||||
/**
|
||||
* Generates a Markdown table
|
||||
* @param {string[]} headers
|
||||
* @param {string[][]} body
|
||||
*/
|
||||
function generateMDTable(headers, body) {
|
||||
const tableHeaders = [
|
||||
headers.join(' | '),
|
||||
headers.map(() => ' --- ').join(' | '),
|
||||
];
|
||||
|
||||
const tablebody = body.map(r => r.join(' | '));
|
||||
return tableHeaders.join('\n') + '\n' + tablebody.join('\n');
|
||||
}
|
||||
|
||||
/**
|
||||
* Generates a user-readable string from a percentage change
|
||||
* @param {number} change
|
||||
* @param {boolean} includeEmoji
|
||||
*/
|
||||
function addPercent(change, includeEmoji) {
|
||||
if (!isFinite(change)) {
|
||||
// When a new package is created
|
||||
return 'n/a';
|
||||
}
|
||||
const formatted = (change * 100).toFixed(1);
|
||||
if (/^-|^0(?:\.0+)$/.test(formatted)) {
|
||||
return `${formatted}%`;
|
||||
} else {
|
||||
if (includeEmoji) {
|
||||
return `:small_red_triangle:+${formatted}%`;
|
||||
} else {
|
||||
return `+${formatted}%`;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
function setBoldness(row, isBold) {
|
||||
if (isBold) {
|
||||
return row.map(element => `**${element}**`);
|
||||
} else {
|
||||
return row;
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* Gets the commit that represents the merge between the current branch
|
||||
* and master.
|
||||
*/
|
||||
function git(args) {
|
||||
return new Promise(res => {
|
||||
exec('git ' + args, (err, stdout, stderr) => {
|
||||
if (err) {
|
||||
throw err;
|
||||
} else {
|
||||
res(stdout.trim());
|
||||
}
|
||||
});
|
||||
});
|
||||
}
|
||||
|
||||
(async function() {
|
||||
// Use git locally to grab the commit which represents the place
|
||||
// where the branches differ
|
||||
const upstreamRepo = danger.github.pr.base.repo.full_name;
|
||||
const upstreamRef = danger.github.pr.base.ref;
|
||||
await git(`remote add upstream https://github.com/${upstreamRepo}.git`);
|
||||
await git('fetch upstream');
|
||||
const mergeBaseCommit = await git(`merge-base HEAD upstream/${upstreamRef}`);
|
||||
|
||||
const commitURL = sha =>
|
||||
`http://react.zpao.com/builds/master/_commits/${sha}/results.json`;
|
||||
const response = await fetch(commitURL(mergeBaseCommit));
|
||||
|
||||
// Take the JSON of the build response and
|
||||
// make an array comparing the results for printing
|
||||
const previousBuildResults = await response.json();
|
||||
const results = generateResultsArray(
|
||||
currentBuildResults,
|
||||
previousBuildResults
|
||||
);
|
||||
|
||||
const packagesToShow = results
|
||||
.filter(
|
||||
r =>
|
||||
Math.abs(r.prevFileSizeAbsoluteChange) >= 300 || // bytes
|
||||
Math.abs(r.prevGzipSizeAbsoluteChange) >= 100 // bytes
|
||||
)
|
||||
.map(r => r.packageName);
|
||||
|
||||
if (packagesToShow.length) {
|
||||
let allTables = [];
|
||||
|
||||
// Highlight React and React DOM changes inline
|
||||
// e.g. react: `react.production.min.js`: -3%, `react.development.js`: +4%
|
||||
|
||||
if (packagesToShow.includes('react')) {
|
||||
const reactProd = results.find(
|
||||
r => r.bundleType === 'UMD_PROD' && r.packageName === 'react'
|
||||
);
|
||||
if (
|
||||
reactProd.prevFileSizeChange !== 0 ||
|
||||
reactProd.prevGzipSizeChange !== 0
|
||||
) {
|
||||
const changeSize = addPercent(reactProd.prevFileSizeChange, true);
|
||||
const changeGzip = addPercent(reactProd.prevGzipSizeChange, true);
|
||||
markdown(`React: size: ${changeSize}, gzip: ${changeGzip}`);
|
||||
}
|
||||
}
|
||||
|
||||
if (packagesToShow.includes('react-dom')) {
|
||||
const reactDOMProd = results.find(
|
||||
r => r.bundleType === 'UMD_PROD' && r.packageName === 'react-dom'
|
||||
);
|
||||
if (
|
||||
reactDOMProd.prevFileSizeChange !== 0 ||
|
||||
reactDOMProd.prevGzipSizeChange !== 0
|
||||
) {
|
||||
const changeSize = addPercent(reactDOMProd.prevFileSizeChange, true);
|
||||
const changeGzip = addPercent(reactDOMProd.prevGzipSizeChange, true);
|
||||
markdown(`ReactDOM: size: ${changeSize}, gzip: ${changeGzip}`);
|
||||
}
|
||||
}
|
||||
|
||||
// Show a hidden summary table for all diffs
|
||||
|
||||
// eslint-disable-next-line no-var,no-for-of-loops/no-for-of-loops
|
||||
for (var name of new Set(packagesToShow)) {
|
||||
const thisBundleResults = results.filter(r => r.packageName === name);
|
||||
const changedFiles = thisBundleResults.filter(
|
||||
r => r.prevFileSizeChange !== 0 || r.prevGzipSizeChange !== 0
|
||||
);
|
||||
|
||||
const mdHeaders = [
|
||||
'File',
|
||||
'Filesize Diff',
|
||||
'Gzip Diff',
|
||||
'Prev Size',
|
||||
'Current Size',
|
||||
'Prev Gzip',
|
||||
'Current Gzip',
|
||||
'ENV',
|
||||
];
|
||||
|
||||
const mdRows = changedFiles.map(r => {
|
||||
const isProd = r.bundleType.includes('PROD');
|
||||
return setBoldness(
|
||||
[
|
||||
r.filename,
|
||||
addPercent(r.prevFileSizeChange, isProd),
|
||||
addPercent(r.prevGzipSizeChange, isProd),
|
||||
r.prevSize,
|
||||
r.prevFileSize,
|
||||
r.prevGzip,
|
||||
r.prevGzipSize,
|
||||
r.bundleType,
|
||||
],
|
||||
isProd
|
||||
);
|
||||
});
|
||||
|
||||
allTables.push(`\n## ${name}`);
|
||||
allTables.push(generateMDTable(mdHeaders, mdRows));
|
||||
}
|
||||
|
||||
const summary = `
|
||||
<details>
|
||||
<summary>Details of bundled changes.</summary>
|
||||
|
||||
<p>Comparing: ${mergeBaseCommit}...${danger.github.pr.head.sha}</p>
|
||||
|
||||
|
||||
${allTables.join('\n')}
|
||||
|
||||
</details>
|
||||
`;
|
||||
markdown(summary);
|
||||
}
|
||||
})();
|
||||
1
fixtures/art/.gitignore
vendored
1
fixtures/art/.gitignore
vendored
@@ -1 +0,0 @@
|
||||
bundle.js
|
||||
@@ -1,10 +0,0 @@
|
||||
# VectorWidget example
|
||||
|
||||
To try this example, run:
|
||||
|
||||
```
|
||||
yarn
|
||||
yarn build
|
||||
```
|
||||
|
||||
in this directory, then open index.html in your browser.
|
||||
@@ -1,148 +0,0 @@
|
||||
/**
|
||||
* Copyright (c) Facebook, Inc. and its affiliates.
|
||||
*
|
||||
* This source code is licensed under the MIT license found in the
|
||||
* LICENSE file in the root directory of this source tree.
|
||||
*/
|
||||
'use strict';
|
||||
|
||||
var Circle = require('react-art/Circle');
|
||||
var React = require('react');
|
||||
var ReactART = require('react-art');
|
||||
var Group = ReactART.Group;
|
||||
var Shape = ReactART.Shape;
|
||||
var Surface = ReactART.Surface;
|
||||
var Transform = ReactART.Transform;
|
||||
|
||||
var MOUSE_UP_DRAG = 0.978;
|
||||
var MOUSE_DOWN_DRAG = 0.9;
|
||||
var MAX_VEL = 11;
|
||||
var CLICK_ACCEL = 3;
|
||||
var BASE_VEL = 0.15;
|
||||
|
||||
/**
|
||||
* An animated SVG component.
|
||||
*/
|
||||
class VectorWidget extends React.Component {
|
||||
/**
|
||||
* Initialize state members.
|
||||
*/
|
||||
state = {degrees: 0, velocity: 0, drag: MOUSE_UP_DRAG};
|
||||
|
||||
/**
|
||||
* When the component is mounted into the document - this is similar to a
|
||||
* constructor, but invoked when the instance is actually mounted into the
|
||||
* document. Here, we'll just set up an animation loop that invokes our
|
||||
* method. Binding of `this.onTick` is not needed because all React methods
|
||||
* are automatically bound before being mounted.
|
||||
*/
|
||||
componentDidMount() {
|
||||
this._interval = window.setInterval(this.onTick, 20);
|
||||
}
|
||||
|
||||
componentWillUnmount() {
|
||||
window.clearInterval(this._interval);
|
||||
}
|
||||
|
||||
onTick = () => {
|
||||
var nextDegrees = this.state.degrees + BASE_VEL + this.state.velocity;
|
||||
var nextVelocity = this.state.velocity * this.state.drag;
|
||||
this.setState({degrees: nextDegrees, velocity: nextVelocity});
|
||||
};
|
||||
|
||||
/**
|
||||
* When mousing down, we increase the friction down the velocity.
|
||||
*/
|
||||
handleMouseDown = () => {
|
||||
this.setState({drag: MOUSE_DOWN_DRAG});
|
||||
};
|
||||
|
||||
/**
|
||||
* Cause the rotation to "spring".
|
||||
*/
|
||||
handleMouseUp = () => {
|
||||
var nextVelocity = Math.min(this.state.velocity + CLICK_ACCEL, MAX_VEL);
|
||||
this.setState({velocity: nextVelocity, drag: MOUSE_UP_DRAG});
|
||||
};
|
||||
|
||||
/**
|
||||
* This is the "main" method for any component. The React API allows you to
|
||||
* describe the structure of your UI component at *any* point in time.
|
||||
*/
|
||||
render() {
|
||||
return (
|
||||
<Surface width={700} height={700} style={{cursor: 'pointer'}}>
|
||||
{this.renderGraphic(this.state.degrees)}
|
||||
</Surface>
|
||||
);
|
||||
}
|
||||
|
||||
/**
|
||||
* Better SVG support for React coming soon.
|
||||
*/
|
||||
renderGraphic = rotation => {
|
||||
return (
|
||||
<Group onMouseDown={this.handleMouseDown} onMouseUp={this.handleMouseUp}>
|
||||
<Group x={210} y={135}>
|
||||
<Shape fill="rgba(0,0,0,0.1)" d={BORDER_PATH} />
|
||||
<Shape fill="#7BC7BA" d={BG_PATH} />
|
||||
<Shape fill="#DCDCDC" d={BAR_PATH} />
|
||||
<Shape fill="#D97B76" d={RED_DOT_PATH} />
|
||||
<Shape fill="#DBBB79" d={YELLOW_DOT_PATH} />
|
||||
<Shape fill="#A6BD8A" d={GREEN_DOT_PATH} />
|
||||
<Group x={55} y={29}>
|
||||
<Group rotation={rotation} originX={84} originY={89}>
|
||||
<Group x={84} y={89}>
|
||||
<Circle fill="#FFFFFF" radius={16} />
|
||||
</Group>
|
||||
<Group>
|
||||
<Shape d={RING_ONE_PATH} stroke="#FFFFFF" strokeWidth={8} />
|
||||
<Shape
|
||||
d={RING_TWO_PATH}
|
||||
transform={RING_TWO_ROTATE}
|
||||
stroke="#FFFFFF"
|
||||
strokeWidth={8}
|
||||
/>
|
||||
<Shape
|
||||
d={RING_THREE_PATH}
|
||||
transform={RING_THREE_ROTATE}
|
||||
stroke="#FFFFFF"
|
||||
strokeWidth={8}
|
||||
/>
|
||||
</Group>
|
||||
</Group>
|
||||
</Group>
|
||||
</Group>
|
||||
</Group>
|
||||
);
|
||||
};
|
||||
}
|
||||
|
||||
var BORDER_PATH =
|
||||
'M3.00191459,4 C1.34400294,4 0,5.34785514 0,7.00550479 L0,220.994495 C0,222.65439 1.34239483,224 3.00191459,224 L276.998085,224 C278.655997,224 280,222.652145 280,220.994495 L280,7.00550479 C280,5.34561033 278.657605,4 276.998085,4 L3.00191459,4 Z M3.00191459,4';
|
||||
var BG_PATH =
|
||||
'M3.00191459,1 C1.34400294,1 0,2.34785514 0,4.00550479 L0,217.994495 C0,219.65439 1.34239483,221 3.00191459,221 L276.998085,221 C278.655997,221 280,219.652145 280,217.994495 L280,4.00550479 C280,2.34561033 278.657605,1 276.998085,1 L3.00191459,1 Z M3.00191459,1';
|
||||
var BAR_PATH =
|
||||
'M3.00191459,0 C1.34400294,0 0,1.34559019 0,3.00878799 L0,21 C0,21 0,21 0,21 L280,21 C280,21 280,21 280,21 L280,3.00878799 C280,1.34708027 278.657605,0 276.998085,0 L3.00191459,0 Z M3.00191459,0';
|
||||
var RED_DOT_PATH =
|
||||
'M12.5,17 C16.0898511,17 19,14.0898511 19,10.5 C19,6.91014895 16.0898511,4 12.5,4 C8.91014895,4 6,6.91014895 6,10.5 C6,14.0898511 8.91014895,17 12.5,17 Z M12.5,17';
|
||||
var YELLOW_DOT_PATH =
|
||||
'M31.5,17 C35.0898511,17 38,14.0898511 38,10.5 C38,6.91014895 35.0898511,4 31.5,4 C27.9101489,4 25,6.91014895 25,10.5 C25,14.0898511 27.9101489,17 31.5,17 Z M31.5,17';
|
||||
var GREEN_DOT_PATH =
|
||||
'M50.5,17 C54.0898511,17 57,14.0898511 57,10.5 C57,6.91014895 54.0898511,4 50.5,4 C46.9101489,4 44,6.91014895 44,10.5 C44,14.0898511 46.9101489,17 50.5,17 Z M50.5,17';
|
||||
var RING_ONE_PATH =
|
||||
'M84,121 C130.391921,121 168,106.673113 168,89 C168,71.3268871 130.391921,57 84,57 C37.6080787,57 0,71.3268871 0,89 C0,106.673113 37.6080787,121 84,121 Z M84,121';
|
||||
var RING_TWO_PATH =
|
||||
'M84,121 C130.391921,121 168,106.673113 168,89 C168,71.3268871 130.391921,57 84,57 C37.6080787,57 0,71.3268871 0,89 C0,106.673113 37.6080787,121 84,121 Z M84,121';
|
||||
var RING_THREE_PATH =
|
||||
'M84,121 C130.391921,121 168,106.673113 168,89 C168,71.3268871 130.391921,57 84,57 C37.6080787,57 0,71.3268871 0,89 C0,106.673113 37.6080787,121 84,121 Z M84,121';
|
||||
var RING_TWO_ROTATE = new Transform()
|
||||
.translate(84.0, 89.0)
|
||||
.rotate(-240.0)
|
||||
.translate(-84.0, -89.0);
|
||||
var RING_THREE_ROTATE = new Transform()
|
||||
.translate(84.0, 89.0)
|
||||
.rotate(-300.0)
|
||||
.translate(-84.0, -89.0);
|
||||
|
||||
module.exports = VectorWidget;
|
||||
@@ -1,7 +0,0 @@
|
||||
'use strict';
|
||||
|
||||
var React = require('react');
|
||||
var ReactDOM = require('react-dom');
|
||||
var VectorWidget = require('./VectorWidget');
|
||||
|
||||
ReactDOM.render(<VectorWidget />, document.getElementById('container'));
|
||||
@@ -1,22 +0,0 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<title>VectorWidget</title>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<div id="container">
|
||||
<p>If you're seeing this message, it means you haven't generated the bundle file for this example. Try running:</p>
|
||||
|
||||
<pre><code>
|
||||
npm install
|
||||
npm run build
|
||||
</code></pre>
|
||||
|
||||
<p>then reload the page.</p>
|
||||
</div>
|
||||
|
||||
<script src="bundle.js"></script>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
@@ -1,16 +0,0 @@
|
||||
{
|
||||
"devDependencies": {
|
||||
"babel-core": "^6.24.0",
|
||||
"babel-loader": "^6.4.1",
|
||||
"babel-plugin-transform-class-properties": "^6.24.1",
|
||||
"babel-preset-es2015": "^6.6.0",
|
||||
"babel-preset-react": "^6.5.0",
|
||||
"react": "link:../../build/node_modules/react",
|
||||
"react-art": "link:../../build/node_modules/react-art/",
|
||||
"react-dom": "link:../../build/node_modules/react-dom",
|
||||
"webpack": "^1.14.0"
|
||||
},
|
||||
"scripts": {
|
||||
"build": "webpack app.js bundle.js"
|
||||
}
|
||||
}
|
||||
@@ -1,35 +0,0 @@
|
||||
var webpack = require('webpack');
|
||||
var path = require('path');
|
||||
|
||||
module.exports = {
|
||||
context: __dirname,
|
||||
entry: './app.js',
|
||||
module: {
|
||||
loaders: [
|
||||
{
|
||||
loader: require.resolve('babel-loader'),
|
||||
test: /\.js$/,
|
||||
exclude: /node_modules/,
|
||||
query: {
|
||||
presets: [
|
||||
require.resolve('babel-preset-es2015'),
|
||||
require.resolve('babel-preset-react'),
|
||||
],
|
||||
plugins: [require.resolve('babel-plugin-transform-class-properties')],
|
||||
},
|
||||
},
|
||||
],
|
||||
},
|
||||
plugins: [
|
||||
new webpack.DefinePlugin({
|
||||
'process.env': {
|
||||
NODE_ENV: JSON.stringify('development'),
|
||||
},
|
||||
}),
|
||||
],
|
||||
resolve: {
|
||||
alias: {
|
||||
react: require.resolve('react'),
|
||||
},
|
||||
},
|
||||
};
|
||||
File diff suppressed because it is too large
Load Diff
24
fixtures/attribute-behavior/.gitignore
vendored
24
fixtures/attribute-behavior/.gitignore
vendored
@@ -1,24 +0,0 @@
|
||||
# See https://help.github.com/ignore-files/ for more about ignoring files.
|
||||
|
||||
# dependencies
|
||||
/node_modules
|
||||
|
||||
# testing
|
||||
/coverage
|
||||
|
||||
# production
|
||||
/build
|
||||
/public/react.development.js
|
||||
/public/react-dom.development.js
|
||||
/public/react-dom-server.browser.development.js
|
||||
|
||||
# misc
|
||||
.DS_Store
|
||||
.env.local
|
||||
.env.development.local
|
||||
.env.test.local
|
||||
.env.production.local
|
||||
|
||||
npm-debug.log*
|
||||
yarn-debug.log*
|
||||
yarn-error.log*
|
||||
File diff suppressed because it is too large
Load Diff
@@ -1,31 +0,0 @@
|
||||
# Attribute Behavior Fixture
|
||||
|
||||
**WIP:** This is an MVP, still needs polish.
|
||||
|
||||
### Known Issues
|
||||
- There are currently two errors thrown when the page loads;
|
||||
`SyntaxError: missing ; before statement`
|
||||
|
||||
## Instructions
|
||||
|
||||
`cd fixtures/attribute-behavior && yarn install && yarn start`
|
||||
|
||||
## Interpretation
|
||||
|
||||
Each row is an attribute which could be set on some DOM component. Some of
|
||||
them are invalid or mis-capitalized or mixed up versions of real ones.
|
||||
Each column is a value which can be passed to that attribute.
|
||||
Every cell has a box on the left and a box on the right.
|
||||
The left box shows the property (or attribute) assigned by React 15.\*, and the
|
||||
right box shows the property (or attribute) assigned by the latest version of
|
||||
React 16.
|
||||
|
||||
Right now, we use a purple outline to call out cases where the assigned property
|
||||
(or attribute) has changed between React 15 and 16.
|
||||
|
||||
---
|
||||
|
||||
|
||||
This project was bootstrapped with [Create React App](https://github.com/facebookincubator/create-react-app).
|
||||
|
||||
You can find the guide for how to do things in a CRA [here](https://github.com/facebookincubator/create-react-app/blob/master/packages/react-scripts/template/README.md).
|
||||
@@ -1,21 +0,0 @@
|
||||
{
|
||||
"name": "attribute-behavior",
|
||||
"version": "0.1.0",
|
||||
"private": true,
|
||||
"dependencies": {
|
||||
"file-saver": "^1.3.3",
|
||||
"glamor": "^2.20.40",
|
||||
"react": "^15.6.1",
|
||||
"react-dom": "^15.6.1",
|
||||
"react-scripts": "1.0.11",
|
||||
"react-virtualized": "^9.9.0"
|
||||
},
|
||||
"scripts": {
|
||||
"prestart":
|
||||
"cp ../../build/node_modules/react/umd/react.development.js public/ && cp ../../build/node_modules/react-dom/umd/react-dom.development.js public/ && cp ../../build/node_modules/react-dom/umd/react-dom-server.browser.development.js public/",
|
||||
"start": "react-scripts start",
|
||||
"build": "react-scripts build",
|
||||
"test": "react-scripts test --env=jsdom",
|
||||
"eject": "react-scripts eject"
|
||||
}
|
||||
}
|
||||
Binary file not shown.
|
Before Width: | Height: | Size: 24 KiB |
@@ -1,40 +0,0 @@
|
||||
<!doctype html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
|
||||
<meta name="theme-color" content="#000000">
|
||||
<!--
|
||||
manifest.json provides metadata used when your web app is added to the
|
||||
homescreen on Android. See https://developers.google.com/web/fundamentals/engage-and-retain/web-app-manifest/
|
||||
-->
|
||||
<link rel="manifest" href="%PUBLIC_URL%/manifest.json">
|
||||
<link rel="shortcut icon" href="%PUBLIC_URL%/favicon.ico">
|
||||
<!--
|
||||
Notice the use of %PUBLIC_URL% in the tags above.
|
||||
It will be replaced with the URL of the `public` folder during the build.
|
||||
Only files inside the `public` folder can be referenced from the HTML.
|
||||
|
||||
Unlike "/favicon.ico" or "favicon.ico", "%PUBLIC_URL%/favicon.ico" will
|
||||
work correctly both with client-side routing and a non-root public URL.
|
||||
Learn how to configure a non-root public URL by running `npm run build`.
|
||||
-->
|
||||
<title>React App</title>
|
||||
</head>
|
||||
<body>
|
||||
<noscript>
|
||||
You need to enable JavaScript to run this app.
|
||||
</noscript>
|
||||
<div id="root"></div>
|
||||
<!--
|
||||
This HTML file is a template.
|
||||
If you open it directly in the browser, you will see an empty page.
|
||||
|
||||
You can add webfonts, meta tags, or analytics to this file.
|
||||
The build step will place the bundled scripts into the <body> tag.
|
||||
|
||||
To begin the development, run `npm start` or `yarn start`.
|
||||
To create a production bundle, use `npm run build` or `yarn build`.
|
||||
-->
|
||||
</body>
|
||||
</html>
|
||||
@@ -1,15 +0,0 @@
|
||||
{
|
||||
"short_name": "React App",
|
||||
"name": "Create React App Sample",
|
||||
"icons": [
|
||||
{
|
||||
"src": "favicon.ico",
|
||||
"sizes": "192x192",
|
||||
"type": "image/png"
|
||||
}
|
||||
],
|
||||
"start_url": "./index.html",
|
||||
"display": "standalone",
|
||||
"theme_color": "#000000",
|
||||
"background_color": "#ffffff"
|
||||
}
|
||||
@@ -1 +0,0 @@
|
||||
|
||||
File diff suppressed because it is too large
Load Diff
@@ -1,8 +0,0 @@
|
||||
import React from 'react';
|
||||
import ReactDOM from 'react-dom';
|
||||
import App from './App';
|
||||
|
||||
it('renders without crashing', () => {
|
||||
const div = document.createElement('div');
|
||||
ReactDOM.render(<App />, div);
|
||||
});
|
||||
File diff suppressed because it is too large
Load Diff
@@ -1,8 +0,0 @@
|
||||
* {
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
body {
|
||||
font-family: monospace;
|
||||
font-size: 12px;
|
||||
}
|
||||
@@ -1,6 +0,0 @@
|
||||
import './index.css';
|
||||
import React from 'react';
|
||||
import ReactDOM from 'react-dom';
|
||||
import App from './App';
|
||||
|
||||
ReactDOM.render(<App />, document.getElementById('root'));
|
||||
File diff suppressed because it is too large
Load Diff
21
fixtures/dom/.gitignore
vendored
21
fixtures/dom/.gitignore
vendored
@@ -1,21 +0,0 @@
|
||||
# See http://help.github.com/ignore-files/ for more about ignoring files.
|
||||
|
||||
# dependencies
|
||||
node_modules
|
||||
|
||||
# testing
|
||||
coverage
|
||||
|
||||
# production
|
||||
build
|
||||
public/react.development.js
|
||||
public/react.production.min.js
|
||||
public/react-dom.development.js
|
||||
public/react-dom.production.min.js
|
||||
public/react-dom-server.browser.development.js
|
||||
public/react-dom-server.browser.production.min.js
|
||||
|
||||
# misc
|
||||
.DS_Store
|
||||
.env
|
||||
npm-debug.log
|
||||
@@ -1,17 +0,0 @@
|
||||
# DOM Fixtures
|
||||
|
||||
A set of DOM test cases for quickly identifying browser issues.
|
||||
|
||||
## Setup
|
||||
|
||||
To reference a local build of React, first run `yarn build` at the root
|
||||
of the React project. Then:
|
||||
|
||||
```
|
||||
cd fixtures/dom
|
||||
yarn
|
||||
yarn start
|
||||
```
|
||||
|
||||
The `start` command runs a script that copies over the local build of react into
|
||||
the public directory.
|
||||
@@ -1,26 +0,0 @@
|
||||
{
|
||||
"name": "react-fixtures",
|
||||
"version": "0.1.0",
|
||||
"private": true,
|
||||
"devDependencies": {
|
||||
"react-scripts": "^1.0.11"
|
||||
},
|
||||
"dependencies": {
|
||||
"@babel/standalone": "^7.0.0",
|
||||
"classnames": "^2.2.5",
|
||||
"codemirror": "^5.40.0",
|
||||
"core-js": "^2.4.1",
|
||||
"prop-types": "^15.6.0",
|
||||
"query-string": "^4.2.3",
|
||||
"react": "^15.4.1",
|
||||
"react-dom": "^15.4.1",
|
||||
"semver": "^5.5.0"
|
||||
},
|
||||
"scripts": {
|
||||
"start": "react-scripts start",
|
||||
"prestart": "cp ../../build/node_modules/react/umd/react.development.js ../../build/node_modules/react-dom/umd/react-dom.development.js ../../build/node_modules/react/umd/react.production.min.js ../../build/node_modules/react-dom/umd/react-dom.production.min.js ../../build/node_modules/react-dom/umd/react-dom-server.browser.development.js ../../build/node_modules/react-dom/umd/react-dom-server.browser.production.min.js public/",
|
||||
"build": "react-scripts build && cp build/index.html build/200.html",
|
||||
"test": "react-scripts test --env=jsdom",
|
||||
"eject": "react-scripts eject"
|
||||
}
|
||||
}
|
||||
Binary file not shown.
|
Before Width: | Height: | Size: 24 KiB |
@@ -1,33 +0,0 @@
|
||||
<!doctype html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
<link rel="shortcut icon" href="%PUBLIC_URL%/favicon.ico">
|
||||
<!--
|
||||
Notice the use of %PUBLIC_URL% in the tag above.
|
||||
It will be replaced with the URL of the `public` folder during the build.
|
||||
Only files inside the `public` folder can be referenced from the HTML.
|
||||
|
||||
Unlike "/favicon.ico" or "favicon.ico", "%PUBLIC_URL%/favicon.ico" will
|
||||
work correctly both with client-side routing and a non-root public URL.
|
||||
Learn how to configure a non-root public URL by running `npm run build`.
|
||||
-->
|
||||
<title>React App</title>
|
||||
<script src="https://unpkg.com/prop-types@15.5.6/prop-types.js"></script>
|
||||
<script src="https://unpkg.com/expect@1.20.2/umd/expect.min.js"></script>
|
||||
</head>
|
||||
<body>
|
||||
<div id="root"></div>
|
||||
<!--
|
||||
This HTML file is a template.
|
||||
If you open it directly in the browser, you will see an empty page.
|
||||
|
||||
You can add webfonts, meta tags, or analytics to this file.
|
||||
The build step will place the bundled scripts into the <body> tag.
|
||||
|
||||
To begin the development, run `npm start`.
|
||||
To create a production bundle, use `npm run build`.
|
||||
-->
|
||||
</body>
|
||||
</html>
|
||||
@@ -1 +0,0 @@
|
||||
<svg data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 23 20.46348"><title>logo</title><path d="M18.91 6.633q-.367-.126-.74-.234.062-.252.115-.506c.56-2.72.194-4.912-1.058-5.634-1.2-.692-3.162.03-5.144 1.755q-.293.255-.572.525-.187-.18-.38-.352C9.053.344 6.97-.432 5.72.29 4.523.984 4.168 3.045 4.67 5.623q.077.383.17.762c-.293.084-.578.173-.85.268-2.435.85-3.99 2.18-3.99 3.56 0 1.425 1.67 2.855 4.206 3.72q.308.106.622.196-.102.407-.18.82c-.482 2.533-.106 4.545 1.09 5.235 1.234.712 3.306-.02 5.325-1.784q.24-.208.48-.442.302.293.62.568c1.956 1.682 3.886 2.36 5.08 1.67 1.235-.715 1.636-2.876 1.115-5.505q-.06-.3-.138-.614.218-.064.428-.133C21.285 13.07 23 11.657 23 10.213c0-1.386-1.605-2.725-4.09-3.58zM12.73 2.756c1.698-1.478 3.285-2.06 4.01-1.644.77.444 1.068 2.235.584 4.584q-.047.23-.103.457a23.538 23.538 0 0 0-3.076-.486A23.08 23.08 0 0 0 12.2 3.24q.258-.248.528-.484zM6.79 11.39q.313.604.653 1.19.347.6.722 1.183a20.922 20.922 0 0 1-2.12-.34c.204-.657.454-1.34.746-2.032zm0-2.31c-.286-.678-.53-1.345-.73-1.99.655-.147 1.355-.267 2.084-.358q-.366.57-.705 1.16-.34.586-.65 1.188zm.522 1.156q.454-.945.98-1.854.522-.91 1.114-1.775c.684-.052 1.385-.08 2.094-.08.712 0 1.414.028 2.098.08q.585.865 1.108 1.77.526.906.992 1.845-.46.948-.988 1.862-.523.908-1.104 1.78c-.682.05-1.387.074-2.106.074-.716 0-1.412-.022-2.082-.066q-.596-.87-1.124-1.783-.526-.91-.982-1.854zm8.25 2.34q.346-.603.666-1.22A20.867 20.867 0 0 1 17 13.38a20.852 20.852 0 0 1-2.145.365q.364-.578.706-1.17zm.656-3.495q-.318-.604-.66-1.196-.338-.582-.7-1.15c.733.093 1.436.216 2.097.367a20.96 20.96 0 0 1-.737 1.98zM11.51 3.945a21.013 21.013 0 0 1 1.354 1.634q-1.358-.065-2.718 0c.447-.59.905-1.138 1.365-1.634zM6.214 1.14c.77-.445 2.47.19 4.264 1.783.115.102.23.208.345.318a23.545 23.545 0 0 0-1.96 2.426 24.008 24.008 0 0 0-3.068.477q-.088-.352-.158-.71v.002c-.433-2.21-.146-3.876.577-4.294zM5.09 13.183q-.285-.082-.566-.177A8.324 8.324 0 0 1 1.84 11.58a2.03 2.03 0 0 1-.857-1.368c0-.837 1.248-1.905 3.33-2.63q.393-.138.792-.25a23.565 23.565 0 0 0 1.12 2.904 23.922 23.922 0 0 0-1.134 2.946zm5.326 4.48a8.322 8.322 0 0 1-2.575 1.61 2.03 2.03 0 0 1-1.612.062c-.725-.42-1.027-2.034-.616-4.2q.074-.385.168-.764a23.104 23.104 0 0 0 3.1.448 23.91 23.91 0 0 0 1.974 2.44q-.214.207-.438.403zm1.122-1.112c-.466-.502-.93-1.058-1.384-1.656q.66.026 1.346.026.703 0 1.388-.03a20.894 20.894 0 0 1-1.35 1.66zm5.967 1.367a2.03 2.03 0 0 1-.753 1.428c-.725.42-2.275-.126-3.947-1.564q-.287-.246-.578-.526a23.09 23.09 0 0 0 1.928-2.448 22.936 22.936 0 0 0 3.115-.48q.07.284.124.556a8.32 8.32 0 0 1 .11 3.035zm.834-4.907c-.127.042-.256.082-.388.12a23.06 23.06 0 0 0-1.164-2.913 23.05 23.05 0 0 0 1.12-2.87c.234.067.463.14.683.215 2.13.732 3.428 1.816 3.428 2.65 0 .89-1.403 2.044-3.68 2.798z" fill="#61dafb"/><path d="M11.5 8.159a2.054 2.054 0 1 1-2.054 2.052A2.054 2.054 0 0 1 11.5 8.16" fill="#61dafb"/></svg>
|
||||
|
Before Width: | Height: | Size: 2.8 KiB |
@@ -1,86 +0,0 @@
|
||||
<!doctype html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
<title>Renderer</title>
|
||||
<style>
|
||||
*,
|
||||
*:before,
|
||||
*:after {
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
html,
|
||||
body {
|
||||
font-family: sans-serif;
|
||||
margin: 0;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
body {
|
||||
padding-top: 32px;
|
||||
}
|
||||
|
||||
#status {
|
||||
font-size: 12px;
|
||||
left: 8px;
|
||||
letter-spacing: 0.05em;
|
||||
line-height: 16px;
|
||||
margin: -8px 0 0;
|
||||
max-width: 50%;
|
||||
overflow: hidden;
|
||||
position: absolute;
|
||||
text-align: left;
|
||||
text-overflow: ellipsis;
|
||||
top: 50%;
|
||||
white-space: nowrap;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
#output {
|
||||
margin: 16px;
|
||||
}
|
||||
|
||||
.header {
|
||||
background: white;
|
||||
border-bottom: 1px solid #d9d9d9;
|
||||
padding: 4px;
|
||||
top: 0;
|
||||
left: 0;
|
||||
position: fixed;
|
||||
width: 100%;
|
||||
text-align: right;
|
||||
}
|
||||
|
||||
.controls {
|
||||
display: inline-block;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.button {
|
||||
background: #eee;
|
||||
border-radius: 2px;
|
||||
border: 1px solid #aaa;
|
||||
font-size: 11px;
|
||||
padding: 4px 6px;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<header class="header">
|
||||
<p id="status">Loading</p>
|
||||
|
||||
<menu class="controls">
|
||||
<button class="button" id="hydrate">Hydrate</button>
|
||||
<button class="button" id="reload">Reload</button>
|
||||
</menu>
|
||||
</header>
|
||||
|
||||
<div id="output"></div>
|
||||
|
||||
<script src="https://cdn.polyfill.io/v2/polyfill.min.js"></script>
|
||||
<script src="renderer.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
@@ -1,141 +0,0 @@
|
||||
/**
|
||||
* Supports render.html, a piece of the hydration fixture. See /hydration
|
||||
*/
|
||||
|
||||
'use strict';
|
||||
|
||||
(function() {
|
||||
var Fixture = null;
|
||||
var output = document.getElementById('output');
|
||||
var status = document.getElementById('status');
|
||||
var hydrate = document.getElementById('hydrate');
|
||||
var reload = document.getElementById('reload');
|
||||
var renders = 0;
|
||||
var failed = false;
|
||||
|
||||
function getQueryParam(key) {
|
||||
var pattern = new RegExp(key + '=([^&]+)(&|$)');
|
||||
var matches = window.location.search.match(pattern);
|
||||
|
||||
if (matches) {
|
||||
return decodeURIComponent(matches[1]);
|
||||
}
|
||||
|
||||
handleError(new Error('No key found for' + key));
|
||||
}
|
||||
|
||||
function getBooleanQueryParam(key) {
|
||||
return getQueryParam(key) === 'true';
|
||||
}
|
||||
|
||||
function setStatus(label) {
|
||||
status.innerHTML = label;
|
||||
}
|
||||
|
||||
function prerender() {
|
||||
setStatus('Generating markup');
|
||||
|
||||
output.innerHTML = ReactDOMServer.renderToString(
|
||||
React.createElement(Fixture)
|
||||
);
|
||||
|
||||
setStatus('Markup only (No React)');
|
||||
}
|
||||
|
||||
function render() {
|
||||
setStatus('Hydrating');
|
||||
|
||||
if (ReactDOM.hydrate) {
|
||||
ReactDOM.hydrate(React.createElement(Fixture), output);
|
||||
} else {
|
||||
ReactDOM.render(React.createElement(Fixture), output);
|
||||
}
|
||||
|
||||
setStatus(renders > 0 ? 'Re-rendered (' + renders + 'x)' : 'Hydrated');
|
||||
renders += 1;
|
||||
hydrate.innerHTML = 'Re-render';
|
||||
}
|
||||
|
||||
function handleError(error) {
|
||||
console.log(error);
|
||||
failed = true;
|
||||
setStatus('Javascript Error');
|
||||
output.innerHTML = error;
|
||||
}
|
||||
|
||||
function loadScript(src) {
|
||||
return new Promise(function(resolve, reject) {
|
||||
var script = document.createElement('script');
|
||||
script.async = true;
|
||||
script.src = src;
|
||||
|
||||
script.onload = resolve;
|
||||
script.onerror = function(error) {
|
||||
reject(new Error('Unable to load ' + src));
|
||||
};
|
||||
|
||||
document.body.appendChild(script);
|
||||
});
|
||||
}
|
||||
|
||||
function injectFixture(src) {
|
||||
Fixture = new Function(src + '\nreturn Fixture;')();
|
||||
|
||||
if (typeof Fixture === 'undefined') {
|
||||
setStatus('Failed');
|
||||
output.innerHTML = 'Please name your root component "Fixture"';
|
||||
} else {
|
||||
prerender();
|
||||
|
||||
if (getBooleanQueryParam('hydrate')) {
|
||||
render();
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
function reloadFixture(code) {
|
||||
renders = 0;
|
||||
ReactDOM.unmountComponentAtNode(output);
|
||||
injectFixture(code);
|
||||
}
|
||||
|
||||
window.onerror = handleError;
|
||||
|
||||
reload.onclick = function() {
|
||||
window.location.reload();
|
||||
};
|
||||
|
||||
hydrate.onclick = render;
|
||||
|
||||
loadScript(getQueryParam('reactPath'))
|
||||
.then(function() {
|
||||
return getBooleanQueryParam('needsReactDOM')
|
||||
? loadScript(getQueryParam('reactDOMPath'))
|
||||
: null;
|
||||
})
|
||||
.then(function() {
|
||||
return loadScript(getQueryParam('reactDOMServerPath'));
|
||||
})
|
||||
.then(function() {
|
||||
if (failed) {
|
||||
return;
|
||||
}
|
||||
|
||||
window.addEventListener('message', function(event) {
|
||||
var data = JSON.parse(event.data);
|
||||
|
||||
switch (data.type) {
|
||||
case 'code':
|
||||
reloadFixture(data.payload);
|
||||
break;
|
||||
default:
|
||||
throw new Error(
|
||||
'Renderer Error: Unrecognized message "' + data.type + '"'
|
||||
);
|
||||
}
|
||||
});
|
||||
|
||||
window.parent.postMessage(JSON.stringify({type: 'ready'}), '*');
|
||||
})
|
||||
.catch(handleError);
|
||||
})();
|
||||
Binary file not shown.
@@ -1,16 +0,0 @@
|
||||
import Header from './Header';
|
||||
import Fixtures from './fixtures';
|
||||
import '../style.css';
|
||||
|
||||
const React = window.React;
|
||||
|
||||
function App() {
|
||||
return (
|
||||
<div>
|
||||
<Header />
|
||||
<Fixtures />
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
export default App;
|
||||
@@ -1,18 +0,0 @@
|
||||
import PropTypes from 'prop-types';
|
||||
const React = window.React;
|
||||
|
||||
const propTypes = {
|
||||
children: PropTypes.node.isRequired,
|
||||
};
|
||||
|
||||
class Fixture extends React.Component {
|
||||
render() {
|
||||
const {children} = this.props;
|
||||
|
||||
return <div className="test-fixture">{children}</div>;
|
||||
}
|
||||
}
|
||||
|
||||
Fixture.propTypes = propTypes;
|
||||
|
||||
export default Fixture;
|
||||
@@ -1,26 +0,0 @@
|
||||
import PropTypes from 'prop-types';
|
||||
const React = window.React;
|
||||
|
||||
const propTypes = {
|
||||
title: PropTypes.node.isRequired,
|
||||
description: PropTypes.node,
|
||||
};
|
||||
|
||||
class FixtureSet extends React.Component {
|
||||
render() {
|
||||
const {title, description, children} = this.props;
|
||||
|
||||
return (
|
||||
<div className="container">
|
||||
<h1>{title}</h1>
|
||||
{description && <p>{description}</p>}
|
||||
|
||||
{children}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
FixtureSet.propTypes = propTypes;
|
||||
|
||||
export default FixtureSet;
|
||||
@@ -1,112 +0,0 @@
|
||||
import {parse, stringify} from 'query-string';
|
||||
import getVersionTags from '../tags';
|
||||
const React = window.React;
|
||||
|
||||
class Header extends React.Component {
|
||||
constructor(props, context) {
|
||||
super(props, context);
|
||||
const query = parse(window.location.search);
|
||||
const version = query.version || 'local';
|
||||
const production = query.production || false;
|
||||
const versions = [version];
|
||||
this.state = {version, versions, production};
|
||||
}
|
||||
componentWillMount() {
|
||||
getVersionTags().then(tags => {
|
||||
let versions = tags.map(tag => tag.name.slice(1));
|
||||
versions = [`local`, ...versions];
|
||||
this.setState({versions});
|
||||
});
|
||||
}
|
||||
handleVersionChange(event) {
|
||||
const query = parse(window.location.search);
|
||||
query.version = event.target.value;
|
||||
if (query.version === 'local') {
|
||||
delete query.version;
|
||||
}
|
||||
window.location.search = stringify(query);
|
||||
}
|
||||
handleProductionChange(event) {
|
||||
const query = parse(window.location.search);
|
||||
query.production = event.target.checked;
|
||||
if (!query.production) {
|
||||
delete query.production;
|
||||
}
|
||||
window.location.search = stringify(query);
|
||||
}
|
||||
handleFixtureChange(event) {
|
||||
window.location.pathname = event.target.value;
|
||||
}
|
||||
render() {
|
||||
return (
|
||||
<header className="header">
|
||||
<div className="header__inner">
|
||||
<span className="header__logo">
|
||||
<img
|
||||
src={process.env.PUBLIC_URL + '/react-logo.svg'}
|
||||
alt="React"
|
||||
width="20"
|
||||
height="20"
|
||||
/>
|
||||
<a href="/">DOM Test Fixtures (v{React.version})</a>
|
||||
</span>
|
||||
|
||||
<div className="header-controls">
|
||||
<input
|
||||
id="react_production"
|
||||
className="header__checkbox"
|
||||
type="checkbox"
|
||||
checked={this.state.production}
|
||||
onChange={this.handleProductionChange}
|
||||
/>
|
||||
<label htmlFor="react_production" className="header__label">
|
||||
Production
|
||||
</label>
|
||||
<label htmlFor="example">
|
||||
<span className="sr-only">Select an example</span>
|
||||
<select
|
||||
value={window.location.pathname}
|
||||
onChange={this.handleFixtureChange}>
|
||||
<option value="/">Home</option>
|
||||
<option value="/hydration">Hydration</option>
|
||||
<option value="/range-inputs">Range Inputs</option>
|
||||
<option value="/text-inputs">Text Inputs</option>
|
||||
<option value="/number-inputs">Number Input</option>
|
||||
<option value="/password-inputs">Password Input</option>
|
||||
<option value="/selects">Selects</option>
|
||||
<option value="/textareas">Textareas</option>
|
||||
<option value="/input-change-events">
|
||||
Input change events
|
||||
</option>
|
||||
<option value="/buttons">Buttons</option>
|
||||
<option value="/date-inputs">Date Inputs</option>
|
||||
<option value="/error-handling">Error Handling</option>
|
||||
<option value="/event-pooling">Event Pooling</option>
|
||||
<option value="/custom-elements">Custom Elements</option>
|
||||
<option value="/media-events">Media Events</option>
|
||||
<option value="/pointer-events">Pointer Events</option>
|
||||
<option value="/mouse-events">Mouse Events</option>
|
||||
<option value="/selection-events">Selection Events</option>
|
||||
<option value="/suspense">Suspense</option>
|
||||
</select>
|
||||
</label>
|
||||
<label htmlFor="react_version">
|
||||
<span className="sr-only">Select a version to test</span>
|
||||
<select
|
||||
value={this.state.version}
|
||||
onChange={this.handleVersionChange}>
|
||||
{this.state.versions.map(version => (
|
||||
<option key={version} value={version}>
|
||||
{version}
|
||||
</option>
|
||||
))}
|
||||
</select>
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
</header>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
export default Header;
|
||||
@@ -1,58 +0,0 @@
|
||||
const React = window.React;
|
||||
const ReactDOM = window.ReactDOM;
|
||||
|
||||
class IframePortal extends React.Component {
|
||||
iframeRef = null;
|
||||
|
||||
handleRef = ref => {
|
||||
if (ref !== this.iframeRef) {
|
||||
this.iframeRef = ref;
|
||||
if (ref) {
|
||||
if (ref.contentDocument && this.props.head) {
|
||||
ref.contentDocument.head.innerHTML = this.props.head;
|
||||
}
|
||||
// Re-render must take place in the next tick (Firefox)
|
||||
setTimeout(() => {
|
||||
this.forceUpdate();
|
||||
});
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
render() {
|
||||
const ref = this.iframeRef;
|
||||
let portal = null;
|
||||
if (ref && ref.contentDocument) {
|
||||
portal = ReactDOM.createPortal(
|
||||
this.props.children,
|
||||
ref.contentDocument.body
|
||||
);
|
||||
}
|
||||
|
||||
return (
|
||||
<div>
|
||||
<iframe
|
||||
title="Iframe portal"
|
||||
style={{border: 'none', height: this.props.height}}
|
||||
ref={this.handleRef}
|
||||
/>
|
||||
{portal}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
class IframeSubtree extends React.Component {
|
||||
warned = false;
|
||||
render() {
|
||||
if (!this.warned) {
|
||||
console.error(
|
||||
`IFrame has not yet been implemented for React v${React.version}`
|
||||
);
|
||||
this.warned = true;
|
||||
}
|
||||
return <div>{this.props.children}</div>;
|
||||
}
|
||||
}
|
||||
|
||||
export default (ReactDOM.createPortal ? IframePortal : IframeSubtree);
|
||||
@@ -1,26 +0,0 @@
|
||||
const React = window.React;
|
||||
|
||||
function csv(string) {
|
||||
return string.split(/\s*,\s*/);
|
||||
}
|
||||
|
||||
export default function IssueList({issues}) {
|
||||
if (!issues) {
|
||||
return null;
|
||||
}
|
||||
|
||||
if (typeof issues === 'string') {
|
||||
issues = csv(issues);
|
||||
}
|
||||
|
||||
let links = issues.reduce((memo, issue, i) => {
|
||||
return memo.concat(
|
||||
i > 0 && i < issues.length ? ', ' : null,
|
||||
<a href={'https://github.com/facebook/react/issues/' + issue} key={issue}>
|
||||
{issue}
|
||||
</a>
|
||||
);
|
||||
}, []);
|
||||
|
||||
return <span>{links}</span>;
|
||||
}
|
||||
@@ -1,154 +0,0 @@
|
||||
import cn from 'classnames';
|
||||
import semver from 'semver';
|
||||
import PropTypes from 'prop-types';
|
||||
import IssueList from './IssueList';
|
||||
import {parse} from 'query-string';
|
||||
import {semverString} from './propTypes';
|
||||
|
||||
const React = window.React;
|
||||
|
||||
const propTypes = {
|
||||
children: PropTypes.node.isRequired,
|
||||
title: PropTypes.node.isRequired,
|
||||
resolvedIn: semverString,
|
||||
introducedIn: semverString,
|
||||
resolvedBy: PropTypes.string,
|
||||
};
|
||||
|
||||
class TestCase extends React.Component {
|
||||
constructor(props, context) {
|
||||
super(props, context);
|
||||
|
||||
this.state = {
|
||||
complete: false,
|
||||
};
|
||||
}
|
||||
|
||||
handleChange = e => {
|
||||
this.setState({
|
||||
complete: e.target.checked,
|
||||
});
|
||||
};
|
||||
|
||||
render() {
|
||||
const {
|
||||
title,
|
||||
description,
|
||||
introducedIn,
|
||||
resolvedIn,
|
||||
resolvedBy,
|
||||
affectedBrowsers,
|
||||
relatedIssues,
|
||||
children,
|
||||
} = this.props;
|
||||
|
||||
let {complete} = this.state;
|
||||
|
||||
const {version} = parse(window.location.search);
|
||||
const isTestFixed =
|
||||
!version || !resolvedIn || semver.gte(version, resolvedIn);
|
||||
|
||||
complete = !isTestFixed || complete;
|
||||
|
||||
return (
|
||||
<section className={cn('test-case', complete && 'test-case--complete')}>
|
||||
<h2 className="test-case__title type-subheading">
|
||||
<label>
|
||||
<input
|
||||
className="test-case__title__check"
|
||||
type="checkbox"
|
||||
checked={complete}
|
||||
onChange={this.handleChange}
|
||||
/>{' '}
|
||||
{title}
|
||||
</label>
|
||||
</h2>
|
||||
|
||||
<dl className="test-case__details">
|
||||
{introducedIn && <dt>First broken in: </dt>}
|
||||
{introducedIn && (
|
||||
<dd>
|
||||
<a
|
||||
href={'https://github.com/facebook/react/tag/v' + introducedIn}>
|
||||
<code>{introducedIn}</code>
|
||||
</a>
|
||||
</dd>
|
||||
)}
|
||||
|
||||
{resolvedIn && <dt>First supported in: </dt>}
|
||||
{resolvedIn && (
|
||||
<dd>
|
||||
<a href={'https://github.com/facebook/react/tag/v' + resolvedIn}>
|
||||
<code>{resolvedIn}</code>
|
||||
</a>
|
||||
</dd>
|
||||
)}
|
||||
|
||||
{resolvedBy && <dt>Fixed by: </dt>}
|
||||
{resolvedBy && (
|
||||
<dd>
|
||||
<a
|
||||
href={
|
||||
'https://github.com/facebook/react/pull/' +
|
||||
resolvedBy.slice(1)
|
||||
}>
|
||||
<code>{resolvedBy}</code>
|
||||
</a>
|
||||
</dd>
|
||||
)}
|
||||
|
||||
{affectedBrowsers && <dt>Affected browsers: </dt>}
|
||||
{affectedBrowsers && <dd>{affectedBrowsers}</dd>}
|
||||
|
||||
{relatedIssues && <dt>Related Issues: </dt>}
|
||||
{relatedIssues && (
|
||||
<dd>
|
||||
<IssueList issues={relatedIssues} />
|
||||
</dd>
|
||||
)}
|
||||
</dl>
|
||||
|
||||
<p className="test-case__desc">{description}</p>
|
||||
|
||||
<div className="test-case__body">
|
||||
{!isTestFixed && (
|
||||
<p className="test-case__invalid-version">
|
||||
<strong>Note:</strong> This test case was fixed in a later version
|
||||
of React. This test is not expected to pass for the selected
|
||||
version, and that's ok!
|
||||
</p>
|
||||
)}
|
||||
|
||||
{children}
|
||||
</div>
|
||||
</section>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
TestCase.propTypes = propTypes;
|
||||
|
||||
TestCase.Steps = class extends React.Component {
|
||||
render() {
|
||||
const {children} = this.props;
|
||||
return (
|
||||
<div>
|
||||
<h3>Steps to reproduce:</h3>
|
||||
<ol>{children}</ol>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
};
|
||||
|
||||
TestCase.ExpectedResult = class extends React.Component {
|
||||
render() {
|
||||
const {children} = this.props;
|
||||
return (
|
||||
<div>
|
||||
<h3>Expected Result:</h3>
|
||||
<p>{children}</p>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
};
|
||||
export default TestCase;
|
||||
@@ -1,43 +0,0 @@
|
||||
import FixtureSet from '../../FixtureSet';
|
||||
import TestCase from '../../TestCase';
|
||||
|
||||
const React = window.React;
|
||||
|
||||
function onButtonClick() {
|
||||
window.alert(`This shouldn't have happened!`);
|
||||
}
|
||||
|
||||
export default class ButtonTestCases extends React.Component {
|
||||
render() {
|
||||
return (
|
||||
<FixtureSet title="Buttons">
|
||||
<TestCase
|
||||
title="onClick with disabled buttons"
|
||||
description="The onClick event handler should not be invoked when clicking on a disabled buyaton">
|
||||
<TestCase.Steps>
|
||||
<li>Click on the disabled button</li>
|
||||
</TestCase.Steps>
|
||||
<TestCase.ExpectedResult>
|
||||
Nothing should happen
|
||||
</TestCase.ExpectedResult>
|
||||
<button disabled onClick={onButtonClick}>
|
||||
Click Me
|
||||
</button>
|
||||
</TestCase>
|
||||
<TestCase
|
||||
title="onClick with disabled buttons containing other elements"
|
||||
description="The onClick event handler should not be invoked when clicking on a disabled button that contains other elements">
|
||||
<TestCase.Steps>
|
||||
<li>Click on the disabled button, which contains a span</li>
|
||||
</TestCase.Steps>
|
||||
<TestCase.ExpectedResult>
|
||||
Nothing should happen
|
||||
</TestCase.ExpectedResult>
|
||||
<button disabled onClick={onButtonClick}>
|
||||
<span>Click Me</span>
|
||||
</button>
|
||||
</TestCase>
|
||||
</FixtureSet>
|
||||
);
|
||||
}
|
||||
}
|
||||
@@ -1,54 +0,0 @@
|
||||
import FixtureSet from '../../FixtureSet';
|
||||
import TestCase from '../../TestCase';
|
||||
|
||||
const React = window.React;
|
||||
const ReactDOM = window.ReactDOM;
|
||||
|
||||
const supportsCustomElements = typeof customElements !== 'undefined';
|
||||
|
||||
class HelloWorld extends React.Component {
|
||||
render() {
|
||||
return <h1>Hello, world!</h1>;
|
||||
}
|
||||
}
|
||||
|
||||
if (supportsCustomElements) {
|
||||
// Babel breaks web components.
|
||||
// https://github.com/w3c/webcomponents/issues/587
|
||||
// eslint-disable-next-line no-new-func
|
||||
const MyElement = new Function(
|
||||
'React',
|
||||
'ReactDOM',
|
||||
'HelloWorld',
|
||||
`
|
||||
return class MyElement extends HTMLElement {
|
||||
constructor() {
|
||||
super();
|
||||
const shadowRoot = this.attachShadow({ mode:'open' });
|
||||
ReactDOM.render(React.createElement(HelloWorld), shadowRoot);
|
||||
}
|
||||
}`
|
||||
)(React, ReactDOM, HelloWorld);
|
||||
customElements.define('my-element', MyElement);
|
||||
}
|
||||
|
||||
export default class ButtonTestCases extends React.Component {
|
||||
render() {
|
||||
return (
|
||||
<FixtureSet
|
||||
title="Custom Elements"
|
||||
description="Support for Custom Element DOM standards.">
|
||||
<TestCase title="Rendering into shadow root">
|
||||
<TestCase.ExpectedResult>
|
||||
You should see "Hello, World" printed below.{' '}
|
||||
</TestCase.ExpectedResult>
|
||||
{supportsCustomElements ? (
|
||||
<my-element />
|
||||
) : (
|
||||
<div>This browser does not support custom elements.</div>
|
||||
)}
|
||||
</TestCase>
|
||||
</FixtureSet>
|
||||
);
|
||||
}
|
||||
}
|
||||
@@ -1,32 +0,0 @@
|
||||
import Fixture from '../../Fixture';
|
||||
import FixtureSet from '../../FixtureSet';
|
||||
import TestCase from '../../TestCase';
|
||||
import SwitchDateTestCase from './switch-date-test-case';
|
||||
|
||||
const React = window.React;
|
||||
|
||||
class DateInputFixtures extends React.Component {
|
||||
render() {
|
||||
return (
|
||||
<FixtureSet title="Dates">
|
||||
<TestCase title="Switching between date and datetime-local">
|
||||
<TestCase.Steps>
|
||||
<li>Type a date into the date picker</li>
|
||||
<li>Toggle "Switch type"</li>
|
||||
</TestCase.Steps>
|
||||
|
||||
<TestCase.ExpectedResult>
|
||||
The month, day, and year values should correctly transfer. The
|
||||
hours/minutes/seconds should not be discarded.
|
||||
</TestCase.ExpectedResult>
|
||||
|
||||
<Fixture>
|
||||
<SwitchDateTestCase />
|
||||
</Fixture>
|
||||
</TestCase>
|
||||
</FixtureSet>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
export default DateInputFixtures;
|
||||
@@ -1,67 +0,0 @@
|
||||
const React = window.React;
|
||||
|
||||
const startDate = new Date();
|
||||
/**
|
||||
* This test case was originally provided by @richsoni,
|
||||
* https://github.com/facebook/react/issues/8116
|
||||
*/
|
||||
class SwitchDateTestCase extends React.Component {
|
||||
state = {
|
||||
fullDate: false,
|
||||
date: startDate,
|
||||
};
|
||||
|
||||
render() {
|
||||
const attrs = this.inputAttrs();
|
||||
|
||||
return (
|
||||
<div>
|
||||
<p>
|
||||
<b>{attrs.type}</b> input type ({attrs.value})
|
||||
</p>
|
||||
<p>
|
||||
<input
|
||||
type={attrs.type}
|
||||
value={attrs.value}
|
||||
onChange={this.onInputChange}
|
||||
/>
|
||||
<label>
|
||||
<input
|
||||
type="checkbox"
|
||||
checked={this.state.fullDate}
|
||||
onChange={this.updateFullDate}
|
||||
/>{' '}
|
||||
Switch type
|
||||
</label>
|
||||
</p>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
inputAttrs() {
|
||||
if (this.state.fullDate) {
|
||||
return {
|
||||
type: 'datetime-local',
|
||||
value: this.state.date.toISOString().replace(/\..*Z/, ''),
|
||||
};
|
||||
} else {
|
||||
return {
|
||||
type: 'date',
|
||||
value: this.state.date.toISOString().replace(/T.*/, ''),
|
||||
};
|
||||
}
|
||||
}
|
||||
|
||||
onInputChange = ({target: {value}}) => {
|
||||
const date = value ? new Date(Date.parse(value)) : startDate;
|
||||
this.setState({date});
|
||||
};
|
||||
|
||||
updateFullDate = () => {
|
||||
this.setState({
|
||||
fullDate: !this.state.fullDate,
|
||||
});
|
||||
};
|
||||
}
|
||||
|
||||
export default SwitchDateTestCase;
|
||||
@@ -1,377 +0,0 @@
|
||||
import FixtureSet from '../../FixtureSet';
|
||||
import TestCase from '../../TestCase';
|
||||
|
||||
const React = window.React;
|
||||
const ReactDOM = window.ReactDOM;
|
||||
|
||||
function BadRender(props) {
|
||||
props.doThrow();
|
||||
}
|
||||
|
||||
class BadDidMount extends React.Component {
|
||||
componentDidMount() {
|
||||
this.props.doThrow();
|
||||
}
|
||||
|
||||
render() {
|
||||
return null;
|
||||
}
|
||||
}
|
||||
|
||||
class ErrorBoundary extends React.Component {
|
||||
static defaultProps = {
|
||||
buttonText: 'Trigger error',
|
||||
badChildType: BadRender,
|
||||
};
|
||||
state = {
|
||||
shouldThrow: false,
|
||||
didThrow: false,
|
||||
error: null,
|
||||
};
|
||||
componentDidCatch(error) {
|
||||
this.setState({error, didThrow: true});
|
||||
}
|
||||
triggerError = () => {
|
||||
this.setState({
|
||||
shouldThrow: true,
|
||||
});
|
||||
};
|
||||
render() {
|
||||
if (this.state.didThrow) {
|
||||
if (this.state.error) {
|
||||
return <p>Captured an error: {this.state.error.message}</p>;
|
||||
} else {
|
||||
return <p>Captured an error: {'' + this.state.error}</p>;
|
||||
}
|
||||
}
|
||||
if (this.state.shouldThrow) {
|
||||
const BadChild = this.props.badChildType;
|
||||
return <BadChild doThrow={this.props.doThrow} />;
|
||||
}
|
||||
return <button onClick={this.triggerError}>{this.props.buttonText}</button>;
|
||||
}
|
||||
}
|
||||
class Example extends React.Component {
|
||||
state = {key: 0};
|
||||
restart = () => {
|
||||
this.setState(state => ({key: state.key + 1}));
|
||||
};
|
||||
render() {
|
||||
return (
|
||||
<div>
|
||||
<button onClick={this.restart}>Reset</button>
|
||||
<ErrorBoundary
|
||||
buttonText={this.props.buttonText}
|
||||
doThrow={this.props.doThrow}
|
||||
key={this.state.key}
|
||||
/>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
class TriggerErrorAndCatch extends React.Component {
|
||||
container = document.createElement('div');
|
||||
|
||||
triggerErrorAndCatch = () => {
|
||||
try {
|
||||
ReactDOM.flushSync(() => {
|
||||
ReactDOM.render(
|
||||
<BadRender
|
||||
doThrow={() => {
|
||||
throw new Error('Caught error');
|
||||
}}
|
||||
/>,
|
||||
this.container
|
||||
);
|
||||
});
|
||||
} catch (e) {}
|
||||
};
|
||||
|
||||
render() {
|
||||
return (
|
||||
<button onClick={this.triggerErrorAndCatch}>
|
||||
Trigger error and catch
|
||||
</button>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
function silenceWindowError(event) {
|
||||
event.preventDefault();
|
||||
}
|
||||
|
||||
class SilenceErrors extends React.Component {
|
||||
state = {
|
||||
silenceErrors: false,
|
||||
};
|
||||
componentDidMount() {
|
||||
if (this.state.silenceErrors) {
|
||||
window.addEventListener('error', silenceWindowError);
|
||||
}
|
||||
}
|
||||
componentDidUpdate(prevProps, prevState) {
|
||||
if (!prevState.silenceErrors && this.state.silenceErrors) {
|
||||
window.addEventListener('error', silenceWindowError);
|
||||
} else if (prevState.silenceErrors && !this.state.silenceErrors) {
|
||||
window.removeEventListener('error', silenceWindowError);
|
||||
}
|
||||
}
|
||||
componentWillUnmount() {
|
||||
if (this.state.silenceErrors) {
|
||||
window.removeEventListener('error', silenceWindowError);
|
||||
}
|
||||
}
|
||||
render() {
|
||||
return (
|
||||
<div>
|
||||
<label>
|
||||
<input
|
||||
type="checkbox"
|
||||
value={this.state.silenceErrors}
|
||||
onChange={() =>
|
||||
this.setState(state => ({
|
||||
silenceErrors: !state.silenceErrors,
|
||||
}))
|
||||
}
|
||||
/>
|
||||
Silence errors
|
||||
</label>
|
||||
{this.state.silenceErrors && (
|
||||
<div>
|
||||
{this.props.children}
|
||||
<br />
|
||||
<hr />
|
||||
<b style={{color: 'red'}}>
|
||||
Don't forget to uncheck "Silence errors" when you're done with
|
||||
this test!
|
||||
</b>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
}
|
||||
class GetEventTypeDuringUpdate extends React.Component {
|
||||
state = {};
|
||||
|
||||
onClick = () => {
|
||||
this.expectUpdate = true;
|
||||
this.forceUpdate();
|
||||
};
|
||||
|
||||
componentDidUpdate() {
|
||||
if (this.expectUpdate) {
|
||||
this.expectUpdate = false;
|
||||
this.setState({eventType: window.event.type});
|
||||
setTimeout(() => {
|
||||
this.setState({cleared: !window.event});
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
render() {
|
||||
return (
|
||||
<div className="test-fixture">
|
||||
<button onClick={this.onClick}>Trigger callback in event.</button>
|
||||
{this.state.eventType ? (
|
||||
<p>
|
||||
Got <b>{this.state.eventType}</b> event.
|
||||
</p>
|
||||
) : (
|
||||
<p>Got no event</p>
|
||||
)}
|
||||
{this.state.cleared ? (
|
||||
<p>Event cleared correctly.</p>
|
||||
) : (
|
||||
<p>Event failed to clear.</p>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
class SilenceRecoverableError extends React.Component {
|
||||
render() {
|
||||
return (
|
||||
<SilenceErrors>
|
||||
<ErrorBoundary
|
||||
badChildType={BadRender}
|
||||
buttonText={'Throw (render phase)'}
|
||||
doThrow={() => {
|
||||
throw new Error('Silenced error (render phase)');
|
||||
}}
|
||||
/>
|
||||
<ErrorBoundary
|
||||
badChildType={BadDidMount}
|
||||
buttonText={'Throw (commit phase)'}
|
||||
doThrow={() => {
|
||||
throw new Error('Silenced error (commit phase)');
|
||||
}}
|
||||
/>
|
||||
</SilenceErrors>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
class TrySilenceFatalError extends React.Component {
|
||||
container = document.createElement('div');
|
||||
|
||||
triggerErrorAndCatch = () => {
|
||||
try {
|
||||
ReactDOM.flushSync(() => {
|
||||
ReactDOM.render(
|
||||
<BadRender
|
||||
doThrow={() => {
|
||||
throw new Error('Caught error');
|
||||
}}
|
||||
/>,
|
||||
this.container
|
||||
);
|
||||
});
|
||||
} catch (e) {}
|
||||
};
|
||||
|
||||
render() {
|
||||
return (
|
||||
<SilenceErrors>
|
||||
<button onClick={this.triggerErrorAndCatch}>Throw fatal error</button>
|
||||
</SilenceErrors>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
export default class ErrorHandlingTestCases extends React.Component {
|
||||
render() {
|
||||
return (
|
||||
<FixtureSet title="Error handling">
|
||||
<TestCase
|
||||
title="Break on uncaught exceptions"
|
||||
description="In DEV, errors should be treated as uncaught, even though React catches them internally">
|
||||
<TestCase.Steps>
|
||||
<li>Open the browser DevTools</li>
|
||||
<li>Make sure "Pause on exceptions" is enabled</li>
|
||||
<li>Make sure "Pause on caught exceptions" is disabled</li>
|
||||
<li>Click the "Trigger error" button</li>
|
||||
<li>Click the reset button</li>
|
||||
</TestCase.Steps>
|
||||
<TestCase.ExpectedResult>
|
||||
The DevTools should pause at the line where the error was thrown, in
|
||||
the BadRender component. After resuming, the "Trigger error" button
|
||||
should be replaced with "Captured an error: Oops!" Clicking reset
|
||||
should reset the test case.
|
||||
<br />
|
||||
<br />
|
||||
In the console, you should see <b>two</b> messages: the actual error
|
||||
("Oops") printed natively by the browser with its JavaScript stack,
|
||||
and our addendum ("The above error occurred in BadRender component")
|
||||
with a React component stack.
|
||||
</TestCase.ExpectedResult>
|
||||
<Example
|
||||
doThrow={() => {
|
||||
throw new Error('Oops!');
|
||||
}}
|
||||
/>
|
||||
</TestCase>
|
||||
<TestCase title="Throwing null" description="">
|
||||
<TestCase.Steps>
|
||||
<li>Click the "Trigger error" button</li>
|
||||
<li>Click the reset button</li>
|
||||
</TestCase.Steps>
|
||||
<TestCase.ExpectedResult>
|
||||
The "Trigger error" button should be replaced with "Captured an
|
||||
error: null". Clicking reset should reset the test case.
|
||||
</TestCase.ExpectedResult>
|
||||
<Example
|
||||
doThrow={() => {
|
||||
throw null; // eslint-disable-line no-throw-literal
|
||||
}}
|
||||
/>
|
||||
</TestCase>
|
||||
<TestCase
|
||||
title="Cross-origin errors (development mode only)"
|
||||
description="">
|
||||
<TestCase.Steps>
|
||||
<li>Click the "Trigger cross-origin error" button</li>
|
||||
<li>Click the reset button</li>
|
||||
</TestCase.Steps>
|
||||
<TestCase.ExpectedResult>
|
||||
The "Trigger error" button should be replaced with "Captured an
|
||||
error: A cross-origin error was thrown [...]". The actual error
|
||||
message should be logged to the console: "Uncaught Error: Expected
|
||||
true to be false".
|
||||
</TestCase.ExpectedResult>
|
||||
<Example
|
||||
buttonText="Trigger cross-origin error"
|
||||
doThrow={() => {
|
||||
// The `expect` module is loaded via unpkg, so that this assertion
|
||||
// triggers a cross-origin error
|
||||
window.expect(true).toBe(false);
|
||||
}}
|
||||
/>
|
||||
</TestCase>
|
||||
<TestCase
|
||||
title="Errors are logged even if they're caught (development mode only)"
|
||||
description="">
|
||||
<TestCase.Steps>
|
||||
<li>Click the "Trigger render error and catch" button</li>
|
||||
</TestCase.Steps>
|
||||
<TestCase.ExpectedResult>
|
||||
Open the console. "Uncaught Error: Caught error" should have been
|
||||
logged by the browser. You should also see our addendum ("The above
|
||||
error...").
|
||||
</TestCase.ExpectedResult>
|
||||
<TriggerErrorAndCatch />
|
||||
</TestCase>
|
||||
<TestCase
|
||||
title="Recoverable errors can be silenced with preventDefault (development mode only)"
|
||||
description="">
|
||||
<TestCase.Steps>
|
||||
<li>Check the "Silence errors" checkbox below</li>
|
||||
<li>Click the "Throw (render phase)" button</li>
|
||||
<li>Click the "Throw (commit phase)" button</li>
|
||||
<li>Uncheck the "Silence errors" checkbox</li>
|
||||
</TestCase.Steps>
|
||||
<TestCase.ExpectedResult>
|
||||
Open the console. You shouldn't see <b>any</b> messages in the
|
||||
console: neither the browser error, nor our "The above error"
|
||||
addendum, from either of the buttons. The buttons themselves should
|
||||
get replaced by two labels: "Captured an error: Silenced error
|
||||
(render phase)" and "Captured an error: Silenced error (commit
|
||||
phase)".
|
||||
</TestCase.ExpectedResult>
|
||||
<SilenceRecoverableError />
|
||||
</TestCase>
|
||||
<TestCase
|
||||
title="Fatal errors cannot be silenced with preventDefault (development mode only)"
|
||||
description="">
|
||||
<TestCase.Steps>
|
||||
<li>Check the "Silence errors" checkbox below</li>
|
||||
<li>Click the "Throw fatal error" button</li>
|
||||
<li>Uncheck the "Silence errors" checkbox</li>
|
||||
</TestCase.Steps>
|
||||
<TestCase.ExpectedResult>
|
||||
Open the console. "Error: Caught error" should have been logged by
|
||||
React. You should also see our addendum ("The above error...").
|
||||
</TestCase.ExpectedResult>
|
||||
<TrySilenceFatalError />
|
||||
</TestCase>
|
||||
|
||||
{window.hasOwnProperty('event') ? (
|
||||
<TestCase
|
||||
title="Error handling does not interfere with window.event"
|
||||
description="">
|
||||
<TestCase.Steps>
|
||||
<li>Click the "Trigger callback in event" button</li>
|
||||
</TestCase.Steps>
|
||||
<TestCase.ExpectedResult>
|
||||
You should see "Got <b>click</b> event" and "Event cleared
|
||||
successfully" below.
|
||||
</TestCase.ExpectedResult>
|
||||
<GetEventTypeDuringUpdate />
|
||||
</TestCase>
|
||||
) : null}
|
||||
</FixtureSet>
|
||||
);
|
||||
}
|
||||
}
|
||||
@@ -1,38 +0,0 @@
|
||||
const React = window.React;
|
||||
|
||||
class HitBox extends React.Component {
|
||||
state = {
|
||||
x: 0,
|
||||
y: 0,
|
||||
};
|
||||
|
||||
static defaultProps = {
|
||||
onMouseMove: n => n,
|
||||
};
|
||||
|
||||
onMove = event => {
|
||||
this.setState({x: event.clientX, y: event.clientY});
|
||||
this.props.onMouseMove(event);
|
||||
};
|
||||
|
||||
render() {
|
||||
const {x, y} = this.state;
|
||||
|
||||
const boxStyle = {
|
||||
padding: '10px 20px',
|
||||
border: '1px solid #d9d9d9',
|
||||
margin: '10px 0 20px',
|
||||
};
|
||||
|
||||
return (
|
||||
<div onMouseMove={this.onMove} style={boxStyle}>
|
||||
<p>Trace your mouse over this box.</p>
|
||||
<p>
|
||||
Last movement: {x},{y}
|
||||
</p>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
export default HitBox;
|
||||
@@ -1,18 +0,0 @@
|
||||
import FixtureSet from '../../FixtureSet';
|
||||
import MouseMove from './mouse-move';
|
||||
import Persistence from './persistence';
|
||||
|
||||
const React = window.React;
|
||||
|
||||
class EventPooling extends React.Component {
|
||||
render() {
|
||||
return (
|
||||
<FixtureSet title="Event Pooling">
|
||||
<MouseMove />
|
||||
<Persistence />
|
||||
</FixtureSet>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
export default EventPooling;
|
||||
@@ -1,47 +0,0 @@
|
||||
import TestCase from '../../TestCase';
|
||||
import HitBox from './hit-box';
|
||||
|
||||
const React = window.React;
|
||||
|
||||
class MouseMove extends React.Component {
|
||||
state = {
|
||||
events: [],
|
||||
};
|
||||
|
||||
checkEvent = event => {
|
||||
let {events} = this.state;
|
||||
|
||||
if (event.type === 'mousemove' && events.indexOf(event) === -1) {
|
||||
this.setState({events: events.concat(event)});
|
||||
}
|
||||
};
|
||||
|
||||
render() {
|
||||
const {events} = this.state;
|
||||
|
||||
return (
|
||||
<TestCase title="Mouse Move" description="">
|
||||
<TestCase.Steps>
|
||||
<li>Mouse over the box below</li>
|
||||
</TestCase.Steps>
|
||||
|
||||
<TestCase.ExpectedResult>
|
||||
Mousemove should share the same instance of the event between
|
||||
dispatches.
|
||||
</TestCase.ExpectedResult>
|
||||
|
||||
<HitBox onMouseMove={this.checkEvent} />
|
||||
|
||||
<p>
|
||||
Was the event pooled?{' '}
|
||||
<b>
|
||||
{events.length ? (events.length <= 1 ? 'Yes' : 'No') : 'Unsure'} (
|
||||
{events.length} events)
|
||||
</b>
|
||||
</p>
|
||||
</TestCase>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
export default MouseMove;
|
||||
@@ -1,62 +0,0 @@
|
||||
import TestCase from '../../TestCase';
|
||||
import HitBox from './hit-box';
|
||||
|
||||
const React = window.React;
|
||||
|
||||
class Persistence extends React.Component {
|
||||
state = {
|
||||
persisted: 0,
|
||||
pooled: [],
|
||||
};
|
||||
|
||||
addPersisted = event => {
|
||||
let {persisted, pooled} = this.state;
|
||||
|
||||
event.persist();
|
||||
|
||||
if (event.type === 'mousemove') {
|
||||
this.setState({
|
||||
persisted: persisted + 1,
|
||||
pooled: pooled.filter(e => e !== event),
|
||||
});
|
||||
}
|
||||
};
|
||||
|
||||
addPooled = event => {
|
||||
let {pooled} = this.state;
|
||||
|
||||
if (event.type === 'mousemove' && pooled.indexOf(event) === -1) {
|
||||
this.setState({pooled: pooled.concat(event)});
|
||||
}
|
||||
};
|
||||
|
||||
render() {
|
||||
const {pooled, persisted} = this.state;
|
||||
|
||||
return (
|
||||
<TestCase title="Persistence" description="">
|
||||
<TestCase.Steps>
|
||||
<li>Mouse over the pooled event box</li>
|
||||
<li>Mouse over the persisted event box</li>
|
||||
</TestCase.Steps>
|
||||
|
||||
<TestCase.ExpectedResult>
|
||||
The pool size should not increase above 1, but reduce to 0 when
|
||||
hovering over the persisted region.
|
||||
</TestCase.ExpectedResult>
|
||||
|
||||
<h2>Add Pooled Event:</h2>
|
||||
<HitBox onMouseMove={this.addPooled} />
|
||||
|
||||
<h2>Add Persisted Event:</h2>
|
||||
<HitBox onMouseMove={this.addPersisted} />
|
||||
|
||||
<p>Pool size: {pooled.length}</p>
|
||||
|
||||
<p>Persisted size: {persisted}</p>
|
||||
</TestCase>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
export default Persistence;
|
||||
@@ -1,117 +0,0 @@
|
||||
const React = window.React;
|
||||
|
||||
export default function Home() {
|
||||
return (
|
||||
<main className="container">
|
||||
<h1>DOM Test Fixtures</h1>
|
||||
<p>
|
||||
Use this site to test browser quirks and other behavior that can not be
|
||||
captured through unit tests.
|
||||
</p>
|
||||
<section>
|
||||
<h2>Tested Browsers</h2>
|
||||
<table>
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Browser</th>
|
||||
<th>Versions</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td>Chrome - Desktop</td>
|
||||
<td>
|
||||
49<sup>*</sup>, Latest
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Chrome - Android</td>
|
||||
<td>Latest</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Firefox Desktop</td>
|
||||
<td>
|
||||
<a href="https://www.mozilla.org/en-US/firefox/organizations/">
|
||||
ESR<sup>†</sup>
|
||||
</a>, Latest
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Internet Explorer</td>
|
||||
<td>9, 10, 11</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Microsoft Edge</td>
|
||||
<td>14, Latest</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Safari - Desktop</td>
|
||||
<td>7, Latest</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Safari - iOS</td>
|
||||
<td>7, Latest</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
<footer>
|
||||
<small>* Chrome 49 is the last release for Windows XP.</small>
|
||||
<br />
|
||||
<small>
|
||||
† Firefox Extended Support Release (ESR) is used by many
|
||||
institutions.
|
||||
</small>
|
||||
</footer>
|
||||
</section>
|
||||
<section>
|
||||
<h2>How do I test browsers I don't have access to?</h2>
|
||||
<p>
|
||||
Getting test coverage across all of these browsers can be difficult,
|
||||
particularly for older versions of evergreen browsers. Fortunately
|
||||
there are a handful of tools that make browser testing easy.
|
||||
</p>
|
||||
<section>
|
||||
<h3>Paid services</h3>
|
||||
<ul>
|
||||
<li>
|
||||
<a href="https://browserstack.com">BrowserStack</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="https://saucelabs.com">Sauce Labs</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="https://crossbrowsertesting.com/">CrossBrowserTesting</a>
|
||||
</li>
|
||||
</ul>
|
||||
<p>
|
||||
These services provide access to all browsers we test, however they
|
||||
cost money. There is no obligation to pay for them. Maintainers have
|
||||
access to a BrowserStack subscription; feel free to contact a
|
||||
maintainer or mention browsers where extra testing is required.
|
||||
</p>
|
||||
</section>
|
||||
<section>
|
||||
<h3>Browser downloads</h3>
|
||||
<p>A handful of browsers are available for download directly:</p>
|
||||
<ul>
|
||||
<li>
|
||||
<a href="https://developer.microsoft.com/en-us/microsoft-edge/tools/vms/">
|
||||
Internet Explorer (9-11) and MS Edge virtual machines
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="https://www.chromium.org/getting-involved/download-chromium#TOC-Downloading-old-builds-of-Chrome-Chromium">
|
||||
Chromium snapshots (for older versions of Chrome)
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="https://www.mozilla.org/en-US/firefox/organizations/">
|
||||
Firefox Extended Support Release (ESR)
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
</section>
|
||||
</section>
|
||||
</main>
|
||||
);
|
||||
}
|
||||
@@ -1,85 +0,0 @@
|
||||
const React = window.React;
|
||||
|
||||
export class CodeEditor extends React.Component {
|
||||
shouldComponentUpdate() {
|
||||
return false;
|
||||
}
|
||||
|
||||
componentDidMount() {
|
||||
// Important: CodeMirror incorrectly lays out the editor
|
||||
// if it executes before CSS has loaded
|
||||
// https://github.com/graphql/graphiql/issues/33#issuecomment-318188555
|
||||
Promise.all([
|
||||
import('codemirror'),
|
||||
import('codemirror/mode/jsx/jsx'),
|
||||
import('codemirror/lib/codemirror.css'),
|
||||
import('./codemirror-paraiso-dark.css'),
|
||||
]).then(([CodeMirror]) => this.install(CodeMirror));
|
||||
}
|
||||
|
||||
install(CodeMirror) {
|
||||
if (!this.textarea) {
|
||||
return;
|
||||
}
|
||||
|
||||
const {onChange} = this.props;
|
||||
|
||||
this.editor = CodeMirror.fromTextArea(this.textarea, {
|
||||
mode: 'jsx',
|
||||
theme: 'paraiso-dark',
|
||||
lineNumbers: true,
|
||||
});
|
||||
|
||||
this.editor.on('change', function(doc) {
|
||||
onChange(doc.getValue());
|
||||
});
|
||||
}
|
||||
|
||||
componentWillUnmount() {
|
||||
if (this.editor) {
|
||||
this.editor.toTextArea();
|
||||
}
|
||||
}
|
||||
|
||||
render() {
|
||||
return (
|
||||
<textarea
|
||||
ref={ref => (this.textarea = ref)}
|
||||
defaultValue={this.props.code}
|
||||
autoComplete="off"
|
||||
hidden={true}
|
||||
/>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* Prevent IE9 from raising an error on an unrecognized element:
|
||||
* See https://github.com/facebook/react/issues/13610
|
||||
*/
|
||||
const supportsDetails = !(
|
||||
document.createElement('details') instanceof HTMLUnknownElement
|
||||
);
|
||||
|
||||
export class CodeError extends React.Component {
|
||||
render() {
|
||||
const {error, className} = this.props;
|
||||
|
||||
if (!error) {
|
||||
return null;
|
||||
}
|
||||
|
||||
if (supportsDetails) {
|
||||
const [summary, ...body] = error.message.split(/\n+/g);
|
||||
|
||||
return (
|
||||
<details className={className}>
|
||||
<summary>{summary}</summary>
|
||||
{body.join('\n')}
|
||||
</details>
|
||||
);
|
||||
}
|
||||
|
||||
return <div className={className}>{error.message}</div>;
|
||||
}
|
||||
}
|
||||
@@ -1,18 +0,0 @@
|
||||
/**
|
||||
* Babel works across all browsers, however it requires many polyfills.
|
||||
*/
|
||||
|
||||
import 'core-js/es6/weak-map';
|
||||
import 'core-js/es6/weak-set';
|
||||
import 'core-js/es6/number';
|
||||
import 'core-js/es6/string';
|
||||
import 'core-js/es6/array';
|
||||
import 'core-js/modules/es6.object.set-prototype-of';
|
||||
|
||||
import {transform} from '@babel/standalone';
|
||||
|
||||
const presets = ['es2015', 'stage-3', 'react'];
|
||||
|
||||
export function compile(raw) {
|
||||
return transform(raw, {presets}).code;
|
||||
}
|
||||
@@ -1,38 +0,0 @@
|
||||
/**
|
||||
* Name: Paraíso (Dark)
|
||||
* Author: Jan T. Sott
|
||||
* License: Creative Commons Attribution-ShareAlike 4.0 Unported License.
|
||||
* https://creativecommons.org/licenses/by-sa/4.0/deed.en_US
|
||||
*
|
||||
* Color scheme by Jan T. Sott (https://github.com/idleberg/Paraiso-CodeMirror)
|
||||
* Inspired by the art of Rubens LP (http://www.rubenslp.com.br)
|
||||
*/
|
||||
|
||||
.cm-s-paraiso-dark.CodeMirror { background: #2f1e2e; color: #b9b6b0; }
|
||||
.cm-s-paraiso-dark div.CodeMirror-selected { background: #41323f; }
|
||||
.cm-s-paraiso-dark .CodeMirror-line::selection, .cm-s-paraiso-dark .CodeMirror-line > span::selection, .cm-s-paraiso-dark .CodeMirror-line > span > span::selection { background: rgba(65, 50, 63, .99); }
|
||||
.cm-s-paraiso-dark .CodeMirror-line::-moz-selection, .cm-s-paraiso-dark .CodeMirror-line > span::-moz-selection, .cm-s-paraiso-dark .CodeMirror-line > span > span::-moz-selection { background: rgba(65, 50, 63, .99); }
|
||||
.cm-s-paraiso-dark .CodeMirror-gutters { background: #2f1e2e; border-right: 0px; }
|
||||
.cm-s-paraiso-dark .CodeMirror-guttermarker { color: #ef6155; }
|
||||
.cm-s-paraiso-dark .CodeMirror-guttermarker-subtle { color: #776e71; }
|
||||
.cm-s-paraiso-dark .CodeMirror-linenumber { color: #776e71; }
|
||||
.cm-s-paraiso-dark .CodeMirror-cursor { border-left: 1px solid #8d8687; }
|
||||
|
||||
.cm-s-paraiso-dark span.cm-comment { color: #e96ba8; }
|
||||
.cm-s-paraiso-dark span.cm-atom { color: #815ba4; }
|
||||
.cm-s-paraiso-dark span.cm-number { color: #815ba4; }
|
||||
|
||||
.cm-s-paraiso-dark span.cm-property, .cm-s-paraiso-dark span.cm-attribute { color: #48b685; }
|
||||
.cm-s-paraiso-dark span.cm-keyword { color: #ef6155; }
|
||||
.cm-s-paraiso-dark span.cm-string { color: #fec418; }
|
||||
|
||||
.cm-s-paraiso-dark span.cm-variable { color: #48b685; }
|
||||
.cm-s-paraiso-dark span.cm-variable-2 { color: #06b6ef; }
|
||||
.cm-s-paraiso-dark span.cm-def { color: #f99b15; }
|
||||
.cm-s-paraiso-dark span.cm-bracket { color: #b9b6b0; }
|
||||
.cm-s-paraiso-dark span.cm-tag { color: #ef6155; }
|
||||
.cm-s-paraiso-dark span.cm-link { color: #815ba4; }
|
||||
.cm-s-paraiso-dark span.cm-error { background: #ef6155; color: #8d8687; }
|
||||
|
||||
.cm-s-paraiso-dark .CodeMirror-activeline-background { background: #4D344A; }
|
||||
.cm-s-paraiso-dark .CodeMirror-matchingbracket { text-decoration: underline; color: white !important; }
|
||||
@@ -1,22 +0,0 @@
|
||||
export const SAMPLE_CODE = `
|
||||
class Fixture extends React.Component {
|
||||
state = {
|
||||
value: 'asdf'
|
||||
}
|
||||
|
||||
onChange(event) {
|
||||
this.setState({ value: event.target.value });
|
||||
}
|
||||
|
||||
render() {
|
||||
const { value } = this.state;
|
||||
|
||||
return (
|
||||
<form>
|
||||
<input value={value} onChange={this.onChange.bind(this)} />
|
||||
<p>Value: {value}</p>
|
||||
</form>
|
||||
);
|
||||
}
|
||||
}
|
||||
`.trim();
|
||||
@@ -1,68 +0,0 @@
|
||||
.hydration {
|
||||
background: #2f1e2e;
|
||||
margin: 0;
|
||||
position: relative;
|
||||
height: calc(100vh - 40px); /* height of header */
|
||||
overflow: auto;
|
||||
padding-top: 32px;
|
||||
}
|
||||
|
||||
.hydration-options {
|
||||
background: #171717;
|
||||
border-top: 1px dashed rgba(215, 235, 255, 0.12);
|
||||
color: #def5ff;
|
||||
height: 32px;
|
||||
line-height: 28px;
|
||||
padding: 0 8px;
|
||||
width: 100%;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
}
|
||||
|
||||
.hydration-options label {
|
||||
font-size: 13px;
|
||||
}
|
||||
|
||||
.hydration-options input[type=checkbox] {
|
||||
display: inline-block;
|
||||
margin-right: 4px;
|
||||
vertical-align: middle;
|
||||
}
|
||||
|
||||
.hydration .CodeMirror {
|
||||
font-size: 13px;
|
||||
padding-top: 8px;
|
||||
padding-bottom: 68px;
|
||||
height: calc(100vh - 72px);
|
||||
width: 55%;
|
||||
}
|
||||
|
||||
.hydration-sandbox {
|
||||
background: white;
|
||||
border-radius: 2px;
|
||||
border: 0;
|
||||
box-shadow: 0 1px 6px rgba(0, 0, 0, 0.54);
|
||||
height: calc(100% - 34px);
|
||||
position: absolute;
|
||||
right: 16px;
|
||||
top: 16px;
|
||||
width: calc(45% - 24px);
|
||||
}
|
||||
|
||||
.hydration-code-error {
|
||||
background: #df3f3f;
|
||||
border-radius: 2px;
|
||||
bottom: 18px;
|
||||
color: white;
|
||||
font-family: monospace;
|
||||
font-size: 13px;
|
||||
left: 16px;
|
||||
line-height: 1.25;
|
||||
overflow: auto;
|
||||
padding: 12px;
|
||||
position: fixed;
|
||||
white-space: pre;
|
||||
max-width: calc(55% - 26px);
|
||||
z-index: 10;
|
||||
}
|
||||
@@ -1,109 +0,0 @@
|
||||
import './hydration.css';
|
||||
import {SAMPLE_CODE} from './data';
|
||||
import {CodeEditor, CodeError} from './Code';
|
||||
import {compile} from './code-transformer';
|
||||
import {reactPaths} from '../../../react-loader';
|
||||
import qs from 'query-string';
|
||||
|
||||
const React = window.React;
|
||||
|
||||
class Hydration extends React.Component {
|
||||
state = {
|
||||
error: null,
|
||||
code: SAMPLE_CODE,
|
||||
hydrate: true,
|
||||
};
|
||||
|
||||
ready = false;
|
||||
|
||||
componentDidMount() {
|
||||
window.addEventListener('message', this.handleMessage);
|
||||
}
|
||||
|
||||
componentWillUnmount() {
|
||||
window.removeEventListener('message', this.handleMessage);
|
||||
}
|
||||
|
||||
handleMessage = event => {
|
||||
var data = JSON.parse(event.data);
|
||||
|
||||
switch (data.type) {
|
||||
case 'ready':
|
||||
this.ready = true;
|
||||
this.injectCode();
|
||||
break;
|
||||
default:
|
||||
throw new Error(
|
||||
'Editor Error: Unrecognized message "' + data.type + '"'
|
||||
);
|
||||
}
|
||||
};
|
||||
|
||||
injectCode = () => {
|
||||
try {
|
||||
this.send({
|
||||
type: 'code',
|
||||
payload: compile(this.state.code),
|
||||
});
|
||||
|
||||
this.setState({error: null});
|
||||
} catch (error) {
|
||||
this.setState({error});
|
||||
}
|
||||
};
|
||||
|
||||
send = message => {
|
||||
if (this.ready) {
|
||||
this.frame.contentWindow.postMessage(JSON.stringify(message), '*');
|
||||
}
|
||||
};
|
||||
|
||||
setFrame = frame => {
|
||||
this.frame = frame;
|
||||
};
|
||||
|
||||
setCode = code => {
|
||||
this.setState({code}, this.injectCode);
|
||||
};
|
||||
|
||||
setCheckbox = event => {
|
||||
this.setState({
|
||||
[event.target.name]: event.target.checked,
|
||||
});
|
||||
};
|
||||
|
||||
render() {
|
||||
const {code, error, hydrate} = this.state;
|
||||
const src = '/renderer.html?' + qs.stringify({hydrate, ...reactPaths()});
|
||||
|
||||
return (
|
||||
<div className="hydration">
|
||||
<header className="hydration-options">
|
||||
<label htmlFor="hydrate">
|
||||
<input
|
||||
id="hydrate"
|
||||
name="hydrate"
|
||||
type="checkbox"
|
||||
checked={hydrate}
|
||||
onChange={this.setCheckbox}
|
||||
/>
|
||||
Auto-Hydrate
|
||||
</label>
|
||||
</header>
|
||||
|
||||
<CodeEditor code={code} onChange={this.setCode} />
|
||||
|
||||
<CodeError error={error} className="hydration-code-error" />
|
||||
|
||||
<iframe
|
||||
ref={this.setFrame}
|
||||
className="hydration-sandbox"
|
||||
title="Hydration Preview"
|
||||
src={src}
|
||||
/>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
export default Hydration;
|
||||
@@ -1,62 +0,0 @@
|
||||
const React = window.React;
|
||||
const fixturePath = window.location.pathname;
|
||||
|
||||
/**
|
||||
* A simple routing component that renders the appropriate
|
||||
* fixture based on the location pathname.
|
||||
*/
|
||||
class FixturesPage extends React.Component {
|
||||
static defaultProps = {
|
||||
fixturePath: fixturePath === '/' ? '/home' : fixturePath,
|
||||
};
|
||||
|
||||
state = {
|
||||
isLoading: true,
|
||||
error: null,
|
||||
Fixture: null,
|
||||
};
|
||||
|
||||
componentDidMount() {
|
||||
this.loadFixture();
|
||||
}
|
||||
|
||||
async loadFixture() {
|
||||
const {fixturePath} = this.props;
|
||||
|
||||
try {
|
||||
const module = await import(`.${fixturePath}`);
|
||||
|
||||
this.setState({Fixture: module.default});
|
||||
} catch (error) {
|
||||
console.error(error);
|
||||
this.setState({error});
|
||||
} finally {
|
||||
this.setState({isLoading: false});
|
||||
}
|
||||
}
|
||||
|
||||
render() {
|
||||
const {Fixture, error, isLoading} = this.state;
|
||||
|
||||
if (isLoading) {
|
||||
return null;
|
||||
}
|
||||
|
||||
if (error) {
|
||||
return <FixtureError error={error} />;
|
||||
}
|
||||
|
||||
return <Fixture />;
|
||||
}
|
||||
}
|
||||
|
||||
function FixtureError({error}) {
|
||||
return (
|
||||
<section>
|
||||
<h2>Error loading fixture</h2>
|
||||
<p>{error.message}</p>
|
||||
</section>
|
||||
);
|
||||
}
|
||||
|
||||
export default FixturesPage;
|
||||
@@ -1,58 +0,0 @@
|
||||
import Fixture from '../../Fixture';
|
||||
const React = window.React;
|
||||
|
||||
class InputPlaceholderFixture extends React.Component {
|
||||
constructor(props, context) {
|
||||
super(props, context);
|
||||
|
||||
this.state = {
|
||||
placeholder: 'A placeholder',
|
||||
changeCount: 0,
|
||||
};
|
||||
}
|
||||
|
||||
handleChange = () => {
|
||||
this.setState(({changeCount}) => {
|
||||
return {
|
||||
changeCount: changeCount + 1,
|
||||
};
|
||||
});
|
||||
};
|
||||
handleGeneratePlaceholder = () => {
|
||||
this.setState({
|
||||
placeholder: `A placeholder: ${Math.random() * 100}`,
|
||||
});
|
||||
};
|
||||
|
||||
handleReset = () => {
|
||||
this.setState({
|
||||
changeCount: 0,
|
||||
});
|
||||
};
|
||||
|
||||
render() {
|
||||
const {placeholder, changeCount} = this.state;
|
||||
const color = changeCount === 0 ? 'green' : 'red';
|
||||
|
||||
return (
|
||||
<Fixture>
|
||||
<input
|
||||
type="text"
|
||||
placeholder={placeholder}
|
||||
onChange={this.handleChange}
|
||||
/>{' '}
|
||||
<button onClick={this.handleGeneratePlaceholder}>
|
||||
Change placeholder
|
||||
</button>
|
||||
<p style={{color}}>
|
||||
<code>onChange</code>
|
||||
{' calls: '}
|
||||
<strong>{changeCount}</strong>
|
||||
</p>
|
||||
<button onClick={this.handleReset}>Reset count</button>
|
||||
</Fixture>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
export default InputPlaceholderFixture;
|
||||
@@ -1,48 +0,0 @@
|
||||
import Fixture from '../../Fixture';
|
||||
const React = window.React;
|
||||
|
||||
class RadioClickFixture extends React.Component {
|
||||
constructor(props, context) {
|
||||
super(props, context);
|
||||
|
||||
this.state = {
|
||||
changeCount: 0,
|
||||
};
|
||||
}
|
||||
|
||||
handleChange = () => {
|
||||
this.setState(({changeCount}) => {
|
||||
return {
|
||||
changeCount: changeCount + 1,
|
||||
};
|
||||
});
|
||||
};
|
||||
|
||||
handleReset = () => {
|
||||
this.setState({
|
||||
changeCount: 0,
|
||||
});
|
||||
};
|
||||
|
||||
render() {
|
||||
const {changeCount} = this.state;
|
||||
const color = changeCount === 0 ? 'green' : 'red';
|
||||
|
||||
return (
|
||||
<Fixture>
|
||||
<label>
|
||||
<input defaultChecked type="radio" onChange={this.handleChange} />
|
||||
Test case radio input
|
||||
</label>{' '}
|
||||
<p style={{color}}>
|
||||
<code>onChange</code>
|
||||
{' calls: '}
|
||||
<strong>{changeCount}</strong>
|
||||
</p>
|
||||
<button onClick={this.handleReset}>Reset count</button>
|
||||
</Fixture>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
export default RadioClickFixture;
|
||||
@@ -1,57 +0,0 @@
|
||||
import Fixture from '../../Fixture';
|
||||
const React = window.React;
|
||||
|
||||
class RadioGroupFixture extends React.Component {
|
||||
constructor(props, context) {
|
||||
super(props, context);
|
||||
|
||||
this.state = {
|
||||
changeCount: 0,
|
||||
};
|
||||
}
|
||||
|
||||
handleChange = () => {
|
||||
this.setState(({changeCount}) => {
|
||||
return {
|
||||
changeCount: changeCount + 1,
|
||||
};
|
||||
});
|
||||
};
|
||||
|
||||
handleReset = () => {
|
||||
this.setState({
|
||||
changeCount: 0,
|
||||
});
|
||||
};
|
||||
|
||||
render() {
|
||||
const {changeCount} = this.state;
|
||||
const color = changeCount >= 3 ? 'green' : 'red';
|
||||
|
||||
return (
|
||||
<Fixture>
|
||||
<label>
|
||||
<input
|
||||
defaultChecked
|
||||
name="foo"
|
||||
type="radio"
|
||||
onChange={this.handleChange}
|
||||
/>
|
||||
Radio 1
|
||||
</label>
|
||||
<label>
|
||||
<input name="foo" type="radio" onChange={this.handleChange} />
|
||||
Radio 2
|
||||
</label>{' '}
|
||||
<p style={{color}}>
|
||||
<code>onChange</code>
|
||||
{' calls: '}
|
||||
<strong>{changeCount}</strong>
|
||||
</p>
|
||||
<button onClick={this.handleReset}>Reset count</button>
|
||||
</Fixture>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
export default RadioGroupFixture;
|
||||
@@ -1,48 +0,0 @@
|
||||
const React = window.React;
|
||||
const noop = n => n;
|
||||
|
||||
class RadioNameChangeFixture extends React.Component {
|
||||
state = {
|
||||
updated: false,
|
||||
};
|
||||
onClick = () => {
|
||||
this.setState(state => {
|
||||
return {updated: !state.updated};
|
||||
});
|
||||
};
|
||||
render() {
|
||||
const {updated} = this.state;
|
||||
const radioName = updated ? 'firstName' : 'secondName';
|
||||
return (
|
||||
<div>
|
||||
<label>
|
||||
<input
|
||||
type="radio"
|
||||
name={radioName}
|
||||
onChange={noop}
|
||||
checked={updated === true}
|
||||
/>
|
||||
First Radio
|
||||
</label>
|
||||
|
||||
<label>
|
||||
<input
|
||||
type="radio"
|
||||
name={radioName}
|
||||
onChange={noop}
|
||||
checked={updated === false}
|
||||
/>
|
||||
Second Radio
|
||||
</label>
|
||||
|
||||
<div>
|
||||
<button type="button" onClick={this.onClick}>
|
||||
Toggle
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
export default RadioNameChangeFixture;
|
||||
@@ -1,79 +0,0 @@
|
||||
import Fixture from '../../Fixture';
|
||||
const React = window.React;
|
||||
|
||||
class RangeKeyboardFixture extends React.Component {
|
||||
constructor(props, context) {
|
||||
super(props, context);
|
||||
|
||||
this.state = {
|
||||
keydownCount: 0,
|
||||
changeCount: 0,
|
||||
};
|
||||
}
|
||||
|
||||
componentDidMount() {
|
||||
this.input.addEventListener('keydown', this.handleKeydown, false);
|
||||
}
|
||||
|
||||
componentWillUnmount() {
|
||||
this.input.removeEventListener('keydown', this.handleKeydown, false);
|
||||
}
|
||||
|
||||
handleChange = () => {
|
||||
this.setState(({changeCount}) => {
|
||||
return {
|
||||
changeCount: changeCount + 1,
|
||||
};
|
||||
});
|
||||
};
|
||||
|
||||
handleKeydown = e => {
|
||||
// only interesting in arrow key events
|
||||
if ([37, 38, 39, 40].indexOf(e.keyCode) < 0) {
|
||||
return;
|
||||
}
|
||||
|
||||
this.setState(({keydownCount}) => {
|
||||
return {
|
||||
keydownCount: keydownCount + 1,
|
||||
};
|
||||
});
|
||||
};
|
||||
|
||||
handleReset = () => {
|
||||
this.setState({
|
||||
keydownCount: 0,
|
||||
changeCount: 0,
|
||||
});
|
||||
};
|
||||
|
||||
render() {
|
||||
const {keydownCount, changeCount} = this.state;
|
||||
const color = keydownCount === changeCount ? 'green' : 'red';
|
||||
|
||||
return (
|
||||
<Fixture>
|
||||
<div>
|
||||
<input
|
||||
type="range"
|
||||
ref={r => (this.input = r)}
|
||||
onChange={this.handleChange}
|
||||
/>
|
||||
<button onClick={() => this.input.focus()}>Focus Knob</button>
|
||||
</div>{' '}
|
||||
<p style={{color}}>
|
||||
<code>onKeyDown</code>
|
||||
{' calls: '}
|
||||
<strong>{keydownCount}</strong>
|
||||
{' vs '}
|
||||
<code>onChange</code>
|
||||
{' calls: '}
|
||||
<strong>{changeCount}</strong>
|
||||
</p>
|
||||
<button onClick={this.handleReset}>Reset counts</button>
|
||||
</Fixture>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
export default RangeKeyboardFixture;
|
||||
@@ -1,116 +0,0 @@
|
||||
import FixtureSet from '../../FixtureSet';
|
||||
import TestCase from '../../TestCase';
|
||||
import RangeKeyboardFixture from './RangeKeyboardFixture';
|
||||
import RadioClickFixture from './RadioClickFixture';
|
||||
import RadioGroupFixture from './RadioGroupFixture';
|
||||
import RadioNameChangeFixture from './RadioNameChangeFixture';
|
||||
import InputPlaceholderFixture from './InputPlaceholderFixture';
|
||||
const React = window.React;
|
||||
|
||||
class InputChangeEvents extends React.Component {
|
||||
render() {
|
||||
return (
|
||||
<FixtureSet
|
||||
title="Input change events"
|
||||
description="Tests proper behavior of the onChange event for inputs">
|
||||
<TestCase
|
||||
title="Range keyboard changes"
|
||||
description={`
|
||||
Range inputs should fire onChange events for keyboard events
|
||||
`}>
|
||||
<TestCase.Steps>
|
||||
<li>Focus range input</li>
|
||||
<li>change value via the keyboard arrow keys</li>
|
||||
</TestCase.Steps>
|
||||
|
||||
<TestCase.ExpectedResult>
|
||||
The <code>onKeyDown</code> call count should be equal to the{' '}
|
||||
<code>onChange</code> call count.
|
||||
</TestCase.ExpectedResult>
|
||||
|
||||
<RangeKeyboardFixture />
|
||||
</TestCase>
|
||||
|
||||
<TestCase
|
||||
title="Radio input clicks"
|
||||
description={`
|
||||
Radio inputs should only fire change events when the checked
|
||||
state changes.
|
||||
`}
|
||||
resolvedIn="16.0.0">
|
||||
<TestCase.Steps>
|
||||
<li>Click on the Radio input (or label text)</li>
|
||||
</TestCase.Steps>
|
||||
|
||||
<TestCase.ExpectedResult>
|
||||
The <code>onChange</code> call count should remain at 0
|
||||
</TestCase.ExpectedResult>
|
||||
|
||||
<RadioClickFixture />
|
||||
</TestCase>
|
||||
<TestCase
|
||||
title="Uncontrolled radio groups"
|
||||
description={`
|
||||
Radio inputs should fire change events when the value moved to
|
||||
another named input
|
||||
`}
|
||||
introducedIn="15.6.0">
|
||||
<TestCase.Steps>
|
||||
<li>Click on the "Radio 2"</li>
|
||||
<li>Click back to "Radio 1"</li>
|
||||
<li>Click back to "Radio 2"</li>
|
||||
</TestCase.Steps>
|
||||
|
||||
<TestCase.ExpectedResult>
|
||||
The <code>onChange</code> call count increment on each value change
|
||||
(at least 3+)
|
||||
</TestCase.ExpectedResult>
|
||||
|
||||
<RadioGroupFixture />
|
||||
</TestCase>
|
||||
|
||||
<TestCase
|
||||
title="Inputs with placeholders"
|
||||
description={`
|
||||
Text inputs with placeholders should not trigger changes
|
||||
when the placeholder is altered
|
||||
`}
|
||||
resolvedIn="15.0.0"
|
||||
resolvedBy="#5004"
|
||||
affectedBrowsers="IE9+">
|
||||
<TestCase.Steps>
|
||||
<li>Click on the Text input</li>
|
||||
<li>Click on the "Change placeholder" button</li>
|
||||
</TestCase.Steps>
|
||||
|
||||
<TestCase.ExpectedResult>
|
||||
The <code>onChange</code> call count should remain at 0
|
||||
</TestCase.ExpectedResult>
|
||||
|
||||
<InputPlaceholderFixture />
|
||||
</TestCase>
|
||||
<TestCase
|
||||
title="Radio button groups with name changes"
|
||||
description={`
|
||||
A radio button group should have correct checked value when
|
||||
the names changes
|
||||
`}
|
||||
resolvedBy="#11227"
|
||||
affectedBrowsers="IE9+">
|
||||
<TestCase.Steps>
|
||||
<li>Click the toggle button</li>
|
||||
</TestCase.Steps>
|
||||
|
||||
<TestCase.ExpectedResult>
|
||||
The checked radio button should switch between the first and second
|
||||
radio button
|
||||
</TestCase.ExpectedResult>
|
||||
|
||||
<RadioNameChangeFixture />
|
||||
</TestCase>
|
||||
</FixtureSet>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
export default InputChangeEvents;
|
||||
@@ -1,121 +0,0 @@
|
||||
import FixtureSet from '../../FixtureSet';
|
||||
import TestCase from '../../TestCase';
|
||||
|
||||
const React = window.React;
|
||||
|
||||
export default class MediaEvents extends React.Component {
|
||||
state = {
|
||||
playbackRate: 2,
|
||||
events: {
|
||||
onCanPlay: false,
|
||||
onCanPlayThrough: false,
|
||||
onDurationChange: false,
|
||||
onEmptied: false,
|
||||
onEnded: false,
|
||||
onError: false,
|
||||
onLoadedData: false,
|
||||
onLoadedMetadata: false,
|
||||
onLoadStart: false,
|
||||
onPause: false,
|
||||
onPlay: false,
|
||||
onPlaying: false,
|
||||
onProgress: false,
|
||||
onRateChange: false,
|
||||
onSeeked: false,
|
||||
onSeeking: false,
|
||||
onSuspend: false,
|
||||
onTimeUpdate: false,
|
||||
onVolumeChange: false,
|
||||
onWaiting: false,
|
||||
},
|
||||
};
|
||||
|
||||
updatePlaybackRate = () => {
|
||||
this.video.playbackRate = 2;
|
||||
};
|
||||
|
||||
setVideo = el => {
|
||||
this.video = el;
|
||||
};
|
||||
|
||||
eventDidFire(event) {
|
||||
this.setState({
|
||||
events: Object.assign({}, this.state.events, {[event]: true}),
|
||||
});
|
||||
}
|
||||
|
||||
getProgress() {
|
||||
const events = Object.keys(this.state.events);
|
||||
const total = events.length;
|
||||
const fired = events.filter(type => this.state.events[type]).length;
|
||||
|
||||
return fired / total;
|
||||
}
|
||||
|
||||
render() {
|
||||
const events = Object.keys(this.state.events);
|
||||
const handlers = events.reduce((events, event) => {
|
||||
events[event] = this.eventDidFire.bind(this, event);
|
||||
return events;
|
||||
}, {});
|
||||
|
||||
return (
|
||||
<FixtureSet title="Media Events">
|
||||
<TestCase
|
||||
title="Event bubbling"
|
||||
description="Media events should synthetically bubble">
|
||||
<TestCase.Steps>
|
||||
<li>Play the loaded video</li>
|
||||
<li>Pause the loaded video</li>
|
||||
<li>Play the failing video</li>
|
||||
<li>Drag the track bar</li>
|
||||
<li>Toggle the volume button</li>
|
||||
<li>
|
||||
<button onClick={this.updatePlaybackRate}>
|
||||
Click this button to increase playback rate
|
||||
</button>
|
||||
</li>
|
||||
</TestCase.Steps>
|
||||
|
||||
<p className="footnote">
|
||||
Note: This test does not confirm <code>onStalled</code>,{' '}
|
||||
<code>onAbort</code>, or <code>onEncrypted</code>
|
||||
</p>
|
||||
|
||||
<TestCase.ExpectedResult>
|
||||
All events in the table below should be marked as "true".
|
||||
</TestCase.ExpectedResult>
|
||||
|
||||
<section {...handlers}>
|
||||
<video src="/test.mp4" width="300" controls ref={this.setVideo} />
|
||||
<video src="/missing.mp4" width="300" controls />
|
||||
<p className="footnote">
|
||||
Note: The second video will not load. This is intentional.
|
||||
</p>
|
||||
</section>
|
||||
<hr />
|
||||
<section>
|
||||
<h3>Events</h3>
|
||||
<p>The following events should bubble:</p>
|
||||
<table>
|
||||
<tbody>{events.map(this.renderOutcome, this)}</tbody>
|
||||
</table>
|
||||
</section>
|
||||
</TestCase>
|
||||
</FixtureSet>
|
||||
);
|
||||
}
|
||||
|
||||
renderOutcome(event) {
|
||||
let fired = this.state.events[event];
|
||||
|
||||
return (
|
||||
<tr key={event}>
|
||||
<td>
|
||||
<b>{event}</b>
|
||||
</td>
|
||||
<td style={{color: fired ? null : 'red'}}>{`${fired}`}</td>
|
||||
</tr>
|
||||
);
|
||||
}
|
||||
}
|
||||
@@ -1,16 +0,0 @@
|
||||
import FixtureSet from '../../FixtureSet';
|
||||
import MouseMovement from './mouse-movement';
|
||||
|
||||
const React = window.React;
|
||||
|
||||
class MouseEvents extends React.Component {
|
||||
render() {
|
||||
return (
|
||||
<FixtureSet title="Mouse Events">
|
||||
<MouseMovement />
|
||||
</FixtureSet>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
export default MouseEvents;
|
||||
@@ -1,48 +0,0 @@
|
||||
import TestCase from '../../TestCase';
|
||||
|
||||
const React = window.React;
|
||||
|
||||
class MouseMovement extends React.Component {
|
||||
state = {
|
||||
movement: {x: 0, y: 0},
|
||||
};
|
||||
|
||||
onMove = event => {
|
||||
this.setState({x: event.movementX, y: event.movementY});
|
||||
};
|
||||
|
||||
render() {
|
||||
const {x, y} = this.state;
|
||||
|
||||
const boxStyle = {
|
||||
padding: '10px 20px',
|
||||
border: '1px solid #d9d9d9',
|
||||
margin: '10px 0 20px',
|
||||
};
|
||||
|
||||
return (
|
||||
<TestCase
|
||||
title="Mouse Movement"
|
||||
description="We polyfill the movementX and movementY fields."
|
||||
affectedBrowsers="IE, Safari">
|
||||
<TestCase.Steps>
|
||||
<li>Mouse over the box below</li>
|
||||
</TestCase.Steps>
|
||||
|
||||
<TestCase.ExpectedResult>
|
||||
The reported values should equal the pixel (integer) difference
|
||||
between mouse movements positions.
|
||||
</TestCase.ExpectedResult>
|
||||
|
||||
<div style={boxStyle} onMouseMove={this.onMove}>
|
||||
<p>Trace your mouse over this box.</p>
|
||||
<p>
|
||||
Last movement: {x},{y}
|
||||
</p>
|
||||
</div>
|
||||
</TestCase>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
export default MouseMovement;
|
||||
@@ -1,33 +0,0 @@
|
||||
import Fixture from '../../Fixture';
|
||||
|
||||
const React = window.React;
|
||||
|
||||
class NumberInputDecimal extends React.Component {
|
||||
state = {value: '.98'};
|
||||
changeValue = () => {
|
||||
this.setState({
|
||||
value: '0.98',
|
||||
});
|
||||
};
|
||||
render() {
|
||||
const {value} = this.state;
|
||||
return (
|
||||
<Fixture>
|
||||
<div>{this.props.children}</div>
|
||||
|
||||
<div className="control-box">
|
||||
<input
|
||||
type="number"
|
||||
value={value}
|
||||
onChange={e => {
|
||||
this.setState({value: e.target.value});
|
||||
}}
|
||||
/>
|
||||
<button onClick={this.changeValue}>change.98 to 0.98</button>
|
||||
</div>
|
||||
</Fixture>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
export default NumberInputDecimal;
|
||||
@@ -1,30 +0,0 @@
|
||||
import Fixture from '../../Fixture';
|
||||
|
||||
const React = window.React;
|
||||
|
||||
class NumberInputExtraZeroes extends React.Component {
|
||||
state = {value: '3.0000'};
|
||||
changeValue = () => {
|
||||
this.setState({
|
||||
value: '3.0000',
|
||||
});
|
||||
};
|
||||
onChange = event => {
|
||||
this.setState({value: event.target.value});
|
||||
};
|
||||
render() {
|
||||
const {value} = this.state;
|
||||
return (
|
||||
<Fixture>
|
||||
<div>{this.props.children}</div>
|
||||
|
||||
<div className="control-box">
|
||||
<input type="number" value={value} onChange={this.onChange} />
|
||||
<button onClick={this.changeValue}>Reset to "3.0000"</button>
|
||||
</div>
|
||||
</Fixture>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
export default NumberInputExtraZeroes;
|
||||
@@ -1,42 +0,0 @@
|
||||
import Fixture from '../../Fixture';
|
||||
|
||||
const React = window.React;
|
||||
|
||||
class NumberTestCase extends React.Component {
|
||||
state = {value: ''};
|
||||
onChange = event => {
|
||||
const parsed = parseFloat(event.target.value, 10);
|
||||
const value = isNaN(parsed) ? '' : parsed;
|
||||
|
||||
this.setState({value});
|
||||
};
|
||||
render() {
|
||||
return (
|
||||
<Fixture>
|
||||
<div>{this.props.children}</div>
|
||||
|
||||
<div className="control-box">
|
||||
<fieldset>
|
||||
<legend>Controlled</legend>
|
||||
<input
|
||||
type="number"
|
||||
value={this.state.value}
|
||||
onChange={this.onChange}
|
||||
/>
|
||||
<span className="hint">
|
||||
{' '}
|
||||
Value: {JSON.stringify(this.state.value)}
|
||||
</span>
|
||||
</fieldset>
|
||||
|
||||
<fieldset>
|
||||
<legend>Uncontrolled</legend>
|
||||
<input type="number" defaultValue={0.5} />
|
||||
</fieldset>
|
||||
</div>
|
||||
</Fixture>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
export default NumberTestCase;
|
||||
@@ -1,193 +0,0 @@
|
||||
import FixtureSet from '../../FixtureSet';
|
||||
import TestCase from '../../TestCase';
|
||||
import NumberTestCase from './NumberTestCase';
|
||||
import NumberInputDecimal from './NumberInputDecimal';
|
||||
import NumberInputExtraZeroes from './NumberInputExtraZeroes';
|
||||
|
||||
const React = window.React;
|
||||
|
||||
function NumberInputs() {
|
||||
return (
|
||||
<FixtureSet
|
||||
title="Number inputs"
|
||||
description="Number inputs inconsistently assign and report the value
|
||||
property depending on the browser.">
|
||||
<TestCase
|
||||
title="Backspacing"
|
||||
description="The decimal place should not be lost">
|
||||
<TestCase.Steps>
|
||||
<li>Type "3.1"</li>
|
||||
<li>Press backspace, eliminating the "1"</li>
|
||||
</TestCase.Steps>
|
||||
|
||||
<TestCase.ExpectedResult>
|
||||
The field should read "3.", preserving the decimal place
|
||||
</TestCase.ExpectedResult>
|
||||
|
||||
<NumberTestCase />
|
||||
|
||||
<p className="footnote">
|
||||
<b>Notes:</b> Modern Chrome and Safari {'<='} 6 clear trailing
|
||||
decimals on blur. React makes this concession so that the value
|
||||
attribute remains in sync with the value property.
|
||||
</p>
|
||||
</TestCase>
|
||||
|
||||
<TestCase
|
||||
title="Decimal precision"
|
||||
description="Supports decimal precision greater than 2 places">
|
||||
<TestCase.Steps>
|
||||
<li>Type "0.01"</li>
|
||||
</TestCase.Steps>
|
||||
|
||||
<TestCase.ExpectedResult>
|
||||
The field should read "0.01"
|
||||
</TestCase.ExpectedResult>
|
||||
|
||||
<NumberTestCase />
|
||||
</TestCase>
|
||||
|
||||
<TestCase
|
||||
title="Exponent form"
|
||||
description="Supports exponent form ('2e4')">
|
||||
<TestCase.Steps>
|
||||
<li>Type "2e"</li>
|
||||
<li>Type 4, to read "2e4"</li>
|
||||
</TestCase.Steps>
|
||||
|
||||
<TestCase.ExpectedResult>
|
||||
The field should read "2e4". The parsed value should read "20000"
|
||||
</TestCase.ExpectedResult>
|
||||
|
||||
<NumberTestCase />
|
||||
</TestCase>
|
||||
|
||||
<TestCase title="Exponent Form" description="Pressing 'e' at the end">
|
||||
<TestCase.Steps>
|
||||
<li>Type "3.14"</li>
|
||||
<li>Press "e", so that the input reads "3.14e"</li>
|
||||
</TestCase.Steps>
|
||||
|
||||
<TestCase.ExpectedResult>
|
||||
The field should read "3.14e", the parsed value should be empty
|
||||
</TestCase.ExpectedResult>
|
||||
|
||||
<NumberTestCase />
|
||||
</TestCase>
|
||||
|
||||
<TestCase
|
||||
title="Exponent Form"
|
||||
description="Supports pressing 'ee' in the middle of a number">
|
||||
<TestCase.Steps>
|
||||
<li>Type "3.14"</li>
|
||||
<li>Move the text cursor to after the decimal place</li>
|
||||
<li>Press "e" twice, so that the value reads "3.ee14"</li>
|
||||
</TestCase.Steps>
|
||||
|
||||
<TestCase.ExpectedResult>
|
||||
The field should read "3.ee14"
|
||||
</TestCase.ExpectedResult>
|
||||
|
||||
<NumberTestCase />
|
||||
</TestCase>
|
||||
|
||||
<TestCase
|
||||
title="Trailing Zeroes"
|
||||
description="Typing '3.0' preserves the trailing zero">
|
||||
<TestCase.Steps>
|
||||
<li>Type "3.0"</li>
|
||||
</TestCase.Steps>
|
||||
|
||||
<TestCase.ExpectedResult>
|
||||
The field should read "3.0"
|
||||
</TestCase.ExpectedResult>
|
||||
|
||||
<NumberTestCase />
|
||||
</TestCase>
|
||||
|
||||
<TestCase
|
||||
title="Inserting decimals precision"
|
||||
description="Inserting '.' in to '300' maintains the trailing zeroes">
|
||||
<TestCase.Steps>
|
||||
<li>Type "300"</li>
|
||||
<li>Move the cursor to after the "3"</li>
|
||||
<li>Type "."</li>
|
||||
</TestCase.Steps>
|
||||
|
||||
<TestCase.ExpectedResult>
|
||||
The field should read "3.00", not "3"
|
||||
</TestCase.ExpectedResult>
|
||||
<NumberTestCase />
|
||||
</TestCase>
|
||||
|
||||
<TestCase
|
||||
title="Replacing numbers with -"
|
||||
description="Replacing a number with the '-' sign should not clear the value">
|
||||
<TestCase.Steps>
|
||||
<li>Type "3"</li>
|
||||
<li>Select the entire value"</li>
|
||||
<li>Type '-' to replace '3' with '-'</li>
|
||||
</TestCase.Steps>
|
||||
|
||||
<TestCase.ExpectedResult>
|
||||
The field should read "-", not be blank.
|
||||
</TestCase.ExpectedResult>
|
||||
<NumberTestCase />
|
||||
</TestCase>
|
||||
|
||||
<TestCase
|
||||
title="Negative numbers"
|
||||
description="Typing minus when inserting a negative number should work">
|
||||
<TestCase.Steps>
|
||||
<li>Type "-"</li>
|
||||
<li>Type '3'</li>
|
||||
</TestCase.Steps>
|
||||
|
||||
<TestCase.ExpectedResult>
|
||||
The field should read "-3".
|
||||
</TestCase.ExpectedResult>
|
||||
<NumberTestCase />
|
||||
</TestCase>
|
||||
<TestCase
|
||||
title="Decimal numbers"
|
||||
description="eg: initial value is '.98', when format to '0.98', should change to '0.98' ">
|
||||
<TestCase.Steps>
|
||||
<li>initial value is '.98'</li>
|
||||
<li>setState to '0.98'</li>
|
||||
</TestCase.Steps>
|
||||
|
||||
<TestCase.ExpectedResult>
|
||||
the input value should be '0.98'.
|
||||
</TestCase.ExpectedResult>
|
||||
<NumberInputDecimal />
|
||||
</TestCase>
|
||||
|
||||
<TestCase
|
||||
title="Trailing zeroes"
|
||||
description="Extraneous zeroes should be retained when changing the value via setState">
|
||||
<TestCase.Steps>
|
||||
<li>Change the text to 4.0000</li>
|
||||
<li>Click "Reset to 3.0000"</li>
|
||||
</TestCase.Steps>
|
||||
|
||||
<TestCase.ExpectedResult>
|
||||
The field should read 3.0000, not 3
|
||||
</TestCase.ExpectedResult>
|
||||
|
||||
<NumberInputExtraZeroes />
|
||||
|
||||
<p className="footnote">
|
||||
<b>Notes:</b> Firefox drops extraneous zeroes when assigned. Zeroes
|
||||
are preserved when editing, however directly assigning a new value
|
||||
will drop zeroes. This{' '}
|
||||
<a href="https://bugzilla.mozilla.org/show_bug.cgi?id=1003896">
|
||||
is a bug in Firefox
|
||||
</a>{' '}
|
||||
that we can not control for.
|
||||
</p>
|
||||
</TestCase>
|
||||
</FixtureSet>
|
||||
);
|
||||
}
|
||||
|
||||
export default NumberInputs;
|
||||
@@ -1,39 +0,0 @@
|
||||
import Fixture from '../../Fixture';
|
||||
|
||||
const React = window.React;
|
||||
|
||||
class PasswordTestCase extends React.Component {
|
||||
state = {value: ''};
|
||||
onChange = event => {
|
||||
this.setState({value: event.target.value});
|
||||
};
|
||||
render() {
|
||||
return (
|
||||
<Fixture>
|
||||
<div>{this.props.children}</div>
|
||||
|
||||
<div className="control-box">
|
||||
<fieldset>
|
||||
<legend>Controlled</legend>
|
||||
<input
|
||||
type="password"
|
||||
value={this.state.value}
|
||||
onChange={this.onChange}
|
||||
/>
|
||||
<span className="hint">
|
||||
{' '}
|
||||
Value: {JSON.stringify(this.state.value)}
|
||||
</span>
|
||||
</fieldset>
|
||||
|
||||
<fieldset>
|
||||
<legend>Uncontrolled</legend>
|
||||
<input type="password" defaultValue="" />
|
||||
</fieldset>
|
||||
</div>
|
||||
</Fixture>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
export default PasswordTestCase;
|
||||
@@ -1,31 +0,0 @@
|
||||
import FixtureSet from '../../FixtureSet';
|
||||
import TestCase from '../../TestCase';
|
||||
import PasswordTestCase from './PasswordTestCase';
|
||||
|
||||
const React = window.React;
|
||||
|
||||
function NumberInputs() {
|
||||
return (
|
||||
<FixtureSet title="Password inputs">
|
||||
<TestCase
|
||||
title="The show password icon"
|
||||
description={`
|
||||
Some browsers have an unmask password icon that React accidentally
|
||||
prevents the display of.
|
||||
`}
|
||||
affectedBrowsers="IE Edge, IE 11">
|
||||
<TestCase.Steps>
|
||||
<li>Type any string (not an actual password)</li>
|
||||
</TestCase.Steps>
|
||||
|
||||
<TestCase.ExpectedResult>
|
||||
The field should include the "unmasking password" icon.
|
||||
</TestCase.ExpectedResult>
|
||||
|
||||
<PasswordTestCase />
|
||||
</TestCase>
|
||||
</FixtureSet>
|
||||
);
|
||||
}
|
||||
|
||||
export default NumberInputs;
|
||||
@@ -1,90 +0,0 @@
|
||||
const React = window.React;
|
||||
|
||||
const CIRCLE_SIZE = 80;
|
||||
|
||||
class DragBox extends React.Component {
|
||||
state = {
|
||||
hasCapture: false,
|
||||
circleLeft: 80,
|
||||
circleTop: 80,
|
||||
};
|
||||
isDragging = false;
|
||||
previousLeft = 0;
|
||||
previousTop = 0;
|
||||
|
||||
onDown = event => {
|
||||
this.isDragging = true;
|
||||
event.target.setPointerCapture(event.pointerId);
|
||||
|
||||
// We store the initial coordinates to be able to calculate the changes
|
||||
// later on.
|
||||
this.extractPositionDelta(event);
|
||||
};
|
||||
|
||||
onMove = event => {
|
||||
if (!this.isDragging) {
|
||||
return;
|
||||
}
|
||||
const {left, top} = this.extractPositionDelta(event);
|
||||
|
||||
this.setState(({circleLeft, circleTop}) => ({
|
||||
circleLeft: circleLeft + left,
|
||||
circleTop: circleTop + top,
|
||||
}));
|
||||
};
|
||||
|
||||
onUp = event => (this.isDragging = false);
|
||||
onGotCapture = event => this.setState({hasCapture: true});
|
||||
onLostCapture = event => this.setState({hasCapture: false});
|
||||
|
||||
extractPositionDelta = event => {
|
||||
const left = event.pageX;
|
||||
const top = event.pageY;
|
||||
const delta = {
|
||||
left: left - this.previousLeft,
|
||||
top: top - this.previousTop,
|
||||
};
|
||||
this.previousLeft = left;
|
||||
this.previousTop = top;
|
||||
return delta;
|
||||
};
|
||||
|
||||
render() {
|
||||
const {hasCapture, circleLeft, circleTop} = this.state;
|
||||
|
||||
const boxStyle = {
|
||||
border: '1px solid #d9d9d9',
|
||||
margin: '10px 0 20px',
|
||||
minHeight: 400,
|
||||
width: '100%',
|
||||
position: 'relative',
|
||||
};
|
||||
|
||||
const circleStyle = {
|
||||
width: CIRCLE_SIZE,
|
||||
height: CIRCLE_SIZE,
|
||||
borderRadius: CIRCLE_SIZE / 2,
|
||||
position: 'absolute',
|
||||
left: circleLeft,
|
||||
top: circleTop,
|
||||
backgroundColor: hasCapture ? 'blue' : 'green',
|
||||
touchAction: 'none',
|
||||
};
|
||||
|
||||
return (
|
||||
<div style={boxStyle}>
|
||||
<div
|
||||
style={circleStyle}
|
||||
onPointerDown={this.onDown}
|
||||
onPointerMove={this.onMove}
|
||||
onPointerUp={this.onUp}
|
||||
onPointerCancel={this.onUp}
|
||||
onGotPointerCapture={this.onGotCapture}
|
||||
onLostPointerCapture={this.onLostCapture}
|
||||
/>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
export default DragBox;
|
||||
@@ -1,25 +0,0 @@
|
||||
import TestCase from '../../TestCase';
|
||||
import DragBox from './drag-box';
|
||||
|
||||
const React = window.React;
|
||||
|
||||
class Drag extends React.Component {
|
||||
render() {
|
||||
return (
|
||||
<TestCase title="Drag" description="">
|
||||
<TestCase.Steps>
|
||||
<li>Drag the circle below with any pointer tool</li>
|
||||
</TestCase.Steps>
|
||||
|
||||
<TestCase.ExpectedResult>
|
||||
While dragging, the circle must have turn blue to indicate that a
|
||||
pointer capture was received.
|
||||
</TestCase.ExpectedResult>
|
||||
|
||||
<DragBox />
|
||||
</TestCase>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
export default Drag;
|
||||
@@ -1,34 +0,0 @@
|
||||
const React = window.React;
|
||||
|
||||
class DrawBox extends React.Component {
|
||||
render() {
|
||||
const boxStyle = {
|
||||
border: '1px solid #d9d9d9',
|
||||
margin: '10px 0 20px',
|
||||
padding: '20px 20px',
|
||||
touchAction: 'none',
|
||||
};
|
||||
|
||||
const obstacleStyle = {
|
||||
border: '1px solid #d9d9d9',
|
||||
width: '25%',
|
||||
height: '200px',
|
||||
margin: '12.5%',
|
||||
display: 'inline-block',
|
||||
};
|
||||
|
||||
return (
|
||||
<div
|
||||
style={boxStyle}
|
||||
onPointerOver={this.props.onOver}
|
||||
onPointerOut={this.props.onOut}
|
||||
onPointerEnter={this.props.onEnter}
|
||||
onPointerLeave={this.props.onLeave}>
|
||||
<div style={obstacleStyle} />
|
||||
<div style={obstacleStyle} />
|
||||
</div>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
export default DrawBox;
|
||||
@@ -1,51 +0,0 @@
|
||||
import TestCase from '../../TestCase';
|
||||
import HoverBox from './hover-box';
|
||||
|
||||
const React = window.React;
|
||||
|
||||
class Hover extends React.Component {
|
||||
state = {
|
||||
overs: 0,
|
||||
outs: 0,
|
||||
enters: 0,
|
||||
leaves: 0,
|
||||
};
|
||||
|
||||
onOver = () => this.setState({overs: this.state.overs + 1});
|
||||
onOut = () => this.setState({outs: this.state.outs + 1});
|
||||
onEnter = () => this.setState({enters: this.state.enters + 1});
|
||||
onLeave = () => this.setState({leaves: this.state.leaves + 1});
|
||||
|
||||
render() {
|
||||
const {overs, outs, enters, leaves} = this.state;
|
||||
|
||||
return (
|
||||
<TestCase title="Hover" description="">
|
||||
<TestCase.Steps>
|
||||
<li>Hover over the above box and the obstacles</li>
|
||||
</TestCase.Steps>
|
||||
|
||||
<TestCase.ExpectedResult>
|
||||
Overs and outs should increase when moving over the obstacles but
|
||||
enters and leaves should not.
|
||||
</TestCase.ExpectedResult>
|
||||
|
||||
<HoverBox
|
||||
onOver={this.onOver}
|
||||
onOut={this.onOut}
|
||||
onEnter={this.onEnter}
|
||||
onLeave={this.onLeave}
|
||||
/>
|
||||
|
||||
<p>
|
||||
Pointer Overs: <b>{overs}</b> <br />
|
||||
Pointer Outs: <b>{outs}</b> <br />
|
||||
Pointer Enters: <b>{enters}</b> <br />
|
||||
Pointer Leaves: <b>{leaves}</b> <br />
|
||||
</p>
|
||||
</TestCase>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
export default Hover;
|
||||
@@ -1,20 +0,0 @@
|
||||
import FixtureSet from '../../FixtureSet';
|
||||
import Drag from './drag';
|
||||
import Hover from './hover';
|
||||
|
||||
const React = window.React;
|
||||
|
||||
class PointerEvents extends React.Component {
|
||||
render() {
|
||||
return (
|
||||
<FixtureSet
|
||||
title="Pointer Events"
|
||||
description="Pointer Events are not supported in every browser. The examples below might not work in every browser. To test pointer events, make sure to use Google Chrome, Firefox, Internet Explorer, or Edge.">
|
||||
<Drag />
|
||||
<Hover />
|
||||
</FixtureSet>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
export default PointerEvents;
|
||||
@@ -1,36 +0,0 @@
|
||||
import FixtureSet from '../../FixtureSet';
|
||||
|
||||
const React = window.React;
|
||||
|
||||
class RangeInputs extends React.Component {
|
||||
state = {value: 0.5};
|
||||
onChange = event => {
|
||||
this.setState({value: event.target.value});
|
||||
};
|
||||
render() {
|
||||
return (
|
||||
<FixtureSet
|
||||
title="Range Inputs"
|
||||
description="Note: Range inputs are not supported in IE9.">
|
||||
<form>
|
||||
<fieldset>
|
||||
<legend>Controlled</legend>
|
||||
<input
|
||||
type="range"
|
||||
value={this.state.value}
|
||||
onChange={this.onChange}
|
||||
/>
|
||||
<span className="hint">Value: {this.state.value}</span>
|
||||
</fieldset>
|
||||
|
||||
<fieldset>
|
||||
<legend>Uncontrolled</legend>
|
||||
<input type="range" defaultValue={0.5} />
|
||||
</fieldset>
|
||||
</form>
|
||||
</FixtureSet>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
export default RangeInputs;
|
||||
@@ -1,50 +0,0 @@
|
||||
import TestCase from '../../TestCase';
|
||||
import Iframe from '../../Iframe';
|
||||
const React = window.React;
|
||||
|
||||
class OnSelectIframe extends React.Component {
|
||||
state = {count: 0, value: 'Select Me!'};
|
||||
|
||||
_onSelect = event => {
|
||||
this.setState(({count}) => ({count: count + 1}));
|
||||
};
|
||||
|
||||
_onChange = event => {
|
||||
this.setState({value: event.target.value});
|
||||
};
|
||||
|
||||
render() {
|
||||
const {count, value} = this.state;
|
||||
return (
|
||||
<Iframe height={60}>
|
||||
Selection Event Count: {count}
|
||||
<input
|
||||
type="text"
|
||||
onSelect={this._onSelect}
|
||||
value={value}
|
||||
onChange={this._onChange}
|
||||
/>
|
||||
</Iframe>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
export default class OnSelectEventTestCase extends React.Component {
|
||||
render() {
|
||||
return (
|
||||
<TestCase
|
||||
title="onSelect events within iframes"
|
||||
description="onSelect events should fire for elements rendered inside iframes">
|
||||
<TestCase.Steps>
|
||||
<li>Highlight some of the text in the input below</li>
|
||||
<li>Move the cursor around using the arrow keys</li>
|
||||
</TestCase.Steps>
|
||||
<TestCase.ExpectedResult>
|
||||
The displayed count should increase as you highlight or move the
|
||||
cursor
|
||||
</TestCase.ExpectedResult>
|
||||
<OnSelectIframe />
|
||||
</TestCase>
|
||||
);
|
||||
}
|
||||
}
|
||||
@@ -1,44 +0,0 @@
|
||||
import TestCase from '../../TestCase';
|
||||
import Iframe from '../../Iframe';
|
||||
const React = window.React;
|
||||
|
||||
export default class ReorderedInputsTestCase extends React.Component {
|
||||
state = {count: 0};
|
||||
|
||||
componentDidMount() {
|
||||
this.interval = setInterval(() => {
|
||||
this.setState({count: this.state.count + 1});
|
||||
}, 2000);
|
||||
}
|
||||
|
||||
componentWillUnmount() {
|
||||
clearInterval(this.interval);
|
||||
}
|
||||
|
||||
renderInputs() {
|
||||
const inputs = [
|
||||
<input key={1} defaultValue="Foo" />,
|
||||
<input key={2} defaultValue="Bar" />,
|
||||
];
|
||||
if (this.state.count % 2 === 0) {
|
||||
inputs.reverse();
|
||||
}
|
||||
return inputs;
|
||||
}
|
||||
|
||||
render() {
|
||||
return (
|
||||
<TestCase title="Reordered input elements in iframes" description="">
|
||||
<TestCase.Steps>
|
||||
<li>The two inputs below swap positions every two seconds</li>
|
||||
<li>Select the text in either of them</li>
|
||||
<li>Wait for the swap to occur</li>
|
||||
</TestCase.Steps>
|
||||
<TestCase.ExpectedResult>
|
||||
The selection you made should be maintained
|
||||
</TestCase.ExpectedResult>
|
||||
<Iframe height={50}>{this.renderInputs()}</Iframe>
|
||||
</TestCase>
|
||||
);
|
||||
}
|
||||
}
|
||||
Some files were not shown because too many files have changed in this diff Show More
Reference in New Issue
Block a user