@ledvance/ui-biz-bundle 1.1.67 → 1.1.69

package/src/modules/fixedTime/FixedTimeDetailPage.tsx

@@ -1,373 +1,373 @@
-import React, { useCallback, useEffect, useMemo } from "react";
-import { ScrollView, StyleSheet, View, Text, Image, TouchableOpacity } from "react-native";
-import { useReactive, useUpdateEffect } from "ahooks";
-import Page from "@ledvance/base/src/components/Page";
-import { useNavigation, useRoute } from '@react-navigation/core'
-import I18n from "@ledvance/base/src/i18n";
-import res from "@ledvance/base/src/res";
-import LdvTopName from "@ledvance/base/src/components/ldvTopName";
-import TextField from "@ledvance/base/src/components/TextField";
-import LdvWeekView from '@ledvance/base/src/components/weekSelect'
-import { TimerPicker, Utils } from "tuya-panel-kit";
-import DeleteButton from "@ledvance/base/src/components/DeleteButton";
-import Spacer from "@ledvance/base/src/components/Spacer";
-import { isTimeSpanValid, loopText, showDialog } from "@ledvance/base/src/utils/common";
-import LdvPickerView from "@ledvance/base/src/components/ldvPickerView";
-import LampAdjustView from '@ledvance/base/src/components/LampAdjustView'
-import Card from "@ledvance/base/src/components/Card";
-import LdvSwitch from "@ledvance/base/src/components/ldvSwitch";
-import { CycleTimerItem } from "./FixedTimeActions";
-import { cloneDeep, isEqual } from "lodash";
-import Summary from "../randomTime/Summary";
-import { getSystemTimeFormat } from "@ledvance/base/src/api/native";
-import { FixedTimePageParams } from "./FixedTimePage";
-
-const { parseTimer } = Utils.TimeUtils
-const { convertX: cx } = Utils.RatioUtils;
-const { toFixedString } = Utils.NumberUtils;
-
-export interface FixedTimeDetailPageParams extends FixedTimePageParams{
-  mode: 'add' | 'edit'
-  scheduleItem: CycleTimerItem
-  onPost: (mode: 'add' | 'edit' | 'del', fixedTime: CycleTimerItem, goBack?: boolean) => Promise<void>
-}
-
-const FixedTimeDetailPage = () => {
-  const navigation = useNavigation()
-  const params = useRoute().params as FixedTimeDetailPageParams
-  const state = useReactive({
-    loading: false,
-    isColorMode: false,
-    is24Hour: true,
-    selectedSkill: params.applyDps.length === 1 ? params.applyDps : [],
-    skillList: params.applyDps.length === 1 ? [] : params.applyDps,
-    fixedTime: params.mode === 'add' ? newFixedTime() : cloneDeep(params.scheduleItem)
-  })
-
-  useEffect(() => {
-    const { brightness, temperature, hue, saturation, value } = state.fixedTime.color
-    const isColor = brightness === 0 && temperature === 0 && (hue !== 0 || saturation !== 0 || value !== 0)
-    state.isColorMode = isColor
-  }, [])
-
-  useEffect(() =>{
-    const getSystemTime = async () =>{
-      state.is24Hour = await getSystemTimeFormat() === 24
-    }
-    getSystemTime().then()
-  }, [])
-
-  useUpdateEffect(() => {
-    if (state.fixedTime.openTime === 0) state.fixedTime.openTime = 1
-    if (state.fixedTime.closeTime === 0) state.fixedTime.closeTime = 1
-  }, [state.fixedTime.openTime, state.fixedTime.closeTime])
-
-  const showClearIcon = useMemo(() => (
-    false
-  ), [state.skillList])
-
-
-
-  const maintenanceTime = () => {
-    const { startTime, endTime, closeTime, openTime } = state.fixedTime
-    const powered = openTime + closeTime
-    const compute = isTimeSpanValid({
-      startTime: [Math.trunc(startTime / 60), startTime % 60],
-      endTime: [Math.trunc(endTime / 60), endTime % 60]
-    })
-    return compute >= powered
-  }
-
-  const showIcon = useCallback(() => {
-    return state.fixedTime.name?.length > 0 && state.fixedTime?.name.length <= 32 && maintenanceTime()
-  }, [state.fixedTime.name, maintenanceTime()])
-
-  const deleteDialog = () => {
-    return showDialog({
-      method: 'confirm',
-      title: I18n.getLang('cancel_dialog_delete_item_fixedtimecycle_titel'),
-      subTitle: I18n.getLang('cancel_dialog_delete_item_fixedtimecycle_description'),
-      onConfirm: async (_, { close }) => {
-        close()
-        await params.onPost('del', state.fixedTime, true)
-      }
-    })
-  }
-
-  const showBackDialog = useCallback(() => {
-    if (params.mode === 'add') return false
-    return !(state.fixedTime.name === params.scheduleItem.name &&
-      state.fixedTime.startTime === params.scheduleItem.startTime &&
-      state.fixedTime.endTime === params.scheduleItem.endTime &&
-      state.fixedTime.openTime === params.scheduleItem.openTime &&
-      state.fixedTime.closeTime === params.scheduleItem.closeTime &&
-      isEqual(state.fixedTime.color, params.scheduleItem.color)) &&
-      isEqual(state.fixedTime.weeks, params.scheduleItem.weeks)
-  }, [state.fixedTime, params.scheduleItem])
-
-
-  return (
-    <Page
-      backText={I18n.getLang('fixedTimeCycle_socket_headline')}
-      onBackClick={!showBackDialog() ? navigation.goBack : undefined}
-      rightButtonIcon={showIcon() ? res.ic_check : res.ic_uncheck}
-      rightButtonDisabled={state.loading}
-      loading={state.loading}
-      showBackDialog={showBackDialog()}
-      backDialogTitle={I18n.getLang('cancel_dialog_leave_unsaved_titel')}
-      backDialogContent={I18n.getLang('cancel_dialog_leave_unsaved_fixedtimecycle_note')}
-      rightButtonIconClick={async () => {
-        if (!showIcon()) return
-        state.loading = true
-        await params.onPost(params.mode, {
-          ...state.fixedTime,
-          power: true,
-          color: {
-            hue: state.isColorMode ? state.fixedTime.color.hue : 0,
-            saturation: state.isColorMode ? state.fixedTime.color.saturation : 0,
-            value: state.isColorMode ? state.fixedTime.color.value : 0,
-            temperature: state.isColorMode ? 0 : state.fixedTime.color.temperature,
-            brightness: state.isColorMode ? 0 : state.fixedTime.color.brightness
-          }
-        }, true)
-      }}
-    >
-      <ScrollView nestedScrollEnabled={true}>
-        <LdvTopName title={I18n.getLang(params.mode === 'add' ? 'add_fixedtimecycle_headline_text' : 'edit_fixedtimecycle_headline_text')} />
-        <TextField
-          style={styles.cardContainer}
-          value={state.fixedTime.name}
-          showError={state.fixedTime.name?.length > 32}
-          maxLength={33}
-          errorText={I18n.getLang('add_new_dynamic_mood_alert_text')}
-          placeholder={I18n.getLang('add_new_trigger_time_inputfield_value_text')}
-          onChangeText={(t: string) => {
-            state.fixedTime.name = t;
-          }}
-        />
-        {/* pick */}
-        <TimerPicker
-          itemTextColor='#aeadb5'
-          style={{ paddingVertical: cx(0), marginVertical: cx(0) }}
-          is12Hours={!state.is24Hour}
-          startTime={state.fixedTime.startTime}
-          endTime={state.fixedTime.endTime}
-          onTimerChange={(startTime, endTime) => {
-            state.fixedTime.startTime = startTime
-            state.fixedTime.endTime = endTime
-          }} />
-        <LdvWeekView
-          value={state.fixedTime.weeks}
-          style={styles.cardContainer}
-          onSelect={(index: number) => {
-            const rawIndex = index - 1
-            state.fixedTime.weeks[rawIndex] = state.fixedTime.weeks[rawIndex] === 1 ? 0 : 1
-          }} />
-        <Spacer />
-        <Text style={styles.cardContainer}>{loopText(state.fixedTime.weeks)}</Text>
-        <Spacer />
-        {/* Apply for */}
-        <View style={styles.cardContainer}>
-          <Text style={styles.itemTitle}>{I18n.getLang('timeschedule_add_schedule_subheadline_text')}</Text>
-          <Spacer height={cx(10)} />
-          <View style={styles.applyContent}>
-            {state.selectedSkill.length === 0 ?
-              <Text>{I18n.getLang('timer_ceiling_fan_selectionfield_no_components_text')}</Text> :
-              state.selectedSkill.map((skill: any) => (
-                <View style={[styles.applyItem, { marginBottom: cx(10), borderRadius: 4 }]} key={skill.label}>
-                  <Text style={{ color: '#000' }}>{skill.label}</Text>
-                  {showClearIcon && <TouchableOpacity
-                    onPress={() => { }}
-                    style={{ paddingHorizontal: cx(5) }}>
-                    <Image style={{ width: cx(16), height: cx(16) }} source={res.ic_arrows_nav_clear} />
-                  </TouchableOpacity>}
-                </View>
-              ))
-            }
-          </View>
-          {state.skillList.map((item: any) => {
-            return (
-              <TouchableOpacity style={styles.applyItem} key={item.label} onPress={() => { }}>
-                <Text style={{ color: '#000' }}>{item.label}</Text>
-                <Image style={{ width: cx(16), height: cx(16) }} source={res.device_panel_timer_add} />
-              </TouchableOpacity>
-            )
-          })}
-        </View>
-        <Spacer />
-        {/* Devices */}
-        <View style={styles.cardContainer}>
-          <Text style={styles.itemTitle}>{I18n.getLang('timeschedule_add_schedule_subheadline2_text')}</Text>
-          <Spacer height={cx(10)} />
-          <Card>
-            <LdvSwitch
-              title={I18n.getLang('light_sources_tile_tw_lighting_headline')}
-              color={'#fff'}
-              colorAlpha={1}
-              enable={true}
-              setEnable={() => { }}
-              showSwitch={false}
-            />
-            <LampAdjustView
-              isSupportColor={params.isSupportColor}
-              isSupportBrightness={params.isSupportBrightness}
-              isSupportTemperature={params.isSupportTemperature}
-              isColorMode={state.isColorMode}
-              reserveSV={true}
-              setIsColorMode={(v) => state.isColorMode = v}
-              h={state.fixedTime.color.hue}
-              s={state.fixedTime.color.saturation}
-              v={state.fixedTime.color.value}
-              colorTemp={state.fixedTime.color.temperature}
-              brightness={state.fixedTime.color.brightness}
-              onHSVChangeComplete={(h, s, v) => {
-                state.fixedTime.color = {
-                  ...state.fixedTime.color,
-                  hue: h,
-                  saturation: s,
-                  value: v
-                }
-              }}
-              onCCTChangeComplete={(v) => {
-                state.fixedTime.color = {
-                  ...state.fixedTime.color,
-                  temperature: v
-                }
-              }}
-              onBrightnessChangeComplete={(v) => {
-                state.fixedTime.color = {
-                  ...state.fixedTime.color,
-                  brightness: v
-                }
-              }}
-            />
-          </Card>
-          <Spacer />
-        </View>
-        {/* Settings */}
-        <View style={styles.cardContainer}>
-          <Text style={styles.itemTitle}>{I18n.getLang('timeschedule_add_schedule_subheadline4_text')}</Text>
-          <Spacer height={cx(10)} />
-          {!maintenanceTime() && <View style={{ flexDirection: 'row', alignItems: 'center' }}>
-            <Image style={{ width: cx(16), height: cx(16), tintColor: 'rgb(255,149,0)' }} source={res.ic_warning_amber} />
-            <Text style={{ fontSize: cx(12), color: 'rgb(255,149,0)' }}>{I18n.getLang('addTimeCycle_warning_text')}</Text>
-          </View>}
-          <View >
-            <Text style={{ color: '#000', marginVertical: cx(10) }}>{I18n.getLang('addTimeCycle_settings_sec_text')}</Text>
-            <LdvPickerView
-              hour={toFixedString(Math.trunc(state.fixedTime.openTime / 60), 2)}
-              minute={toFixedString(state.fixedTime.openTime % 60, 2)}
-              setHour={(h) => {
-                state.fixedTime.openTime = Number(h) * 60 + state.fixedTime.openTime % 60
-              }}
-              setMinute={(m) => {
-                state.fixedTime.openTime = Math.trunc(state.fixedTime.openTime / 60) * 60 + Number(m)
-              }}
-              unit={['h', 'min']}
-            />
-          </View>
-          <View>
-            <Text style={{ color: '#000', marginVertical: cx(10) }}>{I18n.getLang('addTimeCycle_settings_sec_text2')}</Text>
-            <LdvPickerView
-              hour={toFixedString(Math.trunc(state.fixedTime.closeTime / 60), 2)}
-              minute={toFixedString(state.fixedTime.closeTime % 60, 2)}
-              setHour={(h) => {
-                state.fixedTime.closeTime = Number(h) * 60 + state.fixedTime.closeTime % 60
-              }}
-              setMinute={(m) => {
-                state.fixedTime.closeTime = Math.trunc(state.fixedTime.closeTime / 60) * 60 + Number(m)
-              }}
-              unit={['h', 'min']}
-            />
-          </View>
-          <Spacer />
-        </View>
-        {/* summary */}
-        <Summary
-          frequency={loopText(state.fixedTime.weeks)}
-          time={`${parseTimer(state.fixedTime.startTime * 60)} - ${parseTimer(state.fixedTime.endTime * 60)}`}
-          actions={(
-            <View style={{ flexDirection: 'column' }}>
-              <Text style={{ color: '#000' }}>{I18n.formatValue('feature_summary_action_txt_4', `${Math.trunc(state.fixedTime.openTime / 60)}`, `${state.fixedTime.openTime % 60}`)}</Text>
-              <View style={styles.summaryTag}>
-                <Text style={{ color: '#000' }}>{I18n.getLang('timeschedule_add_schedule_nightlight_plug_selectionfield_text2')}</Text>
-              </View>
-              <Spacer height={cx(5)} />
-              <Text style={{ color: '#000' }}>{I18n.formatValue('feature_summary_action_txt_6', `${Math.trunc(state.fixedTime.closeTime / 60)}`, `${state.fixedTime.closeTime % 60}`)}</Text>
-              <View style={styles.summaryTag}>
-                <Text style={{ color: '#000' }}>{I18n.getLang('timeschedule_add_schedule_nightlight_plug_selectionfield_text2')}</Text>
-              </View>
-            </View>
-          )}
-        />
-        <Spacer />
-        {params.mode === 'edit' &&
-          <View style={{ marginHorizontal: cx(24) }}>
-            <DeleteButton
-              text={I18n.getLang('edit_fixedtimecycle_bttn_text')}
-              onPress={deleteDialog} />
-          </View>
-        }
-        <Spacer />
-      </ScrollView>
-    </Page>
-  )
-}
-
-const newFixedTime = () => {
-  return {
-    name: '',
-    power: true,
-    weeks: [0, 0, 0, 0, 0, 0, 0],
-    startTime: 480,
-    endTime: 840,
-    closeTime: 1,
-    openTime: 1,
-    index: '',
-    channel: 1,
-    color: {
-      hue: 0,
-      saturation: 0,
-      value: 100,
-      brightness: 100,
-      temperature: 0,
-    }
-  }
-}
-
-const styles = StyleSheet.create({
-  cardContainer: {
-    marginHorizontal: cx(24)
-  },
-  itemTitle: {
-    color: '#000',
-    fontSize: cx(16),
-    fontWeight: 'bold',
-    fontFamily: 'helvetica_neue_lt_std_bd',
-  },
-  applyContent: {
-    backgroundColor: '#f6f6f6',
-    borderRadius: 4,
-    minHeight: cx(55),
-    flex: 1,
-    justifyContent: 'center',
-    paddingHorizontal: cx(10),
-    paddingTop: cx(10)
-  },
-  applyItem: {
-    paddingLeft: cx(5),
-    flexDirection: 'row',
-    justifyContent: 'space-between',
-    alignItems: 'center',
-    backgroundColor: '#fff',
-    height: cx(35),
-  },
-  summaryTag: {
-    backgroundColor: '#cbcbcb',
-    borderRadius: cx(16),
-    paddingHorizontal: cx(12),
-    alignSelf: 'flex-start'
-  }
-})
-
+import React, { useCallback, useEffect, useMemo } from "react";
+import { ScrollView, StyleSheet, View, Text, Image, TouchableOpacity } from "react-native";
+import { useReactive, useUpdateEffect } from "ahooks";
+import Page from "@ledvance/base/src/components/Page";
+import { useNavigation, useRoute } from '@react-navigation/core'
+import I18n from "@ledvance/base/src/i18n";
+import res from "@ledvance/base/src/res";
+import LdvTopName from "@ledvance/base/src/components/ldvTopName";
+import TextField from "@ledvance/base/src/components/TextField";
+import LdvWeekView from '@ledvance/base/src/components/weekSelect'
+import { TimerPicker, Utils } from "tuya-panel-kit";
+import DeleteButton from "@ledvance/base/src/components/DeleteButton";
+import Spacer from "@ledvance/base/src/components/Spacer";
+import { isTimeSpanValid, loopText, showDialog } from "@ledvance/base/src/utils/common";
+import LdvPickerView from "@ledvance/base/src/components/ldvPickerView";
+import LampAdjustView from '@ledvance/base/src/components/LampAdjustView'
+import Card from "@ledvance/base/src/components/Card";
+import LdvSwitch from "@ledvance/base/src/components/ldvSwitch";
+import { CycleTimerItem } from "./FixedTimeActions";
+import { cloneDeep, isEqual } from "lodash";
+import Summary from "../randomTime/Summary";
+import { getSystemTimeFormat } from "@ledvance/base/src/api/native";
+import { FixedTimePageParams } from "./FixedTimePage";
+
+const { parseTimer } = Utils.TimeUtils
+const { convertX: cx } = Utils.RatioUtils;
+const { toFixedString } = Utils.NumberUtils;
+
+export interface FixedTimeDetailPageParams extends FixedTimePageParams{
+  mode: 'add' | 'edit'
+  scheduleItem: CycleTimerItem
+  onPost: (mode: 'add' | 'edit' | 'del', fixedTime: CycleTimerItem, goBack?: boolean) => Promise<void>
+}
+
+const FixedTimeDetailPage = () => {
+  const navigation = useNavigation()
+  const params = useRoute().params as FixedTimeDetailPageParams
+  const state = useReactive({
+    loading: false,
+    isColorMode: false,
+    is24Hour: true,
+    selectedSkill: params.applyDps.length === 1 ? params.applyDps : [],
+    skillList: params.applyDps.length === 1 ? [] : params.applyDps,
+    fixedTime: params.mode === 'add' ? newFixedTime() : cloneDeep(params.scheduleItem)
+  })
+
+  useEffect(() => {
+    const { brightness, temperature, hue, saturation, value } = state.fixedTime.color
+    const isColor = brightness === 0 && temperature === 0 && (hue !== 0 || saturation !== 0 || value !== 0)
+    state.isColorMode = isColor
+  }, [])
+
+  useEffect(() =>{
+    const getSystemTime = async () =>{
+      state.is24Hour = await getSystemTimeFormat() === 24
+    }
+    getSystemTime().then()
+  }, [])
+
+  useUpdateEffect(() => {
+    if (state.fixedTime.openTime === 0) state.fixedTime.openTime = 1
+    if (state.fixedTime.closeTime === 0) state.fixedTime.closeTime = 1
+  }, [state.fixedTime.openTime, state.fixedTime.closeTime])
+
+  const showClearIcon = useMemo(() => (
+    false
+  ), [state.skillList])
+
+
+
+  const maintenanceTime = () => {
+    const { startTime, endTime, closeTime, openTime } = state.fixedTime
+    const powered = openTime + closeTime
+    const compute = isTimeSpanValid({
+      startTime: [Math.trunc(startTime / 60), startTime % 60],
+      endTime: [Math.trunc(endTime / 60), endTime % 60]
+    })
+    return compute >= powered
+  }
+
+  const showIcon = useCallback(() => {
+    return state.fixedTime.name?.length > 0 && state.fixedTime?.name.length <= 32 && maintenanceTime()
+  }, [state.fixedTime.name, maintenanceTime()])
+
+  const deleteDialog = () => {
+    return showDialog({
+      method: 'confirm',
+      title: I18n.getLang('cancel_dialog_delete_item_fixedtimecycle_titel'),
+      subTitle: I18n.getLang('cancel_dialog_delete_item_fixedtimecycle_description'),
+      onConfirm: async (_, { close }) => {
+        close()
+        await params.onPost('del', state.fixedTime, true)
+      }
+    })
+  }
+
+  const showBackDialog = useCallback(() => {
+    if (params.mode === 'add') return false
+    return !(state.fixedTime.name === params.scheduleItem.name &&
+      state.fixedTime.startTime === params.scheduleItem.startTime &&
+      state.fixedTime.endTime === params.scheduleItem.endTime &&
+      state.fixedTime.openTime === params.scheduleItem.openTime &&
+      state.fixedTime.closeTime === params.scheduleItem.closeTime &&
+      isEqual(state.fixedTime.color, params.scheduleItem.color)) &&
+      isEqual(state.fixedTime.weeks, params.scheduleItem.weeks)
+  }, [state.fixedTime, params.scheduleItem])
+
+
+  return (
+    <Page
+      backText={I18n.getLang('fixedTimeCycle_socket_headline')}
+      onBackClick={!showBackDialog() ? navigation.goBack : undefined}
+      rightButtonIcon={showIcon() ? res.ic_check : res.ic_uncheck}
+      rightButtonDisabled={state.loading}
+      loading={state.loading}
+      showBackDialog={showBackDialog()}
+      backDialogTitle={I18n.getLang('cancel_dialog_leave_unsaved_titel')}
+      backDialogContent={I18n.getLang('cancel_dialog_leave_unsaved_fixedtimecycle_note')}
+      rightButtonIconClick={async () => {
+        if (!showIcon()) return
+        state.loading = true
+        await params.onPost(params.mode, {
+          ...state.fixedTime,
+          power: true,
+          color: {
+            hue: state.isColorMode ? state.fixedTime.color.hue : 0,
+            saturation: state.isColorMode ? state.fixedTime.color.saturation : 0,
+            value: state.isColorMode ? state.fixedTime.color.value : 0,
+            temperature: state.isColorMode ? 0 : state.fixedTime.color.temperature,
+            brightness: state.isColorMode ? 0 : state.fixedTime.color.brightness
+          }
+        }, true)
+      }}
+    >
+      <ScrollView nestedScrollEnabled={true}>
+        <LdvTopName title={I18n.getLang(params.mode === 'add' ? 'add_fixedtimecycle_headline_text' : 'edit_fixedtimecycle_headline_text')} />
+        <TextField
+          style={styles.cardContainer}
+          value={state.fixedTime.name}
+          showError={state.fixedTime.name?.length > 32}
+          maxLength={33}
+          errorText={I18n.getLang('add_new_dynamic_mood_alert_text')}
+          placeholder={I18n.getLang('add_new_trigger_time_inputfield_value_text')}
+          onChangeText={(t: string) => {
+            state.fixedTime.name = t;
+          }}
+        />
+        {/* pick */}
+        <TimerPicker
+          itemTextColor='#aeadb5'
+          style={{ paddingVertical: cx(0), marginVertical: cx(0) }}
+          is12Hours={!state.is24Hour}
+          startTime={state.fixedTime.startTime}
+          endTime={state.fixedTime.endTime}
+          onTimerChange={(startTime, endTime) => {
+            state.fixedTime.startTime = startTime
+            state.fixedTime.endTime = endTime
+          }} />
+        <LdvWeekView
+          value={state.fixedTime.weeks}
+          style={styles.cardContainer}
+          onSelect={(index: number) => {
+            const rawIndex = index - 1
+            state.fixedTime.weeks[rawIndex] = state.fixedTime.weeks[rawIndex] === 1 ? 0 : 1
+          }} />
+        <Spacer />
+        <Text style={styles.cardContainer}>{loopText(state.fixedTime.weeks)}</Text>
+        <Spacer />
+        {/* Apply for */}
+        <View style={styles.cardContainer}>
+          <Text style={styles.itemTitle}>{I18n.getLang('timeschedule_add_schedule_subheadline_text')}</Text>
+          <Spacer height={cx(10)} />
+          <View style={styles.applyContent}>
+            {state.selectedSkill.length === 0 ?
+              <Text>{I18n.getLang('timer_ceiling_fan_selectionfield_no_components_text')}</Text> :
+              state.selectedSkill.map((skill: any) => (
+                <View style={[styles.applyItem, { marginBottom: cx(10), borderRadius: 4 }]} key={skill.label}>
+                  <Text style={{ color: '#000' }}>{skill.label}</Text>
+                  {showClearIcon && <TouchableOpacity
+                    onPress={() => { }}
+                    style={{ paddingHorizontal: cx(5) }}>
+                    <Image style={{ width: cx(16), height: cx(16) }} source={res.ic_arrows_nav_clear} />
+                  </TouchableOpacity>}
+                </View>
+              ))
+            }
+          </View>
+          {state.skillList.map((item: any) => {
+            return (
+              <TouchableOpacity style={styles.applyItem} key={item.label} onPress={() => { }}>
+                <Text style={{ color: '#000' }}>{item.label}</Text>
+                <Image style={{ width: cx(16), height: cx(16) }} source={res.device_panel_timer_add} />
+              </TouchableOpacity>
+            )
+          })}
+        </View>
+        <Spacer />
+        {/* Devices */}
+        <View style={styles.cardContainer}>
+          <Text style={styles.itemTitle}>{I18n.getLang('timeschedule_add_schedule_subheadline2_text')}</Text>
+          <Spacer height={cx(10)} />
+          <Card>
+            <LdvSwitch
+              title={I18n.getLang('light_sources_tile_tw_lighting_headline')}
+              color={'#fff'}
+              colorAlpha={1}
+              enable={true}
+              setEnable={() => { }}
+              showSwitch={false}
+            />
+            <LampAdjustView
+              isSupportColor={params.isSupportColor}
+              isSupportBrightness={params.isSupportBrightness}
+              isSupportTemperature={params.isSupportTemperature}
+              isColorMode={state.isColorMode}
+              reserveSV={true}
+              setIsColorMode={(v) => state.isColorMode = v}
+              h={state.fixedTime.color.hue}
+              s={state.fixedTime.color.saturation}
+              v={state.fixedTime.color.value}
+              colorTemp={state.fixedTime.color.temperature}
+              brightness={state.fixedTime.color.brightness}
+              onHSVChangeComplete={(h, s, v) => {
+                state.fixedTime.color = {
+                  ...state.fixedTime.color,
+                  hue: h,
+                  saturation: s,
+                  value: v
+                }
+              }}
+              onCCTChangeComplete={(v) => {
+                state.fixedTime.color = {
+                  ...state.fixedTime.color,
+                  temperature: v
+                }
+              }}
+              onBrightnessChangeComplete={(v) => {
+                state.fixedTime.color = {
+                  ...state.fixedTime.color,
+                  brightness: v
+                }
+              }}
+            />
+          </Card>
+          <Spacer />
+        </View>
+        {/* Settings */}
+        <View style={styles.cardContainer}>
+          <Text style={styles.itemTitle}>{I18n.getLang('timeschedule_add_schedule_subheadline4_text')}</Text>
+          <Spacer height={cx(10)} />
+          {!maintenanceTime() && <View style={{ flexDirection: 'row', alignItems: 'center' }}>
+            <Image style={{ width: cx(16), height: cx(16), tintColor: 'rgb(255,149,0)' }} source={res.ic_warning_amber} />
+            <Text style={{ fontSize: cx(12), color: 'rgb(255,149,0)' }}>{I18n.getLang('addTimeCycle_warning_text')}</Text>
+          </View>}
+          <View >
+            <Text style={{ color: '#000', marginVertical: cx(10) }}>{I18n.getLang('addTimeCycle_settings_sec_text')}</Text>
+            <LdvPickerView
+              hour={toFixedString(Math.trunc(state.fixedTime.openTime / 60), 2)}
+              minute={toFixedString(state.fixedTime.openTime % 60, 2)}
+              setHour={(h) => {
+                state.fixedTime.openTime = Number(h) * 60 + state.fixedTime.openTime % 60
+              }}
+              setMinute={(m) => {
+                state.fixedTime.openTime = Math.trunc(state.fixedTime.openTime / 60) * 60 + Number(m)
+              }}
+              unit={['h', 'min']}
+            />
+          </View>
+          <View>
+            <Text style={{ color: '#000', marginVertical: cx(10) }}>{I18n.getLang('addTimeCycle_settings_sec_text2')}</Text>
+            <LdvPickerView
+              hour={toFixedString(Math.trunc(state.fixedTime.closeTime / 60), 2)}
+              minute={toFixedString(state.fixedTime.closeTime % 60, 2)}
+              setHour={(h) => {
+                state.fixedTime.closeTime = Number(h) * 60 + state.fixedTime.closeTime % 60
+              }}
+              setMinute={(m) => {
+                state.fixedTime.closeTime = Math.trunc(state.fixedTime.closeTime / 60) * 60 + Number(m)
+              }}
+              unit={['h', 'min']}
+            />
+          </View>
+          <Spacer />
+        </View>
+        {/* summary */}
+        <Summary
+          frequency={loopText(state.fixedTime.weeks)}
+          time={`${parseTimer(state.fixedTime.startTime * 60)} - ${parseTimer(state.fixedTime.endTime * 60)}`}
+          actions={(
+            <View style={{ flexDirection: 'column' }}>
+              <Text style={{ color: '#000' }}>{I18n.formatValue('feature_summary_action_txt_4', `${Math.trunc(state.fixedTime.openTime / 60)}`, `${state.fixedTime.openTime % 60}`)}</Text>
+              <View style={styles.summaryTag}>
+                <Text style={{ color: '#000' }}>{I18n.getLang('timeschedule_add_schedule_nightlight_plug_selectionfield_text2')}</Text>
+              </View>
+              <Spacer height={cx(5)} />
+              <Text style={{ color: '#000' }}>{I18n.formatValue('feature_summary_action_txt_6', `${Math.trunc(state.fixedTime.closeTime / 60)}`, `${state.fixedTime.closeTime % 60}`)}</Text>
+              <View style={styles.summaryTag}>
+                <Text style={{ color: '#000' }}>{I18n.getLang('timeschedule_add_schedule_nightlight_plug_selectionfield_text2')}</Text>
+              </View>
+            </View>
+          )}
+        />
+        <Spacer />
+        {params.mode === 'edit' &&
+          <View style={{ marginHorizontal: cx(24) }}>
+            <DeleteButton
+              text={I18n.getLang('edit_fixedtimecycle_bttn_text')}
+              onPress={deleteDialog} />
+          </View>
+        }
+        <Spacer />
+      </ScrollView>
+    </Page>
+  )
+}
+
+const newFixedTime = () => {
+  return {
+    name: '',
+    power: true,
+    weeks: [0, 0, 0, 0, 0, 0, 0],
+    startTime: 480,
+    endTime: 840,
+    closeTime: 1,
+    openTime: 1,
+    index: '',
+    channel: 1,
+    color: {
+      hue: 0,
+      saturation: 0,
+      value: 100,
+      brightness: 100,
+      temperature: 0,
+    }
+  }
+}
+
+const styles = StyleSheet.create({
+  cardContainer: {
+    marginHorizontal: cx(24)
+  },
+  itemTitle: {
+    color: '#000',
+    fontSize: cx(16),
+    fontWeight: 'bold',
+    fontFamily: 'helvetica_neue_lt_std_bd',
+  },
+  applyContent: {
+    backgroundColor: '#f6f6f6',
+    borderRadius: 4,
+    minHeight: cx(55),
+    flex: 1,
+    justifyContent: 'center',
+    paddingHorizontal: cx(10),
+    paddingTop: cx(10)
+  },
+  applyItem: {
+    paddingLeft: cx(5),
+    flexDirection: 'row',
+    justifyContent: 'space-between',
+    alignItems: 'center',
+    backgroundColor: '#fff',
+    height: cx(35),
+  },
+  summaryTag: {
+    backgroundColor: '#cbcbcb',
+    borderRadius: cx(16),
+    paddingHorizontal: cx(12),
+    alignSelf: 'flex-start'
+  }
+})
+
 export default FixedTimeDetailPage