diff --git a/packages/graphql-playground-react/src/components/Playground/EditorWrapper.tsx b/packages/graphql-playground-react/src/components/Playground/EditorWrapper.tsx
index 971e8d173..52054c505 100644
--- a/packages/graphql-playground-react/src/components/Playground/EditorWrapper.tsx
+++ b/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 (
+
+ {this.props.children}
+
+ )
+ }
-export const Container: React.SFC = ({ children, setRef }) => (
- {children}
-)
+ getWidth = () => {
+ return this.graphqlContainer.offsetWidth
+ }
+
+ private setGraphqlContainer = ref => {
+ this.graphqlContainer = ref
+ }
+}
export default Wrapper
diff --git a/packages/graphql-playground-react/src/components/Playground/ExplorerTabs/SideTabs.tsx b/packages/graphql-playground-react/src/components/Playground/ExplorerTabs/SideTabs.tsx
index 759d8a942..87a4bd99e 100644
--- a/packages/graphql-playground-react/src/components/Playground/ExplorerTabs/SideTabs.tsx
+++ b/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>
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,
})}
@@ -161,11 +140,6 @@ class SideTabs extends React.Component<
this.ref = ref
}
- public showDocFromType = type => {
- this.props.setDocsVisible(this.props.sessionId, true, 0)
- this.activeContentComponent.showDocFromType(type)
- }
-
private setContentContainerRef = ref => {
this.refContentContainer = ref
}
@@ -173,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(
@@ -182,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()
}
}
@@ -275,7 +249,6 @@ const mapDispatchToProps = dispatch =>
{
addStack,
toggleDocs,
- changeWidthDocs,
changeKeyMove,
setDocsVisible,
},
diff --git a/packages/graphql-playground-react/src/components/Playground/GraphQLEditor.tsx b/packages/graphql-playground-react/src/components/Playground/GraphQLEditor.tsx
index ee1810aba..2b0687d93 100644
--- a/packages/graphql-playground-react/src/components/Playground/GraphQLEditor.tsx
+++ b/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
@@ -140,6 +144,7 @@ class GraphQLEditor extends React.PureComponent {
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 {
render() {
return (
-
+
{
- {this.containerComponent && (
-
-
-
-
-
-
-
-
- )}
+
+
+
+
+
+
+
+
+ }
)
}
@@ -343,6 +350,12 @@ class GraphQLEditor extends React.PureComponent {
}
}
+ 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 {
}
}
}
+
+ 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(
setEditorFlex,
toggleVariables,
fetchSchema,
+ changeWidthDocs,
},
null,
{
diff --git a/packages/graphql-playground-react/src/state/docs/selectors.ts b/packages/graphql-playground-react/src/state/docs/selectors.ts
index d7eab395e..e5627dea4 100644
--- a/packages/graphql-playground-react/src/state/docs/selectors.ts
+++ b/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')
+})