29 lines
708 B
JavaScript
29 lines
708 B
JavaScript
|
import { Circle } from 'rc-progress/lib'
|
||
|
|
import React from 'react'
|
||
|
|
import { connect } from 'react-redux'
|
||
|
|
import { targetCompletionRatioSelector } from 'Selectors/progressCircleSelectors'
|
||
|
|
|
||
|
|
let ProgressCircle = ({ ratio, isActiveInput }) => (
|
||
|
|
<span
|
||
|
|
className="progressCircle"
|
||
|
|
style={{
|
||
|
|
visibility: isActiveInput ? 'hidden' : 'visible'
|
||
|
|
}}>
|
||
|
|
{ratio === 0 ? (
|
||
|
|
<i className="fa fa-check" aria-hidden="true" />
|
||
|
|
) : (
|
||
|
|
<Circle
|
||
|
|
percent={Math.max(2, 100 - ratio * 100)}
|
||
|
|
strokeWidth="15"
|
||
|
|
strokeColor="#5de662"
|
||
|
|
trailColor="#fff"
|
||
|
|
trailWidth="5"
|
||
|
|
/>
|
||
|
|
)}
|
||
|
|
</span>
|
||
|
|
)
|
||
|
|
|
||
|
|
export default connect((state, props) => ({
|
||
|
|
ratio: targetCompletionRatioSelector(state, props)
|
||
|
|
}))(ProgressCircle)
|