PublicModalsService

Allows creating and showing customized modals containing a React components.

Acquiring PublicModalsService

In order to be used, the PublicModalsService has to be imported:

import {PublicModalsService} from 'sabre-ngv-modals/services/PublicModalService';

Once imported, it can be obtained in a standard way:

const service: PublicModalsService = getService(PublicModalsService);

Available methods

showReactModal

showReactModal
`showReactModal(options: ReactModalOptions): void;` This method takes as a parameter `ReactModalOptions` object that describes the modal to be opened. It defines obligatory and optional properties: `component` param is the most important one, here you are required to inject your component instance. [`header`] is the actual text of the modal’s header. [`store`] is an optional param that has to point to the Redux store if you want to use one (the sample in the SDK showcases one with the store since this allows to share data between UI and services). [`actions`] are the buttons on the bottom of the modal window. Keep in mind that you need to use the `closeReactModal` function and use it in the `onClick` implementation for the modal to close. If there is no action button passed, there will be added only 'Cancel' button. [`onHide`] function is called whenever modal closes (either via `closeReactModal` method, closing the modal window by 'X' button or pressing ESC key). [`onSubmit`] function is called whenever user calls CTRL+ENTER (or COMMAND+RETURN on macOS) key combo, so usually it’s the same function that 'submit' button executes (if there’s one). If not provided then CTRL+ENTER will close the modal. [`layerOptions`] are configurations for the layer that modal will be open on. [`modalSize`] is size of the modal to be opened. Can only have one of the following values: 'xs', 'xsmall', 'sm', 'small', 'medium', 'lg', 'large'. If not provided then `large` size will be applied. [`modalClassName`] is CSS class name for modal that can be used to apply styles. [`modalBodyClassName`] is CSS class name for modal body that can be used to apply styles.

showReactModal(options: ReactModalOptions): void;

This method takes as a parameter ReactModalOptions object that describes the modal to be opened. It defines obligatory and optional properties:

component param is the most important one, here you are required to inject your component instance.
[header] is the actual text of the modal’s header.
[store] is an optional param that has to point to the Redux store if you want to use one (the sample in the SDK showcases one with the store since this allows to share data between UI and services).
[actions] are the buttons on the bottom of the modal window. Keep in mind that you need to use the closeReactModal function and use it in the onClick implementation for the modal to close. If there is no action button passed, there will be added only 'Cancel' button.
[onHide] function is called whenever modal closes (either via closeReactModal method, closing the modal window by 'X' button or pressing ESC key).
[onSubmit] function is called whenever user calls CTRL+ENTER (or COMMAND+RETURN on macOS) key combo, so usually it’s the same function that 'submit' button executes (if there’s one). If not provided then CTRL+ENTER will close the modal.
[layerOptions] are configurations for the layer that modal will be open on.
[modalSize] is size of the modal to be opened. Can only have one of the following values: 'xs', 'xsmall', 'sm', 'small', 'medium', 'lg', 'large'. If not provided then large size will be applied.
[modalClassName] is CSS class name for modal that can be used to apply styles.
[modalBodyClassName] is CSS class name for modal body that can be used to apply styles.

closeReactModal

closeReactModal
`closeReactModal(position?: number): void;` It is used for manual closing previous opened window. Position parameter is optional, can be used in case modal was opened on different layer than default.

closeReactModal(position?: number): void;

It is used for manual closing previous opened window. Position parameter is optional, can be used in case modal was opened on different layer than default.

See com.sabre.redapp.example3.web.react.modal sample for implementation.