Skip to content

Instantly share code, notes, and snippets.

@alandbh
Last active September 17, 2017 03:58
Show Gist options
  • Save alandbh/7b0720ea4d149c4117f22448a0901bda to your computer and use it in GitHub Desktop.
Save alandbh/7b0720ea4d149c4117f22448a0901bda to your computer and use it in GitHub Desktop.
React/Material UI - Inplace Message component
/* ----------------
This is an inplace message component (not dialog, toaster, snackbar or modal)
It must be used with Material UI
Usage:
<Message
type="success"
title="Congratulations!"
content="Your documents fulfill all the requirements. We'll contact you soon." />
Alan
----------------- */
import React, { Component } from 'react';
import {List, ListItem} from 'material-ui/List';
import IconError from 'material-ui/svg-icons/alert/error';
import IconSuccess from 'material-ui/svg-icons/action/check-circle';
import IconAlert from 'material-ui/svg-icons/alert/warning';
import IconInfo from 'material-ui/svg-icons/action/info-outline';
class Message extends Component {
state = {
tipo: 'info',
};
render() {
const { title, content, type } = this.props
let titulo = title;
let conteudo = content;
let icon = <IconError />;
if (type === 'error') {
icon = <IconError />;
} else if (type === 'success') {
icon = <IconSuccess />;
} else if (type === 'alert') {
icon = <IconAlert />;
} else if (type === 'info') {
icon = <IconInfo />;
}
return (
<div className="msg-container">
<div className={`msg msg-${type}`}>
<div className="icon">
{icon}
</div>
<div className="content">
<h4>{title}</h4>
{content}
</div>
</div>
</div>
)
}
}
export default Message;
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment