knobs don't update about react-view HOT 5 CLOSED

Can you share the props configuration?

from react-view.

const props = {
  isOpen: {
    type: PropTypes.Boolean,
    value: false,
    stateful: true,
  },
  button: {
    type: PropTypes.ReactNode,
    value: `<EuiButton
      iconType="arrowDown"
      iconSide="right"
      onClick={() => setIsOpen(!isOpen)}
    >
      Show popover
    </EuiButton>`,
  },
  children: {
    type: PropTypes.ReactNode,
    value: `<div style={{ width: "300px" }}>
    Popover content that’s wider than the default
    width
  </div>`,
  },
};

This is the minimal configuration after removing all non-affecting factors

from react-view.

You can observe the code and the demo for more clarifications.

from react-view.

@tajo is the way I am doing things not the correct one?

from react-view.

So, the problem is that there is no connection between EuiButton's onClick and the react-view's state. When you click on it, react-view has no idea it happened and that's why the knob or source code are not updated.

Fortunately, there is a concept for this in react-view that lets you establishing this connection. We call it state hooks. However, this assumes simpler scenarios where the onClick like handler is the top level prop. In your case, it's buried inside of the button prop and EuiButton component.

Luckily, we have one use-case like that in Base Web's Progress Steps. So we built an escape hatch where you can write a custom AST visitor to correctly target and instrument the deep onClick handler.

So your button prop configuration should look like this:

button: {
  type: PropTypes.ReactNode,
  value: `...`,
  propHook: ({getInstrumentOnChange, fnBodyAppend}) => ({
    JSXAttribute(path: any) {
      if (path.get('name').node.name === 'onClick') {
        fnBodyAppend(
          path.get('value'),
          getInstrumentOnChange('!isOpen', 'isOpen')
        );
      }
    },
  }),
},

This is more involved API assuming the deep knowledge of react-view. The advantage is, it can deal with pretty much anything (AST traverse is super flexible). A gist:

1. Take the button prop's AST and traverse it
2. Match all JSXAttribute nodes
3. If the attr name is onClick add a secret (filtered out of the code snippet) instrumentation call that takes !isOpen value and updates the isOpen state. getInstrumentOnChange and fnBodyAppend are AST related helper functions so you don't have to write even more code.

Feel free to re-open if you have more issues.

from react-view.