topic Re: using reactiveutils to watch status of a panel? in Calcite Design System Questions

using reactiveutils to watch status of a panel?

GaryB — Thu, 25 May 2023 17:28:48 GMT

I have a Calcite panel that could be opened from action bar (or closed if the action bar button is pressed again), could be closed using the X on the panel itself, or could be closed programmatically when another panel is opened. Rather than wiring up what happens when the button is pressed on the action bar, or when the X is pressed on the panel, etc., can't I just use the following code in my setup to watch the panel closed property (it doesn't seem to work)? This seems a lot cleaner than setting up some sort of helper function that gets called from various places.

let myPanel = document.getElementById('my-panel') as HTMLCalcitePanelElement reactiveUtils.watch( () => myPanel.closed, (panelClosedStatus) => { console.log('my panel closed status just changed') } )

Re: using reactiveutils to watch status of a panel?

coryeicher — Thu, 25 May 2023 17:43:44 GMT

Hi Gary,

I use state to handle things like this. Highly recommend.

1) When your panel closes, update your state's panelStatus. Do this regardless of whether it closed via the `x` button or `close` button or another panel opening, etc. Each of these triggers an update to state.panelStatus. Perhaps also state.panelStatus maintains the states of multiple panels.

2) "React" to this state change accordingly from a single point in your code.

There's a react + Esri JS example here that I drew a lot of inspiration from, a fork of Rene's work (from Esri) https://github.com/coryeicher/jsapi-esm-react/tree/main.

We have used this approach with great success to build a React + Esri JS + Calcite component library.

Hope this helps,

Re: using reactiveutils to watch status of a panel?

GaryB — Thu, 25 May 2023 17:55:18 GMT

Thank you Cory! Unfortunately I haven't quite made the leap to React yet but I've been thinking about diving in for exactly these reasons. Any other vanilla JavaScript ideas for approaching this would be appreciated.