Update to 0.1.0

Author: ljunb

README.md

@@ -36,6 +36,9 @@ import CountdownView from 'rn-countdown';
 
 export default class RNCountdownDemo extends Component {
 
+    state = {
+        hasText: false
+    };
     phoneNumber = '';
 
     shouldHandleBeforeCountdown = () => {
@@ -49,7 +52,15 @@ export default class RNCountdownDemo extends Component {
         this.countdown && this.countdown.stopCountdown();
     };
 
+    handleChangeText = text => {
+        this.phoneNumber = text;
+        this.setState({hasText: !!this.phoneNumber})
+    };
+
     render() {
+        const style = this.state.hasText ? {backgroundColor: 'rgb(59, 197, 81)', borderWidth: 0} : {};
+        const title = this.state.hasText ? {color: '#fff'} : {};
+
         return (
             <View style={styles.container}>
                 <View style={styles.phoneCell}>
@@ -59,16 +70,16 @@ export default class RNCountdownDemo extends Component {
                             style={styles.input}
                             placeholder="请输入手机号码"
                             underlineColorAndroid="transparent"
-                            onChangeText={text => this.phoneNumber = text}
+                            onChangeText={this.handleChangeText}
                         />
                     </View>
                     <CountdownView
                         ref={r => this.countdown = r}
                         time={10}
                         title="发送验证码"
                         overTitle="重新发送"
-                        style={styles.countdown}
-                        titleStyle={styles.countdownTitle}
+                        style={[styles.countdown, style]}
+                        titleStyle={[styles.countdownTitle, title]}
                         countingTitleTemplate="发送中({time})"
                         countingStyle={styles.countingdown}
                         countingTitleStyle={styles.countingTitle}
@@ -111,15 +122,13 @@ const styles = StyleSheet.create({
         fontSize: 14
     },
     countdown: {
-        backgroundColor: 'rgb(59, 197, 81)',
         borderRadius: 15,
-        borderWidth: 0
     },
     countingdown: {
         backgroundColor: 'transparent',
         borderWidth: StyleSheet.hairlineWidth
     },
-    countdownTitle: {color: '#fff'},
+    countdownTitle: {color: '#ccc'},
     countingTitle: {color: '#ccc'}
 });
 ```

index.js

@@ -1,12 +1,12 @@
 /*
  * A smart countdown component for react-native apps.
  * You may use it to handle different status when request a verification code.
- * https://github.com/ljunb/react-native-countdown/
+ * https://github.com/ljunb/rn-countdown/
  * Released under the MIT license
  * Copyright (c) 2017 ljunb <cookiejlim@gmail.com>
  */
 
-import React, {Component, PropTypes} from 'react';
+import React, {PureComponent, PropTypes} from 'react';
 import {
     StyleSheet,
     Text,
@@ -19,15 +19,15 @@ import {
  * The status of countdown view.
  * None：default
  * Counting：counting down
- * Over：countdown ends
+ * Over：countdown over
  * */
 const CountdownStatus = {
     None: 0,
     Counting: 1,
     Over: 2
 };
 
-export default class Countdown extends Component {
+export default class Countdown extends PureComponent {
     static propTypes = {
         style: ViewPropTypes.style,
         title: PropTypes.string,
@@ -79,28 +79,38 @@ export default class Countdown extends Component {
             this.clearTimer();
         } else if (nextAppState === 'active') {
             if (this.state.status !== CountdownStatus.Counting) return;
+            this.turnsOnTimer();
+        }
+    };
 
-            const now = new Date();
-            const diff = Math.round((now - this.recodTime) / 1000);
-            if (this.state.second - diff <= 0) {
-                this.setState({status: CountdownStatus.Over, second: this.props.time});
-            } else {
-                this.setState({
-                    status: CountdownStatus.Counting,
-                    second: this.state.second - diff
-                }, this.startTimer)
-            }
+    turnsOnTimer = () => {
+        const now = new Date();
+        const diff = Math.round((now - this.recodTime) / 1000);
+        if (this.state.second - diff <= 0) {
+            this.setState({status: CountdownStatus.Over, second: this.props.time});
+        } else {
+            this.setState({
+                status: CountdownStatus.Counting,
+                second: this.state.second - diff
+            }, this.startTimer)
         }
     };
 
     handlePress = () => {
-        const {shouldHandleBeforeCountdown, countingTitleTemplate} = this.props;
+        const {shouldHandleBeforeCountdown} = this.props;
         const canStartTimer = shouldHandleBeforeCountdown();
         if (!canStartTimer) return;
+
         this.setState({status: CountdownStatus.Counting}, this.startTimer);
+        this.shouldShowWarningInfo();
+    };
 
-        const showWarn = countingTitleTemplate.indexOf('{time}') === -1;
-        showWarn && console.warn('[rn-countdown] The countingTitleTemplate string must conform to the format that contain `{time}`!');
+    shouldShowWarningInfo = () => {
+        const {countingTitleTemplate} = this.props;
+        const isCorrectFormat = countingTitleTemplate.includes('{time}');
+        if (!isCorrectFormat) {
+            console.warn("[rn-countdown] Warning: Failed prop format: Invalid prop `countingTitleTemplate` of format without substring `{time}`.");
+        }
     };
 
     startTimer = () => {

package.json

@@ -1,6 +1,6 @@
 {
   "name": "rn-countdown",
-  "version": "0.0.5",
+  "version": "0.1.0",
   "description": "A smart countdown component for react-native apps. You may use it to handle different status when request a verification code.",
   "main": "index.js",
   "scripts": {