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

73 lines
2.1 KiB
JavaScript
Raw Normal View History

2020-03-11 23:56:18 +00:00
import ImmutablePropTypes from 'react-immutable-proptypes'
import ImmutablePureComponent from 'react-immutable-pure-component'
2020-04-17 06:35:46 +01:00
import Button from './button'
2020-04-08 02:06:59 +01:00
import Comment from './comment'
2020-05-02 07:25:55 +01:00
import ScrollableList from './scrollable_list'
2020-04-17 06:35:46 +01:00
import Text from './text'
2020-05-09 03:17:19 +01:00
import Dummy from './dummy'
2020-03-11 23:56:18 +00:00
2020-04-08 02:06:59 +01:00
export default class CommentList extends ImmutablePureComponent {
2020-03-11 23:56:18 +00:00
static propTypes = {
2020-04-17 06:35:46 +01:00
commentsLimited: PropTypes.bool,
2020-04-08 02:06:59 +01:00
descendants: ImmutablePropTypes.list,
2020-05-04 19:44:37 +01:00
onViewComments: PropTypes.func.isRequired,
2020-05-05 06:16:01 +01:00
ancestorAccountId: PropTypes.string.isRequired,
2020-05-02 07:25:55 +01:00
}
2020-03-11 23:56:18 +00:00
render() {
2020-04-17 06:35:46 +01:00
const {
descendants,
commentsLimited,
2020-05-05 06:16:01 +01:00
onViewComments,
ancestorAccountId
2020-04-17 06:35:46 +01:00
} = this.props
const size = descendants.size
2020-05-04 19:44:37 +01:00
const upperLimit = commentsLimited ? 6 : size
2020-05-02 07:25:55 +01:00
const max = Math.min(commentsLimited ? 2 : upperLimit, size)
2020-05-09 03:17:19 +01:00
const Wrapper = !commentsLimited ? ScrollableList : Dummy
2020-03-11 23:56:18 +00:00
return (
2020-04-08 02:06:59 +01:00
<div>
2020-05-02 07:25:55 +01:00
<Wrapper scrollKey='comments'>
{
descendants.slice(0, max).map((descendant, i) => (
<Comment
key={`comment-${descendant.get('statusId')}-${i}`}
id={descendant.get('statusId')}
2020-05-05 06:16:01 +01:00
ancestorAccountId={ancestorAccountId}
2020-05-02 07:25:55 +01:00
indent={descendant.get('indent')}
2020-05-05 06:16:01 +01:00
isHighlighted={descendant.get('isHighlighted')}
2020-05-02 07:25:55 +01:00
/>
))
}
</Wrapper>
2020-04-08 02:06:59 +01:00
{
2020-05-02 07:25:55 +01:00
size > 0 && size > max && commentsLimited &&
2020-04-17 06:35:46 +01:00
<div className={[_s.default, _s.flexRow, _s.px15, _s.pb5, _s.mb10, _s.alignItemsCenter].join(' ')}>
<Button
2020-04-23 07:13:29 +01:00
isText
2020-04-17 06:35:46 +01:00
backgroundColor='none'
color='tertiary'
2020-05-04 19:44:37 +01:00
onClick={onViewComments}
2020-04-17 06:35:46 +01:00
>
<Text weight='bold' color='inherit'>
View more comments
</Text>
</Button>
2020-04-24 04:17:27 +01:00
<div className={[_s.default, _s.mlAuto].join(' ')}>
2020-04-17 06:35:46 +01:00
<Text color='tertiary'>
{max}
&nbsp;of&nbsp;
{size}
</Text>
</div>
</div>
}
2020-03-11 23:56:18 +00:00
</div>
)
}
2020-05-02 07:25:55 +01:00
}