tbc-panda-typeahead v0.0.0
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;
4 years ago