fix(graphql-playground-react): Replaced triangle Icon component with React SVG component

Author: timsuchanek

packages/graphql-playground-react/src/components/Icons/Triangle.tsx

@@ -0,0 +1,19 @@
+import * as React from 'react'
+
+export const Triangle = () => (
+  <svg
+    width="6px"
+    height="7px"
+    viewBox="40 0 6 7"
+    version="1.1"
+    xmlns="http://www.w3.org/2000/svg"
+  >
+    <polygon
+      id="Triangle"
+      stroke="none"
+      fill="rgba(0, 0, 0, .2)"
+      fillRule="evenodd"
+      points="40 7 40 0 46 3.5"
+    />
+  </svg>
+)

packages/graphql-playground-react/src/components/Playground/DocExplorer/GraphDocs.tsx

@@ -215,39 +215,41 @@ class GraphDocs extends React.Component<
           onMouseDown={this.handleDocsResizeStart}
         />
         <div className="doc-explorer-gradient" />
-        <div
-          className="doc-explorer"
-          onKeyDown={this.handleKeyDown}
-          onMouseMove={this.handleMouseMove}
-          tabIndex={0}
-          ref={this.setDocExplorerRef}
-        >
-          <div className="doc-explorer-container">
-            {emptySchema && <ColumnDoc>{emptySchema}</ColumnDoc>}
-            {schema && (
-              <RootColumn
-                schema={schema}
-                width={this.state.widthMap.root || columnWidth - 1}
-                searchValue={this.state.searchValue}
-                handleSearch={this.handleSearch}
-                sessionId={this.props.sessionId}
-              />
-            )}
-            {navStack.map((stack, index) => (
-              <ColumnDoc
-                key={index}
-                width={this.state.widthMap[stack.field.path] || columnWidth}
-              >
-                <FieldDoc
+        {docsOpen && (
+          <div
+            className="doc-explorer"
+            onKeyDown={this.handleKeyDown}
+            onMouseMove={this.handleMouseMove}
+            tabIndex={0}
+            ref={this.setDocExplorerRef}
+          >
+            <div className="doc-explorer-container">
+              {emptySchema && <ColumnDoc>{emptySchema}</ColumnDoc>}
+              {schema && (
+                <RootColumn
                   schema={schema}
-                  field={stack.field}
-                  level={index + 1}
+                  width={this.state.widthMap.root || columnWidth - 1}
+                  searchValue={this.state.searchValue}
+                  handleSearch={this.handleSearch}
                   sessionId={this.props.sessionId}
                 />
-              </ColumnDoc>
-            ))}
+              )}
+              {navStack.map((stack, index) => (
+                <ColumnDoc
+                  key={index}
+                  width={this.state.widthMap[stack.field.path] || columnWidth}
+                >
+                  <FieldDoc
+                    schema={schema}
+                    field={stack.field}
+                    level={index + 1}
+                    sessionId={this.props.sessionId}
+                  />
+                </ColumnDoc>
+              ))}
+            </div>
           </div>
-        </div>
+        )}
       </div>
     )
   }
@@ -261,7 +263,7 @@ class GraphDocs extends React.Component<
   }
 
   private handleToggleDocs = () => {
-    if (!this.props.docsOpen) {
+    if (!this.props.docsOpen && this.refDocExplorer) {
       this.refDocExplorer.focus()
     }
     this.props.toggleDocs(this.props.sessionId)

packages/graphql-playground-react/src/components/Playground/DocExplorer/TypeLink.tsx

@@ -3,9 +3,9 @@ import * as cx from 'classnames'
 import { bindActionCreators } from 'redux'
 import { connect } from 'react-redux'
 import { GraphQLList, GraphQLNonNull, isType } from 'graphql'
-import { Icon } from 'graphcool-styles'
 import ArgumentInline from './ArgumentInline'
 import { addStack } from '../../../actions/graphiql-docs'
+import { Triangle } from '../../Icons/Triangle'
 
 interface ReduxProps {
   keyMove: boolean
@@ -155,7 +155,8 @@ class TypeLink extends React.Component<
           .doc-category-icon {
             @p: .absolute;
             right: 10px;
-            top: calc(50% - 4px);
+            top: 50%;
+            transform: translateY(-50%);
           }
         `}</style>
         <style jsx={true} global={true}>{`
@@ -208,12 +209,7 @@ class TypeLink extends React.Component<
         <span className="type-name">{renderType(type.type || type)}</span>
         {clickable && (
           <span className="doc-category-icon">
-            <Icon
-              src={require('graphcool-styles/icons/fill/triangle.svg')}
-              color="rgba(0, 0, 0, .2)"
-              width={6}
-              height={7}
-            />
+            <Triangle />
           </span>
         )}
         {afterNode && ' '}

packages/graphql-playground-react/src/components/PlaygroundStorage.ts

@@ -172,11 +172,17 @@ export default class PlaygroundStorage {
   }
 
   public setItem(key: string, value: string) {
+    if (!this.project.data) {
+      this.project.data = {}
+    }
     this.project.data[key] = value
   }
 
   public getItem(key: string) {
-    return this.project.data[key]
+    if (this.project && this.project.data) {
+      return this.project.data[key]
+    }
+    return null
   }
 
   public saveProject() {