@ledvance/base 1.3.71 → 1.3.72

package/src/components/rect-color-and-bright-picker/Slider.tsx

@@ -0,0 +1,589 @@
+import React from 'react';
+import {
+  View,
+  StyleSheet,
+  PanResponder,
+  PanResponderInstance,
+  LayoutChangeEvent,
+  Animated,
+  GestureResponderEvent,
+  PanResponderGestureState,
+  ViewStyle,
+  Easing,
+  StyleProp,
+  TextStyle,
+} from 'react-native';
+import { IconFont, TYText } from 'tuya-panel-kit';
+import icons from './brightness-icons';
+
+interface IPercentProps {
+  percent: number;
+  colorOver?: string;
+  colorInner?: string;
+  width?: number | string;
+  height?: number | string;
+  brightWidth: number;
+  /**
+   * 图标尺寸
+   */
+  iconSize?: number;
+  /**
+   * 百分比文字样式
+   */
+  percentStyle?: StyleProp<TextStyle>;
+}
+
+export class Percent extends React.Component<IPercentProps, IPercentProps> {
+  constructor(props: IPercentProps) {
+    super(props);
+    this.state = { ...this.props };
+  }
+
+  componentDidUpdate(prevProps: IPercentProps) {
+    if (prevProps.percent !== this.props.percent ||
+        prevProps.brightWidth !== this.props.brightWidth ||
+        prevProps.colorOver !== this.props.colorOver ||
+        prevProps.colorInner !== this.props.colorInner) {
+      this.setState({ ...this.props });
+    }
+  }
+
+  shouldComponentUpdate(nextProps: IPercentProps, nextState: IPercentProps) {
+    // 优化渲染性能，只在关键属性变化时重渲染
+    return (
+      nextState.percent !== this.state.percent ||
+      nextState.brightWidth !== this.state.brightWidth ||
+      nextState.colorOver !== this.state.colorOver ||
+      nextState.colorInner !== this.state.colorInner ||
+      nextProps.iconSize !== this.props.iconSize
+    );
+  }
+
+  setNativeProps(nextProps: IPercentProps) {
+    // 对于React Native 0.59.10，直接更新state是最可靠的方式
+    // 因为TYText组件可能不支持直接的原生属性更新
+    const { percent, brightWidth } = nextProps;
+
+    if (percent !== undefined || brightWidth !== undefined) {
+      // 直接更新state，但使用批量更新避免多次渲染
+      this.setState(prevState => ({
+        ...prevState,
+        ...(percent !== undefined && { percent }),
+        ...(brightWidth !== undefined && { brightWidth })
+      }));
+    }
+  }
+
+  render() {
+    const {
+      percent,
+      height,
+      width,
+      brightWidth,
+      colorOver,
+      colorInner,
+      iconSize,
+      percentStyle,
+    } = this.state;
+    let icon = icons.brightLevel1;
+    if (percent > 20 && percent <= 60) {
+      icon = icons.brightLevel2;
+    } else if (percent > 60) {
+      icon = icons.brightLevel3;
+    }
+    const percentText = `${percent}%`;
+    return (
+      <View style={[styles.percent, { height, width }]}>
+        <View style={{ flex: 1, alignItems: 'center', flexDirection: 'row' }}>
+          <IconFont d={icon} size={iconSize || 32} color={colorOver} style={styles.percentIcon} />
+          <TYText style={[styles.percentText, percentStyle, { color: colorOver }]}>
+            {percentText}
+          </TYText>
+        </View>
+        <View
+          style={{
+            position: 'absolute',
+            overflow: 'hidden',
+            opacity: 1,
+            height: '100%',
+            width: brightWidth,
+            alignItems: 'center',
+            flexDirection: 'row',
+            backgroundColor: colorOver,
+          }}
+        >
+          <IconFont style={styles.percentIcon} d={icon} size={iconSize || 32} color={colorInner} />
+          <TYText style={[styles.percentText, percentStyle, { color: colorInner }]}>
+            {percentText}
+          </TYText>
+        </View>
+      </View>
+    );
+  }
+}
+const defaultProps = {
+  value: 0,
+  min: 10,
+  max: 1000,
+  minPercent: 1,
+  disabled: false,
+  fontColor: '#000',
+  trackColor: '#666666',
+  activeColor: '#fff',
+  // formatPercent: null,
+  invalidSwipeDistance: 7,
+  clickEnabled: false, // 是否可以点击选择
+  onGrant(_v: number) {},
+  onMove(_v: number) {},
+  onRelease(_v: number) {},
+  onPress(_v: number) {},
+  showAnimation: true, // 使用动画显示
+  /**
+   * 背景透明度动画值
+   */
+  opacityAnimationValue: 1,
+  /**
+   * 背景透明度动画时间
+   */
+  opacityAnimationDuration: 150,
+};
+
+export interface IBrightOption {
+  /**
+   * 最小值
+   */
+  min?: number;
+  /**
+   * 最大值
+   */
+  max?: number;
+  /**
+   * 最小百分比
+   */
+  minPercent?: number;
+  /**
+   * 字体颜色
+   */
+  fontColor?: string;
+  /**
+   * 轨道背景色
+   */
+  trackColor?: string;
+  /**
+   * 激活区颜色
+   */
+  activeColor?: string;
+  /**
+   * 滑动生效的开始距离
+   * 默认为 7 个像素距离
+   */
+  invalidSwipeDistance?: number;
+  formatPercent?: (value: number) => number;
+  style?: StyleProp<ViewStyle>;
+  /**
+   * 图标大小
+   */
+  iconSize?: number;
+  /**
+   * 百分比样式
+   */
+  percentStyle?: StyleProp<TextStyle>;
+}
+
+type DefaultProps = Readonly<typeof defaultProps>;
+
+type IProps = {
+  style?: ViewStyle | ViewStyle[];
+  formatPercent?: (value: number) => number;
+  iconSize?: number;
+  percentStyle?: StyleProp<TextStyle>;
+} & DefaultProps;
+
+interface IState {
+  value: number;
+}
+
+export default class Slider extends React.Component<IProps, IState> {
+  static defaultProps: DefaultProps = defaultProps;
+
+  constructor(props: IProps) {
+    super(props);
+    this.bgOpacityAnim = new Animated.Value(this.props.opacityAnimationValue);
+    this._panResponder = PanResponder.create({
+      // 要求成为响应者：
+      onStartShouldSetPanResponder: this.handleStartPanResponder,
+      onMoveShouldSetPanResponder: this.handleSetPanResponder,
+      onPanResponderTerminationRequest: () => !this.moving,
+      onPanResponderMove: this.onMove,
+      onPanResponderRelease: this.onRelease,
+      // 当前有其他的东西成为响应器并且没有释放它。
+      onPanResponderReject: this.handleTerminate,
+      onPanResponderTerminate: this.handleTerminate,
+    });
+
+    this.state = { value: this.props.value };
+  }
+
+  componentDidUpdate(prevProps: IProps) {
+    if (!this.locked) {
+      if (prevProps.value !== this.props.value) {
+        const newBrightWidth = this.valueToWidth(this.props.value);
+        const newPercent = this.formatPercent(this.props.value);
+
+        // 外部更新值时的同步处理
+
+        this.brightWidth = newBrightWidth;
+
+        // 关键修复：同时更新动画值和实例变量
+        this.setAnimationValue(newBrightWidth, false); // 使用动画更新
+        this.setState({ value: this.props.value });
+
+        // 同步更新Percent组件的显示
+        if (this.percentRef) {
+          this.percentRef.setNativeProps({
+            percent: newPercent,
+            brightWidth: newBrightWidth
+          });
+        }
+      }
+    }
+    if (prevProps.opacityAnimationValue !== this.props.opacityAnimationValue) {
+      if (this.bgOpacityAnimationRef) {
+        this.bgOpacityAnimationRef.stop();
+      }
+      this.bgOpacityAnimationRef = Animated.timing(this.bgOpacityAnim, {
+        toValue: this.props.opacityAnimationValue,
+        duration: this.props.opacityAnimationDuration,
+        useNativeDriver: true,
+      });
+      this.bgOpacityAnimationRef.start();
+    }
+  }
+
+  componentWillUnmount() {
+    // 清理动画
+    if (this.brightAnimate) {
+      this.brightAnimate.removeAllListeners();
+      this.brightAnimate.stopAnimation();
+    }
+
+    if (this.bgOpacityAnim) {
+      this.bgOpacityAnim.removeAllListeners();
+      this.bgOpacityAnim.stopAnimation();
+    }
+
+    // 停止正在进行的动画
+    if (this.bgOpacityAnimationRef) {
+      this.bgOpacityAnimationRef.stop();
+      this.bgOpacityAnimationRef = null;
+    }
+
+    // 清理组件状态
+    this.locked = false;
+    this.moving = false;
+  }
+
+  shouldComponentUpdate(nextProps: IProps, nextState: IState) {
+    if (this.locked) return false;
+
+    // 优化性能：只比较关键属性
+    const propsChanged = (
+      nextProps.value !== this.props.value ||
+      nextProps.disabled !== this.props.disabled ||
+      nextProps.trackColor !== this.props.trackColor ||
+      nextProps.activeColor !== this.props.activeColor ||
+      nextProps.fontColor !== this.props.fontColor ||
+      nextProps.clickEnabled !== this.props.clickEnabled ||
+      nextProps.opacityAnimationValue !== this.props.opacityAnimationValue
+    );
+
+    const stateChanged = nextState.value !== this.state.value;
+
+    return propsChanged || stateChanged;
+  }
+
+  onMove = (_e: GestureResponderEvent, gesture: PanResponderGestureState) => {
+    if (!this.moving) {
+      // 滑动一定象素后，将不允许其他手势抢权
+      if (Math.abs(gesture.dx) < this.props.invalidSwipeDistance) {
+        // 小于一定象素不做滑动
+        return;
+      }
+      // 开始手势
+      this.props.onGrant(this.state.value);
+      this.moving = true;
+      this.locked = true;
+    }
+    this.handleMove(gesture, this.props.onMove, false);
+  };
+
+  onRelease = (e: GestureResponderEvent, gesture: PanResponderGestureState) => {
+    if (this.moving) {
+      this.moving = false;
+      this.locked = false;
+      this.handleMove(gesture, this.props.onRelease, true);
+    } else if (this.props.clickEnabled) {
+      const now = +new Date();
+      if (Math.abs(gesture.dx) < 4 && Math.abs(gesture.dy) < 4 && now - this.grantTime < 300) {
+        const { locationX } = e.nativeEvent;
+        this.handleMove(
+          { dx: locationX - this.brightWidth } as PanResponderGestureState,
+          this.props.onPress,
+          true
+        );
+      }
+    }
+  };
+
+  setAnimationValue(value: number, isSliding = false) {
+    if (!isSliding && this.props.showAnimation) {
+      // 获取当前动画值进行比较，而不是brightWidth
+      const currentAnimValue = (this.brightAnimate as any)._value;
+      if (Math.abs(value - currentAnimValue) > 0.1) { // 添加小的容差
+        this.brightAnimate.stopAnimation();
+        const duration = isSliding
+          ? 32
+          : Math.round((300 * Math.abs(value - currentAnimValue)) / this.sliderWidth);
+        Animated.timing(this.brightAnimate, {
+          toValue: value,
+          duration: Math.max(duration, 100), // 确保最小动画时间
+          easing: Easing.linear,
+          useNativeDriver: false
+        }).start();
+      }
+    } else {
+      this.brightAnimate.setValue(value);
+    }
+  }
+
+  private _panResponder: PanResponderInstance;
+  private percentRef: Percent;
+  private locked = false;
+  private sliderWidth = 0;
+  private brightWidth = 0;
+  private brightAnimate: Animated.Value = new Animated.Value(0);
+  private showPercent = false;
+  private moving = false;
+  private grantTime = 0;
+  private bgOpacityAnim: Animated.Value = new Animated.Value(1);
+  private bgOpacityAnimationRef: Animated.CompositeAnimation | null = null;
+
+  handleStartPanResponder = () => {
+    if (this.props.disabled) {
+      return false;
+    }
+    this.grantTime = +new Date();
+    return this.props.clickEnabled;
+  };
+
+  handleSetPanResponder = (_e: GestureResponderEvent, gesture: PanResponderGestureState) => {
+    if (this.props.disabled) {
+      return false;
+    }
+    // 滑动一定象素后，将不允许其他手势抢权
+    if (Math.abs(gesture.dx) >= this.props.invalidSwipeDistance) {
+      // 小于一定象素不做滑动
+      if (!this.moving) {
+        this.props.onGrant(this.state.value);
+        this.moving = true;
+        this.locked = true;
+      }
+      return true;
+    }
+    if (this.moving) {
+      return true;
+    }
+    return false;
+  };
+
+  handleMove(gesture: PanResponderGestureState, callback: (value: number) => void, isEnd = false) {
+    const { dx } = gesture;
+    let width: number = this.brightWidth + dx;
+    // 边界处理
+    if (width < 0) {
+      width = 0;
+    } else if (width > this.sliderWidth) {
+      width = this.sliderWidth;
+    }
+
+    const value = this.coorToValue(width);
+    width = this.valueToWidth(value);
+
+    // 统一更新动画和百分比显示，确保同步
+    this.setAnimationValue(width, !isEnd);
+
+    // 实时更新Percent组件，确保同步
+    if (this.percentRef) {
+      const newPercent = this.formatPercent(value);
+      // 移除节流限制，确保实时同步
+      this.percentRef.setNativeProps({ percent: newPercent, brightWidth: width });
+    }
+
+    if (isEnd) {
+      this.brightWidth = width;
+      this.setState({ value });
+    }
+    callback(value);
+  }
+
+  handleTerminate = () => {
+    // 响应器已经从该视图抽离
+    this.moving = false;
+    this.locked = false;
+  };
+
+  handleLayout = (e: LayoutChangeEvent) => {
+    const { width } = e.nativeEvent.layout;
+    this.sliderWidth = width;
+    this.brightWidth = this.valueToWidth(this.state.value);
+
+    // 确保动画值和实例变量同步
+    this.brightAnimate.setValue(this.brightWidth);
+    this.showPercent = true;
+
+    // 初始化时同步Percent组件
+    if (this.percentRef) {
+      const newPercent = this.formatPercent(this.state.value);
+      this.percentRef.setNativeProps({
+        percent: newPercent,
+        brightWidth: this.brightWidth
+      });
+    }
+
+    this.forceUpdate();
+  };
+
+  formatPercent(value: number) {
+    const { min, max, formatPercent, minPercent } = this.props;
+
+    // 添加输入验证
+    if (typeof value !== 'number' || isNaN(value)) {
+      console.warn('Slider: Invalid value provided to formatPercent');
+      return minPercent || 0;
+    }
+
+    if (formatPercent) {
+      return formatPercent(value);
+    }
+    return Math.round(((value - min) * (100 - minPercent)) / (max - min) + minPercent);
+  }
+
+  valueToWidth(value: number) {
+    const { min, max } = this.props;
+
+    // 添加输入验证和边界处理
+    if (typeof value !== 'number' || isNaN(value)) {
+      console.warn('Slider: Invalid value provided to valueToWidth');
+      return 0;
+    }
+
+    const clampedValue = Math.max(min, Math.min(max, value));
+    const percent = (clampedValue - min) / (max - min);
+    return percent * this.sliderWidth;
+  }
+
+  coorToValue(x: number) {
+    const { min, max } = this.props;
+
+    // 添加输入验证和边界处理
+    if (typeof x !== 'number' || isNaN(x) || this.sliderWidth === 0) {
+      console.warn('Slider: Invalid coordinate provided to coorToValue');
+      return min;
+    }
+
+    const clampedX = Math.max(0, Math.min(this.sliderWidth, x));
+    return Math.round((clampedX / this.sliderWidth) * (max - min) + min);
+  }
+
+  render() {
+    const { trackColor, activeColor, fontColor, style, iconSize, percentStyle } = this.props;
+    const containerStyle = [styles.container, style];
+    const { height = 45 } = StyleSheet.flatten(containerStyle);
+    return (
+      <View
+        style={containerStyle}
+        accessibilityLabel="ReactColorPicker_Slider"
+        onLayout={this.handleLayout}
+        pointerEvents="box-only"
+        {...this._panResponder.panHandlers}
+      >
+        <Animated.View
+          style={{
+            height: '100%',
+            width: '100%',
+            opacity: this.bgOpacityAnim,
+          }}
+        >
+          <View
+            style={[
+              styles.track,
+              {
+                backgroundColor: trackColor,
+              },
+            ]}
+          />
+          <Animated.View
+            style={[
+              styles.mark,
+              {
+                backgroundColor: activeColor,
+                width: this.brightAnimate,
+              },
+            ]}
+          />
+          {this.showPercent && (
+            <Percent
+              ref={(ref: Percent) => {
+                this.percentRef = ref;
+              }}
+              percent={this.formatPercent(this.state.value)}
+              colorOver={activeColor}
+              colorInner={fontColor}
+              width={this.sliderWidth}
+              height={height}
+              brightWidth={this.brightWidth}
+              iconSize={iconSize}
+              percentStyle={percentStyle}
+            />
+          )}
+        </Animated.View>
+      </View>
+    );
+  }
+}
+
+const styles = StyleSheet.create({
+  container: {
+    alignItems: 'center',
+    flexDirection: 'row',
+    height: 45,
+    justifyContent: 'center',
+    width: '100%',
+  },
+  mark: {
+    backgroundColor: '#fff',
+    height: '100%',
+    left: 0,
+    position: 'absolute',
+  },
+  percent: {
+    alignItems: 'center',
+    flexDirection: 'row',
+    height: '100%',
+    justifyContent: 'flex-start',
+    left: 0,
+    position: 'absolute',
+  },
+  percentIcon: {
+    marginLeft: 16,
+  },
+  percentText: {
+    marginLeft: 9,
+    width: 50,
+  },
+  track: {
+    backgroundColor: '#666666',
+    height: '100%',
+    width: '100%',
+  },
+});

package/src/components/rect-color-and-bright-picker/Thumb.tsx

@@ -0,0 +1,94 @@
+import React, { Component } from 'react';
+import { View, Image, StyleSheet, Animated, NativeComponent } from 'react-native';
+
+interface IProps {
+  img?: any;
+  color: string;
+  size?: number;
+  x: number;
+  y: number;
+  disabled?: boolean;
+}
+
+export default class Thumb extends Component<IProps> {
+  componentDidUpdate(prevProps: IProps) {
+    if (prevProps.x !== this.props.x) {
+      this.animateX.setValue(this.props.x);
+    }
+    if (prevProps.y !== this.props.y) {
+      this.animateY.setValue(this.props.y);
+    }
+  }
+
+  componentWillUnmount() {
+    // 清理动画
+    if (this.animateX) {
+      this.animateX.removeAllListeners();
+      this.animateX.stopAnimation();
+    }
+    if (this.animateY) {
+      this.animateY.removeAllListeners();
+      this.animateY.stopAnimation();
+    }
+  }
+
+  setNativeProps(props: IProps) {
+    const { x, y, color } = props;
+    if (typeof x === 'number') {
+      this.animateX.setValue(x);
+    }
+    if (typeof y === 'number') {
+      this.animateY.setValue(y);
+    }
+    if (typeof color === 'string') {
+      this.previewRef.setNativeProps({
+        style: {
+          backgroundColor: color,
+        },
+      });
+    }
+  }
+
+  private animateX = new Animated.Value(this.props.x);
+  private animateY = new Animated.Value(this.props.y);
+  private previewRef: NativeComponent;
+
+  render() {
+    const { color, size, img } = this.props;
+    const maskWidth = (size / 38) * 62;
+    const halfWidth = maskWidth / 2;
+    return (
+      <Animated.View
+        style={[
+          styles.thumb,
+          {
+            top: -halfWidth,
+            left: -halfWidth,
+            width: maskWidth,
+            height: maskWidth,
+            transform: [{ translateX: this.animateX }, { translateY: this.animateY }],
+          },
+        ]}
+      >
+        <View
+          ref={(ref: NativeComponent) => {
+            this.previewRef = ref;
+          }}
+          style={{ borderRadius: size / 2, width: size, height: size, backgroundColor: color }}
+        />
+        <Image
+          source={img}
+          style={[StyleSheet.absoluteFill, { width: maskWidth, height: maskWidth }]}
+        />
+      </Animated.View>
+    );
+  }
+}
+
+const styles = StyleSheet.create({
+  thumb: {
+    alignItems: 'center',
+    justifyContent: 'center',
+    position: 'absolute',
+  },
+});