Dialog
Reusable and structured dialog box.Installation
First, make sure you have been through the Getting Started steps of adding Cirrus in your application.If using Yarn:
yarn add @lightspeed/cirrus-dialog
Or using npm:
npm i -S @lightspeed/cirrus-dialog
Usage
Import required styles in your.scss
:@import '@lightspeed/cirrus-dialog/Dialog.scss';
React Component
Props
| Prop | Type | Default | Required | Description | | ------------- | ------ | ---------- | -------- | --------------------------------------------------------------------------------------------------- | |type
| string | default
| no | One of default
, primary
, secondary
, danger
|
| message
| string | | yes | String shown in the ModalBody
as the message, required
|
| title
| string | | no | String shown in the ModalHeader
as title |
| isOpen
| bool | false
| no | State to determine if <Dialog>
should be displayed |
| isLoading
| bool | false
| no | State to determine if the actions buttons should be disabled while some promise is getting resolved |
| scroll
| bool | false
| no | State to determine if the body of the modal should be scrollable or not |
| onCancel
| func | | yes | Function called when the cancel
button is clicked, required
|
| onConfirm
| func | | yes | Function called when the confirm
button is clicked, required
|
| cancelText
| string | 'Cancel'
| no | String shown on the cancel
button |
| confirmText
| string | 'Ok'
| no | String shown on the confirm
button |
| cancelRest
| object | | no | Shape with any object pass to the cancel
button, e.g({data-test: 'dialog-cancel-button'}
) |
| confirmRest
| object | | no | Shape with any object pass to the confirm
button, e.g({data-test: 'dialog-cancel-button'}
) |Example
import React from 'react';
import Dialog from '@lightspeed/cirrus-dialog';
const MyComponent = () => (
<Dialog
title="Title"
message="Messsage"
isOpen={this.state.isOpen}
isLoading={this.state.isLoading}
onCancel={this.onCancel}
onConfirm={this.onConfirm}
cancelText="No"
confirmText="Yes"
type="danger"
/>
);
export default MyComponent;
CSS Component
Classes
| Type | Class | | ---- | --------------------- | | base |.cr-dialog
|
| base | .cr-dialog__actions
|Example
<div class="cr-dialog">
<div class="cr-modal__header">
<div class="cr-modal__header__content-wrap">Dialog Prompt ''</div>
<div class="cr-modal__close-wrap"></div>
</div>
<div class="cr-modal__body">
<p class="cr-text-base cr-text--body">Are you sure, are you really really sure? It's your call. </p>
</div>
<div class="cr-modal__footer">
<div class="cr-group cr-dialog__actions">
<div class="cr-group__item">
<button type="button" class="cr-button"><span class="cr-button__content">No</span></button>
</div>
<div class="cr-group__item">
<button type="button" class="cr-button cr-button--fill"><span class="cr-button__content">Yes</span></button>
</div>
</div>
</div>
</div>