Inputs<\/title>\n+\n+ <style>\n+ body {\n+ font-family: -apple-system, BlinkMacSystemFont, \"Segoe UI\", \"Roboto\", \"Oxygen\", \"Ubuntu\", \"Cantarell\", \"Fira Sans\", \"Droid Sans\", \"Helvetica Neue\", sans-serif;\n+ }\n+\n+ label {\n+ display: block;\n+ text-transform: uppercase;\n+ letter-spacing: 0.01em;\n+ font-size: 12px;\n+ margin-bottom: 4px;\n+ }\n+\n+ h1 {\n+ text-align: center;\n+ }\n+\n+ .field {\n+ padding: 8px;\n+ }\n+\n+ form {\n+ display: flex;\n+ max-width: 900px;\n+ margin: 0 auto;\n+ width: 100%;\n+ }\n+\n+ fieldset {\n+ border: 1px solid #aaa;\n+ padding: 16px;\n+ flex-grow: 1;\n+ flex-basis: 50%;\n+ }\n+ <\/style>\n+ <\/head>\n+ <body>\n+ <div id=\"container\">Loading...<\/div>\n+\n+ <script src=\"..\/react-loader.js\"><\/script>\n+\n+ <script type=\"text\/babel\">\n+ var Inputs = React.createClass({\n+\n+ getInitialState() {\n+ return {\n+ color: \"#ffaaee\"\n+ }\n+ },\n+\n+ renderControlled(type) {\n+ let id = `controlled_${type}`\n+\n+ let onChange = e => {\n+ let value = e.target.value\n+\n+ if (type === 'number') {\n+ value = value == '' ? '' : parseFloat(value, 10) || 0\n+ }\n+\n+ this.setState({\n+ [type] : value\n+ })\n+ }\n+\n+ let state = this.state[type] || ''\n+\n+ return (\n+ <div key={type} className=\"field\">\n+ <label htmlFor={id}>{type}<\/label>\n+ <input id={id} type={type} value={state} onChange={onChange} \/>\n+ → {JSON.stringify(state)}\n+ <\/div>\n+ )\n+ },\n+\n+ renderUncontrolled(type) {\n+ let id = `uncontrolled_${type}`\n+\n+ return (\n+ <div key={type} className=\"field\">\n+ <label htmlFor={id}>{type}<\/label>\n+ <input id={id} type={type} \/>\n+ <\/div>\n+ )\n+ },\n+\n+ render() {\n+ \/\/ https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/HTML\/Element\/input\n+ let types = [\n+ 'text', 'email', 'number', 'url', 'tel',\n+ 'color', 'date', 'datetime-local',\n+ 'time', 'month', 'week', 'range', 'password'\n+ ]\n+\n+ return (\n+ <div>\n+ <h1>Input Kitchen Sink<\/h1>\n+ <form onSubmit={e=>e.preventDefault()}>\n+ <fieldset>\n+ <legend>Controlled<\/legend>\n+ {types.map(this.renderControlled)}\n+ <\/fieldset>\n+ <fieldset>\n+ <legend>Uncontrolled<\/legend>\n+ {types.map(this.renderUncontrolled)}\n+ <\/fieldset>\n+ <\/form>\n+ <\/div>\n+ )\n+ }\n+ })\n+\n+ ReactDOM.render(<Inputs \/>, document.getElementById('container'))\n+ <\/script>\n+ <\/body>\n+<\/html>\ndiff --git a\/examples\/react-loader.js b\/examples\/react-loader.js\nindex 5d9c5f48dd..3b69c42dc6 100644\n--- a\/examples\/react-loader.js\n+++ b\/examples\/react-loader.js\n@@ -9,6 +9,7 @@\n \n var REACT_PATH = '..\/..\/build\/react.js';\n var DOM_PATH = '..\/..\/build\/react-dom.js';\n+var BABEL_PATH = 'https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/babel-standalone\/6.19.0\/babel.js'\n \n function parseQuery(qstr) {\n var query = {};\n@@ -34,6 +35,7 @@ if (version !== 'local') {\n \n console.log('Loading ' + version);\n \n+document.write(\"\\<script src='\" + BABEL_PATH + \"'\\>\\<\/script\\>\");\n document.write(\"\\<script src='\" + REACT_PATH + \"'\\>\\<\/script\\>\");\n \n \/\/ Versions earlier than 14 do not use ReactDOM\ndiff --git a\/examples\/test.html b\/examples\/test.html\nindex 732a212027..5dd667c676 100644\n--- a\/examples\/test.html\n+++ b\/examples\/test.html\n@@ -7,6 +7,12 @@\n <title>React Browser Sandbox<\/title>\n \n <style>\n+ *,\n+ *:before,\n+ *:after {\n+ box-sizing: border-box;\n+ }\n+\n body {\n margin: 0;\n font-family: -apple-system, BlinkMacSystemFont, \"Segoe UI\", \"Roboto\", \"Oxygen\", \"Ubuntu\", \"Cantarell\", \"Fira Sans\", \"Droid Sans\", \"Helvetica Neue\", sans-serif;\n@@ -21,15 +27,19 @@\n }\n \n .header__inner {\n+ display: table;\n max-width: 1000px;\n margin: 0 auto;\n overflow: hidden;\n+ text-align: center;\n+ width: 100%;\n }\n \n .header__logo {\n color: #efefef;\n- display: inline-block;\n+ display: table-cell;\n vertical-align: middle;\n+ white-space: nowrap;\n }\n \n .header__logo img {\n@@ -38,11 +48,11 @@\n vertical-align: middle;\n }\n \n- .header select {\n- display: inline-block;\n- float: right;\n- margin: 8px 0;\n+ .header-controls {\n+ display: table-cell;\n+ text-align: right;\n vertical-align: middle;\n+ width: 100%;\n }\n \n iframe {\n@@ -50,7 +60,6 @@\n height: 98%;\n height: calc(100vh - 52px);\n margin: 0 auto;\n- max-width: 1000px;\n width: 100%;\n }\n \n@@ -67,16 +76,25 @@\n <header class=\"header\">\n <form method=\"GET\" class=\"header__inner\" id=\"form\">\n <span class=\"header__logo\">\n- <img src=\"https:\/\/facebook.github.io\/react\/img\/logo.svg\" alt=\"React Browser Sandbox\" width=\"32\" height=\"32\" \/>\n+ <img src=\"https:\/\/facebook.github.io\/react\/img\/logo.svg\" alt=\"\" width=\"32\" height=\"32\" \/>\n React Sandbox\n <\/span>\n \n- <label for=\"react_version\">\n- <span class=\"sr-only\">Select a version to test<\/span>\n- <select id=\"react_version\" name=\"version\">\n- <option value=\"local\">Local<\/option>\n- <\/select>\n- <\/label>\n+ <div class=\"header-controls\">\n+ <label for=\"example\">\n+ <span class=\"sr-only\">Select an example<\/span>\n+ <select id=\"example\" name=\"example\">\n+ <option value=\".\/inputs\/index.html\">Inputs<\/option>\n+ <\/select>\n+ <\/label>\n+\n+ <label for=\"react_version\">\n+ <span class=\"sr-only\">Select a version to test<\/span>\n+ <select id=\"react_version\" name=\"version\">\n+ <option value=\"local\">Local<\/option>\n+ <\/select>\n+ <\/label>\n+ <\/div>\n <\/form>\n <\/header>\n \n@@ -84,19 +102,20 @@\n \n <script>\n var frame = document.querySelector('#frame');\n- var form = document.querySelector('#form');\n+ var form = document.querySelector('#form');\n var select = document.querySelector(\"#react_version\");\n-\n- frame.src = \".\/basic\/index.html?\" + window.location.search;\n-\n- form.addEventListener('change', function() {\n- form.submit();\n- });\n+ var example = document.querySelector('#example');\n \n function getVersion () {\n var match = window.location.search.match(\/version\\=(.*?)($|&)\/);\n \n- return match ? match[1] : select.value;\n+ return unescape(match ? match[1] : select.value);\n+ }\n+\n+ function getExample () {\n+ var match = window.location.search.match(\/example\\=(.*?)($|&)\/);\n+\n+ return unescape(match ? match[1] : example.value);\n }\n \n \/**\n@@ -138,6 +157,18 @@\n request.send();\n }\n \n+ \/**\n+ * Update the UI with current selections\n+ *\/\n+\n+ frame.src = getExample() + '?' + window.location.search;\n+\n+ example.value = getExample();\n+\n+ form.addEventListener('change', function() {\n+ form.submit();\n+ });\n+\n if ('options' in sessionStorage) {\n addOptions(sessionStorage.options);\n } else {\n","parents":["bbb643fd8d7b727c1a3c21468cb31f5df8a7318a"],"commit":{"shortRevision":"65d4795a1a","authorName":"Nathan Hunzaker","revision":"65d4795a1a49d14de230c21e755bc6fc088538a2","authoredAt":"2016-12-17T12:24:09-05:00","subject":"Make toggleable test cases","authorEmail":"nate.hunzaker@gmail.com"}}</article></body></html>

{"body":"","files":[{"status":"A","path":"examples\/inputs\/README.md"},{"status":"A","path":"examples\/inputs\/index.html"},{"status":"M","path":"examples\/react-loader.js"},{"status":"M","path":"examples\/test.html"}],"patch":"diff --git a\/examples\/inputs\/README.md b\/examples\/inputs\/README.md\nnew file mode 100644\nindex 0000000000..5c4055dca3\n--- \/dev\/null\n+++ b\/examples\/inputs\/README.md\n@@ -0,0 +1,3 @@\n+# Input Test Case\n+\n+More information around the history of inputs could go here.\ndiff --git a\/examples\/inputs\/index.html b\/examples\/inputs\/index.html\nnew file mode 100644\nindex 0000000000..b178ab9a02\n--- \/dev\/null\n+++ b\/examples\/inputs\/index.html\n@@ -0,0 +1,124 @@\n+\n+\n+ \n+ \n+\n+ Inputs<\/title>\n+\n+ <style>\n+ body {\n+ font-family: -apple-system, BlinkMacSystemFont, \"Segoe UI\", \"Roboto\", \"Oxygen\", \"Ubuntu\", \"Cantarell\", \"Fira Sans\", \"Droid Sans\", \"Helvetica Neue\", sans-serif;\n+ }\n+\n+ label {\n+ display: block;\n+ text-transform: uppercase;\n+ letter-spacing: 0.01em;\n+ font-size: 12px;\n+ margin-bottom: 4px;\n+ }\n+\n+ h1 {\n+ text-align: center;\n+ }\n+\n+ .field {\n+ padding: 8px;\n+ }\n+\n+ form {\n+ display: flex;\n+ max-width: 900px;\n+ margin: 0 auto;\n+ width: 100%;\n+ }\n+\n+ fieldset {\n+ border: 1px solid #aaa;\n+ padding: 16px;\n+ flex-grow: 1;\n+ flex-basis: 50%;\n+ }\n+ <\/style>\n+ <\/head>\n+ <body>\n+ <div id=\"container\">Loading...<\/div>\n+\n+ <script src=\"..\/react-loader.js\"><\/script>\n+\n+ <script type=\"text\/babel\">\n+ var Inputs = React.createClass({\n+\n+ getInitialState() {\n+ return {\n+ color: \"#ffaaee\"\n+ }\n+ },\n+\n+ renderControlled(type) {\n+ let id = `controlled_${type}`\n+\n+ let onChange = e => {\n+ let value = e.target.value\n+\n+ if (type === 'number') {\n+ value = value == '' ? '' : parseFloat(value, 10) || 0\n+ }\n+\n+ this.setState({\n+ [type] : value\n+ })\n+ }\n+\n+ let state = this.state[type] || ''\n+\n+ return (\n+ <div key={type} className=\"field\">\n+ <label htmlFor={id}>{type}<\/label>\n+ <input id={id} type={type} value={state} onChange={onChange} \/>\n+ → {JSON.stringify(state)}\n+ <\/div>\n+ )\n+ },\n+\n+ renderUncontrolled(type) {\n+ let id = `uncontrolled_${type}`\n+\n+ return (\n+ <div key={type} className=\"field\">\n+ <label htmlFor={id}>{type}<\/label>\n+ <input id={id} type={type} \/>\n+ <\/div>\n+ )\n+ },\n+\n+ render() {\n+ \/\/ https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/HTML\/Element\/input\n+ let types = [\n+ 'text', 'email', 'number', 'url', 'tel',\n+ 'color', 'date', 'datetime-local',\n+ 'time', 'month', 'week', 'range', 'password'\n+ ]\n+\n+ return (\n+ <div>\n+ <h1>Input Kitchen Sink<\/h1>\n+ <form onSubmit={e=>e.preventDefault()}>\n+ <fieldset>\n+ <legend>Controlled<\/legend>\n+ {types.map(this.renderControlled)}\n+ <\/fieldset>\n+ <fieldset>\n+ <legend>Uncontrolled<\/legend>\n+ {types.map(this.renderUncontrolled)}\n+ <\/fieldset>\n+ <\/form>\n+ <\/div>\n+ )\n+ }\n+ })\n+\n+ ReactDOM.render(<Inputs \/>, document.getElementById('container'))\n+ <\/script>\n+ <\/body>\n+<\/html>\ndiff --git a\/examples\/react-loader.js b\/examples\/react-loader.js\nindex 5d9c5f48dd..3b69c42dc6 100644\n--- a\/examples\/react-loader.js\n+++ b\/examples\/react-loader.js\n@@ -9,6 +9,7 @@\n \n var REACT_PATH = '..\/..\/build\/react.js';\n var DOM_PATH = '..\/..\/build\/react-dom.js';\n+var BABEL_PATH = 'https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/babel-standalone\/6.19.0\/babel.js'\n \n function parseQuery(qstr) {\n var query = {};\n@@ -34,6 +35,7 @@ if (version !== 'local') {\n \n console.log('Loading ' + version);\n \n+document.write(\"\\<script src='\" + BABEL_PATH + \"'\\>\\<\/script\\>\");\n document.write(\"\\<script src='\" + REACT_PATH + \"'\\>\\<\/script\\>\");\n \n \/\/ Versions earlier than 14 do not use ReactDOM\ndiff --git a\/examples\/test.html b\/examples\/test.html\nindex 732a212027..5dd667c676 100644\n--- a\/examples\/test.html\n+++ b\/examples\/test.html\n@@ -7,6 +7,12 @@\n <title>React Browser Sandbox<\/title>\n \n <style>\n+ *,\n+ *:before,\n+ *:after {\n+ box-sizing: border-box;\n+ }\n+\n body {\n margin: 0;\n font-family: -apple-system, BlinkMacSystemFont, \"Segoe UI\", \"Roboto\", \"Oxygen\", \"Ubuntu\", \"Cantarell\", \"Fira Sans\", \"Droid Sans\", \"Helvetica Neue\", sans-serif;\n@@ -21,15 +27,19 @@\n }\n \n .header__inner {\n+ display: table;\n max-width: 1000px;\n margin: 0 auto;\n overflow: hidden;\n+ text-align: center;\n+ width: 100%;\n }\n \n .header__logo {\n color: #efefef;\n- display: inline-block;\n+ display: table-cell;\n vertical-align: middle;\n+ white-space: nowrap;\n }\n \n .header__logo img {\n@@ -38,11 +48,11 @@\n vertical-align: middle;\n }\n \n- .header select {\n- display: inline-block;\n- float: right;\n- margin: 8px 0;\n+ .header-controls {\n+ display: table-cell;\n+ text-align: right;\n vertical-align: middle;\n+ width: 100%;\n }\n \n iframe {\n@@ -50,7 +60,6 @@\n height: 98%;\n height: calc(100vh - 52px);\n margin: 0 auto;\n- max-width: 1000px;\n width: 100%;\n }\n \n@@ -67,16 +76,25 @@\n <header class=\"header\">\n <form method=\"GET\" class=\"header__inner\" id=\"form\">\n <span class=\"header__logo\">\n- <img src=\"https:\/\/facebook.github.io\/react\/img\/logo.svg\" alt=\"React Browser Sandbox\" width=\"32\" height=\"32\" \/>\n+ <img src=\"https:\/\/facebook.github.io\/react\/img\/logo.svg\" alt=\"\" width=\"32\" height=\"32\" \/>\n React Sandbox\n <\/span>\n \n- <label for=\"react_version\">\n- <span class=\"sr-only\">Select a version to test<\/span>\n- <select id=\"react_version\" name=\"version\">\n- <option value=\"local\">Local<\/option>\n- <\/select>\n- <\/label>\n+ <div class=\"header-controls\">\n+ <label for=\"example\">\n+ <span class=\"sr-only\">Select an example<\/span>\n+ <select id=\"example\" name=\"example\">\n+ <option value=\".\/inputs\/index.html\">Inputs<\/option>\n+ <\/select>\n+ <\/label>\n+\n+ <label for=\"react_version\">\n+ <span class=\"sr-only\">Select a version to test<\/span>\n+ <select id=\"react_version\" name=\"version\">\n+ <option value=\"local\">Local<\/option>\n+ <\/select>\n+ <\/label>\n+ <\/div>\n <\/form>\n <\/header>\n \n@@ -84,19 +102,20 @@\n \n <script>\n var frame = document.querySelector('#frame');\n- var form = document.querySelector('#form');\n+ var form = document.querySelector('#form');\n var select = document.querySelector(\"#react_version\");\n-\n- frame.src = \".\/basic\/index.html?\" + window.location.search;\n-\n- form.addEventListener('change', function() {\n- form.submit();\n- });\n+ var example = document.querySelector('#example');\n \n function getVersion () {\n var match = window.location.search.match(\/version\\=(.*?)($|&)\/);\n \n- return match ? match[1] : select.value;\n+ return unescape(match ? match[1] : select.value);\n+ }\n+\n+ function getExample () {\n+ var match = window.location.search.match(\/example\\=(.*?)($|&)\/);\n+\n+ return unescape(match ? match[1] : example.value);\n }\n \n \/**\n@@ -138,6 +157,18 @@\n request.send();\n }\n \n+ \/**\n+ * Update the UI with current selections\n+ *\/\n+\n+ frame.src = getExample() + '?' + window.location.search;\n+\n+ example.value = getExample();\n+\n+ form.addEventListener('change', function() {\n+ form.submit();\n+ });\n+\n if ('options' in sessionStorage) {\n addOptions(sessionStorage.options);\n } else {\n","parents":["bbb643fd8d7b727c1a3c21468cb31f5df8a7318a"],"commit":{"shortRevision":"65d4795a1a","authorName":"Nathan Hunzaker","revision":"65d4795a1a49d14de230c21e755bc6fc088538a2","authoredAt":"2016-12-17T12:24:09-05:00","subject":"Make toggleable test cases","authorEmail":"nate.hunzaker@gmail.com"}}</article></body></html>

dillon1000/react

Files changed