Adding support for default icons based on Message type

This commit is contained in:
Jeff Avallone 2018-02-13 21:28:31 -05:00
parent b83f5cd34d
commit d328727ceb
4 changed files with 12 additions and 7 deletions

View File

@ -3,7 +3,15 @@ import PropTypes from 'prop-types';
import style from './style.css';
const renderIcon = icon => {
import AlertIcon from 'feather-icons/dist/icons/alert-octagon.svg';
const iconTypes = {
error: AlertIcon
};
const renderIcon = (type, icon) => {
icon = icon || iconTypes[type];
if (!icon) {
return;
}
@ -15,7 +23,7 @@ const renderIcon = icon => {
const Message = ({ type, icon, heading, children }) => (
<div className={ [ style.message, type && style[type] ].filter(Boolean).join(' ') }>
<div className={ style.header }>
<h2>{ renderIcon(icon) }{ heading }</h2>
<h2>{ renderIcon(type, icon) }{ heading }</h2>
</div>
<div className={ style.content }>
{ children }

View File

@ -3,7 +3,6 @@
exports[`RavenError rendering 1`] = `
<Message
heading="translate(An error has occurred)"
icon={[Function]}
type="error"
>
<p>

View File

@ -4,7 +4,6 @@ import { translate, Trans } from 'react-i18next';
import { Raven } from 'sentry';
import Message from 'components/Message';
import AlertIcon from 'feather-icons/dist/icons/alert-octagon.svg';
class RavenError extends React.Component {
componentDidMount() {
@ -23,7 +22,7 @@ class RavenError extends React.Component {
render() {
const { t } = this.props;
return <Message type="error" icon={ AlertIcon } heading={ t('An error has occurred') }>
return <Message type="error" heading={ t('An error has occurred') }>
<p><Trans i18nKey="This error has been logged">
This error has been logged. You may also <a href="#error-report" onClick={ this.reportError }>fill out a report</a>.
</Trans></p>

View File

@ -3,14 +3,13 @@ import PropTypes from 'prop-types';
import { translate, Trans } from 'react-i18next';
import Message from 'components/Message';
import AlertIcon from 'feather-icons/dist/icons/alert-octagon.svg';
import Header from 'components/Header';
import Footer from 'components/Footer';
const Component = ({ t }) => (
<React.Fragment>
<Header/>
<Message type="error" icon={ AlertIcon } heading={ t('404 Page Not Found') }>
<Message type="error" heading={ t('404 Page Not Found') }>
<p><Trans>The page you have requested could not be found</Trans></p>
</Message>
<Footer/>