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

59 lines
1.3 KiB
JavaScript

import classNames from 'classnames/bind'
import Button from './button'
import Text from './text'
const cx = classNames.bind(_s)
export default class ProgressBar extends PureComponent {
static propTypes = {
progress: PropTypes.number,
small: PropTypes.bool,
title: PropTypes.string,
}
render() {
const {
progress,
small,
title,
href
} = this.props
const completed = Math.min(parseFloat(progress), 100)
const style = {
width: `${completed}%`,
}
const containerOptions = {
href,
className: cx({
default: 1,
backgroundPanel: !small,
backgroundSubtle2: small,
noUnderline: 1,
circle: 1,
overflowHidden: 1,
cursorPointer: 1,
height22PX: !small,
height4PX: small,
}),
}
return (
<Button
noClasses
{...containerOptions}
>
<div className={[_s.default, _s.backgroundColorBrandDark, _s.circle, _s.height100PC].join(' ')} style={style} />
<div className={[_s.default, _s.positionAbsolute, _s.width100PC, _s.height100PC, _s.alignItemsCenter, _s.justifyContentCenter].join(' ')}>
{
!!title &&
<Text size='small' weight='bold' color='white'>
{title}
</Text>
}
</div>
</Button>
)
}
}