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; |