TBC Panda React App Header

Header for all TBC Panda React apps

Install

npm install --save tbc-panda-header

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 after the colors.scss import:

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

Header Component:

import HeaderContainer from "tbc-panda-header/dist/Component/HeaderContainer";

Then, in the highest level presentational component, place the following where it should appear:

<HeaderContainer pagesObject={pagesObject} />

This should be above any routing tags.

pagesObject

The Header module requires a pagesObject which describes what items appear in the header.

It is recommended that a pagesConfig.js file be created which hosts this object.

The pagesObject is made up of:

| Key | Type | Default | Description | | ------------------- | ------- | ----------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------- | | pages | Array | [] | key containing an array of page objects (see below for details) | | utilsComponents | Array | [] | key contains an array of utility button components (items that appear in the far right of the header) | | default | Number | 0 | value (index) used to determine the default page index | | mobileThreshold | Number | 2 | value used to determine at which Bootstrap size does the header convert to "mobile"; defaults to 2 ("md") (options: 0 = "xs", 1 = "sm", 2 = "md", 3 = "lg", 4 = "xl") | | maxWidth | Boolean | false | if true, then header will be maximum width of screen for all sizes; else it will be limited to standard Bootstrap container size | | searchObject | Object | { enabled: false} | object controlling header search field (see below for details) |

The objects within the pages key contains:

| Key | Type | Required | Description | | --------------- | --------------- | -------- | -------------------------------------------------------------------- | | path | String | REQUIRED | used for key and local path (if local link) | | name | String | REQUIRED | short name (used in header and home tab) | | longName | String | OPTIONAL | long name (used in home tab) | | icon | String | REQUIRED | icon classes for links | | component | React.Component | OPTIONAL | the container component for internal pages | | link | String | OPTIONAL | external URL | | target | String | OPTIONAL | anchor target for external URLs (defaults to "_new") | | desktopOnly | Boolean | OPTIONAL | flag whether link appears in header only for desktop implementations | | mobileOnly | Boolean | OPTIONAL | flag whether link appears in header `only for mobile implementations |

The searchObject object is populated by the following keys:

| Key | Type | Default | Description | | ----------------------- | -------- | -------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | | enabled | Boolean | false | flag determining if search field appears (and that the header is sized accordingly) NOTE: header height is 53px without search and 75px with | | initialValues | Object | {} | determines if/what initial values appear in the search fields; NOTE: search term form fieldName/value keyes are searchTerm and searchScope (Example: {searchTerm: "", searchScope: "ID"}) | | placeholder | String | "" | placeholder text within empty search field | | stickyValues | Boolean | false | by default, values clear upon search; setting this flag to true makes search values "sticky" (do not clear) | | submitSearch | Function | () => {} | function fired when search field is submitted | | prependScopeEnabled | Boolean | false | flag determining if a prepended drop down occurs before the search bar (usually for determining search scope); NOTE: drop down option form fieldName/value key is searchScope | | prependOptions | Array | [] | array of objects used for prepend drop down; objects include cd (value of selection) and nm (display name of option); example: [{cd: "ANY", nm: ""}, {cd: "NM", nm: "Name"}, {cd: "ID", nm: "ID"}]; NOTE: blank option will not be added automatically - the options provided in the option array are exactly what will be available | | enableEmptySearch | Boolean | false | flag determining if search icon is active when nothing is entered in field; allows for empty searches |

See below for sample pagesConfig.js file.

Required NPM Packages

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

Testing

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

jest.mock("tbc-panda-header/dist/Component/HeaderContainer", () => "div");

Sample pagesConfig.js file

/** @module pagesConfig */

import React from "react";

import Tab1 from "./Tab1";
import Tab2 from "./Tab2";
import UtilButton from "./UtilButton";

const pagesObject = {
 default: 0,
 mobileThreshold: 1, // "sm"
 pages: [
 {
 path: "tab1",
 name: "Tab 1",
 icon: "far fa-dice-one",
 component: () => <Tab1 />
 },
 {
 path: "tab2",
 name: "Tab 2",
 icon: "far fa-dice-two",
 component: () => <Tab2 />
 },
 {
 path: "sdo",
 name: "SDO",
 longName: "Seed Dealer Orders",
 icon: "fas fa-store-alt",
 link: `http://seed-staging.trinidadbenham.com`
 }
 ],
 utilComponents: [<UtilButton />],
 maxWidth: false,
 searchObject: {
 enabled: true,
 initialValues: { searchTerm: "Test" },
 placeholder: "Search by ID or Name",
 stickyValues: true,
 submitSearch: values => console.log(values),
 prependScopeEnabled: true,
 prependOptions: [
 {cd: "ANY", nm: ""},
 {cd: "NM", nm: "Name"},
 {cd: "ID", nm: "ID"}
 ]
 }
};

export default pagesObject;