@ledvance/base 1.3.82 → 1.3.84

package/package.json

@@ -4,7 +4,7 @@
   "name": "@ledvance/base",
   "pid": [],
   "uiid": "",
-  "version": "1.3.82",
+  "version": "1.3.84",
   "scripts": {
     "prepublishOnly": "python update-localazy.py"
   },

package/src/components/Cell.tsx

@@ -1,17 +1,23 @@
-import {IconFont, Utils} from 'tuya-panel-kit'
-import {StyleProp, Text, TextStyle, TouchableOpacity, View, ViewStyle} from 'react-native'
+import { IconFont, Utils } from 'tuya-panel-kit'
+import { StyleProp, Text, TextStyle, TouchableOpacity, View, ViewStyle, Image, ImageSourcePropType, ImageStyle } from 'react-native'
 import React from 'react'
 import ThemeType from "../config/themeType";
 
 const cx = Utils.RatioUtils.convertX
-const {withTheme} = Utils.ThemeUtils
+const { withTheme } = Utils.ThemeUtils
 
 interface CellProps {
   theme?: ThemeType
+  icon?: ImageSourcePropType
+  iconStyle?: StyleProp<ImageStyle>
   title: string,
   value: string,
   onPress: () => void,
+  needArrow?: boolean
   style?: StyleProp<ViewStyle>
+  contentStyle?: StyleProp<ViewStyle>
+  titleStyle?: StyleProp<TextStyle>
+  valueStyle?: StyleProp<TextStyle>
 }
 
 export default withTheme(function Cell(props: CellProps) {
@@ -26,38 +32,53 @@ export default withTheme(function Cell(props: CellProps) {
         backgroundColor: props.theme?.card.background,
       }, props.style]}
       onPress={props.onPress}>
-      <CellContent title={props.title} value={props.value}/>
+      <CellContent
+        icon={props.icon}
+        iconStyle={props.iconStyle}
+        title={props.title}
+        titleStyle={props.titleStyle}
+        value={props.value}
+        valueStyle={props.valueStyle}
+        needArrow={props.needArrow ?? true}
+        style={props.contentStyle}
+      />
     </TouchableOpacity>
   )
 }) as React.ComponentType<CellProps>
 
 interface CellContentProps {
   theme?: ThemeType
+  icon?: ImageSourcePropType
+  iconStyle?: StyleProp<ImageStyle>
   title: string
   value: string
   style?: StyleProp<ViewStyle>
   titleStyle?: StyleProp<TextStyle>
   valueStyle?: StyleProp<TextStyle>
-  iconStyle?: { color?: any, size?: number }
+  needArrow: boolean
+  arrowStyle?: { color?: any, size?: number }
 }
 
 const CellContentBase = (props: CellContentProps) => {
   return (
     <View
       style={[
-        {flexDirection: 'row', justifyContent: 'space-between', alignItems: 'center'},
+        { flexDirection: 'row', justifyContent: 'space-between', alignItems: 'center' },
         props.style,
       ]}>
-      <Text
-        style={[
-          {
-            fontSize: cx(14),
-            color: props.theme?.global.secondFontColor,
-            fontFamily: 'helvetica_neue_lt_std_roman',
-          },
-          props.titleStyle,
-        ]}>{props.title}</Text>
-      <View style={{flexDirection: 'row', alignItems: 'center'}}>
+      <View style={{ flexDirection: 'row', alignItems: 'center' }}>
+        {props.icon && (<Image source={props.icon} style={[{ width: cx(24), height: cx(24), marginRight: cx(10) }, props.iconStyle]} />)}
+        <Text
+          style={[
+            {
+              fontSize: cx(14),
+              color: props.theme?.global.secondFontColor,
+              fontFamily: 'helvetica_neue_lt_std_roman',
+            },
+            props.titleStyle,
+          ]}>{props.title}</Text>
+      </View>
+      <View style={{ flexDirection: 'row', alignItems: 'center' }}>
         <Text style={[
           {
             fontSize: cx(14),
@@ -66,11 +87,15 @@ const CellContentBase = (props: CellContentProps) => {
           },
           props.valueStyle,
         ]}>{props.value}</Text>
-        <View style={{width: cx(4)}}/>
-        <IconFont
-          name="arrow"
-          color={props.iconStyle?.color || props.theme?.global.secondFontColor}
-          size={props.iconStyle?.size || cx(11)}/>
+        <View style={{ width: cx(4) }} />
+        {
+          props.needArrow && (
+            <IconFont
+              name="arrow"
+              color={props.arrowStyle?.color || props.theme?.global.secondFontColor}
+              size={props.arrowStyle?.size || cx(11)} />
+          )
+        }
       </View>
     </View>
   )

package/src/components/ColorTempAdjustView.tsx

@@ -35,6 +35,7 @@ const NewColorTempPicker = React.memo((props: ColorTempAdjustViewProps) => {
     brightness = 100,
     minBrightness,
     isSupportTemperature,
+    isSupportBrightness,
     onCCTChange,
     onCCTChangeComplete,
     onBrightnessChange,
@@ -78,15 +79,16 @@ const NewColorTempPicker = React.memo((props: ColorTempAdjustViewProps) => {
   const { temperature, brightness: stateBrightness } = state
   const white = { temperature, brightness: stateBrightness }
   const minBrightnessValue = minBrightness ?? 1
-
+  const height = cx(isSupportTemperature? 200 : (isSupportBrightness ? 45 : 0))
+  const borderWidth = (isSupportTemperature || isSupportBrightness) ? 1 : 0
   return (
     <View style={{justifyContent: 'center', alignItems: 'center'}}>
       <View style={{
         width: width,
-        height: cx(isSupportTemperature? 200 : 45),
+        height: height,
         borderRadius: cx(10),
         borderColor: '#eeeeef',
-        borderWidth: 1,
+        borderWidth: borderWidth,
         overflow: 'hidden'
       }}>
         {
@@ -97,7 +99,7 @@ const NewColorTempPicker = React.memo((props: ColorTempAdjustViewProps) => {
             onMove={handleMove}
             onRelease={handleComplete}
             onPress={handleComplete}
-          /> : <RectColorAndBrightPicker.BrightnessSlider
+          /> :  isSupportBrightness ? <RectColorAndBrightPicker.BrightnessSlider
             value={stateBrightness}
             min={scaleUp(minBrightnessValue)}
             minPercent={minBrightnessValue ? minBrightnessValue : 0}
@@ -106,7 +108,7 @@ const NewColorTempPicker = React.memo((props: ColorTempAdjustViewProps) => {
             onMove={handleBrightnessMove}
             onRelease={handleBrightnessComplete}
             onPress={handleBrightnessComplete}
-          />
+          /> : <></>
         }
 
       </View>

package/src/components/Segmented.tsx

@@ -1,5 +1,5 @@
 import React, {ReactNode} from 'react'
-import {StyleSheet, Text, TouchableOpacity, View, ViewStyle} from 'react-native'
+import {ScrollView, StyleSheet, Text, TouchableOpacity, View, ViewStyle} from 'react-native'
 import {Utils} from 'tuya-panel-kit'
 import ThemeType from '../config/themeType'
 
@@ -27,6 +27,7 @@ const Segmented = (props: SegmentedProps) => {
       backgroundColor: props.theme?.segment.background,
       padding: cx(2),
       borderRadius: cx(8),
+      flexGrow: 1,
     },
     segmented_item: {
       flex: 1,
@@ -45,6 +46,9 @@ const Segmented = (props: SegmentedProps) => {
     segmented_item_check: {
       backgroundColor: props.theme?.button.primary,
     },
+    segmented_item_min_width: {
+      minWidth: cx(120),
+    },
     segmented_text: {
       fontSize: cx(16),
       color: props.theme?.global.secondFontColor,
@@ -54,7 +58,11 @@ const Segmented = (props: SegmentedProps) => {
     },
   })
   return (
-    <View style={[styles.wrap_container, props.style]}>
+    <ScrollView
+      horizontal
+      showsHorizontalScrollIndicator={false}
+      contentContainerStyle={[styles.wrap_container]}
+      style={[props.style, {flex: 1 }]}>
       {props.options && props.options.map((item, idx) => (
         <TouchableOpacity
           accessibilityLabel={"Segmented"}
@@ -62,6 +70,7 @@ const Segmented = (props: SegmentedProps) => {
           accessibilityState={{checked: item.value === props.value}}
           style={[
             styles.segmented_item,
+            (props.options?.length || 0) > 2 ? styles.segmented_item_min_width : {},
             idx === 0 && styles.segmented_item_first,
             idx + 1 === props.options?.length && styles.segmented_item_last,
             item.value === props.value && styles.segmented_item_check,
@@ -75,7 +84,7 @@ const Segmented = (props: SegmentedProps) => {
           ]}>{item.label}</Text>
         </TouchableOpacity>
       ))}
-    </View>
+    </ScrollView>
   )
 }
 

package/src/config/dark-theme.ts

@@ -63,6 +63,12 @@ const darkTheme = {
     border: '#888888',
     fontColor: '#ffffff',
   },
+  tabBar: {
+    background: '#2a2a2a',
+    active: '#ffffff',
+    inactive: '#4a4a4a',
+    divider: '#e0e0e0',
+  },
   dialog: {
     width: cx(315), // 弹窗容器宽度
     bg: "#2a2a2a", // 弹窗背景色

package/src/config/light-theme.ts

@@ -63,6 +63,12 @@ const lightTheme = {
     border: '#666666',
     fontColor: '#000000',
   },
+  tabBar: {
+    background: '#ffffff',
+    active: '#ff6600',
+    inactive: '#666666',
+    divider: '#e0e0e0'
+  },
   dialog: {
     width: cx(315), // 弹窗容器宽度
     bg: "#ffffff", // 弹窗背景色

package/src/hooks/Hooks.ts

@@ -1,4 +1,5 @@
 import { useRoute, useNavigation } from '@react-navigation/core'
+import { Result } from 'models/modules/Result'
 import { useCallback, useEffect, useRef } from 'react'
 
 export function createParams<T>(params: T): T {
@@ -59,3 +60,54 @@ export function useDpResponseValidator(timeoutMs: number = 1000) {
     onDpResponse,
   };
 }
+
+interface IControlData {
+  colorMode: boolean
+  hue: number
+  saturation: number
+  value: number
+  brightness: number
+  temperature: number
+}
+
+interface IControlDataOptions {
+  mode?: 0 | 1 // 0: 跳变, 1: 渐变
+  saturationConvert?: (v: number) => number
+  valueConvert?: (v: number) => number
+  temperatureConvert?: (v: number) => number
+  brightnessConvert?: (v: number) => number
+}
+
+/**
+ * 通用控制支持device和group
+ * @param control Tuya Control Formatter
+ * @param sendValueFunc send tuya control function
+ * @returns 
+ */
+export function useControlData(control: any, sendValueFunc: (value: any) => Promise<Result<any>>): (
+  controlValue: IControlData,
+  options?: IControlDataOptions
+) => Promise<any> {
+  const setControlData = useCallback(
+    async (controlValue: IControlData, options: IControlDataOptions = {}) => {
+      const {
+        mode = 1,
+        saturationConvert = (v: number) => Math.round(v * 10),
+        valueConvert = (v: number) => Math.round(v * 10),
+        temperatureConvert = (v: number) => Math.round(v * 10),
+        brightnessConvert = (v: number) => Math.round(v * 10),
+      } = options
+      const value = control.format({
+        mode: mode,
+        hue: controlValue.colorMode ? controlValue.hue : 0,
+        saturation: controlValue.colorMode ? saturationConvert(controlValue.saturation) : 0,
+        value: controlValue.colorMode ? valueConvert(controlValue.value) : 0,
+        temperature: !controlValue.colorMode ? temperatureConvert(controlValue.temperature) : 0,
+        brightness: !controlValue.colorMode ? brightnessConvert(controlValue.brightness) : 0,
+      });
+      return await sendValueFunc(value)
+    },
+    []
+  );
+  return setControlData
+}

package/src/i18n/strings.ts

@@ -6093,7 +6093,7 @@ export default {
         "camera_settings_onvif_set_password_tips": "Das Gerätekennwort unterstützt 8-32 Zeichen und muss Groß- und Kleinbuchstaben sowie Ziffern enthalten.",
         "camera_settings_onvif_switch_topic": "Onvif-Schalter",
         "camera_settings_onvif_topic": "Onvif",
-        "camera_settings_power_management_settings_topic": "Energieverwaltungseinstellungen",
+        "camera_settings_power_management_settings_topic": "Energieverwaltung",
         "camera_settings_recording_mode_firstbox_topic1": "Bewegungsauslöser",
         "camera_settings_recording_mode_firstbox_topic1_description": "Nimmt nur auf, wenn eine Bewegung erkannt wird",
         "camera_settings_recording_mode_firstbox_topic2": "Fortlaufend",
@@ -6116,7 +6116,7 @@ export default {
         "camera_site_overview_empty_button_add_text": "Standort hinzufügen",
         "camera_site_overview_empty_information_text": "Du hast noch keinen Ort hinzugefügt",
         "camera_site_overview_warning_max_number_text": "Die maximale Anzahl an Orte wurde erreicht.",
-        "camera_status_indicator": "LED-Anzeige",
+        "camera_status_indicator": "LED-Indikator",
         "camera_tile_camera_button_label_photo": "Foto aufnehmen",
         "camera_tile_camera_button_label_video": "Video aufzeichnen",
         "camera_tile_camera_headline": "Kamera",
@@ -6604,7 +6604,7 @@ export default {
         "matter_gradient_light_on_description_text": "Stelle eine Zeit im Bereich von 0 bis 60 Sekunden ein, um die Helligkeit beim Einschalten der Lampe schrittweise zu erhöhen",
         "matter_gradient_light_on_title": "Einblenden (s)",
         "matter_gradient_overview_headline_text": "Ein-/Ausblenden",
-        "matterplug_LED": "LED-Anzeige",
+        "matterplug_LED": "LED-Indikator",
         "matterplug_description": "Konfiguration der Status-LED nach dem Ein-/Ausschalten",
         "matterplug_heading": "Status-LED",
         "matterplug_option1description": "Der Status des Schalters entspricht der Status-LED: Die Steckdose ist eingeschaltet, wenn die LED an ist, und ausgeschaltet, wenn die LED aus ist.",