refactor(zoomActivationKeyCode): accept null, cleanup types cloeses #2211

src/container/FlowRenderer/index.tsx

@@ -11,22 +11,21 @@ import NodesSelection from '../../components/NodesSelection';
 
 import { ReactFlowState } from '../../types';
 
-interface FlowRendererProps
+export type FlowRendererProps = Omit<
-  extends Omit<
+  GraphViewProps,
-    GraphViewProps,
+  | 'snapToGrid'
-    | 'snapToGrid'
+  | 'nodeTypes'
-    | 'nodeTypes'
+  | 'edgeTypes'
-    | 'edgeTypes'
+  | 'snapGrid'
-    | 'snapGrid'
+  | 'connectionLineType'
-    | 'connectionLineType'
+  | 'connectionLineContainerStyle'
-    | 'connectionLineContainerStyle'
+  | 'arrowHeadColor'
-    | 'arrowHeadColor'
+  | 'onlyRenderVisibleElements'
-    | 'onlyRenderVisibleElements'
+  | 'selectNodesOnDrag'
-    | 'selectNodesOnDrag'
+  | 'defaultMarkerColor'
-    | 'defaultMarkerColor'
+> & {
-  > {
   children: ReactNode;
-}
+};
 
 const selector = (s: ReactFlowState) => ({
   resetSelectedElements: s.resetSelectedElements,

src/container/ZoomPane/index.tsx

@@ -1,4 +1,4 @@
-import React, { useEffect, useRef, ReactNode } from 'react';
+import React, { useEffect, useRef } from 'react';
 import { D3ZoomEvent, zoom, zoomIdentity } from 'd3-zoom';
 import { select, pointer } from 'd3-selection';
 import shallow from 'zustand/shallow';
@@ -7,29 +7,13 @@ import { clamp } from '../../utils';
 import useKeyPress from '../../hooks/useKeyPress';
 import useResizeHandler from '../../hooks/useResizeHandler';
 import { useStore, useStoreApi } from '../../store';
-import { Viewport, PanOnScrollMode, KeyCode, ReactFlowState, OnMove, OnMoveStart, OnMoveEnd } from '../../types';
+import { Viewport, PanOnScrollMode, ReactFlowState } from '../../types';
+import { FlowRendererProps } from '../FlowRenderer';
 
-interface ZoomPaneProps {
+type ZoomPaneProps = Omit<
-  selectionKeyPressed: boolean;
+  FlowRendererProps,
-  elementsSelectable?: boolean;
+  'deleteKeyCode' | 'selectionKeyCode' | 'multiSelectionKeyCode' | 'noDragClassName'
-  zoomOnScroll?: boolean;
+> & { selectionKeyPressed: boolean };
-  zoomOnPinch?: boolean;
-  panOnScroll?: boolean;
-  panOnScrollSpeed?: number;
-  panOnScrollMode?: PanOnScrollMode;
-  zoomOnDoubleClick?: boolean;
-  panOnDrag?: boolean;
-  defaultPosition?: [number, number];
-  defaultZoom?: number;
-  onMove?: OnMove;
-  onMoveStart?: OnMoveStart;
-  onMoveEnd?: OnMoveEnd;
-  zoomActivationKeyCode?: KeyCode;
-  preventScrolling?: boolean;
-  children: ReactNode;
-  noWheelClassName: string;
-  noPanClassName: string;
-}
 
 const viewChanged = (prevViewport: Viewport, eventViewport: any): boolean =>
   prevViewport.x !== eventViewport.x || prevViewport.y !== eventViewport.y || prevViewport.zoom !== eventViewport.k;

src/types/component-props.ts

@@ -90,7 +90,7 @@ export interface ReactFlowProps extends HTMLAttributes<HTMLDivElement> {
   deleteKeyCode?: KeyCode | null;
   selectionKeyCode?: KeyCode | null;
   multiSelectionKeyCode?: KeyCode | null;
-  zoomActivationKeyCode?: KeyCode;
+  zoomActivationKeyCode?: KeyCode | null;
   snapToGrid?: boolean;
   snapGrid?: [number, number];
   onlyRenderVisibleElements?: boolean;