root/regexper-static
1
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

Adding support for default icons based on Message type

Browse Source
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
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

12
src/components/Message/index.js
View File

@ -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 }

1
src/components/RavenError/__snapshots__/test.js.snap
View File

@ -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>

3
src/components/RavenError/index.js
View File

@ -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
src/pages/404/Component.js
View File

@ -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/>