content: import React, { Component } from 'react';
  import PropTypes from 'prop-types';
  import injectSheet from 'react-jss';
  import classNames from 'classnames';
  
  const styles = {
    wrap: {
      position: 'fixed',
      bottom: props => props.bottom,
      left: props => props.side,
      right: props => props.side,
      color: '#fff',
      width: props => props.width,
      textAlign: 'center',
      zIndex: 5000,
      backgroundColor: 'rgba(0,0,0,0.7)',
      padding: '.04rem .1rem',
      borderRadius: '.1rem',
      minHeight: props => props.height,
    },
    msg: {
      lineHeight: props => props.height,
    },
  };
  
  /**
   *  pop out indicator to inform users
   *
   */
  class Toast extends Component {
      static propTypes = {
        width: PropTypes.string,
        height: PropTypes.string,
        bottom: PropTypes.string,
        side: PropTypes.string,
        message: PropTypes.string,
      };
  
      static defaultProps = {
        width: '70%',
        height: '.8rem',
        bottom: '10%',
        side: '15%',
      };
  
      render() {
        const { classes, className } = this.props;
        return (
          <div className={classes.wrap}>
            <span className={classNames(classes.msg, {
                          [className]: className,
                      })}
            >
              {this.props.message}
            </span>
          </div>
        );
      }
  }
  
  export default injectSheet(styles)(Toast);
  