@ledvance/group-ui-biz-bundle 1.0.105 → 1.0.107

package/src/modules/time_schedule/TimeScheduleDetailPage.tsx

@@ -1,910 +0,0 @@
-import React, { useCallback, useEffect, useMemo } from "react";
-import { FlatList, ScrollView, StyleSheet, Text, View } from 'react-native'
-import { useNavigation, useRoute } from '@react-navigation/native'
-import Page from "@ledvance/base/src/components/Page";
-import I18n from "@ledvance/base/src/i18n";
-import TextField from "@ledvance/base/src/components/TextField";
-import { cloneDeep, isEqual } from "lodash";
-import { useCreation, useReactive } from "ahooks";
-import { SwitchButton, TimerPicker, Utils } from "tuya-panel-kit";
-import Spacer from "@ledvance/base/src/components/Spacer";
-import LdvWeekView from '@ledvance/base/src/components/weekSelect'
-import { convertTo12HourFormat, loopText, showDialog } from "@ledvance/base/src/utils/common";
-import Card from "@ledvance/base/src/components/Card";
-import LdvSwitch from "@ledvance/base/src/components/ldvSwitch";
-import ApplyForDeviceList from '@ledvance/base/src/components/ApplyForDeviceList'
-import LampAdjustView from "@ledvance/base/src/components/LampAdjustView";
-import { Timer, UVCFanMode } from './Interface'
-import res from "@ledvance/base/src/res";
-import { useGroupDevices, useMoods, useSystemTimeFormate, useUAGroupInfo } from "@ledvance/base/src/models/modules/NativePropsSlice";
-import { TimeSchedulePageParams } from "./TimeSchedulePage";
-import { Result } from "@ledvance/base/src/models/modules/Result";
-import DeleteButton from "@ledvance/base/src/components/DeleteButton";
-import InfoText from "@ledvance/base/src/components/InfoText";
-import SegmentControl from "@ledvance/base/src/components/segmentControl";
-import { getHSVByHex, getHexByHSV } from "@ledvance/base/src/utils";
-import MoodItem from "../mood/MoodItem";
-import { dp2Obj, getRemoteSceneList, obj2Dp, stripDp2Obj, stripObj2Dp } from "../mood/SceneAction";
-import FanAdjustView from "@ledvance/base/src/components/FanAdjustView";
-import { SceneMode } from "../mood/SceneInfo";
-import StripAdjustView, { ColorList } from "@ledvance/base/src/components/StripAdjustView"
-import SocketItem from '@ledvance/base/src/components/SocketItem'
-import { WorkMode } from "@ledvance/base/src/utils/interface";
-import { Buffer } from 'buffer'
-import { fanModeOption, actionOption } from "./TimeScheduleActions";
-import LoadingView from "@ledvance/base/src/components/LoadingView";
-
-const { convertX: cx } = Utils.RatioUtils;
-const { toFixedString } = Utils.NumberUtils;
-interface TimeScheduleDetailPageParams extends TimeSchedulePageParams {
-  mode: 'add' | 'edit'
-  timeSchedule: Timer,
-  modDeleteTimeSchedule: (mode: 'add' | 'edit' | 'del', timeSchedule: Timer, ids: string) => Promise<Result<any>>
-  refreshFn: () => void
-}
-const TimeScheduleDetailPage = () => {
-  const navigation = useNavigation()
-  const uaGroupInfo = useUAGroupInfo()
-  const is24HourClock = useSystemTimeFormate()
-  const [groupDevices] = useGroupDevices()
-  const [moods, setMoods] = useMoods()
-  const props = cloneDeep(useRoute().params) as TimeScheduleDetailPageParams
-  const state = useReactive({
-    timeSchedule: props.mode === 'add' ? newTimeSchedule() : cloneDeep(props.timeSchedule),
-    isManual: true,  // manual ,mood
-    isColorMode: !!props.colorDataCode,
-    switchLed: true, // light
-    switchSocket1: true,
-    switchSocket2: true,
-    switchSocket3: true,
-    switchSocketUSB: true,
-    switchFan: true,
-    fanMode: UVCFanMode.Normal,
-    fanSpeed: 1,
-    brightness: 100,
-    temperature: 0,
-    hsv: defaultHsv(),
-    stripState: defaultStripState(),
-    scene: '',
-    loading: false,
-    moodLoading: false
-  })
-
-  const tabList = useCreation(() => {
-    const isSupportWhite = props.isSupportBrightness || props.isSupportTemperature
-    const tabs = [
-      { key: 1, title: I18n.getLang('add_new_static_mood_lights_schedule_switch_tab_color_text') },
-      { key: 0, title: I18n.getLang('add_new_static_mood_lights_schedule_switch_tab_white_text') },
-      { key: 3, title: I18n.getLang('add_new_dynamic_mood_strip_lights_schedule_switch_tab_combination_text') },
-    ]
-    if (!isSupportWhite) {
-      return tabs.filter(tab => tab.key !== 0)
-    }
-    if (!props.isSupportColor) {
-      return tabs.filter(tab => tab.key === 0)
-    }
-    return tabs
-  }, [])
-
-  const isPowerStrip = useMemo(() => {
-    return !!(props.switchSocket3 || props.switchSocketUSB)
-  }, [])
-
-  const getSceneByDp = (sceneDp: string) => {
-    if (props.sceneDataDp2Obj) {
-      return props.sceneDataDp2Obj(sceneDp)
-    }
-    const isFantasy = props.isStringLight || props.isStripLight
-    return isFantasy ? stripDp2Obj(Buffer.from(sceneDp, 'base64').toString('hex'), props.isStringLight) : dp2Obj(sceneDp, props.isSupportFan, props.isSupportUVC)
-  }
-
-  const getDpByScene = (scene: any) => {
-    if (props.sceneDataObj2Dp) {
-      return props.sceneDataObj2Dp(scene)
-    }
-    const isFantasy = props.isStringLight || props.isStripLight
-    return isFantasy ? Buffer.from(stripObj2Dp(scene, props.isStringLight), 'hex').toString('base64') : obj2Dp(scene, props.isSupportFan, props.isSupportUVC)
-  }
-
-  const modeId = useMemo(() => {
-    if (state.scene) {
-      return getSceneByDp(state.scene).id
-    }
-    return -1
-  }, [state.scene])
-
-  useEffect(() => {
-    if (!(moods && moods.length) && props.sceneDataCode) {
-      state.moodLoading = true
-      getRemoteSceneList(uaGroupInfo.tyGroupId.toString(), {
-        isSupportColor: props.isSupportColor,
-        isSupportTemperature: props.isSupportTemperature,
-        isSupportBrightness: props.isSupportBrightness,
-        isStringLight: props.isStringLight,
-        isStripLight: props.isStripLight
-      }).then(res => {
-        if (res.success && res.data) {
-          setMoods(res.data)
-          if (props.mode === 'add') state.scene = getDpByScene(res.data[0])
-        }
-        state.moodLoading = false
-      }).catch(() => {
-        state.moodLoading = false
-      })
-    }
-  }, [])
-
-  useEffect(() => {
-    if (props.mode === 'edit' && props.timeSchedule) {
-      const dps = JSON.parse(props.timeSchedule.dps)
-      if (props.switchLedCode && dps.hasOwnProperty(props.switchLedCode)) {
-        state.switchLed = dps[props.switchLedCode]
-      }
-      if (props.switchSocket1 && dps.hasOwnProperty(props.switchSocket1)) {
-        state.switchSocket1 = dps[props.switchSocket1]
-      }
-      if (props.switchSocket2 && dps.hasOwnProperty(props.switchSocket2)) {
-        state.switchSocket2 = dps[props.switchSocket2]
-      }
-      if (props.switchSocket3 && dps.hasOwnProperty(props.switchSocket3)) {
-        state.switchSocket3 = dps[props.switchSocket3]
-      }
-      if (props.switchSocketUSB && dps.hasOwnProperty(props.switchSocketUSB)) {
-        state.switchSocketUSB = dps[props.switchSocketUSB]
-      }
-      if (props.switchFan && dps.hasOwnProperty(props.switchFan)) {
-        state.switchFan = dps[props.switchFan]
-      }
-      if (props.fanModeCode && dps.hasOwnProperty(props.fanModeCode)) {
-        state.fanMode = dps[props.fanModeCode]
-      }
-      if (props.fanSpeedCode && dps.hasOwnProperty(props.fanSpeedCode)) {
-        state.fanSpeed = dps[props.fanSpeedCode]
-      }
-      if (props.tempValueCode && dps.hasOwnProperty(props.tempValueCode)) {
-        if (props.tempValueParser) {
-          state.temperature = props.tempValueParser(dps[props.tempValueCode])
-        } else {
-          state.temperature = Math.round(dps[props.tempValueCode] / 10)
-        }
-        state.isColorMode = false
-      }
-      if (props.brightValueCode && dps.hasOwnProperty(props.brightValueCode)) {
-        if (props.brightValueParser) {
-          state.brightness = props.brightValueParser(dps[props.brightValueCode])
-        } else {
-          state.brightness = Math.round(dps[props.brightValueCode] / 10)
-        }
-        state.isColorMode = false
-      }
-      if (props.colorDataCode && dps.hasOwnProperty(props.colorDataCode)) {
-        if (props.colorDataDp2Obj) {
-          const color = props.colorDataDp2Obj(dps[props.colorDataCode])
-          state.hsv = cloneDeep(color)
-          if (props.isMatterLight && props.brightValueCode && dps.hasOwnProperty(props.brightValueCode) && props.brightValueParser) {
-            state.hsv.v = props.brightValueParser(dps[props.brightValueCode])
-          }
-        } else {
-          const hsv = getHSVByHex(dps[props.colorDataCode])
-          state.hsv = {
-            h: hsv.h,
-            s: Math.round(hsv.s / 10),
-            v: Math.round(hsv.v / 10),
-          }
-        }
-        state.isColorMode = true
-      }
-      if (props.sceneDataCode && dps.hasOwnProperty(props.sceneDataCode)) {
-        if (dps[props.sceneDataCode]) {
-          state.scene = dps[props.sceneDataCode]
-        } else {
-          state.scene = getDpByScene(moods[0])
-        }
-        state.isManual = false
-      }
-      if (props.drawToolDataCode && dps.hasOwnProperty(props.drawToolDataCode)) {
-        if (props.drawToolDataDp2Obj && dps[props.drawToolDataCode]) {
-          const { hsv, brightness, temperature, stripState, isColor } = props.drawToolDataDp2Obj(dps[props.drawToolDataCode])
-          state.brightness = brightness
-          state.temperature = temperature
-          state.hsv = cloneDeep(hsv)
-          if (stripState) {
-            state.stripState = cloneDeep(stripState)
-          }
-          state.isColorMode = !!isColor
-        }
-      }
-    } else {
-      if (moods && moods.length) {
-        state.scene = getDpByScene(moods[0])
-      }
-    }
-  }, [props.mode, JSON.stringify(props.timeSchedule), JSON.stringify(moods)])
-
-
-  const getFormateTime = useCallback((time: number | string) => {
-    if (typeof time === 'number') {
-      return `${toFixedString(Math.trunc(time / 60), 2)}:${toFixedString(time % 60, 2)}`
-    }
-    if (typeof time === 'string') {
-      const t = time.split(':')
-      return Number(t[0]) * 60 + Number(t[1])
-    }
-    return time
-  }, [])
-
-  const getActionOnOff = useMemo(() => {
-    const off: string[] = []
-    const on: string[] = []
-    if (props.switchLedCode) {
-      const s = actionOption['switchLed']
-      if (state.switchLed) {
-        on.push(s)
-      } else {
-        off.push(s)
-      }
-    }
-    if (props.switchSocket1) {
-      const s = isPowerStrip ? actionOption['switchSocket1'] : actionOption['switchSocket']
-      if (state.switchSocket1) {
-        on.push(s)
-      } else {
-        off.push(s)
-      }
-    }
-    if (props.switchSocket2) {
-      const s = actionOption['switchSocket2']
-      if (state.switchSocket2) {
-        on.push(s)
-      } else {
-        off.push(s)
-      }
-    }
-    if (props.switchSocket3) {
-      const s = actionOption['switchSocket3']
-      if (state.switchSocket3) {
-        on.push(s)
-      } else {
-        off.push(s)
-      }
-    }
-    if (props.switchSocketUSB) {
-      const s = actionOption['switchSocket4']
-      if (state.switchSocketUSB) {
-        on.push(s)
-      } else {
-        off.push(s)
-      }
-    }
-    if (props.switchFan) {
-      const s = actionOption['switchFan']
-      if (state.switchFan) {
-        on.push(s)
-      } else {
-        off.push(s)
-      }
-    }
-    return {
-      on, off
-    }
-  }, [state.switchLed, state.switchSocket1, state.switchSocket2, state.switchSocket3, state.switchSocketUSB, state.switchFan])
-
-  const getActions = useCallback(() => {
-    const actions = {
-      time: state.timeSchedule.time,
-      dps: {}
-    }
-    if (state.isManual) {
-      if (state.switchLed) {
-        if (props.drawToolDataObj2Dp && props.drawToolDataCode) {
-          actions.dps[props.drawToolDataCode] = props.drawToolDataObj2Dp({
-            hsv: state.hsv,
-            stripState: state.stripState,
-            brightness: state.brightness,
-            temperature: state.temperature,
-            isColor: state.isColorMode
-          })
-          const whiteMode = props.isStringLight ? !state.isColorMode : state.stripState.activeKey === 0
-          if (props.workModeCode) actions.dps[props.workModeCode] = whiteMode ? WorkMode.White : WorkMode.Colour
-
-        } else if (state.isColorMode) {
-          if (props.colorDataCode) {
-            const hsv = {
-              ...state.hsv,
-              s: state.hsv.s * 10,
-              v: state.hsv.v * 10,
-            }
-            if (props.colorDataObj2Dp) {
-              actions.dps[props.colorDataCode] = props.colorDataObj2Dp(hsv)
-              if (props.isMatterLight && props.brightValueCode && props.brightValueFormatter) {
-                actions.dps[props.brightValueCode] = props.brightValueFormatter(state.hsv.v)
-              }
-            } else {
-              const hex = getHexByHSV(hsv)
-              actions.dps[props.colorDataCode] = hex
-            }
-          }
-          if (props.workModeCode) actions.dps[props.workModeCode] = WorkMode.Colour
-        } else {
-          if (props.brightValueCode) {
-            if (props.brightValueFormatter) {
-              actions.dps[props.brightValueCode] = props.brightValueFormatter(state.brightness)
-            } else {
-              actions.dps[props.brightValueCode] = state.brightness * 10
-            }
-          }
-          if (props.tempValueCode) {
-            if (props.tempValueFormatter) {
-              actions.dps[props.tempValueCode] = props.tempValueFormatter(state.temperature)
-            } else {
-              actions.dps[props.tempValueCode] = state.temperature * 10
-            }
-          }
-          if (props.workModeCode) actions.dps[props.workModeCode] = WorkMode.White
-        }
-      }
-      if (props.switchLedCode) {
-        actions.dps[props.switchLedCode] = state.switchLed
-      }
-      if (props.switchSocket1) {
-        actions.dps[props.switchSocket1] = state.switchSocket1
-      }
-      if (props.switchSocket2) {
-        actions.dps[props.switchSocket2] = state.switchSocket2
-      }
-      if (props.switchSocket3) {
-        actions.dps[props.switchSocket3] = state.switchSocket3
-      }
-      if (props.switchSocketUSB) {
-        actions.dps[props.switchSocketUSB] = state.switchSocketUSB
-      }
-      if (props.switchFan) {
-        actions.dps[props.switchFan] = state.switchFan
-        if (props.fanModeCode && state.switchFan) {
-          actions.dps[props.fanModeCode] = state.fanMode
-        }
-        if (props.fanSpeedCode && state.switchFan) {
-          actions.dps[props.fanSpeedCode] = state.fanSpeed
-        }
-      }
-    } else {
-      if (props.sceneDataCode) {
-        actions.dps[props.sceneDataCode] = state.scene
-      }
-      actions.dps[props.workModeCode] = WorkMode.Scene
-      if (props.switchLedCode) {
-        actions.dps[props.switchLedCode] = true
-      }
-    }
-    console.log(state, '< --- state')
-    console.log(actions, '< --- actions')
-    return JSON.stringify(actions)
-  }, [JSON.stringify(state)])
-
-  const isModify = useMemo(() => {
-    const schedule = props.mode === 'add' ? newTimeSchedule() : props.timeSchedule
-    const before = {
-      aliasName: schedule.aliasName,
-      time: schedule.time,
-      isAppPush: schedule.isAppPush,
-      loops: schedule.loops
-    }
-    const now = {
-      aliasName: state.timeSchedule.aliasName,
-      time: state.timeSchedule.time,
-      isAppPush: state.timeSchedule.isAppPush,
-      loops: state.timeSchedule.loops
-    }
-    if (props.mode === 'add') {
-      return isEqual(before, now)
-    } else {
-      return isEqual({
-        ...before,
-        dps: JSON.stringify({
-          time: before.time,
-          dps: JSON.parse(schedule.dps)
-        })
-      }, {
-        ...now,
-        dps: getActions()
-      })
-    }
-  }, [JSON.stringify(state)])
-
-  const allowSubmit = useMemo(() => {
-    return !!(state.timeSchedule.aliasName.length && state.timeSchedule.aliasName.length < 33) && !isModify
-  }, [state.timeSchedule.aliasName, isModify])
-
-  const gradientMode = useMemo(() => (
-    props.isStringLight ? SceneMode.StringGradient : props.isStripLight ? SceneMode.StripGradient : SceneMode.SourceGradient
-  ), [props.isStringLight, props.isStripLight, SceneMode])
-
-  return (
-    <Page
-      backText={I18n.getLang('motion_detection_add_time_schedule_system_back_text')}
-      headlineText={I18n.getLang(props.mode === 'add' ? 'motion_detection_add_time_schedule_headline_text' : 'edit_timeschedule_headline_text')}
-      rightButtonIcon={allowSubmit ? res.ic_check : res.ic_uncheck}
-      rightButtonIconClick={async () => {
-        if (!allowSubmit || state.loading) return
-        showDialog({
-          method: 'confirm',
-          title: I18n.getLang('conflict_dialog_active_item_timeschedule_titel'),
-          subTitle: I18n.getLang('group_conflict_feature'),
-          confirmText: I18n.getLang('registration_dialog_button_yes'),
-          cancelText: I18n.getLang('registration_dialog_button_no'),
-          onConfirm: async (_, { close }) => {
-            state.loading = true
-            const res = await props.modDeleteTimeSchedule(props.mode, {
-              ...state.timeSchedule,
-              status: 1,
-              dps: getActions()
-            }, '')
-            console.log(res, '< ---- resss')
-            state.loading = false
-            if (res.success) {
-              close()
-              props.refreshFn()
-              navigation.goBack()
-            }
-          }
-        })
-      }}
-      backDialogTitle={I18n.getLang('cancel_dialog_leave_unsaved_titel')}
-      backDialogContent={I18n.getLang('cancel_dialog_leave_unsaved_timeschedule_note')}
-      showBackDialog={!isModify}
-      loading={state.loading}
-    >
-      <ScrollView nestedScrollEnabled={true}>
-        <TextField
-          style={styles.cardContainer}
-          value={state.timeSchedule.aliasName}
-          showError={state.timeSchedule.aliasName?.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.timeSchedule.aliasName = t;
-          }}
-        />
-
-        {/* pick */}
-        <TimerPicker
-          itemTextColor='#aeadb5'
-          style={{ paddingVertical: cx(0), marginVertical: cx(0) }}
-          is12Hours={!is24HourClock}
-          singlePicker={true}
-          amText={I18n.getLang('manage_user_calendar_label_am')}
-          pmText={I18n.getLang('manage_user_calendar_label_pm')}
-          startTime={getFormateTime(state.timeSchedule.time) as number}
-          symbol={''}
-          onTimerChange={(startTime) => {
-            state.timeSchedule.time = getFormateTime(startTime) as string
-          }} />
-        <LdvWeekView
-          value={state.timeSchedule.loops.split('').map(Number)}
-          style={styles.cardContainer}
-          onSelect={(index: number) => {
-            const rawIndex = index - 1
-            const weeks = state.timeSchedule.loops.split('')
-            weeks[rawIndex] = weeks[rawIndex] === '1' ? '0' : '1'
-            state.timeSchedule.loops = weeks.join('')
-          }} />
-        <Spacer />
-        <Text style={styles.cardContainer}>{loopText(state.timeSchedule.loops.split(''))}</Text>
-        <Spacer height={cx(30)} />
-
-        {/* device state */}
-        <Text style={[styles.itemTitle, styles.cardContainer]}>{I18n.getLang('timeschedule_add_schedule_subheadline2_text')}</Text>
-        <Spacer height={cx(10)} />
-        {props.isSupportMood && <SegmentControl
-          title1={I18n.getLang('timeschedule_add_schedule_switch_tab_manual_text')}
-          title2={I18n.getLang('timeschedule_add_schedule_switch_tab_mood_text')}
-          isFirst={state.isManual}
-          setIsFirst={(v: boolean) => state.isManual = v}
-        />}
-        <Spacer height={cx(10)} />
-        {state.isManual ?
-          <>
-            {!!props.switchLedCode && <>
-              <Card
-                style={styles.cardContainer}
-              >
-                <LdvSwitch
-                  title={I18n.getLang('light_sources_tile_tw_lighting_headline')}
-                  color={'#fff'}
-                  colorAlpha={1}
-                  enable={state.switchLed}
-                  setEnable={(enable: boolean) => {
-                    state.switchLed = enable
-                  }}
-                />
-                {state.switchLed && (props.isStripLight ?
-                  <StripAdjustView
-                    lampTabs={tabList}
-                    onColorDiskChange={(color, idx: K) => {
-                      state.stripState = {
-                        ...state.stripState,
-                        colors: color,
-                        colorDiskActiveKey: idx
-                      }
-                    }}
-                    colorDiskActiveKey={state.stripState.colorDiskActiveKey}
-                    activeKey={state.stripState.activeKey}
-                    onActiveKeyChange={(v) => {
-                      state.stripState = {
-                        ...state.stripState,
-                        activeKey: Number(v) as K
-                      }
-                    }}
-                    isSupportTemperature={props.isSupportTemperature}
-                    isSupportBrightness={props.isSupportBrightness}
-                    h={state.hsv.h} s={state.hsv.s} v={state.hsv.v}
-                    onHSVChange={(h, s, v) => { state.hsv = { h, s, v } }}
-                    onHSVChangeComplete={(h, s, v) => { state.hsv = { h, s, v } }}
-                    colorTemp={state.temperature}
-                    brightness={state.brightness}
-                    onCCTChange={() => { }}
-                    onCCTChangeComplete={(cct) => { state.temperature = cct }}
-                    onBrightnessChange={() => { }}
-                    onBrightnessChangeComplete={(bright) => { state.brightness = bright }}
-                  /> :
-                  <LampAdjustView
-                    reserveSV={true}
-                    isSupportBrightness={props.isSupportBrightness}
-                    isSupportColor={props.isSupportColor}
-                    isSupportTemperature={props.isSupportTemperature}
-                    isColorMode={state.isColorMode}
-                    setIsColorMode={(v) => { state.isColorMode = v }}
-                    h={state.hsv.h} s={state.hsv.s} v={state.hsv.v}
-                    colorTemp={state.temperature}
-                    brightness={state.brightness}
-                    onHSVChangeComplete={(h, s, v) => { state.hsv = { h, s, v } }}
-                    onHSVChange={(h, s, v) => { state.hsv = { h, s, v } }}
-                    onCCTChangeComplete={(cct) => { state.temperature = cct }}
-                    onCCTChange={(cct) => { state.temperature = cct }}
-                    onBrightnessChangeComplete={(bright) => { state.brightness = bright }}
-                    onBrightnessChange={(bright) => { state.brightness = bright }}
-                  />)}
-                <ApplyForDeviceList
-                  devices={cloneDeep(groupDevices)}
-                />
-                <Spacer height={cx(16)} />
-              </Card>
-              <Spacer />
-            </>}
-
-            {/* socket */}
-            {!!props.switchSocket1 && <>
-              {isPowerStrip ?
-                <SocketItem
-                  title={I18n.getLang('feature_summary_action_component_6')}
-                  name=""
-                  icon={{ uri: res.switch_1 }}
-                  onNameChange={() => { }}
-                  enabled={state.switchSocket1}
-                  disabledEdit={true}
-                  onSwitchChange={enable => {
-                    state.switchSocket1 = enable
-                  }}
-                >
-                  <ApplyForDeviceList
-                    devices={cloneDeep(groupDevices)}
-                  />
-                  <Spacer height={cx(16)} />
-                </SocketItem> :
-                <Card
-                  style={styles.cardContainer}
-                >
-                  <LdvSwitch
-                    title={I18n.getLang('feature_summary_action_component_5')}
-                    color={'#fff'}
-                    colorAlpha={1}
-                    enable={state.switchSocket1}
-                    setEnable={(enable: boolean) => {
-                      state.switchSocket1 = enable
-                    }}
-                  />
-                  <ApplyForDeviceList
-                    devices={cloneDeep(groupDevices)}
-                  />
-                  <Spacer height={cx(16)} />
-                </Card>
-              }
-              <Spacer />
-            </>}
-            {!!props.switchSocket2 && <>
-              <SocketItem
-                title={I18n.getLang('feature_summary_action_component_7')}
-                name=""
-                icon={{ uri: res.switch_2 }}
-                onNameChange={() => { }}
-                enabled={state.switchSocket2}
-                disabledEdit={true}
-                onSwitchChange={enable => {
-                  state.switchSocket2 = enable
-                }}
-              >
-                <ApplyForDeviceList
-                  devices={cloneDeep(groupDevices)}
-                />
-                <Spacer height={cx(16)} />
-              </SocketItem>
-              <Spacer />
-            </>}
-            {!!props.switchSocket3 && <>
-              <SocketItem
-                title={I18n.getLang('feature_summary_action_component_8')}
-                name=""
-                icon={{ uri: res.switch_3 }}
-                onNameChange={() => { }}
-                enabled={state.switchSocket3}
-                disabledEdit={true}
-                onSwitchChange={enable => {
-                  state.switchSocket3 = enable
-                }}
-              >
-                <ApplyForDeviceList
-                  devices={cloneDeep(groupDevices)}
-                />
-                <Spacer height={cx(16)} />
-              </SocketItem>
-              <Spacer />
-            </>}
-            {!!props.switchSocketUSB && <>
-              <SocketItem
-                title={I18n.getLang('feature_summary_action_component_9')}
-                name=""
-                icon={{ uri: res.switch_4 }}
-                onNameChange={() => { }}
-                enabled={state.switchSocketUSB}
-                disabledEdit={true}
-                onSwitchChange={enable => {
-                  state.switchSocketUSB = enable
-                }}
-              >
-                <ApplyForDeviceList
-                  devices={cloneDeep(groupDevices)}
-                />
-                <Spacer height={cx(16)} />
-              </SocketItem>
-              <Spacer />
-            </>}
-
-            {/* Fan */}
-            {props.isSupportFan && <FanAdjustView
-              style={styles.cardContainer}
-              fanEnable={state.switchFan}
-              fanSpeed={state.fanSpeed}
-              modeValue={state.fanMode}
-              modeOptions={fanModeOption}
-              modeChange={(v: any) => state.fanMode = v}
-              maxFanSpeed={props.isSupportUVC ? 20 : 3}
-              onFanSpeedChangeComplete={(v) => state.fanSpeed = v}
-              onFanSwitch={(enable) => {
-                state.switchFan = enable
-              }}
-              isSupportMode={props.isSupportUVC}
-            />}
-          </> :
-          ( state.moodLoading ?
-              <LoadingView />
-              :
-            <FlatList
-            data={cloneDeep(moods)}
-            renderItem={({ item }) => {
-              return (
-                <MoodItem
-                  enable={modeId === item.id}
-                  mood={item}
-                  type={gradientMode === item.mode ? 'gradient' : 'separate'}
-                  onSwitch={async _ => {
-                    state.scene = getDpByScene(item)
-                  }} />
-              )
-            }}
-            ListHeaderComponent={() => (<Spacer height={cx(10)} />)}
-            ItemSeparatorComponent={() => (<Spacer />)}
-            ListFooterComponent={() => (<View style={{ marginHorizontal: cx(8) }}>
-              <Spacer height={cx(16)} />
-              <ApplyForDeviceList
-                devices={cloneDeep(groupDevices)}
-              />
-            </View>)}
-            keyExtractor={item => `${item.id}`} />
-          )
-        }
-        <Spacer height={cx(20)} />
-        <Text style={[styles.itemTitle, styles.cardContainer]}>{I18n.getLang('timeschedule_add_schedule_subheadline4_text')}</Text>
-        <View style={[styles.switchButton, styles.cardContainer]}>
-          <Text style={styles.text}>{I18n.getLang('timeschedule_add_schedule_text2')}</Text>
-          <SwitchButton
-            value={state.timeSchedule.isAppPush}
-            onValueChange={value => {
-              state.timeSchedule.isAppPush = value
-            }} />
-        </View>
-        <Spacer />
-
-        {/* summary */}
-        <Text style={[styles.itemTitle, styles.cardContainer]}>{I18n.getLang('add_sleepschedule_one_source_subheadline4_text')}</Text>
-        <Spacer height={cx(10)} />
-        <View style={styles.summaryContainer}>
-          <InfoText
-            icon={res.summary_icon1}
-            text={I18n.getLang('feature_summary_frequency_headline')}
-            iconStyle={styles.summaryImg}
-            textStyle={styles.leftTitle}
-            style={styles.summaryLeft}
-          />
-          <View style={styles.summaryRight}>
-            <Text style={styles.rightItem}>{loopText(state.timeSchedule.loops.split(''), state.timeSchedule.time)}</Text>
-          </View>
-        </View>
-        <View style={styles.summaryContainer}>
-          <InfoText
-            icon={res.summary_icon2}
-            text={I18n.getLang('feature_summary_time_headline')}
-            iconStyle={styles.summaryImg}
-            textStyle={styles.leftTitle}
-            style={styles.summaryLeft}
-          />
-          <View style={styles.summaryRight}>
-            <Text style={styles.rightItem}>{is24HourClock ? state.timeSchedule.time : convertTo12HourFormat(state.timeSchedule.time)}</Text>
-          </View>
-        </View>
-        <View style={[styles.summaryContainer, { alignItems: 'flex-start' }]}>
-          <InfoText
-            icon={res.summary_icon3}
-            text={I18n.getLang('motion_detection_add_time_schedule_actions_text1')}
-            iconStyle={styles.summaryImg}
-            textStyle={styles.leftTitle}
-            style={styles.summaryLeft}
-          />
-          <View style={{ marginLeft: cx(16), flex: 1 }}>
-            {!!getActionOnOff.on.length && <View>
-              <Text style={{ marginLeft: cx(5) }}>{I18n.getLang('feature_summary_action_txt_1')}</Text>
-              <View style={{ flexDirection: 'row', flexWrap: 'wrap' }}>{
-                getActionOnOff.on.map(item => (
-                  <View style={[styles.summaryRight, { marginLeft: cx(5), marginBottom: cx(5) }]}
-                    key={item}>
-                    <Text style={[styles.rightItem]}
-                    >{item}</Text>
-                  </View>
-                ))
-              }</View>
-            </View>}
-            {!!getActionOnOff.off.length && <View>
-              <Text style={{ marginLeft: cx(5) }}>{I18n.getLang('feature_summary_action_txt_2')}</Text>
-              <View style={{ flexDirection: 'row', flexWrap: 'wrap' }}>{
-                getActionOnOff.off.map(item => (
-                  <View style={[styles.summaryRight, { marginLeft: cx(5), marginBottom: cx(5) }]}
-                    key={item}>
-                    <Text style={[styles.rightItem]}
-                    >{item}</Text>
-                  </View>
-                ))}
-              </View>
-            </View>}
-          </View>
-        </View>
-        <Spacer height={cx(30)} />
-
-        {/* delete */}
-        {props.mode === 'edit' && <View style={{ marginHorizontal: cx(24) }}>
-          <DeleteButton
-            text={I18n.getLang('edit_timeschedule_bttn_text')}
-            onPress={() => {
-              showDialog({
-                method: 'confirm',
-                title: I18n.getLang('cancel_dialog_delete_item_timeschedule_titel'),
-                subTitle: I18n.getLang('cancel_dialog_delete_item_timeschedule_description'),
-                onConfirm: async (_, { close }) => {
-                  state.loading = true
-                  close()
-                  const res = await props.modDeleteTimeSchedule('del', {
-                    ...state.timeSchedule,
-                    status: 2
-                  }, state.timeSchedule.id.toString())
-                  state.loading = false
-                  if (res.success) {
-                    props.refreshFn()
-                    navigation.goBack()
-                  }
-                },
-              })
-            }}
-          />
-          <Spacer />
-        </View>}
-      </ScrollView>
-    </Page>
-  )
-}
-
-const newTimeSchedule = () => {
-  return {
-    status: 1,
-    loops: '0000000',
-    isAppPush: false,
-    aliasName: '',
-    time: `${toFixedString(new Date().getHours(), 2)}:${toFixedString(new Date().getMinutes(), 2)}`,
-    dps: '',
-    id: -1
-  }
-}
-
-const defaultHsv = () => {
-  return {
-    h: 0,
-    s: 50,
-    v: 80
-  }
-}
-type K = 0 | 1 | 3
-export interface StripState {
-  colorDiskActiveKey: number
-  colors: string[]
-  activeKey: K
-}
-
-const defaultStripState = (): StripState => {
-  return {
-    colorDiskActiveKey: 0,
-    colors: ColorList[0],
-    activeKey: 1,
-  }
-}
-
-const styles = StyleSheet.create({
-  cardContainer: {
-    marginHorizontal: cx(24)
-  },
-  itemTitle: {
-    color: '#000',
-    fontSize: cx(16),
-    fontWeight: 'bold',
-    fontFamily: 'helvetica_neue_lt_std_bd',
-  },
-  summaryContainer: {
-    flexDirection: 'row',
-    justifyContent: 'flex-start',
-    marginBottom: cx(10),
-    marginHorizontal: cx(24)
-  },
-  summaryImg: {
-    height: cx(12),
-    width: cx(12),
-    tintColor: '#000'
-  },
-  summaryLeft: {
-    flexDirection: 'row',
-    alignItems: 'center',
-    minWidth: cx(90),
-  },
-  leftTitle: {
-    fontSize: cx(14),
-    color: '#000',
-    marginTop: 0
-  },
-  summaryRight: {
-    flexDirection: 'column',
-    marginLeft: cx(21),
-    backgroundColor: '#cbcbcb',
-    borderRadius: cx(16),
-  },
-  rightItem: {
-    paddingHorizontal: cx(12),
-    color: '#000',
-  },
-  switchButton: {
-    flexDirection: 'row',
-    alignItems: 'center',
-    justifyContent: 'space-between',
-    marginBottom: cx(10),
-  },
-  text: {
-    color: '#000',
-  },
-})
-
-export default TimeScheduleDetailPage