TBC Common React App Confirmation Modal

Common Modal for all Trinidad Benham React apps

Install

npm install --save tbc-common-confirmation-modal

Modal Component:

In component where you wish modal to be activated:

import ConfirmationModalContainer from "tbc-common-confirmation-modal/dist/ConfirmationModalContainer";

<ConfirmationModalContainer {...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-primary" | 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-secondary",
        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 ModalFooter that can be used in any other modal. It uses the same buttons prop as above.

import ModalFooterContainer from "tbc-common-confirmation-modal/dist/ModalFooterContainer";

<ModalFooterContainer 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-common-confirmation-modal/dist/ConfirmationModalContainer", () => "div"); jest.mock("tbc-common-confirmation-modal/dist/ModalFooterContainer", () => "div");