Modal

Component for creating modal temporarily blocking the interaction with the main view.

Props

id String

Component’s HTML element id.

default: ''

opened Boolean

State of the modal window.

default: false

marginHeaderFooter Number

Size of the top and bottom of the modal window.

default: 100

width String

Width of the modal window.

default: '60%'

minContentHeight Number

Minimum height of the modal content.

default: 0

useAvailableHeight Boolean

If true, you use all the time available for transportation.

default: false

dismissible Boolean

If true, the modal can be closed by clicking the area outside the modal window.

default: true

opacity Number

Opacity of the area outside the modal window.

default: 0.4

inDuration Number

Duration of the opening animation of the modal window.

default: 300

outDuration Number

Duration of the modal window closing animation.

default: 200

ready Function

Function callback executed when opening modal window.

default: function () { return true; }

complete Function

Function callback executed when closing modal window.

default: function () { return true; }

themeClassKey String

Key assigned to the object specified in the theme settings.

default: 'modal'

Structure of a Modal

The basic structure of a modal component is defined as the following code. The elements ModalHeader and ModalFooter are optional.

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

If there are no child components of type ModalHeader, ModalContent and ModalFooter, the modal component of the children will be encapsulated as children of a component ModalContent.

// you can render the content directly as the following example
var CustomModal = React.createClass({
  render: function() {
    return
      <Modal {...this.props}>
        Content of my custom modal.
      </Modal>;
  }
});

// or you can do like this one
var CustomModal = React.createClass({
  render: function() {
    return
      <Modal {...this.props}>
        <ModalContent>
          Content of my custom modal.
        </ModalContent>
      </Modal>
  }
});

Style Customization Modal

The modal style can be configured through the Perform themes configuration file. Additionally, Modal supports some customizations by default. You can disable the title in style component ModalHeader, passing prop withTitle como false. Similarly, the separator between the content and the footer can be removed, passing ModalFooter to prop withSeparator as 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>;
  }
});

Enabling Modal

The opening of the modal can be activated using a button via component ModelButton and the id of the modal window to be opened, as follows:

// Creating a instance of the above CustomModal component.
var modal = React.createFactory(CustomModal);
var modalProps = { id: 'custom-modal' };
ReactDOM.render(modal(modalProps), document.getElementById('custom-modal-container'));

// Creating a instance of the activation modal button.
var btn = React.createFactory(ModelButton);
var btnProps = { modalId: 'custom-modal' };
ReactDOM.render(btn(btnProps), document.getElementById('custom-modal-btn-container'));

Form Modal

You can mount a form as modal using the component ModalForm.

var modal = React.createFactory(ModalForm);
var modalProps = {
  id: 'custom-modal-form',
  title: 'Modal Form',
  form: {
    inputs: {
      name: {
        label: "Product Name"
      },
      price: {
        label: "Price",
        component: "masked",
        maskType: "currency"
      }
    }
  }
};

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