Bluerain Plugin Taskbar
Adds Taskbar plugin .https://blueeast.gitbook.io/bluerain-plugin-taskbar
|
|
|
---|---|---|
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
Plugin
ExtendsA BlueRain Plugin built on materia-ui drawer to view taskbar in React apps.