From 3960c3bf677559c37185f7eaf233598919cb0510 Mon Sep 17 00:00:00 2001 From: moklick Date: Sat, 23 Dec 2023 17:35:55 +0100 Subject: [PATCH] chore(react): simplify useEdgesState/useNodesState --- .../src/examples/CustomMiniMapNode/index.tsx | 4 +- .../react/src/examples/CustomNode/index.tsx | 5 +- .../react/src/examples/DragNDrop/index.tsx | 2 +- examples/react/src/examples/Empty/index.tsx | 4 +- .../examples/NodeTypesObjectChange/index.tsx | 2 +- .../examples/UseUpdateNodeInternals/index.tsx | 2 +- .../react/src/examples/Validation/index.tsx | 2 +- packages/react/src/hooks/useConnection.ts | 1 + .../react/src/hooks/useNodesEdgesState.ts | 46 +++++++------------ 9 files changed, 29 insertions(+), 39 deletions(-) diff --git a/examples/react/src/examples/CustomMiniMapNode/index.tsx b/examples/react/src/examples/CustomMiniMapNode/index.tsx index d8f584b6..0b62196f 100644 --- a/examples/react/src/examples/CustomMiniMapNode/index.tsx +++ b/examples/react/src/examples/CustomMiniMapNode/index.tsx @@ -32,8 +32,8 @@ const CustomMiniMapNode = ({ x, y, width, height, color }: MiniMapNodeProps) => ); const CustomMiniMapNodeFlow = () => { - const [nodes, setNodes, onNodesChange] = useNodesState([]); - const [edges, setEdges, onEdgesChange] = useEdgesState([]); + const [nodes, setNodes, onNodesChange] = useNodesState([]); + const [edges, setEdges, onEdgesChange] = useEdgesState([]); const onConnect = useCallback((params: Connection | Edge) => setEdges((els) => addEdge(params, els)), [setEdges]); const addRandomNode = () => { diff --git a/examples/react/src/examples/CustomNode/index.tsx b/examples/react/src/examples/CustomNode/index.tsx index 9c62f46a..ce7d0f62 100644 --- a/examples/react/src/examples/CustomNode/index.tsx +++ b/examples/react/src/examples/CustomNode/index.tsx @@ -12,6 +12,7 @@ import { useNodesState, useEdgesState, Background, + Edge, } from '@xyflow/react'; import ColorSelectorNode from './ColorSelectorNode'; @@ -33,8 +34,8 @@ const nodeTypes = { }; const CustomNodeFlow = () => { - const [nodes, setNodes, onNodesChange] = useNodesState([]); - const [edges, setEdges, onEdgesChange] = useEdgesState([]); + const [nodes, setNodes, onNodesChange] = useNodesState([]); + const [edges, setEdges, onEdgesChange] = useEdgesState([]); const [bgColor, setBgColor] = useState(initBgColor); diff --git a/examples/react/src/examples/DragNDrop/index.tsx b/examples/react/src/examples/DragNDrop/index.tsx index d11cd902..83c7bb4e 100644 --- a/examples/react/src/examples/DragNDrop/index.tsx +++ b/examples/react/src/examples/DragNDrop/index.tsx @@ -39,7 +39,7 @@ const nodeOrigin: NodeOrigin = [0.5, 0.5]; const DnDFlow = () => { const [reactFlowInstance, setReactFlowInstance] = useState(); const [nodes, setNodes, onNodesChange] = useNodesState(initialNodes); - const [edges, setEdges, onEdgesChange] = useEdgesState([]); + const [edges, setEdges, onEdgesChange] = useEdgesState([]); const onConnect = (params: Connection | Edge) => setEdges((eds) => addEdge(params, eds)); const onInit = (rfi: ReactFlowInstance) => setReactFlowInstance(rfi); diff --git a/examples/react/src/examples/Empty/index.tsx b/examples/react/src/examples/Empty/index.tsx index e162daad..4dcd996e 100644 --- a/examples/react/src/examples/Empty/index.tsx +++ b/examples/react/src/examples/Empty/index.tsx @@ -26,8 +26,8 @@ const buttonStyle: CSSProperties = { }; const EmptyFlow = () => { - const [nodes, setNodes, onNodesChange] = useNodesState([]); - const [edges, setEdges, onEdgesChange] = useEdgesState([]); + const [nodes, setNodes, onNodesChange] = useNodesState([]); + const [edges, setEdges, onEdgesChange] = useEdgesState([]); const onConnect = useCallback((params: Connection | Edge) => setEdges((els) => addEdge(params, els)), [setEdges]); const addRandomNode = () => { diff --git a/examples/react/src/examples/NodeTypesObjectChange/index.tsx b/examples/react/src/examples/NodeTypesObjectChange/index.tsx index 01a0d993..46b5cd5e 100644 --- a/examples/react/src/examples/NodeTypesObjectChange/index.tsx +++ b/examples/react/src/examples/NodeTypesObjectChange/index.tsx @@ -66,7 +66,7 @@ const nodeTypesObjects: NodeTypesObject = { const NodeTypeChangeFlow = () => { const [nodeTypesId, setNodeTypesId] = useState('a'); const [nodes, , onNodesChange] = useNodesState(initialNodes); - const [edges, setEdges, onEdgesChange] = useEdgesState([]); + const [edges, setEdges, onEdgesChange] = useEdgesState([]); const onConnect = useCallback((params: Connection | Edge) => setEdges((eds) => addEdge(params, eds)), [setEdges]); const changeType = () => setNodeTypesId((nt) => (nt === 'a' ? 'b' : 'a')); diff --git a/examples/react/src/examples/UseUpdateNodeInternals/index.tsx b/examples/react/src/examples/UseUpdateNodeInternals/index.tsx index 371d58b6..2cd405b7 100644 --- a/examples/react/src/examples/UseUpdateNodeInternals/index.tsx +++ b/examples/react/src/examples/UseUpdateNodeInternals/index.tsx @@ -33,7 +33,7 @@ const getId = (): string => `${id++}`; const UpdateNodeInternalsFlow = () => { const [nodes, setNodes, onNodesChange] = useNodesState(initialNodes); - const [edges, setEdges, onEdgesChange] = useEdgesState([]); + const [edges, setEdges, onEdgesChange] = useEdgesState([]); const onConnect = useCallback((params: Edge | Connection) => setEdges((els) => addEdge(params, els)), [setEdges]); const { screenToFlowPosition } = useReactFlow(); diff --git a/examples/react/src/examples/Validation/index.tsx b/examples/react/src/examples/Validation/index.tsx index 3e89b3f8..936e1396 100644 --- a/examples/react/src/examples/Validation/index.tsx +++ b/examples/react/src/examples/Validation/index.tsx @@ -55,7 +55,7 @@ const nodeTypes: NodeTypes = { const ValidationFlow = () => { const [value, setValue] = useState(0); const [nodes, , onNodesChange] = useNodesState(initialNodes); - const [edges, setEdges, onEdgesChange] = useEdgesState([]); + const [edges, setEdges, onEdgesChange] = useEdgesState([]); const onConnectStart: OnConnectStart = useCallback( (event, params) => { diff --git a/packages/react/src/hooks/useConnection.ts b/packages/react/src/hooks/useConnection.ts index 641c22c8..3544f31f 100644 --- a/packages/react/src/hooks/useConnection.ts +++ b/packages/react/src/hooks/useConnection.ts @@ -13,6 +13,7 @@ const selector = (s: ReactFlowStore) => ({ /** * Hook for accessing the ongoing connection. * + * @public * @returns ongoing connection: startHandle, endHandle, status, position */ export function useConnection(): { diff --git a/packages/react/src/hooks/useNodesEdgesState.ts b/packages/react/src/hooks/useNodesEdgesState.ts index b0976b57..c134472b 100644 --- a/packages/react/src/hooks/useNodesEdgesState.ts +++ b/packages/react/src/hooks/useNodesEdgesState.ts @@ -1,34 +1,8 @@ -/* eslint-disable @typescript-eslint/no-explicit-any */ -import { useState, useCallback, type SetStateAction, type Dispatch } from 'react'; +import { useState, useCallback, type Dispatch, type SetStateAction } from 'react'; import { applyNodeChanges, applyEdgeChanges } from '../utils/changes'; import type { Node, NodeChange, Edge, EdgeChange } from '../types'; -type ApplyChanges = (changes: ChangesType[], items: ItemType[]) => ItemType[]; -type OnChange = (changes: ChangesType[]) => void; - -function createUseItemsState( - applyChanges: ApplyChanges -): ( - initialItems: NodeType[] -) => [NodeType[], Dispatch>, OnChange]; -function createUseItemsState( - applyChanges: ApplyChanges -): ( - initialItems: EdgeType[] -) => [EdgeType[], Dispatch>, OnChange]; -function createUseItemsState( - applyChanges: ApplyChanges -): (initialItems: any[]) => [any[], Dispatch>, OnChange] { - return (initialItems: any[]) => { - const [items, setItems] = useState(initialItems); - - const onItemsChange = useCallback((changes: any[]) => setItems((items: any) => applyChanges(changes, items)), []); - - return [items, setItems, onItemsChange]; - }; -} - /** * Hook for managing the state of nodes - should only be used for prototyping / simple use cases. * @@ -36,7 +10,14 @@ function createUseItemsState( * @param initialNodes * @returns an array [nodes, setNodes, onNodesChange] */ -export const useNodesState = createUseItemsState(applyNodeChanges); +export function useNodesState( + initialNodes: NodeType[] +): [NodeType[], Dispatch>, (changes: NodeChange[]) => void] { + const [nodes, setNodes] = useState(initialNodes); + const onNodesChange = useCallback((changes: NodeChange[]) => setNodes((nds) => applyNodeChanges(changes, nds)), []); + + return [nodes, setNodes, onNodesChange]; +} /** * Hook for managing the state of edges - should only be used for prototyping / simple use cases. @@ -45,4 +26,11 @@ export const useNodesState = createUseItemsState(applyNodeChanges); * @param initialEdges * @returns an array [edges, setEdges, onEdgesChange] */ -export const useEdgesState = createUseItemsState(applyEdgeChanges); +export function useEdgesState( + initialEdges: EdgeType[] +): [EdgeType[], Dispatch>, (changes: EdgeChange[]) => void] { + const [edges, setEdges] = useState(initialEdges); + const onEdgesChange = useCallback((changes: EdgeChange[]) => setEdges((eds) => applyEdgeChanges(changes, eds)), []); + + return [edges, setEdges, onEdgesChange]; +}