@ledvance/group-ui-biz-bundle 1.0.73 → 1.0.76

package/src/modules/timeSchedule/TimeSchedulePage.tsx

@@ -22,6 +22,7 @@ import { ui_biz_routerKey } from "../../navigation/Routers";
 import { ApplyForItem } from '@ledvance/base/src/utils/interface';
 
 const { convertX: cx } = Utils.RatioUtils;
+const { withTheme } = Utils.ThemeUtils
 const MAX_NUM = 30;
 
 export interface TimeSchedulePageParams {
@@ -42,7 +43,7 @@ export interface TimeSchedulePageParams {
   manualDataObj2Dp: (deviceState: DeviceStateType, applyForList: ApplyForItem[]) => Record<string, any>;
 }
 
-const TimeSchedulePage = () => {
+const TimeSchedulePage = (props: { theme?: any }) => {
   const deviceInfo = useDeviceInfo();
   const navigation = useNavigation();
   const uaGroupInfo = useUAGroupInfo()
@@ -117,6 +118,29 @@ const TimeSchedulePage = () => {
     }
   }
 
+  const styles = StyleSheet.create({
+    overviewDescription: {
+      color: props.theme.global.fontColor,
+      marginHorizontal: cx(24),
+      fontSize: cx(12)
+    },
+    emptyImage: {
+      width: cx(225),
+      height: cx(198),
+    },
+    emptyContainer: {
+      marginHorizontal: cx(24),
+      alignItems: 'center',
+    },
+    addBtn: {
+      height: cx(40),
+      width: 'auto',
+      minWidth: cx(150),
+      paddingHorizontal: cx(16),
+      backgroundColor: props.theme.button.primary,
+    },
+  })
+
   return (
     <Page
       backText={deviceInfo.name}
@@ -138,36 +162,36 @@ const TimeSchedulePage = () => {
             text={I18n.getLang('motion_detection_time_schedule_notifications_warning_text')}
             icon={res.ic_warning_amber}
             style={{ marginHorizontal: cx(24) }}
-            textStyle={{ color: '#000', fontSize: cx(12) }}
-            iconStyle={{ tintColor: '#ff9500' }}
+            textStyle={{ color: props.theme.global.secondFontColor, fontSize: cx(12) }}
+            iconStyle={{ tintColor: props.theme.global.warning }}
           />
         )}
         { state.timeScheduleList.length > 0 ?
-        <FlatList
-          data={state.timeScheduleList}
-          renderItem={({ item }) => (
-            <ScheduleCard
-              item={item}
-              onEnableChange={async enable => {
-                state.loading = true;
-                await modDeleteTimeSchedule('del', {
-                  ...item,
-                  status: enable ? 1 : 0,
-                }, item.id.toString());
-                item.status = enable ? 1 : 0
-                state.loading = false;
-              }}
-              onPress={() => {
-                navigateToEdit('edit', item);
-              }}
-            />
-          )}
-          keyExtractor={item => item.id.toString()}
-          ListEmptyComponent={<Spacer />}
-          ListHeaderComponent={() => <Spacer height={cx(10)} />}
-          ItemSeparatorComponent={() => <Spacer />}
-          ListFooterComponent={() => <Spacer height={cx(30)} />}
-        /> :
+          <FlatList
+            data={state.timeScheduleList}
+            renderItem={({ item }) => (
+              <ScheduleCard
+                item={item}
+                onEnableChange={async enable => {
+                  state.loading = true;
+                  await modDeleteTimeSchedule('del', {
+                    ...item,
+                    status: enable ? 1 : 0,
+                  }, item.id.toString());
+                  item.status = enable ? 1 : 0
+                  state.loading = false;
+                }}
+                onPress={() => {
+                  navigateToEdit('edit', item);
+                }}
+              />
+            )}
+            keyExtractor={item => item.id.toString()}
+            ListEmptyComponent={<Spacer />}
+            ListHeaderComponent={() => <Spacer height={cx(10)} />}
+            ItemSeparatorComponent={() => <Spacer />}
+            ListFooterComponent={() => <Spacer height={cx(30)} />}
+          /> :
           <View style={styles.emptyContainer}>
             <Spacer height={cx(60)}/>
             <Image
@@ -179,8 +203,8 @@ const TimeSchedulePage = () => {
               icon={res.device_panel_schedule_alert}
               text={I18n.getLang('timeschedule_overview_empty_information_text')}
               style={{width: 'auto', alignItems: 'center'}}
-              textStyle={{color: '#000', fontSize: cx(12), flex: undefined}}
-              iconStyle={{tintColor: '#000'}}
+              textStyle={{color: props.theme.global.secondFontColor, fontSize: cx(12), flex: undefined}}
+              iconStyle={{tintColor: props.theme.global.secondFontColor}}
             />
             <Spacer height={cx(16)}/>
             <DeleteButton
@@ -198,27 +222,4 @@ const TimeSchedulePage = () => {
   );
 };
 
-const styles = StyleSheet.create({
-  overviewDescription: {
-    color: '#000',
-    marginHorizontal: cx(24),
-    fontSize: cx(12)
-  },
-  emptyImage: {
-    width: cx(225),
-    height: cx(198),
-  },
-  emptyContainer: {
-    marginHorizontal: cx(24),
-    alignItems: 'center',
-  },
-  addBtn: {
-    height: cx(40),
-    width: 'auto',
-    minWidth: cx(150),
-    paddingHorizontal: cx(16),
-    backgroundColor: '#f60',
-  },
-});
-
-export default TimeSchedulePage;
+export default withTheme(TimeSchedulePage)

package/src/modules/timeSchedule/components/ManuaSettings.tsx

@@ -16,6 +16,7 @@ import ApplyForDeviceList from '@ledvance/base/src/components/ApplyForDeviceList
 import { cloneDeep } from 'lodash';
 import { FanAdjustViewContent } from '@ledvance/base/src/components/FanAdjustView';
 const { convertX: cx } = Utils.RatioUtils;
+const { withTheme } = Utils.ThemeUtils
 
 function ManualSettings(props: ManualSettingProps) {
   const [groupDevices] = useGroupDevices()
@@ -72,7 +73,7 @@ function ManualSettings(props: ManualSettingProps) {
             <Card style={{ marginHorizontal: cx(24) }}>
               <LdvSwitch
                 title={item.name || item.key}
-                color={'#fff'}
+                color={props.theme.card.background}
                 colorAlpha={1}
                 enable={item.enable}
                 setEnable={(enable: boolean) => {
@@ -190,7 +191,7 @@ function ManualSettings(props: ManualSettingProps) {
         ))}
       </View>
     );
-  }, [state.deviceData, state.applyForList]);
+  }, [state.deviceData, state.applyForList, props.theme.card.background]);
 
   const mixLightCard = useMemo(() => {
     return (
@@ -200,7 +201,7 @@ function ManualSettings(props: ManualSettingProps) {
             <Card style={{ marginHorizontal: cx(24) }}>
               <LdvSwitch
                 title={item.key}
-                color={'#fff'}
+                color={props.theme.card.background}
                 colorAlpha={1}
                 enable={item.enable}
                 setEnable={(enable: boolean) => {
@@ -255,7 +256,7 @@ function ManualSettings(props: ManualSettingProps) {
         ))}
       </View>
     );
-  }, [state.deviceData, state.applyForList]);
+  }, [state.deviceData, state.applyForList, props.theme.card.background]);
 
   const stripLightCard = useMemo(() => {
     const deviceData = state.deviceData as StripLightData
@@ -264,7 +265,7 @@ function ManualSettings(props: ManualSettingProps) {
         <Card style={{ marginHorizontal: cx(24) }}>
           <LdvSwitch
             title={I18n.getLang('light_sources_tile_tw_lighting_headline')}
-            color={'#fff'}
+            color={props.theme.card.background}
             colorAlpha={1}
             enable={state.applyForList[0]?.enable}
             setEnable={(enable: boolean) => {
@@ -325,7 +326,7 @@ function ManualSettings(props: ManualSettingProps) {
         <Spacer />
       </View>
     );
-  }, [state.deviceData, state.applyForList]);
+  }, [state.deviceData, state.applyForList, props.theme.card.background]);
 
   const ceilingLightCard = useMemo(() => {
     const deviceData = state.deviceData as CeilingLightData
@@ -336,7 +337,7 @@ function ManualSettings(props: ManualSettingProps) {
             <Card style={{ marginHorizontal: cx(24) }}>
               <LdvSwitch
                 title={item.key}
-                color={'#fff'}
+                color={props.theme.card.background}
                 colorAlpha={1}
                 enable={item.enable}
                 setEnable={(enable: boolean) => {
@@ -420,7 +421,7 @@ function ManualSettings(props: ManualSettingProps) {
         ))}
       </View>
     )
-  }, [state.deviceData, state.applyForList])
+  }, [state.deviceData, state.applyForList, props.theme.card.background])
 
   const componentRender = useMemo(() => {
     const component =
@@ -432,10 +433,10 @@ function ManualSettings(props: ManualSettingProps) {
             ? ceilingLightCard
             : lightSourceCard;
     return component;
-  }, [props.manualData.type, state.applyForList, state.deviceData]);
+  }, [props.manualData.type, state.applyForList, state.deviceData, props.theme.card.background]);
 
 
   return <View>{componentRender}</View>;
 }
 
-export default memo(ManualSettings);
+export default memo(withTheme(ManualSettings))

package/src/modules/timeSchedule/components/ScheduleCard.tsx

@@ -3,11 +3,13 @@ import { ViewStyle, View, Text, StyleSheet } from "react-native";
 import Card from "@ledvance/base/src/components/Card";
 import { SwitchButton, Utils } from 'tuya-panel-kit';
 import { convertTo12HourFormat, loopText } from '@ledvance/base/src/utils/common';
-import { Timer } from "@ledvance/group-ui-biz-bundle/src/modules/timeSchedule/Interface";
+import { Timer } from "../Interface";
 import { useSystemTimeFormate } from "@ledvance/base/src/models/modules/NativePropsSlice";
 const { convertX: cx } = Utils.RatioUtils;
+const { withTheme } = Utils.ThemeUtils
 
 interface ScheduleCardProps {
+  theme?: any
   item: Timer
   style?: ViewStyle
   onEnableChange: (enable: boolean) => void
@@ -17,6 +19,48 @@ interface ScheduleCardProps {
 const ScheduleCard = (props: ScheduleCardProps) => {
   const { item, style, onEnableChange, onPress } = props;
   const is24HourClock = useSystemTimeFormate()
+
+  const styles = StyleSheet.create({
+    card: {
+      marginHorizontal: cx(24),
+      borderRadius: cx(8),
+    },
+    container: {
+      flexDirection: 'row',
+      justifyContent: 'space-between',
+    },
+    infoContainer: {
+      flex: 1,
+      marginTop: cx(16),
+      marginBottom: cx(16),
+      flexDirection: 'column',
+      marginLeft: cx(16),
+    },
+    time: {
+      color: props.theme.global.fontColor,
+      marginBottom: cx(5),
+      fontSize: 16,
+      fontFamily: 'helvetica_neue_lt_std_bd',
+      fontWeight: 'bold',
+    },
+    loop: {
+      color: props.theme.global.fontColor,
+      fontSize: cx(14),
+      fontFamily: 'helvetica_neue_lt_std_bd',
+      marginTop: cx(8),
+    },
+    name: {
+      color: props.theme.global.fontColor,
+      fontSize: cx(14),
+      fontFamily: 'helvetica_neue_lt_std_bd',
+      marginTop: cx(8),
+    },
+    switchContainer: {
+      marginRight: cx(16),
+      marginTop: cx(16),
+    },
+  })
+
   return (
     <Card
       style={styles.card}
@@ -24,16 +68,13 @@ const ScheduleCard = (props: ScheduleCardProps) => {
       onPress={() => {
         onPress(item);
       }}
-      >
+    >
       <View style={styles.infoContainer}>
         <Text style={styles.time}>{is24HourClock ? item.time : convertTo12HourFormat(item.time)}</Text>
         <Text style={styles.loop}>
           {loopText(item.loops.split('').map(loop => parseInt(loop)), item.time)}
         </Text>
         <Text style={styles.name}>{item.aliasName}</Text>
-        {/* {showTags() && <View style={styles.typeContainer}>
-                    {renderTag()}
-                </View>} */}
       </View>
       <View style={styles.switchContainer}>
         <SwitchButton
@@ -49,61 +90,4 @@ const ScheduleCard = (props: ScheduleCardProps) => {
 
 }
 
-const styles = StyleSheet.create({
-  card: {
-    marginHorizontal: cx(24),
-    borderRadius: cx(8),
-  },
-  container: {
-    flexDirection: 'row',
-    justifyContent: 'space-between',
-  },
-  infoContainer: {
-    flex: 1,
-    marginTop: cx(16),
-    marginBottom: cx(16),
-    flexDirection: 'column',
-    marginLeft: cx(16),
-  },
-  time: {
-    marginBottom: cx(5),
-    fontSize: 16,
-    fontFamily: 'helvetica_neue_lt_std_bd',
-    fontWeight: 'bold',
-  },
-  loop: {
-    color: '#000',
-    fontSize: cx(14),
-    fontFamily: 'helvetica_neue_lt_std_bd',
-    marginTop: cx(8),
-  },
-  name: {
-    color: '#000',
-    fontSize: cx(14),
-    fontFamily: 'helvetica_neue_lt_std_bd',
-    marginTop: cx(8),
-  },
-  switchContainer: {
-    marginRight: cx(16),
-    // backgroundColor: 'red',
-    marginTop: cx(16),
-  },
-  switch: {},
-  typeContainer: {
-    flexDirection: 'row',
-    marginTop: cx(8),
-  },
-  typeWrap: {
-    backgroundColor: '#E6E7E8',
-    marginRight: cx(10),
-    borderRadius: cx(10),
-  },
-  typeText: {
-    fontSize: cx(12),
-    color: '#000',
-    paddingHorizontal: cx(8),
-    paddingVertical: cx(2)
-  }
-});
-
-export default ScheduleCard
+export default withTheme(ScheduleCard)

package/src/modules/timeSchedule/components/Summary.tsx

@@ -6,8 +6,10 @@ import { Utils } from "tuya-panel-kit";
 import Spacer from "@ledvance/base/src/components/Spacer";
 
 const { convertX: cx } = Utils.RatioUtils;
+const { withTheme } = Utils.ThemeUtils
 
 interface SummaryProps {
+  theme?: any
   style?: ViewStyle
   frequency?: string | ReactElement
   time?: string | ReactElement
@@ -16,6 +18,54 @@ interface SummaryProps {
 }
 
 const Summary = (props: SummaryProps) => {
+
+  const styles = StyleSheet.create({
+    cardContainer: {
+      marginHorizontal: cx(24),
+    },
+    itemTitle: {
+      color: props.theme.global.fontColor,
+      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: {
+      tintColor: props.theme.global.fontColor,
+      width: cx(12),
+      height: cx(12),
+      marginRight: cx(6)
+    },
+    leftTitle: {
+      fontSize: cx(14),
+      color: props.theme.global.fontColor
+    },
+    summaryRight: {
+      flex: 1,
+      flexDirection: 'column',
+      marginLeft: cx(15),
+    },
+    rightWrap: {
+      borderRadius: cx(16),
+      paddingHorizontal: cx(12),
+      alignSelf: 'flex-start',
+      backgroundColor: props.theme.tag.background,
+    },
+    rightItem: {
+      color: props.theme.tag.fontColor,
+      fontSize: cx(14)
+    },
+  })
+
   return (
     <View style={styles.cardContainer}>
       <Text style={styles.itemTitle}>{I18n.getLang('add_randomtimecycle_subheadline_text')}</Text>
@@ -56,69 +106,23 @@ const Summary = (props: SummaryProps) => {
           </View>
         </View>
         {!props.hideActions && <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 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={styles.summaryRight}>
+              {props.actions}
             </View>
-          </View>
-          <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),
-  },
-  rightWrap: {
-    borderRadius: cx(16),
-    paddingHorizontal: cx(12),
-    alignSelf: 'flex-start',
-    backgroundColor: '#cbcbcb',
-  },
-  rightItem: {
-    color: '#000',
-    fontSize: cx(14)
-  },
-})
-
-export default memo(Summary)
+export default memo(withTheme(Summary))

package/src/modules/timer/TimerAction.ts

@@ -4,6 +4,7 @@ import dayjs from 'dayjs'
 import {useCountDown, useReactive} from 'ahooks'
 import {useEffect, useMemo} from 'react'
 import {I18nKey} from "@ledvance/base/src/i18n/index";
+import { NativeApi } from '@ledvance/base/src/api/native'
 
 export interface TimerTask {
   name: string
@@ -18,6 +19,9 @@ export interface TimerTask {
   status: TaskStatus
   stringOn: I18nKey
   stringOff: I18nKey
+  stringOnMin: I18nKey
+  stringOffMin: I18nKey
+  cloudKey: 'lightingInfo' | 'socketInfo' | 'fanInfo' | 'plugCountDownInfo'
 }
 
 export enum TaskStatus {
@@ -30,7 +34,12 @@ export interface TimerConfig {
   timerTasks: TimerTask[]
 }
 
-export function useTimerTasks(timerSettableDps: TimerSettableDp[]):
+const getKey = (suffix: string, dpId: string) => {
+  const key = dpId + suffix
+  return key
+}
+
+export function useTimerTasks(timerSettableDps: TimerSettableDp[], devIdGroup: string[]):
   [TimerTask[], (value: TimerTask[]) => Promise<Result<any>>, (tasks: TimerTask[]) => void] {
   const countdowns = timerSettableDps.map(dps => {
     const [countdown, setTargetDate] = useCountDown({ interval: 1000 })
@@ -53,6 +62,9 @@ export function useTimerTasks(timerSettableDps: TimerSettableDp[]):
       status: TaskStatus.NoSelected,
       stringOn: timerSettableDp.stringOn,
       stringOff: timerSettableDp.stringOff,
+      stringOnMin: timerSettableDp.stringOnMin,
+      stringOffMin: timerSettableDp.stringOffMin,
+      cloudKey: timerSettableDp.cloudKey,
     }))
   }, [JSON.stringify(timerSettableDps)])
 
@@ -64,6 +76,9 @@ export function useTimerTasks(timerSettableDps: TimerSettableDp[]):
       const dps = {}
       timerTasks.forEach(task => {
         dps[task.dp.code] = task.duration
+        devIdGroup.forEach(devId => {
+          NativeApi.putJson(devId, task.cloudKey, JSON.stringify({ [getKey('Status', task.dp.code)]: !!task.duration, [getKey('StartTime', task.dp.code)]: task.startTime, progressAllNumber: task.duration }))
+        })
       })
       return dps
     },
@@ -157,10 +172,14 @@ export interface TimerSettableDp {
   }
   stringOn: I18nKey
   stringOff: I18nKey
+  stringOnMin: I18nKey
+  stringOffMin: I18nKey
+  cloudKey: 'lightingInfo' | 'socketInfo' | 'fanInfo' | 'plugCountDownInfo'
 }
 
 export interface TimerPageParams {
   timerSettableDps: TimerSettableDp[]
+  devIdGroup: string[]
 }
 
 export function timeFormatToRealTime(mCountdown: number) {
@@ -170,7 +189,7 @@ export function timeFormatToRealTime(mCountdown: number) {
   return `${after.getHours()}:${after.getMinutes().toString().padStart(2, '0')}`
 }
 
-export function timeFormat(time: number): string {
+export function timeFormat(time: number, hideUnit?: boolean): string {
   let hour = Math.trunc(time / 3600)
   const beforeMin = (time % 3600) / 60
   let min = Math.ceil(beforeMin)
@@ -178,5 +197,5 @@ export function timeFormat(time: number): string {
     hour += 1
     min = 0
   }
-  return `${hour > 0 ? `${hour} h ` : ''}${min > 0 ? `${min} min` : ''}`
+  return `${hour > 0 ? `${hour} h ` : ''}${min > 0 ? `${min} ${hideUnit ? '' : 'min'}` : ''}`
 }