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

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;