Managing calcite-panels within calcite-flow in react

[omar-marji]

Trying to implement two calcite panels within a calcite flow allowing the user to go back and forth between them. First panel has a list of items and the second panel has details about the item when it is clicked.

It looks like clicking the back button at the top on the second panel removes it from the DOM and react is not able to then re-open that panel.

Below is a simplified sample.

https://codesandbox.io/s/calcite-flow-test-rirmko

How can I manage the back button behavior, and/or properly manage panels in a flow using react.

[BenElan · Accepted solution]

Clicking the Panel's back button removes the Panel from the DOM for performance. That means you will need to recreate the element if the user drills into the "details" Panel again. Here is an example:

https://codepen.io/benesri/pen/poLYOdY?editors=0010

I didn't have an example using the React components but the idea is the same. If you have any difficulties converting the code to React let me know, I'm happy to help.

[omar-marji]

Thank you.  I totally missed the beforeBack property in the documentation.

I was able to make use of it to remove the panel through state changes. Much appreciated.

[coryeicher]

Hi @BenElan , Omar,

I'm also using the Flow component in React. I am also implementing a drill-in/drill-out workflow with Panel components.

1. I am interested in seeing the React solution which allows the user to click Calcite's back button. I see Omar's https://codesandbox.io/ solution. The "custom" back button works, but what about Calcite's back button? I would love to declare the Panels and use React state to show/hide... rather than manipulating DOM as in Ben's example.

2. What (if anything) has changed with the new "FlowItem" components? Is the behavior the same as with Panels.. or perhaps is .closed the updated way to implement drill-in/out?  Any plans for a component example or github sample with some JS or TS code to illustrate flow + flow-item?

Thanks,

-Cory

[omar-marji]

Hi @coryeicher 

When I faced this issue the calcite flow item component was not released yet, hence I still haven't tried to migrate my code to the new flow item.

But I did a quick test on codesandbox using the same example I had, making use of the beforeBack functions. Not the cleanest of solutions but it works.

https://codesandbox.io/s/calcite-flow-flow-item-test-dg7fih?file=/src/App.js

Not sure if there is a cleaner way of doing it.

I would also love to see github repo with examples on the usage of calcite components with react. 

[BenElan]

Thank you both for your feedback!

I created an issue to provide some JS/TS/React snippets for common workflows.

https://github.com/Esri/calcite-components/issues/5836

Flow's drill in/out will be included, as well as slider's histogram and others. If you have any suggestions for code snippets, feel free to add them to this thread or to the issue above.

We likely won't have time to start adding the code snippets until after v1 (January). I will update this thread with more details when we work on the issue. Thanks again!

[coryeicher]

Thanks Ben. Looking forward to v1 and the additional doc. Thanks for adding the issue as well.

-C

[coryeicher]

Hi Omar,

Very cool, thanks for putting up the React example. That's what I was looking for.

-Cory