42 lines
1.0 KiB
JavaScript
42 lines
1.0 KiB
JavaScript
|
import { defineMessages, injectIntl } from 'react-intl';
|
||
|
|
import Column from '../column';
|
||
|
|
|
||
|
|
import './index.scss';
|
||
|
|
|
||
|
|
const messages = defineMessages({
|
||
|
|
loading: { id: 'loading_indicator.label', defaultMessage: 'Loading...' },
|
||
|
|
missing: { id: 'missing_indicator.sublabel', defaultMessage: 'This resource could not be found.' },
|
||
|
|
});
|
||
|
|
export default @injectIntl
|
||
|
|
class ColumnIndicator extends PureComponent {
|
||
|
|
|
||
|
|
static propTypes = {
|
||
|
|
intl: PropTypes.object.isRequired,
|
||
|
|
type: PropTypes.oneOf([
|
||
|
|
'loading',
|
||
|
|
'missing',
|
||
|
|
'error',
|
||
|
|
]),
|
||
|
|
message: PropTypes.oneOfType([
|
||
|
|
PropTypes.string,
|
||
|
|
PropTypes.object,
|
||
|
|
]),
|
||
|
|
};
|
||
|
|
|
||
|
|
render() {
|
||
|
|
const { type, message, intl } = this.props;
|
||
|
|
|
||
|
|
const title = type !== 'error' ? intl.formatMessage(messages[type]) : message;
|
||
|
|
|
||
|
|
return (
|
||
|
|
<Column>
|
||
|
|
<div className={`column-indicator column-indicator--${type}`}>
|
||
|
|
<div className='column-indicator__figure' />
|
||
|
|
<span className='column-indicator__title'>{title}</span>
|
||
|
|
</div>
|
||
|
|
</Column>
|
||
|
|
);
|
||
|
|
}
|
||
|
|
|
||
|
|
};
|