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
@@ -23,70 +23,68 @@ interface EdgeWrapperProps {
 }

 export default (EdgeComponent: ComponentType<EdgeCompProps>) => {
-  const EdgeWrapper = memo(
-    ({
-      id,
-      source,
-      target,
-      type,
-      animated,
-      selected,
-      onClick,
-      elementsSelectable,
-      label,
-      labelStyle,
-      labelShowBg,
-      labelBgStyle,
-      className,
-      isHidden,
-      data,
-      ...rest
-    }: EdgeWrapperProps) => {
-      const setSelectedElements = useStoreActions((a) => a.setSelectedElements);
+  const EdgeWrapper = ({
+    id,
+    source,
+    target,
+    type,
+    animated,
+    selected,
+    onClick,
+    elementsSelectable,
+    label,
+    labelStyle,
+    labelShowBg,
+    labelBgStyle,
+    className,
+    isHidden,
+    data,
+    ...rest
+  }: EdgeWrapperProps) => {
+    const setSelectedElements = useStoreActions((a) => a.setSelectedElements);

-      if (isHidden) {
-        return null;
+    if (isHidden) {
+      return null;
+    }
+
+    const edgeClasses = cc(['react-flow__edge', `react-flow__edge-${type}`, className, { selected, animated }]);
+    const edgeGroupStyle: CSSProperties = {
+      pointerEvents: elementsSelectable ? 'all' : 'none',
+    };
+    const onEdgeClick = (): void => {
+      if (!elementsSelectable) {
+        return;
      }

-      const edgeClasses = cc(['react-flow__edge', `react-flow__edge-${type}`, className, { selected, animated }]);
-      const edgeGroupStyle: CSSProperties = {
-        pointerEvents: elementsSelectable ? 'all' : 'none',
-      };
-      const onEdgeClick = (): void => {
-        if (!elementsSelectable) {
-          return;
-        }
+      setSelectedElements({ id, source, target });

-        setSelectedElements({ id, source, target });
+      if (onClick) {
+        onClick({ id, source, target, type });
+      }
+    };

-        if (onClick) {
-          onClick({ id, source, target, type });
-        }
-      };
-
-      return (
-        <g className={edgeClasses} onClick={onEdgeClick} style={edgeGroupStyle}>
-          <EdgeComponent
-            id={id}
-            source={source}
-            target={target}
-            type={type}
-            animated={animated}
-            selected={selected}
-            onClick={onClick}
-            label={label}
-            labelStyle={labelStyle}
-            labelShowBg={labelShowBg}
-            labelBgStyle={labelBgStyle}
-            data={data}
-            {...rest}
-          />
-        </g>
-      );
-    }
-  );
+    return (
+      <g className={edgeClasses} onClick={onEdgeClick} style={edgeGroupStyle}>
+        <EdgeComponent
+          id={id}
+          source={source}
+          target={target}
+          type={type}
+          animated={animated}
+          selected={selected}
+          onClick={onClick}
+          label={label}
+          labelStyle={labelStyle}
+          labelShowBg={labelShowBg}
+          labelBgStyle={labelBgStyle}
+          data={data}
+          {...rest}
+        />
+      </g>
+    );
+  };

  EdgeWrapper.displayName = 'EdgeWrapper';

-  return EdgeWrapper;
+  return memo(EdgeWrapper);
 };