refactor(plugins): create MiniMapNode file for component, cleanup

src/plugins/Controls/index.tsx

@@ -23,11 +23,10 @@ interface ControlProps extends React.HTMLAttributes<HTMLDivElement> {
   showInteractive?: boolean;
 }
 
-export default ({ style, showZoom = true, showFitView = true, showInteractive = true, className }: ControlProps) => {
+const Controls = ({ style, showZoom = true, showFitView = true, showInteractive = true, className }: ControlProps) => {
-  const mapClasses: string = classnames('react-flow__controls', className);
-
   const setInteractive = useStoreActions((actions) => actions.setInteractive);
   const { isInteractive } = useStoreState(({ isInteractive }) => ({ isInteractive }));
+  const mapClasses: string = classnames('react-flow__controls', className);
 
   return (
     <div
@@ -63,3 +62,7 @@ export default ({ style, showZoom = true, showFitView = true, showInteractive =
     </div>
   );
 };
+
+Controls.displayName = 'Controls';
+
+export default Controls;

src/plugins/MiniMap/MiniMapNode.tsx

@@ -0,0 +1,35 @@
+import React from 'react';
+
+import { Node } from '../../types';
+
+interface MiniMapNodeProps {
+  node: Node;
+  color: string;
+  borderRadius: number;
+}
+
+const MiniMapNode = ({ node, color, borderRadius }: MiniMapNodeProps) => {
+  const {
+    position: { x, y },
+    width,
+    height,
+  } = node.__rg;
+  const { background, backgroundColor } = node.style || {};
+  const fill = (background || backgroundColor || color) as string;
+  return (
+    <rect
+      className="react-flow__minimap-node"
+      x={x}
+      y={y}
+      rx={borderRadius}
+      ry={borderRadius}
+      width={width}
+      height={height}
+      fill={fill}
+    />
+  );
+};
+
+MiniMapNode.displayName = 'MiniMapNode';
+
+export default MiniMapNode;

src/plugins/MiniMap/index.tsx

@@ -4,18 +4,14 @@ import classnames from 'classnames';
 import { useStoreState } from '../../store/hooks';
 import { getRectOfNodes, getBoundsofRects } from '../../utils/graph';
 import { Node, Rect } from '../../types';
+import MiniMapNode from './MiniMapNode';
 
 type StringFunc = (node: Node) => string;
 
 interface MiniMapProps extends React.HTMLAttributes<SVGSVGElement> {
-  nodeColor: string | StringFunc;
+  nodeColor?: string | StringFunc;
-  nodeBorderRadius: number;
+  nodeBorderRadius?: number;
-  maskColor: string;
+  maskColor?: string;
-}
-interface MiniMapNodeProps {
-  node: Node;
-  color: string;
-  borderRadius: number;
 }
 
 const baseStyle: CSSProperties = {
@@ -27,29 +23,7 @@ const baseStyle: CSSProperties = {
   height: 150,
 };
 
-const MiniMapNode = ({ node, color, borderRadius }: MiniMapNodeProps) => {
+const MiniMap = ({
-  const {
-    position: { x, y },
-    width,
-    height,
-  } = node.__rg;
-  const { background, backgroundColor } = node.style || {};
-  const fill = (background || backgroundColor || color) as string;
-  return (
-    <rect
-      className="react-flow__minimap-node"
-      x={x}
-      y={y}
-      rx={borderRadius}
-      ry={borderRadius}
-      width={width}
-      height={height}
-      fill={fill}
-    />
-  );
-};
-
-export default ({
   style = { backgroundColor: '#f8f8f8' },
   className,
   nodeColor = '#ddd',
@@ -105,7 +79,7 @@ export default ({
       }}
       className={mapClasses}
     >
-      {state.nodes.map(node => (
+      {state.nodes.map((node) => (
         <MiniMapNode key={node.id} node={node} color={nodeColorFunc(node)} borderRadius={nodeBorderRadius} />
       ))}
       <path
@@ -118,3 +92,7 @@ export default ({
     </svg>
   );
 };
+
+MiniMap.displayName = 'MiniMap';
+
+export default MiniMap;