@ledvance/ui-biz-bundle 1.1.89 → 1.1.91

package/src/newModules/biorhythm/IconSelect.tsx

@@ -7,6 +7,7 @@ import LDVTopBar from '@ledvance/base/src/components/ldvTopBar'
 import I18n from '@ledvance/base/src/i18n'
 
 const cx = Utils.RatioUtils.convertX
+const { withTheme } = Utils.ThemeUtils
 
 interface SceneDetailPageParams {
   id: any
@@ -14,7 +15,7 @@ interface SceneDetailPageParams {
   iconIdList: any
 }
 
-function IconSelect() {
+function IconSelect(props: { theme?: any }) {
   const [list, setList] = useState(iconList)
   const navigation = useNavigation()
   const params = useRoute().params as SceneDetailPageParams
@@ -52,7 +53,7 @@ function IconSelect() {
       />
       <ScrollView nestedScrollEnabled={true} style={{ marginHorizontal: cx(24) }}>
         <View style={{ marginTop: cx(40), marginBottom: cx(20) }}>
-          <Text style={{ fontSize: cx(24), color: '#ff6600' }}>Select an icon</Text>
+          <Text style={{ fontSize: cx(24), color: props.theme.global.brand }}>Select an icon</Text>
         </View>
         <View
           style={{ flexDirection: 'row', flex: 1, flexWrap: 'wrap', justifyContent: 'space-between', alignItems: 'flex-start' }}>
@@ -71,7 +72,7 @@ function IconSelect() {
                   width: cx(32),
                   height: cx(32),
                   margin: cx(10),
-                  tintColor: item?.selectStatus ? '#ff757d' : item?.disabled && '#e6e7e8' || '#474e5d',
+                  tintColor: item?.selectStatus ? props.theme.icon.primary : item?.disabled && props.theme.icon.disable || props.theme.icon.normal,
                 }}
               />
             </TouchableOpacity>
@@ -82,4 +83,4 @@ function IconSelect() {
   )
 }
 
-export default IconSelect
+export default withTheme(IconSelect)

package/src/newModules/childLock/ChildLockPage.tsx

@@ -11,6 +11,7 @@ import res from "@ledvance/base/src/res";
 import {useParams} from "@ledvance/base/src/hooks/Hooks";
 
 const { convertX: cx } = Utils.RatioUtils
+const { withTheme } = Utils.ThemeUtils
 
 export interface ChildLockPageParams {
   childLockCode: string
@@ -20,20 +21,65 @@ export function useChildLock(childLockCode: string): [boolean, (v: boolean) => P
   return useDp(childLockCode)
 }
 
-const ChildLockPage = () => {
+const ChildLockPage = (props: { theme?: any }) => {
   const params = useParams<ChildLockPageParams>()
   const devInfo = useDeviceInfo()
   const [childLock, setChildLock] = useChildLock(params.childLockCode)
   const state = useReactive({
     loading: false
   })
+
+  const styles = StyleSheet.create({
+    tipInfoContainer: {
+      flexDirection: 'row',
+      marginHorizontal: cx(24),
+      marginVertical: cx(10)
+    },
+    image: {
+      width: cx(16),
+      height: cx(16),
+      marginRight: cx(5),
+      tintColor: props.theme.global.fontColor
+    },
+    titleBGView: {
+      flexDirection: 'row',
+      alignItems: 'center',
+      paddingHorizontal: cx(16),
+      marginHorizontal: cx(24),
+    },
+    colorBlock: {
+      width: cx(20),
+      height: cx(20),
+      marginStart: cx(12),
+      borderRadius: cx(4),
+    },
+    title: {
+      color: props.theme.global.fontColor,
+      fontSize: cx(14),
+      fontFamily: 'helvetica_neue_lt_std_bd',
+      paddingVertical: cx(16),
+    },
+    shadow: {
+      shadowColor: props.theme.card.shadowColor,
+      shadowOpacity: 0.2,
+      shadowRadius: 8,
+      elevation:8,
+      shadowOffset: {
+        width: 0,
+        height: 4,
+      },
+      backgroundColor: props.theme.card.background,
+      borderRadius: 8,
+    },
+  })
+
   return (<Page
     backText={devInfo.name}
     headlineText={I18n.getLang('sockets_specific_settings_child_lock')}
     loading={state.loading}>
     <View style={styles.tipInfoContainer}>
       <Image style={styles.image} source={res.ic_info} />
-      <Text style={{ color: '#000' }}>
+      <Text style={{ color: props.theme.global.fontColor }}>
         {I18n.getLang('childlock_overview_description_text')}
       </Text>
     </View>
@@ -50,48 +96,4 @@ const ChildLockPage = () => {
   </Page>)
 }
 
-const styles = StyleSheet.create({
-  tipInfoContainer: {
-    flexDirection: 'row',
-    marginHorizontal: cx(24),
-    marginVertical: cx(10)
-  },
-  image: {
-    width: cx(16),
-    height: cx(16),
-    marginRight: cx(5),
-    tintColor: '#000'
-  },
-  titleBGView: {
-    flexDirection: 'row',
-    alignItems: 'center',
-    paddingHorizontal: cx(16),
-    marginHorizontal: cx(24),
-  },
-  colorBlock: {
-    width: cx(20),
-    height: cx(20),
-    marginStart: cx(12),
-    borderRadius: cx(4),
-  },
-  title: {
-    color: '#000',
-    fontSize: cx(14),
-    fontFamily: 'helvetica_neue_lt_std_bd',
-    paddingVertical: cx(16),
-  },
-  shadow: {
-    shadowColor: '#000000',
-    shadowOpacity: 0.2,
-    shadowRadius: 8,
-    elevation:8,
-    shadowOffset: {
-      width: 0,
-      height: 4,
-    },
-    backgroundColor: '#fff',
-    borderRadius: 8,
-  },
-})
-
-export default ChildLockPage
+export default withTheme(ChildLockPage)

package/src/newModules/energyConsumption/component/EnergyModal.tsx

@@ -264,13 +264,13 @@ const EnergyModal = (props: EnergyModalProps) => {
           <TouchableOpacity onPress={() => {
             props.onCancel && props.onCancel()
           }}>
-            <Text style={{ color: props.theme.global.brand, fontSize: cx(16) }}>{props.cancelText}</Text>
+            <Text style={{ color: props.theme.button.cancel, fontSize: cx(16) }}>{props.cancelText}</Text>
           </TouchableOpacity>
           <Text style={{ color: props.theme.global.fontColor, fontSize: cx(16), fontWeight: 'bold' }}>{props.title}</Text>
           <TouchableOpacity onPress={() => {
             props.onConfirm && props.onConfirm(state.energyData)
           }}>
-            <Text style={{ color: props.theme.global.brand, fontSize: cx(16) }}>{props.confirmText}</Text>
+            <Text style={{ color: props.theme.button.primary, fontSize: cx(16) }}>{props.confirmText}</Text>
           </TouchableOpacity>
         </View>
         <View style={{ height: height - cx(100), paddingHorizontal: cx(16), backgroundColor: props.theme.global.background }}>

package/src/newModules/fixedTime/FixedTimeDetailPage.tsx

@@ -24,6 +24,7 @@ import { useSystemTimeFormate } from "@ledvance/base/src/models/modules/NativePr
 import { useParams } from "@ledvance/base/src/hooks/Hooks";
 
 const { convertX: cx } = Utils.RatioUtils;
+const { withTheme } = Utils.ThemeUtils
 const { toFixedString } = Utils.NumberUtils;
 const {parseTimer} = Utils.TimeUtils
 
@@ -33,7 +34,7 @@ export interface FixedTimeDetailPageParams extends FixedTimePageParams {
   onPost: (mode: 'add' | 'edit' | 'del', fixedTime: FixedTimerUiItem) => Promise<Result<any>>
 }
 
-const FixedTimeDetailPage = () => {
+const FixedTimeDetailPage = (props: { theme?: any }) => {
   const navigation = useNavigation()
   const params = useParams<FixedTimeDetailPageParams>()
   const is24Hour = useSystemTimeFormate()
@@ -77,6 +78,41 @@ const FixedTimeDetailPage = () => {
     return state.fixedTime.name?.length > 0 && state.fixedTime.name?.length < 33 && !checkItemChanged && inRangeTime && state.fixedTime.channel !== undefined
   }, [JSON.stringify(state.fixedTime), checkItemChanged, inRangeTime])
 
+  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',
+    },
+    applyContent: {
+      backgroundColor: props.theme.container.background,
+      borderRadius: 4,
+      minHeight: cx(55),
+      flex: 1,
+      justifyContent: 'center',
+      paddingHorizontal: cx(10),
+      paddingTop: cx(10)
+    },
+    applyItem: {
+      paddingLeft: cx(5),
+      flexDirection: 'row',
+      justifyContent: 'space-between',
+      alignItems: 'center',
+      backgroundColor: props.theme.global.background,
+      height: cx(35),
+    },
+    summaryTag: {
+      backgroundColor: props.theme.tag.background,
+      borderRadius: cx(16),
+      paddingHorizontal: cx(12),
+      alignSelf: 'flex-start'
+    }
+  })
+
   return (
     <Page
       backText={I18n.getLang('fixedTimeCycle_socket_headline')}
@@ -124,7 +160,8 @@ const FixedTimeDetailPage = () => {
         {/* pick */}
         <TimerPicker
           itemTextColor='#aeadb5'
-          style={{ paddingVertical: cx(0), marginVertical: cx(0) }}
+          style={{ paddingVertical: cx(0), marginVertical: cx(0), backgroundColor: props.theme.global.background }}
+          pickerFontColor={props.theme.global.fontColor}
           is12Hours={!is24Hour}
           startTime={state.fixedTime.startTime}
           endTime={state.fixedTime.endTime}
@@ -140,7 +177,9 @@ const FixedTimeDetailPage = () => {
             state.fixedTime.weeks[rawIndex] = state.fixedTime.weeks[rawIndex] === 1 ? 0 : 1
           }} />
         <Spacer />
-        <Text style={styles.cardContainer}>{loopText(state.fixedTime.weeks, parseTimer(state.fixedTime.endTime * 60))}</Text>
+        <Text style={{ ...styles.cardContainer, color: props.theme.global.fontColor, fontSize: cx(14) }}>
+          {loopText(state.fixedTime.weeks, parseTimer(state.fixedTime.endTime * 60))}
+        </Text>
         <Spacer />
         {/* Apply for */}
         <View style={styles.cardContainer}>
@@ -148,15 +187,15 @@ const FixedTimeDetailPage = () => {
           <Spacer height={cx(10)} />
           <View style={[styles.applyContent, { paddingTop: state.fixedTime.channel === undefined ? 0 : cx(10) }]}>
             {state.fixedTime.channel === undefined ?
-              <Text>{I18n.getLang('timer_ceiling_fan_selectionfield_no_components_text')}</Text> :
+              <Text style={{color: props.theme.global.fontColor}}>{I18n.getLang('timer_ceiling_fan_selectionfield_no_components_text')}</Text> :
               <View style={[styles.applyItem, { marginBottom: cx(10), borderRadius: 4 }]}>
-                <Text style={{ color: '#000' }}>{params.applyForList[params.isPlug ? state.fixedTime.channel : 0]?.key}</Text>
+                <Text style={{ color: props.theme.global.fontColor }}>{params.applyForList[params.isPlug ? state.fixedTime.channel : 0]?.key}</Text>
                 {params.applyForList.length > 1 && <TouchableOpacity
-                  onPress={() => {
-                    state.fixedTime.channel = undefined
-                  }}
-                  style={{ paddingHorizontal: cx(5) }}>
-                  <Image style={{ width: cx(16), height: cx(16) }} source={res.ic_arrows_nav_clear} />
+                    onPress={() => {
+                      state.fixedTime.channel = undefined
+                    }}
+                    style={{ paddingHorizontal: cx(5) }}>
+                    <Image style={{ width: cx(16), height: cx(16), tintColor: props.theme.global.fontColor }} source={res.ic_arrows_nav_clear} />
                 </TouchableOpacity>}
               </View>
             }
@@ -170,8 +209,8 @@ const FixedTimeDetailPage = () => {
                 onPress={() => {
                   state.fixedTime.channel = params.isPlug ? index : 1
                 }}>
-                <Text style={{ color: '#000' }}>{item.key}</Text>
-                <Image style={{ width: cx(16), height: cx(16) }} source={res.device_panel_timer_add} />
+                <Text style={{ color: props.theme.global.fontColor }}>{item.key}</Text>
+                <Image style={{ width: cx(16), height: cx(16), tintColor: props.theme.global.fontColor }} source={res.device_panel_timer_add} />
               </TouchableOpacity>
             )
           })}
@@ -179,63 +218,63 @@ const FixedTimeDetailPage = () => {
         <Spacer />
         {/* Devices */}
         {state.fixedTime.color && !params.isPlug && <View style={styles.cardContainer}>
-          <Text style={styles.itemTitle}>{I18n.getLang('timeschedule_add_schedule_subheadline2_text')}</Text>
-          <Spacer height={cx(10)} />
-          <Card>
-            <LdvSwitch
-              title={I18n.getLang('light_sources_tile_tw_lighting_headline')}
-              color={'#fff'}
-              colorAlpha={1}
-              enable={true}
-              setEnable={() => { }}
-              showSwitch={false}
-            />
-            <LampAdjustView
-              isSupportColor={!!params.isSupportColor}
-              isSupportBrightness={!!params.isSupportBrightness}
-              isSupportTemperature={!!params.isSupportTemperature}
-              isColorMode={state.fixedTime.isColorMode ?? false}
-              reserveSV={true}
-              setIsColorMode={(v) => state.fixedTime.isColorMode = v}
-              h={state.fixedTime.color.h}
-              s={state.fixedTime.color.s}
-              v={state.fixedTime.color.v}
-              colorTemp={state.fixedTime.color.temperature}
-              brightness={state.fixedTime.color.brightness}
-              onHSVChangeComplete={(h, s, v) => {
-                state.fixedTime.color = {
-                  ...state.fixedTime.color,
-                  h,
-                  s,
-                  v
-                }
-              }}
-              onCCTChangeComplete={(v) => {
-                state.fixedTime.color = {
-                  ...state.fixedTime.color,
-                  temperature: v
-                }
-              }}
-              onBrightnessChangeComplete={(v) => {
-                state.fixedTime.color = {
-                  ...state.fixedTime.color,
-                  brightness: v
-                }
-              }}
-            />
-          </Card>
-          <Spacer />
+            <Text style={styles.itemTitle}>{I18n.getLang('timeschedule_add_schedule_subheadline2_text')}</Text>
+            <Spacer height={cx(10)} />
+            <Card>
+                <LdvSwitch
+                    title={I18n.getLang('light_sources_tile_tw_lighting_headline')}
+                    color={props.theme.card.background}
+                    colorAlpha={1}
+                    enable={true}
+                    setEnable={() => { }}
+                    showSwitch={false}
+                />
+                <LampAdjustView
+                    isSupportColor={!!params.isSupportColor}
+                    isSupportBrightness={!!params.isSupportBrightness}
+                    isSupportTemperature={!!params.isSupportTemperature}
+                    isColorMode={state.fixedTime.isColorMode ?? false}
+                    reserveSV={true}
+                    setIsColorMode={(v) => state.fixedTime.isColorMode = v}
+                    h={state.fixedTime.color.h}
+                    s={state.fixedTime.color.s}
+                    v={state.fixedTime.color.v}
+                    colorTemp={state.fixedTime.color.temperature}
+                    brightness={state.fixedTime.color.brightness}
+                    onHSVChangeComplete={(h, s, v) => {
+                      state.fixedTime.color = {
+                        ...state.fixedTime.color,
+                        h,
+                        s,
+                        v
+                      }
+                    }}
+                    onCCTChangeComplete={(v) => {
+                      state.fixedTime.color = {
+                        ...state.fixedTime.color,
+                        temperature: v
+                      }
+                    }}
+                    onBrightnessChangeComplete={(v) => {
+                      state.fixedTime.color = {
+                        ...state.fixedTime.color,
+                        brightness: v
+                      }
+                    }}
+                />
+            </Card>
+            <Spacer />
         </View>}
         {/* Settings */}
         <View style={styles.cardContainer}>
           <Text style={styles.itemTitle}>{I18n.getLang('timeschedule_add_schedule_subheadline4_text')}</Text>
           <Spacer height={cx(10)} />
           {!inRangeTime && <View style={{ flexDirection: 'row', alignItems: 'center' }}>
-            <Image style={{ width: cx(16), height: cx(16), tintColor: 'rgb(255,149,0)' }} source={res.ic_warning_amber} />
-            <Text style={{ fontSize: cx(12), color: 'rgb(255,149,0)' }}>{I18n.getLang('addTimeCycle_warning_text')}</Text>
+              <Image style={{ width: cx(16), height: cx(16), tintColor: props.theme.global.warning }} source={res.ic_warning_amber} />
+              <Text style={{ fontSize: cx(12), color: props.theme.global.warning }}>{I18n.getLang('addTimeCycle_warning_text')}</Text>
           </View>}
           <View >
-            <Text style={{ color: '#000', marginVertical: cx(10) }}>{I18n.getLang('addTimeCycle_settings_sec_text')}</Text>
+            <Text style={{ color: props.theme.global.fontColor, marginVertical: cx(10) }}>{I18n.getLang('addTimeCycle_settings_sec_text')}</Text>
             <LdvPickerView
               hour={toFixedString(Math.trunc(state.fixedTime.openTime / 60), 2)}
               minute={toFixedString(state.fixedTime.openTime % 60, 2)}
@@ -249,7 +288,7 @@ const FixedTimeDetailPage = () => {
             />
           </View>
           <View>
-            <Text style={{ color: '#000', marginVertical: cx(10) }}>{I18n.getLang('addTimeCycle_settings_sec_text2')}</Text>
+            <Text style={{ color: props.theme.global.fontColor, marginVertical: cx(10) }}>{I18n.getLang('addTimeCycle_settings_sec_text2')}</Text>
             <LdvPickerView
               hour={toFixedString(Math.trunc(state.fixedTime.closeTime / 60), 2)}
               minute={toFixedString(state.fixedTime.closeTime % 60, 2)}
@@ -270,81 +309,45 @@ const FixedTimeDetailPage = () => {
           time={`${convertMinutesTo12HourFormat(state.fixedTime.startTime, is24Hour)} - ${convertMinutesTo12HourFormat(state.fixedTime.endTime, is24Hour)}`}
           actions={(
             <View style={{ flexDirection: 'column' }}>
-              <Text style={{ color: '#000' }}>{I18n.formatValue('feature_summary_action_txt_4', `${Math.trunc(state.fixedTime.openTime / 60)}`, `${state.fixedTime.openTime % 60}`)}</Text>
+              <Text style={{ color: props.theme.global.fontColor }}>{I18n.formatValue('feature_summary_action_txt_4', `${Math.trunc(state.fixedTime.openTime / 60)}`, `${state.fixedTime.openTime % 60}`)}</Text>
               <View style={styles.summaryTag}>
-                <Text style={{ color: '#000' }}>{params.applyForList[params.isPlug ? (state.fixedTime.channel ?? 0) : 0]?.key}</Text>
+                <Text style={{ color: props.theme.tag.fontColor }}>{params.applyForList[params.isPlug ? (state.fixedTime.channel ?? 0) : 0]?.key}</Text>
               </View>
               <Spacer height={cx(5)} />
-              <Text style={{ color: '#000' }}>{I18n.formatValue('feature_summary_action_txt_6', `${Math.trunc(state.fixedTime.closeTime / 60)}`, `${state.fixedTime.closeTime % 60}`)}</Text>
+              <Text style={{ color: props.theme.global.fontColor }}>{I18n.formatValue('feature_summary_action_txt_6', `${Math.trunc(state.fixedTime.closeTime / 60)}`, `${state.fixedTime.closeTime % 60}`)}</Text>
               <View style={styles.summaryTag}>
-                <Text style={{ color: '#000' }}>{params.applyForList[params.isPlug ? (state.fixedTime.channel ?? 0) : 0]?.key}</Text>
+                <Text style={{ color: props.theme.tag.fontColor }}>{params.applyForList[params.isPlug ? (state.fixedTime.channel ?? 0) : 0]?.key}</Text>
               </View>
             </View>
           )}
         />
         <Spacer />
         {params.mode === 'edit' &&
-          <View style={{ marginHorizontal: cx(24) }}>
-            <DeleteButton
-              text={I18n.getLang('edit_fixedtimecycle_bttn_text')}
-              onPress={() => {
-                showDialog({
-                  method: 'confirm',
-                  title: I18n.getLang('cancel_dialog_delete_item_fixedtimecycle_titel'),
-                  subTitle: I18n.getLang('cancel_dialog_delete_item_fixedtimecycle_description'),
-                  onConfirm: async (_, { close }) => {
-                    close()
-                    state.loading = true
-                    const res = await params.onPost('del', state.fixedTime)
-                    state.loading = false
-                    if (res.success) {
-                      navigation.goBack()
-                    }
-                  }
-                })
-              }} />
-            <Spacer />
-          </View>
+            <View style={{ marginHorizontal: cx(24) }}>
+                <DeleteButton
+                    text={I18n.getLang('edit_fixedtimecycle_bttn_text')}
+                    onPress={() => {
+                      showDialog({
+                        method: 'confirm',
+                        title: I18n.getLang('cancel_dialog_delete_item_fixedtimecycle_titel'),
+                        subTitle: I18n.getLang('cancel_dialog_delete_item_fixedtimecycle_description'),
+                        onConfirm: async (_, { close }) => {
+                          close()
+                          state.loading = true
+                          const res = await params.onPost('del', state.fixedTime)
+                          state.loading = false
+                          if (res.success) {
+                            navigation.goBack()
+                          }
+                        }
+                      })
+                    }} />
+                <Spacer />
+            </View>
         }
       </ScrollView>
     </Page>
   )
 }
 
-
-const styles = StyleSheet.create({
-  cardContainer: {
-    marginHorizontal: cx(24)
-  },
-  itemTitle: {
-    color: '#000',
-    fontSize: cx(16),
-    fontWeight: 'bold',
-    fontFamily: 'helvetica_neue_lt_std_bd',
-  },
-  applyContent: {
-    backgroundColor: '#f6f6f6',
-    borderRadius: 4,
-    minHeight: cx(55),
-    flex: 1,
-    justifyContent: 'center',
-    paddingHorizontal: cx(10),
-    paddingTop: cx(10)
-  },
-  applyItem: {
-    paddingLeft: cx(5),
-    flexDirection: 'row',
-    justifyContent: 'space-between',
-    alignItems: 'center',
-    backgroundColor: '#fff',
-    height: cx(35),
-  },
-  summaryTag: {
-    backgroundColor: '#cbcbcb',
-    borderRadius: cx(16),
-    paddingHorizontal: cx(12),
-    alignSelf: 'flex-start'
-  }
-})
-
-export default FixedTimeDetailPage
+export default withTheme(FixedTimeDetailPage)