tbc-panda-confirmation-modal

TBC Common React App Confirmation Modal

Common Modal for all Trinidad Benham Panda React apps

Install

npm install --save tbc-panda-confirmation-modal

Styles

As of version 0.2.0, to use the component included in this module, the following style file will need to be imported/included into the main App.scss:

@import "tbc-panda-confirmation-modal/dist/styles/modals.scss";

Modal Component:

In component where you wish modal to be activated:

import ConfirmationModal from "tbc-panda-confirmation-modal/dist/ConfirmationModal";

<ConfirmationModal {...props} />

Props

Prop	Type	Required	Default	Description
isOpen	Boolean	Required	false	flag used to determine if modal is open or not
title	String	Recommended	""	modal's title
body	String	Optional	""	modal's body text
large	Boolean	Optional	false	flag used if a large confirmation modal is desired
buttons	Object	Required	see below	see below

Buttons

The buttons object prop is made of three optional sub-objects: left, center, and right, each representing an available button in the modal's footer (see below).

Each buttons sub-object has the following keys:

Key	Type	Default: left	Default: center	Default: right	Description
show	Boolean	false	false	false	flag determining if button is displayed
style	String	"btn-info"	"btn-warning"	"btn-prime"	CSS style applied to button
text	String	"Cancel"	"Delete"	"Save"	Text of button
icon	String	"far fa-times-circle"	"far fa-trash-alt"	"fas fa-upload"	Icon (by CSS class) within button
disabled	Boolean	false	false	false	flag determining if button is disabled
type	String	""	""	""	Type of button (used in forms): "", "submit", or "reset"
function	Function	none	none	none	function fired when button is clicked

Example:

  <ConfirmationModal
    isOpen={toggleState.open.includes("this-modal")}
    title="Confirmation Modal"
    body="Do you confirm?"
    large
    buttons={{
      left: {
        show: true,
        function: () => {
          toggleToggle("this-modal");
        }
      },
      center: {
        show: false // unnecessary, as this is default value
      }
      right: {
        show: true,
        style: "btn-main",
        text: "Do Something Blue",
        icon: "fas fa-question-circle",
        disabled: {disabledFlag},
        function: () => {
          doSomethingBlue();
        }
      }
    }}
  />

Modal Footer

Along with the Confirmation Modal itself, this module also has access to a separate ModalFoot that can be used in any other modal. It uses the same buttons prop as above.

import ModalFoot from "tbc-panda-confirmation-modal/dist/ModalFoot";

<ModalFoot buttons={buttons} />

Required NPM Packages

npm install --save bootstrap reactstrap @material-ui/core lodash

Testing

For any unit test file that deep renders ("mounts") this imported component, add the following:

jest.mock("tbc-panda-confirmation-modal/dist/ConfirmationModal", () => "div"); jest.mock("tbc-panda-confirmation-modal/dist/ModalFoot", () => "div");

Change Log

• 0.2.5 Moved from ConfirmationModalContainer to ConfirmationModal, and ModalFootContainer to ModalFoot component names