@stackstorm/st2flow-notifications

1.0.0 • Public • Published

@stackstorm/st2flow-notifications

This is a generic module for displaying notifications. Each type of notification is styled according to its type:

  • #f03c15 error
  • #c5f015 warning
  • #1589F0 info
  • #1589F0 success

Usage

<Notifications 
  position={string} 
  notifications={Array<notification>}
  onRemove={Function(notification)} 
/>

Properties:

  • position - determines the position of the notifications container. Possible values:
    top | top-left | top-right | bottom | bottom-left | bottom-right
  • notifications - array of notification objects with the follow properties:
    • type - error | warning | info | success
    • message - string message to be displayed.
  • onRemove - callback function whenever a user clicks the "close" button for a notification. The callback is passed the notification which was clicked.

Example

const Notifications = require('@stackstorm/st2flow-notifications');

class Foo extends Component {
  state = {
    // 1. Notifications are usually derived from state
    errors: [ new Error('foobar'), new Error('barfoo') ],
    messages: [ { text: 'foobar' }, { text: 'barfoo' } ],
  }
  
  // 2. Create "notification" objects with `type` and `message` properties
  get notifications() {
    return errors.map(e => ({
      type: 'error',
      message: e.message,
    })).concat(
      messages.map(m => ({
        type: 'info',
        message: m.text,
      }))
    );
  }
  
  // 3. Handle the "remove" event (which user clicks "close" button)
  handleNotificationRemove(notification) {
    switch(notification.type) {
      case 'error':
        this.setState({
          errors: this.state.errors.filter(e => e.message !== notification.message)
        });
        break;
        
      case 'info':
        this.setState({
          messages: this.state.messages.filter(m => m.text !== notification.message)
        });
        break;
    }
  }
  
  render() {
    // 4. Notifications are absolutely positioned within a relative parent
    return (
      <div style={{ position: 'relative' }}>
        <Notifications position="top-right" notifications={this.notifications} onRemove={this.handleNotificationRemove} />
      </div>
    );
  }
}

Readme

Keywords

none

Package Sidebar

Install

npm i @stackstorm/st2flow-notifications

Weekly Downloads

0

Version

1.0.0

License

Apache-2.0

Unpacked Size

7.92 kB

Total Files

4

Last publish

Collaborators

  • storminstanley