# XlReactWidgetModalDialogContainer

A redux-bound component used to control confirmation dialogs. 
Component is customizable through action parameters, but has more constraints than 
[`XlReactWidgetConfirmationDialog`](../xl-react-widget-confirmation-dialog/README.md).

### Summary

* [Exports](#exports)
* [Playground](#playground)
* [Properties](#properties)
* [Usage](#usage)
* [Example](#example)

### Exports

```text
- XlReactWidgetModalDialogContainer
```

### Playground

* [Confirmation Dialog Container Widget](https://xebialabs.github.io/xl-react-components/kitchen-sink.html#/widget/widgetConfirmationDialogContainer)

### Properties

Redux props:
- **dialogState** - (object) - an object containing properties of the dialog
    - **buttons** - (array) - an array of objects that define button properties:
        - **action** - the string which will be passed to the handler function for appropriate processing
        - **className** - the CSS class name which will be added to the HTML element to allow styling
        - **disabled** - whether the button is disabled
        - **keyCodes** - the code on which to trigger the onClick event of this button when pressed on the keyboard
        - **label** - the string which to show on the button
    - **message** - (string) - a message to be displayed in a body of modal 
    - **dialogClassName** - (string) - the class name which will be added to HTML element to allow CSS styling
    - **show** - (boolean) - whether to show the dialog. defaults to `false`
    - **title** - (string) - the title of the dialog
- **handleClose** - (function) - a function to be executed on dialog close event

### Usage

The dialog component is mounted once in the root of the application component tree.
The component is operated fully on redux data using actions and sagas.

To inject redux reducers into the application, next code should be added in redux configuration:
```js
import {xlReactConfirmationDialogReducer} from 'xl-react-components';

const allReducers = {
    // reducers
    confirmationDialog: xlReactConfirmationDialogReducer(),
    // reducers
}
```

Example of saga to control the dialog container:
```js
import {xlReactConfirmationDialogActions} from 'xl-react-components';

export function* askThenClose() {
    yield put(xlReactConfirmationDialogActions.showConfirmReject({
        confirm: localeMessages.leaveAction,
        dialogClassName: 'with-blue-header',
        message: localeMessages.unsavedChangesNotification,
        reject: localeMessages.stayOnPageButton,
        title: localeMessages.confirmLeaveSaveTitle
    }));
    const dialogClosedStatus = yield take(xlReactConfirmationDialogActions.HIDE);
    if (dialogClosedStatus.reason === xlReactConfirmationDialogActions.reasons.CONFIRMED) {
        yield call(close, formId);
    }
}
```

If the confirmation dialog container is to be called from a plugin, the plugin can use reducers from `xld-ci-explorer` 
and call actions directly from sagas. 

### Example
```jsx
<XlReactWidgetModalDialogContainer/>
```
