How to control buttons' state and content?

[marospekarik]

Hi,

I am using a button helper and struggling to understand a few things. How do I change the label and set the button disabled programmatically?

const leftPanel = useControls( { button: button(() => {{sendMessage('hello')}}, { disabled: false}), }, { store: myStore } )

I see that documentation or examples for this are missing. I've tried to use something like `myStore.set(), or destruct the object, however, it doesn't work for the button helper.

[dbismut]

@marospekarik, you can use a deps array as the last argument for useControls, the schema recompute whenever the deps change.

[marospekarik]

But how would I change the button's label for example? I would need to replace the whole entry, right?

[dbismut]

Well the label value would depend on the deps.

[marospekarik]

I am still struggling to wrap my head around this. How would you disable the button after the initial state? I am trying:

storeLeft.set({ ["init"]: { disabled: true } }, false);

replacing it completely:
storeLeft.set({ ["init"]: button(() => {sendMessage()}, { disabled: true })}, false);

But nothing really works
`

[dbismut]

Have a look at this https://codesandbox.io/s/suspicious-bessie-lo6dx3?file=/src/App.js

[marospekarik]

Thanks @dbismut , that's what I was looking for!

[marospekarik]

Unfortunately, there is still something wrong with all of this, when the button turns to disabled mode:

const [isButtonDisabled, setIsButtonDisabled] = useState(false); const [controls, setControls, get] = useControls( () => ({ [isButtonDisabled ? "Loading...": "Initialize"]: button(() => sendMessage(), {disabled: isButtonDisabled} ), } ), { store: storeLeft }, [isButtonDisabled]);

[dbismut]

What am I looking at?

[marospekarik]

Somehow after when the state change to true, there is some strange hierarchy. See these two images:

1. isButtonDisabled = false
   
2. isButtonDisabled = true
   

[marospekarik]

See here @dbismut : https://codesandbox.io/s/elated-kare-pwmzit?file=/src/App.js

[dbismut]

I don't get it

[marospekarik]

Lol... it's because of the three dots in the name of the button (...)

[dbismut]

Ooooh right yes Leva uses dot notation to manage folders nesting for keys. You can try using special character …, or otherwise use the option "label".

[marospekarik]

Ooooh right yes Leva uses dot notation to manage folders nesting for keys. You can try using special character …, or otherwise use the option "label".

Thanks for the clarification, how to use the option "label"? This for example doesn't work for me:

[isButtonDisabled ? "Loading…": "Initialize"]: button(() => sendMessage(), {disabled: isButtonDisabled, label: "myLabel"} ),

[dbismut]

If it doesn't work then it hasn't been properly implemented for the button unfortunately, it's a bug.

[geyang]

The order of the button also gets messed up.

It moved to the end.