All files / src/components/ProgressBar/demo Scroll.js

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
/**
 * 滚动进度条示例
 * @Author 瞿龙俊 - qulongjun@shine.design
 * @Date 2019-03-26 08:33
 */
import React, { Component } from "react";
import { Progress, Bar } from "shineDev";
 
class Scroll extends Component {
  
  state = {
    percent: 0,
    isIncrease: true
  };
 
  componentDidMount() {
    const me = this;
 
    this.percentTimer = setInterval(() => {
      me.setState(prevState => {
        const { isIncrease, percent } = prevState;
 
        if (isIncrease && percent <= 100) {
          return { percent: prevState.percent + 1 };
        }
 
        if (isIncrease && percent > 100) {
          return { percent: prevState.percent - 1, isIncrease: false };
        }
 
        if (!isIncrease && percent > 0) {
          return { percent: prevState.percent - 1 };
        }
 
        if (!isIncrease && percent <= 0) {
          return { percent: prevState.percent - 1, isIncrease: true };
        }
 
        return { percent: prevState.percent + 1 };
      });
    }, 100);
  }
 
  componentWillUnmount() {
    clearInterval(this.percentTimer);
  }
 
  render() {
    const { percent } = this.state;
 
    return (
      <Progress className="shine-progress-helper">
        <Bar percent={percent} className="shine--bg-success" />
      </Progress>
    );
  }
}
 
export default Scroll;