Make toggleable test cases
Nathan Hunzaker committed
Dec 17, 2016 at 12:24 UTC
65d4795a1a49d14de230c21e755bc6fc088538a2
4 files changed
+181
-21
examples/inputs/README.md
new
+3
@@ -0,0 +1,3 @@
1
+# Input Test Case
2
+
3
+More information around the history of inputs could go here.
examples/inputs/index.html
new
+124
@@ -0,0 +1,124 @@
1
+<!DOCTYPE html>
2
+<html>
3
+ <head>
4
+ <meta charset="utf-8">
5
+
6
+ <title>Inputs</title>
7
+
8
+ <style>
9
+ body {
10
+ font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif;
11
+ }
12
+
13
+ label {
14
+ display: block;
15
+ text-transform: uppercase;
16
+ letter-spacing: 0.01em;
17
+ font-size: 12px;
18
+ margin-bottom: 4px;
19
+ }
20
+
21
+ h1 {
22
+ text-align: center;
23
+ }
24
+
25
+ .field {
26
+ padding: 8px;
27
+ }
28
+
29
+ form {
30
+ display: flex;
31
+ max-width: 900px;
32
+ margin: 0 auto;
33
+ width: 100%;
34
+ }
35
+
36
+ fieldset {
37
+ border: 1px solid #aaa;
38
+ padding: 16px;
39
+ flex-grow: 1;
40
+ flex-basis: 50%;
41
+ }
42
+ </style>
43
+ </head>
44
+ <body>
45
+ <div id="container">Loading...</div>
46
+
47
+ <script src="../react-loader.js"></script>
48
+
49
+ <script type="text/babel">
50
+ var Inputs = React.createClass({
51
+
52
+ getInitialState() {
53
+ return {
54
+ color: "#ffaaee"
55
+ }
56
+ },
57
+
58
+ renderControlled(type) {
59
+ let id = `controlled_${type}`
60
+
61
+ let onChange = e => {
62
+ let value = e.target.value
63
+
64
+ if (type === 'number') {
65
+ value = value == '' ? '' : parseFloat(value, 10) || 0
66
+ }
67
+
68
+ this.setState({
69
+ [type] : value
70
+ })
71
+ }
72
+
73
+ let state = this.state[type] || ''
74
+
75
+ return (
76
+ <div key={type} className="field">
77
+ <label htmlFor={id}>{type}</label>
78
+ <input id={id} type={type} value={state} onChange={onChange} />
79
+ → {JSON.stringify(state)}
80
+ </div>
81
+ )
82
+ },
83
+
84
+ renderUncontrolled(type) {
85
+ let id = `uncontrolled_${type}`
86
+
87
+ return (
88
+ <div key={type} className="field">
89
+ <label htmlFor={id}>{type}</label>
90
+ <input id={id} type={type} />
91
+ </div>
92
+ )
93
+ },
94
+
95
+ render() {
96
+ // https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input
97
+ let types = [
98
+ 'text', 'email', 'number', 'url', 'tel',
99
+ 'color', 'date', 'datetime-local',
100
+ 'time', 'month', 'week', 'range', 'password'
101
+ ]
102
+
103
+ return (
104
+ <div>
105
+ <h1>Input Kitchen Sink</h1>
106
+ <form onSubmit={e=>e.preventDefault()}>
107
+ <fieldset>
108
+ <legend>Controlled</legend>
109
+ {types.map(this.renderControlled)}
110
+ </fieldset>
111
+ <fieldset>
112
+ <legend>Uncontrolled</legend>
113
+ {types.map(this.renderUncontrolled)}
114
+ </fieldset>
115
+ </form>
116
+ </div>
117
+ )
118
+ }
119
+ })
120
+
121
+ ReactDOM.render(<Inputs />, document.getElementById('container'))
122
+ </script>
123
+ </body>
124
+</html>
examples/react-loader.js
+2
@@ -9,6 +9,7 @@
9
10
var REACT_PATH = '../../build/react.js';
11
var DOM_PATH = '../../build/react-dom.js';
12
+var BABEL_PATH = 'https://cdnjs.cloudflare.com/ajax/libs/babel-standalone/6.19.0/babel.js'
13
14
function parseQuery(qstr) {
15
var query = {};
@@ -34,6 +35,7 @@ if (version !== 'local') {
35
36
console.log('Loading ' + version);
37
38
+document.write("\<script src='" + BABEL_PATH + "'\>\</script\>");
39
document.write("\<script src='" + REACT_PATH + "'\>\</script\>");
40
41
// Versions earlier than 14 do not use ReactDOM
examples/test.html
+52
-21
@@ -7,6 +7,12 @@
7
<title>React Browser Sandbox</title>
8
9
<style>
10
+ *,
11
+ *:before,
12
+ *:after {
13
+ box-sizing: border-box;
14
+ }
15
+
16
body {
17
margin: 0;
18
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif;
@@ -21,15 +27,19 @@
27
}
28
29
.header__inner {
30
+ display: table;
31
max-width: 1000px;
32
margin: 0 auto;
33
overflow: hidden;
34
+ text-align: center;
35
+ width: 100%;
36
}
37
38
.header__logo {
39
color: #efefef;
31
- display: inline-block;
40
+ display: table-cell;
41
vertical-align: middle;
42
+ white-space: nowrap;
43
}
44
45
.header__logo img {
@@ -38,11 +48,11 @@
48
vertical-align: middle;
49
}
50
41
- .header select {
42
- display: inline-block;
43
- float: right;
44
- margin: 8px 0;
51
+ .header-controls {
52
+ display: table-cell;
53
+ text-align: right;
54
vertical-align: middle;
55
+ width: 100%;
56
}
57
58
iframe {
@@ -50,7 +60,6 @@
60
height: 98%;
61
height: calc(100vh - 52px);
62
margin: 0 auto;
53
- max-width: 1000px;
63
width: 100%;
64
}
65
@@ -67,16 +76,25 @@
76
<header class="header">
77
<form method="GET" class="header__inner" id="form">
78
<span class="header__logo">
70
- <img src="https://facebook.github.io/react/img/logo.svg" alt="React Browser Sandbox" width="32" height="32" />
79
+ <img src="https://facebook.github.io/react/img/logo.svg" alt="" width="32" height="32" />
80
React Sandbox
81
</span>
82
74
- <label for="react_version">
75
- <span class="sr-only">Select a version to test</span>
76
- <select id="react_version" name="version">
77
- <option value="local">Local</option>
78
- </select>
79
- </label>
83
+ <div class="header-controls">
84
+ <label for="example">
85
+ <span class="sr-only">Select an example</span>
86
+ <select id="example" name="example">
87
+ <option value="./inputs/index.html">Inputs</option>
88
+ </select>
89
+ </label>
90
+
91
+ <label for="react_version">
92
+ <span class="sr-only">Select a version to test</span>
93
+ <select id="react_version" name="version">
94
+ <option value="local">Local</option>
95
+ </select>
96
+ </label>
97
+ </div>
98
</form>
99
</header>
100
@@ -84,19 +102,20 @@
102
103
<script>
104
var frame = document.querySelector('#frame');
87
- var form = document.querySelector('#form');
105
+ var form = document.querySelector('#form');
106
var select = document.querySelector("#react_version");
89
-
90
- frame.src = "./basic/index.html?" + window.location.search;
91
-
92
- form.addEventListener('change', function() {
93
- form.submit();
94
- });
107
+ var example = document.querySelector('#example');
108
109
function getVersion () {
110
var match = window.location.search.match(/version\=(.*?)($|&)/);
111
99
- return match ? match[1] : select.value;
112
+ return unescape(match ? match[1] : select.value);
113
+ }
114
+
115
+ function getExample () {
116
+ var match = window.location.search.match(/example\=(.*?)($|&)/);
117
+
118
+ return unescape(match ? match[1] : example.value);
119
}
120
121
/**
@@ -138,6 +157,18 @@
157
request.send();
158
}
159
160
+ /**
161
+ * Update the UI with current selections
162
+ */
163
+
164
+ frame.src = getExample() + '?' + window.location.search;
165
+
166
+ example.value = getExample();
167
+
168
+ form.addEventListener('change', function() {
169
+ form.submit();
170
+ });
171
+
172
if ('options' in sessionStorage) {
173
addOptions(sessionStorage.options);
174
} else {