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

108 lines
2.2 KiB
JavaScript

import { Fragment } from 'react'
import classNames from 'classnames/bind'
import Button from './button'
import Icon from './icon'
import Text from './text'
const cx = classNames.bind(_s)
export default class ListItem extends PureComponent {
static propTypes = {
icon: PropTypes.string,
isLast: PropTypes.bool,
isHidden: PropTypes.bool,
to: PropTypes.string,
href: PropTypes.string,
title: PropTypes.string,
onClick: PropTypes.func,
size: PropTypes.oneOf([
'small', 'large'
]),
hideArrow: PropTypes.bool,
}
render() {
const {
title,
isLast,
to,
href,
onClick,
size,
icon,
hideArrow,
isHidden,
} = this.props
if (isHidden) {
return (
<Fragment>
{title}
</Fragment>
)
}
const small = size === 'small'
const large = size === 'large'
const containerClasses = cx({
default: 1,
cursorPointer: 1,
noUnderline: 1,
px15: !small,
py15: !small,
px10: small,
py10: small,
flexRow: 1,
alignItemsCenter: 1,
width100PC: 1,
outlineNone: 1,
bgTransparent: 1,
bgSubtle_onHover: 1,
borderColorSecondary: !isLast,
borderBottom1PX: !isLast,
})
const iconClasses = cx({
mr10: !large,
mr15: large,
fillPrimary: 1,
})
const textSize = small ? 'small' : large ? 'medium' : 'normal'
const iconSize = large ? '14px' : '10px'
return (
<Button
to={to}
href={href}
onClick={onClick}
className={containerClasses}
noClasses
>
{
!!icon &&
<Icon
id={icon}
size={iconSize}
className={iconClasses}
/>
}
<Text color='primary' size={textSize} className={[_s.overflowHidden, _s.flexNormal, _s.pr5, _s.textOverflowEllipsis].join(' ')}>
{title}
</Text>
{
!hideArrow &&
<Icon
id='angle-right'
size='10px'
className={[_s.mlAuto, _s.fillSecondary, _s.flexShrink1].join(' ')}
/>
}
</Button>
)
}
}