Make toggleable test cases

facebook · Dec 17, 2016 · 1a09655 · 1a09655
1 parent 1a6be1b
commit 1a09655
Show file tree

Hide file tree

Showing 4 changed files with 181 additions and 21 deletions.
diff --git a/examples/inputs/README.md b/examples/inputs/README.md
@@ -0,0 +1,3 @@
+# Input Test Case
+
+More information around the history of inputs could go here.
diff --git a/examples/inputs/index.html b/examples/inputs/index.html
@@ -0,0 +1,124 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="utf-8">
+
+    <title>Inputs</title>
+
+    <style>
+      body {
+        font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif;
+      }
+
+      label {
+        display: block;
+        text-transform: uppercase;
+        letter-spacing: 0.01em;
+        font-size: 12px;
+        margin-bottom: 4px;
+      }
+
+      h1 {
+        text-align: center;
+      }
+
+      .field {
+        padding: 8px;
+      }
+
+      form {
+        display: flex;
+        max-width: 900px;
+        margin: 0 auto;
+        width: 100%;
+      }
+
+      fieldset {
+        border: 1px solid #aaa;
+        padding: 16px;
+        flex-grow: 1;
+        flex-basis: 50%;
+      }
+    </style>
+  </head>
+  <body>
+    <div id="container">Loading...</div>
+
+    <script src="../react-loader.js"></script>
+
+    <script type="text/babel">
+      var Inputs = React.createClass({
+
+        getInitialState() {
+          return {
+            color: "#ffaaee"
+          }
+        },
+
+        renderControlled(type) {
+          let id = `controlled_${type}`
+
+          let onChange = e => {
+            let value = e.target.value
+
+            if (type === 'number') {
+              value = value == '' ? '' : parseFloat(value, 10) || 0
+            }
+
+            this.setState({
+              [type] : value
+            })
+          }
+
+          let state = this.state[type] || ''
+
+          return (
+            <div key={type} className="field">
+              <label htmlFor={id}>{type}</label>
+              <input id={id} type={type} value={state} onChange={onChange} />
+              &nbsp; &rarr; {JSON.stringify(state)}
+            </div>
+          )
+        },
+
+        renderUncontrolled(type) {
+          let id = `uncontrolled_${type}`
+
+          return (
+            <div key={type} className="field">
+              <label htmlFor={id}>{type}</label>
+              <input id={id} type={type} />
+            </div>
+          )
+        },
+
+        render() {
+          // https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input
+          let types = [
+            'text', 'email', 'number', 'url', 'tel',
+            'color', 'date', 'datetime-local',
+            'time', 'month', 'week', 'range', 'password'
+          ]
+
+          return (
+            <div>
+              <h1>Input Kitchen Sink</h1>
+              <form onSubmit={e=>e.preventDefault()}>
+                <fieldset>
+                  <legend>Controlled</legend>
+                  {types.map(this.renderControlled)}
+                </fieldset>
+                <fieldset>
+                  <legend>Uncontrolled</legend>
+                  {types.map(this.renderUncontrolled)}
+                </fieldset>
+              </form>
+            </div>
+          )
+        }
+      })
+
+      ReactDOM.render(<Inputs />, document.getElementById('container'))
+    </script>
+  </body>
+</html>
diff --git a/examples/react-loader.js b/examples/react-loader.js
@@ -9,6 +9,7 @@
 
 var REACT_PATH = '../../build/react.js';
 var DOM_PATH = '../../build/react-dom.js';
+var BABEL_PATH = 'https://cdnjs.cloudflare.com/ajax/libs/babel-standalone/6.19.0/babel.js'
 
 function parseQuery(qstr) {
   var query = {};
@@ -34,6 +35,7 @@ if (version !== 'local') {
 
 console.log('Loading ' + version);
 
+document.write("\<script src='" + BABEL_PATH + "'\>\</script\>");
 document.write("\<script src='" + REACT_PATH + "'\>\</script\>");
 
 // Versions earlier than 14 do not use ReactDOM

diff --git a/examples/test.html b/examples/test.html
@@ -7,6 +7,12 @@
     <title>React Browser Sandbox</title>
 
     <style>
+      *,
+      *:before,
+      *:after {
+        box-sizing: border-box;
+      }
+
       body {
         margin: 0;
         font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif;
@@ -21,15 +27,19 @@
       }
 
       .header__inner {
+        display: table;
         max-width: 1000px;
         margin: 0 auto;
         overflow: hidden;
+        text-align: center;
+        width: 100%;
       }
 
       .header__logo {
         color: #efefef;
-        display: inline-block;
+        display: table-cell;
         vertical-align: middle;
+        white-space: nowrap;
       }
 
       .header__logo img {
@@ -38,19 +48,18 @@
         vertical-align: middle;
       }
 
-      .header select {
-        display: inline-block;
-        float: right;
-        margin: 8px 0;
+      .header-controls {
+        display: table-cell;
+        text-align: right;
         vertical-align: middle;
+        width: 100%;
       }
 
       iframe {
         display: block;
         height: 98%;
         height: calc(100vh - 52px);
         margin: 0 auto;
-        max-width: 1000px;
         width: 100%;
       }
 
@@ -67,36 +76,46 @@
     <header class="header">
       <form method="GET" class="header__inner" id="form">
         <span class="header__logo">
-          <img src="https://facebook.github.io/react/img/logo.svg" alt="React Browser Sandbox" width="32" height="32" />
+          <img src="https://facebook.github.io/react/img/logo.svg" alt="" width="32" height="32" />
           React Sandbox
         </span>
 
-        <label for="react_version">
-          <span class="sr-only">Select a version to test</span>
-          <select id="react_version" name="version">
-            <option value="local">Local</option>
-          </select>
-        </label>
+        <div class="header-controls">
+          <label for="example">
+            <span class="sr-only">Select an example</span>
+            <select id="example" name="example">
+              <option value="./inputs/index.html">Inputs</option>
+            </select>
+          </label>
+
+          <label for="react_version">
+            <span class="sr-only">Select a version to test</span>
+            <select id="react_version" name="version">
+              <option value="local">Local</option>
+            </select>
+          </label>
+        </div>
       </form>
     </header>
 
     <iframe id="frame" frameborder="0"></iframe>
 
     <script>
       var frame = document.querySelector('#frame');
-      var form  = document.querySelector('#form');
+      var form = document.querySelector('#form');
       var select = document.querySelector("#react_version");
-
-      frame.src = "./basic/index.html?" + window.location.search;
-
-      form.addEventListener('change', function() {
-        form.submit();
-      });
+      var example = document.querySelector('#example');
 
       function getVersion () {
         var match = window.location.search.match(/version\=(.*?)($|&)/);
 
-        return match ? match[1] : select.value;
+        return unescape(match ? match[1] : select.value);
+      }
+
+      function getExample () {
+        var match = window.location.search.match(/example\=(.*?)($|&)/);
+
+        return unescape(match ? match[1] : example.value);
       }
 
       /**
@@ -138,6 +157,18 @@
         request.send();
       }
 
+      /**
+       * Update the UI with current selections
+       */
+
+      frame.src = getExample() + '?' + window.location.search;
+
+      example.value = getExample();
+
+      form.addEventListener('change', function() {
+        form.submit();
+      });
+
       if ('options' in sessionStorage) {
         addOptions(sessionStorage.options);
       } else {