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

package/src/modules/randomTimingForLight/RandomTimingForLightPage.tsx

@@ -12,11 +12,13 @@ import {RandomTimingItem, RandomTimingParam, useRandomTiming} from "./RandomTimi
 import Spacer from "@ledvance/base/src/components/Spacer";
 import ItemCard from "./ItemCard";
 import {cloneDeep} from "lodash";
+import InfoText from "@ledvance/base/src/components/InfoText";
 
 const {convertX: cx, topBarHeight} = Utils.RatioUtils;
+const { withTheme } = Utils.ThemeUtils
 const MAX_NUM = 4
 
-const RandomTimeForLightPage = () => {
+const RandomTimeForLightPage = (props: { theme?: any}) => {
   const devInfo = useDeviceInfo()
   const navigation = useNavigation()
   const params = useRoute().params as RandomTimingParam
@@ -58,17 +60,59 @@ const RandomTimeForLightPage = () => {
     }
   }, [randomTimingList])
 
+  const styles = StyleSheet.create({
+    bg: {
+      marginTop: topBarHeight,
+      flex: 1,
+    },
+    emptyListCon: {
+      justifyContent: 'center',
+      alignItems: 'center',
+      marginTop: cx(30),
+    },
+    emptyImage: {
+      width: cx(225),
+      height: cx(198)
+    },
+    emptyNoTime: {
+      fontSize: cx(12),
+      color: props.theme.global.fontColor,
+    },
+    maxImg: {
+      width: cx(16),
+      height: cx(16),
+      tintColor: props.theme.global.warning
+    },
+    maxTip: {
+      color: props.theme.global.secondFontColor,
+    },
+    addButton: {
+      height: cx(36),
+      width: cx(150),
+      marginVertical: cx(25),
+      marginHorizontal: cx(24),
+      borderRadius: cx(6),
+      backgroundColor: props.theme.button.primary,
+    },
+    addButtonText: {
+      fontSize: cx(12),
+      fontWeight: 'bold',
+      color: props.theme.button.fontColor,
+      textAlign: 'center'
+    }
+  })
+
   const renderList = () => {
     return (
       <ScrollView nestedScrollEnabled={true}>
         <Text style={{
-          color: '#000',
+          color: props.theme.global.fontColor,
           marginLeft: cx(24),
         }}>{I18n.getLang('timeschedule_overview_description_text')}</Text>
         <Spacer height={cx(10)}/>
         {isMaxNum && <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('fixedtimecycle_warning_max_number_text')}</Text>
+            <Image style={styles.maxImg} source={res.ic_warning_amber}/>
+            <Text style={styles.maxTip}>{I18n.getLang('fixedtimecycle_warning_max_number_text')}</Text>
         </View>}
         <FlatList
           data={randomTimingList}
@@ -103,30 +147,15 @@ const RandomTimeForLightPage = () => {
           style={styles.emptyImage}
           source={{uri: res.ldv_timer_empty}}
           resizeMode="contain"/>
+        <InfoText
+          style={{width: 'auto', alignItems: 'center'}}
+          icon={res.device_panel_schedule_alert}
+          text={I18n.getLang('randomtimecycle_empty_information_text')}
+          textStyle={{flex: undefined}}
+          contentColor={props.theme.global.secondFontColor}
+        />
         <View
-          style={{
-            marginHorizontal: cx(24),
-            marginTop: cx(30),
-            flexDirection: 'row',
-            alignItems: 'center',
-          }}
-        >
-          <Image
-            source={{uri: res.device_panel_schedule_alert}}
-            style={{width: cx(16), height: cx(16)}}
-          />
-          <Text style={styles.emptyNoTime}>{I18n.getLang('randomtimecycle_empty_information_text')}</Text>
-        </View>
-        <View
-          style={{
-            height: cx(36),
-            width: cx(150),
-            marginVertical: cx(25),
-            marginHorizontal: cx(24),
-            borderRadius: cx(6),
-            backgroundColor: '#f60',
-          }}
-        >
+          style={styles.addButton}>
           <TouchableOpacity
             style={{
               flex: 1,
@@ -135,7 +164,7 @@ const RandomTimeForLightPage = () => {
             }}
             onPress={() => onAddOrEditItem('add')}
           >
-            <Text style={{fontSize: cx(12), fontWeight: 'bold', color: '#fff', textAlign: 'center'}}>
+            <Text style={styles.addButtonText}>
               {I18n.getLang('randomtimecycle_empty_bttn_text')}
             </Text>
           </TouchableOpacity>
@@ -156,38 +185,4 @@ const RandomTimeForLightPage = () => {
   )
 }
 
-const styles = StyleSheet.create({
-  bg: {
-    marginTop: topBarHeight,
-    flex: 1,
-  },
-  emptyListCon: {
-    justifyContent: 'center',
-    alignItems: 'center',
-    marginTop: cx(30),
-  },
-  emptyImage: {
-    width: cx(225),
-    height: cx(198)
-  },
-  emptyNoTime: {
-    fontSize: cx(12),
-    color: '#000'
-  },
-  emptyTimeTip: {
-    fontSize: cx(12),
-    lineHeight: cx(17),
-    marginTop: cx(6),
-    width: '76%',
-    textAlign: 'center'
-  },
-  listContainer: {
-    bottom: cx(74)
-  },
-  categoryList: {
-    marginHorizontal: cx(24),
-    marginBottom: cx(12),
-  },
-})
-
-export default RandomTimeForLightPage
+export default withTheme(RandomTimeForLightPage)

package/src/modules/randomTimingForLight/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,53 @@ 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,
+    },
+  })
+
   return (
     <View style={styles.cardContainer}>
       <Text style={styles.itemTitle}>{I18n.getLang('add_randomtimecycle_subheadline_text')}</Text>
@@ -56,68 +105,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',
-  },
-})
-
-export default memo(Summary)
+export default memo(withTheme(Summary))

package/src/modules/select/SelectPage.tsx

@@ -8,6 +8,7 @@ import Card from '@ledvance/base/src/components/Card'
 import res from '@ledvance/base/src/res'
 
 const cx = Utils.RatioUtils.convertX
+const { withTheme } = Utils.ThemeUtils
 
 export interface SelectPageData<T> {
   text: string
@@ -21,9 +22,71 @@ export interface SelectPageParams<T> {
   onSelect: (selectPageData: SelectPageData<T>) => void
 }
 
-const SelectPage = () => {
+const SelectPage = (props: { theme?: any }) => {
   const params = useRoute().params as SelectPageParams<any>
   const navigation = useNavigation()
+
+  const styles = StyleSheet.create({
+    root: {
+      flex: 1,
+    },
+    topBar: {
+      height: cx(91),
+      backgroundColor: props.theme.card.head,
+    },
+    line: {
+      height: cx(1),
+      backgroundColor: props.theme.container.divider,
+    },
+    topContent: {
+      height: cx(45),
+      flexDirection: 'row',
+      alignItems: 'center',
+    },
+    cancel: {
+      marginStart: cx(16),
+      color: props.theme.button.cancel,
+      fontSize: cx(17),
+      fontFamily: 'helvetica_neue_lt_std_roman',
+    },
+    title: {
+      width: '100%',
+      position: 'absolute',
+      start: 0,
+      textAlign: 'center',
+      color: props.theme.global.fontColor,
+      fontSize: cx(17),
+      fontFamily: 'helvetica_neue_lt_std_bd',
+    },
+    card: {
+      backgroundColor: props.theme.card.background,
+      marginHorizontal: cx(16),
+    },
+    item: {
+      height: cx(44),
+      flexDirection: 'row',
+      alignItems: 'center',
+    },
+    itemText: {
+      flex: 1,
+      marginStart: cx(13),
+      color: props.theme.global.fontColor,
+      fontSize: cx(17),
+      fontFamily: 'helvetica_neue_lt_std_roman',
+    },
+    itemLine: {
+      height: cx(1),
+      marginStart: cx(13),
+      backgroundColor: props.theme.container.divider,
+    },
+    itemIcon: {
+      width: cx(30),
+      height: cx(30),
+      marginEnd: cx(13),
+      tintColor: props.theme.icon.primary,
+    },
+  })
+
   return (
     <View style={styles.root}>
       <View style={styles.topBar}>
@@ -76,64 +139,4 @@ const SelectPage = () => {
   )
 }
 
-const styles = StyleSheet.create({
-  root: {
-    flex: 1,
-  },
-  topBar: {
-    height: cx(91),
-    backgroundColor: '#eaeaea',
-  },
-  line: {
-    height: cx(1),
-    backgroundColor: '#d9d9d9',
-  },
-  topContent: {
-    height: cx(45),
-    flexDirection: 'row',
-    alignItems: 'center',
-  },
-  cancel: {
-    marginStart: cx(16),
-    color: '#f60',
-    fontSize: cx(17),
-    fontFamily: 'helvetica_neue_lt_std_roman',
-  },
-  title: {
-    width: '100%',
-    position: 'absolute',
-    start: 0,
-    textAlign: 'center',
-    color: '#000',
-    fontSize: cx(17),
-    fontFamily: 'helvetica_neue_lt_std_bd',
-  },
-  card: {
-    marginHorizontal: cx(16),
-  },
-  item: {
-    height: cx(44),
-    flexDirection: 'row',
-    alignItems: 'center',
-  },
-  itemText: {
-    flex: 1,
-    marginStart: cx(13),
-    color: '#000',
-    fontSize: cx(17),
-    fontFamily: 'helvetica_neue_lt_std_roman',
-  },
-  itemLine: {
-    height: cx(1),
-    marginStart: cx(13),
-    backgroundColor: '#ccc',
-  },
-  itemIcon: {
-    width: cx(30),
-    height: cx(30),
-    marginEnd: cx(13),
-    tintColor: '#f60',
-  },
-})
-
-export default SelectPage
+export default withTheme(SelectPage)

package/src/modules/sleepWakeUp/SleepWakeUpDetailPage.tsx

@@ -362,7 +362,7 @@ const SleepWakeUpDetailPage = (props: {theme?: any}) => {
           </Text>
           <View
             style={{
-              backgroundColor: props.theme.card.board,
+              backgroundColor: props.theme.card.border,
               borderRadius: 4,
               minHeight: cx(50),
               flex: 1,

package/src/modules/switchGradient/SwitchGradientPage.tsx

@@ -13,8 +13,9 @@ import Spacer from "@ledvance/base/src/components/Spacer";
 import Stepper from '@ledvance/base/src/components/Stepper'
 
 const {convertX: cx} = Utils.RatioUtils
+const { withTheme } = Utils.ThemeUtils
 
-const SwitchGradientPage = () => {
+const SwitchGradientPage = (props: { theme?: any }) => {
   const devInfo = useDeviceInfo()
   const navigation = useNavigation()
   const [
@@ -34,6 +35,27 @@ const SwitchGradientPage = () => {
     state.switchOffDuration = switchOffDuration
   }, [switchOnDuration, switchOffDuration])
 
+
+  const styles = StyleSheet.create({
+    stepCard: {
+      marginHorizontal: cx(24),
+      paddingHorizontal: cx(16),
+    },
+    stepTitle: {
+      color: props.theme.global.fontColor,
+      fontSize: cx(14),
+    },
+    stepGroup: {
+      flexDirection: 'row',
+      alignItems: 'center',
+    },
+    stepText: {
+      flex: 1,
+      color: props.theme.global.fontColor,
+      fontSize: cx(16),
+    },
+  })
+
   return (
     <Page
       backText={devInfo.name}
@@ -92,24 +114,4 @@ const SwitchGradientPage = () => {
   )
 }
 
-const styles = StyleSheet.create({
-  stepCard: {
-    marginHorizontal: cx(24),
-    paddingHorizontal: cx(16),
-  },
-  stepTitle: {
-    color: '#000',
-    fontSize: cx(14),
-  },
-  stepGroup: {
-    flexDirection: 'row',
-    alignItems: 'center',
-  },
-  stepText: {
-    flex: 1,
-    color: '#000',
-    fontSize: cx(16),
-  },
-})
-
-export default SwitchGradientPage
+export default withTheme(SwitchGradientPage)