@opuscapita/react-confirmation-dialog

3.2.0 • Public • Published

react-confirmation-dialog

Description

A modal popup dialog component with yes/no and an optional third, middle button.

Installation

npm install @opuscapita/react-confirmation-dialog

Demo

View the DEMO

Builds

UMD

The default build with compiled styles in the .js file. Also minified version available in the lib/umd directory.

CommonJS/ES Module

You need to configure your module loader to use cjs or es fields of the package.json to use these module types. Also you need to configure sass loader, since all the styles are in sass format.

API

Prop name Type Default Description
id string oc-confirm-dialog String prefix for the HTML ID's
translations object of [string, element] { ok: 'OK', cancel: 'Cancel', thirdButton: '', title: 'Title', body: 'Body' } Translation texts
cancelCallback function Callback to function executed on cancel button click
confirmCallback function Callback to function executed on confirm button click
okButtonDisabled bool false Disabled status of the confirm button
className string '' Optional class name for Modal
thirdButtonCallback function undefined Callback to function executed on middle button click
thirdButtonDisabled bool false Disabled status of the middle button
paintConfirmButtonOrange bool true Determines whether confirm button should be orange
paintThirdButtonOrange bool false Determines whether middle button should be orange
paintCancelButtonOrange bool false Determines whether cancel button should be orange
footerContent string, node undefined Content displayed on the left side of the footer
modalProps object {} Bootstrap Modal props

Code example

import ConfirmDialog from '@opuscapita/react-confirmation-dialog';

class ConfirmDialogView extends React.Component {
  constructor() {
    this.state = {
      showConfirmationDialog: false;
    }
  }

  hideConfirmDialog = () => {
    this.setState({
      showConfirmationDialog: false
    });
  }

  showConfirmDialog = () => {
    this.setState({
      showConfirmationDialog: true
    });
  }

  render() {
    return (
        this.state.showConfirmationDialog &&
        <ConfirmDialog
          localizationTexts={{
            title: 'Confirmation',
            body: 'Are you sure you want to do this?',
          }}
          cancelCallback={this.hideConfirmDialog}
          confirmCallback={this.confirmAction}
        />
    );
  }
}

Readme

Keywords

none

Package Sidebar

Install

npm i @opuscapita/react-confirmation-dialog

Weekly Downloads

0

Version

3.2.0

License

MIT

Unpacked Size

7.88 MB

Total Files

10

Last publish

Collaborators

  • ariusz
  • ilhamkadduri
  • smachnow
  • piotr.krzysztof.murdzia
  • kuos
  • elaczapiewska
  • janek.bug
  • ocmachineuser
  • ocautomation
  • maciej-wakula-opuscapita