Bluerain Plugin Taskbar

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

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

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

Installation

Run the following command in the plugin directoy:

yarn add @blueeast/bluerain-plugin-taskbar

Hooks

This plugin provides flexibility of adding Internationalisation in App

bluerain.system.app.layout

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 |

Example

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
});
});

bluerain.redux.reducers.bluerain

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 |

bluerain.intl.messages

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 |

Example

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;
 });

bluerain.redux.initialState

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 |

Example :

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
     }
});
});

plugin.window_info.resize

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 |

Events

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

 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:

NavHeader

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|

NavItem

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|

NavUserInfoButton

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|

NavOpenCloseButton

Props

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

HamburgerButton

Props

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

API

TaskbarPluginConfigurations

Properties

• showExpander boolean

• showHeader boolean

• items object

• iconComponentName string

Extends Plugin

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

Properties

• pluginName string "TaskbarPlugin"
• slug string "taskbar"