A BlueRain Plugin to integrate taskbar into any app.
npm install @blueeast/bluerain-plugin-taskbarAdds 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 |
Run the following command in the plugin directoy:
``shell`
yarn add @blueeast/bluerain-plugin-taskbar
This plugin provides flexibility of adding Internationalisation in App
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 |
` 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
});
});
`
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 |
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 |
`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;
});
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 |
`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
}
});
});
`
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 |
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));
});
This plugin registers following components in the Component registry, so they can be reused later by other apps and plugins:
#### 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|
#### 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|
#### 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|
#### Props
| Name | Default|Type |Description |
| ------------- | ------------- |-------------|-------------|
| mobile| |boolean | Used to decide either to show ListItemText or not|
#### Props
| Name | Default|Type |Description |
| ------------- | ------------- |-------------|-------------|
| style| |object | Button style|
#### Properties
- showExpander boolean
- showHeader boolean
- items object
- iconComponentName string
A BlueRain Plugin built on materia-ui drawer to view taskbar in React apps.
#### Properties