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

62 lines
1.3 KiB
JavaScript

import React from 'react'
import PropTypes from 'prop-types'
import { injectIntl, defineMessages } from 'react-intl'
import Button from './button'
import Text from './text'
class LoadMore extends React.PureComponent {
handleClick = (e) => {
this.props.onClick(e)
}
render() {
const {
disabled,
visible,
intl,
} = this.props
if (!visible || disabled) return null
return (
<div className={[_s.d, _s.py15, _s.px10].join(' ')}>
<Button
isBlock
radiusSmall
backgroundColor='tertiary'
color='primary'
disabled={disabled || !visible}
style={{
visibility: visible ? 'visible' : 'hidden',
}}
onClick={this.handleClick}
aria-label={intl.formatMessage(messages.load_more)}
>
<Text color='inherit' align='center'>
{intl.formatMessage(messages.load_more)}
</Text>
</Button>
</div>
)
}
}
const messages = defineMessages({
load_more: { id: 'status.load_more', defaultMessage: 'Load more' },
})
LoadMore.propTypes = {
onClick: PropTypes.func,
disabled: PropTypes.bool,
visible: PropTypes.bool,
intl: PropTypes.object.isRequired,
}
LoadMore.defaultProps = {
visible: true,
}
export default injectIntl(LoadMore)