react-flow-chart
react-flow-chart copied to clipboard
onNodeSizeChange does not return value for callback
The callback onNodeSizeChange
defined in actions.ts
does not return a value, which means you need to manually override it when trying to create state hooks for the chart component.
For example, I only want to override some event handlers so I import the already defined handlers:
import * as callbacks from '@mrblenny/react-flow-chart/src/container/actions';
// define the correct handler (return the chart)
export const onNodeSizeChange = ({ nodeId, size }) => (chart) => {
chart.nodes[nodeId] = {
...chart.nodes[nodeId],
size,
};
return chart
};
// overwrite the existing handler with our patched version
callbacks.onNodeSizeChange = onNodeSizeChange;
// utility to allow partial override of callbacks
export const configureChart = (setChart, overrides = {}) => (
Object.keys(callbacks).reduce((reducer, key) => {
const callback = overrides && typeof overrides[key] !== 'undefined' ? overrides[key] : callbacks[key];
reducer[key] = (...args) => setChart(callback(...args));
return reducer;
}, {})
);
I can then define a component with my custom overrides, while preserving the other default handlers:
const [chart, setChart] = useState(initialChart);
const callbacks = configureChart(setChart, {
onDeleteKey, // some custom handler
onNodeClick, // another custom handler
});
I can open a PR, essentially all that is required is to return the updated chart from the handler.
After reviewing the code, it's not really possible to use the current callbacks for the state hooks anyways, since they're returning the same mutated object.
It would be necessary to create a new chart instance and pass it back from the handler for the state change to actually cause a re-render. I would be happy to open a PR for that as well, but it might have negative performance implications so that's up to you.
After reviewing the code, it's not really possible to use the current callbacks for the state hooks anyways, since they're returning the same mutated object.
@matthax faced the same issue :( Please let me know if you found any workarounds.