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

83 lines
1.8 KiB
JavaScript
Raw Normal View History

2020-05-01 06:50:27 +01:00
import { compactMode } from '../initial_state'
import { CX } from '../constants'
2020-04-02 17:57:04 +01:00
import Button from './button'
import Text from './text'
2020-02-28 15:20:47 +00:00
export default class StatusActionBarItem extends PureComponent {
static propTypes = {
title: PropTypes.string.isRequired,
2020-04-07 02:53:23 +01:00
altTitle: PropTypes.string,
2020-02-28 15:20:47 +00:00
onClick: PropTypes.func.isRequired,
icon: PropTypes.string.isRequired,
active: PropTypes.bool,
disabled: PropTypes.bool,
2020-04-11 23:29:19 +01:00
buttonRef: PropTypes.oneOf([
PropTypes.func,
PropTypes.node,
]),
2020-02-28 15:20:47 +00:00
}
render() {
2020-03-25 03:08:43 +00:00
const {
title,
onClick,
icon,
active,
disabled,
2020-04-07 02:53:23 +01:00
buttonRef,
altTitle
2020-03-25 03:08:43 +00:00
} = this.props
2020-02-28 15:20:47 +00:00
2020-05-01 06:50:27 +01:00
const containerClasses = CX({
default: 1,
px5: !compactMode,
px10: compactMode,
flexNormal: !compactMode,
})
const btnClasses = CX({
2020-02-28 15:20:47 +00:00
justifyContentCenter: 1,
alignItemsCenter: 1,
2020-05-01 06:50:27 +01:00
px10: !compactMode,
px15: compactMode,
pt10: compactMode,
2020-04-29 23:32:49 +01:00
bgSubtle_onHover: !disabled,
2020-02-28 15:20:47 +00:00
})
2020-05-01 06:50:27 +01:00
const iconClasses = CX({
default: 1,
inheritFill: 1,
mr10: !!title,
})
2020-04-02 17:57:04 +01:00
const color = active ? 'brand' : 'secondary'
const weight = active ? 'bold' : 'medium'
2020-05-01 06:50:27 +01:00
const iconSize = compactMode ? '14px' : '16px'
2020-04-02 17:57:04 +01:00
2020-02-28 15:20:47 +00:00
return (
2020-05-01 06:50:27 +01:00
<div className={containerClasses}>
2020-04-02 17:57:04 +01:00
<Button
2020-04-23 07:13:29 +01:00
isBlock
2020-04-02 17:57:04 +01:00
radiusSmall
backgroundColor='none'
2020-04-07 02:53:23 +01:00
title={altTitle}
2020-04-02 17:57:04 +01:00
color={color}
buttonRef={buttonRef}
2020-02-28 15:20:47 +00:00
className={btnClasses}
onClick={onClick}
2020-04-23 07:13:29 +01:00
isDisabled={disabled}
2020-04-02 17:57:04 +01:00
icon={icon}
2020-05-01 06:50:27 +01:00
iconSize={iconSize}
iconClassName={iconClasses}
>
{
!!title &&
<Text color='inherit' size='small' weight={weight}>
{title}
</Text>
}
2020-04-02 17:57:04 +01:00
</Button>
2020-02-28 15:20:47 +00:00
</div>
)
}
}