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

108 lines
2.2 KiB
JavaScript
Raw Normal View History

2020-04-28 06:33:58 +01:00
import { Fragment } from 'react'
2020-02-21 00:57:29 +00:00
import classNames from 'classnames/bind'
2020-03-14 17:31:29 +00:00
import Button from './button'
2020-02-21 00:57:29 +00:00
import Icon from './icon'
2020-03-14 17:31:29 +00:00
import Text from './text'
2020-02-21 00:57:29 +00:00
const cx = classNames.bind(_s)
export default class ListItem extends PureComponent {
static propTypes = {
2020-03-24 04:39:12 +00:00
icon: PropTypes.string,
2020-02-21 00:57:29 +00:00
isLast: PropTypes.bool,
2020-04-28 06:33:58 +01:00
isHidden: PropTypes.bool,
2020-02-21 00:57:29 +00:00
to: PropTypes.string,
2020-03-14 17:31:29 +00:00
href: PropTypes.string,
2020-02-21 00:57:29 +00:00
title: PropTypes.string,
2020-02-28 15:20:47 +00:00
onClick: PropTypes.func,
2020-04-07 02:53:23 +01:00
size: PropTypes.oneOf([
'small', 'large'
]),
2020-03-24 04:39:12 +00:00
hideArrow: PropTypes.bool,
2020-02-21 00:57:29 +00:00
}
render() {
2020-03-24 04:39:12 +00:00
const {
title,
isLast,
to,
href,
onClick,
2020-04-07 02:53:23 +01:00
size,
2020-03-24 04:39:12 +00:00
icon,
hideArrow,
2020-04-28 06:33:58 +01:00
isHidden,
2020-03-24 04:39:12 +00:00
} = this.props
2020-02-21 00:57:29 +00:00
2020-04-28 06:33:58 +01:00
if (isHidden) {
return (
<Fragment>
{title}
</Fragment>
)
}
2020-04-07 02:53:23 +01:00
const small = size === 'small'
const large = size === 'large'
2020-02-21 00:57:29 +00:00
const containerClasses = cx({
default: 1,
cursorPointer: 1,
noUnderline: 1,
2020-03-14 17:31:29 +00:00
px15: !small,
py15: !small,
px10: small,
py10: small,
2020-02-21 00:57:29 +00:00
flexRow: 1,
alignItemsCenter: 1,
2020-03-14 17:31:29 +00:00
width100PC: 1,
2020-05-03 06:22:49 +01:00
outlineNone: 1,
bgTransparent: 1,
2020-04-29 23:32:49 +01:00
bgSubtle_onHover: 1,
2020-02-21 00:57:29 +00:00
borderColorSecondary: !isLast,
borderBottom1PX: !isLast,
})
2020-04-07 02:53:23 +01:00
const iconClasses = cx({
mr10: !large,
mr15: large,
2020-04-29 23:32:49 +01:00
fillPrimary: 1,
2020-04-07 02:53:23 +01:00
})
const textSize = small ? 'small' : large ? 'medium' : 'normal'
const iconSize = large ? '14px' : '10px'
2020-03-14 17:31:29 +00:00
2020-02-21 00:57:29 +00:00
return (
2020-03-14 17:31:29 +00:00
<Button
to={to}
href={href}
onClick={onClick}
className={containerClasses}
noClasses
>
2020-03-24 04:39:12 +00:00
{
!!icon &&
<Icon
id={icon}
2020-04-23 07:13:29 +01:00
size={iconSize}
2020-04-07 02:53:23 +01:00
className={iconClasses}
2020-03-24 04:39:12 +00:00
/>
}
2020-04-28 06:33:58 +01:00
<Text color='primary' size={textSize} className={[_s.overflowHidden, _s.flexNormal, _s.pr5, _s.textOverflowEllipsis].join(' ')}>
2020-02-21 00:57:29 +00:00
{title}
2020-03-14 17:31:29 +00:00
</Text>
2020-03-24 04:39:12 +00:00
{
!hideArrow &&
<Icon
id='angle-right'
2020-04-23 07:13:29 +01:00
size='10px'
2020-04-29 23:32:49 +01:00
className={[_s.mlAuto, _s.fillSecondary, _s.flexShrink1].join(' ')}
2020-03-24 04:39:12 +00:00
/>
}
2020-03-14 17:31:29 +00:00
</Button>
2020-02-21 00:57:29 +00:00
)
}
}