Opção que dê para fechar todos os drawers abertos

[alextalha]

Boa tarde. Gostaria de saber se existe alguma forma nativa para caso eu tenho mais de 2 drawers no mobile abertos, ter um botão que feche todos estes.
Caso não tenha alguma forma, qual seria a melhor solução para este caso ?alguma forma custom que altere os state do drawer ?

[georgebrindeiro]

Oi @alextalha, seja bem-vindo à VTEX Community!

Você consegue compartilhar uma loja funcional com esses 2 drawers no layout? Só pra gente conseguir visualizar um pouco melhor o que você tá tentando fazer e o que está usando nessa página para guardar o estado desses drawers.

[alextalha]

@georgebrindeiro . segue a workspace e o loom

https://drawertest--ioinfracommerce.myvtex.com/

[icazevedo]

Oi @alextalha! Não temos uma maneira nativa de fechar os dois drawers ao mesmo tempo. A interação com múltiplos níveis de drawers pode se tornar mais complicada a medida em que eles vão se sobrepondo, e por isso recomendamos o uso de accordions para esses casos.

De toda forma, existem duas maneiras custom para resolver o problema apresentado:

1. Utilizar os componentes exportados pela app vtex.drawer para criar seu próprio drawer e controlar a função close para que ela se comporte como você espera; ou
2. Criar um contexto customizado que reexporta a função close vinda do contexto nativo do primeiro drawer, de maneira que outro componente customizado - substituto do botão de fechar nativo - no segundo drawer acione duas funções close: a exportada pelo seu contexto customizado, que diz respeito ao primeiro drawer, e a exportada pelo contexto nativo do segundo drawer.

Para executar a alternativa 1, é útil ver todos os componentes exportados na raiz da pasta react da app vtex.drawer e se basear na implementação nativa do drawer.

Para executar a alternativa 2, é interessante ver o contexto do drawer para saber as propriedades exportadas por ele e para ter um exemplo prático de como criar um novo contexto. Também é interessante ver o código do botão de fechar o drawer para saber como utilizar o contexto e implementar um botão semelhante ao nativo.