All files / lib/AlertContainer index.js

82.35% Statements 14/17
25% Branches 1/4
80% Functions 8/10
81.25% Lines 13/16
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121                                  7x                   1x                   1x                   1x                   10x 10x 10x                     10x                             24x 24x       20x                                 89x         89x                
import React from 'react';
import PropTypes from 'prop-types';
import { Alert } from '@collab-ui/react';
import {
  bind,
  reject,
  uniqueId
} from 'lodash';
 
class AlertContainer extends React.Component {
  static displayName = 'AlertContainer';
 
  state = {
    alertList: []
  }
 
  info = (title, message, onHide, otherProps) => {
    this.handleAlert(
      title,
      message,
      onHide,
      'info',
      otherProps
    );
  }
 
  success = (title, message, onHide, otherProps) => {
    this.handleAlert(
      title,
      message,
      onHide,
      'success',
      otherProps
    );
  }
 
  warning = (title, message, onHide, otherProps) => {
    this.handleAlert(
      title,
      message,
      onHide,
      'warning',
      otherProps
    );
  }
 
  error = (title, message, onHide, otherProps) => {
    this.handleAlert(
      title,
      message,
      onHide,
      'error',
      otherProps
    );
  }
 
  handleAlert = (title, message, onHide, type, otherProps) => {
    const { orderNewest } = this.props;
    const key = uniqueId('alert_');
    const nextAlert = {
      key,
      title: title,
      message: message,
      onHide: bind(this.handleOnHide, this, key, onHide),
      type: type,
      show: true,
      closable: true,
      otherProps
    };
 
    this.setState(state => ({
      alertList: orderNewest
        ? [nextAlert, ...state.alertList]
        : [...state.alertList, nextAlert]
    }));
  }
 
  handleOnHide = (key, onHide, e) => {
    this.setState(state => {
      onHide && onHide(e);
      return { alertList: reject(state.alertList, {key}) };
    });
  }
 
  render() {
    const { position } = this.props;
    return (
      <div className={`cui-alert__container cui-alert__container--${position}`} role='alert'>
        {
          this.state.alertList.map(alert => (
            <Alert
              key={alert.key}
              title={alert.title}
              message={alert.message}
              type={alert.type}
              show={alert.show}
              closable={alert.closable}
              onHide={alert.onHide}
              {...alert.otherProps}
            />
          ))
        }
      </div>
    );
  }
}
 
AlertContainer.defaultProps = {
  orderNewest: true,
  position: 'bottom-right'
};
 
AlertContainer.propTypes = {
  /** @prop Display newest alert messages first | true */
  orderNewest: PropTypes.bool,
  /** @prop Define alert's position with css class name: 'bottom-right' */
  position: PropTypes.oneOf(['top-left', 'top-center', 'top-right', 'bottom-left', 'bottom-center', 'bottom-right'])
};
 
export default AlertContainer;