interstellar-ui-messages

interstellar-ui-messages
==========================

The interstellar-ui-messages module is part of the Interstellar Module System.

This module provides common UI components.

> Quick start to developing in the Interstellar eco-system:
>
> * Read Getting started doc.
> * Install interstellar-workspace.
> * Contribute to our open-source modules or develop your own.

Module contents

#### Classes
* Alert
* AlertGroup
* Toast

#### Services
* interstellar-ui-messages.Alerts
* interstellar-ui-messages.Toasts

#### Widgets
*
*

Alert class

Alert object represents single alert notification which can be attached to an AlertGroup.

``js
import {Alert} from 'interstellar-ui-messages';

let alert = new Alert({
title: 'Password is incorrect',
text: 'Make sure you are using a correct password to login.,
type: Alert.TYPES.ERROR,
dismissible: false // default true
});
``

There are 4 possible Alert.TYPES:
* Alert.TYPES.SUCCESS
* Alert.TYPES.INFO
* Alert.TYPES.WARNING
* Alert.TYPES.ERROR

Alerts with dismissible parameter set to true will show a little × icon to allow user to dismiss an alert.

Check AlertGroup docs for information on how to display an Alert.

TODO
* Sample alert screenshots.
* Alert/AlertGroup/widget graphic.
* Solar styling tips.

AlertGroup class

AlertGroup represents a place in your UI where alerts are displayed. Your application/widget can have multiple AlertGroups.

Once you create a new alert group and register in Alerts service you can show your first Alert.

`js
import {Alert, AlertGroup} from 'interstellar-ui-messages';

let alertGroup = new AlertGroup();
Alerts.registerGroup(alertGroup);

let alert = new Alert({
title: 'Password is incorrect',
text: 'Make sure you are using a correct password to login.,
type: Alert.TYPES.ERROR,
dismissible: false // default true
});
alertGroup.show(alert);
``

You can clear all alerts in existing group using clear method:

`js
alertGroup.clear();
`

To display your alert group in your UI use widget.

Toast class

Toast object represents single toast message that can be displayed using Toast service.

`js
let toast = new Toast('Transaction sent!');
`

You can pass a second parameter with number of miliseconds your toast should be visible:

`js
let toast = new Toast('Transaction sent!', 5000); // 5 seconds
`

Toast will be visible for 2 seconds by default.

interstellar-ui-messages.Alerts service

Alerts service allows you to register your AlertGroup.

`js
import {AlertGroup} from 'interstellar-ui-messages';

let alertGroup = new AlertGroup();
Alerts.registerGroup(alertGroup);
`

You must register your alert group before you can use it within your application or widget.

You can also get previously registered group by it's ID:

`js
let alertGroup = Alerts.getGroup(groupId);
`

interstellar-ui-messages.Toasts service

Use Toasts service to show your Toast:

`js
import {Toast} from 'interstellar-ui-messages';
@Widget('send', 'SendWidgetController', 'interstellar-network-widgets/send-widget')
@Inject('interstellar-ui-messages.Toasts')
export default class SendWidgetController {
constructor(Toasts) {
this.Toasts = Toasts;
}

send() {
// Send transaction
let toast = new Toast('Transaction sent!');
this.Toasts.show(toast);
}
}
`

Remember you have to place widget somewhere in you application. Otherwise your Toast won't appear.

widget

Use widget to display AlertGroup in your UI. This widget accepts one parameter: group which represents AlertGroup object you want to display.

`js
import {AlertGroup} from 'interstellar-ui-messages';

@Widget('send', 'SendWidgetController', 'interstellar-network-widgets/send-widget')
@Inject('interstellar-ui-messages.Alerts')
export default class SendWidgetController {
constructor(Alerts) {
this.alertGroup = new AlertGroup();
Alerts.registerGroup(this.alertGroup);
}
}
`
`html



`

widget

Use widget to display toasts in your UI. There should be only one, global toast widget in your application.

`html

``