@ledvance/ui-biz-bundle 1.1.56 → 1.1.58

package/src/newModules/randomTime/RandomTimePage.tsx

@@ -0,0 +1,230 @@
+import React, { useCallback } from 'react'
+import { FlatList, Image, ScrollView, StyleSheet, Text, View } from 'react-native'
+import Page from '@ledvance/base/src/components/Page'
+import { useDeviceInfo, useSystemTimeFormate } from '@ledvance/base/src/models/modules/NativePropsSlice'
+import { useNavigation, useRoute } from '@react-navigation/core'
+import I18n from '@ledvance/base/src/i18n'
+import res from '@ledvance/base/src/res'
+import { ui_biz_routerKey } from '../../navigation/Routers'
+import { useReactive, useUpdateEffect } from 'ahooks'
+import Spacer from '@ledvance/base/src/components/Spacer'
+import TextButton from '@ledvance/base/src/components/TextButton'
+import { SwitchButton, Utils } from 'tuya-panel-kit'
+import { RandomTimerUiItem, useRandomTime } from './RandomTimeActions'
+import Card from '@ledvance/base/src/components/Card'
+import { convertMinutesTo12HourFormat, loopText } from '@ledvance/base/src/utils/common'
+import { cloneDeep } from 'lodash'
+import dayjs from 'dayjs'
+
+const { convertX: cx } = Utils.RatioUtils
+const { parseTimer } = Utils.TimeUtils
+const MAX_NUM = 10
+
+export interface RandomTimePageParams {
+  randomTimeDpCode: string
+  conflictDps: {
+    fixedTimeDp?: string
+    biorhythmDp?: string
+    sleepWakeUpDp?: string
+  }
+  isPlug?: boolean
+  showTags?: boolean
+  applyDps: {
+    label: string
+    value: string
+  }[]
+  isSupportColor: boolean
+  isSupportTemperature: boolean
+  isSupportBrightness: boolean
+}
+
+const RandomTimePage = () => {
+  const navigation = useNavigation()
+  const devInfo = useDeviceInfo()
+  const params = useRoute().params as RandomTimePageParams
+  const is24Hour = useSystemTimeFormate()
+  const [randomTime, setRandomTime] = useRandomTime(params.randomTimeDpCode, params.isPlug)
+  const state = useReactive({
+    loading: false,
+    randomTimeList: cloneDeep(randomTime),
+  })
+
+  useUpdateEffect(() => {
+    state.randomTimeList = cloneDeep(randomTime)
+  }, [randomTime])
+
+  const navigateToEdit = useCallback((mode: 'add' | 'edit', scheduleItem?: RandomTimerUiItem) => {
+    navigation.navigate(ui_biz_routerKey.ui_biz_random_time_edit_new, {
+      ...params,
+      mode,
+      scheduleItem: cloneDeep(scheduleItem),
+      onPost,
+    })
+  }, [])
+
+  const showMaxNumTip = useCallback(() => {
+    return state.randomTimeList.length >= MAX_NUM
+  }, [state.randomTimeList.length])
+
+  const onPost = useCallback(async (mode: 'add' | 'edit' | 'del', randomTime: RandomTimerUiItem) => {
+    const cloneRandomTime = cloneDeep(state.randomTimeList)
+    const idx = state.randomTimeList.findIndex(f => f.index === randomTime.index)
+    if (mode === 'edit') {
+      cloneRandomTime.splice(idx, 1, randomTime)
+    }
+    if (mode === 'del') cloneRandomTime.splice(idx, 1)
+    const newRandomTimeList = mode === 'add' ? [...state.randomTimeList, randomTime] : cloneRandomTime
+    return setRandomTime(newRandomTimeList)
+  }, [state.randomTimeList])
+
+  return (
+    <Page
+      backText={devInfo.name}
+      headlineText={I18n.getLang('randomtimecycle_sockets_headline_text')}
+      headlineIcon={!showMaxNumTip() ? res.device_panel_schedule_add : undefined}
+      onBackClick={navigation.goBack}
+      loading={state.loading}
+      onHeadlineIconClick={() => {
+        navigateToEdit('add', newRandomTime())
+      }}
+    >
+      {state.randomTimeList.length > 0 ?
+        <ScrollView nestedScrollEnabled={true}>
+          <Text style={{
+            color: '#000',
+            marginLeft: cx(24),
+          }}>{I18n.getLang('timeschedule_overview_description_text')}</Text>
+          <Spacer height={cx(10)} />
+          {showMaxNumTip() && <View style={{ marginHorizontal: cx(24), flexDirection: 'row' }}>
+            <Image style={{ width: cx(16), height: cx(16), tintColor: '#ff9500' }} source={res.ic_warning_amber} />
+            <Text>{I18n.getLang('randomtimecycle_warning_max_number_text')}</Text>
+          </View>}
+          <FlatList
+            data={state.randomTimeList}
+            renderItem={({ item }) => (
+              <RandomTimeCard
+                is24Hour={is24Hour}
+                randomTime={item}
+                onSwitch={async (v) => {
+                  state.loading = true
+                  await onPost('edit', {
+                    ...item,
+                    enable: v,
+                  })
+                  state.loading = false
+                }}
+                onPress={() => {
+                  navigateToEdit('edit', item)
+                }}
+              />
+            )}
+            keyExtractor={(item: any) => `${item?.index}`}
+            ItemSeparatorComponent={() => <Spacer />}
+            ListHeaderComponent={<Spacer height={cx(10)} />}
+            ListFooterComponent={<Spacer />}
+          />
+        </ScrollView> :
+        <View style={{ flex: 1, marginTop: cx(60), alignItems: 'center' }}>
+          <Image
+            style={{ width: cx(225), height: cx(198) }}
+            source={{ uri: res.ldv_timer_empty }}
+            resizeMode="contain" />
+          <View style={{ flexDirection: 'row', alignItems: 'center' }}>
+            <Image
+              source={{ uri: res.device_panel_schedule_alert }}
+              style={{ width: cx(16), height: cx(16) }}
+            />
+            <Text style={{ color: '#000', fontSize: cx(12) }}>
+              {I18n.getLang('randomtimecycle_empty_information_text')}
+            </Text>
+          </View>
+          <Spacer />
+          <TextButton
+            text={I18n.getLang('randomtimecycle_empty_bttn_text')}
+            style={{
+              backgroundColor: '#f60',
+              borderRadius: cx(6),
+              paddingVertical: cx(12),
+              paddingHorizontal: cx(24),
+            }}
+            textStyle={{ color: '#fff' }}
+            onPress={() => {
+              navigateToEdit('add', newRandomTime())
+            }} />
+        </View>
+      }
+    </Page>
+  )
+}
+
+const RandomTimeCard = (props: {
+  is24Hour: boolean
+  randomTime: RandomTimerUiItem,
+  onSwitch: (enable: boolean) => void,
+  onPress: () => void
+}) => {
+  const { is24Hour, randomTime, onSwitch, onPress } = props
+  return (
+    <Card style={styles.randomTimingCard} onPress={onPress}>
+      <Spacer height={cx(16)} />
+      <View style={styles.switchLine}>
+        <Text style={styles.time}>
+          {`${convertMinutesTo12HourFormat(randomTime.startTime, is24Hour)} - ${convertMinutesTo12HourFormat(randomTime.endTime, is24Hour)}`}</Text>
+        <SwitchButton
+          style={styles.switchBtn}
+          value={randomTime.enable}
+          thumbStyle={{ elevation: 0 }}
+          onValueChange={onSwitch} />
+      </View>
+      <Text style={styles.loopText}>{loopText(randomTime.weeks, parseTimer(randomTime.startTime * 60))}</Text>
+      <Spacer height={cx(5)} />
+      <Text style={styles.loopText}>{randomTime.name}</Text>
+      <Spacer />
+    </Card>
+  )
+}
+
+const newRandomTime = () => {
+  const startTime = dayjs().hour() * 60 + dayjs().minute()
+  return {
+    name: '',
+    enable: true,
+    weeks: [0, 0, 0, 0, 0, 0, 0],
+    startTime: startTime,
+    endTime: startTime + 60,
+    channel: 1,
+    color: {
+      h: 0,
+      s: 100,
+      v: 100,
+      brightness: 100,
+      temperature: 0,
+    }
+  }
+}
+
+const styles = StyleSheet.create({
+  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',
+  },
+})
+
+export default RandomTimePage

package/src/newModules/randomTime/Router.ts

@@ -0,0 +1,25 @@
+import {NavigationRoute} from "tuya-panel-kit";
+import NewRandomTimePage from "./RandomTimePage";
+import NewRandomTimeDetailPage from "./RandomTimeDetailPage";
+import {ui_biz_routerKey} from "../../navigation/Routers";
+
+const NewRandomTimePageRouters: NavigationRoute[] = [
+  {
+    name: ui_biz_routerKey.ui_biz_random_time_new,
+    component: NewRandomTimePage,
+    options: {
+      hideTopbar: true,
+      showOfflineView: false,
+    },
+  },
+  {
+    name: ui_biz_routerKey.ui_biz_random_time_edit_new,
+    component: NewRandomTimeDetailPage,
+    options: {
+      hideTopbar: true,
+      showOfflineView: false,
+    },
+  }
+]
+
+export default NewRandomTimePageRouters

package/src/newModules/randomTime/Summary.tsx

@@ -0,0 +1,116 @@
+import React, { ReactElement, memo } from "react";
+import { Text, ViewStyle, View, StyleSheet } from 'react-native'
+import res from "@ledvance/base/src/res"
+import I18n from "@ledvance/base/src/i18n";
+import { Utils } from "tuya-panel-kit";
+import Spacer from "@ledvance/base/src/components/Spacer";
+import InfoText from "@ledvance/base/src/components/InfoText";
+
+const { convertX: cx } = Utils.RatioUtils;
+
+interface SummaryProps {
+  style?: ViewStyle
+  frequency?: string | ReactElement
+  time?: string | ReactElement
+  actions?: ReactElement
+  hideActions?: boolean
+}
+
+const Summary = (props: SummaryProps) => {
+  return (
+    <View style={styles.cardContainer}>
+      <Text style={styles.itemTitle}>{I18n.getLang('add_randomtimecycle_subheadline_text')}</Text>
+      <Spacer height={cx(10)} />
+      <View style={{}}>
+        <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}>
+            <View style={styles.rightWrap}>
+              <Text style={styles.rightItem}>{props.frequency}</Text>
+            </View>
+          </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}>
+            <View style={styles.rightWrap}>
+              <Text style={styles.rightItem}>{props.time}</Text>
+            </View>
+          </View>
+        </View>
+        {!props.hideActions && <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={styles.summaryRight}>
+            {props.actions}
+          </View>
+        </View>}
+      </View>
+    </View>
+  )
+}
+
+const styles = StyleSheet.create({
+  cardContainer: {
+    marginHorizontal: cx(24),
+  },
+  itemTitle: {
+    color: '#000',
+    fontSize: cx(16),
+    fontWeight: 'bold',
+    fontFamily: 'helvetica_neue_lt_std_bd',
+  },
+  summaryContainer: {
+    flex: 1,
+    flexDirection: 'row',
+    marginBottom: cx(10),
+  },
+  summaryLeft: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    minWidth: cx(100)
+  },
+  summaryImg: {
+    width: cx(12),
+    height: cx(12),
+    marginRight: cx(6)
+  },
+  leftTitle: {
+    fontSize: cx(14),
+    color: '#000'
+  },
+  summaryRight: {
+    flex: 1,
+    flexDirection: 'column',
+    marginLeft: cx(15),
+    marginTop: cx(5)
+  },
+  rightWrap: {
+    borderRadius: cx(16),
+    paddingHorizontal: cx(12),
+    alignSelf: 'flex-start',
+    backgroundColor: '#cbcbcb',
+  },
+  rightItem: {
+    color: '#000',
+  },
+})
+
+export default memo(Summary)

package/src/newModules/swithInching/Router.ts

@@ -0,0 +1,16 @@
+import {NavigationRoute} from "tuya-panel-kit";
+import SwitchInching from "./SwithInching";
+import {ui_biz_routerKey} from "../../navigation/Routers";
+
+const SwitchInchingPageRouters: NavigationRoute[] = [
+  {
+    name: ui_biz_routerKey.ui_biz_switch_inching,
+    component: SwitchInching,
+    options:{
+      hideTopbar: true,
+      showOfflineView: false,
+    }
+  }
+]
+
+export default SwitchInchingPageRouters

package/src/newModules/swithInching/SwithInching.tsx

@@ -0,0 +1,231 @@
+import React, { useEffect } from "react";
+import { StyleSheet, Text, View } from "react-native";
+import Page from "@ledvance/base/src/components/Page";
+import { useDeviceInfo } from "@ledvance/base/src/models/modules/NativePropsSlice";
+import { useNavigation } from '@react-navigation/native'
+import { SwitchButton, Utils, Dialog } from "tuya-panel-kit";
+import LdvPickerView from "./pickerView";
+import I18n from '@ledvance/base/src/i18n'
+import { useReactive, useUpdateEffect } from "ahooks";
+import {SwitchInchingPageParams, useCountdown1, useSwitchInching} from "./SwithInchingAction";
+import {useRandomTime} from "../randomTime/RandomTimeActions";
+import {useFixedTime} from "../fixedTime/FixedTimeActions";
+import {useParams} from "@ledvance/base/src/hooks/Hooks";
+
+const { convertX: cx } = Utils.RatioUtils
+
+interface SwitchInchingState {
+    enable: boolean,
+    minute: string,
+    second: string,
+    flag: Symbol | number
+}
+
+const SwitchInching = () => {
+    const params = useParams<SwitchInchingPageParams>()
+    const deviceInfo = useDeviceInfo()
+    const navigation = useNavigation()
+    const [switchInching, setSwitchInching] = useSwitchInching(params.switchInchingCode)
+    const [randomTimePlan, setRandomTimePlan] = useRandomTime(params.cycleTimeCode, true)
+    const [fixedTimePlan, setFixedTimePlan] = useFixedTime(params.randomTimeCode, true)
+    const [countdown1, setCountDown1] = useCountdown1(params.countdownCode)
+    const randomEnable = !!randomTimePlan.filter(item => item.enable).length
+    const fixedEnable = !!fixedTimePlan.filter(item => item.enable).length
+    const timerEnable = !!countdown1
+    const state = useReactive<SwitchInchingState>({
+        enable: false,
+        minute: '00',
+        second: '00',
+        flag: 1
+    })
+
+    useEffect(() => {
+        state.enable = switchInching.enable
+        state.minute = formateValue('minute')
+        state.second = formateValue('second')
+    }, [JSON.stringify(switchInching)])
+
+    const showDialog = (run: () => void) => {
+        Dialog.confirm({
+            title: I18n.getLang('conflict_dialog_save_item_inching_titel'),
+            subTitle: I18n.getLang('conflict_dialog_save_item_inching_description'),
+            cancelText: I18n.getLang('conflict_dialog_save_item_inching_answer_no_text'),
+            confirmText: I18n.getLang('conflict_dialog_save_item_inching_answer_yes_text'),
+            onConfirm: (_, { close }) => {
+                close();
+                setSwitchInching({ ...switchInching, enable: false })
+                TurnOffFn()
+                run()
+            },
+        })
+    }
+
+    const TurnOffFn = () => {
+        if (randomEnable) {
+            const randomTimeList = randomTimePlan.map(item => {
+                if (item.enable) {
+                    return {
+                        ...item,
+                        enable: false
+                    }
+                } else {
+                    return item
+                }
+            })
+            setRandomTimePlan(randomTimeList)
+        }
+        if (fixedEnable) {
+            const fixedTimeList = fixedTimePlan.map(item => {
+                if (item.enable) {
+                    return {
+                        ...item,
+                        enable: false
+                    }
+                } else {
+                    return item
+                }
+            })
+            setFixedTimePlan(fixedTimeList)
+        }
+        if (timerEnable) {
+            setCountDown1(0)
+        }
+    }
+
+
+    const requestSwitchInching = () => {
+        const run = () => {
+            const enable = state.enable
+            const time = Number(state.minute) * 60 + Number(state.second)
+            setSwitchInching({ enable, time })
+        }
+        if (state.enable && (randomEnable || fixedEnable || timerEnable)) {
+            return showDialog(run)
+        }
+        run()
+    }
+
+    useEffect(() => {
+        if (state.flag !== 1) {
+            requestSwitchInching()
+        }
+    }, [state.flag])
+
+    useUpdateEffect(() => {
+        if (!!!Number(state.minute) && Number(state.second) < 2) {
+            state.second = '02'
+        }
+        if (Number(state.minute) === 60) {
+            state.second = '00'
+        }
+    }, [state.minute, state.second])
+
+    const formateValue = (type: string) => {
+        const m = parseInt(String((switchInching?.time || 0) / 60))
+        if (type === 'minute') {
+            return m.toString().padStart(2, '0')
+        } else {
+            const s = switchInching.time - 60 * m
+            const v: string = s === 0 ? '00' : s < 10 ? '0' + s : String(s)
+            return v
+        }
+    }
+
+  return (
+    <Page
+      backText={deviceInfo.name}
+      onBackClick={navigation.goBack}
+      headlineText={I18n.getLang('socket_settings_switch_off_firstbox_text')}
+    >
+      <View style={styles.switchContainer}>
+        <View style={styles.switchCardContainer}>
+          <Text style={styles.switchCardTitle}>
+            {I18n.getLang('socket_settings_switch_off_firstbox_text')}
+          </Text>
+          <SwitchButton
+            value={switchInching.enable}
+            onValueChange={v => {
+              state.enable = v;
+              state.flag = Symbol();
+            }}
+          />
+        </View>
+        <Text style={styles.switchDescription}>
+          {I18n.getLang('switchinching_overview_description_text')}
+        </Text>
+      </View>
+      <Text style={styles.secondTopic}>
+        {I18n.getLang('socket_settings_switch_off_secondtopic')}
+      </Text>
+      <View style={styles.pickContainer}>
+        {switchInching.enable && <View style={styles.disabledCover} />}
+        <LdvPickerView
+          hour={state.minute}
+          minute={state.second}
+          unit={[
+            I18n.getLang('socket_settings_switch_off_min'),
+            I18n.getLang('socket_settings_switch_off_s'),
+          ]}
+          setHour={m => {
+            state.minute = m;
+          }}
+          setMinute={s => {
+            state.second = s;
+          }}
+        />
+      </View>
+    </Page>
+  );
+};
+
+const styles = StyleSheet.create({
+  switchContainer: {
+    backgroundColor: '#F6F6F6',
+    marginHorizontal: cx(24),
+    padding: cx(10),
+    borderRadius: cx(6),
+    flexDirection: 'column',
+  },
+  switchCardContainer: {
+    paddingVertical: cx(4),
+    paddingHorizontal: cx(10),
+    backgroundColor: '#FFFFFF',
+    flexDirection: 'row',
+    justifyContent: 'center',
+    alignItems: 'center',
+    borderRadius: cx(6),
+  },
+  switchCardTitle: {
+    color: '#000',
+    fontSize: cx(14),
+    flex: 1,
+    fontWeight: '400',
+  },
+  switchDescription: {
+    color: '#000',
+    flexWrap: 'wrap',
+    fontSize: cx(12),
+    marginTop: cx(4),
+  },
+  secondTopic: {
+    color: '#000',
+    flexWrap: 'wrap',
+    fontSize: cx(14),
+    marginTop: cx(30),
+    marginHorizontal: cx(24),
+  },
+  pickContainer: {
+    position: 'relative',
+    marginVertical: cx(24),
+    marginHorizontal: cx(24),
+  },
+  disabledCover: {
+    position: 'absolute',
+    width: '100%',
+    height: '100%',
+    left: 0,
+    top: 0,
+    zIndex: 999,
+  },
+});
+export default SwitchInching;

package/src/newModules/swithInching/SwithInchingAction.ts

@@ -0,0 +1,55 @@
+import {Buffer} from 'buffer'
+import {Result} from "@ledvance/base/src/models/modules/Result"
+import {useDp} from "@ledvance/base/src/models/modules/NativePropsSlice";
+
+export interface SwitchInchingPageParams {
+  switchInchingCode: string
+  countdownCode: string
+  cycleTimeCode: string
+  randomTimeCode: string
+}
+
+interface SwitchInchingModel {
+  enable: boolean,
+  time: number
+}
+
+function format(number: string, code: number) {
+  const l = number.length;    //获取要格式化数字的长度，如二进制1的话长度为1
+  if (l < code) {     //补全位数 0000，这里我要显示4位
+    for (let i = 0; i < code - l; i++) {
+      number = "0" + number;     //不够的就在前面补0
+    }
+  }
+  return number;
+}
+
+type SwitchInchingResult = (switchInchingCode: string) => [SwitchInchingModel, (v: SwitchInchingModel) => Promise<Result<any>>]
+
+export function useCountdown1(countdownCode: string): [number, (countdown1: number) => Promise<Result<any>>] {
+  return useDp(countdownCode);
+}
+
+export function useSwitchInchingHex(switchInchingCode: string): [string, (switchInching: string) => Promise<Result<any>>] {
+  return useDp(switchInchingCode)
+}
+
+export const useSwitchInching: SwitchInchingResult = (switchInchingCode: string) => {
+  const [hex, setHex] = useSwitchInchingHex(switchInchingCode)
+  const inching = Buffer.from(hex, 'base64')
+  const enable = !!inching[0]
+  const time = inching[1] * 256 + inching[2]
+  const setSwitchInching = ({enable, time}) => {
+    const enableHex = enable ? '01' : '00'
+    const timeHex = format(time?.toString(16), 4)
+    const inchingString = enableHex + timeHex
+    const inchingHex = hexToBase64(inchingString)
+    return setHex(inchingHex)
+  }
+  return [{enable, time}, setSwitchInching]
+}
+
+const hexToBase64 = (hex: string) => {
+  const buffer = Buffer.from(hex, 'hex');
+  return buffer.toString('base64');
+}