Feat/us00-59- Componente ModalBox
componente foi criado considerando os critérios de parametrização: deve poder customizar o conteúdo de texto interno, deve ter recursos relacionados a acessbilidade parametrizaveis
Para a utilização do componente, basta cria-lo e dentro dele definir os 4 childrens
que serão usados na ordem:
- 0 - Texto de confirmação
- 1 - Texto de informação
- 2 - Botão de confirmação
- 3 - Botão de cancelamento
Como os componentes que serão renderizados dentro do modal são declarados na tela, a unica função callback a ser passada é a de fechamento do modal, o mesmo vale para label e hint de acessibilidade.
ex:
const [visible, setVisible] = React.useState(false);
const showModal = () => setVisible(true);
const hideModal = () => setVisible(false);
<Button onPress={showModal} >Mostrar Modal</Button>
<ModalBoxComponent visible={visible} onDismiss={hideModal} width={300} height={250}>
<Text style={{textAlign: 'center', fontSize: 20, fontWeight: 'bold'}} >Sair?</Text>
<Text style={{textAlign: 'center'}} >Ao fazer isso você será desconectado</Text>
<Button onPress={hideModal}
style={{
backgroundColor: colors.blue,
width: 200,
margin: 5,
borderRadius: 5,
}}>
<Text style={{color: 'white', fontSize: 20}}>Sair</Text>
</Button>
<Button onPress={hideModal}
style={{
backgroundColor: colors.white,
borderColor: colors.borderStroke,
borderWidth: 1,
borderRadius: 5,
margin: 5,
width: 200,
}}>
<Text style={{color: colors.blue, fontSize: 20}}>Cancelar</Text>
</Button>
</ModalBoxComponent>
Saída:
obs. Acredito que assim há mais liberdade para customizar o conteúdo, pois é possível informar um texto com tamanho, cor, fonte como for melhor no momento de criação do modal, além de não ser necessário tratar callback para casos de logout, entre outros. Caso discordem, sinalize para que eu altere o componente para ter os componentes filhos fixos!