refactor(defaultProps): dont set defaults in main entry point

src/container/GraphView/index.tsx

@@ -60,23 +60,23 @@ export interface GraphViewProps {
   connectionLineStyle?: CSSProperties;
   connectionLineComponent?: ConnectionLineComponent;
   deleteKeyCode: number;
-  snapToGrid: boolean;
-  snapGrid: [number, number];
+  snapToGrid?: boolean;
+  snapGrid?: [number, number];
   onlyRenderVisibleNodes: boolean;
-  nodesDraggable: boolean;
-  nodesConnectable: boolean;
-  elementsSelectable: boolean;
-  selectNodesOnDrag: boolean;
-  minZoom: number;
-  maxZoom: number;
-  defaultZoom: number;
-  defaultPosition: [number, number];
+  nodesDraggable?: boolean;
+  nodesConnectable?: boolean;
+  elementsSelectable?: boolean;
+  selectNodesOnDrag?: boolean;
+  minZoom?: number;
+  maxZoom?: number;
+  defaultZoom?: number;
+  defaultPosition?: [number, number];
   translateExtent?: TranslateExtent;
   arrowHeadColor: string;
   markerEndId?: string;
-  zoomOnScroll: boolean;
-  zoomOnDoubleClick: boolean;
-  paneMoveable: boolean;
+  zoomOnScroll?: boolean;
+  zoomOnDoubleClick?: boolean;
+  paneMoveable?: boolean;
 }
 
 const GraphView = ({
@@ -114,7 +114,7 @@ const GraphView = ({
   nodesDraggable,
   nodesConnectable,
   elementsSelectable,
-  selectNodesOnDrag,
+  selectNodesOnDrag = true,
   minZoom,
   maxZoom,
   defaultZoom,
@@ -140,39 +140,19 @@ const GraphView = ({
   const setOnConnectStop = useStoreActions((actions) => actions.setOnConnectStop);
   const setOnConnectEnd = useStoreActions((actions) => actions.setOnConnectEnd);
   const setSnapGrid = useStoreActions((actions) => actions.setSnapGrid);
+  const setSnapToGrid = useStoreActions((actions) => actions.setSnapToGrid);
   const setNodesDraggable = useStoreActions((actions) => actions.setNodesDraggable);
   const setNodesConnectable = useStoreActions((actions) => actions.setNodesConnectable);
   const setElementsSelectable = useStoreActions((actions) => actions.setElementsSelectable);
   const setInitTransform = useStoreActions((actions) => actions.setInitTransform);
-  const setMinMaxZoom = useStoreActions((actions) => actions.setMinMaxZoom);
+  const setMinZoom = useStoreActions((actions) => actions.setMinZoom);
+  const setMaxZoom = useStoreActions((actions) => actions.setMaxZoom);
   const setTranslateExtent = useStoreActions((actions) => actions.setTranslateExtent);
   const fitView = useStoreActions((actions) => actions.fitView);
   const zoom = useStoreActions((actions) => actions.zoom);
   const zoomTo = useStoreActions((actions) => actions.zoomTo);
   const currentStore = useStore();
 
-  const onZoomPaneClick = useCallback(
-    (event: React.MouseEvent) => {
-      onPaneClick?.(event);
-      unsetNodesSelection();
-    },
-    [onPaneClick]
-  );
-
-  const onZoomPaneContextMenu = useCallback(
-    (event: React.MouseEvent) => {
-      onPaneContextMenu?.(event);
-    },
-    [onPaneContextMenu]
-  );
-
-  const onZoomPaneScroll = useCallback(
-    (event: WheelEvent) => {
-      onPaneScroll?.(event);
-    },
-    [onPaneScroll]
-  );
-
   useResizeHandler(rendererNode);
   useGlobalKeyHandler({ onElementsRemove, deleteKeyCode });
   useElementUpdater(elements);
@@ -212,6 +192,28 @@ const GraphView = ({
     }
   }, [d3Initialised, onLoad]);
 
+  const onZoomPaneClick = useCallback(
+    (event: React.MouseEvent) => {
+      onPaneClick?.(event);
+      unsetNodesSelection();
+    },
+    [onPaneClick]
+  );
+
+  const onZoomPaneContextMenu = useCallback(
+    (event: React.MouseEvent) => {
+      onPaneContextMenu?.(event);
+    },
+    [onPaneContextMenu]
+  );
+
+  const onZoomPaneScroll = useCallback(
+    (event: WheelEvent) => {
+      onPaneScroll?.(event);
+    },
+    [onPaneScroll]
+  );
+
   useEffect(() => {
     if (onConnect) {
       setOnConnect(onConnect);
@@ -237,24 +239,46 @@ const GraphView = ({
   }, [onConnectEnd]);
 
   useEffect(() => {
-    setSnapGrid({ snapToGrid, snapGrid });
-  }, [snapToGrid, snapGrid]);
+    if (typeof snapToGrid !== 'undefined') {
+      setSnapToGrid(snapToGrid);
+    }
+  }, [snapToGrid]);
 
   useEffect(() => {
-    setNodesDraggable(nodesDraggable);
+    if (typeof snapGrid !== 'undefined') {
+      setSnapGrid(snapGrid);
+    }
+  }, [snapGrid]);
+
+  useEffect(() => {
+    if (typeof nodesDraggable !== 'undefined') {
+      setNodesDraggable(nodesDraggable);
+    }
   }, [nodesDraggable]);
 
   useEffect(() => {
-    setNodesConnectable(nodesConnectable);
+    if (typeof nodesConnectable !== 'undefined') {
+      setNodesConnectable(nodesConnectable);
+    }
   }, [nodesConnectable]);
 
   useEffect(() => {
-    setElementsSelectable(elementsSelectable);
+    if (typeof elementsSelectable !== 'undefined') {
+      setElementsSelectable(elementsSelectable);
+    }
   }, [elementsSelectable]);
 
   useEffect(() => {
-    setMinMaxZoom({ minZoom, maxZoom });
-  }, [minZoom, maxZoom]);
+    if (typeof minZoom !== 'undefined') {
+      setMinZoom(minZoom);
+    }
+  }, [minZoom]);
+
+  useEffect(() => {
+    if (typeof maxZoom !== 'undefined') {
+      setMaxZoom(maxZoom);
+    }
+  }, [maxZoom]);
 
   useEffect(() => {
     if (typeof translateExtent !== 'undefined') {

src/container/ReactFlow/index.tsx

@@ -36,6 +36,19 @@ import {
 
 import '../../style.css';
 
+const defaultNodeTypes = {
+  input: InputNode,
+  default: DefaultNode,
+  output: OutputNode,
+};
+
+const defaultEdgeTypes = {
+  default: BezierEdge,
+  straight: StraightEdge,
+  step: StepEdge,
+  smoothstep: SmoothStepEdge,
+};
+
 export interface ReactFlowProps extends Omit<HTMLAttributes<HTMLDivElement>, 'onLoad'> {
   elements: Elements;
   onElementClick?: (event: MouseEvent, element: Node | Edge) => void;
@@ -62,30 +75,30 @@ export interface ReactFlowProps extends Omit<HTMLAttributes<HTMLDivElement>, 'on
   onPaneScroll?: (event?: WheelEvent) => void;
   onPaneClick?: (event: MouseEvent) => void;
   onPaneContextMenu?: (event: MouseEvent) => void;
-  nodeTypes: NodeTypesType;
-  edgeTypes: EdgeTypesType;
-  connectionLineType: ConnectionLineType;
+  nodeTypes?: NodeTypesType;
+  edgeTypes?: EdgeTypesType;
+  connectionLineType?: ConnectionLineType;
   connectionLineStyle?: CSSProperties;
   connectionLineComponent?: ConnectionLineComponent;
-  deleteKeyCode: number;
-  selectionKeyCode: number;
-  snapToGrid: boolean;
-  snapGrid: [number, number];
-  onlyRenderVisibleNodes: boolean;
-  nodesDraggable: boolean;
-  nodesConnectable: boolean;
-  elementsSelectable: boolean;
-  selectNodesOnDrag: boolean;
-  paneMoveable: boolean;
-  minZoom: number;
-  maxZoom: number;
-  defaultZoom: number;
-  defaultPosition: [number, number];
+  deleteKeyCode?: number;
+  selectionKeyCode?: number;
+  snapToGrid?: boolean;
+  snapGrid?: [number, number];
+  onlyRenderVisibleNodes?: boolean;
+  nodesDraggable?: boolean;
+  nodesConnectable?: boolean;
+  elementsSelectable?: boolean;
+  selectNodesOnDrag?: boolean;
+  paneMoveable?: boolean;
+  minZoom?: number;
+  maxZoom?: number;
+  defaultZoom?: number;
+  defaultPosition?: [number, number];
   translateExtent?: TranslateExtent;
-  arrowHeadColor: string;
+  arrowHeadColor?: string;
   markerEndId?: string;
   zoomOnScroll: boolean;
-  zoomOnDoubleClick: boolean;
+  zoomOnDoubleClick?: boolean;
 }
 
 const ReactFlow = ({
@@ -94,8 +107,8 @@ const ReactFlow = ({
   elements = [],
   className,
   children,
-  nodeTypes,
-  edgeTypes,
+  nodeTypes = defaultNodeTypes,
+  edgeTypes = defaultEdgeTypes,
   onLoad,
   onMove,
   onMoveStart,
@@ -116,28 +129,28 @@ const ReactFlow = ({
   onSelectionDrag,
   onSelectionDragStop,
   onSelectionContextMenu,
-  connectionLineType,
+  connectionLineType = ConnectionLineType.Bezier,
   connectionLineStyle,
   connectionLineComponent,
-  deleteKeyCode,
-  selectionKeyCode,
+  deleteKeyCode = 8,
+  selectionKeyCode = 16,
   snapToGrid,
   snapGrid,
-  onlyRenderVisibleNodes,
+  onlyRenderVisibleNodes = true,
   nodesDraggable,
   nodesConnectable,
   elementsSelectable,
-  selectNodesOnDrag,
+  selectNodesOnDrag = true,
   minZoom,
   maxZoom,
-  defaultZoom,
-  defaultPosition,
+  defaultZoom = 1,
+  defaultPosition = [0, 0],
   translateExtent,
-  arrowHeadColor,
+  arrowHeadColor = '#b1b1b7',
   markerEndId,
-  zoomOnScroll,
-  zoomOnDoubleClick,
-  paneMoveable,
+  zoomOnScroll = true,
+  zoomOnDoubleClick = true,
+  paneMoveable = true,
   onPaneClick,
   onPaneScroll,
   onPaneContextMenu,
@@ -208,36 +221,4 @@ const ReactFlow = ({
 
 ReactFlow.displayName = 'ReactFlow';
 
-ReactFlow.defaultProps = {
-  nodeTypes: {
-    input: InputNode,
-    default: DefaultNode,
-    output: OutputNode,
-  },
-  edgeTypes: {
-    default: BezierEdge,
-    straight: StraightEdge,
-    step: StepEdge,
-    smoothstep: SmoothStepEdge,
-  },
-  connectionLineType: ConnectionLineType.Bezier,
-  deleteKeyCode: 8,
-  selectionKeyCode: 16,
-  snapToGrid: false,
-  snapGrid: [15, 15],
-  onlyRenderVisibleNodes: true,
-  nodesDraggable: true,
-  nodesConnectable: true,
-  elementsSelectable: true,
-  selectNodesOnDrag: true,
-  paneMoveable: true,
-  minZoom: 0.5,
-  maxZoom: 2,
-  defaultZoom: 1,
-  defaultPosition: [0, 0],
-  arrowHeadColor: '#b1b1b7',
-  zoomOnScroll: true,
-  zoomOnDoubleClick: true,
-};
-
 export default ReactFlow;