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

134 lines
4.2 KiB
JavaScript
Raw Normal View History

import React from 'react'
import PropTypes from 'prop-types'
import { connect } from 'react-redux'
2020-05-07 05:03:34 +01:00
import { withRouter } from 'react-router-dom'
import { me } from '../initial_state'
2020-05-10 04:26:58 +01:00
import { CX } from '../constants'
2020-05-06 05:33:54 +01:00
import Button from './button'
class FooterBar extends React.PureComponent {
2020-05-06 05:33:54 +01:00
2020-05-10 04:26:58 +01:00
static contextTypes = {
router: PropTypes.object,
}
2020-05-06 05:33:54 +01:00
render() {
const {
notificationCount,
homeItemsQueueCount,
} = this.props
2020-05-06 05:33:54 +01:00
2020-05-10 04:26:58 +01:00
const noRouter = !this.context.router
const currentPathname = noRouter ? '' : this.context.router.route.location.pathname
const buttons = [
{
to: !me ? '/' : '/home',
2020-05-10 04:26:58 +01:00
icon: 'home',
title: 'Home',
active: !me ? currentPathname === '/' : currentPathname === '/home',
2020-05-10 04:26:58 +01:00
},
{
to: '/notifications',
icon: 'notifications',
title: 'Notifications',
isHidden: !me,
2020-05-10 04:26:58 +01:00
active: currentPathname === '/notifications',
},
{
to: '/groups',
icon: 'group',
title: 'Groups',
active: currentPathname === '/groups',
2020-05-10 04:26:58 +01:00
},
{
to: '/explore',
icon: 'explore',
title: 'Explore',
isHidden: !me,
active: currentPathname === '/explore',
2020-05-10 04:26:58 +01:00
},
{
to: '/news',
icon: 'news',
title: 'News',
active: currentPathname === '/news',
},
2020-05-10 04:26:58 +01:00
]
2020-05-06 05:33:54 +01:00
return (
<div className={[_s.d, _s.z4, _s.minH58PX, _s.w100PC].join(' ')}>
<div className={[_s.d, _s.posFixed, _s.left0, _s.right0, _s.bottom0, _s.minH58PX, _s.w100PC, _s.bgPrimary, _s.borderTop1PX, _s.borderColorSecondary].join(' ')}>
<div className={[_s.d, _s.flexRow, _s.aiCenter, _s.h100PC, _s.minH58PX, _s.saveAreaInsetPB, _s.jcSpaceAround].join(' ')}>
2020-05-10 04:26:58 +01:00
{
buttons.map((props) => {
if (props.isHidden) return null
2020-05-10 04:26:58 +01:00
const classes = CX({
borderTop2PX: 1,
borderColorTransparent: !props.active,
borderColorBrand: props.active,
h100PC: 1,
minH58PX: 1,
2020-05-10 04:26:58 +01:00
px15: 1,
flexGrow1: 1,
aiCenter: 1,
jcCenter: 1,
2020-05-10 04:26:58 +01:00
})
const color = props.active ? 'brand' : 'secondary'
let childIcon;
if (props.to === '/notifications' && notificationCount > 0) {
childIcon = (
<div className={[_s.posAbs, _s.ml5, _s.top0, _s.pt5, _s.pl20].join(' ')}>
<span className={[_s.bgRed, _s.cWhite, _s.circle, _s.py2, _s.px2, _s.minW14PX, _s.displayBlock].join(' ')} style={{fontSize: '12px'}}>
{notificationCount}
</span>
</div>
)
} else if (props.to === '/home' && homeItemsQueueCount > 0) {
childIcon = (
<div className={[_s.posAbs, _s.ml5, _s.top0, _s.pt2, _s.pl20].join(' ')}>
<span className={[_s.cBrand, _s.circle, _s.py2, _s.px2, _s.minW14PX, _s.displayBlock].join(' ')} style={{fontSize: '18px'}}>
</span>
</div>
)
}
2020-05-10 04:26:58 +01:00
return (
<Button
isText
backgroundColor='none'
iconSize='20px'
color={color}
to={props.to}
icon={props.icon}
href={props.href}
title={props.title}
className={classes}
>
{childIcon}
</Button>
2020-05-10 04:26:58 +01:00
)
})
}
2020-05-06 05:33:54 +01:00
</div>
</div>
</div>
)
}
2020-05-06 05:33:54 +01:00
}
const mapStateToProps = (state) => ({
notificationCount: !!me ? state.getIn(['notifications', 'unread']) : 0,
homeItemsQueueCount: !!me ? state.getIn(['timelines', 'home', 'totalQueuedItemsCount']) : 0,
})
FooterBar.propTypes = {
notificationCount: PropTypes.number.isRequired,
homeItemsQueueCount: PropTypes.number.isRequired,
}
export default withRouter(connect(mapStateToProps)(FooterBar))