using reactiveutils to watch status of a panel?

GaryB

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')
     }
)

 

coryeicher

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,