@ledvance/base 1.3.103 → 1.3.105

package/localazy.json

@@ -1291,7 +1291,15 @@
                 "MATCH:infobutton_randomtimecycle",
                 "MATCH:infobutton_timer",
                 "MATCH:infobutton_poweronbehavior",
-                "MATCH:infobutton_history"
+                "MATCH:infobutton_history",
+                "MATCH:country_JO",
+                "MATCH:country_CV",
+                "MATCH:country_PA",
+                "MATCH:country_northern_ireland",
+                "MATCH:country_wales",
+                "MATCH:country_BA",
+                "MATCH:country_north_macedonia",
+                "MATCH:country_werder_bremen"
             ],
             "replacements": {
                 "REGEX:% %1\\$s.*?\\)%": "{0}",

package/package.json

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

package/src/components/AdvanceCard.tsx

@@ -4,6 +4,7 @@ import { Utils } from 'tuya-panel-kit'
 import Card from './Card'
 import Spacer from './Spacer'
 import ThemeType from '../config/themeType'
+import Marquee from './Marquee'
 
 const { convertX: cx } = Utils.RatioUtils
 const { withTheme } = Utils.ThemeUtils
@@ -47,6 +48,8 @@ export interface AdvanceCardProps extends PropsWithChildren<ViewProps> {
 
 const AdvanceCard = (props: AdvanceCardProps) => {
   const {statusColor} = props.data;
+  const subtitles = props.data.subtitles
+  const subtitleStyle = {...styles.subtitle, color: props.theme?.global.secondFontColor};
   return (
     <Card
       style={styles.itemContainer}
@@ -68,9 +71,15 @@ const AdvanceCard = (props: AdvanceCardProps) => {
             <Text style={{...styles.title, color: props.theme?.global.fontColor}}>{props.data.title}</Text>
             <Spacer height={cx(8)} />
             {
-              (!!props.data.subtitles) && props.data.subtitles.map((subtitle, index) => (
-                <Text style={{...styles.subtitle, color: props.theme?.global.secondFontColor}} key={`${subtitle}_${index}`}>{subtitle}</Text>
-              ))
+              (!!subtitles && subtitles.length > 0) && (
+                subtitles.length === 1 ? (
+                  // 如果只有一个subtitle，静态显示
+                  <Text style={subtitleStyle}>{subtitles[0]}</Text>
+                ) : (
+                  // 如果有多个subtitle，使用Marquee组件
+                  <Marquee subtitles={subtitles} textStyle={subtitleStyle} />
+                )
+              )
             }
           </View>
       }
@@ -85,7 +94,7 @@ const styles = StyleSheet.create({
   },
   itemContent: {},
   titleBg: {
-    height: cx(118),
+    height: cx(80),
     justifyContent: 'center',
     alignItems: 'center',
   },
@@ -98,7 +107,6 @@ const styles = StyleSheet.create({
   subtitle: {
     fontSize: cx(10),
     textAlign: 'center',
-    fontFamily: 'helvetica_neue_lt_std_roman',
   },
   dotBg: {
     position: 'absolute',

package/src/components/AdvanceList.tsx

@@ -1,5 +1,6 @@
+import { useIsPad } from '../models/modules/NativePropsSlice'
 import { useNavigation } from '@react-navigation/core'
-import React, { useCallback } from 'react'
+import React, { useCallback, useState } from 'react'
 import { FlatList, Image, StyleSheet, View } from 'react-native'
 import { Utils } from 'tuya-panel-kit'
 import { getMicrophoneAccess } from '../api/native'
@@ -16,6 +17,8 @@ export interface AdvanceListProps {
 
 function AdvanceList(props: AdvanceListProps) {
   const navigation = useNavigation()
+  const isPad = useIsPad()
+  const [columns, setColumns] = useState(isPad ? 3 : 2)
 
   const { advanceData = [] } = props
 
@@ -72,27 +75,32 @@ function AdvanceList(props: AdvanceListProps) {
     container: {
       marginHorizontal: cx(14),
     },
+    columnContainer: {
+      justifyContent: 'space-between'
+    },
     item: {
-      flex: 0.5,
-      justifyContent: 'center',
-      alignItems: 'center',
+      flex: 0,
+      marginHorizontal: cx(10),
+      alignItems: 'flex-start',
     },
     iconContainer: {
-      height: cx(118),
+      height: cx(80),
       justifyContent: 'center' as const,
       alignItems: 'center' as const,
     },
     iconImage: {
-      width: cx(80),
-      height: cx(80),
+      width: cx(50),
+      height: cx(50),
     }
   })
 
   return (
     <FlatList
+      key={`flatlist-columns-${columns}`}
       scrollEnabled={false}
-      numColumns={2}
+      numColumns={columns}
       style={styles.container}
+      columnWrapperStyle={styles.columnContainer}
       data={advanceData}
       renderItem={renderItem}
       keyExtractor={keyExtractor}

package/src/components/Battery.tsx

@@ -0,0 +1,88 @@
+import React, { useMemo } from 'react';
+import { View, ColorPropType, ViewStyle, StyleProp } from 'react-native';
+import Svg, { Path, Polygon } from 'react-native-svg';
+import { Utils } from 'tuya-panel-kit';
+
+const { convertX: cx } = Utils.RatioUtils;
+
+// 电池外壳SVG路径 (常量)
+const WRAP_BATTERY_D =
+  'M6.5,0 C6.77614237,-5.07265313e-17 7,0.223857625 7,0.5 L7,1 L9.5,1 C10.3284271,1 11,1.67157288 11,2.5 L11,17.5 C11,18.3284271 10.3284271,19 9.5,19 L1.5,19 C0.671572875,19 0,18.3284271 0,17.5 L0,2.5 C0,1.67157288 0.671572875,1 1.5,1 L4,1 L4,0.5 C4,0.223857625 4.22385763,5.07265313e-17 4.5,0 L6.5,0 Z M9.5,2 L1.5,2 C1.22385763,2 1,2.22385763 1,2.5 L1,17.5 C1,17.7761424 1.22385763,18 1.5,18 L9.5,18 C9.77614237,18 10,17.7761424 10,17.5 L10,2.5 C10,2.2385763 9.77614237,2 9.5,2 Z';
+
+// "粗壮"闪电图标
+const LIGHTNING_D = 'M6,5 L3.5,10 L5,10 L5,14 L7.5,9 L6,9 L6,5 Z';
+
+// 定义组件的Props类型
+interface BatteryProps {
+  size?: number;
+  batteryColor?: ColorPropType;
+  value?: number;
+  highColor?: ColorPropType;
+  middleColor?: ColorPropType;
+  lowColor?: ColorPropType;
+  onCalcColor?: (top: number, high: string, middle: string, low: string) => string;
+  charging?: boolean;
+  chargingColor?: ColorPropType;
+  style?: StyleProp<ViewStyle>;
+  batteryRotation?: number; // *** 新增 prop，用于控制电池旋转角度 ***
+}
+
+const Battery: React.FC<BatteryProps> = ({
+  size = cx(10),
+  batteryColor = 'rgba(0,0,0,.5)',
+  value = 80,
+  highColor = '#70CF98',
+  middleColor = '#F5A623',
+  lowColor = '#FF4444',
+  onCalcColor,
+  charging = false,
+  chargingColor = '#3AC400',
+  style,
+  batteryRotation = 0, // 默认为0，不旋转
+}) => {
+
+  const top = useMemo(() => {
+    const boundedValue = Math.max(0, Math.min(100, value));
+    return 17 - (14 * boundedValue) / 100;
+  }, [value]);
+
+  const insideColor = useMemo(() => {
+    if (typeof onCalcColor === 'function') {
+      const customColor = onCalcColor(top, highColor, middleColor, lowColor);
+      if (customColor) return customColor;
+    }
+    if (value >= 50) return highColor;
+    if (value >= 20) return middleColor;
+    return lowColor;
+  }, [value, top, highColor, middleColor, lowColor, onCalcColor]);
+
+  const batteryLevelPoints = `2 ${top} 9 ${top} 9 17 2 17`;
+
+  const svgWidth = 1.1 * size;
+  const svgHeight = 1.9 * size;
+
+  return (
+    // 1. 将旋转应用到根View上
+    <View style={[{ transform: [{ rotate: `${batteryRotation}deg` }] }, style]}>
+      <Svg width={svgWidth} height={svgHeight} viewBox="0 0 11 19">
+        <Path d={WRAP_BATTERY_D} fill={batteryColor} />
+        <Polygon points={batteryLevelPoints} fill={insideColor as string} />
+        {charging && (
+          <Path
+            d={LIGHTNING_D}
+            fill={chargingColor as string}
+            stroke="white"
+            strokeWidth={0.2}
+            strokeLinejoin="round"
+            // 2. 对闪电图标进行“反向旋转”
+            rotation={-batteryRotation}
+            // 3. 指定旋转中心为SVG画布的中心
+            origin="5.5, 9.5"
+          />
+        )}
+      </Svg>
+    </View>
+  );
+};
+
+export default Battery;

package/src/components/BatteryPercentageView.tsx

@@ -1,23 +1,25 @@
-import React from 'react'
-import Card from './Card'
-import {Battery, Utils} from 'tuya-panel-kit'
-import {StyleSheet, Text, View} from 'react-native'
+import React, { useCallback, useMemo } from 'react'
+import { StyleSheet, Text } from 'react-native'
+import { Utils } from 'tuya-panel-kit'
+import ThemeType from '../config/themeType'
 import I18n from '../i18n'
+import Battery from './Battery'
+import Card from './Card'
 import Spacer from './Spacer'
-import ThemeType from '../config/themeType'
 
 const cx = Utils.RatioUtils.convertX
-const {withTheme} = Utils.ThemeUtils
+const { withTheme } = Utils.ThemeUtils
 type BatteryProps = {
   value: number
   lowValue?: number
   middleValue?: number
   highValue?: number
+  charging?: boolean
   theme?: ThemeType
 }
 
 const BatteryPercentageView = (props: BatteryProps) => {
-  const {value, middleValue = 10, highValue = 90} = props
+  const { value, middleValue = 10, highValue = 90 } = props
   const calcColor = (_: any, normalColor: string, lowColor: string, emptyColor: string) => {
     if (value >= highValue) {
       return normalColor
@@ -28,50 +30,53 @@ const BatteryPercentageView = (props: BatteryProps) => {
     }
   }
 
-  const styles = StyleSheet.create({
-    title: {
-      marginStart: cx(16),
-      marginVertical: cx(18),
-      color: props.theme?.global.fontColor,
-      fontSize: cx(16),
-      fontWeight: 'bold',
-      fontFamily: 'helvetica_neue_lt_std_bd',
-    },
-    batteryRotate: {
-      transform: [{ rotate: '90deg' }],
-      position: 'relative',
-      right: cx(30)
-    },
-    content: {
-      marginEnd: cx(16),
-      color: props.theme?.global.fontColor,
-      fontSize: cx(14),
-      fontFamily: 'helvetica_neue_lt_std_roman',
-    },
-    low: {
-      color: props.theme?.global.error
-    }
-  })
+  const getStyles = useCallback(() => {
+    return StyleSheet.create({
+      container: {
+        flexDirection: 'row',
+        alignItems: 'center',
+      },
+      title: {
+        marginStart: cx(16),
+        marginVertical: cx(18),
+        color: props.theme?.global.fontColor,
+        fontSize: cx(16),
+        fontWeight: 'bold',
+      },
+      content: {
+        marginEnd: cx(16),
+        width: cx(60),
+        color: props.theme?.global.fontColor,
+        textAlign: 'right',
+        fontSize: cx(14),
+      },
+      low: {
+        color: props.theme?.global.error
+      }
+    })
+  }, [props.theme])
+
+  const styles = getStyles()
 
   return (
     <Card
       style={{ marginHorizontal: cx(24) }}
-      containerStyle={{ flexDirection: 'row', alignItems: 'center' }}
+      containerStyle={styles.container}
     >
       <Text
         style={styles.title}>
         {I18n.getLang('motion_detector_battery__state4')}
       </Text>
-      <Spacer height={0} style={{ flex: 1 }} />
-      <View style={styles.batteryRotate}>
-        <Battery
-          value={props.value}
-          onCalcColor={calcColor}
-          size={cx(30)}
-          theme={{ batteryColor: props.theme?.global.secondFontColor || '#000' }}
-          middleColor='#999999'
-        />
-      </View>
+      <Spacer height={0} style={{ flex: 1 }}/>
+      <Battery
+        value={props.value}
+        onCalcColor={calcColor}
+        charging={props.charging}
+        size={cx(30)}
+        batteryColor={props.theme?.global.secondFontColor}
+        middleColor="#999999"
+        batteryRotation={90}
+      />
       <Text style={[styles.content, value <= middleValue ? styles.low : null]}>{value}%</Text>
     </Card>
   )

package/src/components/ColorAdjustView.tsx

@@ -1,7 +1,7 @@
 import {View} from 'react-native'
 import React, {useCallback} from 'react'
 import LdvColorSlider from './ldvColorSlider'
-import {hex2Hsv, hsv2Hex} from '../utils'
+import {hex2Hsv, hsv2Hex} from '@utils'
 import LdvPresetView from './ldvPresetView'
 import LdvSaturation from './ldvSaturation'
 import LdvColorBrightness from './ldvColorBrightness'
@@ -9,12 +9,11 @@ import I18n from '../i18n/index'
 import RectColorAndBrightPicker from './rect-color-and-bright-picker'
 import {Utils} from "tuya-panel-kit";
 import {useReactive, useUpdateEffect} from "ahooks";
-import {useNewPalette} from "../models/modules/NativePropsSlice";
+import {useNewPalette, useIsPad} from "../models/modules/NativePropsSlice";
 
-const cx = Utils.RatioUtils.convertX
+const {convertX: cx, width: screenWidth} = Utils.RatioUtils
 const scaleUp = (value) => value * 10
 const scaleDown = (value) => Math.round(value / 10)
-const width = Utils.RatioUtils.width - cx(80)
 
 export interface ColorAdjustViewProps {
   h: number
@@ -30,6 +29,8 @@ export interface ColorAdjustViewProps {
 
 const NewColorPicker = React.memo((props: ColorAdjustViewProps) => {
   const { h = 0, s = 100, v = 100, minBrightness, onHSVChange, onHSVChangeComplete } = props
+  const isPad = useIsPad()
+  const width = isPad ? cx(screenWidth - 10) : (screenWidth - 80)
   const state = useReactive({
     hue: h,
     saturation: scaleUp(s),

package/src/components/ColorTempAdjustView.tsx

@@ -9,13 +9,12 @@ import I18n from '../i18n/index'
 import {cctToColor} from '../utils/cctUtils'
 import RectColorAndBrightPicker from "./rect-color-and-bright-picker";
 import {useReactive, useUpdateEffect} from 'ahooks'
-import { useNewPalette } from 'models/modules/NativePropsSlice'
+import { useNewPalette, useIsPad } from 'models/modules/NativePropsSlice'
 
-const {convertX: cx} = Utils.RatioUtils
+const {convertX: cx, width: screenWidth} = Utils.RatioUtils
 
 const scaleUp = (value: number) => value * 10;
 const scaleDown = (value: number) => Math.round(value / 10);
-const width = Utils.RatioUtils.width - cx(80);
 
 export interface ColorTempAdjustViewProps {
   colorTemp: number
@@ -41,6 +40,8 @@ const NewColorTempPicker = React.memo((props: ColorTempAdjustViewProps) => {
     onBrightnessChange,
     onBrightnessChangeComplete,
   } = props
+  const isPad = useIsPad()
+  const width = isPad ? cx(screenWidth - 10) : (screenWidth - 80)
   const state = useReactive({
     temperature: scaleUp(colorTemp),
     brightness: scaleUp(brightness),

package/src/components/ColorsLine.tsx

@@ -16,6 +16,8 @@ const ColorsLine = (props: ColorsLineProps) => {
         props.colors.map((color, index) => {
           return (
             <View
+              accessibilityLabel={'ColorNode'}
+              accessibilityHint={`${color}`}
               key={`${index}`}
               style={[
                 styles.colorNode,

package/src/components/DiySceneItem.tsx

@@ -52,7 +52,6 @@ const DiySceneItem = (props: DiySceneItemProps) => {
       height: cx(45),
       marginTop: cx(-5),
       marginBottom: cx(-10),
-      fontWeight: 'bold',
     },
     moodTypeItem: {
       flexDirection: 'row',

package/src/components/DrawToolView.tsx

@@ -14,6 +14,7 @@ import Stepper from './Stepper'
 import StripLightView from './StripLightView'
 import { nativeEventEmitter } from '../api/nativeEventEmitter'
 import ThemeType from '../config/themeType'
+import { useIsPad } from '../models/modules/NativePropsSlice'
 
 const { convertX: cx } = Utils.RatioUtils
 const { withTheme } = Utils.ThemeUtils
@@ -66,6 +67,7 @@ interface DrawToolViewProps extends PropsWithChildren<ViewProps> {
 }
 
 const DrawToolView = (props: DrawToolViewProps) => {
+  const isPad = useIsPad()
   const state = useReactive({
     visible: props.ledNumModalVisible || false,
     ledNum: props.ledNum || 5,
@@ -98,8 +100,9 @@ const DrawToolView = (props: DrawToolViewProps) => {
   }
 
   const height = useMemo(() => {
-    return cx(52 * Math.ceil((props.nodes.length / (props.fixCount || 5))))
-  }, [props.nodes])
+    const base = isPad ? 100 : 52
+    return cx(base * Math.ceil((props.nodes.length / (props.fixCount || 5))))
+  }, [props.nodes, isPad])
 
   const getBlockColor = useCallback(() => {
     if (props.isColorMode) {
@@ -161,8 +164,8 @@ const DrawToolView = (props: DrawToolViewProps) => {
                   </TouchableOpacity>
                 {!props.hideDisableLight && <TouchableOpacity
                     accessibilityLabel='AdjustButton'
-                      accessibilityHint='3'
-                      accessibilityState={{ checked: props.adjustType === 3 }}
+                    accessibilityHint='3'
+                    accessibilityState={{ checked: props.adjustType === 3 }}
                     onPress={() => {
                       props.setAdjustType(3)
                     }}>

package/src/components/Marquee.tsx

@@ -0,0 +1,99 @@
+import React, { useEffect, useRef } from 'react';
+import { View, Text, Animated, StyleSheet, StyleProp, TextStyle } from 'react-native';
+import { Utils } from 'tuya-panel-kit';
+
+const { convertX: cx } = Utils.RatioUtils;
+
+// 定义每个字幕项的固定高度
+const SUBTITLE_HEIGHT = cx(14);
+// 动画切换的持续时间
+const ANIMATION_DURATION = 500;
+// 每个字幕停留显示的时间
+const PAUSE_DURATION = 2000;
+
+interface MarqueeProps {
+  subtitles: string[];
+  textStyle: StyleProp<TextStyle>;
+}
+
+const Marquee: React.FC<MarqueeProps> = ({ subtitles, textStyle }) => {
+  const scrollY = useRef(new Animated.Value(0)).current;
+
+  // 复制第一个元素到末尾以实现无缝循环
+  const displaySubtitles = [...subtitles, subtitles[0]];
+
+  useEffect(() => {
+    let animation: Animated.CompositeAnimation | null = null;
+
+    const animate = (index: number) => {
+      const nextIndex = index + 1;
+
+      animation = Animated.sequence([
+        Animated.delay(PAUSE_DURATION),
+        Animated.timing(scrollY, {
+          toValue: -nextIndex * SUBTITLE_HEIGHT,
+          duration: ANIMATION_DURATION,
+          useNativeDriver: true,
+        }),
+      ]);
+
+      animation.start(({ finished }) => {
+        if (finished) {
+          if (nextIndex >= subtitles.length) {
+            // 当滚动到复制的最后一项后，无动画地重置到起点
+            scrollY.setValue(0);
+            // 从头开始循环
+            animate(0);
+          } else {
+            // 继续下一次滚动
+            animate(nextIndex);
+          }
+        }
+      });
+    };
+
+    // 仅当有多个字幕时才启动动画
+    if (subtitles.length > 1) {
+      animate(0);
+    }
+
+    return () => {
+      if (animation) {
+        animation.stop();
+      }
+    };
+  }, [subtitles]);
+
+  return (
+    <View style={styles.marqueeContainer}>
+      <Animated.View
+        style={{
+          transform: [{ translateY: scrollY }],
+        }}
+      >
+        {displaySubtitles.map((subtitle, index) => (
+          <Text
+            key={`${subtitle}_${index}`}
+            style={[textStyle, styles.subtitleText]}
+            numberOfLines={1}
+          >
+            {subtitle}
+          </Text>
+        ))}
+      </Animated.View>
+    </View>
+  );
+};
+
+const styles = StyleSheet.create({
+  marqueeContainer: {
+    height: SUBTITLE_HEIGHT, // 容器高度被限制为只能显示一个字幕
+    overflow: 'hidden',     // 超出部分隐藏
+  },
+  subtitleText: {
+    height: SUBTITLE_HEIGHT,     // 确保每个Text元素有相同的高度
+    lineHeight: SUBTITLE_HEIGHT, // **【关键】** 让lineHeight等于height，实现文本在行内垂直居中
+  },
+});
+
+export default Marquee;

package/src/components/MoodColorsLine.tsx

@@ -3,8 +3,9 @@ import React from 'react'
 import {Utils} from 'tuya-panel-kit'
 import {StyleProp, StyleSheet, ViewStyle} from 'react-native'
 import ColorsLine from './ColorsLine'
+import {useIsPad} from '../models/modules/NativePropsSlice'
 
-const cx = Utils.RatioUtils.convertX
+const { convertX: cx, width: screenWidth } = Utils.RatioUtils
 
 export type MoodColorsLineType = 'gradient' | 'separate'
 
@@ -17,7 +18,8 @@ interface MoodColorsLineProps {
 }
 
 export default function MoodColorsLine(props: MoodColorsLineProps) {
-  const width = props.width || cx(295)
+  const isPad = useIsPad()
+  const width = props.width || (isPad ? cx(screenWidth - 10) : (screenWidth - 80))
   const height = props.height || cx(24)
   if (props.type === 'separate' || props.colors.length < 2) {
     return (<ColorsLine colors={props.colors} style={{width, height}} nodeStyle={props.nodeStyle}/>)