81 lines
1.9 KiB
JavaScript
81 lines
1.9 KiB
JavaScript
import { NavLink, withRouter } from 'react-router-dom'
|
|
import classNames from 'classnames/bind'
|
|
import Text from './text'
|
|
|
|
const cx = classNames.bind(_s)
|
|
|
|
export default
|
|
@withRouter
|
|
class TabBarItem extends PureComponent {
|
|
static propTypes = {
|
|
location: PropTypes.object.isRequired,
|
|
title: PropTypes.string,
|
|
to: PropTypes.string,
|
|
large: PropTypes.bool,
|
|
}
|
|
|
|
state = {
|
|
active: -1,
|
|
}
|
|
|
|
componentDidUpdate(prevProps) {
|
|
if (this.props.location !== prevProps.location) {
|
|
const isCurrent = this.props.to === this.props.location.pathname
|
|
|
|
if (this.state.active !== isCurrent) {
|
|
this.setState({
|
|
active: isCurrent,
|
|
})
|
|
}
|
|
}
|
|
}
|
|
|
|
render() {
|
|
const { title, to, location, large } = this.props
|
|
const { active } = this.state
|
|
|
|
const isCurrent = active === -1 ? to === location.pathname : active
|
|
|
|
const containerClasses = cx({
|
|
default: 1,
|
|
height53PX: 1,
|
|
noUnderline: 1,
|
|
text: 1,
|
|
displayFlex: 1,
|
|
alignItemsCenter: 1,
|
|
justifyContentCenter: 1,
|
|
borderBottom2PX: 1,
|
|
paddingVertical5PX: 1,
|
|
borderColorTransparent: !isCurrent,
|
|
borderColorBrand: isCurrent,
|
|
marginRight5PX: large,
|
|
})
|
|
|
|
const textParentClasses = cx({
|
|
default: 1,
|
|
height100PC: 1,
|
|
alignItemsCenter: 1,
|
|
justifyContentCenter: 1,
|
|
radiusSmall: 1,
|
|
paddingHorizontal10PX: !large,
|
|
paddingHorizontal15PX: large,
|
|
backgroundSubtle2Dark_onHover: !isCurrent,
|
|
})
|
|
|
|
const textOptions = {
|
|
size: !!large ? 'normal' : 'small',
|
|
color: isCurrent ? 'brand' : large ? 'secondary' : 'primary',
|
|
weight: isCurrent ? 'bold' : large ? 'medium' : 'normal',
|
|
}
|
|
|
|
return (
|
|
<NavLink to={to} className={containerClasses}>
|
|
<span className={textParentClasses}>
|
|
<Text {...textOptions}>
|
|
{title}
|
|
</Text>
|
|
</span>
|
|
</NavLink>
|
|
)
|
|
}
|
|
} |