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

96 lines
2.3 KiB
JavaScript
Raw Normal View History

import React from 'react'
import PropTypes from 'prop-types'
2020-02-19 23:57:07 +00:00
import { NavLink } from 'react-router-dom'
2020-05-09 03:17:19 +01:00
import { CX } from '../constants'
2020-02-19 23:57:07 +00:00
import Text from './text'
2020-12-16 07:39:07 +00:00
import DotTextSeperator from './dot_text_seperator'
2020-02-19 23:57:07 +00:00
2020-04-23 07:13:29 +01:00
/**
* Renders a user stat component
* @param {string} props.title - bottom title
* @param {string} props.to - location to go to on click
* @param {string} props.value - top value
*/
class UserStat extends React.PureComponent {
2020-02-19 23:57:07 +00:00
state = {
hovering: false,
}
handleOnMouseEnter = () => {
this.setState({ hovering: true })
}
handleOnMouseLeave = () => {
this.setState({ hovering: false })
}
render() {
2020-05-09 03:17:19 +01:00
const {
to,
title,
value,
isCentered,
2020-12-16 07:39:07 +00:00
isInline,
isLast,
2020-05-09 03:17:19 +01:00
} = this.props
2020-02-19 23:57:07 +00:00
const { hovering } = this.state
2020-05-09 03:17:19 +01:00
const align = isCentered ? 'center' : 'left'
2020-12-16 07:39:07 +00:00
const titleSize = isInline ? 'normal' : 'extraLarge'
const titleColor = isInline ? 'primary' : 'brand'
const titleWeight = isInline ? 'extraBold' : 'bold'
2020-12-16 07:39:07 +00:00
const subtitleSize = isInline ? 'normal' : 'small'
2020-05-09 03:17:19 +01:00
const containerClasses = CX({
d: 1,
2020-05-09 03:17:19 +01:00
cursorPointer: 1,
noUnderline: 1,
flexNormal: isCentered,
2020-12-16 07:39:07 +00:00
flexGrow1: !isCentered && !isInline,
flexRow: isInline,
aiCenter: isInline,
pr15: !isCentered && !isInline,
pr10: !isCentered && isInline,
})
const subtitleClasses = CX({
pr5: isInline,
pl5: isInline,
2020-05-09 03:17:19 +01:00
})
2020-02-19 23:57:07 +00:00
return (
<NavLink
to={to}
title={`${value} ${title}`}
2020-05-09 03:17:19 +01:00
className={containerClasses}
2020-04-23 07:13:29 +01:00
onMouseEnter={this.handleOnMouseEnter}
onMouseLeave={this.handleOnMouseLeave}
2020-02-19 23:57:07 +00:00
>
<Text size={titleSize} weight={titleWeight} color={titleColor} align={align}>
2020-02-19 23:57:07 +00:00
{value}
</Text>
2020-12-16 07:39:07 +00:00
<Text size={subtitleSize} weight='medium' color='secondary' hasUnderline={hovering} align={align} className={subtitleClasses}>
2020-02-19 23:57:07 +00:00
{title}
</Text>
2020-12-16 07:39:07 +00:00
{ !isLast && isInline && <DotTextSeperator /> }
2020-02-19 23:57:07 +00:00
</NavLink>
)
}
2020-04-23 07:13:29 +01:00
}
UserStat.propTypes = {
title: PropTypes.string.isRequired,
to: PropTypes.string.isRequired,
value: PropTypes.oneOfType([
PropTypes.string,
PropTypes.number,
PropTypes.object,
]).isRequired,
2020-12-09 20:02:43 +00:00
isCentered: PropTypes.bool,
2020-12-16 07:39:07 +00:00
isInline: PropTypes.bool,
isLast: PropTypes.bool,
}
export default UserStat