Bluerain Plugin Taskbar

Adds Taskbar plugin .https://blueeast.gitbook.io/bluerain-plugin-taskbar

| 🌏 Web | 🖥 Electron | 📱 React Native |
| :----------------: | :----------------: | :----------------: |
| ✔️ | ✔️ |✔️|

|Type | Example 1 |Example 2 |
| :----------------: | :----------------: |:----------------:
| Web |!taskbar|!taskbar|
| Electron |TBD |TBD |
| Native |TBD |TBD |

Installation

Run the following command in the plugin directoy:

``shell
yarn add @blueeast/bluerain-plugin-taskbar
`

Hooks

This plugin provides flexibility of adding Internationalisation in App

$3

This hook gives the ability to modify the main System App component that gets wrapped in react-router-redux's ConnectedRouter.

#### Parameters:

| Name | Type | Description |
| --------- | --------------- | ------------------------------ |
| schema | React.Component | provides taskbar in schema|

#### Returns:

| Name | Type | Description |
| --------- | --------------- | ------------------------------ |
| schema | React.Component |Adds the taskbar component in the system layout |

$3

` react

ctx.Filters.add('bluerain.system.app.layout', function taskbar(schema) {
schema.children.unshift({ component: withSystemNav(Taskbar) });
return schema;
});

ctx.Filters.add('bluerain.redux.reducers.bluerain', function
AddSystemNavReducers(reducers) {
return Object.assign({}, reducers, {
systemNav: reducer
});
});
`

$3

This hook gives the ability to add redux reducer in App for handling taskbar true and false conditions

#### Parameters

| Name | Type | Description |
| --------- | --------------- | ------------------------------ |
| reducer | object | takes bluerain reducer|

#### Returns

| Name | Type | Description |
| --------- | --------------- | ------------------------------ |
| reducer | React.Component |Adds systemNav in reducer for toggling taskbar |

$3

This hook adds translations in App.

Parameters:

| Name | Type | Description |
| --------- | --------------- | ------------------------------ |
| messages | object |It takes messages as param|

Returns:

| Name | Type | Description |
| --------- | --------------- | ------------------------------ |
| messages | object | It adds and return messages |

$3

`react
ctx.Filters.add('bluerain.intl.messages', function eng(messages) {
const en = require('./lang/en.ts');
const ur = require('./lang/ur.ts');
messages.en = Object.assign(messages.en ? messages.en : {}, en);
messages.ur = Object.assign(messages.ur ? messages.ur : {}, ur);
return messages;
});
`

$3

This hook provides initialstate of taskbar.

Parameters:

| Name | Type | Description |
| --------- | --------------- | ------------------------------ |
| state | object |It takes messages as param|

Returns:

| Name | Type | Description |
| --------- | --------------- | ------------------------------ |
| state | object | It adds taskbar state in the bluerain state |

$3

`react

ctx.Filters.add('bluerain.redux.initialState', function ActivateTaskbar(state) {
const size = ctx.Plugins.get('window-info');
const taskbarState = getResponsiveState(size);
return Object.assign({}, state, {
bluerain: {
systemNav: taskbarState
}
});
});

`

$3

This hook provides windows size of plugin.

Parameters:

| Name | Type | Description |
| --------- | --------------- | ------------------------------ |
| state | object |It takes messages as param|

Returns:

| Name | Type | Description |
| --------- | --------------- | ------------------------------ |
| state | object | It adds taskbar state in the bluerain state |

$3

Make sure you have access to the BlueRain context. Then do this:

`javascript
ctx.Events.on('plugin.window_info.resize', (size, prevSize) => {
const state = getResponsiveState(size);
ctx.refs.store.dispatch(setStateSystemNav(state));
});
`

Components

This plugin registers following components in the Component registry, so they can be reused later by other apps and plugins:

$3

#### Props

| Name | Default|Type |Description |
| ------------- | ------------- |-------------|-------------|
| to| '/' |string | This is used to pass redirection path |
| logo| |string | This is used for adding logo in taskbar header |
| style| |string | This is used for adding styles on AppBar Component in taskbar header|
| width| |number | This is used for adding width of taskbar listItem in header|

$3

#### Props

| Name | Default|Type |Description |
| ------------- | ------------- |-------------|-------------|
| label| |string | This is used for adding label in items|
| icon| null |string | Icon name specific to material design icons|
| avatarUrl| null |string | This is used for adding image in Avatar|
| button| |boolean | This is used for making ListItem in NavItem behave like button|
| onClick| |function | Gets called when ListItem is pressed|
| to| |string | This is used to pass redirection path|
| mobile| |boolean | Used to decide either to show ListItemText or not|

$3

#### Props

| Name | Default|Type |Description |
| ------------- | ------------- |-------------|-------------|
| items| |array of objects | Items for Menu |
| onClick| |function | Executes function on any MenuItem click|
| mobile| |boolean | Used to decide either to show ListItemText or not|

$3

#### Props

| Name | Default|Type |Description |
| ------------- | ------------- |-------------|-------------|
| mobile| |boolean | Used to decide either to show ListItemText or not|

$3

#### Props

| Name | Default|Type |Description |
| ------------- | ------------- |-------------|-------------|
| style| |object | Button style|

API

$3

#### Properties

- showExpander boolean

- showHeader boolean

- items object

- iconComponentName string

$3

A BlueRain Plugin built on materia-ui drawer to view taskbar in React apps.

#### Properties

- pluginName string "TaskbarPlugin"
- slug` string "taskbar"