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

178 lines
3.7 KiB
JavaScript
Raw Normal View History

import React from 'react'
import PropTypes from 'prop-types'
import { CX } from '../constants'
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
class ListItem extends React.PureComponent {
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.d, _s.bgSecondary, _s.w100PC, _s.h4PX].join(' ')} />
)
}
2020-04-28 06:33:58 +01:00
if (isHidden) {
return (
<React.Fragment>
2020-04-28 06:33:58 +01:00
{title}
</React.Fragment>
2020-04-28 06:33:58 +01:00
)
}
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
const containerClasses = CX({
d: 1,
2020-02-21 00:57:29 +00:00
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,
aiCenter: 1,
w100PC: 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,
})
const iconClasses = CX({
2020-04-07 02:53:23 +01:00
mr10: !large,
mr15: large,
cPrimary: !!icon,
circle: !icon && !!image,
2020-04-07 02:53:23 +01:00
})
const textContainerClasses = CX({
d: 1,
pr5: 1,
2020-12-03 22:13:11 +00:00
w100PC: hideArrow,
maxW100PC42PX: !hideArrow || showActive,
})
2020-03-14 17:31:29 +00:00
const arrowClasses = CX({
mlAuto: !showActive,
ml10: showActive,
cSecondary: 1,
flexShrink1: 1,
})
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
{
!!showActive &&
<input
type='radio'
checked={isActive}
className={[_s.mlAuto, _s.flexShrink1, _s.mt0].join(' ')}
/>
}
{
!hideArrow &&
<Icon
id={!!actionIcon ? actionIcon : 'angle-right'}
size='10px'
className={arrowClasses}
/>
}
2020-03-14 17:31:29 +00:00
</Button>
2020-02-21 00:57:29 +00:00
)
}
}
ListItem.propTypes = {
icon: PropTypes.string,
image: PropTypes.string,
isLast: PropTypes.bool,
isHidden: PropTypes.bool,
to: PropTypes.string,
href: PropTypes.string,
title: PropTypes.string,
subtitle: PropTypes.string,
isActive: PropTypes.bool,
actionIcon: PropTypes.bool,
onClick: PropTypes.func,
size: PropTypes.oneOf([
'small',
'large',
]),
hideArrow: PropTypes.bool,
}
export default ListItem