tbc-panda-confirmation-modal v0.2.5

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

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:

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
• 0.3.0 Removed internal styles.scss; styles will now need to be provided from parent.

Example modals.scss:

/** @module modals.scss */

.lineItem_modal_header {
  width: 100%;
  .modal-title {
    width: 100%;
    margin-bottom: -15px;
  }
}

.nso_form_rt_col {
  margin-top: 38px;
}

.modal-dialog {
  .modal-content {
    .modal-header {
      background-color: $color-main;
      color: $color-main-text;
      button.close {
        color: $color-main-text;
      }
    }
    .modal-body {
      .form-group {
        margin-bottom: 0.5rem;
      }
    }
  }
}

.modal-xxl {
  max-width: 100%;
  margin-left: 1.75rem;
  margin-right: 1.75rem;
}

.modal-container {
  width: 100%;
  padding-right: 15px;
  padding-left: 15px;
  margin-right: auto;
  margin-left: auto;
}

@media (max-width: 576px) {
  .modal-xxl {
    margin: inherit;
  }
  .modal-container {
    max-width: 100%;
    padding-right: 0;
    padding-left: 0;
  }
}

@media (min-width: 768px) {
  .modal-container {
    max-width: 750px;
  }
}

@media (min-width: 992px) {
  .modal-xl {
    max-width: 800px;
  }
  .modal-container {
    max-width: 990px;
  }
}

@media (min-width: 1200px) {
  .modal-xl {
    max-width: 1100px;
  }
  .modal-container {
    max-width: 1170px;
  }
}

@media (min-width: 1500px) {
  .modal-container {
    max-width: 1470px;
  }
}