@ledvance/ui-biz-bundle 1.1.148 → 1.1.150

package/package.json

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

package/src/modules/history/HistoryPage.tsx

@@ -1,3 +1,4 @@
+import FeatureInfo from '@ledvance/base/src/components/FeatureInfo'
 import Page from '@ledvance/base/src/components/Page'
 import { useDeviceInfo } from '@ledvance/base/src/models/modules/NativePropsSlice'
 import React, { useCallback, useEffect } from 'react'
@@ -187,6 +188,7 @@ const SwitchHistoryPage = (props: { theme?: ThemeType }) => {
       headlineText={headlineText || I18n.getLang('history_socket_headline_text')}
       headlineIcon={res.download_icon}
       onHeadlineIconClick={downFile}
+      info={<FeatureInfo title={I18n.getLang('history_socket_headline_text')} content={I18n.getLang('infobutton_history')} />}
     >
       <View style={styles.content}>
         <Text style={styles.titleText}>{I18n.getLang('history_contact_sensor_description_text')}</Text>

package/src/modules/timer/TimerPage.tsx

@@ -1,3 +1,4 @@
+import FeatureInfo from '@ledvance/base/src/components/FeatureInfo'
 import React, { useCallback, useEffect } from "react";
 import { View, Text, ScrollView, TouchableOpacity, StyleSheet, Image } from "react-native"
 import { useNavigation } from '@react-navigation/native'
@@ -216,6 +217,7 @@ const TimerPage = (props: {theme?: ThemeType}) => {
       backText={devInfo.name}
       headlineText={I18n.getLang('timer_nightplug_headline_text')}
       onBackClick={navigation.goBack}
+      info={<FeatureInfo title={I18n.getLang('timer_nightplug_headline_text')} content={I18n.getLang('infobutton_timer')} />}
     >
       <ScrollView
         nestedScrollEnabled={true}

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

@@ -1,7 +1,7 @@
 import I18n from '@ledvance/base/src/i18n'
 import res from '@ledvance/base/src/res'
-import React from 'react'
-import { Image, Text, TouchableOpacity, View } from 'react-native'
+import React, { useEffect } from 'react'
+import { BackHandler, Image, Text, TouchableOpacity, View } from 'react-native'
 import { Utils } from 'tuya-panel-kit'
 import { ChartType } from '../co2Data'
 import { EnergyChartSection } from './EnergyChartSection'
@@ -9,38 +9,50 @@ import { PowerChartSection } from './PowerChartSection'
 
 const { convertX: cx, width } = Utils.RatioUtils
 
-export const LandscapeView = ({ state, actions, params, styles, theme }) => (
-  <View style={styles.landscapeContainer}>
-    <View style={styles.landscapeHeader}>
-      <Text style={styles.landscapeTitle}>
-        {I18n.getLang(state.chartType === ChartType.kWh ? 'chartdisplay_energy' : 'chartdisplay_power')}
-      </Text>
-      <TouchableOpacity onPress={actions.toggleLandscape}>
-        <Image source={{ uri: res.screen_normal }} style={styles.normalScreenIcon}/>
-      </TouchableOpacity>
-    </View>
+export const LandscapeView = ({ state, actions, params, styles, theme, screenWidth, screenHeight }) => {
+  useEffect(() => {
+    const onBack = () => {
+      actions.toggleLandscape()
+      return true
+    }
+    BackHandler.addEventListener('hardwareBackPress', onBack)
+    return () => {
+      BackHandler.removeEventListener('hardwareBackPress', onBack)
+    }
+  }, [])
+  return (
+    <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')}
+        </Text>
+        <TouchableOpacity onPress={actions.toggleLandscape}>
+          <Image source={{ uri: res.screen_normal }} style={styles.normalScreenIcon}/>
+        </TouchableOpacity>
+      </View>
 
-    <View style={styles.landscapeContent}>
-      {state.chartType === ChartType.kWh ? (
-        <EnergyChartSection
-          isLandscape={true}
-          state={state}
-          actions={actions}
-          params={params}
-          styles={styles}
-          theme={theme}
-          chartHeight={cx(width - 110)}
-        />
-      ) : (
-        <PowerChartSection
-          isLandscape={true}
-          state={state}
-          actions={actions}
-          styles={styles}
-          theme={theme}
-          chartHeight={cx(width - 110)}
-        />
-      )}
+      <View style={styles.landscapeContent}>
+        {state.chartType === ChartType.kWh ? (
+          <EnergyChartSection
+            isLandscape={true}
+            state={state}
+            actions={actions}
+            params={params}
+            styles={styles}
+            theme={theme}
+            chartHeight={screenHeight - cx(110)}
+          />
+        ) : (
+          <PowerChartSection
+            isLandscape={true}
+            state={state}
+            actions={actions}
+            styles={styles}
+            theme={theme}
+            chartHeight={screenHeight - cx(110)}
+          />
+        )}
+      </View>
     </View>
-  </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,10 +51,10 @@ 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),
+    paddingHorizontal: cx(50),
   },
   landscapeHeader: {
     flexDirection: 'row',

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

@@ -128,8 +128,10 @@ export const useEnergyData = (params: EnergyConsumptionChartProps, devId: string
       state.dateType = type
     }, []),
     setInterval: useCallback((newInterval: number) => {
-      state.interval = newInterval
-      state.powerData = []
+      if (newInterval !== state.interval) {
+        state.interval = newInterval
+        state.powerData = []
+      }
     }, []),
     toggleLandscape: useCallback(() => {
       if (!state.isSupportLandscape) return

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,
+  }
+}

package/src/newModules/fixedTime/FixedTimePage.tsx

@@ -1,3 +1,4 @@
+import FeatureInfo from '@ledvance/base/src/components/FeatureInfo'
 import React, { memo, useCallback, useMemo } from "react";
 import { FlatList, Image, ScrollView, StyleSheet, Text, View } from 'react-native'
 import Page from "@ledvance/base/src/components/Page";
@@ -210,6 +211,7 @@ const FixedTimePage = (props: { theme?: ThemeType }) => {
       onHeadlineIconClick={() => {
         navigateToEdit('add', newFixedTime(!!params.isPlug))
       }}
+      info={<FeatureInfo title={I18n.getLang('fixedTimeCycle_socket_headline')} content={I18n.getLang('infobutton_fixedtimecycle')} />}
     >
       <ScrollView nestedScrollEnabled={true}>
         <Text style={{

package/src/newModules/powerOnBehavior/LightBehaviorPage.tsx

@@ -1,3 +1,4 @@
+import FeatureInfo from '@ledvance/base/src/components/FeatureInfo'
 import React from 'react'
 import {ScrollView, StyleSheet, Text, View} from 'react-native'
 import {useReactive, useUpdateEffect} from 'ahooks'
@@ -67,6 +68,7 @@ const LightBehaviorPage = (props: { theme?: ThemeType }) => {
     <Page
       backText={deviceInfo.name}
       headlineText={I18n.getLang('light_sources_specific_settings_power_off')}
+      info={<FeatureInfo title={I18n.getLang('light_sources_specific_settings_power_off')} content={I18n.getLang('infobutton_poweronbehavior')} />}
       loading={state.loading}>
       <ScrollView style={styles.root} nestedScrollEnabled={true}>
         <View>

package/src/newModules/powerOnBehavior/PlugBehaviorPage.tsx

@@ -1,3 +1,4 @@
+import FeatureInfo from '@ledvance/base/src/components/FeatureInfo'
 import React from 'react'
 import {ScrollView, StyleSheet} from 'react-native'
 import Page from '@ledvance/base/src/components/Page'
@@ -44,6 +45,7 @@ const PlugBehaviorPage = () => {
     <Page
       backText={deviceInfo.name}
       headlineText={I18n.getLang('light_sources_specific_settings_power_off')}
+      info={<FeatureInfo title={I18n.getLang('light_sources_specific_settings_power_off')} content={I18n.getLang('infobutton_poweronbehavior')} />}
       loading={state.loading}>
       <ScrollView style={styles.root} nestedScrollEnabled={true}>
         {params.powerBehaviorKeys.length > 1 && <>

package/src/newModules/randomTime/RandomTimePage.tsx

@@ -1,3 +1,4 @@
+import FeatureInfo from '@ledvance/base/src/components/FeatureInfo'
 import React, { useCallback, useMemo } from 'react'
 import { FlatList, Image, ScrollView, StyleSheet, Text, View } from 'react-native'
 import Page from '@ledvance/base/src/components/Page'
@@ -213,6 +214,7 @@ const RandomTimePage = (props: { theme?: ThemeType }) => {
       onHeadlineIconClick={() => {
         navigateToEdit('add', newRandomTime(!!params.isPlug))
       }}
+      info={<FeatureInfo title={I18n.getLang('randomtimecycle_sockets_headline_text')} content={I18n.getLang('infobutton_randomtimecycle')} />}
     >
       <ScrollView nestedScrollEnabled={true}>
         <Text style={{

package/src/newModules/timeSchedule/TimeSchedulePage.tsx

@@ -24,6 +24,7 @@ import { cloneDeep } from 'lodash';
 import ThemeType from '@ledvance/base/src/config/themeType'
 import { showDialog } from '@ledvance/base/src/utils/common';
 import { ApplyForItem } from '@ledvance/base/src/utils/interface';
+import FeatureInfo from "@ledvance/base/src/components/FeatureInfo"
 
 const { convertX: cx } = Utils.RatioUtils;
 const { withTheme } = Utils.ThemeUtils
@@ -187,6 +188,7 @@ const TimeSchedulePage = (props: { theme?: ThemeType }) => {
       onHeadlineIconClick={() => {
         navigateToEdit('add');
       }}
+      info={<FeatureInfo title={I18n.getLang('timeschedule_overview_headline_text')} content={I18n.getLang('infobutton_timeschedule')} />}
       loading={state.loading}
     >
       <ScrollView nestedScrollEnabled={true}>