oc-cm-navigation-header

Description

Provides a navigation header with back arrow, paging (@opuscapita/react-list-items), and a dropdown menu (@opuscapita/react-dropdown).

Installation

npm install @opuscapita/oc-cm-navigation-header

Demo

View the DEMO

Builds

UMD

The default build with compiled styles in the .js file. Also minified version available in the lib/umd directory.

CommonJS/ES Module

You need to configure your module loader to use cjs or es fields of the package.json to use these module types. Also you need to configure sass loader, since all the styles are in sass format.

• With webpack use resolve.mainFields to configure the module type.
• Add SASS loader to support importing of SASS styles.

API

| Prop name | Type | Default | Description | | ------------------- | ------------- | -------- | ------------------------------------------ | | title | string | null | Title shown in the left side of the header | | onBackClick | function | null | Back button click callback. Button is hidden, if function is not provided. | | dropdown | dropdownType | | Defines options for the dropdown menu (see dropdownType for more information). | | paging | pagingType | | Defines options for the paging (see pagingType for more information). | | className | string | | Custom class name | | id | string | required | The ID | | rightContent | node | null | an option to add custom right aligned content before dropdown menu | | sideSectionBasis | string, number | 200px | Side column's (left, right) flex-basis value. The center column will take all the remaining space |

Types

• dropdownType:

For up-to-date information, please see: https://github.com/OpusCapita/react-dropdown/blob/master/README.md

| Prop name | Type | Default | Description | | ------------------------ | ----------------- | -------- | ------------------------------------------ | | menuItems | array of menu items | required | List of the dropdown menu items | | caret | boolean | false | If true, caret is show | | disabled | boolean | false | Is dropdown disabled or not | | dropup | boolean | false | Is dropup or dropdown | | pullLeft | boolean | false | If false, dropdown is aligned on right, otherwise on left | | title | number, string or element | | Title of the dropdown |

• dropdownType - menu items:

| Prop name | Type | Default | Description | | ------------------------ | ----------------- | ---------------------------------------- | ---------------------------------------- | | disabled | boolean | | Is dropdown menu item disabled | | disableClosing | boolean | | Is dropdown menu item's closing disabled | | href | string | | Hyperlink of the dropdown menu item | | icon | element | | Icon of the dropdown menu item | | id | number or string | | Unique HTML id attribute | | onClick | function | | Callback function of click | | title | number, string or element | | Title of the dropdown menu item | | type | string | | Enumeration either 'item' or 'divider' |

• pagingType:

For up-to-date information, please see: https://github.com/OpusCapita/react-list-items/blob/master/src/list-items/README.md

| Prop name | Type | Default | Description | | ------------------------ | ---------- | --------- | ---------------------------------------- | | disabled | bool | false | A sign of a disabled status of navigation icons | goToItem | function | required | Callback that is called when navigation to another item should happen | itemElement | element | null | Custom component to render between navigation icons. By default it renders a string [m/n]. | itemId | [num, str] | required | Initially selected item id | itemIds | list | required | List of item ids

Code example

import React from 'react';
import NavigationHeader from '@opuscapita/oc-cm-navigation-header';

export default class ReactView extends React.Component {
  render() {
    return (
      <NavigationHeader
        propName="propValue"
      />
    );
  }
}