@ledvance/group-ui-biz-bundle 1.0.137 → 1.0.138

package/package.json

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

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

@@ -7,8 +7,8 @@ import { ChartSection } from './ChartSection'
 
 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('chartdisplay_energy')}
@@ -25,7 +25,7 @@ export const LandscapeView = ({ state, actions, params, styles, theme }) => (
         params={params}
         styles={styles}
         theme={theme}
-        chartHeight={cx(width - 120)}
+        chartHeight={screenHeight - cx(110)}
       />
     </View>
   </View>

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

@@ -8,6 +8,7 @@ import { PortraitView } from './PortraitView'
 import { getStyles } from './styles'
 
 import { useEnergyData } from './useEnergyData'
+import { useScreenDimensions } from './useScreenDimensions'
 
 const { withTheme } = Utils.ThemeUtils;
 
@@ -16,9 +17,17 @@ const EnergyConsumptionGroupChartComponent = (props: { theme?: ThemeType }) => {
 
   const { state, actions } = useEnergyData(params);
   const styles = useMemo(() => getStyles(props.theme), [props.theme]);
-
+  const { width: screenWidth, height: screenHeight } = useScreenDimensions()
   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/modules/energyConsumption/EnergyConsumptionChart/styles.ts

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

package/src/modules/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,
+  }
+}