@ledvance/ui-biz-bundle 1.1.67 → 1.1.69

package/src/modules/timer/TimerPage.tsx

@@ -1,384 +1,384 @@
-import React, { useCallback, useEffect } from "react";
-import { View, Text, ScrollView, TouchableOpacity, StyleSheet, FlatList, Image } from "react-native"
-import { useNavigation } from '@react-navigation/native'
-import { RouteProp, useRoute } from '@react-navigation/core'
-import { useReactive, useUpdateEffect } from "ahooks";
-import res from '@ledvance/base/src/res'
-import Card from '@ledvance/base/src/components/Card'
-import Spacer from '@ledvance/base/src/components/Spacer'
-import I18n from '@ledvance/base/src/i18n'
-import Page from "@ledvance/base/src/components/Page";
-import LdvPickerView from '@ledvance/base/src/components/ldvPickerView'
-import { Utils, Progress } from 'tuya-panel-kit'
-import { useDeviceInfo } from "@ledvance/base/src/models/modules/NativePropsSlice";
-import { useProgress } from "./TimerPageAction";
-import { cloneDeep } from "lodash";
-import dayjs from "dayjs";
-import DeleteButton from "@ledvance/base/src/components/DeleteButton";
-
-const { withTheme } = Utils.ThemeUtils
-
-export type dpItem = {
-  label: string
-  value: string
-  dpId: string
-  enableDp: string
-  cloudKey: any
-  stringOn: any
-  stringOff: any
-}
-
-type TimerPageRouteParams = {
-  params: { dps: dpItem[] }
-}
-
-type Props = {
-  route: RouteProp<TimerPageRouteParams, 'params'>
-}
-
-const { convertX: cx } = Utils.RatioUtils
-const TimerPage = (props: {theme?: any}) => {
-  const devInfo = useDeviceInfo()
-  const navigation = useNavigation()
-  const { dps } = useRoute<Props['route']>().params
-  const progress = useProgress(dps)
-  const state = useReactive({
-    hour: '00',
-    minute: '01',
-    skillList: [] as dpItem[],
-    selectedSkill: [] as dpItem[]
-  })
-
-
-  const hasNotRunningTimer = () => {
-    return !!progress.find(p => p.progressHook.countdown === 0)
-  }
-
-  const runningTimer = () => {
-    return progress.filter(p => p.progressHook.countdown > 0)
-  }
-
-  const getProgressByDp = useCallback((dpId: string) => {
-    return progress.find(p => p.dpId === dpId)!.progressHook
-  }, [progress])
-
-  useEffect(() => {
-    if (progress.length > 1) {
-      state.skillList = progress.filter(p => p.progressHook.countdown === 0)
-    } else {
-      state.skillList = []
-      state.selectedSkill = cloneDeep(dps)
-    }
-  }, [runningTimer().length])
-
-  useUpdateEffect(() => {
-    if (state.hour === '00' && state.minute === '00') {
-      state.minute = '01'
-    }
-  }, [state.hour, state.minute])
-
-
-  const handelTimer = (timer: dpItem, isAdd: boolean) => {
-    if (isAdd) {
-      state.selectedSkill = [...state.selectedSkill, timer]
-      state.skillList = state.skillList.filter(item => item.dpId !== timer.dpId)
-    } else {
-      state.selectedSkill = state.selectedSkill.filter(item => item.dpId !== timer.dpId)
-      state.skillList = [...state.skillList, timer]
-    }
-  }
-
-  const onStartPress = async () => {
-    let mCountdown = 0
-    const hour = parseInt(state.hour)
-    const minute = parseInt(state.minute)
-    if (hour > 0) {
-      mCountdown += hour * 60 * 60
-    }
-    if (minute > 0) {
-      mCountdown += minute * 60
-    }
-    if (!state.selectedSkill.length || mCountdown === 0) return
-    for (let skill of state.selectedSkill) {
-      const time = dayjs()
-        .add(Number(hour), 'h')
-        .add(Number(minute), 'm')
-        .format('YYYY-MM-DD HH:mm:ss');
-      await getProgressByDp(skill.dpId).startTimer(mCountdown, time)
-    }
-    state.selectedSkill = []
-  }
-
-  const getActiveTimeString = (c: number) => {
-    const h = parseInt(String(c / 3600))
-    const m = Number(((c - 3600 * h) / 60).toFixed(0))
-    if (h > 0) {
-      if (m === 0) {
-        return h + ' h'
-      } else {
-        return h + ' h ' + m + ' min'
-      }
-    } else {
-      return m + ' min'
-    }
-  }
-
-  const getSingleLightEndTimeString = (mCountdown: number) => {
-    const date = new Date()
-    const now = date.getTime()
-    const after = new Date(now + mCountdown * 1000)
-    const timeString = `${after.getHours()}:${after.getMinutes().toString().padStart(2, '0')}`
-    return timeString
-  }
-
-  const showActiveView = () => {
-    return progress.length > 1
-  }
-
-  const renderItem = ({ item }) => {
-    return (
-      <View style={{
-        flexDirection: 'row',
-        justifyContent: 'space-between',
-        alignItems: 'center',
-        backgroundColor: props.theme.global.background,
-        marginBottom: cx(8)
-      }}>
-        <Text
-          style={{
-            color: props.theme.global.fontColor,
-            fontSize: 14,
-            marginHorizontal: cx(6),
-            marginVertical: cx(9),
-          }}
-        >
-          {item.label}
-        </Text>
-        {progress.length > 1 && <TouchableOpacity onPress={() => handelTimer(item, false)}>
-            <Image style={{ width: cx(16), height: cx(16), marginRight: cx(5) }} source={res.ic_arrows_nav_clear} />
-        </TouchableOpacity>}
-      </View>
-    );
-  };
-
-  const styles = StyleSheet.create({
-    content: {
-      marginHorizontal: cx(24)
-    },
-    itemTitle: {
-      color: props.theme.global.fontColor,
-      fontSize: cx(16),
-      fontWeight: 'bold',
-      fontFamily: 'helvetica_neue_lt_std_bd',
-      marginTop: cx(30),
-      marginBottom: cx(10)
-    },
-    skillListItem: {
-      flexDirection: 'row',
-      justifyContent: 'space-between',
-      height: cx(30),
-      alignItems: 'center',
-      marginVertical: cx(5)
-    },
-    activeTimer: {
-      marginHorizontal: cx(20),
-      marginVertical: cx(20),
-    },
-    activeTimerTitleBox: {
-      flexDirection: 'row',
-      justifyContent: 'space-between',
-      alignItems: 'center',
-      marginBottom: cx(20),
-    },
-    activeTimerTitle: {
-      fontSize: cx(20),
-      color: props.theme.global.fontColor,
-    },
-    activeTimerCancelBtn: {
-      paddingHorizontal: cx(8),
-      paddingVertical: cx(5),
-      alignItems: 'center',
-      justifyContent: 'center',
-      backgroundColor: '#666',
-      borderRadius: cx(5)
-    },
-    activeTimerTimeBox: {
-      flexDirection: 'row',
-      alignItems: 'center',
-      marginBottom: cx(20),
-    },
-  })
-
-  return (
-    <Page
-      backText={devInfo.name}
-      headlineText={I18n.getLang('timer_nightplug_headline_text')}
-      onBackClick={navigation.goBack}
-    >
-      <ScrollView
-        nestedScrollEnabled={true}
-        showsHorizontalScrollIndicator={false}
-        showsVerticalScrollIndicator={false}
-      >
-        {/* picker */}
-        <View style={styles.content}>
-          {hasNotRunningTimer() && <>
-              <LdvPickerView
-                  hour={state.hour}
-                  minute={state.minute}
-                  setHour={h => state.hour = h}
-                  setMinute={m => state.minute = m}
-                  unit={['h', 'min']}
-              />
-            {/* Apply for */}
-              <View>
-                  <Text style={styles.itemTitle}>{I18n.getLang('timeschedule_add_schedule_subheadline_text')}</Text>
-                  <View
-                      style={{
-                        backgroundColor: props.theme.card.board,
-                        borderRadius: 4,
-                        minHeight: cx(50),
-                        flex: 1,
-                        justifyContent: 'center',
-                      }}
-                  >
-                    {!state.selectedSkill.length ? <Text style={{ marginLeft: cx(10) }}>{I18n.getLang('timer_ceiling_fan_selectionfield_no_components_text')}</Text> :
-                      <View
-                        style={{
-                          marginHorizontal: cx(8),
-                          marginTop: cx(8),
-                          borderRadius: 4,
-                        }}
-                      >
-                        <FlatList
-                          data={state.selectedSkill}
-                          renderItem={item => renderItem(item)}
-                          keyExtractor={(item: dpItem) => item.dpId}
-                        />
-                      </View>}
-                  </View>
-                {state.skillList.map((skill: dpItem) => {
-                  return (
-                    <TouchableOpacity style={styles.skillListItem} key={skill.dpId} onPress={() => handelTimer(skill, true)}>
-                      <Text style={{ color: props.theme.global.fontColor }}>{skill.label}</Text>
-                      <Image style={{ width: cx(16), height: cx(16) }} source={res.device_panel_timer_add} />
-                    </TouchableOpacity>
-                  )
-                })}
-              </View>
-
-            {/* Start */}
-              <Spacer />
-              <DeleteButton
-                  text={I18n.getLang('timer_sockets_button_text')}
-                  onPress={onStartPress}
-                  textStyle={{ fontSize: cx(14) }}
-                  style={{ backgroundColor: !state.selectedSkill.length ? props.theme.button.disabled : props.theme.button.active }}
-              />
-              <Spacer />
-          </>}
-
-          {/* Active timer */}
-          {!!runningTimer().length && (
-            showActiveView() ? <>
-                <Text style={styles.itemTitle}>{I18n.formatValue('timer_nightplug_active_timer_subheadline2_text', runningTimer().length.toString())}</Text>
-                {runningTimer().map(timer => (
-                  <View key={timer.dpId}>
-                    <Card containerStyle={styles.activeTimer}>
-                      <View style={styles.activeTimerTitleBox}>
-                        <Text style={styles.activeTimerTitle}>{timer.label}</Text>
-                        <TouchableOpacity
-                          onPress={() => {
-                            getProgressByDp(timer.dpId).endTimer()
-                          }}
-                          style={styles.activeTimerCancelBtn}>
-                          <Text style={{ color: '#fff', fontSize: cx(12) }}>{I18n.getLang('auto_scan_system_cancel')}</Text>
-                        </TouchableOpacity>
-                      </View>
-                      <View style={styles.activeTimerTimeBox}>
-                        <Progress.Double
-                          style={{
-                            width: 35,
-                            height: 35,
-                            // backgroundColor: 'red',
-                            justifyContent: 'center',
-                            alignItems: 'center',
-                          }}
-                          disabled={true}
-                          minValue={0}
-                          maxValue={getProgressByDp(timer.dpId).progressNumber}
-                          startDegree={270}
-                          andDegree={360}
-                          scaleHeight={2}
-                          thumbStrokeWidth={2}
-                          thumbRadius={0}
-                        />
-                        <Text style={{ marginLeft: cx(20), fontSize: cx(22) }}>{getActiveTimeString(timer.progressHook.countdown)}</Text>
-                      </View>
-                      <Text>{I18n.formatValue(timer.enable ? timer.stringOff : timer.stringOn, getSingleLightEndTimeString(timer.progressHook.countdown))}</Text>
-                    </Card>
-                    <Spacer height={cx(40)} />
-                  </View>
-                ))}
-              </> :
-              <View
-                style={{
-                  flexDirection: 'column',
-                  alignItems: 'center',
-                  marginVertical: cx(30),
-                }}
-              >
-                <Progress.Double
-                  style={{
-                    width: 172,
-                    height: 172,
-                    justifyContent: 'center',
-                    alignItems: 'center',
-                  }}
-                  minValue={0}
-                  maxValue={getProgressByDp(runningTimer()[0].dpId).progressNumber}
-                  startDegree={270}
-                  andDegree={360}
-                  disabled={true}
-                  foreColor={'#f60'}
-                  scaleHeight={14}
-                  minThumbFill={'#f60'}
-                  minThumbStroke={'#f60'}
-                  thumbStrokeWidth={0}
-                  thumbRadius={14 / 2 - 0.5}
-                  thumbFill={'#f60'}
-                  thumbStroke={'#f60'}
-                  renderCenterView={
-                    <View style={{ position: 'absolute' }}>
-                      <Text style={{ fontSize: cx(22), fontWeight: 'bold', color: props.theme.global.secondFontColor }}>
-                        {getActiveTimeString(runningTimer()[0].progressHook.countdown)}
-                      </Text>
-                    </View>
-                  }
-                />
-                <View style={{ marginVertical: cx(30) }}>
-                  <Text>
-                    {I18n.formatValue(
-                      runningTimer()[0].enable ?
-                        runningTimer()[0].stringOff :
-                        runningTimer()[0].stringOn, getSingleLightEndTimeString(runningTimer()[0].progressHook.countdown)
-                    )}
-                  </Text>
-                </View>
-                <DeleteButton
-                  text={I18n.getLang('auto_scan_system_cancel')}
-                  style={{ paddingHorizontal: cx(15), width: 'auto', height: cx(40) }}
-                  textStyle={{ fontSize: cx(14) }}
-                  onPress={() => {
-                    getProgressByDp(runningTimer()[0].dpId).endTimer()
-                  }}
-                />
-              </View>
-          )}
-        </View>
-      </ScrollView>
-    </Page>
-  )
-}
-
-export default withTheme(TimerPage)
+import React, { useCallback, useEffect } from "react";
+import { View, Text, ScrollView, TouchableOpacity, StyleSheet, FlatList, Image } from "react-native"
+import { useNavigation } from '@react-navigation/native'
+import { RouteProp, useRoute } from '@react-navigation/core'
+import { useReactive, useUpdateEffect } from "ahooks";
+import res from '@ledvance/base/src/res'
+import Card from '@ledvance/base/src/components/Card'
+import Spacer from '@ledvance/base/src/components/Spacer'
+import I18n from '@ledvance/base/src/i18n'
+import Page from "@ledvance/base/src/components/Page";
+import LdvPickerView from '@ledvance/base/src/components/ldvPickerView'
+import { Utils, Progress } from 'tuya-panel-kit'
+import { useDeviceInfo } from "@ledvance/base/src/models/modules/NativePropsSlice";
+import { useProgress } from "./TimerPageAction";
+import { cloneDeep } from "lodash";
+import dayjs from "dayjs";
+import DeleteButton from "@ledvance/base/src/components/DeleteButton";
+
+const { withTheme } = Utils.ThemeUtils
+
+export type dpItem = {
+  label: string
+  value: string
+  dpId: string
+  enableDp: string
+  cloudKey: any
+  stringOn: any
+  stringOff: any
+}
+
+type TimerPageRouteParams = {
+  params: { dps: dpItem[] }
+}
+
+type Props = {
+  route: RouteProp<TimerPageRouteParams, 'params'>
+}
+
+const { convertX: cx } = Utils.RatioUtils
+const TimerPage = (props: {theme?: any}) => {
+  const devInfo = useDeviceInfo()
+  const navigation = useNavigation()
+  const { dps } = useRoute<Props['route']>().params
+  const progress = useProgress(dps)
+  const state = useReactive({
+    hour: '00',
+    minute: '01',
+    skillList: [] as dpItem[],
+    selectedSkill: [] as dpItem[]
+  })
+
+
+  const hasNotRunningTimer = () => {
+    return !!progress.find(p => p.progressHook.countdown === 0)
+  }
+
+  const runningTimer = () => {
+    return progress.filter(p => p.progressHook.countdown > 0)
+  }
+
+  const getProgressByDp = useCallback((dpId: string) => {
+    return progress.find(p => p.dpId === dpId)!.progressHook
+  }, [progress])
+
+  useEffect(() => {
+    if (progress.length > 1) {
+      state.skillList = progress.filter(p => p.progressHook.countdown === 0)
+    } else {
+      state.skillList = []
+      state.selectedSkill = cloneDeep(dps)
+    }
+  }, [runningTimer().length])
+
+  useUpdateEffect(() => {
+    if (state.hour === '00' && state.minute === '00') {
+      state.minute = '01'
+    }
+  }, [state.hour, state.minute])
+
+
+  const handelTimer = (timer: dpItem, isAdd: boolean) => {
+    if (isAdd) {
+      state.selectedSkill = [...state.selectedSkill, timer]
+      state.skillList = state.skillList.filter(item => item.dpId !== timer.dpId)
+    } else {
+      state.selectedSkill = state.selectedSkill.filter(item => item.dpId !== timer.dpId)
+      state.skillList = [...state.skillList, timer]
+    }
+  }
+
+  const onStartPress = async () => {
+    let mCountdown = 0
+    const hour = parseInt(state.hour)
+    const minute = parseInt(state.minute)
+    if (hour > 0) {
+      mCountdown += hour * 60 * 60
+    }
+    if (minute > 0) {
+      mCountdown += minute * 60
+    }
+    if (!state.selectedSkill.length || mCountdown === 0) return
+    for (let skill of state.selectedSkill) {
+      const time = dayjs()
+        .add(Number(hour), 'h')
+        .add(Number(minute), 'm')
+        .format('YYYY-MM-DD HH:mm:ss');
+      await getProgressByDp(skill.dpId).startTimer(mCountdown, time)
+    }
+    state.selectedSkill = []
+  }
+
+  const getActiveTimeString = (c: number) => {
+    const h = parseInt(String(c / 3600))
+    const m = Number(((c - 3600 * h) / 60).toFixed(0))
+    if (h > 0) {
+      if (m === 0) {
+        return h + ' h'
+      } else {
+        return h + ' h ' + m + ' min'
+      }
+    } else {
+      return m + ' min'
+    }
+  }
+
+  const getSingleLightEndTimeString = (mCountdown: number) => {
+    const date = new Date()
+    const now = date.getTime()
+    const after = new Date(now + mCountdown * 1000)
+    const timeString = `${after.getHours()}:${after.getMinutes().toString().padStart(2, '0')}`
+    return timeString
+  }
+
+  const showActiveView = () => {
+    return progress.length > 1
+  }
+
+  const renderItem = ({ item }) => {
+    return (
+      <View style={{
+        flexDirection: 'row',
+        justifyContent: 'space-between',
+        alignItems: 'center',
+        backgroundColor: props.theme.global.background,
+        marginBottom: cx(8)
+      }}>
+        <Text
+          style={{
+            color: props.theme.global.fontColor,
+            fontSize: 14,
+            marginHorizontal: cx(6),
+            marginVertical: cx(9),
+          }}
+        >
+          {item.label}
+        </Text>
+        {progress.length > 1 && <TouchableOpacity onPress={() => handelTimer(item, false)}>
+            <Image style={{ width: cx(16), height: cx(16), marginRight: cx(5) }} source={res.ic_arrows_nav_clear} />
+        </TouchableOpacity>}
+      </View>
+    );
+  };
+
+  const styles = StyleSheet.create({
+    content: {
+      marginHorizontal: cx(24)
+    },
+    itemTitle: {
+      color: props.theme.global.fontColor,
+      fontSize: cx(16),
+      fontWeight: 'bold',
+      fontFamily: 'helvetica_neue_lt_std_bd',
+      marginTop: cx(30),
+      marginBottom: cx(10)
+    },
+    skillListItem: {
+      flexDirection: 'row',
+      justifyContent: 'space-between',
+      height: cx(30),
+      alignItems: 'center',
+      marginVertical: cx(5)
+    },
+    activeTimer: {
+      marginHorizontal: cx(20),
+      marginVertical: cx(20),
+    },
+    activeTimerTitleBox: {
+      flexDirection: 'row',
+      justifyContent: 'space-between',
+      alignItems: 'center',
+      marginBottom: cx(20),
+    },
+    activeTimerTitle: {
+      fontSize: cx(20),
+      color: props.theme.global.fontColor,
+    },
+    activeTimerCancelBtn: {
+      paddingHorizontal: cx(8),
+      paddingVertical: cx(5),
+      alignItems: 'center',
+      justifyContent: 'center',
+      backgroundColor: '#666',
+      borderRadius: cx(5)
+    },
+    activeTimerTimeBox: {
+      flexDirection: 'row',
+      alignItems: 'center',
+      marginBottom: cx(20),
+    },
+  })
+
+  return (
+    <Page
+      backText={devInfo.name}
+      headlineText={I18n.getLang('timer_nightplug_headline_text')}
+      onBackClick={navigation.goBack}
+    >
+      <ScrollView
+        nestedScrollEnabled={true}
+        showsHorizontalScrollIndicator={false}
+        showsVerticalScrollIndicator={false}
+      >
+        {/* picker */}
+        <View style={styles.content}>
+          {hasNotRunningTimer() && <>
+              <LdvPickerView
+                  hour={state.hour}
+                  minute={state.minute}
+                  setHour={h => state.hour = h}
+                  setMinute={m => state.minute = m}
+                  unit={['h', 'min']}
+              />
+            {/* Apply for */}
+              <View>
+                  <Text style={styles.itemTitle}>{I18n.getLang('timeschedule_add_schedule_subheadline_text')}</Text>
+                  <View
+                      style={{
+                        backgroundColor: props.theme.card.board,
+                        borderRadius: 4,
+                        minHeight: cx(50),
+                        flex: 1,
+                        justifyContent: 'center',
+                      }}
+                  >
+                    {!state.selectedSkill.length ? <Text style={{ marginLeft: cx(10) }}>{I18n.getLang('timer_ceiling_fan_selectionfield_no_components_text')}</Text> :
+                      <View
+                        style={{
+                          marginHorizontal: cx(8),
+                          marginTop: cx(8),
+                          borderRadius: 4,
+                        }}
+                      >
+                        <FlatList
+                          data={state.selectedSkill}
+                          renderItem={item => renderItem(item)}
+                          keyExtractor={(item: dpItem) => item.dpId}
+                        />
+                      </View>}
+                  </View>
+                {state.skillList.map((skill: dpItem) => {
+                  return (
+                    <TouchableOpacity style={styles.skillListItem} key={skill.dpId} onPress={() => handelTimer(skill, true)}>
+                      <Text style={{ color: props.theme.global.fontColor }}>{skill.label}</Text>
+                      <Image style={{ width: cx(16), height: cx(16) }} source={res.device_panel_timer_add} />
+                    </TouchableOpacity>
+                  )
+                })}
+              </View>
+
+            {/* Start */}
+              <Spacer />
+              <DeleteButton
+                  text={I18n.getLang('timer_sockets_button_text')}
+                  onPress={onStartPress}
+                  textStyle={{ fontSize: cx(14) }}
+                  style={{ backgroundColor: !state.selectedSkill.length ? props.theme.button.disabled : props.theme.button.active }}
+              />
+              <Spacer />
+          </>}
+
+          {/* Active timer */}
+          {!!runningTimer().length && (
+            showActiveView() ? <>
+                <Text style={styles.itemTitle}>{I18n.formatValue('timer_nightplug_active_timer_subheadline2_text', runningTimer().length.toString())}</Text>
+                {runningTimer().map(timer => (
+                  <View key={timer.dpId}>
+                    <Card containerStyle={styles.activeTimer}>
+                      <View style={styles.activeTimerTitleBox}>
+                        <Text style={styles.activeTimerTitle}>{timer.label}</Text>
+                        <TouchableOpacity
+                          onPress={() => {
+                            getProgressByDp(timer.dpId).endTimer()
+                          }}
+                          style={styles.activeTimerCancelBtn}>
+                          <Text style={{ color: '#fff', fontSize: cx(12) }}>{I18n.getLang('auto_scan_system_cancel')}</Text>
+                        </TouchableOpacity>
+                      </View>
+                      <View style={styles.activeTimerTimeBox}>
+                        <Progress.Double
+                          style={{
+                            width: 35,
+                            height: 35,
+                            // backgroundColor: 'red',
+                            justifyContent: 'center',
+                            alignItems: 'center',
+                          }}
+                          disabled={true}
+                          minValue={0}
+                          maxValue={getProgressByDp(timer.dpId).progressNumber}
+                          startDegree={270}
+                          andDegree={360}
+                          scaleHeight={2}
+                          thumbStrokeWidth={2}
+                          thumbRadius={0}
+                        />
+                        <Text style={{ marginLeft: cx(20), fontSize: cx(22) }}>{getActiveTimeString(timer.progressHook.countdown)}</Text>
+                      </View>
+                      <Text>{I18n.formatValue(timer.enable ? timer.stringOff : timer.stringOn, getSingleLightEndTimeString(timer.progressHook.countdown))}</Text>
+                    </Card>
+                    <Spacer height={cx(40)} />
+                  </View>
+                ))}
+              </> :
+              <View
+                style={{
+                  flexDirection: 'column',
+                  alignItems: 'center',
+                  marginVertical: cx(30),
+                }}
+              >
+                <Progress.Double
+                  style={{
+                    width: 172,
+                    height: 172,
+                    justifyContent: 'center',
+                    alignItems: 'center',
+                  }}
+                  minValue={0}
+                  maxValue={getProgressByDp(runningTimer()[0].dpId).progressNumber}
+                  startDegree={270}
+                  andDegree={360}
+                  disabled={true}
+                  foreColor={'#f60'}
+                  scaleHeight={14}
+                  minThumbFill={'#f60'}
+                  minThumbStroke={'#f60'}
+                  thumbStrokeWidth={0}
+                  thumbRadius={14 / 2 - 0.5}
+                  thumbFill={'#f60'}
+                  thumbStroke={'#f60'}
+                  renderCenterView={
+                    <View style={{ position: 'absolute' }}>
+                      <Text style={{ fontSize: cx(22), fontWeight: 'bold', color: props.theme.global.secondFontColor }}>
+                        {getActiveTimeString(runningTimer()[0].progressHook.countdown)}
+                      </Text>
+                    </View>
+                  }
+                />
+                <View style={{ marginVertical: cx(30) }}>
+                  <Text>
+                    {I18n.formatValue(
+                      runningTimer()[0].enable ?
+                        runningTimer()[0].stringOff :
+                        runningTimer()[0].stringOn, getSingleLightEndTimeString(runningTimer()[0].progressHook.countdown)
+                    )}
+                  </Text>
+                </View>
+                <DeleteButton
+                  text={I18n.getLang('auto_scan_system_cancel')}
+                  style={{ paddingHorizontal: cx(15), width: 'auto', height: cx(40) }}
+                  textStyle={{ fontSize: cx(14) }}
+                  onPress={() => {
+                    getProgressByDp(runningTimer()[0].dpId).endTimer()
+                  }}
+                />
+              </View>
+          )}
+        </View>
+      </ScrollView>
+    </Page>
+  )
+}
+
+export default withTheme(TimerPage)