mirror of https://github.com/kern/filepizza
You cannot select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
44 lines
1.1 KiB
JavaScript
44 lines
1.1 KiB
JavaScript
import React from 'react'
|
|
import classnames from 'classnames'
|
|
|
|
function formatProgress(dec) {
|
|
return (dec * 100).toPrecision(3) + "%"
|
|
}
|
|
|
|
export default class ProgressBar extends React.Component {
|
|
|
|
render() {
|
|
const failed = this.props.value < 0;
|
|
const inProgress = this.props.value < 1 && this.props.value > 0;
|
|
const classes = classnames('progress-bar', {
|
|
'progress-bar-failed': failed,
|
|
'progress-bar-in-progress': inProgress,
|
|
'progress-bar-small': this.props.small
|
|
})
|
|
|
|
const formatted = formatProgress(this.props.value)
|
|
|
|
return <div className={classes}>
|
|
{failed
|
|
? <div className="progress-bar-text">Failed</div>
|
|
: inProgress ? <div
|
|
className="progress-bar-inner"
|
|
style={{width: formatted}}>
|
|
<div className="progress-bar-text">
|
|
{formatted}
|
|
</div>
|
|
</div>
|
|
: <div className="progress-bar-text">Done</div>}
|
|
</div>
|
|
}
|
|
}
|
|
|
|
ProgressBar.propTypes = {
|
|
value: React.PropTypes.number.isRequired,
|
|
small: React.PropTypes.bool
|
|
}
|
|
|
|
ProgressBar.defaultProps = {
|
|
small: false
|
|
}
|