From 1e447a204cbf19f3c69566800877a4fec992997b Mon Sep 17 00:00:00 2001 From: moklick Date: Fri, 15 May 2020 21:53:13 +0200 Subject: [PATCH] refactor(types): use types for prop type functions --- src/components/Handle/BaseHandle.tsx | 3 ++- src/components/Handle/index.tsx | 22 ++++------------------ src/components/Nodes/wrapNode.tsx | 2 +- src/container/EdgeRenderer/index.tsx | 2 +- src/container/GraphView/index.tsx | 8 ++++---- src/container/NodeRenderer/index.tsx | 10 +++++----- src/container/ReactFlow/index.tsx | 8 ++++---- src/types/index.ts | 13 +++++++++++-- 8 files changed, 32 insertions(+), 36 deletions(-) diff --git a/src/components/Handle/BaseHandle.tsx b/src/components/Handle/BaseHandle.tsx index 82ca7dcc..61772853 100644 --- a/src/components/Handle/BaseHandle.tsx +++ b/src/components/Handle/BaseHandle.tsx @@ -1,4 +1,4 @@ -import React, { memo, MouseEvent as ReactMouseEvent } from 'react'; +import React, { memo, MouseEvent as ReactMouseEvent, CSSProperties } from 'react'; import cx from 'classnames'; import { HandleType, ElementId, Position, XYPosition, OnConnectFunc, Connection } from '../../types'; @@ -16,6 +16,7 @@ interface BaseHandleProps { isValidConnection: ValidConnectionFunc; id?: ElementId | boolean; className?: string; + style?: CSSProperties; } type Result = { diff --git a/src/components/Handle/index.tsx b/src/components/Handle/index.tsx index 459380aa..61b245f8 100644 --- a/src/components/Handle/index.tsx +++ b/src/components/Handle/index.tsx @@ -4,36 +4,22 @@ import { useStoreActions, useStoreState } from '../../store/hooks'; import BaseHandle from './BaseHandle'; import NodeIdContext from '../../contexts/NodeIdContext'; -import { - HandleType, - ElementId, - Position, - Connection, - OnConnectFunc, -} from '../../types'; - -interface HandleProps { - type: HandleType; - position: Position; - onConnect?: OnConnectFunc; - isValidConnection?: (connection: Connection) => boolean; - id?: string; -} +import { HandleProps, ElementId, Position, Connection } from '../../types'; const Handle = memo( ({ - onConnect = _ => {}, type = 'source', position = Position.Top, + onConnect = () => {}, isValidConnection = () => true, ...rest }: HandleProps) => { const nodeId = useContext(NodeIdContext) as ElementId; - const { setPosition, setSourceId } = useStoreActions(a => ({ + const { setPosition, setSourceId } = useStoreActions((a) => ({ setPosition: a.setConnectionPosition, setSourceId: a.setConnectionSourceId, })); - const onConnectAction = useStoreState(s => s.onConnect); + const onConnectAction = useStoreState((s) => s.onConnect); const onConnectExtended = (params: Connection) => { onConnectAction(params); onConnect(params); diff --git a/src/components/Nodes/wrapNode.tsx b/src/components/Nodes/wrapNode.tsx index fde380b0..3522fa56 100644 --- a/src/components/Nodes/wrapNode.tsx +++ b/src/components/Nodes/wrapNode.tsx @@ -60,7 +60,7 @@ const onDrag = ( }; const onStop = ( - onNodeDragStop: (params: Node) => void, + onNodeDragStop: (node: Node) => void, isDragging: boolean, setDragging: (isDragging: boolean) => void, id: ElementId, diff --git a/src/container/EdgeRenderer/index.tsx b/src/container/EdgeRenderer/index.tsx index 855b4fdb..917182e0 100644 --- a/src/container/EdgeRenderer/index.tsx +++ b/src/container/EdgeRenderer/index.tsx @@ -11,7 +11,7 @@ interface EdgeRendererProps { edgeTypes: any; connectionLineStyle?: CSSProperties; connectionLineType?: string; - onElementClick?: () => void; + onElementClick?: (element: Node | Edge) => void; } interface EdgePositions { diff --git a/src/container/GraphView/index.tsx b/src/container/GraphView/index.tsx index 3423c334..baa1a170 100644 --- a/src/container/GraphView/index.tsx +++ b/src/container/GraphView/index.tsx @@ -13,14 +13,14 @@ import useGlobalKeyHandler from '../../hooks/useGlobalKeyHandler'; import useElementUpdater from '../../hooks/useElementUpdater'; import { getDimensions } from '../../utils'; import { fitView, zoomIn, zoomOut } from '../../utils/graph'; -import { Elements, NodeTypesType, EdgeTypesType, GridType, OnLoadFunc } from '../../types'; +import { Elements, NodeTypesType, EdgeTypesType, GridType, OnLoadFunc, Node, Edge, Connection } from '../../types'; export interface GraphViewProps { elements: Elements; - onElementClick: () => void; + onElementClick: (element: Node | Edge) => void; onElementsRemove: (elements: Elements) => void; - onNodeDragStop: () => void; - onConnect: () => void; + onNodeDragStop: (node: Node) => void; + onConnect: (conneciton: Connection) => void; onLoad: OnLoadFunc; onMove: () => void; selectionKeyCode: number; diff --git a/src/container/NodeRenderer/index.tsx b/src/container/NodeRenderer/index.tsx index eeb410ec..8bc6831f 100644 --- a/src/container/NodeRenderer/index.tsx +++ b/src/container/NodeRenderer/index.tsx @@ -2,12 +2,12 @@ import React, { memo, ComponentType } from 'react'; import { useStoreState } from '../../store/hooks'; import { getNodesInside } from '../../utils/graph'; -import { Node, Transform, NodeTypesType, WrapNodeProps, Elements } from '../../types'; +import { Node, Transform, NodeTypesType, WrapNodeProps, Elements, Edge } from '../../types'; interface NodeRendererProps { nodeTypes: NodeTypesType; - onElementClick: () => void; - onNodeDragStop: () => void; + onElementClick: (element: Node | Edge) => void; + onNodeDragStop: (node: Node) => void; onlyRenderVisibleNodes?: boolean; } @@ -47,7 +47,7 @@ function renderNode( } const NodeRenderer = memo(({ onlyRenderVisibleNodes = true, ...props }: NodeRendererProps) => { - const { nodes, transform, selectedElements, width, height, isInteractive } = useStoreState(s => ({ + const { nodes, transform, selectedElements, width, height, isInteractive } = useStoreState((s) => ({ nodes: s.nodes, transform: s.transform, selectedElements: s.selectedElements, @@ -67,7 +67,7 @@ const NodeRenderer = memo(({ onlyRenderVisibleNodes = true, ...props }: NodeRend return (
- {renderNodes.map(node => renderNode(node, props, transform, selectedElements, isInteractive))} + {renderNodes.map((node) => renderNode(node, props, transform, selectedElements, isInteractive))}
); }); diff --git a/src/container/ReactFlow/index.tsx b/src/container/ReactFlow/index.tsx index 371a0deb..b967ddb8 100644 --- a/src/container/ReactFlow/index.tsx +++ b/src/container/ReactFlow/index.tsx @@ -18,16 +18,16 @@ import StraightEdge from '../../components/Edges/StraightEdge'; import StepEdge from '../../components/Edges/StepEdge'; import { createEdgeTypes } from '../EdgeRenderer/utils'; import store from '../../store'; -import { Elements, NodeTypesType, EdgeTypesType, GridType, OnLoadFunc } from '../../types'; +import { Elements, NodeTypesType, EdgeTypesType, GridType, OnLoadFunc, Node, Edge, Connection } from '../../types'; import '../../style.css'; export interface ReactFlowProps extends Omit, 'onLoad'> { elements: Elements; - onElementClick: () => void; + onElementClick: (element: Node | Edge) => void; onElementsRemove: (elements: Elements) => void; - onNodeDragStop: () => void; - onConnect: () => void; + onNodeDragStop: (node: Node) => void; + onConnect: (connection: Connection) => void; onLoad: OnLoadFunc; onMove: () => void; nodeTypes: NodeTypesType; diff --git a/src/types/index.ts b/src/types/index.ts index 231a38a4..96184f60 100644 --- a/src/types/index.ts +++ b/src/types/index.ts @@ -109,7 +109,7 @@ export interface NodeComponentProps { targetPosition?: Position; sourcePosition?: Position; onClick?: (node: Node) => void | undefined; - onNodeDragStop?: () => any; + onNodeDragStop?: (node: Node) => void; style?: CSSProperties; } @@ -147,13 +147,22 @@ export type Connection = { target: ElementId | null; }; -export type OnConnectFunc = (params: Connection) => void; +export type OnConnectFunc = (connection: Connection) => void; export interface HandleElement extends XYPosition, Dimensions { id?: ElementId | null; position: Position; } +export interface HandleProps { + type: HandleType; + position: Position; + onConnect?: OnConnectFunc; + isValidConnection?: (connection: Connection) => boolean; + id?: string; + style?: CSSProperties; +} + export interface EdgeCompProps { id: ElementId; source: ElementId;