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

145 lines
3.7 KiB
JavaScript
Raw Normal View History

2020-04-28 06:33:58 +01:00
import { Fragment } from 'react'
2020-04-29 23:32:49 +01:00
import ImmutablePureComponent from 'react-immutable-pure-component'
import ImmutablePropTypes from 'react-immutable-proptypes'
2020-04-29 03:24:35 +01:00
import { urlRegex } from '../features/ui/util/url_regex'
2020-04-29 23:32:49 +01:00
import {
CX,
DEFAULT_REL,
} from '../constants'
2020-04-04 00:18:26 +01:00
import Button from './button'
import DotTextSeperator from './dot_text_seperator'
import Image from './image'
import RelativeTimestamp from './relative_timestamp'
import Text from './text'
2020-04-29 23:32:49 +01:00
export default class TrendingItem extends ImmutablePureComponent {
2020-04-04 00:18:26 +01:00
static propTypes = {
index: PropTypes.number,
2020-04-29 23:32:49 +01:00
trend: ImmutablePropTypes.map.isRequired,
2020-04-04 00:18:26 +01:00
isLast: PropTypes.bool,
2020-04-28 06:33:58 +01:00
isHidden: PropTypes.bool,
2020-04-07 02:53:23 +01:00
}
static defaultProps = {
title: '',
description: '',
author: '',
2020-04-04 00:18:26 +01:00
}
state = {
hovering: false,
}
handleOnMouseEnter = () => {
this.setState({ hovering: true })
}
handleOnMouseLeave = () => {
this.setState({ hovering: false })
}
render() {
const {
index,
2020-04-29 23:32:49 +01:00
trend,
2020-04-07 02:53:23 +01:00
isLast,
2020-04-28 06:33:58 +01:00
isHidden,
2020-04-04 00:18:26 +01:00
} = this.props
const { hovering } = this.state
2020-04-29 23:32:49 +01:00
if (!trend) return null
2020-05-04 19:44:37 +01:00
const title = `${trend.get('title')}`.trim()
2020-05-01 06:54:27 +01:00
const description = trend.get('description') || ''
2020-04-29 23:32:49 +01:00
const correctedAuthor = trend.getIn(['author', 'name'], '').replace('www.', '')
2020-04-28 06:33:58 +01:00
const correctedDescription = description.length >= 120 ? `${description.substring(0, 120).trim()}...` : description
const descriptionHasLink = correctedDescription.match(urlRegex)
if (isHidden) {
return (
<Fragment>
{title}
{!descriptionHasLink && correctedDescription}
{correctedAuthor}
</Fragment>
)
}
2020-04-29 23:32:49 +01:00
const containerClasses = CX({
2020-04-04 00:18:26 +01:00
default: 1,
noUnderline: 1,
px15: 1,
pt10: 1,
pb5: 1,
borderColorSecondary: !isLast,
borderBottom1PX: !isLast,
2020-04-25 18:00:51 +01:00
backgroundColorSubtle_onHover: 1,
2020-04-04 00:18:26 +01:00
})
2020-04-29 23:32:49 +01:00
const subtitleClasses = CX({
2020-04-04 00:18:26 +01:00
ml5: 1,
underline: hovering,
})
return (
<Button
noClasses
2020-04-29 23:32:49 +01:00
href={trend.get('url')}
2020-04-07 02:53:23 +01:00
target='_blank'
2020-04-29 23:32:49 +01:00
rel={DEFAULT_REL}
2020-04-04 00:18:26 +01:00
className={containerClasses}
onMouseEnter={() => this.handleOnMouseEnter()}
onMouseLeave={() => this.handleOnMouseLeave()}
>
2020-04-29 23:32:49 +01:00
<Image
nullable
width='116px'
height='78px'
alt={title}
src={trend.get('image')}
className={[_s.radiusSmall, _s.overflowHidden, _s.mb10].join(' ')}
/>
2020-04-07 02:53:23 +01:00
2020-04-04 00:18:26 +01:00
<div className={[_s.default, _s.flexNormal, _s.pb5].join(' ')}>
<div className={_s.default}>
<Text size='medium' color='primary' weight='bold'>
{title}
</Text>
</div>
2020-04-07 02:53:23 +01:00
{
2020-04-24 04:17:27 +01:00
!!correctedDescription && !descriptionHasLink &&
2020-04-08 02:06:59 +01:00
<div className={[_s.default, _s.heightMax56PX, _s.overflowHidden, _s.pt5, _s.mb5].join(' ')}>
2020-04-07 02:53:23 +01:00
<Text size='small' color='secondary'>
{correctedDescription}
</Text>
</div>
}
2020-04-29 23:32:49 +01:00
2020-04-04 00:18:26 +01:00
<div className={[_s.default, _s.flexRow].join(' ')}>
<Text color='secondary' size='small'>
{index}
</Text>
<DotTextSeperator />
<Text color='secondary' size='small' className={_s.ml5}>
{correctedAuthor}
</Text>
<DotTextSeperator />
<Text color='secondary' size='small' className={subtitleClasses}>
2020-04-29 23:32:49 +01:00
<RelativeTimestamp timestamp={trend.get('date_published')} />
2020-04-04 00:18:26 +01:00
</Text>
2020-04-07 02:53:23 +01:00
{
hovering &&
<Text color='secondary' size='small' className={_s.ml10}></Text>
}
2020-04-04 00:18:26 +01:00
</div>
2020-04-29 23:32:49 +01:00
2020-04-04 00:18:26 +01:00
</div>
</Button>
)
}
}