nav[aria-label="Primary Navigation"] { padding: 0; & ul { list-style: none; width: 100%; display: flex; flex-direction: row; justify-content: start; align-items: start; gap: 30px; padding: 0; & li { margin: 0; } & ul li { list-style: none; } } }

Managing calcite-panels within calcite-flow in react

TeklabzAdmin

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.

Encontre mais publicações marcadas com

Components

Accepted answers

BenElan

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.

All comments

coryeicher

Hi Omar,

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

-Cory

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!

TeklabzAdmin

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.

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

TeklabzAdmin

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.

BenElan

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.

Participe da Conversa

Membros conectados podem postar, seguir atualizações e mais. Novo aqui? Registre uma conta gratuita.

Links Rápidos

Community Help
Find useful guides, FAQs, and documents to help you navigate and make the most of Esri Community.