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

169 lines
3.6 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'
import Image from './image'
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 {
2020-02-21 00:57:29 +00:00
static propTypes = {
2020-03-24 04:39:12 +00:00
icon: PropTypes.string,
image: 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,
subtitle: PropTypes.string,
isActive: PropTypes.bool,
actionIcon: PropTypes.bool,
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-04-07 02:53:23 +01:00
]),
2020-03-24 04:39:12 +00:00
hideArrow: PropTypes.bool,
2020-02-21 00:57:29 +00:00
}
handleOnClick = (e) => {
if (!!this.props.onClick) {
this.props.onClick(e)
}
}
2020-02-21 00:57:29 +00:00
render() {
2020-03-24 04:39:12 +00:00
const {
title,
isLast,
to,
href,
onClick,
actionIcon,
2020-04-07 02:53:23 +01:00
size,
2020-03-24 04:39:12 +00:00
icon,
image,
2020-03-24 04:39:12 +00:00
hideArrow,
2020-04-28 06:33:58 +01:00
isHidden,
subtitle,
isActive,
2020-03-24 04:39:12 +00:00
} = this.props
2020-02-21 00:57:29 +00:00
if (!title) {
return (
<div className={[_s.default, _s.bgSecondary, _s.width100PC, _s.height4PX].join(' ')} />
)
}
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'
const textSize = small ? 'normal' : large ? 'large' : 'normal'
const iconSize = large ? '14px' : '10px'
const imageSize = large ? '22px' : '18px'
const showActive = isActive !== undefined
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,
fillPrimary: !!icon,
circle: !icon && !!image,
2020-04-07 02:53:23 +01:00
})
const textContainerClasses = cx({
default: 1,
pr5: 1,
maxWidth100PC42PX: !hideArrow || showActive,
})
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 ? this.handleOnClick : undefined}
2020-03-14 17:31:29 +00:00
className={containerClasses}
noClasses
>
2020-03-24 04:39:12 +00:00
{
!!image &&
<Image
src={image}
height={imageSize}
width={imageSize}
className={iconClasses}
/>
}
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
/>
}
<div className={textContainerClasses}>
<Text color='primary' weight={!!subtitle ? 'bold' : 'normal'} size={textSize} className={[_s.overflowHidden, _s.flexNormal, _s.textOverflowEllipsis].join(' ')}>
{title}
</Text>
2020-03-24 04:39:12 +00:00
{
!!subtitle &&
<Text color='primary' size='small' className={[_s.overflowHidden, _s.flexNormal, _s.mt5].join(' ')}>
{subtitle}
</Text>
}
</div>
2020-03-14 17:31:29 +00:00
2020-03-24 04:39:12 +00:00
{
!hideArrow &&
<Icon
id={!!actionIcon ? actionIcon : '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
/>
}
{
!!showActive &&
<input
type='radio'
checked={isActive}
className={[_s.mlAuto, _s.flexShrink1].join(' ')}
/>
}
2020-03-14 17:31:29 +00:00
</Button>
2020-02-21 00:57:29 +00:00
)
}
2020-02-21 00:57:29 +00:00
}