mirror of
https://github.com/Unleash/unleash.git
synced 2024-10-18 20:09:08 +02:00
87 lines
2.3 KiB
React
87 lines
2.3 KiB
React
|
import React, { PropTypes, Component } from 'react';
|
||
|
import styles from './progress.scss';
|
||
|
|
||
|
class Progress extends Component {
|
||
|
constructor (props) {
|
||
|
super(props);
|
||
|
|
||
|
this.state = {
|
||
|
percentage: props.initialAnimation ? 0 : props.percentage,
|
||
|
};
|
||
|
}
|
||
|
|
||
|
componentDidMount () {
|
||
|
if (this.props.initialAnimation) {
|
||
|
this.initialTimeout = setTimeout(() => {
|
||
|
this.requestAnimationFrame = window.requestAnimationFrame(() => {
|
||
|
this.setState({
|
||
|
percentage: this.props.percentage,
|
||
|
});
|
||
|
});
|
||
|
}, 0);
|
||
|
}
|
||
|
}
|
||
|
|
||
|
componentWillReceiveProps ({ percentage }) {
|
||
|
this.setState({ percentage });
|
||
|
}
|
||
|
|
||
|
componentWillUnmount () {
|
||
|
clearTimeout(this.initialTimeout);
|
||
|
window.cancelAnimationFrame(this.requestAnimationFrame);
|
||
|
}
|
||
|
|
||
|
render () {
|
||
|
const { strokeWidth, percentage } = this.props;
|
||
|
const radius = (50 - strokeWidth / 2);
|
||
|
const pathDescription = `
|
||
|
M 50,50 m 0,-${radius}
|
||
|
a ${radius},${radius} 0 1 1 0,${2 * radius}
|
||
|
a ${radius},${radius} 0 1 1 0,-${2 * radius}
|
||
|
`;
|
||
|
|
||
|
const diameter = Math.PI * 2 * radius;
|
||
|
const progressStyle = {
|
||
|
strokeDasharray: `${diameter}px ${diameter}px`,
|
||
|
strokeDashoffset: `${((100 - this.state.percentage) / 100 * diameter)}px`,
|
||
|
};
|
||
|
|
||
|
return (<svg viewBox="0 0 100 100">
|
||
|
<path
|
||
|
className={styles.trail}
|
||
|
d={pathDescription}
|
||
|
strokeWidth={strokeWidth}
|
||
|
fillOpacity={0}
|
||
|
/>
|
||
|
|
||
|
<path
|
||
|
className={styles.path}
|
||
|
d={pathDescription}
|
||
|
strokeWidth={strokeWidth}
|
||
|
fillOpacity={0}
|
||
|
style={progressStyle}
|
||
|
/>
|
||
|
|
||
|
<text
|
||
|
className={styles.text}
|
||
|
x={50}
|
||
|
y={50}
|
||
|
>{percentage}%</text>
|
||
|
</svg>);
|
||
|
}
|
||
|
}
|
||
|
|
||
|
Progress.propTypes = {
|
||
|
percentage: PropTypes.number.isRequired,
|
||
|
strokeWidth: PropTypes.number,
|
||
|
initialAnimation: PropTypes.bool,
|
||
|
textForPercentage: PropTypes.func,
|
||
|
};
|
||
|
|
||
|
Progress.defaultProps = {
|
||
|
strokeWidth: 8,
|
||
|
initialAnimation: false,
|
||
|
};
|
||
|
|
||
|
export default Progress;
|