Update chart state from NodeInner

[ChrisCardoz]

Hello, I'm trying to adapt the NodeInner story example to create a simple form on the node. Ideally, I can update the state of the chart every time the form's input changes. I seek to achieve that by writing into the "properties" object of the NodeInner class, since it can be any object. Then the updated node object would be pushed to the FlowChart using setState. However, I'm running into a few blockers.

1. I can't seem to find any documentation on the storybook examples. I would assume that this example https://mrblenny.github.io/react-flow-chart/index.html?path=/story/custom-components--node-inner may have information as to how the input you demo'd can be represented in the chart object, but the code is missing from the story book. However, I was able to find what appears to be the code from this storybook in the repo.

2. In the following code below taken from CustomNodeInner.tsx, the NodeInnerCustom object can only take in INodeInnerDefaultProps as props, which does not include a function to update the chart or the chart itself.

<Page> <FlowChart chart={chart} callbacks={stateActions} Components={{ NodeInner: NodeInnerCustom, }} /> </Page>

To sum it up, I'm asking for a way to update the chart state from the NodeInner component. I want to be able to update the properties from an existing node with form values.

[davidanitoiu]

How about something like this?

https://codesandbox.io/embed/condescending-moon-jke7z

https://codesandbox.io/embed/tender-dream-x21rn

[dvdprr6]

@davidanitoiu Do you have the same solution written in typescript? I am receiving a TypeError: _a is undefined when I call dispatch in my onSubmit handler, I think it may be how I am defining my defaultValue in createContext.

Here is my createContext:

export const ChartContext = createContext({
  dispatch: (...args: any) => ({
    type: 'executeChartAction',
    payload: { id: '' }
  })
})