react-native-countdown-hint/index.js at master · shixiaoquan/react-native-countdown-hint · GitHub

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
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
/*
* @Author: edmond
* @Date:   2018-04-03 16:47:44
* @Last Modified by:   edmond
* @Last Modified time: 2018-04-18 16:23:00
*/

import React, { Component } from 'react'
import PropTypes from 'prop-types'

import {
  StyleSheet,
  View,
  Text,
} from 'react-native'

class CountDownHint extends Component {
  constructor(props) {
    super(props)

    const {duration = 60} = props
    this.duration = duration
    this.state = {
      duration: duration,
    }
  }

  componentDidMount() {
    // this.start()
  }

    static propTypes = {
      textleft: PropTypes.string,
      duration: PropTypes.number,
      textright: PropTypes.string,
      containerStyle: PropTypes.object,
      textleftStyle: PropTypes.object,
      durationStyle: PropTypes.object,
      textrightStyle: PropTypes.object,
      onCountDownEnd: PropTypes.func,
    }

    render() {
      const {
        textleft = `剩余`,
        textright = `S`,
        containerStyle = styles.view,
        textleftStyle = styles.textleft,
        durationStyle = styles.duration,
        textrightStyle = styles.textright,
      } = this.props
      const {duration} = this.state
      return (
        <View style={containerStyle}>
          <Text style={textleftStyle}>{textleft}</Text>
          <Text style={durationStyle}>{duration}</Text>
          <Text style={textrightStyle}>{textright}</Text>
        </View>
      )
    }

    start = () => {
      this.interval = setInterval(
        () => {
          if (this.state.duration > 0) {
            this.setState({
              duration: this.state.duration - 1
            })
          } else {
            this.stop()
            this.props.onCountDownEnd()
          }
        },
        1000
      )
    }

    stop = () => {
      this.setState({duration: 0}, () => this.interval && clearInterval(this.interval))
    }

    pause = () => {
      this.interval && clearInterval(this.interval)
    }

    resume = () => {
      this.interval && clearInterval(this.interval)
      this.start()
    }

    reset = (duration) => {
      this.interval && clearInterval(this.interval)
      if (duration) {
        this.duration = duration
      } else {
        duration = this.duration
      }
      this.setState({duration: this.duration}, this.start)
    }
}

const styles = StyleSheet.create({
  view: {
    width: 85,
    height: 28,
    borderRadius: 3,
    flexDirection: 'row',
    alignItems: 'center',
    justifyContent: 'center',
    backgroundColor: '#999',
  },
  textleft: {
    fontSize: 13,
    color: '#FFF',
  },
  duration: {
    fontSize: 13,
    color: '#FFF',
    marginLeft: 3,
    marginRight: 3,
  },
  textright: {
    fontSize: 13,
    color: '#FFF',
  },
})

export default CountDownHint