Home

omniport-frontend-formula-one

How to use?

Components

---

App Header

App Header is always attached to the top of the screen.

Instance

import {AppHeader} from 'formula_one'

{...}
const hamburgerDefaultOptions = [
  'hamburger--minus',
  'hamburger--spin',
  'hamburger--squeeze'
]
const hamburgerOptions = [
  'hamburger--minus',
  'hamburger--squeeze'
]
<AppHeader
    appName='Apps'
    appLogo={false}
    appLink={`http://${window.location.host}`}
    hamburgerOptions={hamburgerOptions}
    middle={false}
    onSidebarClick={this.handleSidebarClick}
    right={false}
    sideBarButton={false}
    sideBarVisibility={this.state.sideBarVisibility}
    userDropdown
/>

props details

Name	Default	Type	Description
appName	Site Name (from API)	{string}	Give app name in the header near logo.
appLogo	Site Logo (from API)	{url in string}	Give app logo in the header.
appLink	http://${window.location.host}	{url in string}	Provides href to the app home.
hamburgerOptions	hamburgerDefaultOptions	{array of string}	Provides type of hamburger animation. Accept an array of strings among following options. Enums: hamburger--minus hamburger--spin hamburger--squeeze Refer here
middle	null	{ReactNode}	Element to be rendered in the middle of the header.
onSidebarClick		{function}	Called when click event on sidebar button happens. Applicable only when prop sideBarButton has value true
right	null	{ReactNode}	Element to be rendered in the right of the header.
sideBarButton	false	{bool}	Show sidebar button in the left of header.
userDropDown	false	{bool}	Show user details/sign in button and notification bell in the right of the header else show institute logo (from API).

---

App Footer

App Footer is always attached to the bottom of the screen.

Instance

import {AppFooter} from 'formula_one'

{...}

const creators = [
    {
    name: 'Dhruv Bhanushali',
    role: 'Mentor'
    },
    {
    name: 'Gaurav Kumar',
    role: 'Frontend Developer'
    },
    {
    name: 'Praduman Goyal',
    role: 'Frontend Developer'
    },
]
<AppFooter
    creators={creators}
/>

props details

Name	Default	Type	Description
creators	required	{array of objects}	Give creators list in footer.Requires array of object containing keys ('name', 'role')

---

App Main

App Main is a wrapper around the container in between your AppHeader and AppFooter which applies some default style to your app.

Instance

import {AppMain} from 'formula_one'

{...}

<AppMain>
{<Components />}
</AppMain>

MaintainerView

MaintainerView is a wrapper around the components which are meant to viewed only by maintainers with special permissions.

Instance

import {MaintainerView} from 'formula_one'

{...}

<MaintainerView which='helpcentre'>
{<Components />}
</MaintainerView>

props details

Name	Default	Type	Description
which	required	{string}	Check if the user has specified rights by making a GET request with keyword which.

---

NonMaintainerView

NonMaintainerView is a wrapper around the components which are strictly useless to viewed by maintainers with special permissions.

Instance

import {NonMaintainerView} from 'formula_one'

{...}

<NonMaintainerView which='helpcentre'>
{<Components />}
</NonMaintainerView>

props details

Name	Default	Type	Description
which	required	{string}	Check if the user has specified rights by making a GET request with keyword which.

---

Functions

---

getCookie

getCookie returns the value of cookie corresponding to key passed as cname.

Instance

import {getCookie} from 'formula_one'

{...}

/**
 * Returns cookie corresponding to key
 *
 * @param {string} cname - The key corresponding to which cookie is required
 * @returns {string} The cookie key's value or empty string
 */
getCookie('selectedColor') //returns psychedelic

ifRole

ifRole returns the value of cookie corresponding to key passed as cname.

Instance

import {ifRole} from 'formula_one'

{...}

/**
 * Determine whether a role exists in the given array
 *
 * @param {array} roles - The array of roles a person has
 * @param {string} role - The role whose existence is being checked
 * @returns {string} The ActiveStatus enum or NOT_ROLE
 */
ifRole(whoAmI['roles'], 'Maintainer') //returns 'NOT_ROLE', 'IS_ACTIVE', 'HAS_BEEN_ACTIVE' or 'WILL_BE_ACTIVE'