refactor(useReactFlow): pass generic nodedata and edgedata closes #1944

src/hooks/useNodesEdgesState.ts

@@ -8,20 +8,27 @@ type OnChange<ChangesType> = (changes: ChangesType[]) => void;
 
 // returns a hook that can be used liked this:
 // const [nodes, setNodes, onNodesChange] = useNodesState(initialNodes);
-function createUseItemsState<ItemType, ChangesType>(
-  applyChangesFunction: ApplyChanges<ItemType, ChangesType>
-): (initialItems: ItemType[]) => [ItemType[], Dispatch<SetStateAction<ItemType[]>>, OnChange<ChangesType>] {
-  return (initialItems: ItemType[]) => {
-    const [items, setItems] = useState<ItemType[]>(initialItems);
+function createUseItemsState(
+  applyChanges: ApplyChanges<Node, NodeChange>
+): <NodeData = any>(
+  initialItems: Node<NodeData>[]
+) => [Node<NodeData>[], Dispatch<SetStateAction<Node<NodeData>>>, OnChange<NodeChange>];
+function createUseItemsState(
+  applyChanges: ApplyChanges<Edge, EdgeChange>
+): <EdgeData = any>(
+  initialItems: Edge<EdgeData>[]
+) => [Edge<EdgeData>[], Dispatch<SetStateAction<Edge<EdgeData>>>, OnChange<EdgeChange>];
+function createUseItemsState(
+  applyChanges: ApplyChanges<any, any>
+): (initialItems: any[]) => [any[], Dispatch<SetStateAction<any>>, OnChange<any>] {
+  return (initialItems: any) => {
+    const [items, setItems] = useState(initialItems);
 
-    const onItemsChange = useCallback(
-      (changes: ChangesType[]) => setItems((items) => applyChangesFunction(changes, items)),
-      []
-    );
+    const onItemsChange = useCallback((changes: any[]) => setItems((items: any) => applyChanges(changes, items)), []);
 
     return [items, setItems, onItemsChange];
   };
 }
 
-export const useNodesState = createUseItemsState<Node, NodeChange>(applyNodeChanges as ApplyChanges<Node, NodeChange>);
-export const useEdgesState = createUseItemsState<Edge, EdgeChange>(applyEdgeChanges as ApplyChanges<Edge, EdgeChange>);
+export const useNodesState = createUseItemsState(applyNodeChanges);
+export const useEdgesState = createUseItemsState(applyEdgeChanges);

src/hooks/useReactFlow.ts

@@ -4,7 +4,7 @@ import useViewportHelper from './useViewportHelper';
 import { useStoreApi } from '../store';
 import { ReactFlowInstance, Instance } from '../types';
 
-export default function useReactFlow<NodeData, EdgeData>(): ReactFlowInstance<NodeData, EdgeData> {
+export default function useReactFlow<NodeData = any, EdgeData = any>(): ReactFlowInstance<NodeData, EdgeData> {
   const { initialized: viewportInitialized, ...viewportHelperFunctions } = useViewportHelper();
   const store = useStoreApi();
 

src/utils/changes.ts

@@ -100,12 +100,12 @@ function applyChanges(changes: NodeChange[] | EdgeChange[], elements: any[]): an
   }, initElements);
 }
 
-export function applyNodeChanges(changes: NodeChange[], nodes: Node[]): Node[] {
-  return applyChanges(changes, nodes) as Node[];
+export function applyNodeChanges<NodeData = any>(changes: NodeChange[], nodes: Node<NodeData>[]): Node<NodeData>[] {
+  return applyChanges(changes, nodes) as Node<NodeData>[];
 }
 
-export function applyEdgeChanges(changes: EdgeChange[], edges: Edge[]): Edge[] {
-  return applyChanges(changes, edges) as Edge[];
+export function applyEdgeChanges<EdgeData = any>(changes: EdgeChange[], edges: Edge<EdgeData>[]): Edge<EdgeData>[] {
+  return applyChanges(changes, edges) as Edge<EdgeData>[];
 }
 
 export const createSelectionChange = (id: string, selected: boolean) => ({

src/utils/graph.ts

@@ -1,6 +1,6 @@
 import { Selection as D3Selection } from 'd3';
-import { boxToRect, clamp, getBoundsOfBoxes, rectToBox } from '../utils';
 
+import { boxToRect, clamp, getBoundsOfBoxes, rectToBox } from '../utils';
 import { Node, Edge, Connection, EdgeMarkerType, Transform, XYPosition, Rect, NodeInternals } from '../types';
 
 export const isEdge = (element: Node | Connection | Edge): element is Edge =>