From 1abe039a90d014e52e6fefd7107082009ecdf074 Mon Sep 17 00:00:00 2001
From: Gary Chien <yanjuang.jian@igroup.tw>
Date: Tue, 14 Jan 2020 17:27:02 +0800
Subject: [PATCH 1/2] =?UTF-8?q?debug=E5=80=92=E6=95=B8=E5=82=B3=E5=85=A5?=
 =?UTF-8?q?=E6=99=82=E9=96=93=E6=9C=89=E8=AA=A4?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/countdown-timer.js | 14 +++++++-------
 src/components/style.js           |  2 +-
 2 files changed, 8 insertions(+), 8 deletions(-)

diff --git a/src/components/countdown-timer.js b/src/components/countdown-timer.js
index dbc214a..3512b23 100644
--- a/src/components/countdown-timer.js
+++ b/src/components/countdown-timer.js
@@ -14,15 +14,15 @@ class CountdownTimer extends React.Component {
     hours: 0,
     minutes: 0,
     seconds: 0,
-  }
+  };
 
   componentDidMount() {
-    const { time } = this.props;
-    const { hours, minutes, seconds } = TransformUtils.formatNumberToTime(time);
+    // const { time } = this.props;
+    // const { hours, minutes, seconds } = TransformUtils.formatNumberToTime(time);
     this.setState({
-      hours,
-      minutes,
-      seconds,
+      hours: 10,
+      minutes: 20,
+      seconds: 30,
     });
     this.timer = setInterval(
       () => this.updateTime(),
@@ -53,7 +53,7 @@ class CountdownTimer extends React.Component {
     const { hours, minutes, seconds } = this.state;
     const newState = TransformUtils.subtractTime(hours, minutes, seconds);
     this.setState(prevState => ({ ...prevState, ...newState }));
-  }
+  };
 
   render() {
     const { wrapperStyle, flipNumberProps } = this.props;
diff --git a/src/components/style.js b/src/components/style.js
index 8b8b7d8..4200c2a 100644
--- a/src/components/style.js
+++ b/src/components/style.js
@@ -51,6 +51,6 @@ export default StyleSheet.create({
     height: 5,
     width: 5,
     borderRadius: 5,
-    backgroundColor: '#333333',
+    backgroundColor: '#cccccc',
   },
 });

From 6b09c0c3f3819be2b94fdbf6b7768d541097ccd6 Mon Sep 17 00:00:00 2001
From: Gary Chien <yanjuang.jian@igroup.tw>
Date: Wed, 22 Jan 2020 15:55:53 +0800
Subject: [PATCH 2/2] =?UTF-8?q?=E4=BF=AE=E6=AD=A3=20props=20time=E6=99=82?=
 =?UTF-8?q?=E9=96=93?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/countdown-timer.js         | 18 +++++++--------
 src/components/flip-number/index.js       | 28 +++++++++++++++++++----
 src/components/flip-number/number-card.js |  3 +--
 src/components/style.js                   |  2 +-
 src/utils/index.js                        | 18 +++++++++++----
 5 files changed, 47 insertions(+), 22 deletions(-)

diff --git a/src/components/countdown-timer.js b/src/components/countdown-timer.js
index 3512b23..bc38a54 100644
--- a/src/components/countdown-timer.js
+++ b/src/components/countdown-timer.js
@@ -4,9 +4,7 @@ import PropTypes from 'prop-types';
 
 import FlipNumber from './flip-number';
 import Separator from './flip-number/separator';
-
 import TransformUtils from '../utils';
-
 import style from './style';
 
 class CountdownTimer extends React.Component {
@@ -17,12 +15,12 @@ class CountdownTimer extends React.Component {
   };
 
   componentDidMount() {
-    // const { time } = this.props;
-    // const { hours, minutes, seconds } = TransformUtils.formatNumberToTime(time);
+    const { time } = this.props;
+    const { hours, minutes, seconds } = TransformUtils.formatNumberToTime(time);
     this.setState({
-      hours: 10,
-      minutes: 20,
-      seconds: 30,
+      hours,
+      minutes,
+      seconds,
     });
     this.timer = setInterval(
       () => this.updateTime(),
@@ -60,11 +58,11 @@ class CountdownTimer extends React.Component {
     const { hours, minutes, seconds } = this.state;
     return (
       <View style={[style.wrapper, wrapperStyle]}>
-        {!!hours && <FlipNumber number={hours} unit="hours" {...flipNumberProps} />}
+        {!!hours && <FlipNumber number={hours} unit="hours" nextUnit={minutes} seconds={seconds} {...flipNumberProps} />}
         <Separator />
-        {!!minutes && <FlipNumber number={minutes} unit="minutes" {...flipNumberProps} />}
+        {!!minutes && <FlipNumber number={minutes} lastUnit={hours} nextUnit={seconds} unit="minutes" {...flipNumberProps} />}
         <Separator />
-        {!!seconds && <FlipNumber number={seconds} unit="seconds" {...flipNumberProps} />}
+        {!!seconds && <FlipNumber number={seconds} lastUnit={minutes} unit="seconds" {...flipNumberProps} />}
       </View>
     );
   }
diff --git a/src/components/flip-number/index.js b/src/components/flip-number/index.js
index 0a47225..59b46b6 100644
--- a/src/components/flip-number/index.js
+++ b/src/components/flip-number/index.js
@@ -8,20 +8,32 @@ import NumberCard from './number-card';
 import style from '../style';
 
 function FlipNumber({
-  number, unit, size, perspective, numberWrapperStyle, cardStyle, flipCardStyle, numberStyle,
+  number, unit, size, perspective, numberWrapperStyle, cardStyle, flipCardStyle, numberStyle, lastUnit, nextUnit, seconds,
 }) {
   number = parseInt(number);
   let previousNumber = number - 1;
-  if (unit !== 'hours') {
-    previousNumber = previousNumber === -1 ? 59 : previousNumber;
+
+  if (unit === 'hours') {
+    previousNumber = previousNumber === -1 ? 0 : previousNumber;
+  } else if (unit === 'minutes') {
+    previousNumber = previousNumber < 0 ? (parseInt(lastUnit) === 0 ? 0 : 59) : previousNumber;
   } else {
-    previousNumber = previousNumber === -1 ? 23 : previousNumber;
+    previousNumber = previousNumber < 0 ? (parseInt(lastUnit) === 0 ? 0 : 59) : previousNumber;
   }
   number = number < 10 ? `0${number}` : number;
   previousNumber = previousNumber < 10 ? `0${previousNumber}` : previousNumber;
 
   const numberSplit = number.toString().split('');
-  const previousNumberSplit = previousNumber.toString().split('');
+  let previousNumberSplit = previousNumber.toString().split('');
+  if (unit === 'minutes' && parseInt(nextUnit) !== 0) {
+    previousNumberSplit = numberSplit;
+  }
+  if (unit === 'hours') {
+    if (parseInt(nextUnit) !== 0 || seconds !== 0) {
+      previousNumberSplit = numberSplit;
+    }
+  }
+
   return (
     <View style={style.wrapper}>
       <NumberCard
@@ -50,6 +62,9 @@ function FlipNumber({
 
 FlipNumber.defaultProps = {
   unit: 'seconds',
+  lastUnit: 0,
+  nextUnit: 0,
+  seconds: 0,
 };
 
 FlipNumber.propTypes = {
@@ -58,6 +73,9 @@ FlipNumber.propTypes = {
     PropTypes.number,
   ]).isRequired,
   unit: PropTypes.oneOf(['hours', 'minutes', 'seconds']),
+  lastUnit: PropTypes.any,
+  nextUnit: PropTypes.any,
+  seconds: PropTypes.any,
   size: PropTypes.number,
   perspective: PropTypes.number,
   numberWrapperStyle: PropTypes.object,
diff --git a/src/components/flip-number/number-card.js b/src/components/flip-number/number-card.js
index 1b3ae51..ca8a5a2 100644
--- a/src/components/flip-number/number-card.js
+++ b/src/components/flip-number/number-card.js
@@ -3,7 +3,6 @@ import { View, Animated, Dimensions } from 'react-native';
 import PropTypes from 'prop-types';
 
 import style from '../style';
-
 import TransformUtil from '../../utils';
 import FlipCard from './flip-card';
 import Card from './card';
@@ -83,7 +82,7 @@ class NumberCard extends React.Component {
     } = this.props;
     return (
       <View style={[style.numberWrapper,
-        { width: size * 0.8, height: size * 1.2, borderRadius: size / 10 },
+        { width: size, height: size * 1.2, borderRadius: size / 10 },
         numberWrapperStyle]}
       >
         <Card
diff --git a/src/components/style.js b/src/components/style.js
index 4200c2a..81638c6 100644
--- a/src/components/style.js
+++ b/src/components/style.js
@@ -43,7 +43,7 @@ export default StyleSheet.create({
   },
   separator: {
     marginHorizontal: 5,
-    marginVertical: 10,
+    marginVertical: 6,
     alignItems: 'center',
     justifyContent: 'space-around',
   },
diff --git a/src/utils/index.js b/src/utils/index.js
index 646ed3d..951b5c1 100644
--- a/src/utils/index.js
+++ b/src/utils/index.js
@@ -74,13 +74,23 @@ function subtractTime(hours, minutes, seconds) {
   seconds -= 1;
 
   if (seconds < 0) {
-    minutes -= 1;
-    seconds = 59;
+    if (minutes <= 0 && hours <= 0) {
+      minutes = 0;
+      seconds = 0;
+    } else {
+      minutes -= 1;
+      seconds = 59;
+    }
   }
 
   if (minutes < 0) {
-    hours -= 1;
-    minutes = 59;
+    if (hours <= 0) {
+      hours = 0;
+      minutes = 0;
+    } else {
+      hours -= 1;
+      minutes = 59;
+    }
   }
   return formatTime(hours, minutes, seconds);
 }