refactor(components): show displayName in react profiler correctly

2020-07-27 18:50:53 +02:00
parent 05786fcee6
commit 30e811225a
15 changed files with 643 additions and 649 deletions
@@ -19,38 +19,43 @@ const defaultColors = {
  [BackgroundVariant.Lines]: '#eee',
 };

-const Background = memo(
-  ({ variant = BackgroundVariant.Dots, gap = 24, size = 0.5, color, style, className }: BackgroundProps) => {
-    const [x, y, scale] = useStoreState((s) => s.transform);
+const Background = ({
+  variant = BackgroundVariant.Dots,
+  gap = 24,
+  size = 0.5,
+  color,
+  style,
+  className,
+}: BackgroundProps) => {
+  const [x, y, scale] = useStoreState((s) => s.transform);

-    const bgClasses = cc(['react-flow__background', className]);
-    const scaledGap = gap * scale;
-    const xOffset = x % scaledGap;
-    const yOffset = y % scaledGap;
+  const bgClasses = cc(['react-flow__background', className]);
+  const scaledGap = gap * scale;
+  const xOffset = x % scaledGap;
+  const yOffset = y % scaledGap;

-    const bgSvgTile = useMemo(() => {
-      const isLines = variant === BackgroundVariant.Lines;
-      const bgColor = color ? color : defaultColors[variant];
-      const path = isLines ? createGridLinesPath(scaledGap, size, bgColor) : createGridDotsPath(size, bgColor);
+  const bgSvgTile = useMemo(() => {
+    const isLines = variant === BackgroundVariant.Lines;
+    const bgColor = color ? color : defaultColors[variant];
+    const path = isLines ? createGridLinesPath(scaledGap, size, bgColor) : createGridDotsPath(size, bgColor);

-      return encodeURIComponent(
-        `<svg width="${scaledGap}" height="${scaledGap}" xmlns='http://www.w3.org/2000/svg'>${path}</svg>`
-      );
-    }, [variant, scaledGap, size, color]);
-
-    return (
-      <div
-        className={bgClasses}
-        style={{
-          ...style,
-          backgroundImage: `url("data:image/svg+xml;utf8,${bgSvgTile}")`,
-          backgroundPosition: `${xOffset}px ${yOffset}px`,
-        }}
-      ></div>
+    return encodeURIComponent(
+      `<svg width="${scaledGap}" height="${scaledGap}" xmlns='http://www.w3.org/2000/svg'>${path}</svg>`
    );
-  }
-);
+  }, [variant, scaledGap, size, color]);
+
+  return (
+    <div
+      className={bgClasses}
+      style={{
+        ...style,
+        backgroundImage: `url("data:image/svg+xml;utf8,${bgSvgTile}")`,
+        backgroundPosition: `${xOffset}px ${yOffset}px`,
+      }}
+    ></div>
+  );
+};

 Background.displayName = 'Background';

-export default Background;
+export default memo(Background);
@@ -17,49 +17,47 @@ interface ControlProps extends React.HTMLAttributes<HTMLDivElement> {
  showInteractive?: boolean;
 }

-const Controls = memo(
-  ({ style, showZoom = true, showFitView = true, showInteractive = true, className }: ControlProps) => {
-    const setInteractive = useStoreActions((actions) => actions.setInteractive);
-    const fitView = useStoreActions((actions) => actions.fitView);
-    const zoomIn = useStoreActions((actions) => actions.zoomIn);
-    const zoomOut = useStoreActions((actions) => actions.zoomOut);
+const Controls = ({ style, showZoom = true, showFitView = true, showInteractive = true, className }: ControlProps) => {
+  const setInteractive = useStoreActions((actions) => actions.setInteractive);
+  const fitView = useStoreActions((actions) => actions.fitView);
+  const zoomIn = useStoreActions((actions) => actions.zoomIn);
+  const zoomOut = useStoreActions((actions) => actions.zoomOut);

-    const isInteractive = useStoreState((s) => s.nodesDraggable && s.nodesConnectable && s.elementsSelectable);
-    const mapClasses = cc(['react-flow__controls', className]);
+  const isInteractive = useStoreState((s) => s.nodesDraggable && s.nodesConnectable && s.elementsSelectable);
+  const mapClasses = cc(['react-flow__controls', className]);

-    return (
-      <div className={mapClasses} style={style}>
-        {showZoom && (
-          <>
-            <div className="react-flow__controls-button react-flow__controls-zoomin" onClick={() => zoomIn()}>
-              <PlusIcon />
-            </div>
-            <div className="react-flow__controls-button react-flow__controls-zoomout" onClick={() => zoomOut()}>
-              <MinusIcon />
-            </div>
-          </>
-        )}
-        {showFitView && (
-          <div
-            className="react-flow__controls-button react-flow__controls-fitview"
-            onClick={() => fitView({ padding: 0.1 })}
-          >
-            <FitviewIcon />
+  return (
+    <div className={mapClasses} style={style}>
+      {showZoom && (
+        <>
+          <div className="react-flow__controls-button react-flow__controls-zoomin" onClick={() => zoomIn()}>
+            <PlusIcon />
          </div>
-        )}
-        {showInteractive && (
-          <div
-            className="react-flow__controls-button react-flow__controls-interactive"
-            onClick={() => setInteractive(!isInteractive)}
-          >
-            {isInteractive ? <UnlockIcon /> : <LockIcon />}
+          <div className="react-flow__controls-button react-flow__controls-zoomout" onClick={() => zoomOut()}>
+            <MinusIcon />
          </div>
-        )}
-      </div>
-    );
-  }
-);
+        </>
+      )}
+      {showFitView && (
+        <div
+          className="react-flow__controls-button react-flow__controls-fitview"
+          onClick={() => fitView({ padding: 0.1 })}
+        >
+          <FitviewIcon />
+        </div>
+      )}
+      {showInteractive && (
+        <div
+          className="react-flow__controls-button react-flow__controls-interactive"
+          onClick={() => setInteractive(!isInteractive)}
+        >
+          {isInteractive ? <UnlockIcon /> : <LockIcon />}
+        </div>
+      )}
+    </div>
+  );
+};

 Controls.displayName = 'Controls';

-export default Controls;
+export default memo(Controls);
@@ -10,7 +10,7 @@ interface MiniMapNodeProps {
  style?: CSSProperties;
 }

-const MiniMapNode = memo(({ x, y, width, height, style, color, borderRadius }: MiniMapNodeProps) => {
+const MiniMapNode = ({ x, y, width, height, style, color, borderRadius }: MiniMapNodeProps) => {
  const { background, backgroundColor } = style || {};
  const fill = (color || background || backgroundColor) as string;

@@ -26,8 +26,8 @@ const MiniMapNode = memo(({ x, y, width, height, style, color, borderRadius }: M
      fill={fill}
    />
  );
-});
+};

 MiniMapNode.displayName = 'MiniMapNode';

-export default MiniMapNode;
+export default memo(MiniMapNode);
@@ -19,77 +19,75 @@ interface MiniMapProps extends React.HTMLAttributes<SVGSVGElement> {
 const defaultWidth = 200;
 const defaultHeight = 150;

-const MiniMap = memo(
-  ({
-    style = { backgroundColor: '#f8f8f8' },
-    className,
-    nodeColor = '#ddd',
-    nodeBorderRadius = 5,
-    maskColor = 'rgba(10, 10, 10, .25)',
-  }: MiniMapProps) => {
-    const containerWidth = useStoreState((s) => s.width);
-    const containerHeight = useStoreState((s) => s.height);
-    const [tX, tY, tScale] = useStoreState((s) => s.transform);
-    const nodes = useStoreState((s) => s.nodes);
+const MiniMap = ({
+  style = { backgroundColor: '#f8f8f8' },
+  className,
+  nodeColor = '#ddd',
+  nodeBorderRadius = 5,
+  maskColor = 'rgba(10, 10, 10, .25)',
+}: MiniMapProps) => {
+  const containerWidth = useStoreState((s) => s.width);
+  const containerHeight = useStoreState((s) => s.height);
+  const [tX, tY, tScale] = useStoreState((s) => s.transform);
+  const nodes = useStoreState((s) => s.nodes);

-    const mapClasses = cc(['react-flow__minimap', className]);
-    const elementWidth = (style.width || defaultWidth)! as number;
-    const elementHeight = (style.height || defaultHeight)! as number;
-    const nodeColorFunc = (nodeColor instanceof Function ? nodeColor : () => nodeColor) as StringFunc;
-    const hasNodes = nodes && nodes.length;
-    const bb = getRectOfNodes(nodes);
-    const viewBB: Rect = {
-      x: -tX / tScale,
-      y: -tY / tScale,
-      width: containerWidth / tScale,
-      height: containerHeight / tScale,
-    };
-    const boundingRect = hasNodes ? getBoundsofRects(bb, viewBB) : viewBB;
-    const scaledWidth = boundingRect.width / elementWidth;
-    const scaledHeight = boundingRect.height / elementHeight;
-    const viewScale = Math.max(scaledWidth, scaledHeight);
-    const viewWidth = viewScale * elementWidth;
-    const viewHeight = viewScale * elementHeight;
-    const offset = 5 * viewScale;
-    const x = boundingRect.x - (viewWidth - boundingRect.width) / 2 - offset;
-    const y = boundingRect.y - (viewHeight - boundingRect.height) / 2 - offset;
-    const width = viewWidth + offset * 2;
-    const height = viewHeight + offset * 2;
+  const mapClasses = cc(['react-flow__minimap', className]);
+  const elementWidth = (style.width || defaultWidth)! as number;
+  const elementHeight = (style.height || defaultHeight)! as number;
+  const nodeColorFunc = (nodeColor instanceof Function ? nodeColor : () => nodeColor) as StringFunc;
+  const hasNodes = nodes && nodes.length;
+  const bb = getRectOfNodes(nodes);
+  const viewBB: Rect = {
+    x: -tX / tScale,
+    y: -tY / tScale,
+    width: containerWidth / tScale,
+    height: containerHeight / tScale,
+  };
+  const boundingRect = hasNodes ? getBoundsofRects(bb, viewBB) : viewBB;
+  const scaledWidth = boundingRect.width / elementWidth;
+  const scaledHeight = boundingRect.height / elementHeight;
+  const viewScale = Math.max(scaledWidth, scaledHeight);
+  const viewWidth = viewScale * elementWidth;
+  const viewHeight = viewScale * elementHeight;
+  const offset = 5 * viewScale;
+  const x = boundingRect.x - (viewWidth - boundingRect.width) / 2 - offset;
+  const y = boundingRect.y - (viewHeight - boundingRect.height) / 2 - offset;
+  const width = viewWidth + offset * 2;
+  const height = viewHeight + offset * 2;

-    return (
-      <svg
-        width={elementWidth}
-        height={elementHeight}
-        viewBox={`${x} ${y} ${width} ${height}`}
-        style={style}
-        className={mapClasses}
-      >
-        {nodes
-          .filter((node) => !node.isHidden)
-          .map((node) => (
-            <MiniMapNode
-              key={node.id}
-              x={node.__rf.position.x}
-              y={node.__rf.position.y}
-              width={node.__rf.width}
-              height={node.__rf.height}
-              style={node.style}
-              color={nodeColorFunc(node)}
-              borderRadius={nodeBorderRadius}
-            />
-          ))}
-        <path
-          className="react-flow__minimap-mask"
-          d={`M${x - offset},${y - offset}h${width + offset * 2}v${height + offset * 2}h${-width - offset * 2}z
+  return (
+    <svg
+      width={elementWidth}
+      height={elementHeight}
+      viewBox={`${x} ${y} ${width} ${height}`}
+      style={style}
+      className={mapClasses}
+    >
+      {nodes
+        .filter((node) => !node.isHidden)
+        .map((node) => (
+          <MiniMapNode
+            key={node.id}
+            x={node.__rf.position.x}
+            y={node.__rf.position.y}
+            width={node.__rf.width}
+            height={node.__rf.height}
+            style={node.style}
+            color={nodeColorFunc(node)}
+            borderRadius={nodeBorderRadius}
+          />
+        ))}
+      <path
+        className="react-flow__minimap-mask"
+        d={`M${x - offset},${y - offset}h${width + offset * 2}v${height + offset * 2}h${-width - offset * 2}z
        M${viewBB.x},${viewBB.y}h${viewBB.width}v${viewBB.height}h${-viewBB.width}z`}
-          fill={maskColor}
-          fillRule="evenodd"
-        />
-      </svg>
-    );
-  }
-);
+        fill={maskColor}
+        fillRule="evenodd"
+      />
+    </svg>
+  );
+};

 MiniMap.displayName = 'MiniMap';

-export default MiniMap;
+export default memo(MiniMap);