From 493a0a15f915204364bdeb41e0740b99b5180088 Mon Sep 17 00:00:00 2001 From: Yoshi Sukeda <7870808+yoshiakis@users.noreply.github.com> Date: Mon, 1 Apr 2019 00:01:56 +0900 Subject: [PATCH 1/2] refactor(graphql-playground-react): remove unused method --- .../src/components/Playground/ExplorerTabs/SideTabs.tsx | 5 ----- 1 file changed, 5 deletions(-) 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..6d35d7c18 100644 --- a/packages/graphql-playground-react/src/components/Playground/ExplorerTabs/SideTabs.tsx +++ b/packages/graphql-playground-react/src/components/Playground/ExplorerTabs/SideTabs.tsx @@ -161,11 +161,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 } From f45fa6d1579c7a65093e373c67a0801b3160899c Mon Sep 17 00:00:00 2001 From: Yoshi Sukeda <7870808+yoshiakis@users.noreply.github.com> Date: Sat, 16 Mar 2019 15:47:36 +0900 Subject: [PATCH 2/2] 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 --- .../components/Playground/EditorWrapper.tsx | 24 +++++-- .../Playground/ExplorerTabs/SideTabs.tsx | 42 +++--------- .../components/Playground/GraphQLEditor.tsx | 65 ++++++++++++++----- .../src/state/docs/selectors.ts | 3 + 4 files changed, 78 insertions(+), 56 deletions(-) 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 6d35d7c18..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, })} @@ -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, }, 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') +})