fix(graphql-playground-react): side tabs doesn't appear

This commit fixes the following bug: side tabs doesn't appear when GraphQLEditor component isn't updated

Author: yoshiakis

packages/graphql-playground-react/src/components/Playground/EditorWrapper.tsx

@@ -904,12 +904,24 @@ const GraphqlContainer = styled.div`
   width: 100%;
 `
 
-interface Props {
-  setRef?: (ref: any) => void
-}
+export class Container extends React.PureComponent {
+  private graphqlContainer
+
+  render() {
+    return (
+      <GraphqlContainer ref={this.setGraphqlContainer}>
+        {this.props.children}
+      </GraphqlContainer>
+    )
+  }
 
-export const Container: React.SFC<Props> = ({ children, setRef }) => (
-  <GraphqlContainer ref={setRef}>{children}</GraphqlContainer>
-)
+  getWidth = () => {
+    return this.graphqlContainer.offsetWidth
+  }
+
+  private setGraphqlContainer = ref => {
+    this.graphqlContainer = ref
+  }
+}
 
 export default Wrapper

packages/graphql-playground-react/src/components/Playground/ExplorerTabs/SideTabs.tsx

@@ -6,7 +6,6 @@ import { getLeft } from 'graphiql/dist/utility/elementPosition'
 import {
   addStack,
   toggleDocs,
-  changeWidthDocs,
   changeKeyMove,
   setDocsVisible,
 } from '../../../state/docs/actions'
@@ -40,12 +39,14 @@ export interface Props {
   sessionId: string
   children: Array<React.ReactElement<any>>
   maxWidth: number
+  setWidth: (props?: any) => any
+  setActiveContentRef: (ref: any) => void
 }
 
 export interface SideTabContentProps {
   schema: GraphQLSchema
   sessionId: string
-  setWidth: (props: any) => any
+  setWidth: (props?: any) => any
 }
 
 export interface State {
@@ -58,7 +59,6 @@ class SideTabs extends React.Component<
   State
 > {
   ref
-  public activeContentComponent: any // later React.Component<...>
   private refContentContainer: any
   private clientX: number = 0
   private clientY: number = 0
@@ -67,27 +67,6 @@ class SideTabs extends React.Component<
     ;(window as any).d = this
   }
 
-  setWidth = (props: any = this.props) => {
-    if (!this.activeContentComponent) {
-      return
-    }
-    if (!this.props.docs.docsOpen) {
-      return
-    }
-    requestAnimationFrame(() => {
-      const width = this.activeContentComponent.getWidth(props)
-      this.props.changeWidthDocs(
-        props.sessionId,
-        Math.min(width, this.props.maxWidth),
-      )
-    })
-  }
-  setActiveContentRef = ref => {
-    if (ref) {
-      this.activeContentComponent = ref.getWrappedInstance()
-    }
-  }
-
   componentDidUpdate(prevProps) {
     if (!prevProps.docs.activeTabIdx && this.props.docs.activeTabIdx) {
       this.props.setDocsVisible(
@@ -99,7 +78,7 @@ class SideTabs extends React.Component<
     if (prevProps.activeTabIdx && !this.props.docs.activeTabIdx) {
       this.props.setDocsVisible(this.props.sessionId, false)
     }
-    this.setWidth()
+    this.props.setWidth()
     if (
       this.props.docs.activeTabIdx !== prevProps.docs.activeTabIdx &&
       this.refContentContainer
@@ -112,7 +91,7 @@ class SideTabs extends React.Component<
     if (!this.props.docs.activeTabIdx) {
       this.props.setDocsVisible(this.props.sessionId, false)
     }
-    return this.setWidth()
+    return this.props.setWidth()
   }
 
   render() {
@@ -149,8 +128,8 @@ class SideTabs extends React.Component<
           {activeTab &&
             React.cloneElement(activeTab.props.children, {
               ...activeTab.props,
-              ref: this.setActiveContentRef,
-              setWidth: this.setWidth,
+              ref: this.props.setActiveContentRef,
+              setWidth: this.props.setWidth,
             })}
         </TabContentContainer>
       </Tabs>
@@ -168,7 +147,7 @@ class SideTabs extends React.Component<
   private handleTabClick = idx => () => {
     if (this.props.docs.activeTabIdx === idx) {
       this.props.setDocsVisible(this.props.sessionId, false)
-      return this.setWidth()
+      return this.props.setWidth()
     }
     if (this.props.docs.activeTabIdx !== idx) {
       this.props.setDocsVisible(
@@ -177,10 +156,10 @@ class SideTabs extends React.Component<
         this.props.docs.activeTabIdx,
       )
       this.props.setDocsVisible(this.props.sessionId, true, idx)
-      return this.setWidth()
+      return this.props.setWidth()
     } else {
       this.props.setDocsVisible(this.props.sessionId, true, idx)
-      return this.setWidth()
+      return this.props.setWidth()
     }
   }
 
@@ -270,7 +249,6 @@ const mapDispatchToProps = dispatch =>
     {
       addStack,
       toggleDocs,
-      changeWidthDocs,
       changeKeyMove,
       setDocsVisible,
     },

packages/graphql-playground-react/src/components/Playground/GraphQLEditor.tsx

@@ -66,6 +66,8 @@ import {
   fetchSchema,
 } from '../../state/sessions/actions'
 import { ResponseRecord } from '../../state/sessions/reducers'
+import { getDocsOpen } from '../../state/docs/selectors'
+import { changeWidthDocs } from '../../state/docs/actions'
 
 /**
  * The top-level React component for GraphQLEditor, intended to encompass the entire
@@ -94,7 +96,9 @@ export interface ReduxProps {
   toggleVariables: () => void
   setEditorFlex: (flex: number) => void
   stopQuery: (sessionId: string) => void
+  changeWidthDocs: (sessionId: string, width: number) => void
   navStack: any[]
+  docsOpen: boolean
   // sesion props
   queryRunning: boolean
   responses: List<ResponseRecord>
@@ -140,6 +144,7 @@ class GraphQLEditor extends React.PureComponent<Props & ReduxProps> {
   private queryVariablesRef
   private httpHeadersRef
   private containerComponent
+  private activeSideTabContent
 
   componentDidMount() {
     // Ensure a form of a schema exists (including `null`) and
@@ -167,7 +172,7 @@ class GraphQLEditor extends React.PureComponent<Props & ReduxProps> {
 
   render() {
     return (
-      <Container setRef={this.setContainerComponent}>
+      <Container ref={this.setContainerComponent}>
         <EditorWrapper>
           <TopBar
             shareEnabled={this.props.shareEnabled}
@@ -265,23 +270,25 @@ class GraphQLEditor extends React.PureComponent<Props & ReduxProps> {
             </ResultWrap>
           </EditorBar>
         </EditorWrapper>
-        {this.containerComponent && (
-          <SideTabs maxWidth={this.containerComponent.offsetWidth - 86}>
-            <SideTab label="Docs" activeColor="green" tabWidth="49px">
-              <GraphDocs
-                schema={this.props.schema}
-                ref={this.setDocExplorerRef}
-              />
-            </SideTab>
-            <SideTab label="Schema" activeColor="blue" tabWidth="65px">
-              <SDLView
-                schema={this.props.schema}
-                ref={this.setSchemaExplorerRef}
-                sessionId={this.props.sessionId}
-              />
-            </SideTab>
-          </SideTabs>
-        )}
+        <SideTabs
+          setActiveContentRef={this.setSideTabActiveContentRef}
+          setWidth={this.setDocsWidth}
+        >
+          <SideTab label="Docs" activeColor="green" tabWidth="49px">
+            <GraphDocs
+              schema={this.props.schema}
+              ref={this.setDocExplorerRef}
+            />
+          </SideTab>
+          <SideTab label="Schema" activeColor="blue" tabWidth="65px">
+            <SDLView
+              schema={this.props.schema}
+              ref={this.setSchemaExplorerRef}
+              sessionId={this.props.sessionId}
+            />
+          </SideTab>
+        </SideTabs>
+        }
       </Container>
     )
   }
@@ -343,6 +350,12 @@ class GraphQLEditor extends React.PureComponent<Props & ReduxProps> {
     }
   }
 
+  setSideTabActiveContentRef = ref => {
+    if (ref) {
+      this.activeSideTabContent = ref.getWrappedInstance()
+    }
+  }
+
   /**
    * Inspect the query, automatically filling in selection sets for non-leaf
    * fields which do not yet have them.
@@ -565,6 +578,20 @@ class GraphQLEditor extends React.PureComponent<Props & ReduxProps> {
       }
     }
   }
+
+  private setDocsWidth = (props: any = this.props) => {
+    if (!this.activeSideTabContent) {
+      return
+    }
+    if (!this.props.docsOpen) {
+      return
+    }
+    requestAnimationFrame(() => {
+      const width = this.activeSideTabContent.getWidth()
+      const maxWidth = this.containerComponent.getWidth() - 86
+      this.props.changeWidthDocs(props.sessionId, Math.min(width, maxWidth))
+    })
+  }
 }
 
 const mapStateToProps = createStructuredSelector({
@@ -586,6 +613,7 @@ const mapStateToProps = createStructuredSelector({
   operationName: getOperationName,
   headersCount: getHeadersCount,
   sessionId: getSelectedSessionIdFromRoot,
+  docsOpen: getDocsOpen,
 })
 
 export default // TODO fix redux types
@@ -605,6 +633,7 @@ connect<any, any, any>(
     setEditorFlex,
     toggleVariables,
     fetchSchema,
+    changeWidthDocs,
   },
   null,
   {

packages/graphql-playground-react/src/state/docs/selectors.ts

@@ -13,3 +13,6 @@ export const getSessionDocsState = createSelector(
 export const getSessionDocs = createSelector([getSessionDocsState], state => {
   return state.toJS()
 })
+export const getDocsOpen = createSelector([getSessionDocsState], state => {
+  return state.get('docsOpen')
+})