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;