@ledvance/ui-biz-bundle 1.1.123 → 1.1.125

package/src/modules/sleepWakeup/SleepWakeUpDetailPage.tsx

@@ -1,617 +0,0 @@
-import React, { useCallback, useEffect } from "react";
-import { FlatList, ScrollView, StyleSheet, Text, View, TouchableOpacity, Image } 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 res from "@ledvance/base/src/res";
-import { Utils } from "tuya-panel-kit";
-import { useReactive, useUpdateEffect } from "ahooks";
-import TextField from "@ledvance/base/src/components/TextField";
-import LdvTopName from "@ledvance/base/src/components/ldvTopName";
-import LdvPickerView from "@ledvance/base/src/components/ldvPickerView";
-import LdvWeekView from '@ledvance/base/src/components/weekSelect'
-import { loopText, toFixed } from "@ledvance/base/src/utils/common";
-import DeviceState from "./DeviceState";
-import Spacer from "@ledvance/base/src/components/Spacer";
-import DeleteButton from "@ledvance/base/src/components/DeleteButton";
-import { SleepWakeUpPageRouteParams } from "./SleepWakeUpPage";
-import LdvSwitch from "@ledvance/base/src/components/ldvSwitch";
-import { cloneDeep, isEqual } from "lodash";
-import dayjs from "dayjs";
-
-const { convertX: cx } = Utils.RatioUtils;
-
-interface SleepWakeUpDetailPageProps extends SleepWakeUpPageRouteParams {
-  mode: 'add' | 'edit'
-  isSleep: boolean
-  scheduleItem: any
-  setSleepPlan: (plan: any[]) => void
-  setWakeUpPlan: (plan: any[]) => void
-  conflictFn: (item: any, editList: any[], goback: boolean) => void
-  deleteDialog: (item: any) => Promise<any>
-  sleepPlan: any[]
-  wakeUpPlan: any[]
-}
-
-const SleepWakeUpDetailPage = () => {
-  const navigation = useNavigation()
-  const props = useRoute().params as SleepWakeUpDetailPageProps
-  const { scheduleItem } = props
-  const state = useReactive({
-    name: '',
-    hour: '00',
-    minute: '01',
-    loop: [0, 0, 0, 0, 0, 0, 0],
-    selectedSkill: props.dps,
-    skillList: [] as any[],
-    fadeOut: 5,
-    fadeIn: 5,
-    duration: 5,
-    fadeOutHour: '00',
-    fadeOutMinute: '05',
-    fadeInHour: '00',
-    fadeInMinute: '05',
-    durationHour: '00',
-    durationMinute: '05',
-    durationStatus: false,
-    mixActions: {
-      whiteLightSwitch: true,
-      colorLightSwitch: false,
-      mixRgbcwEnabled: true,
-      hue: 360,
-      sat: 100,
-      lightness: 100,
-      brightness: 100,
-      colorTempPercent: 100,
-    },
-    singleActions: {
-      isColor: false,
-      brightness: 100,
-      temperature: 100,
-      h: 0,
-      s: 100,
-      v: 100
-    }
-  })
-
-  useEffect(() => {
-    if (props.mode === 'edit' && scheduleItem) {
-      console.log(scheduleItem, '< -- scheduleItem')
-      state.hour = scheduleItem.time[0].toString().padStart(2, '0')
-      state.minute = scheduleItem.time[1].toString().padStart(2, '0')
-      state.name = scheduleItem.name
-      state.loop = scheduleItem.loops
-
-      state.singleActions.isColor = scheduleItem.brightness === 0 && scheduleItem.temperature === 0
-      if (state.singleActions.isColor) {
-        state.singleActions.h = scheduleItem.hue
-        state.singleActions.s = scheduleItem.sat
-        state.singleActions.v = scheduleItem.value
-      } else {
-        state.singleActions.brightness = scheduleItem.brightness
-        state.singleActions.temperature = scheduleItem.temperature
-      }
-
-      if (props.isMixRGBWLamp) {
-        state.mixActions.hue = scheduleItem.hue
-        state.mixActions.sat = scheduleItem.sat
-        state.mixActions.lightness = scheduleItem.value
-        state.mixActions.colorLightSwitch = !scheduleItem.brightness && !scheduleItem.colorTempPercent
-        state.mixActions.brightness = scheduleItem.brightness
-        state.mixActions.colorTempPercent = scheduleItem.temperature
-      }
-
-      const h = Math.trunc(scheduleItem.fade / 60)
-      const m = scheduleItem.fade % 60
-
-      if (props.isSleep) {
-        state.fadeOut = scheduleItem.fade
-        state.fadeOutHour = h.toString().padStart(2, '0')
-        state.fadeOutMinute = m.toString().padStart(2, '0')
-      } else {
-        state.fadeIn = scheduleItem.fade
-        state.fadeInHour = h.toString().padStart(2, '0')
-        state.fadeInMinute = m.toString().padStart(2, '0')
-        state.duration = scheduleItem.duration
-        state.durationStatus = scheduleItem.duration > 0
-        state.durationHour = Math.trunc(scheduleItem.duration / 60).toString().padStart(2, '0')
-        state.durationMinute = (scheduleItem.duration % 60).toString().padStart(2, '0')
-      }
-    } else {
-      const date = new Date()
-      state.hour = toFixed(date.getHours(), 2)
-      state.minute = toFixed(date.getMinutes(), 2)
-      state.singleActions.isColor = !!props.isGARDOT && !(props.isRGBLamp || props.isRGBWLamp)
-    }
-  }, [])
-
-  useUpdateEffect(() => {
-    const min = state.fadeOutHour === '02' ? '00' : (state.fadeOutHour === '00' && state.fadeOutMinute === '00') ? '05' : state.fadeOutMinute
-    state.fadeOutMinute = min
-    state.fadeOut = (Number(state.fadeOutHour) * 60) + Number(min)
-  }, [state.fadeOutHour, state.fadeOutMinute])
-
-  useUpdateEffect(() => {
-    const min = state.fadeInHour === '02' ? '00' : (state.fadeInHour === '00' && state.fadeInMinute === '00') ? '05' : state.fadeInMinute
-    state.fadeInMinute = min
-    state.fadeIn = (Number(state.fadeInHour) * 60) + Number(min)
-  }, [state.fadeInHour, state.fadeInMinute])
-
-  useUpdateEffect(() => {
-    const min = state.durationHour === '02' ? '00' : (state.durationHour === '00' && state.durationMinute === '00') ? '05' : state.durationMinute
-    state.durationMinute = min
-    state.duration = (Number(state.durationHour) * 60) + Number(min)
-  }, [state.durationHour, state.durationMinute])
-
-  const getNewItem = () =>{
-    return {
-      enable: 1,
-      loops: state.loop,
-      time: [parseInt(state.hour), parseInt(state.minute)],
-      hue: state.singleActions.isColor ? state.singleActions.h : 0,
-      sat: state.singleActions.isColor ? state.singleActions.s : 0,
-      value: state.singleActions.isColor ? state.singleActions.v : 0,
-      brightness: state.singleActions.isColor ? 0 : state.singleActions.brightness,
-      temperature: state.singleActions.isColor ? 0 : state.singleActions.temperature,
-      name: state.name,
-      isSleep: props.isSleep,
-      fade: props.isSleep ? state.fadeOut : state.fadeIn
-    }
-  }
-
-  const postActions = async () => {
-    const baseItemData: any = getNewItem()
-    if (props.mode === 'edit') baseItemData.index = scheduleItem.index
-
-    if (props.isMixRGBWLamp) {
-      baseItemData.hue = state.mixActions.colorLightSwitch ? state.mixActions.hue : 0
-      baseItemData.sat = state.mixActions.colorLightSwitch ? state.mixActions.sat : 0
-      baseItemData.value = state.mixActions.colorLightSwitch ? state.mixActions.lightness : 0
-      baseItemData.brightness = state.mixActions.colorLightSwitch ? 0 : state.mixActions.brightness
-      baseItemData.temperature = state.mixActions.colorLightSwitch ? 0 : state.mixActions.colorTempPercent
-    }
-    if (!props.isSleep) {
-      baseItemData.duration = state.durationStatus && state.duration || 0
-    }
-    const baseList = props.isSleep ? props.sleepPlan : props.wakeUpPlan
-    if (props.mode === 'add') {
-      const newList = [...baseList, baseItemData]
-      props.conflictFn(baseItemData, newList, true)
-    } else {
-      const idx = baseList.findIndex(item => item.index === scheduleItem.index)
-      if (idx !== -1) {
-        baseList.splice(idx, 1, baseItemData)
-      }
-      props.conflictFn(baseItemData, baseList, true)
-    }
-  }
-
-  const selectWeekAction = useCallback((idx: number) => {
-    const newLoop = state.loop.map((item, tempIndex) => {
-      if (tempIndex === idx - 1) {
-        return item > 0 ? 0 : 1;
-      }
-      return item;
-
-    });
-    state.loop = newLoop;
-  }, [])
-
-  const showClearIcon = useCallback(() => {
-    return false
-  }, [])
-
-  const showSubmit = useCallback(() => {
-    return state?.name?.length > 0 && state?.name?.length <= 32 && hasSelected()
-  }, [state.name])
-
-  const handelSkill = (v, i) => {
-
-  }
-
-  const hasSelected = () => {
-    return !!state.selectedSkill.length
-  }
-
-
-
-  const renderItem = ({ item }) => {
-    return (
-      <View style={{
-        flexDirection: 'row',
-        justifyContent: 'space-between',
-        alignItems: 'center',
-        backgroundColor: '#fff',
-        marginBottom: cx(8)
-      }}>
-        <Text
-          style={{
-            color: '#000',
-            fontSize: 14,
-            marginHorizontal: cx(6),
-            marginVertical: cx(9),
-          }}
-        >
-          {item.label}
-        </Text>
-        {showClearIcon() && <TouchableOpacity onPress={() => handelSkill('lower', item)}>
-          <Image style={{ width: cx(16), height: cx(16), marginRight: cx(5) }} source={res.ic_arrows_nav_clear} />
-        </TouchableOpacity>}
-      </View>
-    );
-  };
-
-  const editMixActions = (mix) => {
-    state.mixActions = cloneDeep(mix)
-  }
-
-  const editSingleActions = (single) => {
-    state.singleActions = cloneDeep(single)
-  }
-
-  const formateTime = (v, isSleep) => {
-    const date = dayjs().format('YYYY-MM-DD')
-    const time = dayjs(`${date} ${state.hour}:${state.minute}`)
-    return isSleep ? time.add(Number(v), 'm').format('HH:mm') : time.subtract(Number(v), 'm').format('HH:mm')
-  }
-
-  const formateDurationTime = () => {
-    const duration = state.durationStatus && Number(state.duration) || 0
-    const date = dayjs().format('YYYY-MM-DD')
-    const time = dayjs(`${date} ${state.hour}:${state.minute}`)
-    const startTime = props.isSleep ? time.format('HH:mm') : time.subtract(state.fadeIn, 'm').format('HH:mm')
-    const data = props.isSleep ? Number(state.fadeOut) : duration
-    const endTime = time.add(data, 'm').format('HH:mm')
-    return {
-      durationTime: `${startTime} - ${endTime}`,
-      endTime
-    }
-  }
-
-  const showBackDialog = () =>{
-    const newItem:any = {
-      ...getNewItem(),
-      index: props.scheduleItem?.index,
-      enable: props.scheduleItem?.enable
-    }
-    if(!props.isSleep){
-      newItem.duration = state.durationStatus && state.duration || 0
-    }
-    return props.mode === 'edit' && !isEqual(props.scheduleItem, newItem)
-  }
-
-
-
-  return (
-    <Page
-      backText={I18n.getLang('add_sleepschedule_one_source_system_back_text')}
-      showBackDialog={showBackDialog()}
-      backDialogTitle={I18n.getLang('cancel_dialog_leave_unsaved_titel')}
-      backDialogContent={I18n.getLang(props.isSleep ? 'cancel_dialog_leave_unsaved_sleepschedule_note' : 'cancel_dialog_leave_unsaved_wakeupschedule_note')}
-      rightButtonIcon={showSubmit() ? res.ic_check : res.ic_uncheck}
-      rightButtonIconClick={showSubmit() && postActions || undefined}
-    >
-      <ScrollView
-        nestedScrollEnabled={true}
-        showsHorizontalScrollIndicator={false}
-        showsVerticalScrollIndicator={false}
-      >
-        <LdvTopName title={I18n.getLang(props.isSleep ? (props.mode === 'add' ? 'add_sleepschedule_one_source_headline_text' : 'edit_sleepschedule_headline_text') : (props.mode === 'add' ? 'add_wakeupschedule_one_source_headline_text' : 'edit_wakeupschedule_headline_text'))} />
-        <TextField
-          style={styles.cardContainer}
-          value={state.name}
-          showError={state.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.name = t;
-          }}
-        />
-        {/* pick */}
-        <LdvPickerView
-          style={styles.picker}
-          hour={state.hour}
-          minute={state.minute}
-          setHour={v => (state.hour = v)}
-          setMinute={v => (state.minute = v)}
-        // unit={['h', 'min']}
-        />
-
-        {/* week */}
-        <View style={styles.week}>
-          <LdvWeekView style={{}} value={state.loop} onSelect={selectWeekAction} />
-          <Spacer />
-          <Text style={{ marginHorizontal: cx(24) }}>{loopText(state.loop)}</Text>
-          <Spacer />
-        </View>
-
-        {/* Apply for */}
-        <View style={styles.cardContainer}>
-          <Text style={styles.itemTitle}>{I18n.getLang('timeschedule_add_schedule_subheadline_text')}</Text>
-          <View
-            style={{
-              backgroundColor: '#f6f6f6',
-              borderRadius: 4,
-              minHeight: cx(50),
-              flex: 1,
-              justifyContent: 'center',
-            }}
-          >
-            {!hasSelected() ? <Text style={{ marginLeft: cx(10) }}>{I18n.getLang('timer_ceiling_fan_selectionfield_no_components_text')}</Text> :
-              <View
-                style={{
-                  marginHorizontal: cx(8),
-                  marginTop: cx(8),
-                  borderRadius: 4,
-                }}
-              >
-                <FlatList
-                  data={state.selectedSkill}
-                  renderItem={item => renderItem(item)}
-                  keyExtractor={(item) => item.dpId + 'selected'}
-                />
-              </View>}
-          </View>
-          {state.skillList.map((item) => {
-            return (
-              <TouchableOpacity style={styles.skillListItem} key={item.dpId + 'skill'} onPress={() => handelSkill('add', item)}>
-                <Text style={{ color: '#000' }}>{item.label}</Text>
-                <Image style={{ width: cx(16), height: cx(16) }} source={res.device_panel_timer_add} />
-              </TouchableOpacity>
-            )
-          })}
-          <Spacer />
-        </View>
-
-        {/* Device state */}
-        <View>
-          <Text style={[styles.itemTitle, styles.cardContainer]}>{I18n.getLang('timeschedule_add_schedule_subheadline2_text')}</Text>
-          <DeviceState
-            mixActions={state.mixActions}
-            singleActions={state.singleActions}
-            editMixFn={editMixActions}
-            editSingleFn={editSingleActions}
-            isSupportColor={props.isSupportColor}
-            isSupportBrightness={true}
-            isSupportTemperature={true}
-            isMixRGBWLamp={props.isMixRGBWLamp}
-          />
-        </View>
-        <Spacer />
-        {/* Settings */}
-        <View style={styles.cardContainer}>
-          <Text style={styles.itemTitle}>{I18n.getLang('timeschedule_add_schedule_subheadline4_text')}</Text>
-          <Spacer />
-          <Text>{I18n.getLang(props.isSleep ? 'add_sleepschedule_one_source_settings_text' : 'add_wakeupschedule_settings_text')}</Text>
-          <LdvPickerView
-            style={styles.picker}
-            hour={props.isSleep ? state.fadeOutHour : state.fadeInHour}
-            minute={props.isSleep ? state.fadeOutMinute : state.fadeInMinute}
-            minutesStep={5}
-            setHour={v => {
-              if (props.isSleep) {
-                state.fadeOutHour = v
-              } else {
-                state.fadeInHour = v
-              }
-            }}
-            setMinute={v => {
-              if (props.isSleep) {
-                state.fadeOutMinute = v
-              } else {
-                state.fadeInMinute = v
-              }
-            }}
-            unit={['h', 'min']}
-            maxHour={3}
-          />
-          <Text>{I18n.formatValue(props.isSleep ? 'add_sleepschedule_one_source_settings_text2' : 'add_wakeupschedule_settings_text2', `${formateTime(props.isSleep ? state.fadeOut : state.fadeIn, props.isSleep)}`)}</Text>
-          <Spacer />
-          {!props.isSleep &&
-            <View style={{ marginHorizontal: -cx(16), marginTop: -cx(20) }}>
-              <LdvSwitch
-                title={I18n.getLang('add_wakeupschedule_settings_text3')}
-                enable={state.durationStatus}
-                color="#fff"
-                colorAlpha={1}
-                setEnable={() => {
-                  state.durationStatus = !state.durationStatus
-                  state.duration = 5
-                  state.durationHour = '00'
-                  state.durationMinute = '05'
-                  if (!state.durationStatus) {
-                    state.duration = 0
-                  }
-                }}
-              />
-            </View>
-          }
-          {state.durationStatus && <>
-            <Text style={{ fontSize: cx(14) }}>{I18n.getLang('add_wakeupschedule_settings_text4')}</Text>
-            <LdvPickerView
-              style={styles.picker}
-              hour={state.durationHour}
-              minutesStep={5}
-              minute={state.durationMinute}
-              setHour={v => (state.durationHour = v)}
-              setMinute={v => (state.durationMinute = v)}
-              unit={['h', 'min']}
-              maxHour={3}
-            />
-            <Text>{I18n.formatValue('add_wakeupschedule_settings_text5', `${formateTime(state.duration, !props.isSleep)}`)}</Text>
-            <Spacer />
-          </>}
-        </View>
-        {/* Summary */}
-        <View style={styles.cardContainer}>
-          <Text style={styles.itemTitle}>{I18n.getLang('add_randomtimecycle_subheadline_text')}</Text>
-          <View style={styles.summaryContainer}>
-            <View style={styles.summaryLeft}>
-              <Image
-                source={res.summary_icon1}
-                resizeMode="contain"
-                style={styles.summaryImg}
-              />
-              <View>
-                <Text style={styles.leftTitle}>{I18n.getLang('feature_summary_frequency_headline')}</Text>
-              </View>
-            </View>
-            <View style={styles.summaryRight}>
-              <Text style={styles.rightItem}>{loopText(state.loop)}</Text>
-            </View>
-          </View>
-          <View style={styles.summaryContainer}>
-            <View style={styles.summaryLeft}>
-              <Image
-                source={res.summary_icon2}
-                resizeMode="contain"
-                style={styles.summaryImg}
-              />
-              <View>
-                <Text style={styles.leftTitle}>{I18n.getLang('feature_summary_time_headline')}</Text>
-              </View>
-            </View>
-            <View style={styles.summaryRight}>
-              <Text style={styles.rightItem}>{formateDurationTime().durationTime}</Text>
-            </View>
-          </View>
-          <View style={[styles.summaryContainer, { alignItems: 'flex-start' }]}>
-            <View style={styles.summaryLeft}>
-              <Image
-                source={res.summary_icon3}
-                resizeMode="contain"
-                style={styles.summaryImg}
-              />
-              <View>
-                <Text style={styles.leftTitle}>{I18n.getLang('motion_detection_add_time_schedule_actions_text1')}</Text>
-              </View>
-            </View>
-            <View style={{ marginLeft: cx(24), flex: 3 }}>
-              <Text style={{ fontSize: cx(12), color: '#000000' }}>{I18n.getLang(!props.isSleep ? 'feature_summary_action_txt_11' : 'feature_summary_action_txt_10')}</Text>
-              <View style={{ flexDirection: 'row' }}>
-                {
-                  props.isMixRGBWLamp &&
-                  <>
-                    {
-                      state.mixActions.whiteLightSwitch &&
-                      <View style={styles.filletCorner}>
-                        <Text style={styles.rightTitle}>{state.selectedSkill[0]?.label}</Text>
-                      </View>
-                    }
-                    {
-                      state.mixActions.colorLightSwitch &&
-                      <View style={[styles.filletCorner, { marginLeft: cx(4) }]}>
-                        <Text style={styles.rightTitle}>{state.selectedSkill[1]?.label}</Text>
-                      </View>
-                    }
-                  </> ||
-                  <View style={styles.filletCorner}>
-                    <Text style={styles.rightTitle}>{state.selectedSkill[0]?.label}</Text>
-                  </View>
-                }
-              </View>
-              <Text style={{ fontSize: cx(12), color: '#000000' }}>{I18n.getLang(
-                props.isSleep ? 'feature_summary_action_txt_2' :
-                  (state.durationStatus ? 'feature_summary_action_txt_12' : 'feature_summary_action_txt_1')
-              )}</Text>
-              <View style={styles.filletCorner}>
-                <Text style={styles.rightTitle}>{formateDurationTime().endTime}</Text>
-              </View>
-            </View>
-          </View>
-        </View>
-        <Spacer />
-        {/* Delete btn */}
-        {props.mode === 'edit' &&
-          <View style={styles.cardContainer}>
-            <DeleteButton
-              text={I18n.getLang('edit_timeschedule_bttn_text')}
-              onPress={() => {
-                props.deleteDialog(scheduleItem).then(() => {
-                  navigation.goBack()
-                })
-              }}
-            />
-          </View>
-        }
-        <Spacer />
-      </ScrollView>
-    </Page>
-  )
-}
-
-const styles = StyleSheet.create({
-  cardContainer: {
-    marginHorizontal: cx(24)
-  },
-  textField: {
-    marginHorizontal: cx(24)
-  },
-  picker: {
-    marginHorizontal: cx(24),
-    marginVertical: cx(15),
-    color: 'rgb(35,35,38)',
-  },
-  week: {
-
-  },
-  itemTitle: {
-    color: '#000',
-    fontSize: cx(16),
-    fontWeight: 'bold',
-    fontFamily: 'helvetica_neue_lt_std_bd',
-    marginBottom: cx(10)
-  },
-  skillListItem: {
-    flexDirection: 'row',
-    justifyContent: 'space-between',
-    height: cx(30),
-    alignItems: 'center',
-    marginVertical: cx(5)
-  },
-  summaryContainer: {
-    flexDirection: 'row',
-    justifyContent: 'flex-start',
-    marginBottom: cx(10)
-  },
-  summaryImg: {
-    height: cx(12),
-    width: cx(12),
-    marginRight: cx(6)
-  },
-  summaryLeft: {
-    flexDirection: 'row',
-    alignItems: 'center',
-    minWidth: cx(90),
-  },
-  leftTitle: {
-    fontSize: cx(14),
-    color: '#000',
-  },
-  summaryRight: {
-    flexDirection: 'column',
-    marginLeft: cx(21),
-    borderRadius: cx(16),
-    backgroundColor: '#cbcbcb',
-  },
-  rightItem: {
-    paddingHorizontal: cx(12),
-    color: '#000',
-  },
-  rightTitle: {
-    paddingLeft: cx(12),
-    paddingRight: cx(12),
-    fontSize: cx(10),
-    textAlign: 'center',
-    alignSelf: 'flex-start'
-  },
-  filletCorner: {
-    flexDirection: 'row',
-    backgroundColor: '#cbcbcb',
-    borderRadius: cx(16),
-    alignSelf: 'flex-start'
-  }
-})
-
-export default SleepWakeUpDetailPage

package/src/modules/sleepWakeup/SleepWakeUpPage.d.ts

@@ -1,13 +0,0 @@
-import { JudgeTimeScheduleProps } from "../timeSchedule/TimeScheduleBean";
-type dpItem = {
-    label: string;
-    value: string;
-    dpId: string;
-};
-export interface SleepWakeUpPageRouteParams extends JudgeTimeScheduleProps {
-    dps: dpItem[];
-    dpCodes: Record<string, string>;
-    getDpValue?: (v: any) => any;
-}
-declare const SleepWakeUpPage: () => any;
-export default SleepWakeUpPage;