Fix/200122/flip/garychien

src/components/countdown-timer.js

@@ -4,17 +4,15 @@ 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 {
   state = {
     hours: 0,
     minutes: 0,
     seconds: 0,
-  }
+  };
 
   componentDidMount() {
     const { time } = this.props;
@@ -53,18 +51,18 @@ 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;
     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>
     );
   }

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,

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

src/components/style.js

@@ -43,14 +43,14 @@ export default StyleSheet.create({
   },
   separator: {
     marginHorizontal: 5,
-    marginVertical: 10,
+    marginVertical: 6,
     alignItems: 'center',
     justifyContent: 'space-around',
   },
   circle: {
     height: 5,
     width: 5,
     borderRadius: 5,
-    backgroundColor: '#333333',
+    backgroundColor: '#cccccc',
   },
 });

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);
 }