@blueeast/bluerain-plugin-taskbar

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"