@ledvance/base 1.3.109 → 1.3.110

package/package.json

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

package/src/components/ColorAdjustView.tsx

@@ -1,44 +1,43 @@
-import {View} from 'react-native'
-import React, {useCallback} from 'react'
+import { hex2Hsv, hsv2Hex } from '@utils'
+import { useReactive, useUpdateEffect } from 'ahooks'
+import React, { useCallback } from 'react'
+import { StyleSheet, View } from 'react-native'
+import { Utils } from 'tuya-panel-kit'
+import I18n from '../i18n/index'
+import { useNewPalette } from '../models/modules/NativePropsSlice'
+import LdvColorBrightness from './ldvColorBrightness'
 import LdvColorSlider from './ldvColorSlider'
-import {hex2Hsv, hsv2Hex} from '@utils'
 import LdvPresetView from './ldvPresetView'
 import LdvSaturation from './ldvSaturation'
-import LdvColorBrightness from './ldvColorBrightness'
-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, useIsPad} from "../models/modules/NativePropsSlice";
 import Spacer from './Spacer'
 
-const {convertX: cx, width: screenWidth} = Utils.RatioUtils
+// 只引入 cx 用于尺寸转换
+const { convertX: cx } = Utils.RatioUtils
 const scaleUp = (value) => value * 10
 const scaleDown = (value) => Math.round(value / 10)
 
 export interface ColorAdjustViewProps {
-  h: number
-  s: number
-  v: number
-  minBrightness?: number // 最小亮度
-  minSaturation?: number // 最小Saturation
-  reserveSV?: boolean // 保留 s v
-  hideSat?: boolean // 隐藏saturation
-  onHSVChange?: (h: number, s: number, v: number) => void
-  onHSVChangeComplete: (h: number, s: number, v: number) => void
+  h: number;
+  s: number;
+  v: number;
+  minBrightness?: number;
+  minSaturation?: number;
+  reserveSV?: boolean;
+  hideSat?: boolean;
+  onHSVChange?: (h: number, s: number, v: number) => void;
+  onHSVChangeComplete: (h: number, s: number, v: number) => void;
 }
 
 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),
     value: scaleUp(v),
     moving: false
   })
-
   useUpdateEffect(() => {
     if (!state.moving) {
       state.hue = h
@@ -46,33 +45,22 @@ const NewColorPicker = React.memo((props: ColorAdjustViewProps) => {
       state.value = scaleUp(v)
     }
   }, [h, s, v])
-
   const handleMove = useCallback((v) => {
     onHSVChange?.(v.hue, scaleDown(v.saturation), scaleDown(v.value))
   }, [onHSVChange])
-
   const handleComplete = useCallback((v) => {
     onHSVChangeComplete?.(v.hue, scaleDown(v.saturation), scaleDown(v.value))
     state.moving = false
   }, [onHSVChangeComplete])
-
-  const { hue, saturation, value } = state;
-  const hsv = { hue, saturation, value };
+  const { hue, saturation, value } = state
+  const hsv = { hue, saturation, value }
   const minBrightnessValue = minBrightness ?? 1
-
   return (
-    <View style={{justifyContent: 'center', alignItems: 'center'}}>
-      <View style={{
-        width: width,
-        height: cx(200),
-        borderRadius: cx(10),
-        borderColor: '#eeeeef',
-        borderWidth: 1,
-        overflow: 'hidden'
-      }}>
+    <View style={styles.container}>
+      <View style={styles.pickerWrapper}>
         <RectColorAndBrightPicker.ColourPicker
           value={hsv}
-          brightOption={{min: scaleUp(minBrightnessValue), minPercent: minBrightnessValue ? minBrightnessValue : 0}}
+          brightOption={{ min: scaleUp(minBrightnessValue), minPercent: minBrightnessValue ? minBrightnessValue : 0 }}
           onGrant={() => state.moving = true}
           onMove={handleMove}
           onRelease={handleComplete}
@@ -83,6 +71,23 @@ const NewColorPicker = React.memo((props: ColorAdjustViewProps) => {
   )
 })
 
+const styles = StyleSheet.create({
+  container: {
+    // 为整个组件提供水平内边距，使其自适应
+    paddingHorizontal: cx(16),
+  },
+  pickerWrapper: {
+    // 高度保持不变
+    height: cx(200),
+    // 圆角、边框等样式保持不变
+    borderRadius: cx(10),
+    borderColor: '#eeeeef',
+    borderWidth: 1,
+    overflow: 'hidden',
+    // 这里不再需要 width 属性，它会自动填充父容器
+  },
+})
+
 const OldColorPicker = React.memo((props: ColorAdjustViewProps) => {
   return (
     <View>

package/src/components/ColorTempAdjustView.tsx

@@ -1,31 +1,30 @@
-import {View} from 'react-native'
-import React, {useCallback} from 'react'
+import { StyleSheet, View } from 'react-native'
+import React, { useCallback } from 'react'
 import LdvColorSlider from './ldvColorSlider'
 import Spacer from './Spacer'
 import LdvPresetView from './ldvPresetView'
 import LdvSlider from './ldvSlider'
-import {Utils} from 'tuya-panel-kit'
+import { Utils } from 'tuya-panel-kit'
 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, useIsPad } from 'models/modules/NativePropsSlice'
+import { cctToColor } from '../utils/cctUtils'
+import RectColorAndBrightPicker from './rect-color-and-bright-picker'
+import { useReactive, useUpdateEffect } from 'ahooks'
+import { useNewPalette } from 'models/modules/NativePropsSlice'
 
-const {convertX: cx, width: screenWidth} = Utils.RatioUtils
-
-const scaleUp = (value: number) => value * 10;
-const scaleDown = (value: number) => Math.round(value / 10);
+const { convertX: cx } = Utils.RatioUtils
+const scaleUp = (value: number) => value * 10
+const scaleDown = (value: number) => Math.round(value / 10)
 
 export interface ColorTempAdjustViewProps {
-  colorTemp: number
-  brightness: number
-  minBrightness?: number
-  isSupportTemperature: boolean
-  isSupportBrightness: boolean
-  onCCTChange?: (cct: number) => void
-  onCCTChangeComplete: (cct: number) => void
-  onBrightnessChange?: (brightness: number) => void
-  onBrightnessChangeComplete: (brightness: number) => void
+  colorTemp: number;
+  brightness: number;
+  minBrightness?: number;
+  isSupportTemperature: boolean;
+  isSupportBrightness: boolean;
+  onCCTChange?: (cct: number) => void;
+  onCCTChangeComplete: (cct: number) => void;
+  onBrightnessChange?: (brightness: number) => void;
+  onBrightnessChangeComplete: (brightness: number) => void;
 }
 
 const NewColorTempPicker = React.memo((props: ColorTempAdjustViewProps) => {
@@ -40,18 +39,14 @@ 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),
-    moving: false
+    moving: false,
   })
-
   useUpdateEffect(() => {
     if (!state.moving) {
-      // 外部props更新时同步内部状态
-
       state.temperature = scaleUp(colorTemp)
       state.brightness = scaleUp(brightness)
     }
@@ -86,27 +81,21 @@ 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 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: height,
-        borderRadius: cx(10),
-        borderColor: '#eeeeef',
-        borderWidth: borderWidth,
-        overflow: 'hidden'
-      }}>
+    <View style={styles.container}>
+      <View style={[styles.pickerWrapper, { height, borderWidth }]}>
         {
           isSupportTemperature ? <RectColorAndBrightPicker.WhitePicker
             value={white}
-            brightOption={{min: scaleUp(minBrightnessValue), minPercent: minBrightnessValue ? minBrightnessValue : 0}}
+            brightOption={{ min: scaleUp(minBrightnessValue), minPercent: minBrightnessValue ? minBrightnessValue : 0 }}
             onGrant={() => state.moving = true}
             onMove={handleMove}
             onRelease={handleComplete}
             onPress={handleComplete}
-          /> :  isSupportBrightness ? <RectColorAndBrightPicker.BrightnessSlider
+          /> : isSupportBrightness ? <RectColorAndBrightPicker.BrightnessSlider
             value={stateBrightness}
             min={scaleUp(minBrightnessValue)}
             minPercent={minBrightnessValue ? minBrightnessValue : 0}
@@ -115,14 +104,26 @@ const NewColorTempPicker = React.memo((props: ColorTempAdjustViewProps) => {
             onMove={handleBrightnessMove}
             onRelease={handleBrightnessComplete}
             onPress={handleBrightnessComplete}
-          /> : <></>
+          /> : null // 使用 null 代替 <></> 更为标准
         }
-
       </View>
     </View>
   )
 })
 
+const styles = StyleSheet.create({
+  container: {
+    // 定义水平内边距，让组件自适应
+    paddingHorizontal: cx(16),
+  },
+  pickerWrapper: {
+    // 定义基础样式，移除 width
+    borderRadius: cx(10),
+    borderColor: '#eeeeef',
+    overflow: 'hidden',
+  },
+})
+
 const OldColorTempPicker = React.memo((props: ColorTempAdjustViewProps) => {
   return (
     <View>
@@ -138,7 +139,7 @@ const OldColorTempPicker = React.memo((props: ColorTempAdjustViewProps) => {
               <Spacer height={cx(10)}/>
               <LdvPresetView
                   type={'temperature'}
-                  style={{height: cx(60)}}
+                  style={{ height: cx(60) }}
                   onPress={item => {
                     props.onCCTChangeComplete(item.value)
                   }}/>

package/src/components/MoodColorsLine.tsx

@@ -1,36 +1,46 @@
-import LinearGradientLine from './LinearGradientLine'
-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'
+// MoodColorsLine.tsx (接收显式 width 的版本)
 
-const { convertX: cx, width: screenWidth } = Utils.RatioUtils
+import LinearGradientLine from './LinearGradientLine';
+import React from 'react';
+import { Utils } from 'tuya-panel-kit';
+import { StyleProp, StyleSheet, ViewStyle } from 'react-native';
+import ColorsLine from './ColorsLine';
 
-export type MoodColorsLineType = 'gradient' | 'separate'
+const { convertX: cx } = Utils.RatioUtils;
+
+export type MoodColorsLineType = 'gradient' | 'separate';
 
 interface MoodColorsLineProps {
-  width?: number
-  height?: number
-  type: MoodColorsLineType
-  colors: string[]
-  nodeStyle?: StyleProp<ViewStyle>
+  width: number; // 【关键】: 明确要求一个数字类型的 width
+  height?: number;
+  type: MoodColorsLineType;
+  colors: string[];
+  nodeStyle?: StyleProp<ViewStyle>;
+  style?: StyleProp<ViewStyle>; // style prop 仍然保留，以备不时之需
 }
 
 export default function MoodColorsLine(props: MoodColorsLineProps) {
-  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}/>)
+  const { width, type, colors, nodeStyle, style } = props;
+  const height = props.height || cx(24);
+
+  // 子组件现在使用明确传入的数字 width
+  if (type === 'separate' || colors.length < 2) {
+    return (
+      <ColorsLine
+        colors={colors}
+        style={[{ width, height }, style]} // 将数字 width 和 height 应用到 style
+        nodeStyle={nodeStyle}
+      />
+    );
   } else {
     return (
       <LinearGradientLine
-        width={width}
+        width={width} // 将数字 width 作为 prop 传递
         height={height}
-        style={styles.gradient}
-        colors={props.colors}/>
-    )
+        style={[styles.gradient, style]}
+        colors={colors}
+      />
+    );
   }
 }
 
@@ -38,4 +48,4 @@ const styles = StyleSheet.create({
   gradient: {
     borderRadius: cx(8),
   },
-})
+});

package/src/components/ldvColorSlider.tsx

@@ -1,12 +1,11 @@
-import React, { useMemo } from 'react'
-import {StyleProp, StyleSheet, Text, View, ViewStyle} from 'react-native'
-import {LinearGradient, Slider, Utils} from 'tuya-panel-kit'
-import {Rect} from 'react-native-svg'
-import ThemeType from '../config/themeType'
-import { useIsPad } from '../models/modules/NativePropsSlice'
+import React, { useMemo, useState } from 'react';
+import { StyleProp, StyleSheet, Text, View, ViewStyle, LayoutChangeEvent } from 'react-native';
+import { LinearGradient, Slider, Utils } from 'tuya-panel-kit';
+import { Rect } from 'react-native-svg';
+import ThemeType from '../config/themeType';
 
-const { convertX: cx, width: screenWidth } = Utils.RatioUtils
-const { withTheme } = Utils.ThemeUtils
+const { convertX: cx } = Utils.RatioUtils;
+const { withTheme } = Utils.ThemeUtils;
 
 const temperatures = {
   '0%': 'rgb(254, 172, 90)',
@@ -15,7 +14,7 @@ const temperatures = {
   '60%': 'rgb(252, 250, 242)',
   '80%': 'rgb(226, 235, 248)',
   '100%': 'rgb(194, 217, 254)',
-}
+};
 
 const colors = {
   '0%': 'rgb(255, 0, 0)',
@@ -25,31 +24,38 @@ const colors = {
   '65%': 'rgb(43, 0, 255)',
   '80%': 'rgb(180, 0, 255)',
   '100%': 'rgb(255, 0, 0)',
-}
+};
 
-export const TEMP_KEY = 'temperature'
+export const TEMP_KEY = 'temperature';
 
 interface LdvColorSliderProps {
-  theme?: ThemeType
-  title: string,
-  type: string,
-  onValueChange?: (number) => void | undefined,
-  onSlidingComplete: (number) => void,
-  thumbColor: string,
-  value: number,
-  width?: number | undefined,
-  style?: StyleProp<ViewStyle> | undefined
+  theme?: ThemeType;
+  title: string;
+  type: string;
+  onValueChange?: (number) => void | undefined;
+  onSlidingComplete: (number) => void;
+  thumbColor: string;
+  value: number;
+  width?: number | undefined;
+  style?: StyleProp<ViewStyle> | undefined;
 }
 
 const LdvColorSlider = (props: LdvColorSliderProps) => {
-  const {title, type, onSlidingComplete, thumbColor, value} = props
-  const isPad = useIsPad()
-  let dataSource = type === TEMP_KEY ? temperatures : colors
-  let max = type === TEMP_KEY ? 100 : 359
-  let min = type === TEMP_KEY ? 0 : 0
-  const width = props.width || (isPad ? cx(screenWidth - 10) : (screenWidth - 80))
+  const { title, type, onSlidingComplete, thumbColor, value } = props;
+  const dataSource = type === TEMP_KEY ? temperatures : colors;
+  const max = type === TEMP_KEY ? 100 : 359;
+  const min = type === TEMP_KEY ? 0 : 0;
+
+  const [sliderWidth, setSliderWidth] = useState(0);
 
-  const styles = useMemo(() => getStyles(props.theme), [props.theme])
+  const styles = useMemo(() => getStyles(props.theme), [props.theme]);
+
+  const handleLayout = (event: LayoutChangeEvent) => {
+    const { width } = event.nativeEvent.layout;
+    if (width > 0 && width !== sliderWidth) {
+      setSliderWidth(width);
+    }
+  };
 
   return (
     <View style={[styles.container, props.style]}>
@@ -58,8 +64,8 @@ const LdvColorSlider = (props: LdvColorSliderProps) => {
       </Text>
       <Slider.Horizontal
         accessibilityLabel={"ColorSliderHorizontal"}
-        style={{...styles.shadeSlider, width}}
-        styles={{track: styles.sliderTrack, thumb: {...styles.shadeThumb, backgroundColor: thumbColor}}}
+        style={styles.shadeSlider}
+        styles={{ track: styles.sliderTrack, thumb: { ...styles.shadeThumb, backgroundColor: thumbColor } }}
         maximumValue={max}
         minimumValue={min}
         value={value}
@@ -71,32 +77,39 @@ const LdvColorSlider = (props: LdvColorSliderProps) => {
         onlyMaximumTrack={true}
         renderMaximumTrack={() => {
           return (
-            <View style={{flex: 1, borderRadius: cx(15)}}>
-              <LinearGradient
-                style={{...styles.sliderLinearGradient, width}}
-                x1="0%"
-                y1="0%"
-                x2="100%"
-                y2="0%"
-                stops={dataSource}>
-                <Rect {...styles.sliderLinearGradient} width={width}/>
-              </LinearGradient>
+            <View style={{ flex: 1, borderRadius: cx(15), overflow: 'hidden' }} onLayout={handleLayout}>
+              {sliderWidth > 0 && (
+                <LinearGradient
+                  // 【关键改动 1】: 合并样式，使用样式表中的 height 和 state 中的 width
+                  style={[styles.sliderLinearGradient, { width: sliderWidth }]}
+                  x1="0%"
+                  y1="0%"
+                  x2="100%"
+                  y2="0%"
+                  stops={dataSource}>
+                  {/* 【关键改动 2】: 为 Rect 提供明确的、数字类型的 height 和 width */}
+                  <Rect
+                    height={styles.sliderLinearGradient.height} // 使用样式表中的数字高度
+                    width={sliderWidth} // 使用 state 中的数字宽度
+                  />
+                </LinearGradient>
+              )}
             </View>
-          )
+          );
         }}
         onValueChange={props.onValueChange}
         onSlidingComplete={onSlidingComplete}
       />
     </View>
-  )
-}
+  );
+};
 
 const getStyles = (theme?: ThemeType) =>
   StyleSheet.create({
     container: {
       height: cx(57),
       flexDirection: 'column',
-      paddingStart: cx(16),
+      paddingHorizontal: cx(17),
     },
     title: {
       marginTop: cx(4),
@@ -130,12 +143,13 @@ const getStyles = (theme?: ThemeType) =>
         height: cx(4),
       },
     },
+    // 【关键】: 这个样式定义了渐变层的数字高度
     sliderLinearGradient: {
       height: cx(12),
     },
     presetView: {
       height: cx(60),
     },
-  })
+  });
 
-export default withTheme(LdvColorSlider)
+export default withTheme(LdvColorSlider);