alighasami/xyflow
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

refactor(hooks): rename useUpdateNodeData to useSetNodeData and adjust api

Browse Source
This commit is contained in:
moklick
2023-12-12 13:51:58 +01:00
parent 6cf8589ea8
commit 75979922ea
11 changed files with 72 additions and 50 deletions
Download Patch File Download Diff File Expand all files Collapse all files

6
examples/react/src/examples/UseNodesData/TextNode.tsx
View File

@@ -1,10 +1,10 @@
import { memo, ChangeEventHandler } from 'react';
import { Position, NodeProps, useUpdateNodeData, Handle } from '@xyflow/react';
import { Position, NodeProps, useSetNodeData, Handle } from '@xyflow/react';
function TextNode({ id, data }: NodeProps) {
const updateNodeData = useUpdateNodeData();
const setNodeData = useSetNodeData();
const onChange: ChangeEventHandler<HTMLInputElement> = (evt) => updateNodeData(id, { text: evt.target.value });
const onChange: ChangeEventHandler<HTMLInputElement> = (evt) => setNodeData(id, { text: evt.target.value });
return (
<div style={{ background: '#eee', color: '#222', padding: 10, fontSize: 12, borderRadius: 10 }}>

6
examples/react/src/examples/UseNodesData/UppercaseNode.tsx
View File

@@ -1,15 +1,15 @@
import { memo, useEffect } from 'react';
import { Position, NodeProps, useUpdateNodeData, Handle, useHandleConnections, useNodesData } from '@xyflow/react';
import { Position, NodeProps, useSetNodeData, Handle, useHandleConnections, useNodesData } from '@xyflow/react';
function UppercaseNode({ id }: NodeProps) {
const connections = useHandleConnections({
type: 'target',
});
const nodeData = useNodesData(connections[0]?.source);
const updateNodeData = useUpdateNodeData();
const setNodeData = useSetNodeData();
useEffect(() => {
updateNodeData(id, { text: nodeData?.text.toUpperCase() });
setNodeData(id, { text: nodeData?.text.toUpperCase() });
}, [nodeData]);
return (

1
examples/svelte/src/routes/examples/usenodesdata/ResultNode.svelte
View File

@@ -4,7 +4,6 @@
Position,
useHandleConnections,
useNodesData,
useUpdateNodeData,
type NodeProps
} from '@xyflow/svelte';

6
examples/svelte/src/routes/examples/usenodesdata/TextNode.svelte
View File

@@ -1,12 +1,12 @@
<script lang="ts">
import { Handle, Position, type NodeProps, useUpdateNodeData } from '@xyflow/svelte';
import { Handle, Position, type NodeProps, useSetNodeData } from '@xyflow/svelte';
type $$Props = NodeProps;
export let id: $$Props['id'];
export let data: $$Props['data'];
const updateNodeData = useUpdateNodeData();
const setNodeData = useSetNodeData();
</script>
<div class="custom">
@@ -14,7 +14,7 @@
<div>
<input
value={data.text}
on:input={(evt) => updateNodeData(id, { text: evt.currentTarget.value })}
on:input={(evt) => setNodeData(id, { text: evt.currentTarget.value })}
/>
</div>
<Handle type="source" position={Position.Right} />

6
examples/svelte/src/routes/examples/usenodesdata/UppercaseNode.svelte
View File

@@ -5,14 +5,14 @@
type NodeProps,
useHandleConnections,
useNodesData,
useUpdateNodeData
useSetNodeData
} from '@xyflow/svelte';
type $$Props = NodeProps;
export let id: $$Props['id'];
const updateNodeData = useUpdateNodeData();
const setNodeData = useSetNodeData();
const connections = useHandleConnections({
nodeId: id,
type: 'target'
@@ -21,7 +21,7 @@
$: nodeData = useNodesData($connections[0]?.source);
$: {
updateNodeData(id, { text: $nodeData?.text?.toUpperCase() || '' });
setNodeData(id, { text: $nodeData?.text?.toUpperCase() || '' });
}
</script>

30
packages/react/src/hooks/useSetNodeData.ts Normal file
View File

@@ -0,0 +1,30 @@
import { useCallback } from 'react';
import useReactFlow from './useReactFlow';
import { Node } from '../types';
export function useSetNodeData<NodeType extends Node = Node>() {
const { setNodes } = useReactFlow();
const setNodeData = useCallback(
function setNodesData(
id: string,
dataUpdate: object | ((node: NodeType) => object),
options: { replace: boolean } = { replace: true }
) {
setNodes((prevNodes) =>
prevNodes.map((node) => {
if (node.id === id) {
const nextData = typeof dataUpdate === 'function' ? dataUpdate(node as NodeType) : dataUpdate;
return options.replace ? { ...node, data: nextData } : { ...node, data: { ...node.data, ...nextData } };
}
return node;
})
);
},
[setNodes]
);
return setNodeData;
}

13
packages/react/src/hooks/useUpdateNodeData.ts
View File

@@ -1,13 +0,0 @@
import { useCallback } from 'react';
import useReactFlow from './useReactFlow';
export function useUpdateNodeData() {
const { setNodes } = useReactFlow();
const updateNodeData = useCallback((id: string, data: unknown) => {
setNodes((prevNodes) => prevNodes.map((node) => (node.id === id ? { ...node, data } : node)));
}, []);
return updateNodeData;
}

2
packages/react/src/index.ts
View File

@@ -23,7 +23,7 @@ export { default as useOnViewportChange, type UseOnViewportChangeOptions } from
export { default as useOnSelectionChange, type UseOnSelectionChangeOptions } from './hooks/useOnSelectionChange';
export { default as useNodesInitialized, type UseNodesInitializedOptions } from './hooks/useNodesInitialized';
export { useHandleConnections } from './hooks/useHandleConnections';
export { useUpdateNodeData } from './hooks/useUpdateNodeData';
export { useSetNodeData } from './hooks/useSetNodeData';
export { useNodesData } from './hooks/useNodesData';
export { useNodeId } from './contexts/NodeIdContext';

28
packages/svelte/src/lib/hooks/useSetNodeData.ts Normal file
View File

@@ -0,0 +1,28 @@
import { useStore } from '$lib/store';
import type { Node } from '$lib/types';
export function useSetNodeData<NodeType extends Node = Node>() {
const { nodes } = useStore();
const setNodeData = (
id: string,
dataUpdate: object | ((node: NodeType) => object),
options: { replace: boolean } = { replace: true }
) => {
nodes.update((nds) =>
nds.map((node) => {
if (node.id === id) {
const nextData =
typeof dataUpdate === 'function' ? dataUpdate(node as NodeType) : dataUpdate;
return options.replace
? { ...node, data: nextData }
: { ...node, data: { ...node.data, ...nextData } };
}
return node;
})
);
};
return setNodeData;
}

22
packages/svelte/src/lib/hooks/useUpdateNodeData.ts
View File

@@ -1,22 +0,0 @@
import { useStore } from '$lib/store';
export function useUpdateNodeData(): (id: string, data: unknown) => void {
const { nodes } = useStore();
const updateNodeData = (id: string, data: unknown) => {
nodes.update((nds) =>
nds.map((node) => {
if (node.id === id) {
return {
...node,
data
};
}
return node;
})
);
};
return updateNodeData;
}

2
packages/svelte/src/lib/index.ts
View File

@@ -29,7 +29,7 @@ export * from '$lib/hooks/useConnection';
export * from '$lib/hooks/useNodesEdges';
export * from '$lib/hooks/useHandleConnections';
export * from '$lib/hooks/useNodesData';
export * from '$lib/hooks/useUpdateNodeData';
export * from '$lib/hooks/useSetNodeData';
// types
export type {