Skip to content

GitLab

  • Menu
Projects Groups Snippets
    • Loading...
  • Help
    • Help
    • Support
    • Community forum
    • Submit feedback
    • Contribute to GitLab
  • Sign in
  • Frontend Frontend
  • Project information
    • Project information
    • Activity
    • Labels
    • Planning hierarchy
    • Members
  • Repository
    • Repository
    • Files
    • Commits
    • Branches
    • Tags
    • Contributors
    • Graph
    • Compare
  • Issues 0
    • Issues 0
    • List
    • Boards
    • Service Desk
    • Milestones
  • Merge requests 0
    • Merge requests 0
  • CI/CD
    • CI/CD
    • Pipelines
    • Jobs
    • Schedules
  • Deployments
    • Deployments
    • Environments
    • Releases
  • Monitor
    • Monitor
    • Metrics
    • Incidents
  • Packages & Registries
    • Packages & Registries
    • Package Registry
    • Infrastructure Registry
  • Analytics
    • Analytics
    • Value stream
    • CI/CD
    • Repository
  • Wiki
    • Wiki
  • Snippets
    • Snippets
  • Activity
  • Graph
  • Create a new issue
  • Jobs
  • Commits
  • Issue Boards
Collapse sidebar
  • Sem Barreiras
  • FrontendFrontend
  • Merge requests
  • !18

Merged
Created Apr 12, 2024 by Natan da Rosa Dias@natan.diasDeveloper

Feat/us00-59- Componente ModalBox

  • Overview 0
  • Commits 3
  • Changes 1

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:

image

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!

Assignee
Assign to
Reviewer
Request review from
Time tracking
Source branch: feature/modal_box