Modal

Componente para criação de modais, bloqueando temporariamente a interação com a view principal.

Props

id String

Id do elemento HTML do componente.

default: ''

opened Boolean

Estado da janela modal.

default: false

marginHeaderFooter Number

Tamanho da margem superior e inferior da janela modal.

default: 100

width String

Largura da janela modal.

default: '60%'

minContentHeight Number

Altura mínima do conteudo da modal.

default: 0

useAvailableHeight Boolean

Caso true, usa todo a altura disponível para a modal.

default: false

dismissible Boolean

Caso true, a modal pode ser fechada ao clicar na área externa a janela modal.

default: true

opacity Number

Opacidade da área externa a janela modal.

default: 0.4

inDuration Number

Duração da animação de abertura da janela modal.

default: 300

outDuration Number

Duração da animação de fechamento da janela modal.

default: 200

ready Function

Função callback executada ao abrir janela modal.

default: function () { return true; }

complete Function

Função callback executada ao fechar janela modal.

default: function () { return true; }
// themeClassKey
=== themeClassKey {String}

Chave atribuida ao objeto especificado nas configurações de tema.

default: 'modal'

Estrutura de um Modal

A estrutura básica de um componente de modal é definida conforme o código abaixo. Os elementos ModalHeader e ModalFooter são opcionais.

var CustomModal = React.createClass({
  render: function() {
    return
      <Modal {...this.props}>
        <ModalHeader><h5>Custom Modal</h5></ModalHeader>
        <ModalContent>Content of my custom modal</ModalContent>
        <ModalFooter></ModalFooter>
      </Modal>;
  }
});

Se não houverem componentes filhos do tipo ModalHeader, ModalContent e ModalFooter, os filhos do componente modal serão encapsulados como filhos de um componente ModalContent.

// CustomModal renderizando diretamente o conteúdo.
var CustomModal = React.createClass({
  render: function() {
    return
      <Modal {...this.props}>
        Content of my custom modal.
      </Modal>;
  }
});

// O componente acima é o mesmo que
var CustomModal = React.createClass({
  render: function() {
    return
      <Modal {...this.props}>
        <ModalContent>
          Content of my custom modal.
        </ModalContent>
      </Modal>
  }
});

Customização de Estilo da Modal

O estilo da modal pode ser configurada através do arquivo de configuração de temas do Realize. Adicionalmente, o Modal suporta algumas customizações por padrão. É possível desabilitar o estilo de título no componente ModalHeader, passando a prop withTitle como false. Analogamente, o separador entre o conteúdo e o rodapé pode ser removido, passando para ModalFooter a prop withSeparator como false.

var CustomModal = React.createClass({
  render: function() {
    return
      <Modal {...this.props}>
        <ModalHeader withTitle={false}><h5>Custom Modal</h5></ModalHeader>
        <ModalContent>Content of my custom modal</ModalContent>
        <ModalFooter withSeparator={false}></ModalFooter>
      </Modal>;
  }
});

Ativação da Modal

A abertura da modal pode ser ativada utilizando um botão, através do componente ModelButton e o id da janela modal a ser aberta, da seguinte maneira:

// Instanciando um componente CustomModal (definido acima).
var modal = React.createFactory(CustomModal);
var modalProps = { id: 'custom-modal' };
ReactDOM.render(modal(modalProps), document.getElementById('custom-modal-container'));

// Instanciando o botão de ativação do modal acima.
var btn = React.createFactory(ModelButton);
var btnProps = { modalId: 'custom-modal' };
ReactDOM.render(btn(btnProps), document.getElementById('custom-modal-btn-container'));

Formulário em Modal

É possível montar um formulário como modal utilizando o componente ModalForm.

var modal = React.createFactory(ModalForm);
var modalProps = {
  id: 'custom-modal-form',
  title: 'Modal Form',
  form: {
    inputs: {
      name: {
        label: "Nome do produto"
      },
      price: {
        label: "Preço",
        component: "masked",
        maskType: "currency"
      }
    }
  }
};

ReactDOM.render(modal(modalProps), document.getElementById('custom-modal-form-container'));