Modal

Apresentação

O componente Modal é responsável por criar janelas de diálogo temporárias que aparecem acima da interface principal da aplicação. Ele suporta backdrop opcional e pode ser usado para exibir conteúdo importante, formulários ou confirmações que requerem atenção do usuário.

Quando usar

• Para exibir formulários importantes
• Para mostrar confirmações de ações
• Para exibir detalhes de conteúdo
• Para criar diálogos de configuração
• Para mostrar mensagens de erro
• Para exibir previews de conteúdo
• Para criar wizards de configuração
• Para mostrar informações detalhadas

Forma básica de uso

import { Modal, Text, View, Button } from 'eitri-luminus';

// Modal básico
<Modal>
  <Text render="h3">Modal Básico</Text>
  <Text>Conteúdo do modal</Text>
</Modal>

// Modal sem backdrop
<Modal backdrop={false}>
  <Text render="h3">Modal sem Backdrop</Text>
  <Text>Este modal não pode ser fechado clicando fora</Text>
</Modal>

// Modal tipo bottom-sheet
<Modal className="modal-bottom sm:modal-middle">
  <View className="modal-box">
    <Text render="h3">Modal Personalizado</Text>
    <Text>Conteúdo com estilos personalizados</Text>
    <View className="modal-action">
      <Button>Fechar</Button>
    </View>
  </View>
</Modal>

// Mudando a cor da janela modal
<Modal dialogClassName="bg-yellow-500">
  <View className="modal-box">
    <Text render="h3">Modal Personalizado</Text>
    <Text>Conteúdo com estilos personalizados</Text>
    <View className="modal-action">
      <Button>Fechar</Button>
    </View>
  </View>
</Modal>

// Modal responsivo
<Modal className="w-full md:w-auto">
  <View className="modal-box">
    <Text render="h3">Modal Responsivo</Text>
    <Text>Conteúdo que se adapta ao tamanho da tela</Text>
  </View>
</Modal>

// Modal com identificador
<Modal id="modal-configuracao">
  <View className="modal-box">
    <Text render="h3">Configurações</Text>
    <Text>Configurações da aplicação</Text>
  </View>
</Modal>

// Modal com layout flexível
<Modal>
  <View className="modal-box">
    <View className="flex flex-col gap-4">
      <Text render="h3">Modal Flexível</Text>
      <Text>Conteúdo organizado</Text>
      <Button className="btn-primary">Ação</Button>
    </View>
  </View>
</Modal>

// Modal com formulário
<Modal>
  <View className="modal-box">
    <Text render="h3">Formulário</Text>
    <View>
      <TextInput placeholder="Nome" className="input-bordered w-full" />
      <TextInput placeholder="Email" className="input-bordered w-full mt-2" />
      <View className="modal-action">
        <Button className="btn-primary">Enviar</Button>
        <Button>Cancelar</Button>
      </View>
    </View>
  </View>
</Modal>

// Modal com confirmação
<Modal>
  <View className="modal-box">
    <Text render="h3">Confirmar Ação</Text>
    <Text>Tem certeza que deseja continuar?</Text>
    <View className="modal-action">
      <Button className="btn-error">Confirmar</Button>
      <Button>Cancelar</Button>
    </View>
  </View>
</Modal>

Propriedades

Propriedade	Tipo	Descrição
children	ReactNode	Conteúdo do modal
backdrop	boolean	Habilita/desabilita o backdrop (padrão: true)
className	string	Classes CSS adicionais
dialogClassName	string	Classes CSS adicionais para a janela modal
id	string	Identificador único do componente

Heranças

O componente Modal herda todas as propriedades comuns da biblioteca através da interface CommonProps, que inclui:

• Propriedades de estilo (margin, padding, etc)
• Propriedades de layout (flex, grid, etc)
• Propriedades de posicionamento
• Propriedades de acessibilidade
• Propriedades de identificação (id, data-e)

Métodos via Ref

O componente Modal expõe métodos públicos que podem ser acessados através de uma ref:

import { useRef } from 'react';
import { Modal, Button } from 'eitri-luminus';

function MyComponent() {
  const modalRef = useRef<Modal>(null);

  const handleOpen = () => {
    modalRef.current?.open();
  };

  const handleClose = () => {
    modalRef.current?.close();
  };

  const handleShowModal = () => {
    modalRef.current?.showModal();
  };

  return (
    <>
      <Button onClick={handleOpen}>Abrir Modal</Button>
      <Button onClick={handleShowModal}>Abrir como Modal</Button>
      <Modal
        ref={modalRef}
        onOpen={() => console.log('Modal aberto')}
        onClose={() => console.log('Modal fechado')}
      >
        <View className="modal-box">
          <Text render="h3">Modal Controlado</Text>
          <Text>Este modal pode ser controlado via ref</Text>
          <View className="modal-action">
            <Button onClick={handleClose}>Fechar</Button>
          </View>
        </View>
      </Modal>
    </>
  );
}

Métodos Disponíveis

Método	Tipo	Descrição
open()	void	Abre o modal (sem bloquear backdrop)
close()	void	Fecha o modal
showModal()	void	Abre o modal como modal (com backdrop bloqueado)
isOpen()	boolean	Retorna se o modal está aberto

Eventos Disponíveis

Evento	Tipo	Descrição
onOpen	() => void	Disparado quando o modal é aberto
onClose	() => void	Disparado quando o modal é fechado
onShow	() => void	Disparado quando o modal é exibido
onHide	() => void	Disparado quando o modal é ocultado
onBackdropClick	() => void	Disparado quando o backdrop é clicado
onEscapeKey	() => void	Disparado quando a tecla Escape é pressionada
onCancel	() => void	Disparado quando o modal é cancelado

Observações

• O componente usa a tag semântica <dialog> do HTML
• O backdrop pode ser desabilitado para modais que não devem ser fechados clicando fora
• Mantém a semântica HTML apropriada
• É responsivo por padrão
• Pode ser estilizado com classes do Tailwind
• Suporta propriedades de layout flexíveis
• Mantém a acessibilidade por padrão
• Pode ser usado em qualquer contexto de layout
• Suporta diferentes tamanhos de conteúdo
• Pode ser combinado com outros componentes
• Ideal para diálogos e confirmações
• Suporta classes CSS
• Pode ser usado para formulários importantes
• Funciona bem com teclado e mouse
• Suporta navegação por teclado
• Métodos via ref disponíveis para controle programático do modal