joywok-material-components/components/tips/customtip.js

<h1 align="center"> Joywok Material Components </h1>

import React from 'react';
import PropTypes from 'prop-types';
import classNames from 'classnames';
import Button from '@material-ui/core/Button';
import CloseIcon from '@material-ui/icons/Close';
import green from '@material-ui/core/colors/green';
import amber from '@material-ui/core/colors/amber';
import IconButton from '@material-ui/core/IconButton';
import Snackbar from '@material-ui/core/Snackbar';
import SnackbarContent from '@material-ui/core/SnackbarContent';
import {withStyles} from '@material-ui/core/styles';
require('./style/toolTips.css');
const styles1 = theme => ({
  success: {
    backgroundColor: '#2196f3'
  },
  error: {
    backgroundColor: "#bf0404",
  },
  info: {
    backgroundColor: '#4caf50',
  },
  warning: {
    backgroundColor: '#ff9800',
  },
  icon: {
    fontSize: 20,
    position:'absolute',
    top:10,
    left:10,
    marginRight:0
  },
  iconVariant: {
    opacity: 0.9,
    marginRight: theme.spacing.unit,
  },
  message: {
    display: 'flex',
    alignItems: 'center',
    wordBreak:'break-all',
    margin:'0px 10px 0 -9px',
    position:'relative',
    fontSize:14
  },
  close:{
    position:'absolute',
    top:10,
    left:'auto',
    right:10,
    margin:0,
    padding:0,
    cursor:'pointer'
  },
  iconCls:{
    margin:'5px 10px 5px 0'
  }
});

class MySnackbarContent extends React.Component{
  render(){
    const { classes, className, message, onClose, variant} = this.props;
    let data = {};
    if(this.props.hasclose){
      data['action'] = [
        <CloseIcon className={' '+(this.props.custom?classes.close:'')} onClick={onClose}/>
      ]
    }
    return (
      <SnackbarContent
        className={classNames(classes[variant], className,'custom-snackbar')}
        aria-describedby="client-snackbar"
        message={<span id="client-snackbar" className={classes.message}>{this.props.customIcon?this.props.customIcon:""}<i className={`${classes.iconCls} ${this.props.icon}`}></i>{message}</span>}
        {...data}
      />
    );
  }
}
const MySnackbarContentWrapper = withStyles(styles1)(MySnackbarContent);
const styles2 = theme => ({
  margin: {
    margin: theme.spacing.unit,
  },
  test:{
    top:50,
    maxWidth:window.unit * 55,
    padding:10,
  }
});
class CustomizedSnackbars extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      open: props.open || false,
    }
  }
  handleClose = (event, reason) => {
    if (reason === 'clickaway') {
      return;
    }
    this.setState({ open: false });
    this.props.handleClose && this.props.handleClose();
  };
  close(){
    this.setState({ open: false });
  }
  render() {
    const { classes } = this.props;
    return (
      <div className={"jw-tips-main "+(this.props.type || '')}>
        <Snackbar
          anchorOrigin={{vertical: 'top', horizontal: 'center'}}
          open={this.state.open}
          autoHideDuration={typeof(this.props.autoHideDuration)!="undefined"?this.props.autoHideDuration:4000}
          onClose={this.handleClose}
          style={this.props.style}
          className={`${classes.test} ${this.props.algin}`} 
        >
          <MySnackbarContentWrapper
            onClose={this.handleClose}
            variant={this.props.type || 'info'}
            message={this.props.message}
            hasclose={this.props.hasclose}
            custom={this.props.custom || false}
            customIcon={this.props.customIcon || false}
            icon={this.props.icon}
          />
        </Snackbar>
      </div>
    );
  }
  componentWillReceiveProps(nextProps){
    this.setState(nextProps);
  }
}
export default withStyles(styles2)(CustomizedSnackbars);