Modal

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

JavaScript
info_outlinefullscreen
​x
 
1
​
2
 class CustomModal extends React.Component {
3
  render() {
4
    return (
5
      <Modal id='custom-modal' width= '60%'>
6
        <ModalHeader><h5>Lorem ipsum dolor sit</h5></ModalHeader>
7
        <ModalContent>
8
          <p>
9
            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam cursus nisl ac magna tincidunt imperdiet. Sed ultrices, ligula non iaculis semper, nibh elit volutpat orci, eget dignissim orci eros in libero. Sed vel eros non lorem tempus iaculis. Sed ante nisi, fermentum eget leo vitae, faucibus laoreet erat. Integer leo tellus, luctus a feugiat facilisis, pretium mollis nisi. Phasellus sit amet erat quis ex blandit molestie sed eget felis. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.
10
          </p>
11
        </ModalContent>
12
        <ModalFooter>
13
          <ButtonGroup buttons={[
14
              {
15
                name: 'Save',
16
                icon: 'save',
17
                onClick: function() {
18
                  confirm("Save?");
19
                }
20
              },
21
              {
22
                name: 'Delete',
23
                icon: 'delete',
24
                onClick: function() {
25
                  confirm("Delete?");
26
                }
27
              },
28
              {
29
                name: 'Close',
30
                onClick: function() {
31
                  ModalActions.close({ modalId: 'custom-modal' });
32
                }
33
              }
34
            ]}
35
          />
36
        </ModalFooter>
37
      </Modal>
38
    );
39
  }
40
}
41
​
42
ReactDOM.render(<div>
43
  <CustomModal/>
44
  <ModalButton name='Modal Button' modalId='custom-modal'/>
45
</div>, mountNode)
46
​
Preview
fullscreen
Lorem ipsum dolor sit

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam cursus nisl ac magna tincidunt imperdiet. Sed ultrices, ligula non iaculis semper, nibh elit volutpat orci, eget dignissim orci eros in libero. Sed vel eros non lorem tempus iaculis. Sed ante nisi, fermentum eget leo vitae, faucibus laoreet erat. Integer leo tellus, luctus a feugiat facilisis, pretium mollis nisi. Phasellus sit amet erat quis ex blandit molestie sed eget felis. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.

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'));