tbc-panda-helpers v0.5.17

TBC Common React App Helpers Modules

Helpers for all Trinidad Benham Panda React apps, including:

• CommonDropDown
• Icons
• LabeledInput
• MultiSelect
• CheckboxInput
• DateTimeInput
• EditSaveButton
• ConfirmationButton
• InputWithButton
• NumericInput

Install

npm install --save tbc-panda-helpers

Styles

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

@import "tbc-panda-helpers/dist/styles/header.scss";

If the DateTimeInput is to be included in your app, add the following to index.js along with other third party style inclusions:

import "react-datepicker/dist/react-datepicker.css";

Components

CommonDropDown Component:

Common Drop Down takes a dictionary or array of data objects and returns a group of option tags (for use within a select).

import CommonDropDown from "tbc-panda-helpers/dist/CommonDropDown";

Within a select tag or React Component equivalent, place:

<CommonDropDown {...props} />

CommonDropDown props

Expected data format

options

CommonDropDown expects the options array to look like this:

[
    {
        cd: "CODE",
        nm: "Name",
        act: true,
        ...
    },    
    {
        cd: "INACT",
        nm: "Inactive Value",
        act: false,
        ...
    }
]

Other key/values can be provided, but these will not be used by the CommonDropDown unless set so by the props.

dictionary

CommonDropDown expect the dictionary object to look like this:

{
    CODE: {
        nm: "Name",
        act: true,
        ...
    },
    INACT: {
        nm: "Inactive Value",
        act: false,
        ...
    }
}

By default, the key of each item will be used as the value, although this can be modified via props, as can the display name.

Icons Component:

Icons component contains three pre-build dynamic icons.

import { RequiredIcon, WarningIcon, SavedIcon, YesNoIcon } from "tbc-panda-helpers/dist/Icons";

RequiredIcon:

This is a small icon that can be placed at the end of a field label for a required field; it has a tool tip stating "Required Field"

<RequiredIcon notRequired={!required} />

WarningIcon:

This is a small icon that can be placed where ever a warning can be placed.

<WarningIcon {...props} />

SavedIcon:

This icon shows a red file or green upload icon depending on if the "saved" flag prop is provided.

<SavedIcon saved={saved} />

YesNoIcon:

This icon shows a red x in a circle for prop of false and a green check in a circle for prop of true.

<YesNoIcon boolean={boolean} />

LabeledInput Component:

This takes the potentially large and oft-repeated Formik field input and simplifies it into a single React component.

import LabeledInput from "tbc-panda-helpers/dist/LabeledInput";

 <LabeledInput
    name="title"
    title="Input Title"
    columnWidths={[6, 6]}
    formProps={formProps}
    {...props}
/>

MultiSelect Component:

MultiSelect is a specialized input select component that allows for multiple items within a drop down to be selected and displayed. It uses react-select as a foundation.

import MultiSelect from "tbc-panda-helpers/dist/MultiSelect";

  <MultiSelect
    formProps={formProps}
    title="MultiSelect Values:"
    name="multiSelectValues"
    columnWidths={[12, 12]}
    optionList={options.map(item => {
      return { value: item.cd, label: item.nm };
    })}
    onChange={sel => {
      console.log("selection:", sel);
      formProps.setFieldValue("multiSelectValues", sel);
    }}
    closeMenuOnSelect
    isRequired
  />

NOTE:

The values returned by MultiSelect is an array of { value: item.cd, label: item.nm } objects (same format as the optionsList input).

CheckboxInput Component:

CheckboxInput

This is similar to LabeledInput except it provides a label and checkbox

import CheckboxInput from "tbc-panda-helpers/dist/CheckboxInput";

 <CheckboxInput
    name="Checkbox"
    title="check"
    formProps={formProps}
    columnWidths={[6, 6]}
    isDisabled={isDisabled}
    isRequired={isRequired}
/>

Checkbox

This component also contains the stand-alone checkbox, which can be used separately from the label.

import { Checkbox } from "tbc-panda-helpers/dist/CheckboxInput";

 <Checkbox
    title="check"
    formProps={formProps}
    isDisabled={isDisabled}
/>

DateTimeInput Component:

Date/Time input and label, using react-datepicker within Formik Field.

import DateTimeInput from "tbc-panda-helpers/dist/DateTimeInput";

 <DateTimeInput
    name="datetime"
    title="Date/Time"
    formProps={formProps}
    columnWidths={[6, 6]}
    placeHolderText="Select Date and Time"
    isDisabled={isDisabled}
    isRequired={isRequired}
    fieldClass=""
    calendarClass=""
    visualDateFormat="MMMM d, yyyy h:mm aa"
    dataDateFormat="MM/DD/YYYY hh:mm A"
    showTimeSelect={showTimeSelect}
    timeIntervals={15}
    timeFormat="HH:mm"
    timeCaption="Time"
  />

NOTE: Additional props can be passed into DateTimeInput, and they will pass as is into DatePicker within.

Edit/Save Component:

A single component that replaces need for separate "Edit" and "Save" buttons (displayed based on state). Button component with two states: a single button with text "Edit" and a pair of buttons for "Save" and "Cancel".

import EditSaveButton from "tbc-panda-helpers/dist/EditSaveButton";

<EditSaveButton
  isDisabled={isDisabled}
  isSaveMode={toggleValue}
  toggleFunc={() => {
    toggleEditSave();
  }}
  saveFunc={() => {
    formProps.handleSubmit();
    toggleEditSave();
  }}
  cancelFunc={() => {
    formProps.handleReset();
    toggleEditSave();
  }}
  isSaveDisabled={isSaveDisabled}
  align={align}
/>

ConfirmationButton Component:

Button component with two states: a single button with customizable text and a pair of buttons for "Save" and "Cancel". Replaces the need for some confirmation modals.

import ConfirmationButton from "tbc-panda-helpers/dist/ConfirmationButton";

<ConfirmationButton
  primaryButton={{      
    class: "btn-main",
    text: "Edit",
    icon: "far fa-edit",
    isDisabled: false
  }}
  confirmedFunc={confirmedFunc}
  message="Are you sure?"
  align="right"
/>

InputWithButton Component:

Text input component with integration button.

import InputWithButton from "tbc-panda-helpers/dist/InputWithButton";

<InputWithButton
  title="Input:"
  name="input"
  formProps={formProps}
  columnWidths={[6, 6]}
  isRequired={isRequired}
  buttonIcon={"fas fa-search"}
  buttonClass={"btn-prime"}
  buttonPosition={"end"}
  isButtonDisabled={!formProps.values.input}
  buttonFunction={() => {
    setModalOpen(true);
  }}
/>

NumericInput Component:

Input component for numeric input only.

NOTE: This is more robust than using type="number" within LabeledInput.

import NumericInput from "tbc-panda-helpers/dist/NumericInput";

<NumericInput
  name="number"
  title="Number:"
  formProps={formProps}
  columnWidths={[6, 6]}
  isDisabled={demoFlag}
/>

Required NPM Packages

npm install --save formik react-select react-datepicker lodash moment framer-motion react-number-format

Testing

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

jest.mock("tbc-panda-helpers/dist/CommonDropDown", () => "div"); jest.mock("tbc-panda-helpers/dist/Icons", () => "div"); jest.mock("tbc-panda-helpers/dist/LabeledInput", () => "div"); jest.mock("tbc-panda-helpers/dist/MultiSelect", () => "div"); jest.mock("tbc-panda-helpers/dist/CheckboxInput", () => "div"); jest.mock("tbc-panda-helpers/dist/DateTimeInput", () => "div"); jest.mock("tbc-panda-helpers/dist/EditSaveButton", () => "div"); jest.mock("tbc-panda-helpers/dist/ConfirmationButton", () => "div"); jest.mock("tbc-panda-helpers/dist/InputWithButton", () => "div"); jest.mock("tbc-panda-helpers/dist/NumericInput", () => "div");

Changelog

• 0.3.0: Addition of CheckboxInput, DateTimeInput, EditSaveButton, ConfirmationButton, InputWithButton components
• 0.3.7: Updated Boolean naming convention in new components (to "isSomething" or "showSomething" instead of just "something")
• 0.4.2: Added NumericInput
• 0.5.0: Updated MultiSelect to match other inputs; improvements to NumericInput
• 0.5.1: Added onChange prop option to CheckboxInput
• 0.5.3: LabeledInput now functions with Formik/Yup validationSchema; uses both isRequired/isDisabled and required/disabled (depreciated) params
• 0.5.6: Alternate error display option added (customErrorObject; generates Tooltip instead of Alert)
• 0.5.9: Added isIconOnly flag to Save/Edit Button
• 0.5.12: Added iconSize field to icon only Save/Edit button
• 0.5.15: Added optional primaryButton param to Save/Edit button
• 0.5.16: Allow 0 in NumericInput required fields; also disabled autocomplete in DateTimeInput
• 0.5.17: Added placeHolderText to CommonDropDown