@ledvance/ui-biz-bundle 1.1.68 → 1.1.69

package/src/newModules/sleepWakeUp/SleepWakeUpPage.tsx

@@ -1,456 +1,456 @@
-import React, { useCallback, useEffect, useMemo } from "react";
-import { StyleSheet, View, Text, Image, FlatList } from 'react-native'
-import Page from '@ledvance/base/src/components/Page'
-import Tag from '@ledvance/base/src/components/Tag'
-import Spacer from '@ledvance/base/src/components/Spacer'
-import { useNavigation } from '@react-navigation/native'
-import I18n from '@ledvance/base/src/i18n'
-import res from '@ledvance/base/src/res'
-import { useDeviceInfo, useSystemTimeFormate } from "@ledvance/base/src/models/modules/NativePropsSlice";
-import { useReactive, useUpdateEffect } from "ahooks";
-import CustomListDialog from "@ledvance/base/src/components/CustomListDialog";
-import { SwitchButton, Utils } from "tuya-panel-kit";
-import { convertMinutesTo12HourFormat, loopText } from "@ledvance/base/src/utils/common";
-import TextButton from "@ledvance/base/src/components/TextButton";
-import { ui_biz_routerKey } from '../../navigation/Routers'
-import { cloneDeep } from "lodash";
-import { sleepNode2Dp, useSleepMode, useWakeUp, wakeUpNode2Dp } from "./SleepWakeUpActions";
-import { SleepUIItem, WakeUpUIItem } from "./Interface";
-import Card from "@ledvance/base/src/components/Card";
-import { useParams } from "@ledvance/base/src/hooks/Hooks";
-import { ApplyForItem } from "../timeSchedule/Interface";
-import InfoText from "@ledvance/base/src/components/InfoText";
-
-const cx = Utils.RatioUtils.convertX
-
-export interface SleepWakeUpPageRouteParams {
-  isSupportColor?: boolean
-  isSupportTemperature?: boolean
-  isSupportBrightness?: boolean
-  isMixLight?: boolean
-  sleepModeDpCode: string
-  wakeUpDpCode: string
-  conflictDps: {
-    randomTimeDpCode?: string
-    fixedTimeDpCode?: string
-    biorhythmDpCode?: string
-  }
-  applyForList: ApplyForItem[];
-}
-
-const MAX_SCHEDULE = 4
-const SleepWakeUpPage = () => {
-  const deviceInfo = useDeviceInfo()
-  const navigation = useNavigation()
-  const is24HourClock = useSystemTimeFormate()
-  const params = useParams<SleepWakeUpPageRouteParams>()
-  const [wakeUpList, setWakeUpList, wakeupComplete] = useWakeUp(params.wakeUpDpCode)
-  const [sleepList, setSleepList, sleepComplete] = useSleepMode(params.sleepModeDpCode)
-  const state = useReactive({
-    showAddSchedulePopover: false,
-    sleepTagChecked: false,
-    wakeUpTagChecked: false,
-    sleepScheduleList: cloneDeep(sleepList),
-    wakeUpScheduleList: cloneDeep(wakeUpList),
-    filteredScheduleList: [] as any[],
-    flag: Symbol(),
-    loading: true
-  })
-
-  const isMaxNum = useMemo(() => {
-    return state.sleepScheduleList.length >= MAX_SCHEDULE && state.wakeUpScheduleList.length >= MAX_SCHEDULE
-  }, [state.sleepScheduleList, state.wakeUpScheduleList])
-
-  useUpdateEffect(() => {
-    console.log(sleepList, '< --- sleepList')
-    state.sleepScheduleList = cloneDeep(sleepList)
-  }, [JSON.stringify(sleepList)])
-
-  useUpdateEffect(() => {
-    console.log(wakeUpList, '< --- wakeUpList')
-    state.wakeUpScheduleList = cloneDeep(wakeUpList)
-  }, [JSON.stringify(wakeUpList)])
-
-  useUpdateEffect(() => {
-    state.loading = !wakeupComplete && !sleepComplete
-  }, [wakeupComplete, sleepComplete])
-
-  const onAddScheduleDialogItemClick = useCallback((isSleep: boolean, mode: 'add' | 'edit', scheduleItem?: any) => {
-    if (mode === 'add' && isSleep && state.sleepScheduleList.length === MAX_SCHEDULE) return
-    if (mode === 'add' && !isSleep && state.wakeUpScheduleList.length === MAX_SCHEDULE) return
-    navigateToEdit({
-      ...params,
-      mode,
-      isSleep,
-      scheduleItem: cloneDeep(scheduleItem),
-      modDeleteTimeSchedule
-    })
-    state.showAddSchedulePopover = false
-  }, [state.filteredScheduleList])
-
-  const modDeleteTimeSchedule = async (mode: 'add' | 'edit' | 'del', isSleep: boolean, sleepWakeUp: SleepUIItem | WakeUpUIItem) => {
-    let cloneSleepWakeUp: any[] = isSleep ? cloneDeep(state.sleepScheduleList) : cloneDeep(state.wakeUpScheduleList)
-    if (mode === 'add') {
-      cloneSleepWakeUp = [
-        ...cloneSleepWakeUp,
-        {
-          ...sleepWakeUp,
-          id: cloneSleepWakeUp.length,
-          nodeHex: isSleep ? sleepNode2Dp(sleepWakeUp) : wakeUpNode2Dp(sleepWakeUp as WakeUpUIItem)
-        }
-      ]
-    }
-    if (mode === 'del') {
-      cloneSleepWakeUp = cloneSleepWakeUp.filter(item => sleepWakeUp.id !== item.id)
-    }
-    if (mode === 'edit') {
-      cloneSleepWakeUp = cloneSleepWakeUp.map(item => {
-        if (item.id === sleepWakeUp.id) {
-          return sleepWakeUp
-        }
-        return item
-      })
-    }
-    const def = {
-      version: 0,
-      num: cloneSleepWakeUp.length,
-      nodes: cloneDeep(cloneSleepWakeUp)
-    }
-    const res = isSleep ? await setSleepList(def) : await setWakeUpList(def)
-    if (res.success) {
-      if (isSleep) {
-        state.sleepScheduleList = cloneDeep(cloneSleepWakeUp)
-      } else {
-        state.wakeUpScheduleList = cloneDeep(cloneSleepWakeUp)
-      }
-      return {
-        success: true
-      }
-    } else {
-      return {
-        success: false
-      }
-    }
-  }
-
-  useEffect(() => {
-    if (state.sleepTagChecked === state.wakeUpTagChecked) {
-      state.filteredScheduleList = [...state.sleepScheduleList, ...state.wakeUpScheduleList]
-    } else if (state.sleepTagChecked) {
-      state.filteredScheduleList = state.sleepScheduleList
-    } else {
-      state.filteredScheduleList = state.wakeUpScheduleList
-    }
-  }, [state.sleepTagChecked, state.wakeUpTagChecked, state.sleepScheduleList, state.wakeUpScheduleList])
-
-  const getTipText = useCallback(() => {
-    if (state.sleepScheduleList.length >= MAX_SCHEDULE && state.wakeUpScheduleList.length >= MAX_SCHEDULE) return "both"
-    if (state.sleepScheduleList.length >= MAX_SCHEDULE) return "sleep"
-    if (state.wakeUpScheduleList.length >= MAX_SCHEDULE) return "wakeup"
-  }, [state.sleepScheduleList, state.wakeUpScheduleList])
-
-  const hasScheduleList = useCallback(() => {
-    return !!(state.sleepScheduleList.length && state.wakeUpScheduleList.length)
-  }, [state.sleepScheduleList, state.wakeUpScheduleList])
-
-  const navigateToEdit = (params) => {
-    navigation.navigate(ui_biz_routerKey.ui_biz_sleep_wakeUp_edit_new, params)
-  }
-
-  const isSleepMax = useMemo(() => {
-    return state.sleepScheduleList.length >= MAX_SCHEDULE
-  }, [state.sleepScheduleList.length])
-
-  const isWakeUpMax = useMemo(() => {
-    return state.wakeUpScheduleList.length >= MAX_SCHEDULE
-  }, [state.wakeUpScheduleList.length])
-
-  const tipText = useMemo(() => {
-    const tip = getTipText()
-    if (tip === 'sleep') return I18n.getLang('sleepwakeschedule_warning_max_number_sleep_text')
-    if (tip === 'wakeup') return I18n.getLang('sleepwakeschedule_warning_max_number_wakeup_text')
-    if (tip === 'both') return I18n.getLang('sleepwakeschedule_warning_max_number_both_text')
-    return ''
-  }, [getTipText()])
-
-  return (
-    <>
-      <Page
-        backText={deviceInfo.name}
-        onBackClick={navigation.goBack}
-        headlineText={I18n.getLang('add_sleepschedule_one_source_system_back_text')}
-        headlineIcon={isMaxNum ? undefined : res.device_panel_schedule_add}
-        onHeadlineIconClick={() => {
-          state.showAddSchedulePopover = !state.showAddSchedulePopover
-        }}
-        loading={state.loading}
-      >
-        <View style={{ marginHorizontal: cx(24) }}>
-          <Text style={{ color: '#000', fontSize: cx(12) }}>
-            {I18n.getLang('timeschedule_overview_description_text')}
-          </Text>
-        </View>
-        <Spacer height={cx(5)} />
-        {!!getTipText() && <InfoText
-          style={{ marginHorizontal: cx(24), marginBottom: cx(5) }}
-          icon={res.ic_warning_amber}
-          iconStyle={{ width: cx(16), height: cx(16) }}
-          contentColor="#FF9500"
-          text={tipText}
-          textStyle={{ fontSize: cx(12) }}
-        />}
-        {hasScheduleList() && <>
-          <View style={styles.tagLine}>
-            <Tag
-              checked={state.sleepTagChecked}
-              text={I18n.getLang('sleepwakeschedule_field_3_Times_chips2_text')}
-              onCheckedChange={checked => {
-                state.sleepTagChecked = checked
-              }} />
-            <Spacer width={cx(8)} height={0} />
-            <Tag
-              checked={state.wakeUpTagChecked}
-              text={I18n.getLang('sleepwakeschedule_field_3_Times_chips_text')}
-              onCheckedChange={checked => {
-                state.wakeUpTagChecked = checked
-              }} />
-          </View>
-          <Spacer height={cx(5)} />
-        </>}
-        {state.filteredScheduleList.length ?
-          <FlatList
-            data={state.filteredScheduleList}
-            renderItem={({ item }) => (
-              <SleepWakeUpCard
-                is24HourClock={is24HourClock}
-                sleepWakeUp={item}
-                onPress={() => {
-                  onAddScheduleDialogItemClick(item.isSleep, 'edit', item)
-                }}
-                onSwitch={async (v) => {
-                  await modDeleteTimeSchedule('edit', item.isSleep, {
-                    ...item,
-                    enable: v ? 1 : 0
-                  })
-                }}
-              />
-            )}
-            ListHeaderComponent={() => (<Spacer height={cx(10)} />)}
-            ItemSeparatorComponent={() => (<Spacer />)}
-            ListFooterComponent={() => (<Spacer />)}
-            keyExtractor={(item, idx) => `${item.isSleep ? 'sleep' : 'wakeUp'}_${idx}`}
-          /> :
-          <View style={styles.emptyListCon}>
-            <Spacer height={cx(70)} />
-            <Image
-              style={styles.emptyImage}
-              source={res.scheduleEmpty}
-              resizeMode="contain" />
-            <Spacer height={cx(20)} />
-            <View style={styles.emptyText}>
-              <Image
-                source={{ uri: res.device_panel_schedule_alert }}
-                style={{ width: cx(16), height: cx(16) }}
-              />
-              <Text style={styles.emptyNoTime}>
-                {
-                  !hasScheduleList() ?
-                    I18n.getLang('sleepwakeschedule_empty_information_text') :
-                    I18n.getLang('sleepwakeschedule_empty_filtering_information_text')
-                }
-              </Text>
-            </View>
-            {!hasScheduleList() &&
-              <View style={styles.emptyBtnView}>
-                <Spacer />
-                <TextButton
-                  style={styles.emptyBtn}
-                  textStyle={isSleepMax ? styles.disableItemText : { color: '#fff' }}
-                  text={I18n.getLang('sleepwakeschedule_add_button_text1')}
-                  onPress={() => onAddScheduleDialogItemClick(true, 'add', getNewSleepWakeUp(true, params))}
-                />
-                <Spacer />
-                <TextButton
-                  style={styles.emptyBtn}
-                  textStyle={isWakeUpMax ? styles.disableItemText : { color: '#fff' }}
-                  text={I18n.getLang('sleepwakeschedule_add_button_text2')}
-                  onPress={() => onAddScheduleDialogItemClick(false, 'add', getNewSleepWakeUp(false, params))}
-                />
-              </View>}
-          </View>
-        }
-      </Page>
-      <CustomListDialog
-        show={state.showAddSchedulePopover}
-        style={styles.addMoodPopover}
-        itemStyle={styles.popoverItem}
-        onDismiss={() => {
-          state.showAddSchedulePopover = false
-        }}
-        data={[
-          {
-            text: I18n.getLang('sleepwakeschedule_add_button_text1'),
-            value: true,
-            isMax: isSleepMax
-          },
-          {
-            text: I18n.getLang('sleepwakeschedule_add_button_text2'),
-            value: false,
-            isMax: isWakeUpMax
-          },
-        ]}
-        onItemPress={(isSleep) => onAddScheduleDialogItemClick(isSleep, 'add', getNewSleepWakeUp(isSleep, params))}
-      />
-    </>
-  )
-}
-
-const SleepWakeUpCard = (props: {
-  sleepWakeUp: SleepUIItem | WakeUpUIItem,
-  onSwitch: (enable: boolean) => void,
-  onPress: () => void
-  is24HourClock: boolean
-}) => {
-  const { sleepWakeUp, is24HourClock, onSwitch, onPress } = props
-  return (
-    <Card style={styles.randomTimingCard} onPress={onPress}>
-      <Spacer height={cx(16)} />
-      <View style={styles.switchLine}>
-        <Text style={styles.time}>
-          {`${convertMinutesTo12HourFormat(sleepWakeUp.startTime, is24HourClock)} - ${convertMinutesTo12HourFormat(sleepWakeUp.endTime, is24HourClock)}`}</Text>
-        <SwitchButton
-          value={sleepWakeUp.enable}
-          thumbStyle={{ elevation: 0 }}
-          onValueChange={onSwitch} />
-      </View>
-      <Text style={styles.loopText}>{loopText(sleepWakeUp.weeks)}</Text>
-      <Spacer height={cx(5)} />
-      <Text style={styles.loopText}>{sleepWakeUp.name}</Text>
-      <Spacer height={cx(10)} />
-      <View style={styles.tag}>
-        <Text style={styles.tagTitle}>
-          {I18n.getLang(sleepWakeUp.isSleep ? 'sleepwakeschedule_field_3_Times_chips2_text' : 'sleepwakeschedule_field_3_Times_chips_text')}
-        </Text>
-      </View>
-      <Spacer />
-    </Card>
-  )
-}
-
-const getNewSleepWakeUp = (isSleep: boolean, params: SleepWakeUpPageRouteParams) => {
-  const def = {
-    name: '',
-    weeks: [0, 0, 0, 0, 0, 0, 0],
-    delay: 6,
-    hour: isSleep ? 23 : 7,
-    minute: 0,
-    h: 0,
-    s: 100,
-    v: 100,
-    brightness: 100,
-    temperature: 0,
-    last: 0,
-    startTime: isSleep ? 1380 : 390,
-    endTime: isSleep ? 1410 : 420,
-    isColorMode: params.isSupportColor ? true : false,
-    isSleep
-  }
-  return def
-}
-
-const styles = StyleSheet.create({
-  tagLine: {
-    flexDirection: 'row',
-    marginHorizontal: cx(24),
-  },
-  infoLine: {
-    marginHorizontal: cx(24),
-  },
-  addMoodPopover: {
-    width: cx(210),
-    height: cx(90.5),
-    marginStart: cx(115),
-    marginTop: cx(100),
-    backgroundColor: '#fff',
-  },
-  popoverItem: {
-    width: cx(210),
-    height: cx(45),
-    alignItems: 'flex-start',
-  },
-  emptyListCon: {
-    flex: 1,
-    alignItems: 'center',
-  },
-  emptyImage: {
-    width: cx(225),
-    height: cx(198),
-  },
-  emptyText: {
-    flexDirection: 'row',
-    alignItems: 'center'
-  },
-  emptyNoTime: {
-    fontSize: cx(12),
-    lineHeight: cx(20),
-    textAlign: 'center',
-    fontFamily: 'helvetica_neue_lt_std_roman',
-    color: '#000'
-  },
-  emptyBtnView: {
-    alignItems: 'center'
-  },
-  emptyBtn: {
-    backgroundColor: '#f60',
-    borderRadius: cx(5),
-    paddingHorizontal: cx(15),
-    paddingVertical: cx(10)
-  },
-  addTimer: {
-    justifyContent: 'center',
-    alignItems: 'center',
-    // width,
-    marginVertical: cx(20),
-  },
-  disableItemText: {
-    color: '#CBCBCB',
-    fontSize: cx(16),
-  },
-  randomTimingCard: {
-    marginHorizontal: cx(24),
-    paddingHorizontal: cx(16),
-  },
-  switchLine: {
-    flexDirection: 'row',
-    alignItems: 'center',
-  },
-  time: {
-    flex: 1,
-    color: '#000',
-    fontSize: cx(16),
-    fontWeight: 'bold',
-    fontFamily: 'helvetica_neue_lt_std_bd',
-  },
-  switchBtn: {},
-  loopText: {
-    color: '#000',
-    fontSize: cx(14),
-    fontFamily: 'helvetica_neue_lt_std_roman',
-    height: cx(20)
-  },
-  tag: {
-    alignSelf: 'flex-start',
-    borderRadius: cx(16),
-    height: cx(16),
-    backgroundColor: 'rgb(230,231,232)',
-    paddingHorizontal: cx(10),
-  },
-  tagTitle: {
-    fontSize: cx(10),
-    textAlign: 'center',
-    fontFamily: 'PingFangSC-Medium',
-    color: '#000'
-  },
-})
-
+import React, { useCallback, useEffect, useMemo } from "react";
+import { StyleSheet, View, Text, Image, FlatList } from 'react-native'
+import Page from '@ledvance/base/src/components/Page'
+import Tag from '@ledvance/base/src/components/Tag'
+import Spacer from '@ledvance/base/src/components/Spacer'
+import { useNavigation } from '@react-navigation/native'
+import I18n from '@ledvance/base/src/i18n'
+import res from '@ledvance/base/src/res'
+import { useDeviceInfo, useSystemTimeFormate } from "@ledvance/base/src/models/modules/NativePropsSlice";
+import { useReactive, useUpdateEffect } from "ahooks";
+import CustomListDialog from "@ledvance/base/src/components/CustomListDialog";
+import { SwitchButton, Utils } from "tuya-panel-kit";
+import { convertMinutesTo12HourFormat, loopText } from "@ledvance/base/src/utils/common";
+import TextButton from "@ledvance/base/src/components/TextButton";
+import { ui_biz_routerKey } from '../../navigation/Routers'
+import { cloneDeep } from "lodash";
+import { sleepNode2Dp, useSleepMode, useWakeUp, wakeUpNode2Dp } from "./SleepWakeUpActions";
+import { SleepUIItem, WakeUpUIItem } from "./Interface";
+import Card from "@ledvance/base/src/components/Card";
+import { useParams } from "@ledvance/base/src/hooks/Hooks";
+import { ApplyForItem } from "../timeSchedule/Interface";
+import InfoText from "@ledvance/base/src/components/InfoText";
+
+const cx = Utils.RatioUtils.convertX
+
+export interface SleepWakeUpPageRouteParams {
+  isSupportColor?: boolean
+  isSupportTemperature?: boolean
+  isSupportBrightness?: boolean
+  isMixLight?: boolean
+  sleepModeDpCode: string
+  wakeUpDpCode: string
+  conflictDps: {
+    randomTimeDpCode?: string
+    fixedTimeDpCode?: string
+    biorhythmDpCode?: string
+  }
+  applyForList: ApplyForItem[];
+}
+
+const MAX_SCHEDULE = 4
+const SleepWakeUpPage = () => {
+  const deviceInfo = useDeviceInfo()
+  const navigation = useNavigation()
+  const is24HourClock = useSystemTimeFormate()
+  const params = useParams<SleepWakeUpPageRouteParams>()
+  const [wakeUpList, setWakeUpList, wakeupComplete] = useWakeUp(params.wakeUpDpCode)
+  const [sleepList, setSleepList, sleepComplete] = useSleepMode(params.sleepModeDpCode)
+  const state = useReactive({
+    showAddSchedulePopover: false,
+    sleepTagChecked: false,
+    wakeUpTagChecked: false,
+    sleepScheduleList: cloneDeep(sleepList),
+    wakeUpScheduleList: cloneDeep(wakeUpList),
+    filteredScheduleList: [] as any[],
+    flag: Symbol(),
+    loading: true
+  })
+
+  const isMaxNum = useMemo(() => {
+    return state.sleepScheduleList.length >= MAX_SCHEDULE && state.wakeUpScheduleList.length >= MAX_SCHEDULE
+  }, [state.sleepScheduleList, state.wakeUpScheduleList])
+
+  useUpdateEffect(() => {
+    console.log(sleepList, '< --- sleepList')
+    state.sleepScheduleList = cloneDeep(sleepList)
+  }, [JSON.stringify(sleepList)])
+
+  useUpdateEffect(() => {
+    console.log(wakeUpList, '< --- wakeUpList')
+    state.wakeUpScheduleList = cloneDeep(wakeUpList)
+  }, [JSON.stringify(wakeUpList)])
+
+  useUpdateEffect(() => {
+    state.loading = !wakeupComplete && !sleepComplete
+  }, [wakeupComplete, sleepComplete])
+
+  const onAddScheduleDialogItemClick = useCallback((isSleep: boolean, mode: 'add' | 'edit', scheduleItem?: any) => {
+    if (mode === 'add' && isSleep && state.sleepScheduleList.length === MAX_SCHEDULE) return
+    if (mode === 'add' && !isSleep && state.wakeUpScheduleList.length === MAX_SCHEDULE) return
+    navigateToEdit({
+      ...params,
+      mode,
+      isSleep,
+      scheduleItem: cloneDeep(scheduleItem),
+      modDeleteTimeSchedule
+    })
+    state.showAddSchedulePopover = false
+  }, [state.filteredScheduleList])
+
+  const modDeleteTimeSchedule = async (mode: 'add' | 'edit' | 'del', isSleep: boolean, sleepWakeUp: SleepUIItem | WakeUpUIItem) => {
+    let cloneSleepWakeUp: any[] = isSleep ? cloneDeep(state.sleepScheduleList) : cloneDeep(state.wakeUpScheduleList)
+    if (mode === 'add') {
+      cloneSleepWakeUp = [
+        ...cloneSleepWakeUp,
+        {
+          ...sleepWakeUp,
+          id: cloneSleepWakeUp.length,
+          nodeHex: isSleep ? sleepNode2Dp(sleepWakeUp) : wakeUpNode2Dp(sleepWakeUp as WakeUpUIItem)
+        }
+      ]
+    }
+    if (mode === 'del') {
+      cloneSleepWakeUp = cloneSleepWakeUp.filter(item => sleepWakeUp.id !== item.id)
+    }
+    if (mode === 'edit') {
+      cloneSleepWakeUp = cloneSleepWakeUp.map(item => {
+        if (item.id === sleepWakeUp.id) {
+          return sleepWakeUp
+        }
+        return item
+      })
+    }
+    const def = {
+      version: 0,
+      num: cloneSleepWakeUp.length,
+      nodes: cloneDeep(cloneSleepWakeUp)
+    }
+    const res = isSleep ? await setSleepList(def) : await setWakeUpList(def)
+    if (res.success) {
+      if (isSleep) {
+        state.sleepScheduleList = cloneDeep(cloneSleepWakeUp)
+      } else {
+        state.wakeUpScheduleList = cloneDeep(cloneSleepWakeUp)
+      }
+      return {
+        success: true
+      }
+    } else {
+      return {
+        success: false
+      }
+    }
+  }
+
+  useEffect(() => {
+    if (state.sleepTagChecked === state.wakeUpTagChecked) {
+      state.filteredScheduleList = [...state.sleepScheduleList, ...state.wakeUpScheduleList]
+    } else if (state.sleepTagChecked) {
+      state.filteredScheduleList = state.sleepScheduleList
+    } else {
+      state.filteredScheduleList = state.wakeUpScheduleList
+    }
+  }, [state.sleepTagChecked, state.wakeUpTagChecked, state.sleepScheduleList, state.wakeUpScheduleList])
+
+  const getTipText = useCallback(() => {
+    if (state.sleepScheduleList.length >= MAX_SCHEDULE && state.wakeUpScheduleList.length >= MAX_SCHEDULE) return "both"
+    if (state.sleepScheduleList.length >= MAX_SCHEDULE) return "sleep"
+    if (state.wakeUpScheduleList.length >= MAX_SCHEDULE) return "wakeup"
+  }, [state.sleepScheduleList, state.wakeUpScheduleList])
+
+  const hasScheduleList = useCallback(() => {
+    return !!(state.sleepScheduleList.length && state.wakeUpScheduleList.length)
+  }, [state.sleepScheduleList, state.wakeUpScheduleList])
+
+  const navigateToEdit = (params) => {
+    navigation.navigate(ui_biz_routerKey.ui_biz_sleep_wakeUp_edit_new, params)
+  }
+
+  const isSleepMax = useMemo(() => {
+    return state.sleepScheduleList.length >= MAX_SCHEDULE
+  }, [state.sleepScheduleList.length])
+
+  const isWakeUpMax = useMemo(() => {
+    return state.wakeUpScheduleList.length >= MAX_SCHEDULE
+  }, [state.wakeUpScheduleList.length])
+
+  const tipText = useMemo(() => {
+    const tip = getTipText()
+    if (tip === 'sleep') return I18n.getLang('sleepwakeschedule_warning_max_number_sleep_text')
+    if (tip === 'wakeup') return I18n.getLang('sleepwakeschedule_warning_max_number_wakeup_text')
+    if (tip === 'both') return I18n.getLang('sleepwakeschedule_warning_max_number_both_text')
+    return ''
+  }, [getTipText()])
+
+  return (
+    <>
+      <Page
+        backText={deviceInfo.name}
+        onBackClick={navigation.goBack}
+        headlineText={I18n.getLang('add_sleepschedule_one_source_system_back_text')}
+        headlineIcon={isMaxNum ? undefined : res.device_panel_schedule_add}
+        onHeadlineIconClick={() => {
+          state.showAddSchedulePopover = !state.showAddSchedulePopover
+        }}
+        loading={state.loading}
+      >
+        <View style={{ marginHorizontal: cx(24) }}>
+          <Text style={{ color: '#000', fontSize: cx(12) }}>
+            {I18n.getLang('timeschedule_overview_description_text')}
+          </Text>
+        </View>
+        <Spacer height={cx(5)} />
+        {!!getTipText() && <InfoText
+          style={{ marginHorizontal: cx(24), marginBottom: cx(5) }}
+          icon={res.ic_warning_amber}
+          iconStyle={{ width: cx(16), height: cx(16) }}
+          contentColor="#FF9500"
+          text={tipText}
+          textStyle={{ fontSize: cx(12) }}
+        />}
+        {hasScheduleList() && <>
+          <View style={styles.tagLine}>
+            <Tag
+              checked={state.sleepTagChecked}
+              text={I18n.getLang('sleepwakeschedule_field_3_Times_chips2_text')}
+              onCheckedChange={checked => {
+                state.sleepTagChecked = checked
+              }} />
+            <Spacer width={cx(8)} height={0} />
+            <Tag
+              checked={state.wakeUpTagChecked}
+              text={I18n.getLang('sleepwakeschedule_field_3_Times_chips_text')}
+              onCheckedChange={checked => {
+                state.wakeUpTagChecked = checked
+              }} />
+          </View>
+          <Spacer height={cx(5)} />
+        </>}
+        {state.filteredScheduleList.length ?
+          <FlatList
+            data={state.filteredScheduleList}
+            renderItem={({ item }) => (
+              <SleepWakeUpCard
+                is24HourClock={is24HourClock}
+                sleepWakeUp={item}
+                onPress={() => {
+                  onAddScheduleDialogItemClick(item.isSleep, 'edit', item)
+                }}
+                onSwitch={async (v) => {
+                  await modDeleteTimeSchedule('edit', item.isSleep, {
+                    ...item,
+                    enable: v ? 1 : 0
+                  })
+                }}
+              />
+            )}
+            ListHeaderComponent={() => (<Spacer height={cx(10)} />)}
+            ItemSeparatorComponent={() => (<Spacer />)}
+            ListFooterComponent={() => (<Spacer />)}
+            keyExtractor={(item, idx) => `${item.isSleep ? 'sleep' : 'wakeUp'}_${idx}`}
+          /> :
+          <View style={styles.emptyListCon}>
+            <Spacer height={cx(70)} />
+            <Image
+              style={styles.emptyImage}
+              source={res.scheduleEmpty}
+              resizeMode="contain" />
+            <Spacer height={cx(20)} />
+            <View style={styles.emptyText}>
+              <Image
+                source={{ uri: res.device_panel_schedule_alert }}
+                style={{ width: cx(16), height: cx(16) }}
+              />
+              <Text style={styles.emptyNoTime}>
+                {
+                  !hasScheduleList() ?
+                    I18n.getLang('sleepwakeschedule_empty_information_text') :
+                    I18n.getLang('sleepwakeschedule_empty_filtering_information_text')
+                }
+              </Text>
+            </View>
+            {!hasScheduleList() &&
+              <View style={styles.emptyBtnView}>
+                <Spacer />
+                <TextButton
+                  style={styles.emptyBtn}
+                  textStyle={isSleepMax ? styles.disableItemText : { color: '#fff' }}
+                  text={I18n.getLang('sleepwakeschedule_add_button_text1')}
+                  onPress={() => onAddScheduleDialogItemClick(true, 'add', getNewSleepWakeUp(true, params))}
+                />
+                <Spacer />
+                <TextButton
+                  style={styles.emptyBtn}
+                  textStyle={isWakeUpMax ? styles.disableItemText : { color: '#fff' }}
+                  text={I18n.getLang('sleepwakeschedule_add_button_text2')}
+                  onPress={() => onAddScheduleDialogItemClick(false, 'add', getNewSleepWakeUp(false, params))}
+                />
+              </View>}
+          </View>
+        }
+      </Page>
+      <CustomListDialog
+        show={state.showAddSchedulePopover}
+        style={styles.addMoodPopover}
+        itemStyle={styles.popoverItem}
+        onDismiss={() => {
+          state.showAddSchedulePopover = false
+        }}
+        data={[
+          {
+            text: I18n.getLang('sleepwakeschedule_add_button_text1'),
+            value: true,
+            isMax: isSleepMax
+          },
+          {
+            text: I18n.getLang('sleepwakeschedule_add_button_text2'),
+            value: false,
+            isMax: isWakeUpMax
+          },
+        ]}
+        onItemPress={(isSleep) => onAddScheduleDialogItemClick(isSleep, 'add', getNewSleepWakeUp(isSleep, params))}
+      />
+    </>
+  )
+}
+
+const SleepWakeUpCard = (props: {
+  sleepWakeUp: SleepUIItem | WakeUpUIItem,
+  onSwitch: (enable: boolean) => void,
+  onPress: () => void
+  is24HourClock: boolean
+}) => {
+  const { sleepWakeUp, is24HourClock, onSwitch, onPress } = props
+  return (
+    <Card style={styles.randomTimingCard} onPress={onPress}>
+      <Spacer height={cx(16)} />
+      <View style={styles.switchLine}>
+        <Text style={styles.time}>
+          {`${convertMinutesTo12HourFormat(sleepWakeUp.startTime, is24HourClock)} - ${convertMinutesTo12HourFormat(sleepWakeUp.endTime, is24HourClock)}`}</Text>
+        <SwitchButton
+          value={sleepWakeUp.enable}
+          thumbStyle={{ elevation: 0 }}
+          onValueChange={onSwitch} />
+      </View>
+      <Text style={styles.loopText}>{loopText(sleepWakeUp.weeks)}</Text>
+      <Spacer height={cx(5)} />
+      <Text style={styles.loopText}>{sleepWakeUp.name}</Text>
+      <Spacer height={cx(10)} />
+      <View style={styles.tag}>
+        <Text style={styles.tagTitle}>
+          {I18n.getLang(sleepWakeUp.isSleep ? 'sleepwakeschedule_field_3_Times_chips2_text' : 'sleepwakeschedule_field_3_Times_chips_text')}
+        </Text>
+      </View>
+      <Spacer />
+    </Card>
+  )
+}
+
+const getNewSleepWakeUp = (isSleep: boolean, params: SleepWakeUpPageRouteParams) => {
+  const def = {
+    name: '',
+    weeks: [0, 0, 0, 0, 0, 0, 0],
+    delay: 6,
+    hour: isSleep ? 23 : 7,
+    minute: 0,
+    h: 0,
+    s: 100,
+    v: 100,
+    brightness: 100,
+    temperature: 0,
+    last: 0,
+    startTime: isSleep ? 1380 : 390,
+    endTime: isSleep ? 1410 : 420,
+    isColorMode: params.isSupportColor ? true : false,
+    isSleep
+  }
+  return def
+}
+
+const styles = StyleSheet.create({
+  tagLine: {
+    flexDirection: 'row',
+    marginHorizontal: cx(24),
+  },
+  infoLine: {
+    marginHorizontal: cx(24),
+  },
+  addMoodPopover: {
+    width: cx(210),
+    height: cx(90.5),
+    marginStart: cx(115),
+    marginTop: cx(100),
+    backgroundColor: '#fff',
+  },
+  popoverItem: {
+    width: cx(210),
+    height: cx(45),
+    alignItems: 'flex-start',
+  },
+  emptyListCon: {
+    flex: 1,
+    alignItems: 'center',
+  },
+  emptyImage: {
+    width: cx(225),
+    height: cx(198),
+  },
+  emptyText: {
+    flexDirection: 'row',
+    alignItems: 'center'
+  },
+  emptyNoTime: {
+    fontSize: cx(12),
+    lineHeight: cx(20),
+    textAlign: 'center',
+    fontFamily: 'helvetica_neue_lt_std_roman',
+    color: '#000'
+  },
+  emptyBtnView: {
+    alignItems: 'center'
+  },
+  emptyBtn: {
+    backgroundColor: '#f60',
+    borderRadius: cx(5),
+    paddingHorizontal: cx(15),
+    paddingVertical: cx(10)
+  },
+  addTimer: {
+    justifyContent: 'center',
+    alignItems: 'center',
+    // width,
+    marginVertical: cx(20),
+  },
+  disableItemText: {
+    color: '#CBCBCB',
+    fontSize: cx(16),
+  },
+  randomTimingCard: {
+    marginHorizontal: cx(24),
+    paddingHorizontal: cx(16),
+  },
+  switchLine: {
+    flexDirection: 'row',
+    alignItems: 'center',
+  },
+  time: {
+    flex: 1,
+    color: '#000',
+    fontSize: cx(16),
+    fontWeight: 'bold',
+    fontFamily: 'helvetica_neue_lt_std_bd',
+  },
+  switchBtn: {},
+  loopText: {
+    color: '#000',
+    fontSize: cx(14),
+    fontFamily: 'helvetica_neue_lt_std_roman',
+    height: cx(20)
+  },
+  tag: {
+    alignSelf: 'flex-start',
+    borderRadius: cx(16),
+    height: cx(16),
+    backgroundColor: 'rgb(230,231,232)',
+    paddingHorizontal: cx(10),
+  },
+  tagTitle: {
+    fontSize: cx(10),
+    textAlign: 'center',
+    fontFamily: 'PingFangSC-Medium',
+    color: '#000'
+  },
+})
+
 export default SleepWakeUpPage