From 7cddc81d866a3d1c3e9ff2b1fea053b3dc498474 Mon Sep 17 00:00:00 2001
From: moklick <info@moritzklack.com>
Date: Thu, 16 Jun 2022 12:27:07 +0200
Subject: [PATCH] refactor(zoomActivationKeyCode): accept null, cleanup types
 cloeses #2211

---
 src/container/FlowRenderer/index.tsx | 29 +++++++++++++--------------
 src/container/ZoomPane/index.tsx     | 30 +++++++---------------------
 src/types/component-props.ts         |  2 +-
 3 files changed, 22 insertions(+), 39 deletions(-)

diff --git a/src/container/FlowRenderer/index.tsx b/src/container/FlowRenderer/index.tsx
index faae8f49..33fb920d 100644
--- a/src/container/FlowRenderer/index.tsx
+++ b/src/container/FlowRenderer/index.tsx
@@ -11,22 +11,21 @@ import NodesSelection from '../../components/NodesSelection';
 
 import { ReactFlowState } from '../../types';
 
-interface FlowRendererProps
-  extends Omit<
-    GraphViewProps,
-    | 'snapToGrid'
-    | 'nodeTypes'
-    | 'edgeTypes'
-    | 'snapGrid'
-    | 'connectionLineType'
-    | 'connectionLineContainerStyle'
-    | 'arrowHeadColor'
-    | 'onlyRenderVisibleElements'
-    | 'selectNodesOnDrag'
-    | 'defaultMarkerColor'
-  > {
+export type FlowRendererProps = Omit<
+  GraphViewProps,
+  | 'snapToGrid'
+  | 'nodeTypes'
+  | 'edgeTypes'
+  | 'snapGrid'
+  | 'connectionLineType'
+  | 'connectionLineContainerStyle'
+  | 'arrowHeadColor'
+  | 'onlyRenderVisibleElements'
+  | 'selectNodesOnDrag'
+  | 'defaultMarkerColor'
+> & {
   children: ReactNode;
-}
+};
 
 const selector = (s: ReactFlowState) => ({
   resetSelectedElements: s.resetSelectedElements,
diff --git a/src/container/ZoomPane/index.tsx b/src/container/ZoomPane/index.tsx
index 9f17226f..57a1c8a5 100644
--- a/src/container/ZoomPane/index.tsx
+++ b/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 {
-  selectionKeyPressed: boolean;
-  elementsSelectable?: boolean;
-  zoomOnScroll?: 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;
-}
+type ZoomPaneProps = Omit<
+  FlowRendererProps,
+  'deleteKeyCode' | 'selectionKeyCode' | 'multiSelectionKeyCode' | 'noDragClassName'
+> & { selectionKeyPressed: boolean };
 
 const viewChanged = (prevViewport: Viewport, eventViewport: any): boolean =>
   prevViewport.x !== eventViewport.x || prevViewport.y !== eventViewport.y || prevViewport.zoom !== eventViewport.k;
diff --git a/src/types/component-props.ts b/src/types/component-props.ts
index 309ba580..200495eb 100644
--- a/src/types/component-props.ts
+++ b/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;