update-count-down

saigontechnology · Nov 21, 2023 · 6e6ec76 · 6e6ec76
1 parent 0a0887f
commit 6e6ec76
Show file tree

Hide file tree

Showing 4 changed files with 33 additions and 10 deletions.
diff --git a/example/src/stories/CountDown.stories.tsx b/example/src/stories/CountDown.stories.tsx
@@ -16,9 +16,9 @@ export const CountDownComponent: ComponentStory<typeof CountDown> = args => (
   </ScrollView>
 )
 CountDownComponent.args = {
-  initialSeconds: 60 * 60 * 1.5 * 16.01,
+  initialSeconds: 10,
   loop: false,
-  format: 'ddhhmmss',
+  format: 'mmss',
 }
 
 const styles = StyleSheet.create({

diff --git a/src/components/CountDown/CountDown.tsx b/src/components/CountDown/CountDown.tsx
@@ -1,7 +1,9 @@
 import React, {useEffect, useRef, useState} from 'react'
 import {AppState, type StyleProp, type ViewStyle, type TextStyle} from 'react-native'
 import styled from 'styled-components/native'
-import {Text} from 'rn-base-component'
+import {Text} from '../Text/Text'
+import {useTheme} from '../../hooks'
+
 export const FormatTime = {
   mmss: 'mm:ss',
   hhmmss: 'HH:mm:ss',
@@ -38,7 +40,7 @@ export type CountDownProps = {
   */
   loop?: boolean
   /*
-  format countdown as key 
+  format countdown as key
   */
   format?: keyof typeof FormatTime
   /*
@@ -57,6 +59,8 @@ export const CountDown: React.FunctionComponent<CountDownProps> = ({
   elementStyle,
   colonsStyle,
 }) => {
+  const CountDownTheme = useTheme().components.CountDown
+
   const [seconds, setSeconds] = useState(initialSeconds)
   const appState = useRef(AppState.currentState)
   const milisecond = 1000
@@ -103,7 +107,7 @@ export const CountDown: React.FunctionComponent<CountDownProps> = ({
 
   const renderColons = () => (
     <Container>
-      <Text style={[textStyle, colonsStyle]}>:</Text>
+      <Label style={[CountDownTheme.textStyle, textStyle, colonsStyle]}>:</Label>
     </Container>
   )
 
@@ -116,7 +120,7 @@ export const CountDown: React.FunctionComponent<CountDownProps> = ({
     const minute = resultCaculatMinute >= 0 ? resultCaculatMinute : 0
     const textMinute = (
       <Container style={elementStyle}>
-        <Text style={[textStyle]}>{minute >= 10 ? `${minute}` : `0${minute}`}</Text>
+        <Label style={[CountDownTheme.textStyle, textStyle]}>{minute.toString().padStart(2, '0')}</Label>
       </Container>
     )
     /*
@@ -126,7 +130,7 @@ export const CountDown: React.FunctionComponent<CountDownProps> = ({
     const second = resultCaculatSecond >= 0 ? resultCaculatSecond : 0
     const textSecond = (
       <Container style={elementStyle}>
-        <Text style={[textStyle]}>{second >= 10 ? `${second}` : `0${second}`}</Text>
+        <Label style={[CountDownTheme.textStyle, textStyle]}>{second.toString().padStart(2, '0')}</Label>
       </Container>
     )
     let textDay = null
@@ -141,7 +145,7 @@ export const CountDown: React.FunctionComponent<CountDownProps> = ({
       const day = resultCaculatDay >= 0 ? resultCaculatDay : 0
       textDay = (
         <Container style={elementStyle}>
-          <Text style={[textStyle]}>{day >= 10 ? `${day}` : `0${day}`}</Text>
+          <Label style={[CountDownTheme.textStyle, textStyle]}>{day.toString().padStart(2, '0')}</Label>
         </Container>
       )
     }
@@ -155,13 +159,13 @@ export const CountDown: React.FunctionComponent<CountDownProps> = ({
       const hour = resultCaculatHour >= 0 ? resultCaculatHour % hourPerDay : 0
       textHour = (
         <Container style={elementStyle}>
-          <Text style={[textStyle]}>{hour >= 10 ? `${hour}` : `0${hour}`}</Text>
+          <Label style={[CountDownTheme.textStyle, textStyle]}>{hour.toString().padStart(2, '0')}</Label>
         </Container>
       )
     }
 
     return (
-      <Container style={containerStyle}>
+      <Container style={[CountDownTheme.containerStyle, containerStyle]}>
         {textDay && textDay}
         {textDay && renderColons()}
         {textHour && textHour}
@@ -179,3 +183,8 @@ export const CountDown: React.FunctionComponent<CountDownProps> = ({
 const Container = styled.View({
   flexDirection: 'row',
 })
+
+const Label = styled(Text)(({theme}) => ({
+  color: theme?.colors?.black,
+  fontSize: theme?.fontSizes?.xl,
+}))
diff --git a/src/theme/components/Countdown/Countdown.ts b/src/theme/components/Countdown/Countdown.ts
@@ -0,0 +1,12 @@
+import base from '../../base'
+import {metrics} from '../../../helpers'
+import type {CountDownProps} from '../../../components/CountDown/CountDown'
+
+export type CountDownThemeProps = {} & Pick<CountDownProps, 'textStyle'>
+
+export const CountDownTheme: CountDownThemeProps = {
+  textStyle: {
+    color: base.colors.black,
+    fontSize: metrics.sMedium,
+  },
+}
diff --git a/src/theme/components/index.ts b/src/theme/components/index.ts
@@ -5,6 +5,7 @@ import {
   ButtonSecondaryTheme,
   ButtonTransparentTheme,
 } from './Button'
+import {CountDownTheme} from './Countdown/Countdown'
 import {CheckboxTheme} from './Checkbox'
 import {TextTheme} from './Text'
 
@@ -16,4 +17,5 @@ export default {
   ButtonTransparent: ButtonTransparentTheme,
   Checkbox: CheckboxTheme,
   Text: TextTheme,
+  CountDown: CountDownTheme,
 }