Support for React v15

graphql · Mar 15, 2016 · d5f027a · d5f027a
1 parent 42317dd
commit d5f027a
Show file tree

Hide file tree

Showing 6 changed files with 15 additions and 10 deletions.
diff --git a/css/app.css b/css/app.css
@@ -162,7 +162,7 @@
 #graphiql-container .variable-editor {
   display: -webkit-flex;
   display:         flex;
-  height: 30px;
+  height: 29px;
   -webkit-flex-direction: column;
           flex-direction: column;
   position: relative;

diff --git a/example/index.html b/example/index.html
@@ -10,12 +10,15 @@
 <html>
   <head>
     <style>
-      html, body {
+      body {
         height: 100%;
         margin: 0;
         width: 100%;
         overflow: hidden;
       }
+      #graphiql {
+        height: 100vh;
+      }
     </style>
     <link rel="stylesheet" href="./graphiql.css" />
     <script src="//cdn.jsdelivr.net/fetch/0.9.0/fetch.min.js"></script>
@@ -24,7 +27,7 @@
     <script src="./graphiql.js"></script>
   </head>
   <body>
-    Loading...
+    <div id="graphiql">Loading...</div>
     <script>
 
       /**
@@ -117,7 +120,7 @@
           onEditVariables: onEditVariables,
           onEditOperationName: onEditOperationName
         }),
-        document.body
+        document.getElementById('graphiql')
       );
     </script>
   </body>

diff --git a/package.json b/package.json
@@ -60,8 +60,8 @@
   },
   "peerDependencies": {
     "graphql": "^0.4.16",
-    "react": "^0.14.0",
-    "react-dom": "^0.14.0"
+    "react": "^0.14.0 || ^15.0.0-rc",
+    "react-dom": "^0.14.0 || ^15.0.0-rc"
   },
   "devDependencies": {
     "babel": "5.8.23",

diff --git a/src/components/DocExplorer.js b/src/components/DocExplorer.js
@@ -448,7 +448,7 @@ class TypeDoc extends React.Component {
                   onClick={event => onClickField(field, type, event)}>
                   {field.name}
                 </a>
-                {argsDef && [ '(', <span>{argsDef}</span>, ')' ]}
+                {argsDef && [ '(', <span key="args">{argsDef}</span>, ')' ]}
                 {': '}
                 <TypeLink type={field.type} onClick={onClickType} />
               </div>

diff --git a/src/components/ExecuteButton.js b/src/components/ExecuteButton.js
@@ -43,6 +43,7 @@ export class ExecuteButton extends React.Component {
         <ul className="execute-options">
           {operations.map(operation =>
             <li
+              key={operation.name ? operation.name.value : '*'}
               className={operation === highlight && 'selected'}
               onMouseOver={() => this.setState({ highlight: operation })}
               onMouseOut={() => this.setState({ highlight: null })}

diff --git a/src/components/GraphiQL.js b/src/components/GraphiQL.js
@@ -204,11 +204,12 @@ export class GraphiQL extends React.Component {
       variables,
       operationName,
       response: props.response,
-      editorFlex: this._storageGet('editorFlex') || 1,
+      editorFlex: Number(this._storageGet('editorFlex')) || 1,
       variableEditorOpen: Boolean(variables),
-      variableEditorHeight: this._storageGet('variableEditorHeight') || 200,
+      variableEditorHeight:
+        Number(this._storageGet('variableEditorHeight')) || 200,
       docExplorerOpen: false,
-      docExplorerWidth: this._storageGet('docExplorerWidth') || 350,
+      docExplorerWidth: Number(this._storageGet('docExplorerWidth')) || 350,
       isWaitingForResponse: false,
       subscription: null,
       ...queryFacts