use-node-data-update.ts 1.2 KB

123456789101112131415161718192021222324252627282930313233343536373839404142
  1. import { useCallback } from 'react'
  2. import produce from 'immer'
  3. import { useStoreApi } from 'reactflow'
  4. import { useNodesSyncDraft } from './use-nodes-sync-draft'
  5. import { useNodesReadOnly } from './use-workflow'
  6. type NodeDataUpdatePayload = {
  7. id: string
  8. data: Record<string, any>
  9. }
  10. export const useNodeDataUpdate = () => {
  11. const store = useStoreApi()
  12. const { handleSyncWorkflowDraft } = useNodesSyncDraft()
  13. const { getNodesReadOnly } = useNodesReadOnly()
  14. const handleNodeDataUpdate = useCallback(({ id, data }: NodeDataUpdatePayload) => {
  15. const {
  16. getNodes,
  17. setNodes,
  18. } = store.getState()
  19. const newNodes = produce(getNodes(), (draft) => {
  20. const currentNode = draft.find(node => node.id === id)!
  21. currentNode.data = { ...currentNode.data, ...data }
  22. })
  23. setNodes(newNodes)
  24. }, [store])
  25. const handleNodeDataUpdateWithSyncDraft = useCallback((payload: NodeDataUpdatePayload) => {
  26. if (getNodesReadOnly())
  27. return
  28. handleNodeDataUpdate(payload)
  29. handleSyncWorkflowDraft()
  30. }, [handleSyncWorkflowDraft, handleNodeDataUpdate, getNodesReadOnly])
  31. return {
  32. handleNodeDataUpdate,
  33. handleNodeDataUpdateWithSyncDraft,
  34. }
  35. }