Tbc-panda-header NPM

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;