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

64 lines
1.4 KiB
JavaScript
Raw Normal View History

import React from 'react'
import PropTypes from 'prop-types'
2020-04-29 23:32:49 +01:00
import { CX } from '../constants'
2020-03-26 03:11:32 +00:00
import Button from './button'
2020-02-19 23:57:07 +00:00
import Text from './text'
class ProgressBar extends React.PureComponent {
2020-02-05 22:45:48 +00:00
render() {
2020-03-26 03:11:32 +00:00
const {
progress,
small,
title,
2020-04-29 23:32:49 +01:00
href,
2020-03-26 03:11:32 +00:00
} = this.props
2020-02-05 22:45:48 +00:00
const completed = Math.min(parseFloat(progress), 100)
const style = {
width: `${completed}%`,
}
2020-03-26 03:11:32 +00:00
2020-04-29 23:32:49 +01:00
const containerClassName = CX({
d: 1,
2020-04-29 23:32:49 +01:00
bgLoading: !small,
bgSecondary: small,
2020-04-23 07:13:29 +01:00
noUnderline: 1,
circle: 1,
overflowHidden: 1,
cursorPointer: 1,
h22PX: !small,
h4PX: small,
2020-04-23 07:13:29 +01:00
})
2020-02-05 22:45:48 +00:00
return (
2020-03-26 03:11:32 +00:00
<Button
2020-04-23 07:13:29 +01:00
href={href}
2020-03-26 03:11:32 +00:00
noClasses
2020-04-23 07:13:29 +01:00
className={containerClassName}
2020-03-26 03:11:32 +00:00
>
<div className={[_s.d, _s.bgBrand, _s.circle, _s.h100PC, _s.backgroundCandy].join(' ')} style={style} />
<div className={[_s.d, _s.posAbs, _s.w100PC, _s.h100PC, _s.aiCenter, _s.jcCenter].join(' ')}>
2020-03-26 03:11:32 +00:00
{
!!title &&
2020-04-24 04:17:27 +01:00
<Text size='small' weight='bold' color='white' className={_s.textShadow}>
2020-03-26 03:11:32 +00:00
{title}
</Text>
}
2020-02-19 23:57:07 +00:00
</div>
2020-03-26 03:11:32 +00:00
</Button>
2020-02-05 22:45:48 +00:00
)
}
}
ProgressBar.propTypes = {
progress: PropTypes.oneOfType([
PropTypes.number,
PropTypes.string,
]).isRequired,
small: PropTypes.bool,
title: PropTypes.string,
href: PropTypes.string,
}
export default ProgressBar