2020-08-17 21:07:16 +01:00
|
|
|
import React from 'react'
|
2020-08-17 21:59:29 +01:00
|
|
|
import PropTypes from 'prop-types'
|
2020-05-27 06:22:07 +01:00
|
|
|
import {
|
|
|
|
CX,
|
2020-10-25 00:48:58 +01:00
|
|
|
BREAKPOINT_SMALL,
|
2020-05-27 06:22:07 +01:00
|
|
|
} from '../constants'
|
|
|
|
import Responsive from '../features/ui/util/responsive_component'
|
2020-04-02 17:57:04 +01:00
|
|
|
import Button from './button'
|
|
|
|
import Text from './text'
|
2020-02-28 15:20:47 +00:00
|
|
|
|
2020-08-18 01:57:35 +01:00
|
|
|
class StatusActionBarItem extends React.PureComponent {
|
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,
|
2020-12-06 04:47:48 +00:00
|
|
|
altTitle,
|
|
|
|
isCompact,
|
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 btnClasses = CX({
|
2020-08-18 21:43:06 +01:00
|
|
|
jcCenter: 1,
|
|
|
|
aiCenter: 1,
|
2020-12-06 04:47:48 +00:00
|
|
|
px10: !isCompact,
|
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({
|
2020-08-18 21:49:11 +01:00
|
|
|
d: 1,
|
2020-05-01 06:50:27 +01:00
|
|
|
inheritFill: 1,
|
2020-12-06 04:47:48 +00:00
|
|
|
mr10: !!title && !isCompact,
|
2020-05-01 06:50:27 +01:00
|
|
|
})
|
|
|
|
|
2020-04-02 17:57:04 +01:00
|
|
|
const color = active ? 'brand' : 'secondary'
|
|
|
|
const weight = active ? 'bold' : 'medium'
|
|
|
|
|
2020-02-28 15:20:47 +00:00
|
|
|
return (
|
2020-08-18 21:49:11 +01:00
|
|
|
<div className={[_s.d, _s.px5, _s.flexNormal].join(' ')}>
|
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-06-14 17:33:00 +01:00
|
|
|
iconSize='16px'
|
2020-05-01 06:50:27 +01:00
|
|
|
iconClassName={iconClasses}
|
|
|
|
>
|
|
|
|
{
|
2020-12-06 04:47:48 +00:00
|
|
|
!!title && !isCompact &&
|
2020-10-25 00:48:58 +01:00
|
|
|
<Responsive min={BREAKPOINT_SMALL}>
|
2020-05-27 06:22:07 +01:00
|
|
|
<Text color='inherit' size='small' weight={weight}>
|
|
|
|
{title}
|
|
|
|
</Text>
|
|
|
|
</Responsive>
|
2020-05-01 06:50:27 +01:00
|
|
|
}
|
2020-04-02 17:57:04 +01:00
|
|
|
</Button>
|
2020-02-28 15:20:47 +00:00
|
|
|
</div>
|
|
|
|
)
|
|
|
|
}
|
2020-05-15 03:31:24 +01:00
|
|
|
|
2020-08-18 01:57:35 +01:00
|
|
|
}
|
|
|
|
|
|
|
|
StatusActionBarItem.propTypes = {
|
|
|
|
title: PropTypes.string.isRequired,
|
|
|
|
altTitle: PropTypes.string,
|
|
|
|
onClick: PropTypes.func.isRequired,
|
|
|
|
icon: PropTypes.string.isRequired,
|
|
|
|
active: PropTypes.bool,
|
|
|
|
disabled: PropTypes.bool,
|
2020-12-06 04:47:48 +00:00
|
|
|
isCompact: PropTypes.bool,
|
2020-08-18 01:57:35 +01:00
|
|
|
buttonRef: PropTypes.oneOf([
|
|
|
|
PropTypes.func,
|
|
|
|
PropTypes.node,
|
|
|
|
]),
|
|
|
|
}
|
|
|
|
|
|
|
|
export default StatusActionBarItem
|