包详细信息

This project was created by me because I couldn't find an easy way to create a simple yes or no modal dialog.

This package uses Material-UI but only imports the necessary components to keep the size down.

Installation: npm install modalyesnodialog

Usage:

1. Add the imports at the top of your component script:

   • import ModalYesNoDialog from 'ModalYesNoDialog';

   • import 'ModalYesNoDialog/src/components/ModalYesNoDialog.css';

2. Create the event handler that gets called when the user clicks on one of the 2 buttons:

   EG:

     logOffDialogEvent(dialogResponse) {
          if (this.state.showModalDialog === false) {
               return;
           }
   
           if (dialogResponse.currentTarget.textContent==="Yes") {
               // Do something here
            }
     };
   

3. Don't forget to bind the event handler to this in your constructor

   EG:

   • this.logOffDialogEvent = this.logOffDialogEvent.bind(this);

4. Add the component to the return block of render(): EG:

     <ModalYesNoDialog isVisible={this.state.showModalDialog} title="This is the title" description="Are you sure that you want to do this ?" eventHandler={this.myEventHandler}>
     </ModalYesNoDialog>
   

   • isVisible: This should be bound to a boolean state that you set to true when you want to show the modal dialog
   • title: Text that appears at the top of the dialog
   • description: The message that you want to display
   • firstButtonText (optional): The text of the first button. If not supplied, defaults to No
   • secondButtonText (optional): The text of the second. If not supplied, defaults to Yes

   • eventHandler: The event handler

     Make sure not to put the <ModalYesNoDialog> component inside of another component in render() because the modal dialog may not appear.

     Version history:

     0.1.17 Updated to Material UI 3. Fixed bug when rendering buttons 0.1.11 Fixed Babel module loading to support Jest and Enazyme unit tests