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

95 lines
2.0 KiB
JavaScript

import { withRouter } from 'react-router-dom'
import { CX } from '../constants'
import Button from './button'
import Text from './text'
export default
@withRouter
class PillItem extends PureComponent {
static propTypes = {
icon: PropTypes.string,
isActive: PropTypes.bool,
onClick: PropTypes.func,
title: PropTypes.string,
to: PropTypes.string,
}
state = {
isCurrent: false,
}
componentDidUpdate(prevProps) {
// If user navigates to different page, ensure tab bar item
// with this.props.to that is on location is set to active.
if (this.props.location !== prevProps.location) {
const isCurrent = this.props.to === this.props.location.pathname
if (this.state.isCurrent !== isCurrent) {
this.setState({ isCurrent })
}
}
}
render() {
const {
title,
to,
onClick,
location,
isActive,
} = this.props
const { isCurrent } = this.state
// Combine state, props, location to make absolutely
// sure of active status.
const active = isActive || to === location.pathname || isCurrent
const containerClasses = CX({
default: 1,
noUnderline: 1,
text: 1,
alignItemsCenter: 1,
justifyContentCenter: 1,
py5: 1,
outlineNone: 1,
cursorPointer: 1,
circle: 1,
bgSecondary: !active,
bgSecondaryDark_onHover: !active,
bgBrand: active,
mr5: 1,
mb5: 1,
})
const textParentClasses = CX({
default: 1,
height100PC: 1,
alignItemsCenter: 1,
justifyContentCenter: 1,
py2: 1,
px15: 1,
})
const textOptions = {
size: 'small',
color: active ? 'white' : 'secondary',
weight: active ? 'bold' : 'medium',
}
return (
<Button
onClick={onClick}
className={containerClasses}
to={to || undefined}
noClasses
>
<span className={textParentClasses}>
<Text {...textOptions}>
{title}
</Text>
</span>
</Button>
)
}
}