@lightspeed/cirrus-dialog NPM

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>

@lightspeed/cirrus-button @lightspeed/cirrus-group @lightspeed/cirrus-modal classnames lodash

@everything-registry/sub-chunk-548 @zalastax/nolb-_lig

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago