@6thquake/react-material/es/Message/Message.js

React components that implement Google's Material Design.

import _extends from "@babel/runtime/helpers/extends";
import React, { Component } from 'react';
import PropTypes from 'prop-types';
import withStyles from '../styles/withStyles';
import Snackbar from '../Snackbar';
import { Fade, Slide, Collapse, Grow, Zoom } from '../transitions';

const styles = theme => ({
  snackbar: {
    margin: theme.spacing(1)
  }
});

class Message extends Component {
  constructor(...args) {
    super(...args);

    this._transition = props => {
      switch (this.props.animation) {
        case 'fade':
          return React.createElement(Fade, props);
          break;

        case 'slide':
          return React.createElement(Slide, _extends({
            direction: "up"
          }, props));
          break;

        case 'collapse':
          return React.createElement(Collapse, props);
          break;

        case 'grow':
          return React.createElement(Grow, props);
          break;

        case 'zoom':
          return React.createElement(Zoom, props);
          break;

        default:
          return React.createElement(Fade, props);
      }
    };
  }

  render() {
    const {
      open,
      action,
      onClose,
      anchorOrigin,
      classes
    } = this.props;
    return React.createElement(Snackbar, _extends({}, classes, {
      TransitionComponent: this._transition,
      open: open,
      anchorOrigin: anchorOrigin,
      onClose: onClose,
      message: this.props.children,
      action: action
    }));
  }

}

process.env.NODE_ENV !== "production" ? Message.propTypes = {
  /**
   * This is usually about message action
   */
  action: PropTypes.element,

  /**
   * The anchor of the Message.
   */
  anchorOrigin: PropTypes.object,

  /**
   * This is usually an animation of open or close the message,include slide、collapse、fade、grow、zoom
   */
  animation: PropTypes.string,

  /**
   * This is usually about message open or close
   */
  open: PropTypes.bool.isRequired
} : void 0;
Message.defaultProps = {
  open: false,
  animation: 'fade',
  action: null,
  anchorOrigin: {
    vertical: 'bottom',
    horizontal: 'center'
  }
};
export default withStyles(styles, {
  name: 'RMMessage'
})(Message);