Skip to content

Commit 20edad1

Browse files
dimaMachinadimaMachina
committed
merge conflicts
1 parent 0993ea4 commit 20edad1

File tree

2 files changed

+744
-269
lines changed

2 files changed

+744
-269
lines changed

‎packages/graphiql/src/GraphiQL.tsx‎

Lines changed: 76 additions & 75 deletions
Original file line numberDiff line numberDiff line change
@@ -128,11 +128,7 @@ const GraphiQL_: FC<GraphiQLProps> = ({
128128
>
129129
<HistoryStore maxHistoryLength={maxHistoryLength}>
130130
<DocExplorerStore>
131-
<Tooltip.Provider>
132-
<GraphiQLInterface {...interfaceProps}>
133-
{children}
134-
</GraphiQLInterface>
135-
</Tooltip.Provider>
131+
<GraphiQLInterface {...interfaceProps}>{children}</GraphiQLInterface>
136132
</DocExplorerStore>
137133
</HistoryStore>
138134
</GraphiQLProvider>
@@ -206,7 +202,7 @@ const GraphiQLInterface: FC<GraphiQLInterfaceProps> = ({
206202
forcedTheme,
207203
isHeadersEditorEnabled,
208204
defaultEditorToolsVisibility,
209-
children,
205+
children: $children,
210206
confirmCloseTab,
211207
className,
212208
onEditQuery,
@@ -296,7 +292,9 @@ const GraphiQLInterface: FC<GraphiQLInterfaceProps> = ({
296292
'success' | 'error' | null
297293
>(null);
298294

299-
const { logo, toolbar, footer } = Children.toArray(children).reduce<{
295+
const { logo, toolbar, footer, children } = Children.toArray(
296+
$children,
297+
).reduce<{
300298
logo?: ReactNode;
301299
toolbar?: ReactNode;
302300
footer?: ReactNode;
@@ -696,83 +694,86 @@ const GraphiQLInterface: FC<GraphiQLInterfaceProps> = ({
696694
);
697695

698696
return (
699-
<div className={cn('graphiql-container', className)}>
700-
{sidebar}
701-
<div className="graphiql-main">
702-
<div
703-
ref={pluginResize.firstRef}
704-
className="graphiql-plugin"
705-
style={{
706-
// Make sure the container shrinks when containing long
707-
// non-breaking texts
708-
minWidth: '200px',
709-
}}
710-
>
711-
{PluginContent ? <PluginContent /> : null}
712-
</div>
713-
{visiblePlugin && (
697+
<Tooltip.Provider>
698+
<div className={cn('graphiql-container', className)}>
699+
{sidebar}
700+
<div className="graphiql-main">
714701
<div
715-
className="graphiql-horizontal-drag-bar"
716-
ref={pluginResize.dragBarRef}
717-
/>
718-
)}
719-
<div ref={pluginResize.secondRef} className="graphiql-sessions">
720-
<div className="graphiql-session-header">
721-
<Tabs
722-
values={tabs}
723-
onReorder={moveTab}
724-
aria-label="Select active operation"
725-
className="no-scrollbar"
726-
>
727-
{tabs.map((tab, index, arr) => (
728-
<Tab
729-
key={tab.id}
730-
value={tab}
731-
isActive={index === activeTabIndex}
732-
>
733-
<Tab.Button
734-
aria-controls="graphiql-session"
735-
id={`graphiql-session-tab-${index}`}
736-
title={tab.title}
737-
onClick={handleTabClick}
738-
>
739-
{tab.title}
740-
</Tab.Button>
741-
{arr.length > 1 && <Tab.Close onClick={handleTabClose} />}
742-
</Tab>
743-
))}
744-
</Tabs>
745-
<Tooltip label="New tab">
746-
<UnStyledButton
747-
type="button"
748-
className="graphiql-tab-add"
749-
onClick={addTab}
750-
aria-label="New tab"
751-
>
752-
<PlusIcon aria-hidden="true" />
753-
</UnStyledButton>
754-
</Tooltip>
755-
{logo}
756-
</div>
757-
<div
758-
role="tabpanel"
759-
id="graphiql-session" // used by aria-controls="graphiql-session"
760-
aria-labelledby={`${TAB_CLASS_PREFIX}${activeTabIndex}`}
702+
ref={pluginResize.firstRef}
703+
className="graphiql-plugin"
704+
style={{
705+
// Make sure the container shrinks when containing long
706+
// non-breaking texts
707+
minWidth: '200px',
708+
}}
761709
>
762-
{editors}
710+
{PluginContent ? <PluginContent /> : null}
711+
</div>
712+
{visiblePlugin && (
763713
<div
764714
className="graphiql-horizontal-drag-bar"
765-
ref={editorResize.dragBarRef}
715+
ref={pluginResize.dragBarRef}
766716
/>
767-
<div className="graphiql-response" ref={editorResize.secondRef}>
768-
{isExecutionFetching && <Spinner />}
769-
<ResponseEditor responseTooltip={responseTooltip} />
770-
{footer}
717+
)}
718+
<div ref={pluginResize.secondRef} className="graphiql-sessions">
719+
<div className="graphiql-session-header">
720+
<Tabs
721+
values={tabs}
722+
onReorder={moveTab}
723+
aria-label="Select active operation"
724+
className="no-scrollbar"
725+
>
726+
{tabs.map((tab, index, arr) => (
727+
<Tab
728+
key={tab.id}
729+
value={tab}
730+
isActive={index === activeTabIndex}
731+
>
732+
<Tab.Button
733+
aria-controls="graphiql-session"
734+
id={`graphiql-session-tab-${index}`}
735+
title={tab.title}
736+
onClick={handleTabClick}
737+
>
738+
{tab.title}
739+
</Tab.Button>
740+
{arr.length > 1 && <Tab.Close onClick={handleTabClose} />}
741+
</Tab>
742+
))}
743+
</Tabs>
744+
<Tooltip label="New tab">
745+
<UnStyledButton
746+
type="button"
747+
className="graphiql-tab-add"
748+
onClick={addTab}
749+
aria-label="New tab"
750+
>
751+
<PlusIcon aria-hidden="true" />
752+
</UnStyledButton>
753+
</Tooltip>
754+
{logo}
755+
</div>
756+
<div
757+
role="tabpanel"
758+
id="graphiql-session" // used by aria-controls="graphiql-session"
759+
aria-labelledby={`${TAB_CLASS_PREFIX}${activeTabIndex}`}
760+
>
761+
{editors}
762+
<div
763+
className="graphiql-horizontal-drag-bar"
764+
ref={editorResize.dragBarRef}
765+
/>
766+
<div className="graphiql-response" ref={editorResize.secondRef}>
767+
{isExecutionFetching && <Spinner />}
768+
<ResponseEditor responseTooltip={responseTooltip} />
769+
{footer}
770+
</div>
771771
</div>
772772
</div>
773773
</div>
774774
</div>
775-
</div>
775+
{children}
776+
</Tooltip.Provider>
776777
);
777778
};
778779

0 commit comments

Comments
 (0)