# XlReactWidgetConfirmationDialog

A component for the creation of confirmation dialogs with an arbitrary number of buttons/checkboxes,
with customization options via skins and classes.


### Summary

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

### Exports
```text
- XlReactWidgetConfirmationDialog
- confirmationDialogSkins
```

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

### Properties
- **animation** - (boolean) - whether to show the widget with a fade animation. defaults to `false`
- **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
- **children** - (element) - an element which defines the dialog content
- **dialogClassName** - (string) - the class name which will be added to HTML element to allow CSS styling
- **onButtonClick** - (function) - triggers once a dialog button is clicked
- **onCheckboxClick** - (function) - triggers once a dialog checkbox is clicked
- **show** - (boolean) - whether to show the dialog. defaults to `false`
- **skin** - (string) - possible values: confirmationDialogSkins.DEFAULT or confirmationDialogSkins.CHECKBOX.
by selecting CHECKBOX, the widget will support one or more checkboxes whose actions can be controlled via the handler function `onCheckboxClick`
- **title** - (string) - the title of the dialog

### Example
```jsx
import {XlReactWidgetConfirmationDialog} from 'xl-react-components';
import {Markup} from 'interweave';

const [showConfirmationDialog, setShowConfirmationDialog] = useState(false);

const handleClose = (reason) => {
    setShowConfirmationDialog(false);

    if (reason === 'confirm') {
        consol.log("Dialog confirmed");
    } else if (reason === 'discard') {
        consol.log("Dialog canceled");
    }
};

const buttons = [{
    action: 'confirm',
    className: 'xl-primary pull-right',
    label: "Confirm"
}, {
    action: 'cancel',
    className: 'xl-secondary pull-right',
    label: "Cancel"
}];

const confirmationDialog = <XlReactWidgetConfirmationDialog
    buttons={buttons}
    dialogClassName={'xl-react-widget-patch-editor-confirmation-dialog'}
    onButtonClick={handleClose}
    show={showConfirmationDialog}
    title="Dialog title">
    <Markup content="Dialog content"/>
</XlReactWidgetConfirmationDialog>;
```
