Adding support for default icons based on Message type
This commit is contained in:
parent
b83f5cd34d
commit
d328727ceb
@ -3,7 +3,15 @@ import PropTypes from 'prop-types';
|
|||||||
|
|
||||||
import style from './style.css';
|
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) {
|
if (!icon) {
|
||||||
return;
|
return;
|
||||||
}
|
}
|
||||||
@ -15,7 +23,7 @@ const renderIcon = icon => {
|
|||||||
const Message = ({ type, icon, heading, children }) => (
|
const Message = ({ type, icon, heading, children }) => (
|
||||||
<div className={ [ style.message, type && style[type] ].filter(Boolean).join(' ') }>
|
<div className={ [ style.message, type && style[type] ].filter(Boolean).join(' ') }>
|
||||||
<div className={ style.header }>
|
<div className={ style.header }>
|
||||||
<h2>{ renderIcon(icon) }{ heading }</h2>
|
<h2>{ renderIcon(type, icon) }{ heading }</h2>
|
||||||
</div>
|
</div>
|
||||||
<div className={ style.content }>
|
<div className={ style.content }>
|
||||||
{ children }
|
{ children }
|
||||||
|
@ -3,7 +3,6 @@
|
|||||||
exports[`RavenError rendering 1`] = `
|
exports[`RavenError rendering 1`] = `
|
||||||
<Message
|
<Message
|
||||||
heading="translate(An error has occurred)"
|
heading="translate(An error has occurred)"
|
||||||
icon={[Function]}
|
|
||||||
type="error"
|
type="error"
|
||||||
>
|
>
|
||||||
<p>
|
<p>
|
||||||
|
@ -4,7 +4,6 @@ import { translate, Trans } from 'react-i18next';
|
|||||||
import { Raven } from 'sentry';
|
import { Raven } from 'sentry';
|
||||||
|
|
||||||
import Message from 'components/Message';
|
import Message from 'components/Message';
|
||||||
import AlertIcon from 'feather-icons/dist/icons/alert-octagon.svg';
|
|
||||||
|
|
||||||
class RavenError extends React.Component {
|
class RavenError extends React.Component {
|
||||||
componentDidMount() {
|
componentDidMount() {
|
||||||
@ -23,7 +22,7 @@ class RavenError extends React.Component {
|
|||||||
render() {
|
render() {
|
||||||
const { t } = this.props;
|
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">
|
<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>.
|
This error has been logged. You may also <a href="#error-report" onClick={ this.reportError }>fill out a report</a>.
|
||||||
</Trans></p>
|
</Trans></p>
|
||||||
|
@ -3,14 +3,13 @@ import PropTypes from 'prop-types';
|
|||||||
import { translate, Trans } from 'react-i18next';
|
import { translate, Trans } from 'react-i18next';
|
||||||
|
|
||||||
import Message from 'components/Message';
|
import Message from 'components/Message';
|
||||||
import AlertIcon from 'feather-icons/dist/icons/alert-octagon.svg';
|
|
||||||
import Header from 'components/Header';
|
import Header from 'components/Header';
|
||||||
import Footer from 'components/Footer';
|
import Footer from 'components/Footer';
|
||||||
|
|
||||||
const Component = ({ t }) => (
|
const Component = ({ t }) => (
|
||||||
<React.Fragment>
|
<React.Fragment>
|
||||||
<Header/>
|
<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>
|
<p><Trans>The page you have requested could not be found</Trans></p>
|
||||||
</Message>
|
</Message>
|
||||||
<Footer/>
|
<Footer/>
|
||||||
|
Loading…
Reference in New Issue
Block a user