@ledvance/ui-biz-bundle 1.1.90 → 1.1.92

package/src/newModules/overchargeSwitch/OverchargeSwitchPage.tsx

@@ -10,6 +10,7 @@ import {Result} from "@ledvance/base/src/models/modules/Result";
 import {useParams} from "@ledvance/base/src/hooks/Hooks";
 
 const { convertX: cx } = Utils.RatioUtils
+const { withTheme } = Utils.ThemeUtils
 
 export interface OverchargeSwitchPageParams {
   overchargeSwitchCode: string
@@ -19,13 +20,45 @@ export function useOverchargeSwitch(overchargeSwitchCode: string): [boolean, (v:
   return useDp(overchargeSwitchCode)
 }
 
-const OverchargeSwitchPage = () => {
+const OverchargeSwitchPage = (props: { theme?: any }) => {
   const params = useParams<OverchargeSwitchPageParams>()
   const devInfo = useDeviceInfo()
   const [overchargeSwitch, setOverchargeSwitch] = useOverchargeSwitch(params.overchargeSwitchCode)
   const state = useReactive({
     loading: false
   })
+
+  const styles = StyleSheet.create({
+    titleBGView: {
+      flexDirection: 'row',
+      alignItems: 'center',
+      paddingHorizontal: cx(16),
+      marginHorizontal: cx(24),
+      marginTop: cx(30)
+    },
+    title: {
+      color: props.theme.global.fontColor,
+      fontSize: cx(14),
+      fontFamily: 'helvetica_neue_lt_std_bd',
+      paddingVertical: cx(16),
+    },
+    desc: {
+      color: props.theme.global.fontColor,
+    },
+    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}
     loading={state.loading}>
@@ -35,7 +68,7 @@ const OverchargeSwitchPage = () => {
           <Text style={styles.title}>{I18n.getLang('switch_overcharge_headline_text')}</Text>
         </View>
         <View style={{ paddingBottom: cx(16) }}>
-          <Text>{I18n.getLang('switch_overcharge_headline_description')}</Text>
+          <Text style={styles.desc}>{I18n.getLang('switch_overcharge_headline_description')}</Text>
         </View>
       </View>
       <Spacer style={{ flex: 1 }} height={0} width={0} />
@@ -48,49 +81,4 @@ const OverchargeSwitchPage = () => {
   </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),
-    marginTop: cx(30)
-  },
-  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 OverchargeSwitchPage
+export default withTheme(OverchargeSwitchPage)

package/src/newModules/powerOnBehavior/LightBehaviorPage.tsx

@@ -15,10 +15,11 @@ import { cloneDeep } from 'lodash'
 import { useParams } from '@ledvance/base/src/hooks/Hooks'
 
 const { convertX: cx } = Utils.RatioUtils
+const { withTheme } = Utils.ThemeUtils
 
 export interface LightBehaviorPageParams {
   memoryDpCode: string
-  disturbDpCode: string 
+  disturbDpCode: string
   isSupportDoNotDisturb?: boolean
   isSupportBrightness: boolean
   isSupportTemperature: boolean
@@ -30,7 +31,7 @@ export enum PowerMemoryMode {
   Last = 1,
   Custom = 2
 }
-const LightBehaviorPage = () => {
+const LightBehaviorPage = (props: { theme?: any }) => {
   const params = useParams<LightBehaviorPageParams>()
   const deviceInfo = useDeviceInfo()
   const [powerMemory, setPowerMemory] = usePowerOffMemory(params.memoryDpCode)
@@ -44,6 +45,59 @@ const LightBehaviorPage = () => {
     state.powerMemory = powerMemory
   }, [JSON.stringify(powerMemory)])
 
+  const styles = StyleSheet.create({
+    root: {
+      flex: 1,
+    },
+    tipText: {
+      marginHorizontal: cx(24),
+      color: props.theme.global.fontColor,
+      fontSize: cx(14),
+      fontFamily: 'helvetica_neue_lt_std_roman',
+    },
+    modeSelectGroup: {
+      marginHorizontal: cx(24),
+      backgroundColor: props.theme.container.background,
+      borderRadius: cx(4),
+    },
+    modeTip: {
+      marginHorizontal: cx(8),
+      color: props.theme.global.fontColor,
+      fontSize: cx(14),
+      fontWeight: 'bold',
+      fontFamily: 'helvetica_neue_lt_std_bd',
+    },
+    modeSelectCard: {
+      marginHorizontal: cx(8),
+    },
+    line: {
+      height: cx(1),
+      marginHorizontal: cx(12),
+      backgroundColor: props.theme.container.divider,
+    },
+    itemRoot: {
+      flexDirection: 'row',
+      alignItems: 'center',
+      paddingHorizontal: cx(12),
+      paddingBottom: cx(8),
+    },
+    itemTextGroup: {
+      flex: 1,
+      marginEnd: cx(12),
+      justifyContent: 'center',
+    },
+    itemTitle: {
+      color: props.theme.global.fontColor,
+      fontSize: cx(14),
+      fontFamily: 'helvetica_neue_lt_std_roman',
+    },
+    itemContent: {
+      color: props.theme.global.secondFontColor,
+      fontSize: cx(14),
+      fontFamily: 'helvetica_neue_lt_std_roman',
+    },
+  })
+
   return (
     <Page
       backText={deviceInfo.name}
@@ -64,6 +118,7 @@ const LightBehaviorPage = () => {
             <Card style={styles.modeSelectCard}>
               <Spacer height={cx(12)} />
               <PowerOnBehaviorModeItem
+                styles={styles}
                 enable={state.powerMemory.type === PowerMemoryMode.Default}
                 title={I18n.getLang('groups_settings_power_on_behavior_secondbox_status_value1_topic')}
                 content={I18n.getLang('groups_settings_power_on_behavior_secondbox_status_value1_description')}
@@ -74,6 +129,7 @@ const LightBehaviorPage = () => {
               <View style={styles.line} />
               <Spacer height={cx(8)} />
               <PowerOnBehaviorModeItem
+                styles={styles}
                 enable={state.powerMemory.type === PowerMemoryMode.Last}
                 title={I18n.getLang('groups_settings_power_on_behavior_secondbox_status_value2_topic')}
                 content={I18n.getLang('groups_settings_power_on_behavior_secondbox_status_value2_description')}
@@ -84,6 +140,7 @@ const LightBehaviorPage = () => {
               <View style={styles.line} />
               <Spacer height={cx(8)} />
               <PowerOnBehaviorModeItem
+                styles={styles}
                 enable={state.powerMemory.type === PowerMemoryMode.Custom}
                 title={I18n.getLang('groups_settings_power_on_behavior_secondbox_status_value3_topic')}
                 content={I18n.getLang('groups_settings_power_on_behavior_secondbox_status_value3_description')}
@@ -97,77 +154,77 @@ const LightBehaviorPage = () => {
           </View>
           <Spacer />
           {state.powerMemory.type === PowerMemoryMode.Custom &&
-            <Card style={{ marginHorizontal: cx(24) }}>
-              <View>
-                <Spacer />
-                <LampAdjustView
-                  isSupportColor={params.isSupportColor}
-                  isSupportTemperature={params.isSupportTemperature}
-                  isSupportBrightness={params.isSupportBrightness}
-                  isColorMode={state.powerMemory.isColor}
-                  reserveSV={true}
-                  setIsColorMode={async isColorMode => {
-                    state.powerMemory.isColor = isColorMode
-                  }}
-                  h={state.powerMemory.hue} s={state.powerMemory.sat} v={state.powerMemory.val}
-                  onHSVChange={(h, s, v) => {
-                    state.powerMemory.hue = h
-                    state.powerMemory.sat = s
-                    state.powerMemory.val = v
-                  }}
-                  onHSVChangeComplete={async (h, s, v) => {
-                    state.powerMemory.hue = h
-                    state.powerMemory.sat = s
-                    state.powerMemory.val = v
-                    await setPowerMemory(state.powerMemory)
-                  }}
-                  colorTemp={state.powerMemory.temperature}
-                  brightness={state.powerMemory.bright}
-                  onCCTChange={cct => {
-                    state.powerMemory.temperature = cct
-                  }}
-                  onCCTChangeComplete={async cct => {
-                    state.powerMemory.temperature = cct
-                    await setPowerMemory(state.powerMemory)
-                  }}
-                  onBrightnessChange={brightness => {
-                    state.powerMemory.bright = brightness
-                  }}
-                  onBrightnessChangeComplete={async brightness => {
-                    state.powerMemory.bright = brightness
-                    await setPowerMemory(state.powerMemory)
-                  }} />
-              </View>
-            </Card>
+              <Card style={{ marginHorizontal: cx(24) }}>
+                  <View>
+                      <Spacer />
+                      <LampAdjustView
+                          isSupportColor={params.isSupportColor}
+                          isSupportTemperature={params.isSupportTemperature}
+                          isSupportBrightness={params.isSupportBrightness}
+                          isColorMode={state.powerMemory.isColor}
+                          reserveSV={true}
+                          setIsColorMode={async isColorMode => {
+                            state.powerMemory.isColor = isColorMode
+                          }}
+                          h={state.powerMemory.hue} s={state.powerMemory.sat} v={state.powerMemory.val}
+                          onHSVChange={(h, s, v) => {
+                            state.powerMemory.hue = h
+                            state.powerMemory.sat = s
+                            state.powerMemory.val = v
+                          }}
+                          onHSVChangeComplete={async (h, s, v) => {
+                            state.powerMemory.hue = h
+                            state.powerMemory.sat = s
+                            state.powerMemory.val = v
+                            await setPowerMemory(state.powerMemory)
+                          }}
+                          colorTemp={state.powerMemory.temperature}
+                          brightness={state.powerMemory.bright}
+                          onCCTChange={cct => {
+                            state.powerMemory.temperature = cct
+                          }}
+                          onCCTChangeComplete={async cct => {
+                            state.powerMemory.temperature = cct
+                            await setPowerMemory(state.powerMemory)
+                          }}
+                          onBrightnessChange={brightness => {
+                            state.powerMemory.bright = brightness
+                          }}
+                          onBrightnessChangeComplete={async brightness => {
+                            state.powerMemory.bright = brightness
+                            await setPowerMemory(state.powerMemory)
+                          }} />
+                  </View>
+              </Card>
           }
           <Spacer />
           {!!params.isSupportDoNotDisturb && <View style={styles.modeSelectGroup}>
-            <Spacer height={cx(8)} />
-            <View style={{ marginHorizontal: cx(8) }}>
-              <Card style={{ borderRadius: cx(4) }}>
-                <LdvSwitch
-                  title={I18n.getLang('light_settings_default_secondbox_text')}
-                  color={'#fffffff'}
-                  colorAlpha={1}
-                  enable={doNotDisturb}
-                  setEnable={async (enable: boolean) => {
-                    state.loading = true
-                    await setDoNotDisturb(enable)
-                    state.loading = false
-                  }} />
-              </Card>
-            </View>
-            <Spacer height={cx(8)} />
-            <Text
-              style={{
-                marginHorizontal: cx(8),
-                color: '#000',
-                fontSize: cx(12),
-                fontFamily: 'helvetica_neue_lt_std_roman',
-              }}>
-              {I18n.getLang('groups_settings_power_on_behavior_disturbbox_note')}
-            </Text>
-            <Spacer height={cx(8)} />
+              <Spacer height={cx(8)} />
+              <View style={{ marginHorizontal: cx(8) }}>
+                  <Card style={{ borderRadius: cx(4) }}>
+                      <LdvSwitch
+                          title={I18n.getLang('light_settings_default_secondbox_text')}
+                          color={props.theme.card.background}
+                          colorAlpha={1}
+                          enable={doNotDisturb}
+                          setEnable={async (enable: boolean) => {
+                            state.loading = true
+                            await setDoNotDisturb(enable)
+                            state.loading = false
+                          }} />
+                  </Card>
+              </View>
+              <Spacer height={cx(8)} />
+              <Text
+                  style={{
+                    marginHorizontal: cx(8),
+                    color: props.theme.global.fontColor,
+                    fontSize: cx(12),
+                    fontFamily: 'helvetica_neue_lt_std_roman',
+                  }}>
+                {I18n.getLang('groups_settings_power_on_behavior_disturbbox_note')}
+              </Text>
+              <Spacer height={cx(8)} />
           </View>}
           <Spacer />
         </View>
@@ -181,9 +238,11 @@ interface PowerOnBehaviorModeItemProps extends PropsWithChildren<ViewProps> {
   title: string
   content: string
   enable: boolean
+  styles: StyleSheet.NamedStyles<any>
 }
 
 function PowerOnBehaviorModeItem(props: PowerOnBehaviorModeItemProps) {
+  const { styles } = props
   return (
     <TouchableOpacity onPress={props.onPress}>
       <View style={styles.itemRoot}>
@@ -194,73 +253,16 @@ function PowerOnBehaviorModeItem(props: PowerOnBehaviorModeItemProps) {
         </View>
         <Image
           source={{ uri: res.ic_check }}
-          style={[
-            styles.itemCheckedIcon,
-            {
-              display: props.enable ? 'flex' : 'none',
-            },
-          ]} />
+          style={{
+            width: cx(32),
+            height: cx(32),
+            marginEnd: cx(4),
+            display: props.enable ? 'flex' : 'none',
+          }}
+        />
       </View>
     </TouchableOpacity>
   )
 }
 
-const styles = StyleSheet.create({
-  root: {
-    flex: 1,
-  },
-  tipText: {
-    marginHorizontal: cx(24),
-    color: '#000',
-    fontSize: cx(14),
-    fontFamily: 'helvetica_neue_lt_std_roman',
-  },
-  modeSelectGroup: {
-    marginHorizontal: cx(24),
-    backgroundColor: '#f6f6f6',
-    borderRadius: cx(4),
-  },
-  modeTip: {
-    marginHorizontal: cx(8),
-    color: '#000',
-    fontSize: cx(14),
-    fontWeight: 'bold',
-    fontFamily: 'helvetica_neue_lt_std_bd',
-  },
-  modeSelectCard: {
-    marginHorizontal: cx(8),
-  },
-  line: {
-    height: cx(1),
-    marginHorizontal: cx(12),
-    backgroundColor: '#3C3C435B',
-  },
-  itemRoot: {
-    flexDirection: 'row',
-    alignItems: 'center',
-    paddingHorizontal: cx(12),
-    paddingBottom: cx(8),
-  },
-  itemTextGroup: {
-    flex: 1,
-    marginEnd: cx(12),
-    justifyContent: 'center',
-  },
-  itemTitle: {
-    color: '#000',
-    fontSize: cx(14),
-    fontFamily: 'helvetica_neue_lt_std_roman',
-  },
-  itemContent: {
-    color: '#666',
-    fontSize: cx(14),
-    fontFamily: 'helvetica_neue_lt_std_roman',
-  },
-  itemCheckedIcon: {
-    width: cx(32),
-    height: cx(32),
-    marginEnd: cx(4),
-  },
-})
-
-export default LightBehaviorPage
+export default withTheme(LightBehaviorPage)

package/src/newModules/powerOnBehavior/PlugBehaviorPage.tsx

@@ -12,16 +12,17 @@ import { useReactive, useUpdateEffect } from 'ahooks'
 import { useParams } from '@ledvance/base/src/hooks/Hooks'
 
 const { convertX: cx } = Utils.RatioUtils
+const { withTheme } = Utils.ThemeUtils
 
 const RELAY_STATUS_OFF = 'off'
 const RELAY_STATUS_ON = 'on'
 const RELAY_STATUS_MEMORY = 'memory'
 
-const PlugBehaviorPage = () => {
+const PlugBehaviorPage = (props: { theme?: any }) => {
   const params = useParams<PowerBehaviorPageParams>()
   const deviceInfo = useDeviceInfo()
   const [powerMemory, setPowerMemory] = usePowerBehavior(params.powerBehaviorCode)
-  
+
   const state = useReactive({
     powerMemory,
     loading: false,
@@ -31,6 +32,64 @@ const PlugBehaviorPage = () => {
     state.powerMemory = powerMemory
   }, [powerMemory])
 
+  const styles = StyleSheet.create({
+    root: {
+      flex: 1,
+    },
+    tipText: {
+      marginHorizontal: cx(24),
+      color: props.theme.global.fontColor,
+      fontSize: cx(14),
+      fontFamily: 'helvetica_neue_lt_std_roman',
+    },
+    modeSelectGroup: {
+      marginHorizontal: cx(24),
+      backgroundColor: props.theme.container.background,
+      borderRadius: cx(4),
+    },
+    modeTip: {
+      marginHorizontal: cx(8),
+      color: props.theme.global.fontColor,
+      fontSize: cx(14),
+      fontWeight: 'bold',
+      fontFamily: 'helvetica_neue_lt_std_bd',
+    },
+    modeSelectCard: {
+      marginHorizontal: cx(8),
+    },
+    line: {
+      height: cx(1),
+      marginHorizontal: cx(12),
+      backgroundColor: props.theme.container.divider,
+    },
+    itemRoot: {
+      flexDirection: 'row',
+      alignItems: 'center',
+      paddingHorizontal: cx(12),
+      paddingBottom: cx(8),
+    },
+    itemTextGroup: {
+      flex: 1,
+      marginEnd: cx(12),
+      justifyContent: 'center',
+    },
+    itemTitle: {
+      color: props.theme.global.fontColor,
+      fontSize: cx(14),
+      fontFamily: 'helvetica_neue_lt_std_roman',
+    },
+    itemContent: {
+      color: props.theme.global.secondFontColor,
+      fontSize: cx(14),
+      fontFamily: 'helvetica_neue_lt_std_roman',
+    },
+    itemCheckedIcon: {
+      width: cx(32),
+      height: cx(32),
+      marginEnd: cx(4),
+    },
+  })
+
   return (
     <Page
       backText={deviceInfo.name}
@@ -47,6 +106,7 @@ const PlugBehaviorPage = () => {
           <Card style={styles.modeSelectCard}>
             <Spacer height={cx(12)} />
             <PowerOnBehaviorModeItem
+              styles={styles}
               enable={state.powerMemory === RELAY_STATUS_OFF}
               title={I18n.getLang('feature_summary_action_txt_2')}
               content={I18n.getLang('socket_settings_firstbox_status1_description')}
@@ -57,6 +117,7 @@ const PlugBehaviorPage = () => {
             <View style={styles.line} />
             <Spacer height={cx(8)} />
             <PowerOnBehaviorModeItem
+              styles={styles}
               enable={state.powerMemory === RELAY_STATUS_ON}
               title={I18n.getLang('feature_summary_action_txt_1')}
               content={I18n.getLang('socket_settings_firstbox_status2_description')}
@@ -67,6 +128,7 @@ const PlugBehaviorPage = () => {
             <View style={styles.line} />
             <Spacer height={cx(8)} />
             <PowerOnBehaviorModeItem
+              styles={styles}
               enable={state.powerMemory === RELAY_STATUS_MEMORY}
               title={I18n.getLang('sockets_specific_settings_relay_status_remember')}
               content={I18n.getLang('socket_settings_firstbox_status3_description')}
@@ -88,9 +150,11 @@ interface PowerOnBehaviorModeItemProps extends PropsWithChildren<ViewProps> {
   title: string
   content: string
   enable: boolean
+  styles: StyleSheet.NamedStyles<any>
 }
 
 function PowerOnBehaviorModeItem(props: PowerOnBehaviorModeItemProps) {
+  const { styles } = props
   return (
     <TouchableOpacity onPress={props.onPress}>
       <View style={styles.itemRoot}>
@@ -112,62 +176,4 @@ function PowerOnBehaviorModeItem(props: PowerOnBehaviorModeItemProps) {
   )
 }
 
-const styles = StyleSheet.create({
-  root: {
-    flex: 1,
-  },
-  tipText: {
-    marginHorizontal: cx(24),
-    color: '#000',
-    fontSize: cx(14),
-    fontFamily: 'helvetica_neue_lt_std_roman',
-  },
-  modeSelectGroup: {
-    marginHorizontal: cx(24),
-    backgroundColor: '#f6f6f6',
-    borderRadius: cx(4),
-  },
-  modeTip: {
-    marginHorizontal: cx(8),
-    color: '#000',
-    fontSize: cx(14),
-    fontWeight: 'bold',
-    fontFamily: 'helvetica_neue_lt_std_bd',
-  },
-  modeSelectCard: {
-    marginHorizontal: cx(8),
-  },
-  line: {
-    height: cx(1),
-    marginHorizontal: cx(12),
-    backgroundColor: '#3C3C435B',
-  },
-  itemRoot: {
-    flexDirection: 'row',
-    alignItems: 'center',
-    paddingHorizontal: cx(12),
-    paddingBottom: cx(8),
-  },
-  itemTextGroup: {
-    flex: 1,
-    marginEnd: cx(12),
-    justifyContent: 'center',
-  },
-  itemTitle: {
-    color: '#000',
-    fontSize: cx(14),
-    fontFamily: 'helvetica_neue_lt_std_roman',
-  },
-  itemContent: {
-    color: '#666',
-    fontSize: cx(14),
-    fontFamily: 'helvetica_neue_lt_std_roman',
-  },
-  itemCheckedIcon: {
-    width: cx(32),
-    height: cx(32),
-    marginEnd: cx(4),
-  },
-})
-
-export default PlugBehaviorPage
+export default withTheme(PlugBehaviorPage)