tbc-common-helpers v0.3.10

TBC Common React App Helpers Modules

Common Helpers for all Trinidad Benham React apps, including:

• CommonDropDown
• Icons
• LabeledInput
• MultiSelect

Install

npm install --save tbc-common-helpers

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-common-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-common-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-common-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-common-helpers/dist/MultiSelect";

MultiSelect is placed within a Formik Field tag. NOTE: MultiSelect is not compatible with <LabeledInput />.

<Field
    name="title"
    value={formProps.values.title}
>
{field => (
    <MultiSelect
        {...field}
        optionList={optionList}
        onChange={sel => {
            formProps.setFieldValue("title", sel);
        }}
        {...props}
    />
)}
</Field>

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-common-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-common-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-common-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"
  />

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-common-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-common-helpers/dist/ConfirmationButton";

<ConfirmationButton
  primaryButton={{      
    class: "btn-secondary",
    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-common-helpers/dist/InputWithButton";

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

Required NPM Packages

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

Testing

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

jest.mock("tbc-common-helpers/dist/CommonDropDown", () => "div"); jest.mock("tbc-common-helpers/dist/Icons", () => "div"); jest.mock("tbc-common-helpers/dist/LabeledInput", () => "div"); jest.mock("tbc-common-helpers/dist/MultiSelect", () => "div"); jest.mock("tbc-common-helpers/dist/CheckboxInput", () => "div"); jest.mock("tbc-common-helpers/dist/DateTimeInput", () => "div"); jest.mock("tbc-common-helpers/dist/EditSaveButton", () => "div"); jest.mock("tbc-common-helpers/dist/ConfirmationButton", () => "div"); jest.mock("tbc-common-helpers/dist/InputWithButton", () => "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")