refactor(styles): cleanup

2022-05-17 19:03:43 +02:00
parent a5cf4e6257
commit 7d13461126
4 changed files with 67 additions and 103 deletions
@@ -1,4 +1,4 @@
-import React, { memo, useContext, useCallback, HTMLAttributes, forwardRef } from 'react';
+import React, { memo, useContext, HTMLAttributes, forwardRef } from 'react';
 import cc from 'classcat';
 import shallow from 'zustand/shallow';

@@ -56,99 +56,71 @@ const Handle = forwardRef<HTMLDivElement, HandleComponentProps>(
    const handleId = id || null;
    const isTarget = type === 'target';

-    const onConnectExtended = useCallback(
-      (params: Connection) => {
-        const { defaultEdgeOptions } = store.getState();
+    const onConnectExtended = (params: Connection) => {
+      const { defaultEdgeOptions } = store.getState();

-        const edgeParams = {
-          ...defaultEdgeOptions,
-          ...params,
-        };
-        if (hasDefaultEdges) {
-          const { edges } = store.getState();
-          store.setState({ edges: addEdge(edgeParams, edges) });
-        }
+      const edgeParams = {
+        ...defaultEdgeOptions,
+        ...params,
+      };
+      if (hasDefaultEdges) {
+        const { edges } = store.getState();
+        store.setState({ edges: addEdge(edgeParams, edges) });
+      }

-        onConnectAction?.(edgeParams);
-        onConnect?.(edgeParams);
-      },
-      [hasDefaultEdges, onConnectAction, onConnect]
-    );
+      onConnectAction?.(edgeParams);
+      onConnect?.(edgeParams);
+    };

-    const onMouseDownHandler = useCallback(
-      (event: React.MouseEvent<HTMLDivElement>) => {
-        if (event.button === 0) {
-          handleMouseDown(
-            event,
-            handleId,
-            nodeId,
-            store.setState,
-            onConnectExtended,
-            isTarget,
-            isValidConnection,
-            connectionMode,
-            undefined,
-            undefined,
-            onConnectStart,
-            onConnectStop,
-            onConnectEnd
-          );
-        }
-        onMouseDown?.(event);
-      },
-      [
-        handleId,
-        nodeId,
-        onConnectExtended,
-        isTarget,
-        isValidConnection,
+    const onMouseDownHandler = (event: React.MouseEvent<HTMLDivElement>) => {
+      if (event.button === 0) {
+        handleMouseDown(
+          event,
+          handleId,
+          nodeId,
+          store.setState,
+          onConnectExtended,
+          isTarget,
+          isValidConnection,
+          connectionMode,
+          undefined,
+          undefined,
+          onConnectStart,
+          onConnectStop,
+          onConnectEnd
+        );
+      }
+      onMouseDown?.(event);
+    };
+
+    const onClick = (event: React.MouseEvent) => {
+      if (!connectionStartHandle) {
+        onConnectStart?.(event, { nodeId, handleId, handleType: type });
+        store.setState({ connectionStartHandle: { nodeId, type, handleId } });
+        return;
+      }
+
+      const doc = getHostForElement(event.target as HTMLElement);
+      const { connection, isValid } = checkElementBelowIsValid(
+        event as unknown as MouseEvent,
        connectionMode,
-        onConnectStart,
-        onConnectStop,
-        onConnectEnd,
-      ]
-    );
+        connectionStartHandle.type === 'target',
+        connectionStartHandle.nodeId,
+        connectionStartHandle.handleId || null,
+        isValidConnection,
+        doc
+      );

-    const onClick = useCallback(
-      (event: React.MouseEvent) => {
-        if (!connectionStartHandle) {
-          onConnectStart?.(event, { nodeId, handleId, handleType: type });
-          store.setState({ connectionStartHandle: { nodeId, type, handleId } });
-        } else {
-          const doc = getHostForElement(event.target as HTMLElement);
-          const { connection, isValid } = checkElementBelowIsValid(
-            event as unknown as MouseEvent,
-            connectionMode,
-            connectionStartHandle.type === 'target',
-            connectionStartHandle.nodeId,
-            connectionStartHandle.handleId || null,
-            isValidConnection,
-            doc
-          );
+      onConnectStop?.(event as unknown as MouseEvent);

-          onConnectStop?.(event as unknown as MouseEvent);
+      if (isValid) {
+        onConnectExtended(connection);
+      }

-          if (isValid) {
-            onConnectExtended(connection);
-          }
+      onConnectEnd?.(event as unknown as MouseEvent);

-          onConnectEnd?.(event as unknown as MouseEvent);
-
-          store.setState({ connectionStartHandle: null });
-        }
-      },
-      [
-        connectionStartHandle,
-        onConnectStart,
-        onConnectExtended,
-        onConnectStop,
-        onConnectEnd,
-        isTarget,
-        nodeId,
-        handleId,
-        type,
-      ]
-    );
+      store.setState({ connectionStartHandle: null });
+    };

    const handleClasses = cc([
      'react-flow__handle',