LampCirclePickerWhite 的锚点会落在圆盘外面

[15002075425]

• Tuya MiniApp IDE 版本信息：0.8.9;
  
  • App 应用版本信息： _设置-关于中进行查看~
  • "@ray-js/ray": "¹.6.1","@ray-js/ray": "¹.6.1",
  • 移动设备信息：_{手机型号及系统}
  • 相关代码："@ray-js/components-ty-lamp": "².0.2"
  • 日志信息：_{错误日志或} IDE 运行日志等~
  • 问题描述（复现步骤）："@ray-js/components-ty-lamp": "².0.2" LampCirclePickerWhite 在选择预设的色温值传给色盘时，色盘的锚点会落在圆盘外
  • 预期结果：LampCirclePickerWhite 的锚点在传入 temperature 的值时，永远落在圆盘内
  • 实际结果：如题 LampCirclePickerWhite 的锚点会落在圆盘外面

[crisiron]

• Tuya MiniApp IDE 版本信息：0.8.9;
  
  • App 应用版本信息： _设置-关于中进行查看~
  • "@ray-js/ray": "¹.6.1","@ray-js/ray": "¹.6.1",
  • 移动设备信息：_{手机型号及系统}
  • 相关代码："@ray-js/components-ty-lamp": "².0.2"
  • 日志信息：_{错误日志或} IDE 运行日志等~
  • 问题描述（复现步骤）："@ray-js/components-ty-lamp": "².0.2" LampCirclePickerWhite 在选择预设的色温值传给色盘时，色盘的锚点会落在圆盘外
  • 预期结果：LampCirclePickerWhite 的锚点在传入 temperature 的值时，永远落在圆盘内
  • 实际结果：如题 LampCirclePickerWhite 的锚点会落在圆盘外面

麻烦提供下，可复现的代码

[15002075425]

Code: Select all

.whiteView {
  overflow-y: scroll;
  padding-bottom: 20px;
  .circleView {
    width: 100vw;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 10px 0;
    height: 270px;
    margin-bottom: 12px;
  }

  .colorItem {
    width: 28px;
    height: 28px;
    border-radius: 14px;
    margin-right: 10px;
    display: 'inline-block';
  }

  .modeTabItemColor {
    width: 28px;
    height: 28px;
    border-radius: 14px;
  }

  .modeTabItemColorActive {
    width: 22px;
    height: 22px;
    border-radius: 11px;
  }
}

Code: Select all

import React, { useEffect, useState } from 'react';
import { View } from '@ray-js/ray';
import { useProps, utils } from '@ray-js/panel-sdk';
import { LampCirclePickerWhite } from '@ray-js/components-ty-lamp';
import styles from './index1.module.less';

const defaultWhite = [
  { temperature: 0, brightness: 1000 },
  { temperature: 500, brightness: 1000 },
  { temperature: 1000, brightness: 1000 },
];

const { brightKelvin2rgb } = utils;

interface Props {
  show: boolean;
  showParent: boolean;
}

export const ColorComponent: React.FC<Props> = React.memo(({ show }) => {
  const [temp, setTemp] = useState(1000);
  const [activeIndex, setActiveIndex] = useState(-1);
  const tempValue = useProps(dpState => dpState.temp_value);

  useEffect(() => {
    setTemp(tempValue);
  }, [tempValue]);

  useEffect(() => {
    if (activeIndex === -1) return;
    const _colorItem = defaultWhite[activeIndex];
    if (_colorItem) {
      handleOnChangeTemperature(_colorItem.temperature);
    }
  }, [activeIndex]);

  const handleChecked = (_activeIndex: number) => {
    if (_activeIndex === activeIndex) {
      setActiveIndex(-1);
      return;
    }
    setActiveIndex(_activeIndex);
  };

  const handleOnChangeTemperature = (_temp: number) => {
    setTemp(_temp);
  };

  const getColors = (
    colorList: {
      hue?: number;
      saturation?: number;
      value?: number;
      brightness?: number;
      temperature?: number;
    }[]
  ) => {
    return colorList.map(color => {
      const { brightness, temperature } = color;
      const rgb = brightKelvin2rgb(brightness, temperature);
      return rgb;
    });
  };

  const itemStyle = {
    display: 'inline-block',
  };

  return (
    <View className={styles.whiteView}>
      <View className={styles.circleView}>
        {show && (
          <LampCirclePickerWhite
            thumbRadius={15}
            temperature={temp}
            radius={120}
            onTouchStart={setTemp}
            onTouchEnd={(_temp: number) => {
              handleOnChangeTemperature(_temp);
            }}
            canvasId="white_picker_1"
          />
        )}
      </View>
      <View className={styles.colorCollectView}>
        <View>
          {getColors(defaultWhite).map((color, index) => {
            return (
              <View
                key={color + index}
                className={styles.colorItem}
                style={{ ...itemStyle }}
                onClick={() => handleChecked(index)}
              >
                <View
                  className={styles.modeTabItemColor}
                  style={{ backgroundColor: color || '#1F2022' }}
                />
              </View>
            );
          })}
        </View>
      </View>
    </View>
  );
});

ColorComponent.displayName = 'ColorComponent';

export default ColorComponent;

操作：将锚点拖动到靠近底部，然后点击预设色温值0 或者 1000 （最左边、最右边）

[crisiron]

新版本已修复，在package.json 中 配置
"resolutions": {
"@ray-js/lamp-circle-picker-white": "0.0.3-beta-5"
}, 然后执行 yarn 即可安装最新版本的，测试后没问题发布正式版本

[15002075425]

已解决