Button component should be able to control another component

[prakhargupta1]

Duplicates

• [X] I have searched the existing issues

Latest version

• [X] I have tested the latest version

Summary 💡

On a click of a button, I wanted to choose a different query for a table. Basically, from a showing a specific id to showing all ids. Currently, this doesn't seem to be supported in Toolpad.

Examples 🌈

How it looks in retool: https://user-images.githubusercontent.com/92228082/212884443-13aa0484-935f-493c-a125-dc0c8270ec5a.mov

Configuration:

Motivation 🔦

No response

[bytasv]

As I was looking into this with Prakhar I think what's currently missing is ability to control state that could then be used by other components. I.e. if we used onClick maybe we could have some global state setter where we can call setState(name: string, value: any) => void and getState(name: string) => value: any 🤔

[Janpot]

setState can be done, getState won't be necessary as all state is already available

[bytasv]

setState can be done, getState won't be necessary as all state is already available

I also quickly tried doing globalThis.value = 3 but it seemed not to work, wondering maybe it would be even easier if we would allow "writing" directly to global state? 🤔

[Janpot]

For that to work we'd need to detect when the user mutates global scope so that we can update the react state using setControlledBinding accordingly in the runtime. The only way I can think of that working is by wrapping the global scope that we supply to these expressions with a Proxy and detect when one of the nested properties has been assigned to. We'll also need to detect other things that can mutate, e.g. Array.push.

[bytasv]

Maybe that could be like a future goal and in the mean time having a setter sounds much more straightforward 🤔

[Janpot]

I think it's a good idea, it would be a bit like immer but for our scope. Maybe it's even possible to use their underlying api?