## 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 <Switch> 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;
```