@ledvance/base 1.3.66 → 1.3.68

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

@@ -1,266 +0,0 @@
-import React, { Component } from 'react';
-import _ from 'lodash';
-import { View, ViewStyle, StyleProp } from 'react-native';
-import RectPicker, { ValidBound, Point, defaultProps as baseDefault } from './RectPicker';
-import Slider, { IBrightOption } from './Slider';
-import ColorUtils from './utils/color';
-
-
-export const rectGradientBg = [
-  {
-    colors: [
-      { offset: '0%', stopColor: '#FF0000', stopOpacity: 1 },
-      { offset: '8%', stopColor: '#FF7F00', stopOpacity: 1 },
-      { offset: '20%', stopColor: '#FFFF00', stopOpacity: 1 },
-      { offset: '25%', stopColor: '#7FFF00', stopOpacity: 1 },
-      { offset: '33%', stopColor: '#00FF00', stopOpacity: 1 },
-      { offset: '42%', stopColor: '#00FF7F', stopOpacity: 1 },
-      { offset: '50%', stopColor: '#00FFFF', stopOpacity: 1 },
-      { offset: '58%', stopColor: '#007FFF', stopOpacity: 1 },
-      { offset: '66%', stopColor: '#0000FF', stopOpacity: 1 },
-      { offset: '75%', stopColor: '#7F00FF', stopOpacity: 1 },
-      { offset: '83%', stopColor: '#FF00FF', stopOpacity: 1 },
-      { offset: '92%', stopColor: '#FF007F', stopOpacity: 1 },
-      { offset: '100%', stopColor: '#FF0000', stopOpacity: 1 },
-    ],
-  },
-  {
-    x2: '0%',
-    y2: '100%',
-    colors: [
-      { offset: '0%', stopColor: '#fff', stopOpacity: 1 },
-      { offset: '16%', stopColor: '#fff', stopOpacity: 0.9 },
-      { offset: '100%', stopColor: '#fff', stopOpacity: 0 },
-    ],
-  },
-];
-
-export interface IHsv {
-  hue: number;
-  saturation: number;
-  value: number;
-}
-
-const defaultProps = {
-  ...baseDefault,
-  /**
-   * 值
-   */
-  value: { hue: 0, saturation: 1000, value: 1000 } as IHsv,
-  /**
-   * 色度偏量
-   */
-  hueOffset: 1,
-  /**
-   * 亮度配置
-   */
-  brightOption: {} as IBrightOption,
-  /**
-   * 是否隐藏亮度调节
-   */
-  hideBright: false,
-  /**
-   * 失去焦点时的亮度滑动条颜色
-   */
-  lossSliderColor: 'rgba(255,255,255,0.4)',
-  /**
-   * 背景渐变配置
-   */
-  bgs: rectGradientBg,
-  /**
-   * 滑动开始事件
-   * @param _v
-   * @param _option
-   */
-  onGrant(_v: any, _option?: { isChangeBright: boolean }) {},
-  /**
-   * 滑动过程事件
-   * @param _v
-   * @param _option
-   */
-  onMove(_v: any, _option?: { isChangeBright: boolean }) {},
-  /**
-   * 滑动结束事件
-   * @param _v
-   * @param _option
-   */
-  onRelease(_v: any, _option?: { isChangeBright: boolean }) {},
-  /**
-   * 点击事件
-   * @param _v
-   * @param _option
-   * @version ^0.3.0
-   */
-  onPress(_v: any, _option?: { isChangeBright: boolean }) {},
-};
-
-type DefaultProps = Readonly<typeof defaultProps>;
-
-type ColourProps = {
-  /**
-   * 组件的样式
-   */
-  style?: StyleProp<ViewStyle>;
-  /**
-   * 颜色选择区的样式
-   */
-  rectStyle?: StyleProp<ViewStyle>;
-} & DefaultProps;
-
-type IState = IHsv;
-
-export default class ColourPicker extends Component<ColourProps, IState> {
-  static defaultProps: DefaultProps = defaultProps;
-  constructor(props: ColourProps) {
-    super(props);
-    this.state = { ...this.props.value };
-  }
-
-  // eslint-disable-next-line react/no-deprecated
-  componentWillReceiveProps(nextProps: ColourProps) {
-    if (!_.isEqual(nextProps.value, this.props.value)) {
-      this.setState({ ...nextProps.value });
-    }
-  }
-
-  shouldComponentUpdate(nextProps: ColourProps, nextState: IState) {
-    return !_.isEqual(nextProps, this.props) || !_.isEqual(nextState, this.state);
-  }
-
-  onBrightGrant = () => {
-    const { hue, saturation, value } = this.state;
-    this.firPropsEvent(this.props.onGrant, { hue, saturation, value }, { isChangeBright: true });
-  };
-
-  onBrightMove = (value: number) => {
-    const { hue, saturation } = this.state;
-    this.firPropsEvent(this.props.onMove, { hue, saturation, value }, { isChangeBright: true });
-  };
-
-  onBrightRelease = (value: number) => {
-    const { hue, saturation } = this.state;
-    this.setState({ value });
-    this.firPropsEvent(this.props.onRelease, { hue, saturation, value }, { isChangeBright: true });
-  };
-
-  onBrightPress = (value: number) => {
-    const { hue, saturation } = this.state;
-    this.setState({ value });
-    this.firPropsEvent(this.props.onPress, { hue, saturation, value }, { isChangeBright: true });
-  };
-
-  coorToValue = ({ x, y }: Point, validBound: ValidBound) => {
-    const { hueOffset } = this.props;
-    const { width, height, x: validStartX, y: validStartY } = validBound;
-    const { value } = this.state;
-    let hue = Math.round(((x - validStartX) / width) * 360 + hueOffset) % 360;
-    const saturation = Math.round(((y - validStartY) / height) * 1000);
-
-    // hueOffset 不等于0时，最左边与最右边的值一样，为确保不会滑到最左边时跳到最右边
-    // 滑到最左边时，hue + 1;
-    if (hueOffset !== 0) {
-      if (Math.abs(x - validStartX) < 1) {
-        hue += 1;
-      }
-    }
-
-    return { hue, saturation, value };
-  };
-
-  valueToCoor = (hsv: IHsv, _origin: Point, validBound: ValidBound): Point => {
-    const { hueOffset } = this.props;
-    const { width, height, x: validStartX, y: validStartY } = validBound;
-    const { hue, saturation } = hsv;
-    let x = ((hue - hueOffset) / 360) * width;
-    if (x <= 0) {
-      x = width + x;
-    }
-    const y = (saturation / 1000) * height;
-
-    return { x: x + validStartX, y: y + validStartY };
-  };
-
-  valueToColor = (hsv: IHsv): string => {
-    const { hue, saturation, value } = hsv;
-    return ColorUtils.hsv2rgba(hue!, saturation, value) || 'transparent';
-  };
-
-  firPropsEvent(cb: (params?: any) => void, ...args: any[]) {
-    typeof cb === 'function' && cb(...args);
-  }
-
-  handlePickerGrant = () => {
-    const { hue, saturation, value } = this.state;
-    this.firPropsEvent(this.props.onGrant, { hue, saturation, value });
-  };
-
-  handlePickerMove = (hsv: IHsv) => {
-    this.firPropsEvent(this.props.onMove, hsv);
-  };
-
-  handlePickerRelease = (hsv: IHsv) => {
-    this.setState({ ...hsv });
-    this.firPropsEvent(this.props.onRelease, hsv);
-  };
-
-  handlePickerPress = (hsv: IHsv) => {
-    this.setState({ ...hsv });
-    this.firPropsEvent(this.props.onPress, hsv);
-  };
-
-  initData = async () => {};
-  render() {
-    const {
-      style,
-      rectStyle,
-      brightOption,
-      lossShow,
-      lossSliderColor,
-      clickEnabled,
-      hideBright,
-      opacityAnimationValue,
-      opacityAnimationDuration,
-      ...pickerProps
-    } = this.props;
-    const { hue, saturation, value: bright } = this.state;
-    const sliderProps: any = {};
-    if (lossShow) {
-      sliderProps.activeColor = lossSliderColor;
-    }
-    return (
-      <View style={[{ flex: 1 }, style]}>
-        <RectPicker
-          coorToValue={this.coorToValue}
-          valueToColor={this.valueToColor}
-          valueToCoor={this.valueToCoor}
-          value={{ hue, saturation, value: bright }}
-          lossShow={lossShow}
-          clickEnabled={clickEnabled}
-          opacityAnimationValue={opacityAnimationValue}
-          opacityAnimationDuration={opacityAnimationDuration}
-          {...pickerProps}
-          style={rectStyle}
-          onGrant={this.handlePickerGrant}
-          onMove={this.handlePickerMove}
-          onRelease={this.handlePickerRelease}
-          onPress={this.handlePickerPress}
-          initData={this.initData}
-        />
-        {!hideBright && (
-          <Slider
-            opacityAnimationValue={opacityAnimationValue}
-            opacityAnimationDuration={opacityAnimationDuration}
-            {...brightOption}
-            {...sliderProps}
-            value={bright}
-            clickEnabled={clickEnabled}
-            onGrant={this.onBrightGrant}
-            onMove={this.onBrightMove}
-            onRelease={this.onBrightRelease}
-            onPress={this.onBrightPress}
-          />
-        )}
-      </View>
-    );
-  }
-}

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

@@ -1,398 +0,0 @@
-/* eslint-disable @typescript-eslint/no-unused-vars */
-/* eslint-disable react/no-array-index-key */
-import React, { Component } from 'react';
-import {
-  View,
-  PanResponder,
-  GestureResponderEvent,
-  LayoutChangeEvent,
-  PanResponderGestureState,
-  PanResponderInstance,
-  Animated,
-  StyleProp,
-  ViewStyle,
-} from 'react-native';
-import _ from 'lodash';
-import { Svg, Rect, Defs, LinearGradient, Stop } from 'react-native-svg';
-import Thumb from './Thumb';
-import Res from './res';
-
-export interface Point {
-  x: number;
-  y: number;
-}
-
-/**
- * thumb 的有效区域
- */
-export interface ValidBound {
-  width: number;
-  height: number;
-  x: number;
-  y: number;
-}
-
-export interface ILinearColors {
-  offset: string;
-  stopColor: string;
-  stopOpacity: number;
-}
-
-export interface ILinear {
-  x1?: string | number;
-  x2?: string | number;
-  y1?: string | number;
-  y2?: string | number;
-  colors: ILinearColors[];
-}
-
-export const defaultProps = {
-  bgs: [] as ILinear[],
-  thumbComponent: Thumb,
-  disabled: false,
-  thumbSize: 38,
-  touchThumbSize: 60,
-  showThumbWhenDisabled: true,
-  clickEnabled: true, // 是否可以点击选择
-  lossShow: false, // 数据未在设备生效处理，若为true，则loassColor 启效，并thumb及亮度调节会变成指定颜色
-  lossColor: 'rgba(0,0,0,0.2)',
-  // eslint-disable-next-line import/no-unresolved
-  thumbImg: Res.thumbMask,
-  onGrant(_v: any) {},
-  onMove(_v: any) {},
-  onRelease(_v: any) {},
-  onPress(_v: any) {},
-  /**
-   * 背景透明度动画值
-   */
-  opacityAnimationValue: 1,
-  /**
-   * 背景透明度动画时间
-   */
-  opacityAnimationDuration: 150,
-};
-
-type DefaultProps = Readonly<typeof defaultProps>;
-
-interface IProps extends DefaultProps {
-  value: any;
-  style?: StyleProp<ViewStyle>;
-  pickerStyle?: StyleProp<ViewStyle>;
-  coorToValue: (coor: Point, validBound: ValidBound) => any;
-  valueToCoor: (value: any, originCoor?: Point, validBound?: ValidBound) => Point;
-  valueToColor: (value: any) => string;
-  initData: (validBound?: ValidBound) => void;
-}
-
-interface IState {
-  value: any;
-}
-
-let idIndex = 0;
-
-export default class RectPicker extends Component<IProps, IState> {
-  static defaultProps = defaultProps;
-
-  constructor(props: IProps) {
-    super(props);
-    this.state = { value: this.props.value };
-    this.bgOpacityAnim = new Animated.Value(this.props.opacityAnimationValue);
-    // rn的坑，需要在此赋值才有效果
-    this._panResponder = PanResponder.create({
-      onStartShouldSetPanResponder: this.handleSetResponder,
-      onPanResponderTerminationRequest: () => !this.locked,
-      onPanResponderGrant: this.handleGrant,
-      onPanResponderMove: this.handleMove,
-      onPanResponderRelease: this.handleRelease,
-    });
-  }
-
-  // eslint-disable-next-line react/no-deprecated
-  componentWillReceiveProps(nextProps: IProps) {
-    if (!_.isEqual(nextProps.value, this.props.value)) {
-      this.setState({ value: nextProps.value });
-      const position = this.valueToCoor(nextProps.value);
-      const color = this.valueToColor(nextProps.value);
-      this.updateThumbPosition(position, color, true);
-    }
-    if (nextProps.lossShow !== this.props.lossShow) {
-      const color = this.valueToColor(nextProps.value);
-      this.updateThumbPosition(
-        this.thumbPosition,
-        nextProps.lossShow ? nextProps.lossColor : color,
-        true
-      );
-    }
-    if (nextProps.thumbSize !== this.props.thumbSize) {
-      this.handleViewBoxChange(nextProps.thumbSize);
-    }
-    if (this.props.opacityAnimationValue !== nextProps.opacityAnimationValue) {
-      Animated.timing(this.bgOpacityAnim, {
-        toValue: nextProps.opacityAnimationValue,
-        duration: nextProps.opacityAnimationDuration,
-        useNativeDriver: true,
-      }).start();
-    }
-  }
-
-  shouldComponentUpdate() {
-    return !this.locked;
-  }
-
-  private _panResponder: PanResponderInstance;
-  private thumbPosition: Point = { x: 0, y: 0 };
-  private color = 'red';
-  private showPicker = false;
-  private pickerWidth = 200;
-  private pickerHeight = 200;
-  private validBound: ValidBound = { x: 0, y: 0, width: 0, height: 0 };
-  private locked = false; // 是否锁定组件，锁定后，组件接受react正常更新
-  private thumbRef: Thumb;
-  private isThumbFocus = false;
-  private grantTime = 0;
-  private linearGradientId = `rectPicker_${idIndex++}`;
-  private bgOpacityAnim: Animated.Value = new Animated.Value(1);
-
-  coorToValue(point: Point) {
-    const { coorToValue } = this.props;
-    if (typeof coorToValue === 'function') {
-      return coorToValue(point, this.validBound);
-    }
-    return point;
-  }
-
-  valueToCoor(value: any, originCoor?: Point): Point {
-    const { valueToCoor } = this.props;
-
-    // 是否有显示区, 无显示区直接返回原点坐标
-    const { width, height } = this.validBound;
-    if (width === 0 || height === 0) {
-      return { x: 0, y: 0 };
-    }
-    if (typeof valueToCoor === 'function') {
-      return valueToCoor(value, originCoor, this.validBound);
-    }
-    return originCoor || { x: 0, y: 0 };
-  }
-
-  valueToColor(value: any): string {
-    const { valueToColor } = this.props;
-    if (typeof valueToColor === 'function') {
-      return valueToColor(value);
-    }
-    return 'transparent';
-  }
-
-  firPropsEvent(cb: (params?: any) => void, ...args: any[]) {
-    cb && cb(...args);
-  }
-
-  handleSetResponder = (e: GestureResponderEvent) => {
-    if (this.props.disabled) {
-      return false;
-    }
-    // 是否点中标记
-    const { locationX, locationY } = e.nativeEvent;
-    const { thumbSize, touchThumbSize, clickEnabled } = this.props;
-    let validRadius = thumbSize / 2;
-    if (touchThumbSize) {
-      validRadius = touchThumbSize / 2;
-    }
-    const { x, y } = this.thumbPosition;
-    const length = Math.sqrt((locationX - x) ** 2 + (locationY - y) ** 2);
-    if (length <= validRadius) {
-      this.isThumbFocus = true;
-      return true;
-    }
-    this.isThumbFocus = false;
-    this.grantTime = +new Date();
-    return clickEnabled;
-  };
-
-  handleGrant = () => {
-    if (this.isThumbFocus) {
-      this.locked = true;
-      this.firPropsEvent(this.props.onGrant, this.state.value);
-    }
-  };
-
-  handleMove = (_e: GestureResponderEvent, gesture: PanResponderGestureState) => {
-    if (this.isThumbFocus) {
-      const value = this.handleGestureMove(gesture);
-      this.firPropsEvent(this.props.onMove, value);
-    }
-  };
-
-  handleRelease = (e: GestureResponderEvent, gesture: PanResponderGestureState) => {
-    if (this.isThumbFocus) {
-      this.locked = false;
-      const value = this.handleGestureMove(gesture, true);
-      this.setState({ value });
-      this.firPropsEvent(this.props.onRelease, value);
-    } 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, locationY } = e.nativeEvent;
-        const { x: newX, y: newY } = this.formatCoor(locationX, locationY);
-        const value = this.coorToValue({ x: newX, y: newY });
-        const coor = this.valueToCoor(value, { x: newX, y: newY });
-        const color = this.valueToColor(value);
-        this.updateThumbPosition(coor, color, true);
-
-        this.firPropsEvent(this.props.onPress, value);
-      }
-    }
-  };
-
-  handleGestureMove(e: PanResponderGestureState, isEnd = false) {
-    const { dx, dy } = e;
-    const { x, y } = this.thumbPosition;
-    // 边界处理
-    const { x: newX, y: newY } = this.formatCoor(x + dx, y + dy);
-
-    // 转为实际值，再转回成坐标
-    const value = this.coorToValue({ x: newX, y: newY });
-    const coor = this.valueToCoor(value, { x: newX, y: newY });
-    const color = this.valueToColor(value);
-    this.updateThumbPosition(coor, color, isEnd);
-    return value;
-  }
-
-  formatCoor(x: number, y: number) {
-    const {
-      width: validWidth,
-      height: validHeight,
-      x: validStartX,
-      y: validStartY,
-    } = this.validBound;
-    let newX = x;
-    let newY = y;
-    // 边界处理
-    if (newX < validStartX) {
-      newX = validStartX;
-    } else if (newX > validWidth + validStartX) {
-      newX = validWidth + validStartX;
-    }
-    if (newY < validStartY) {
-      newY = validStartY;
-    } else if (newY > validHeight + validStartY) {
-      newY = validHeight + validStartY;
-    }
-
-    return { x: newX, y: newY };
-  }
-
-  updateThumbPosition(coor: Point, color: string, isEnd: boolean) {
-    this.thumbRef && this.thumbRef.setNativeProps({ color, ...coor });
-    if (isEnd) {
-      this.color = color;
-      this.thumbPosition = coor;
-    }
-  }
-
-  handleViewBoxChange = async (thumbSize: number) => {
-    this.validBound = {
-      width: this.pickerWidth - thumbSize,
-      height: this.pickerHeight - thumbSize,
-      x: thumbSize / 2,
-      y: thumbSize / 2,
-    };
-    await this.props.initData(this.validBound);
-    this.thumbPosition = this.valueToCoor(this.props.value);
-    this.forceUpdate();
-  };
-
-  handlePickerLayout = async (e: LayoutChangeEvent) => {
-    const { thumbSize, lossColor, lossShow } = this.props;
-    const { width, height } = e.nativeEvent.layout;
-    if (width !== this.pickerWidth || height !== this.pickerHeight) {
-      this.pickerWidth = width || 10; // svg 尺寸不能为0，此处确保值大于0
-      this.pickerHeight = height || 10; // svg 尺寸不能为0，此处确保值大于0
-      if (!this.showPicker) {
-        this.showPicker = true;
-        this.color = lossShow ? lossColor : this.valueToColor(this.props.value);
-      }
-      await this.handleViewBoxChange(thumbSize);
-    }
-  };
-
-  render() {
-    const {
-      style,
-      pickerStyle,
-      bgs,
-      thumbComponent: ThumbView,
-      disabled,
-      thumbSize,
-      thumbImg,
-    } = this.props;
-    const { showPicker, pickerHeight, pickerWidth, thumbPosition } = this;
-    return (
-      <View
-        style={[{ flex: 1 }, style]}
-        {...this._panResponder.panHandlers}
-        pointerEvents="box-only"
-        onLayout={this.handlePickerLayout}
-      >
-        {showPicker && (
-          <Animated.View
-            style={[
-              {
-                opacity: this.bgOpacityAnim,
-              },
-              pickerStyle,
-            ]}
-          >
-            <Svg
-              height={pickerHeight}
-              width={pickerWidth}
-              viewBox={`0 0 ${pickerWidth} ${pickerHeight}`}
-            >
-              <Defs>
-                {bgs.map(({ x1 = '0%', x2 = '100%', y1 = '0%', y2 = '0%', colors }, index) => (
-                  <LinearGradient
-                    key={index}
-                    id={`${this.linearGradientId}_${index}`}
-                    x1={x1}
-                    x2={x2}
-                    y1={y1}
-                    y2={y2}
-                  >
-                    {colors.map((color, i) => (
-                      <Stop key={i} {...color} />
-                    ))}
-                  </LinearGradient>
-                ))}
-              </Defs>
-              {bgs.map((_bg, index) => (
-                <Rect
-                  key={index}
-                  fill={`url(#${this.linearGradientId}_${index})`}
-                  x="0"
-                  y="0"
-                  width={pickerWidth}
-                  height={pickerHeight}
-                />
-              ))}
-            </Svg>
-          </Animated.View>
-        )}
-        {/* render thumb */}
-        {showPicker && (
-          <ThumbView
-            ref={(ref: Thumb) => {
-              this.thumbRef = ref;
-            }}
-            {...thumbPosition}
-            img={thumbImg}
-            size={thumbSize}
-            color={this.color}
-            disabled={disabled}
-          />
-        )}
-      </View>
-    );
-  }
-}