DMN - ContextMenu component communication

Developers
1

Goodmorning!!!

I am trying to make components InputCellContextMenu.js & AllowedValueEditing.js rendered in the ContextMenuComponent.js to communicate with each other i.e. to allow InputCellContextMenu.js to send a data payload to AllowedValueEditing.js to do something with it (like pre-populate). Looking at the ContextMenuComponent.ContextMenuExt class render method

components.map(
(Component, idx) => <Component key={ idx } context={ context } />
anything that goes into this div tags are siblings, i am looking at a way to make these components talk to each other. I couldn’t find an elegant inferno way to make sibling components to communicate.

Question:

  1. Can someone point me to some code in the product that already does that
  2. Point me to an inferno feature that i can use (i couldn’t find anything in their documentation)

I could inject a component using didi in both the sibling components and use that as the communication channel but i would like to use an inferno feature as this seems to a problem 101 for any component rendering toolkit.

Thanks…

2

Absolutely no documentation for inferno! It doesn’t look like inferno is mature enough to address component-2-component communication like angular does! We tried exploring inferno documentation and got frustrated. Finally ending up writing custom code to achieve the same.

We are going through the same issue. This is what we are thinking to do

  1. Copy ContextMenuComponent.js into dmn-js-shared package
  2. Write a function communicate(ToComponent, Data)
  3. Implement this method in the all the context menu components
  4. Write a logic to identify “ToComponent” identifier with self identifier, if it matches consume it, if not ignore it

your idea of using DiDi also sounds good… Can you please share your code just to see if which option is elegant? Thanks in advance

3

Thanks Mallesh…

What we ended up doing was to use the eventBus to fire an event with the payload and digest it in AllowedValueEditing and react to it. Would have been nice if we could take advantage of Inferno feature if something existed…

Thank you everyone for your time…

4

Awesome idea…
Probably this question is for DMN developers… why dmn frame work didn’t use inferno inbuilt linkEvent instead used eventBus framework? Are there any drawbacks using inferno linkEvent?

import { linkEvent } from 'inferno';

function handleClick(props, event) {
  props.validateValue(event.target.value);
}

function MyComponent(props) {
  return <div><input type="text" onClick={ linkEvent(props, handleClick) } /><div>;
}