add generic DragResizeContainer component for drag-resizing element…

…s to `@graphiql/react` (#2461) * add `DragResizeContainer` component * use `DragResizeContainer` for horizontal editor sizing * use `DragResizeContainer` for secondary editors * use `DragResizeContainer` for resizing docs * remove unused refs * remove `headerEditorEnabled` from state * simplify state * fix resizing of editors * rename reset to show and restore size when programmatically hiding and showing elements * use hooks for greater programatic flexibility
graphql · Jun 4, 2022 · 7dfe3ec · 7dfe3ec
1 parent d6558e4
commit 7dfe3ec
Show file tree

Hide file tree

Showing 20 changed files with 608 additions and 553 deletions.
diff --git a/.changeset/dull-pears-clap.md b/.changeset/dull-pears-clap.md
@@ -0,0 +1,5 @@
+---
+'graphiql': patch
+---
+
+Use the `DragResizeContainer` component from `@graphiql/react` for the sizing of the editors and the docs explorer
diff --git a/.changeset/early-roses-shop.md b/.changeset/early-roses-shop.md
@@ -0,0 +1,5 @@
+---
+'@graphiql/react': minor
+---
+
+Add `DragResizeContainer` utility component
diff --git a/packages/graphiql-react/src/editor/header-editor.tsx b/packages/graphiql-react/src/editor/header-editor.tsx
@@ -10,7 +10,6 @@ import {
   useKeyMap,
   useMergeQuery,
   usePrettifyEditors,
-  useResizeEditor,
 } from './hooks';
 
 export type UseHeaderEditorArgs = {
@@ -117,8 +116,6 @@ export function useHeaderEditor({
   useKeyMap(headerEditor, ['Shift-Ctrl-P'], prettify);
   useKeyMap(headerEditor, ['Shift-Ctrl-M'], merge);
 
-  useResizeEditor(headerEditor, ref);
-
   return ref;
 }
 

diff --git a/packages/graphiql-react/src/editor/hooks.ts b/packages/graphiql-react/src/editor/hooks.ts
@@ -122,23 +122,6 @@ export function useKeyMap(
   }, [editor, keys, callback]);
 }
 
-export function useResizeEditor(
-  editor: CodeMirrorEditor | null,
-  ref: RefObject<HTMLDivElement>,
-) {
-  const sizeRef = useRef<number>();
-  useEffect(() => {
-    if (!ref.current || !editor) {
-      return;
-    }
-    const size = ref.current.clientHeight;
-    if (size !== sizeRef.current) {
-      editor.setSize(null, null); // TODO: added the args here. double check no effects. might be version issue
-    }
-    sizeRef.current = size;
-  });
-}
-
 export type CopyQueryCallback = (query: string) => void;
 
 export function useCopyQuery({

diff --git a/packages/graphiql-react/src/editor/query-editor.tsx b/packages/graphiql-react/src/editor/query-editor.tsx
@@ -28,7 +28,6 @@ import {
   useKeyMap,
   useMergeQuery,
   usePrettifyEditors,
-  useResizeEditor,
 } from './hooks';
 import { CodeMirrorEditor, CodeMirrorType } from './types';
 import { normalizeWhitespace } from './whitespace';
@@ -38,19 +37,21 @@ type OnClickReference = (reference: SchemaReference) => void;
 export type UseQueryEditorArgs = {
   editorTheme?: string;
   externalFragments?: string | FragmentDefinitionNode[];
+  onClickReference?: OnClickReference;
+  onCopyQuery?: CopyQueryCallback;
   onEdit?(value: string, documentAST?: DocumentNode): void;
   onEditOperationName?: EditCallback;
-  onCopyQuery?: CopyQueryCallback;
   readOnly?: boolean;
   validationRules?: ValidationRule[];
 };
 
 export function useQueryEditor({
   editorTheme = 'graphiql',
   externalFragments,
+  onClickReference,
+  onCopyQuery,
   onEdit,
   onEditOperationName,
-  onCopyQuery,
   readOnly = false,
   validationRules,
 }: UseQueryEditorArgs = {}) {
@@ -93,8 +94,9 @@ export function useQueryEditor({
       } else if (reference.kind === 'EnumValue' && reference.type) {
         explorer.push({ name: reference.type.name, def: reference.type });
       }
+      onClickReference?.(reference);
     };
-  }, [explorer]);
+  }, [explorer, onClickReference]);
 
   useEffect(() => {
     let isActive = true;
@@ -335,8 +337,6 @@ export function useQueryEditor({
   );
   useKeyMap(queryEditor, ['Shift-Ctrl-M'], merge);
 
-  useResizeEditor(queryEditor, ref);
-
   return ref;
 }
 

diff --git a/packages/graphiql-react/src/editor/response-editor.tsx b/packages/graphiql-react/src/editor/response-editor.tsx
@@ -7,7 +7,7 @@ import { useSchemaContext } from '../schema';
 import { commonKeys, importCodeMirror } from './common';
 import { ImagePreview } from './components';
 import { useEditorContext } from './context';
-import { useResizeEditor, useSynchronizeValue } from './hooks';
+import { useSynchronizeValue } from './hooks';
 import { CodeMirrorEditor } from './types';
 
 export type ResponseTooltipType = ComponentType<{ pos: Position }>;
@@ -121,8 +121,6 @@ export function useResponseEditor({
 
   useSynchronizeValue(responseEditor, value);
 
-  useResizeEditor(responseEditor, ref);
-
   useEffect(() => {
     if (fetchError) {
       responseEditor?.setValue(fetchError);

diff --git a/packages/graphiql-react/src/editor/variable-editor.tsx b/packages/graphiql-react/src/editor/variable-editor.tsx
@@ -10,7 +10,6 @@ import {
   useKeyMap,
   useMergeQuery,
   usePrettifyEditors,
-  useResizeEditor,
 } from './hooks';
 import { CodeMirrorType } from './types';
 
@@ -135,8 +134,6 @@ export function useVariableEditor({
   useKeyMap(variableEditor, ['Shift-Ctrl-P'], prettify);
   useKeyMap(variableEditor, ['Shift-Ctrl-M'], merge);
 
-  useResizeEditor(variableEditor, ref);
-
   return ref;
 }
 

diff --git a/packages/graphiql-react/src/index.ts b/packages/graphiql-react/src/index.ts
@@ -39,6 +39,7 @@ import {
   StorageContextProvider,
   useStorageContext,
 } from './storage';
+import { useDragResize } from './utility/resize';
 
 import type {
   EditorContextType,
@@ -96,6 +97,8 @@ export {
   StorageContext,
   StorageContextProvider,
   useStorageContext,
+  // utility/resize
+  useDragResize,
 };
 
 export type {