@@ -192,7 +192,7 @@ const LABEL = {
192192 newTab : 'New tab' ,
193193} ;
194194
195- export const GraphiQLInterface : FC < GraphiQLInterfaceProps > = ( {
195+ export function GraphiQLInterface ( {
196196 forcedTheme,
197197 isHeadersEditorEnabled = true ,
198198 defaultEditorToolsVisibility,
@@ -204,7 +204,7 @@ export const GraphiQLInterface: FC<GraphiQLInterfaceProps> = ({
204204 onEditHeaders,
205205 responseTooltip,
206206 showPersistHeadersSettings,
207- } ) => {
207+ } : GraphiQLInterfaceProps ) {
208208 const { addTab, moveTab, closeTab, changeTab, setVisiblePlugin } =
209209 useGraphiQLActions ( ) ;
210210 const {
@@ -228,7 +228,13 @@ export const GraphiQLInterface: FC<GraphiQLInterfaceProps> = ({
228228
229229 const PluginContent = visiblePlugin ?. content ;
230230
231- const pluginResize = useDragResize ( {
231+ const {
232+ hiddenElement : pluginHiddenElement ,
233+ setHiddenElement : setPluginHiddenElement ,
234+ firstRef : pluginFirstRef ,
235+ dragBarRef : pluginDragBarRef ,
236+ secondRef : pluginSecondRef ,
237+ } = useDragResize ( {
232238 defaultSizeRelation : 1 / 3 ,
233239 direction : 'horizontal' ,
234240 initiallyHidden : visiblePlugin ? undefined : 'first' ,
@@ -240,11 +246,21 @@ export const GraphiQLInterface: FC<GraphiQLInterfaceProps> = ({
240246 sizeThresholdSecond : 200 ,
241247 storageKey : 'docExplorerFlex' ,
242248 } ) ;
243- const editorResize = useDragResize ( {
249+ const {
250+ firstRef : editorFirstRef ,
251+ dragBarRef : editorDragBarRef ,
252+ secondRef : editorSecondRef ,
253+ } = useDragResize ( {
244254 direction : 'horizontal' ,
245255 storageKey : 'editorFlex' ,
246256 } ) ;
247- const editorToolsResize = useDragResize ( {
257+ const {
258+ hiddenElement : editorToolsHiddenElement ,
259+ setHiddenElement : setEditorToolsHiddenElement ,
260+ firstRef : editorToolsFirstRef ,
261+ dragBarRef : editorToolsDragBarRef ,
262+ secondRef : editorToolsSecondRef ,
263+ } = useDragResize ( {
248264 defaultSizeRelation : 3 ,
249265 direction : 'vertical' ,
250266 initiallyHidden : ( ( d : typeof defaultEditorToolsVisibility ) => {
@@ -306,22 +322,22 @@ export const GraphiQLInterface: FC<GraphiQLInterfaceProps> = ({
306322 ) ;
307323
308324 function onClickReference ( ) {
309- if ( pluginResize . hiddenElement === 'first' ) {
310- pluginResize . setHiddenElement ( null ) ;
325+ if ( pluginHiddenElement === 'first' ) {
326+ setPluginHiddenElement ( null ) ;
311327 }
312328 }
313329
314330 const handleToolsTabClick : ButtonHandler = event => {
315- if ( editorToolsResize . hiddenElement === 'second' ) {
316- editorToolsResize . setHiddenElement ( null ) ;
331+ if ( editorToolsHiddenElement === 'second' ) {
332+ setEditorToolsHiddenElement ( null ) ;
317333 }
318334 const tabName = event . currentTarget . dataset . name as 'variables' | 'headers' ;
319335 setActiveSecondaryEditor ( tabName ) ;
320336 } ;
321337
322338 const toggleEditorTools : ButtonHandler = ( ) => {
323- editorToolsResize . setHiddenElement (
324- editorToolsResize . hiddenElement === 'second' ? null : 'second' ,
339+ setEditorToolsHiddenElement (
340+ editorToolsHiddenElement === 'second' ? null : 'second' ,
325341 ) ;
326342 } ;
327343
@@ -343,19 +359,17 @@ export const GraphiQLInterface: FC<GraphiQLInterfaceProps> = ({
343359 changeTab ( index ) ;
344360 } ;
345361
346- const editorToolsText = `${ editorToolsResize . hiddenElement === 'second' ? 'Show' : 'Hide' } ;
362+ const editorToolsText = `${ editorToolsHiddenElement === 'second' ? 'Show' : 'Hide' } ;
347363
348364 const EditorToolsIcon =
349- editorToolsResize . hiddenElement === 'second'
350- ? ChevronUpIcon
351- : ChevronDownIcon ;
365+ editorToolsHiddenElement === 'second' ? ChevronUpIcon : ChevronDownIcon ;
352366
353367 const editors = (
354- < div className = "graphiql-editors" ref = { editorResize . firstRef } >
368+ < div className = "graphiql-editors" ref = { editorFirstRef } >
355369 < section
356370 className = "graphiql-query-editor"
357371 aria-label = "Operation Editor"
358- ref = { editorToolsResize . firstRef }
372+ ref = { editorToolsFirstRef }
359373 >
360374 { hasMonaco ? (
361375 < QueryEditor
@@ -376,12 +390,12 @@ export const GraphiQLInterface: FC<GraphiQLInterfaceProps> = ({
376390 </ div >
377391 </ section >
378392
379- < div ref = { editorToolsResize . dragBarRef } className = "graphiql-editor-tools" >
393+ < div ref = { editorToolsDragBarRef } className = "graphiql-editor-tools" >
380394 < UnStyledButton
381395 type = "button"
382396 className = { cn (
383397 activeSecondaryEditor === 'variables' &&
384- editorToolsResize . hiddenElement !== 'second' &&
398+ editorToolsHiddenElement !== 'second' &&
385399 'active' ,
386400 ) }
387401 onClick = { handleToolsTabClick }
@@ -394,7 +408,7 @@ export const GraphiQLInterface: FC<GraphiQLInterfaceProps> = ({
394408 type = "button"
395409 className = { cn (
396410 activeSecondaryEditor === 'headers' &&
397- editorToolsResize . hiddenElement !== 'second' &&
411+ editorToolsHiddenElement !== 'second' &&
398412 'active' ,
399413 ) }
400414 onClick = { handleToolsTabClick }
@@ -424,7 +438,7 @@ export const GraphiQLInterface: FC<GraphiQLInterfaceProps> = ({
424438 aria-label = {
425439 activeSecondaryEditor === 'variables' ? 'Variables' : 'Headers'
426440 }
427- ref = { editorToolsResize . secondRef }
441+ ref = { editorToolsSecondRef }
428442 >
429443 < VariableEditor
430444 className = { activeSecondaryEditor === 'variables' ? '' : 'hidden' }
@@ -448,11 +462,11 @@ export const GraphiQLInterface: FC<GraphiQLInterfaceProps> = ({
448462 < Sidebar
449463 forcedTheme = { forcedTheme }
450464 showPersistHeadersSettings = { showPersistHeadersSettings }
451- setHiddenElement = { pluginResize . setHiddenElement }
465+ setHiddenElement = { setPluginHiddenElement }
452466 />
453467 < div className = "graphiql-main" >
454468 < div
455- ref = { pluginResize . firstRef }
469+ ref = { pluginFirstRef }
456470 className = "graphiql-plugin"
457471 style = { {
458472 // Make sure the container shrinks when containing long
@@ -465,10 +479,10 @@ export const GraphiQLInterface: FC<GraphiQLInterfaceProps> = ({
465479 { visiblePlugin && (
466480 < div
467481 className = "graphiql-horizontal-drag-bar"
468- ref = { pluginResize . dragBarRef }
482+ ref = { pluginDragBarRef }
469483 />
470484 ) }
471- < div ref = { pluginResize . secondRef } className = "graphiql-sessions" >
485+ < div ref = { pluginSecondRef } className = "graphiql-sessions" >
472486 < div className = "graphiql-session-header" >
473487 < Tabs
474488 ref = { tabContainerRef }
@@ -517,9 +531,9 @@ export const GraphiQLInterface: FC<GraphiQLInterfaceProps> = ({
517531 { editors }
518532 < div
519533 className = "graphiql-horizontal-drag-bar"
520- ref = { editorResize . dragBarRef }
534+ ref = { editorDragBarRef }
521535 />
522- < div className = "graphiql-response" ref = { editorResize . secondRef } >
536+ < div className = "graphiql-response" ref = { editorSecondRef } >
523537 { isFetching && < Spinner /> }
524538 < ResponseEditor responseTooltip = { responseTooltip } />
525539 { footer }
@@ -531,7 +545,7 @@ export const GraphiQLInterface: FC<GraphiQLInterfaceProps> = ({
531545 { children }
532546 </ Tooltip . Provider >
533547 ) ;
534- } ;
548+ }
535549
536550function getChildComponentType ( child : ReactNode ) {
537551 if (
![dependabot[bot]](https://avatars.githubusercontent.com/in/29110?v=4&size=40){kind=avatar}
0 commit comments