@ledvance/ui-biz-bundle 1.1.59 → 1.1.61

package/src/newModules/timeSchedule/TimeSchedulePage.tsx

@@ -21,7 +21,8 @@ import ScheduleCard from './components/ScheduleCard';
 import { ui_biz_routerKey } from '../../navigation/Routers';
 
 const { convertX: cx } = Utils.RatioUtils;
-const MAX_NUM = 30;
+const { withTheme } = Utils.ThemeUtils
+const MAX_NUM = 30
 
 export interface TimeSchedulePageParams {
   isSupportColor: boolean;
@@ -52,7 +53,7 @@ export interface TimeSchedulePageParams {
   drawToolDataCode?: string;
 }
 
-const TimeSchedulePage = () => {
+const TimeSchedulePage = (props: {theme?: any}) => {
   const deviceInfo = useDeviceInfo();
   const devId = useDeviceId();
   const navigation = useNavigation();
@@ -90,11 +91,11 @@ const TimeSchedulePage = () => {
         state.timeScheduleList =
           mode === 'update'
             ? state.timeScheduleList.map(item => {
-                if (item.id === timeSchedule.id) {
-                  return timeSchedule;
-                }
-                return item;
-              })
+              if (item.id === timeSchedule.id) {
+                return timeSchedule;
+              }
+              return item;
+            })
             : state.timeScheduleList.filter(item => item.id !== timeSchedule.id);
       }
       return {
@@ -118,6 +119,28 @@ const TimeSchedulePage = () => {
     });
   }, []);
 
+  const styles = StyleSheet.create({
+    overviewDescription: {
+      color: props.theme.global.fontColor,
+      marginHorizontal: cx(24),
+    },
+    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.active,
+    },
+  });
+
   return (
     <Page
       backText={deviceInfo.name}
@@ -139,8 +162,8 @@ const TimeSchedulePage = () => {
             text={I18n.getLang('motion_detection_time_schedule_notifications_warning_text')}
             icon={res.ic_warning_amber}
             style={{ marginHorizontal: cx(24) }}
-            textStyle={{ color: '#000' }}
-            iconStyle={{ tintColor: '#ff9500' }}
+            textStyle={{ color: props.theme.global.fontColor }}
+            iconStyle={{ tintColor: props.theme.global.warning }}
           />
         )}
         <FlatList
@@ -174,8 +197,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', flex: undefined }}
-                iconStyle={{ tintColor: '#000' }}
+                textStyle={{ color: props.theme.global.fontColor, flex: undefined }}
+                iconStyle={{ tintColor: props.theme.global.fontColor }}
               />
               <Spacer height={cx(16)} />
               <DeleteButton
@@ -197,26 +220,4 @@ const TimeSchedulePage = () => {
   );
 };
 
-const styles = StyleSheet.create({
-  overviewDescription: {
-    color: '#000',
-    marginHorizontal: cx(24),
-  },
-  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/newModules/timeSchedule/components/ManuaSettings.tsx

@@ -12,6 +12,7 @@ import I18n from '@ledvance/base/src/i18n';
 import StripAdjustView from '@ledvance/base/src/components/StripAdjustView';
 import Spacer from '@ledvance/base/src/components/Spacer';
 const { convertX: cx } = Utils.RatioUtils;
+const { withTheme } = Utils.ThemeUtils
 
 function ManualSettings(props: ManualSettingProps) {
   const state = useReactive({
@@ -64,7 +65,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) => {
@@ -130,7 +131,7 @@ function ManualSettings(props: ManualSettingProps) {
         ))}
       </View>
     );
-  }, [state.deviceData, state.applyForList]);
+  }, [state.deviceData, state.applyForList, props.theme.type]);
 
   const mixLightCard = useMemo(() => {
     return (
@@ -140,7 +141,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) => {
@@ -191,7 +192,7 @@ function ManualSettings(props: ManualSettingProps) {
         ))}
       </View>
     );
-  }, [state.deviceData, state.applyForList]);
+  }, [state.deviceData, state.applyForList, props.theme.type]);
 
   const stripLightCard = useMemo(() => {
     return (
@@ -199,7 +200,7 @@ function ManualSettings(props: ManualSettingProps) {
         <Card>
           <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) => {
@@ -240,20 +241,20 @@ function ManualSettings(props: ManualSettingProps) {
         <Spacer />
       </View>
     );
-  }, [state.deviceData, state.applyForList]);
+  }, [state.deviceData, state.applyForList, props.theme.type]);
 
   const componentRender = useMemo(() => {
     const component =
       props.manualData.type === DeviceType.MixLight
         ? mixLightCard
         : props.manualData.type === DeviceType.StripLight
-        ? stripLightCard
-        : lightSourceCard;
+          ? stripLightCard
+          : lightSourceCard;
     return component;
-  }, [props.manualData, state.applyForList, state.deviceData]);
+  }, [props.manualData, state.applyForList, state.deviceData, props.theme.type]);
 
 
   return <View>{componentRender}</View>;
 }
 
-export default memo(ManualSettings);
+export default memo(withTheme(ManualSettings))

package/src/newModules/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 "./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,64 @@ 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),
+      // backgroundColor: 'red',
+      marginTop: cx(16),
+    },
+    switch: {},
+    typeContainer: {
+      flexDirection: 'row',
+      marginTop: cx(8),
+    },
+    typeWrap: {
+      backgroundColor: props.theme.card.head,
+      marginRight: cx(10),
+      borderRadius: cx(10),
+    },
+    typeText: {
+      fontSize: cx(12),
+      color: props.theme.global.fontColor,
+      paddingHorizontal: cx(8),
+      paddingVertical: cx(2)
+    }
+  });
   return (
     <Card
       style={styles.card}
@@ -24,7 +84,7 @@ 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}>
@@ -49,61 +109,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)