@ledvance/base 1.3.108 → 1.3.110

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);