@ledvance/group-ui-biz-bundle 1.0.79 → 1.0.80

package/package.json

@@ -4,7 +4,7 @@
   "name": "@ledvance/group-ui-biz-bundle",
   "pid": [],
   "uiid": "",
-  "version": "1.0.79",
+  "version": "1.0.80",
   "scripts": {},
   "dependencies": {
     "@ledvance/base": "^1.x",

package/src/modules/biorhythm/BiorhythmDetailPage.tsx

@@ -22,6 +22,7 @@ import { useSystemTimeFormate } from '@ledvance/base/src/models/modules/NativePr
 import Spacer from '@ledvance/base/src/components/Spacer'
 
 const cx = Utils.RatioUtils.convertX
+const { withTheme } = Utils.ThemeUtils
 
 export interface BiorhythmEditPageParams {
   planData: Plan
@@ -37,7 +38,7 @@ export interface BiorhythmEditPageParams {
   showDeleteBtn?: boolean
 }
 
-const BiorhythmEditPage = () => {
+const BiorhythmEditPage = (props: { theme?: any }) => {
   const navigation = useNavigation()
   const is24Hour = useSystemTimeFormate()
   const params = useParams<BiorhythmEditPageParams>()
@@ -104,6 +105,28 @@ const BiorhythmEditPage = () => {
     return state.planData.name.length > 0 && state.planData.name.length < 33 && !nameRepeatFlag && !checkBiorhythmDataChanged && !minimumTipEnable()
   }, [nameRepeatFlag, state.planData.name, checkBiorhythmDataChanged, minimumTipEnable()])
 
+
+  const styles = StyleSheet.create({
+    titleBGView: {
+      flexDirection: 'row',
+      alignItems: 'center',
+      paddingHorizontal: cx(16),
+    },
+    colorBlock: {
+      width: cx(20),
+      height: cx(20),
+      marginStart: cx(12),
+      borderRadius: cx(4),
+    },
+    title: {
+      color: props.theme.global.fontColor,
+      fontSize: cx(16),
+      fontFamily: 'helvetica_neue_lt_std_bd',
+      paddingVertical: cx(16),
+    },
+  })
+
+
   return (
     <Page
       backText={I18n.getLang('add_new_trigger_time_system_back_text')}
@@ -118,7 +141,7 @@ const BiorhythmEditPage = () => {
         <View
           style={{
             marginHorizontal: cx(24),
-            backgroundColor: '#fff',
+            backgroundColor: props.theme.global.background,
           }}>
           <View style={{ height: cx(20) }} />
           <TextField
@@ -134,7 +157,8 @@ const BiorhythmEditPage = () => {
           <Spacer />
           <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}
             singlePicker={true}
             amText={I18n.getLang('manage_user_calendar_label_am')}
@@ -146,14 +170,14 @@ const BiorhythmEditPage = () => {
             }}
           />
           {minimumTipEnable() && <View style={{ flexDirection: 'row', marginVertical: cx(5) }}>
-            <Image style={{ width: cx(16), height: cx(16), tintColor: '#000' }} source={res.ic_info} />
-            <Text
-              style={{ color: '#000', fontSize: cx(12) }}>{I18n.getLang('add_new_trigger_time_information_text')}</Text>
+              <Image style={{ width: cx(16), height: cx(16), tintColor: props.theme.global.fontColor }} source={res.ic_info} />
+              <Text
+                  style={{ color: props.theme.global.fontColor, fontSize: cx(12) }}>{I18n.getLang('add_new_trigger_time_information_text')}</Text>
           </View>}
           <Spacer />
           <View style={{ flexDirection: 'row' }}>
             <View style={{ flex: 1 }}>
-              <Text style={{ fontSize: cx(14) }}>{I18n.getLang(isAdd ? 'add_new_trigger_time_text' : 'edit_trigger_time_headline_text')}</Text>
+              <Text style={{ fontSize: cx(14), color: props.theme.global.fontColor }}>{I18n.getLang(isAdd ? 'add_new_trigger_time_text' : 'edit_trigger_time_headline_text')}</Text>
             </View>
             <TouchableOpacity
               activeOpacity={1}
@@ -170,15 +194,15 @@ const BiorhythmEditPage = () => {
               <View
                 style={{ flex: 1, flexDirection: 'row', justifyContent: 'flex-end', alignContent: 'center', alignItems: 'center' }}>
                 <Image
-                  style={{ width: cx(24), height: cx(24), tintColor: '#000' }}
+                  style={{ width: cx(24), height: cx(24), tintColor: props.theme.global.fontColor }}
                   source={setImg()}
                 />
-                <Image style={{ width: cx(16), height: cx(16) }} source={BiologicalRes.biorhythom_select_rightIcon} />
+                <Image style={{ width: cx(16), height: cx(16), tintColor: props.theme.global.fontColor }} source={BiologicalRes.biorhythom_select_rightIcon} />
               </View>
             </TouchableOpacity>
           </View>
           <Text
-            style={{ fontSize: cx(16), fontFamily: 'helvetica_neue_lt_std_bd', marginTop: cx(33), marginBottom: cx(16) }}>
+            style={{ fontSize: cx(16), color: props.theme.global.fontColor, fontFamily: 'helvetica_neue_lt_std_bd', marginTop: cx(33), marginBottom: cx(16) }}>
             {I18n.getLang('add_new_trigger_time_subheadline_text')}
           </Text>
           <Card>
@@ -221,52 +245,30 @@ const BiorhythmEditPage = () => {
           <Spacer />
         </View>
         {!isAdd && showDeleteBtn &&
-          <View
-            style={{
-              marginHorizontal: cx(24),
-              marginVertical: cx(20)
-            }}>
-            <DeleteButton
-              text={I18n.getLang('edit_trigger_time_button_delete_text')}
-              onPress={() => {
-                showDialog({
-                  method: 'confirm',
-                  title: I18n.getLang('cancel_dialog_delete_item_bio_rhythm_titel'),
-                  subTitle: I18n.getLang('cancel_dialog_delete_item_wakeupschedule_description'),
-                  onConfirm: async (_, { close }) => {
-                    close()
-                    onDeleteBtnClick()
-                  },
-                })
-              }}
-            />
-          </View>}
+            <View
+                style={{
+                  marginHorizontal: cx(24),
+                  marginVertical: cx(20)
+                }}>
+                <DeleteButton
+                    text={I18n.getLang('edit_trigger_time_button_delete_text')}
+                    onPress={() => {
+                      showDialog({
+                        method: 'confirm',
+                        title: I18n.getLang('cancel_dialog_delete_item_bio_rhythm_titel'),
+                        subTitle: I18n.getLang('cancel_dialog_delete_item_wakeupschedule_description'),
+                        onConfirm: async (_, { close }) => {
+                          close()
+                          onDeleteBtnClick()
+                        },
+                      })
+                    }}
+                />
+            </View>}
       </ScrollView>
     </Page>
 
   )
 }
 
-
-const styles = StyleSheet.create({
-  titleBGView: {
-    flexDirection: 'row',
-    alignItems: 'center',
-    paddingHorizontal: cx(16),
-  },
-  colorBlock: {
-    width: cx(20),
-    height: cx(20),
-    marginStart: cx(12),
-    borderRadius: cx(4),
-  },
-  title: {
-    color: '#000',
-    fontSize: cx(16),
-    fontFamily: 'helvetica_neue_lt_std_bd',
-    paddingVertical: cx(16),
-  },
-})
-
-
-export default BiorhythmEditPage
+export default withTheme(BiorhythmEditPage)

package/src/modules/biorhythm/BiorhythmPage.tsx

@@ -36,6 +36,7 @@ import DeleteButton from '@ledvance/base/src/components/DeleteButton'
 import InfoText from '@ledvance/base/src/components/InfoText'
 
 const cx = Utils.RatioUtils.convertX
+const { withTheme } = Utils.ThemeUtils
 const width = Utils.RatioUtils.width
 
 
@@ -53,7 +54,7 @@ export interface BiorhythmPageParams {
   isMixLight: boolean
 }
 
-const BiorhythmPage = () => {
+const BiorhythmPage = (props: { theme?: any }) => {
   const navigation = useNavigation()
   const params = useParams<BiorhythmPageParams>()
   const [biorhythm, setBiorhythm] = useBiorhythm()
@@ -208,21 +209,21 @@ const BiorhythmPage = () => {
 
   const sunHomeText = string => {
     const text = string.split('SUN@HOME')
-    return text?.length === 1 && <Text style={{ fontSize: cx(14) }}>{text[0]}</Text> ||
-      <Text style={{
-        fontSize: cx(14),
-        flexDirection: 'row',
-      }}>
-        <Text>{text[0]}</Text>
-        <Text onPress={openLink}
-          style={{
-            fontFamily: 'helvetica_neue_lt_std_roman',
-            color: '#ff6600',
-            textDecorationLine: 'underline',
-            flexWrap: 'wrap',
-          }}>SUN@HOME</Text>
-        <Text>{text[1]}</Text>
-      </Text>
+    return text?.length === 1 && <Text style={{ fontSize: cx(14), color: props.theme.global.fontColor }}>{text[0]}</Text> ||
+        <Text style={{
+          fontSize: cx(14),
+          flexDirection: 'row',
+        }}>
+            <Text style={{color: props.theme.global.fontColor }}>{text[0]}</Text>
+            <Text onPress={openLink}
+                  style={{
+                    fontFamily: 'helvetica_neue_lt_std_roman',
+                    color: props.theme.button.primary,
+                    textDecorationLine: 'underline',
+                    flexWrap: 'wrap',
+                  }}>SUN@HOME</Text>
+            <Text style={{color: props.theme.global.fontColor }}>{text[1]}</Text>
+        </Text>
   }
 
   const randomIcon = () => {
@@ -248,7 +249,7 @@ const BiorhythmPage = () => {
       headlineText={I18n.getLang('add_new_trigger_time_system_back_text')}
       headlineIconContent={<Switch
         value={state.enable}
-        thumbColor={'#f60'}
+        thumbColor={props.theme.icon.primary}
         trackColor={{ false: '#00000026', true: '#ff660036' }}
         onValueChange={async enable => {
           if (enable) return showDialog({
@@ -303,14 +304,14 @@ const BiorhythmPage = () => {
                         justifyContent: 'center',
                         alignItems: 'center',
                         borderRadius: cx(20),
-                        backgroundColor: period.enabled ? '#ffe0d4' : '#fff',
+                        backgroundColor: period.enabled ? props.theme.global.thirdBrand : props.theme.global.background,
                         borderWidth: cx(1),
-                        borderColor: '#f60',
+                        borderColor: props.theme.global.brand,
                       }}
                     >
                       <Text
                         style={{
-                          color: '#FF6600',
+                          color: props.theme.global.brand,
                           textAlign: 'center',
                         }}
                       >
@@ -322,10 +323,10 @@ const BiorhythmPage = () => {
               })}
             </View>
             <View style={{ marginHorizontal: cx(24), marginTop: cx(20) }}>
-              <Text>{state.weekString}</Text>
+              <Text style={{color: props.theme.global.fontColor}}>{state.weekString}</Text>
             </View>
             <View style={{ marginHorizontal: cx(24), marginTop: cx(16) }}>
-              <Text>
+              <Text style={{color: props.theme.global.fontColor}}>
                 {I18n.getLang('bio_ryhthm_default_selectionfield_topic_text')}
               </Text>
               <TouchableOpacity
@@ -337,17 +338,17 @@ const BiorhythmPage = () => {
                   style={{
                     flexDirection: 'row',
                     borderRadius: cx(4),
-                    backgroundColor: '#f6f6f6',
+                    backgroundColor: props.theme.textInput.background,
                     alignItems: 'center',
                     flex: 1,
                     height: cx(44),
                     borderBottomWidth: cx(1),
-                    borderBottomColor: '#cbcbcb',
+                    borderBottomColor: props.theme.textInput.line,
                   }}
                 >
                   <Text style={{
                     fontSize: cx(16),
-                    color: '#000',
+                    color: props.theme.textInput.fontColor,
                     fontFamily: 'helvetica_neue_lt_std_roman',
                     paddingLeft: cx(16),
                   }}>
@@ -388,65 +389,66 @@ const BiorhythmPage = () => {
                 marginTop: cx(26),
               }}>
               {state.planList.length === 8 && <View
-                style={{ marginVertical: cx(10), flexDirection: 'row', alignItems: 'center', width: width - cx(48) }}>
-                <Image style={{ width: cx(16), height: cx(16), tintColor: '#ff9500' }} source={res.ic_warning_amber} />
-                <Text
-                  style={{
-                    flexWrap: 'wrap',
-                    fontSize: cx(12),
-                  }}>{I18n.getLang('add_new_trigger_time_warning_max_number_text')}</Text>
+                  style={{ marginVertical: cx(10), flexDirection: 'row', alignItems: 'center', width: width - cx(48) }}>
+                  <Image style={{ width: cx(16), height: cx(16), tintColor: props.theme.global.warning }} source={res.ic_warning_amber} />
+                  <Text
+                      style={{
+                        flexWrap: 'wrap',
+                        fontSize: cx(12),
+                        color: props.theme.global.fontColor
+                      }}>{I18n.getLang('add_new_trigger_time_warning_max_number_text')}</Text>
               </View>}
               {state.planList.length < 8 &&
-                <>
-                  <Text
-                    style={{
-                      fontSize: cx(16),
-                      fontWeight: 'bold',
-                      color: 'rgb(0,0,0)',
-                    }}>{I18n.getLang('bio_ryhthm_default_subheadline_text')}</Text>
-                  <TouchableOpacity
-                    onPress={() => {
-                      const ids: number[] = state.planList.map(p => p.id)
-                      const newPlan: Plan = {
-                        id: Math.max(...ids) + 1,
-                        icon: res.rhythm_icon1,
-                        time: 0,
-                        name: '',
-                        colorTemperature: 0,
-                        brightness: 100,
-                        action: [
-                          {
-                            uri: 'model/attribute/set/LightCtrl/ColorTemperature',
-                            startValue: `${colorTemperatureValue(0)}`,
-                          },
-                          {
-                            uri: 'model/attribute/set/LightCtrl/Brightness',
-                            startValue: '100',
-                          },
-                        ],
-                        enable: true,
-                        iconId: randomIcon(),
-                      }
-                      const editPageParams: BiorhythmEditPageParams = {
-                        planData: newPlan,
-                        isAdd: true,
-                        onPlanEdited,
-                        onPlanDelete,
-                        nameRepeat,
-                        minimumEnable,
-                        iconIdList: state.planList?.map(item => {
-                          return item.iconId
-                        }),
-                        isMixLight: params.isMixLight,
-                        isSupportTemperature: params.isSupportTemperature,
-                        isSupportBrightness: params.isSupportBrightness,
-                        showDeleteBtn
-                      }
-                      navigation.navigate(ui_biz_routerKey.group_ui_biz_biological_detail, editPageParams)
-                    }}>
-                    <Image source={BiologicalRes.biorhythom_add} style={{ height: cx(24), width: cx(24) }} />
-                  </TouchableOpacity>
-                </>
+                  <>
+                      <Text
+                          style={{
+                            fontSize: cx(16),
+                            fontWeight: 'bold',
+                            color: props.theme.global.fontColor,
+                          }}>{I18n.getLang('bio_ryhthm_default_subheadline_text')}</Text>
+                      <TouchableOpacity
+                          onPress={() => {
+                            const ids: number[] = state.planList.map(p => p.id)
+                            const newPlan: Plan = {
+                              id: Math.max(...ids) + 1,
+                              icon: res.rhythm_icon1,
+                              time: 0,
+                              name: '',
+                              colorTemperature: 0,
+                              brightness: 100,
+                              action: [
+                                {
+                                  uri: 'model/attribute/set/LightCtrl/ColorTemperature',
+                                  startValue: `${colorTemperatureValue(0)}`,
+                                },
+                                {
+                                  uri: 'model/attribute/set/LightCtrl/Brightness',
+                                  startValue: '100',
+                                },
+                              ],
+                              enable: true,
+                              iconId: randomIcon(),
+                            }
+                            const editPageParams: BiorhythmEditPageParams = {
+                              planData: newPlan,
+                              isAdd: true,
+                              onPlanEdited,
+                              onPlanDelete,
+                              nameRepeat,
+                              minimumEnable,
+                              iconIdList: state.planList?.map(item => {
+                                return item.iconId
+                              }),
+                              isMixLight: params.isMixLight,
+                              isSupportTemperature: params.isSupportTemperature,
+                              isSupportBrightness: params.isSupportBrightness,
+                              showDeleteBtn
+                            }
+                            navigation.navigate(ui_biz_routerKey.group_ui_biz_biological_detail, editPageParams)
+                          }}>
+                          <Image source={BiologicalRes.biorhythom_add} style={{ height: cx(24), width: cx(24), tintColor: props.theme.icon.primary }} />
+                      </TouchableOpacity>
+                  </>
               }
             </View>
             <FlatList
@@ -463,9 +465,9 @@ const BiorhythmPage = () => {
                   <View
                     style={{
                       height: cx(118),
-                      backgroundColor: 'white',
+                      backgroundColor: props.theme.card.background,
                       elevation: cx(7),
-                      shadowColor: '#000000',
+                      shadowColor: props.theme.card.shadowColor,
                       shadowOpacity: 0.2,
                       shadowRadius: cx(7),
                       shadowOffset: {
@@ -516,13 +518,13 @@ const BiorhythmPage = () => {
                                 height: cx(24),
                                 marginStart: cx(10),
                                 marginRight: cx(6),
-                                tintColor: '#474e5d',
+                                tintColor: props.theme.icon.normal,
                               }}
                             />
                             <Text
                               style={{
                                 fontSize: cx(16),
-                                color: '#000',
+                                color: props.theme.global.fontColor,
                                 fontFamily: 'helvetica_neue_lt_std_roman',
                               }}
                             >
@@ -531,7 +533,7 @@ const BiorhythmPage = () => {
                           </View>
                           <Switch
                             value={item.enable}
-                            thumbColor={'#f60'}
+                            thumbColor={props.theme.icon.primary}
                             trackColor={{ false: '#00000026', true: '#ff660036' }}
                             onValueChange={e => {
                               item.enable = e
@@ -544,7 +546,7 @@ const BiorhythmPage = () => {
                           <Text
                             style={{
                               fontSize: cx(12),
-                              color: '#666',
+                              color: props.theme.global.secondFontColor,
                               fontFamily: 'helvetica_neue_lt_std_roman',
                               paddingLeft: cx(20),
                             }}
@@ -654,6 +656,6 @@ const BiorhythmPage = () => {
   )
 }
 
-export default BiorhythmPage
+export default withTheme(BiorhythmPage)
 
 

package/src/modules/biorhythm/IconSelect.tsx

@@ -8,6 +8,7 @@ import I18n from '@ledvance/base/src/i18n'
 import { useParams } from '@ledvance/base/src/hooks/Hooks'
 
 const cx = Utils.RatioUtils.convertX
+const { withTheme } = Utils.ThemeUtils
 
 interface IconSelectPageParams {
   id: string | number
@@ -15,7 +16,7 @@ interface IconSelectPageParams {
   iconIdList: any
 }
 
-function IconSelectPage() {
+function IconSelectPage(props: { theme?: any }) {
   const [list, setList] = useState(iconList)
   const navigation = useNavigation()
   const params = useParams<IconSelectPageParams>()
@@ -51,7 +52,7 @@ function IconSelectPage() {
       />
       <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'}}>
@@ -70,7 +71,7 @@ function IconSelectPage() {
                   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>
@@ -81,4 +82,4 @@ function IconSelectPage() {
   )
 }
 
-export default IconSelectPage
+export default withTheme(IconSelectPage)

package/src/modules/childLock/ChildLockPage.tsx

@@ -58,7 +58,7 @@ const ChildLockPage = (props: { theme?: any }) => {
       paddingVertical: cx(16),
     },
     shadow: {
-      shadowColor: props.theme.global.fontColor,
+      shadowColor: props.theme.card.shadowColor,
       shadowOpacity: 0.2,
       shadowRadius: 8,
       elevation:8,
@@ -66,7 +66,7 @@ const ChildLockPage = (props: { theme?: any }) => {
         width: 0,
         height: 4,
       },
-      backgroundColor: props.theme.global.background,
+      backgroundColor: props.theme.card.background,
       borderRadius: 8,
     },
   })

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

@@ -265,13 +265,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 }}>