gab-social/app/javascript/gabsocial/components/column_indicator.js
mgabdev 545b784d2e Updated ColumnIndicator to have padding and icon theme matching
• Updated:
- ColumnIndicator to have padding and icon theme matching
2020-10-28 23:20:59 -05:00

51 lines
1.2 KiB
JavaScript

import React from 'react'
import PropTypes from 'prop-types'
import { defineMessages, injectIntl } from 'react-intl'
import Icon from './icon'
import Text from './text'
class ColumnIndicator extends React.PureComponent {
render() {
const { type, message, intl } = this.props
const title = type !== 'error' && !message ? intl.formatMessage(messages[type]) : message
return (
<div className={[_s.d, _s.w100PC, _s.jcCenter, _s.aiCenter, _s.py15, _s.px10].join(' ')}>
<Icon id={type} size='30px' className={_s.cPrimary} />
{
type !== 'loading' &&
<Text
align='center'
size='medium'
className={_s.mt10}
>
{title}
</Text>
}
</div>
)
}
}
const messages = defineMessages({
loading: { id: 'loading_indicator.label', defaultMessage: 'Loading..' },
missing: { id: 'missing_indicator.sublabel', defaultMessage: 'This resource could not be found.' },
})
ColumnIndicator.propTypes = {
intl: PropTypes.object.isRequired,
type: PropTypes.oneOf([
'loading',
'missing',
'error',
]),
message: PropTypes.oneOfType([
PropTypes.string,
PropTypes.object,
]),
}
export default injectIntl(ColumnIndicator)