gab-social/app/javascript/gabsocial/components/column_indicator.js

50 lines
1.2 KiB
JavaScript
Raw Normal View History

2020-02-14 00:40:04 +00:00
import { defineMessages, injectIntl } from 'react-intl'
import Icon from './icon'
2020-02-29 15:42:47 +00:00
import Text from './text'
2020-02-14 00:40:04 +00:00
const messages = defineMessages({
loading: { id: 'loading_indicator.label', defaultMessage: 'Loading..' },
missing: { id: 'missing_indicator.sublabel', defaultMessage: 'This resource could not be found.' },
})
2020-02-24 21:56:07 +00:00
export default
@injectIntl
2020-02-14 00:40:04 +00:00
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 (
2020-03-11 23:56:18 +00:00
<div className={[_s.default, _s.width100PC, _s.justifyContentCenter, _s.alignItemsCenter, _s.py15].join(' ')}>
2020-02-29 15:42:47 +00:00
<Icon id={type} width='44px' height='44px' />
2020-02-14 00:40:04 +00:00
{
type !== 'loading' &&
2020-02-29 15:42:47 +00:00
<Text
align='center'
size='medium'
2020-03-11 23:56:18 +00:00
className={_s.mt10}
2020-02-29 15:42:47 +00:00
>
2020-02-14 00:40:04 +00:00
{title}
2020-02-29 15:42:47 +00:00
</Text>
2020-02-14 00:40:04 +00:00
}
</div>
)
}
}