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

142 lines
3.6 KiB
JavaScript
Raw Normal View History

2020-05-06 05:33:54 +01:00
import {
CX,
} from '../constants'
2020-02-19 23:57:07 +00:00
import Button from './button'
import Icon from './icon'
2020-04-08 02:06:59 +01:00
import Image from './image'
2020-05-06 07:24:16 +01:00
import ResponsiveClassesComponent from '../features/ui/util/responsive_classes_component'
2020-02-19 23:57:07 +00:00
export default class SidebarSectionItem extends PureComponent {
2020-04-08 02:06:59 +01:00
2020-03-31 17:04:50 +01:00
static contextTypes = {
router: PropTypes.object,
}
2020-02-19 23:57:07 +00:00
static propTypes = {
to: PropTypes.string,
2020-03-14 17:31:29 +00:00
href: PropTypes.string,
onClick: PropTypes.func,
2020-02-19 23:57:07 +00:00
active: PropTypes.bool,
icon: PropTypes.string,
image: PropTypes.string,
title: PropTypes.string,
me: PropTypes.bool,
suffix: PropTypes.node,
2020-03-14 17:31:29 +00:00
buttonRef: PropTypes.func,
2020-02-19 23:57:07 +00:00
}
state = {
hovering: false,
}
handleOnMouseEnter = () => {
this.setState({ hovering: true })
}
handleOnMouseLeave = () => {
this.setState({ hovering: false })
}
render() {
2020-03-14 17:31:29 +00:00
const {
to,
active,
icon,
image,
title,
me,
count,
onClick,
href,
2020-04-08 02:06:59 +01:00
buttonRef,
2020-03-14 17:31:29 +00:00
} = this.props
2020-02-19 23:57:07 +00:00
const { hovering } = this.state
2020-05-01 06:50:27 +01:00
const noRouter = !this.context.router
2020-02-19 23:57:07 +00:00
const iconSize = '16px'
2020-05-01 06:50:27 +01:00
const currentPathname = noRouter ? '' : this.context.router.route.location.pathname
2020-03-31 17:04:50 +01:00
const shouldShowActive = hovering || active || currentPathname === to || currentPathname === href
2020-02-19 23:57:07 +00:00
const isNotifications = to === '/notifications'
2020-05-06 05:33:54 +01:00
const containerClasses = CX({
2020-02-19 23:57:07 +00:00
default: 1,
maxWidth100PC: 1,
width100PC: 1,
flexRow: 1,
2020-03-11 23:56:18 +00:00
py5: 1,
px10: 1,
2020-02-19 23:57:07 +00:00
alignItemsCenter: 1,
radiusSmall: 1,
2020-03-31 17:04:50 +01:00
border1PX: 1,
2020-04-08 02:06:59 +01:00
outlineNone: 1,
2020-03-31 17:04:50 +01:00
borderColorTransparent: !shouldShowActive,
borderColorSecondary: shouldShowActive,
2020-04-29 23:32:49 +01:00
bgTransparent: !shouldShowActive,
bgPrimary: shouldShowActive,
2020-02-19 23:57:07 +00:00
})
2020-05-06 05:33:54 +01:00
const countClasses = CX({
2020-02-19 23:57:07 +00:00
default: 1,
text: 1,
2020-04-24 04:17:27 +01:00
mlAuto: 1,
2020-04-29 23:32:49 +01:00
fs12PX: 1,
2020-03-11 23:56:18 +00:00
px5: 1,
mr2: 1,
2020-02-19 23:57:07 +00:00
lineHeight15: 1,
2020-03-11 23:56:18 +00:00
ml5: 1,
2020-02-19 23:57:07 +00:00
colorSecondary: !isNotifications,
colorWhite: isNotifications,
2020-04-29 23:32:49 +01:00
bgBrand: isNotifications,
2020-02-19 23:57:07 +00:00
radiusSmall: isNotifications,
})
return (
2020-03-14 17:31:29 +00:00
<Button
2020-05-01 06:50:27 +01:00
to={noRouter ? undefined : to}
href={noRouter ? (to || href) : href}
2020-03-14 17:31:29 +00:00
onClick={onClick}
noClasses
buttonRef={buttonRef}
2020-02-19 23:57:07 +00:00
onMouseEnter={() => this.handleOnMouseEnter()}
onMouseLeave={() => this.handleOnMouseLeave()}
2020-04-29 23:32:49 +01:00
className={[_s.default, _s.noUnderline, _s.outlineNone, _s.cursorPointer, _s.width100PC, _s.bgTransparent].join(' ')}
2020-02-19 23:57:07 +00:00
>
<div className={containerClasses}>
2020-04-29 03:24:35 +01:00
{
icon &&
2020-05-06 07:24:16 +01:00
<Icon id={icon} className={_s.fillPrimary} size={iconSize} />
2020-04-29 03:24:35 +01:00
}
{
image &&
<Image
alt={title}
className={[_s.circle, _s.overflowHidden].join(' ')}
2020-04-29 03:24:35 +01:00
width={iconSize}
height={iconSize}
src={image}
/>
}
2020-04-11 23:29:19 +01:00
2020-05-06 07:24:16 +01:00
<div className={[_s.default, _s.flexNormal, _s.px10, _s.textOverflowEllipsis, _s.overflowWrapBreakWord, _s.flexRow, _s.width100PC].join(' ')}>
<ResponsiveClassesComponent
classNames={[_s.default, _s.fontWeightNormal, _s.fs15PX, _s.text, _s.textOverflowEllipsis, _s.colorPrimary].join(' ')}
classNamesSmall={[_s.default, _s.fontWeightNormal, _s.fs13PX, _s.text, _s.textOverflowEllipsis, _s.colorPrimary].join(' ')}
>
{title}
</ResponsiveClassesComponent>
</div>
2020-04-11 23:29:19 +01:00
{
count > 0 &&
2020-02-19 23:57:07 +00:00
<span className={countClasses}>
{count}
</span>
}
</div>
2020-03-14 17:31:29 +00:00
</Button>
2020-02-19 23:57:07 +00:00
)
}
2020-04-08 02:06:59 +01:00
2020-02-19 23:57:07 +00:00
}