@mistong/eui-alert/src/Alert.js

An eui component

import React, { Component, PropTypes } from 'react';
import classnames from 'classnames';
import Icon from '@mistong/eui-icon';
import './style/Alert.scss';

export default class Alert extends Component {
  static propTypes = {
    afterClose: PropTypes.func,
    closable: PropTypes.bool,
    icon: PropTypes.string,
    message: PropTypes.node,
    showIcon: PropTypes.bool,
    type: PropTypes.oneOf(['info', 'success', 'warning', 'error']),
    onClose: PropTypes.func,
  };
  static defaultProps = {
    afterClose: (e) => {

    },
    closable: false,
    icon: '',
    message: null,
    showIcon: false,
    type: 'info',
    onClose: (e) => {

    }
  };
  state = {
    visible: true,
  };
  close = () => {
    const { onClose, afterClose } = this.props;
    typeof onClose === 'function' && onClose();
    this.setState({
      visible: false,
    }, () => {
      typeof afterClose === 'function' && afterClose();
    });
  }

  render() {
    const { closable, icon, message, showIcon, type, className, ...rest } = this.props;
    const { visible } = this.state;
    // if (!visible) {
    //   return null;
    // }
    //icon默认根据type指定
    let iconEle = showIcon ? <Icon type={icon || type} className={'eui-alert-icon'}/> : null;
    let closeEle = closable ? <Icon type={'close'} className={'eui-alert-close'} onClick={this.close}/> : null;
    return <div {...rest}
                className={classnames('eui-alert', `eui-alert-${type}`, className, { 'eui-alert-hidden': !visible })}>
      {iconEle}
      <div className={'eui-alert-body'}>{message}</div>
      {closeEle}
    </div>;
    // return <Icon type={'alert'}/>
  }
}