@ledvance/ui-biz-bundle 1.1.148 → 1.1.149

package/package.json

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

package/src/newModules/energyConsumption/EnergyConsumptionChart/LandscapeView.tsx

@@ -9,8 +9,8 @@ import { PowerChartSection } from './PowerChartSection'
 
 const { convertX: cx, width } = Utils.RatioUtils
 
-export const LandscapeView = ({ state, actions, params, styles, theme }) => (
-  <View style={styles.landscapeContainer}>
+export const LandscapeView = ({ state, actions, params, styles, theme, screenWidth, screenHeight }) => (
+  <View style={[styles.landscapeContainer, { width: screenWidth, height: screenHeight }]}>
     <View style={styles.landscapeHeader}>
       <Text style={styles.landscapeTitle}>
         {I18n.getLang(state.chartType === ChartType.kWh ? 'chartdisplay_energy' : 'chartdisplay_power')}
@@ -29,7 +29,7 @@ export const LandscapeView = ({ state, actions, params, styles, theme }) => (
           params={params}
           styles={styles}
           theme={theme}
-          chartHeight={cx(width - 110)}
+          chartHeight={screenHeight - cx(110)}
         />
       ) : (
         <PowerChartSection
@@ -38,7 +38,7 @@ export const LandscapeView = ({ state, actions, params, styles, theme }) => (
           actions={actions}
           styles={styles}
           theme={theme}
-          chartHeight={cx(width - 110)}
+          chartHeight={screenHeight - cx(110)}
         />
       )}
     </View>

package/src/newModules/energyConsumption/EnergyConsumptionChart/index.tsx

@@ -9,6 +9,7 @@ import { PortraitView } from './PortraitView'
 import { getStyles } from './styles'
 
 import { useEnergyData } from './useEnergyData'
+import { useScreenDimensions } from './useScreenDimensions'
 
 const { withTheme } = Utils.ThemeUtils
 
@@ -22,9 +23,18 @@ const EnergyConsumptionChartComponent = (props: { theme?: ThemeType }) => {
   // Use useMemo to prevent re-creating styles on every render
   const styles = useMemo(() => getStyles(props.theme), [props.theme])
 
+  const { width: screenWidth, height: screenHeight } = useScreenDimensions()
   // Conditionally render the correct view based on orientation state
   if (state.isLandscape) {
-    return <LandscapeView state={state} actions={actions} params={params} styles={styles} theme={props.theme}/>
+    return <LandscapeView
+      state={state}
+      actions={actions}
+      params={params}
+      styles={styles}
+      theme={props.theme}
+      screenWidth={screenWidth}
+      screenHeight={screenHeight}
+    />
   }
 
   return <PortraitView state={state} actions={actions} params={params} styles={styles} theme={props.theme}/>

package/src/newModules/energyConsumption/EnergyConsumptionChart/styles.ts

@@ -51,7 +51,7 @@ export const getStyles = (theme: ThemeType | undefined) => StyleSheet.create({
   },
   landscapeContainer: {
     backgroundColor: theme?.global.background,
-    width: cx(height + 20), // In landscape, width is screen height
+    // width: cx(height + 20), // In landscape, width is screen height
     // height: width, // In landscape, height is screen width
     paddingVertical: cx(30),
     paddingHorizontal: cx(20),

package/src/newModules/energyConsumption/EnergyConsumptionChart/useScreenDimensions.ts

@@ -0,0 +1,36 @@
+import { useEffect, useState } from 'react'
+import { Dimensions, ScaledSize, Platform } from 'react-native'
+import { Utils } from 'tuya-panel-kit'
+
+const { width, height, statusBarHeight } = Utils.RatioUtils
+
+export const useScreenDimensions = () => {
+  const { width: screenWidth, height: screenHeight } = Dimensions.get('window')
+  const [screenData, setScreenData] = useState({
+    width: screenWidth,
+    height: screenHeight,
+  })
+  useEffect(() => {
+    if (Platform.OS === 'android') {
+      setScreenData({
+        width: height,
+        height: width - statusBarHeight,
+      })
+    }
+    const onChange = (result: { window: ScaledSize }) => {
+      if (Platform.OS === 'ios') {
+        setScreenData(result.window)
+      }
+    }
+    // Subscribe to dimension changes
+    Dimensions.addEventListener('change', onChange)
+    // Don't forget to unsubscribe on cleanup
+    return () => {
+      Dimensions.removeEventListener('change', onChange)
+    }
+  }, [])
+  return {
+    ...screenData,
+    isLandscape: screenData.width > screenData.height,
+  }
+}