Bookassist Header
This project is React Control that renders common Bookassist header. You can import this project to use into another react project or non-react project.
Build library
This project is also a library to use embedded in another apps. The library exports 2 things
- Header: This is the React component
- renderHeader: This is a function to render the header in anywhere.application.
To build the library you can execute
yarn install && yarn build
Publish library
You can publish this library to a npm repository. npm publish
How to use
You can use this library as part of es6 project as library and component into this project.
es6
To install the component, you have to include in your project as
npm install @bookassist/ba-js-header
To use into you project
import { Header } from '@bookassist/ba-js-header'
...
<Header />
Another js project or website
You have to include the js file
<link rel="stylesheet" href="https://unpkg.com/@bookassist/ba-styles@0.0.13/dist/ha-styles.css">
<script type="text/javascript" src="https://unpkg.com/@bookassist/ba-header@0.0.9-rc18/dist/ba-header.js"></script>
...
<div id="header"></div>
<script type="text/javascript">
renderHeader(document.getElementById("header"))
</script>
Options
Properties of the control
There are some properties you can configure to change the behaviour and adapt to your needdeds.
Property | Description | - |
---|---|---|
title | Title of the application | Mandatory string |
pageTitle | Title of the page | String. Default value: '' |
pageTitleBehaviour | Behaviour of the page title | Possible values:
|
langControl | The way to show the language selector | Possible values:
|
hotelChangeControl | How to show the hotel change control | Possible values:
|
logoutControl | How to show the logout control | Possible values:
|
breadcumbVisible | Flag to show or hide the breadcrumb | Boolean. Default value: false |
logo | Object to configure the logo of the header | Check logo configuration |
menuItems | Array of items that compose the menu of the header. | Check menu configuration |
retrieveHotelInformation | Function to retrieve the hotel information. This function has to return a promise to get the hotel | - |
retrieveUserInformation | Function to retrieve the user information. This function has to return a promise to get the hotel. You have to define this function if you want to see the user control on the menu | - |
filterHotel | Function to retrieve a list of hotel, this list will be shown in the hotel selector. This function has to return a promise to get the list of hotels. | This function has 2 parameters.
|
locationRender | Function to render the location text | - |
All these properties are avaible for the control and the function. Control
<Header title={ 'My Application' } />
function
renderHeader(document.getElementById("header"), { title: 'My Application' }})
Logo Configuration
As part of the properties of the header, you can set the configuration of the logo. This configuration is an object where you can set some properties.
Property | Description | - |
---|---|---|
type | Type of the logo you want to use | Possible values:
|
size | Object to customize the SVG logo | - |
size.width | With of the SVG logo | Default value 260 |
size.height | Height of the SVG logo | Default value 52 |
size.viewBox | ViewBox of the SVG logo | Default value 0 0 524 52 |
badge | You can set a badge next to the logo to set a label. This property is an object where you can set different attributes | - |
badge.visible | Flag to show or hide the badge | Default value is false |
badge.text | Text to show into the badge | Default values is '' |
badge.backgroundColor | Background color of the badge | Default values is '' |
badge.foregroundColor | Foreground color of the badge | Default values is '' |
Menu Configuration
The menu can be configured using children of the Header control or as property in the options. In case, you want to use as propety in the options, you have to fill the property menuItems with and array of objects with following properties.
Property | Description |
---|---|
id | The id of the menu. You can use this to access to the item searching by id |
title | Title of the item. You can set a i18n key because the control will try to translate it |
badgeText | You can set a badge next to the text of the item |
host | The host of the link where you want to go when click on the menu. https://www.bookassist.com |
path | The path of the link where you want to go when click on the menu. /path/to/my/page.html |
selected | Flag to know if this is a selected item |
children | Array of the items like this. This attribute makes that the item is a menu |
Menu only allows 2 levels of items.
Menu with child items is only available on Control not as function. You can see more details on Menu and Breadcrumb.
Callbacks or notification functions
There are some events that the header produces
Event | Description | Parameters |
---|---|---|
onChangeLanguage | When the user changes the language from header menu | language Language code of the new language |
onChangeHotel | When the user changes the active hotel | hotel Hotel object |
onLogout | When the user logout from header | - |
All these events are avaible for the control and the function. Control
<Header onLogout={ () => console.log('bye') } />
function
renderHeader(document.getElementById("header"), { onLogout: function() { console.log('bye') }})
Menu and Breadcrumb
The header can contains a menu and a breadcrumb. You can add them only in es6 format as children objects.
<Header>
<Breadcrumb>
<BreadcrumbItem name={'Home'}>
<BreadcrumbItem name={'Vouchers'}>
</Breadcrumb>
<Menu
id={'m_hotelinfo'}
url={'https://test.bookassist.com/hotelinfo.jsp'}
title={ 'Hotel Info' }
selected
>
<MenuItem
id={'mi_vou'}
url={'https://test.bookassist.com/voucher.jsp'}
text={ 'Vouchers' }
/>
<MenuItem
id={'mi_reviews'}
url={'https://test.bookassist.com/review.jsp'}
text={'Reviews'}
/>
</Menu>
<Menu
id={ 'm_help' }
url={ 'https://test.bookassit.com/help' }
title={ 'help' }
>
</Header>
Options
This library can be configured at global level to change the behaviour of the component. You can create a new global object called bookassist.header.config that can contain an object like
{
"checkConfig": true,
"api": {
"server": "https://api.bookassist.com",
"endpoints": {
"i18n": "/iface/i18n",
"hotel": "/iface/hotel",
"group": "/sso/admin/group",
"user": "/iface/user"
}
}
}