@ray-js/lamp-circle-picker 1.1.1

package/README.md

@@ -0,0 +1,99 @@
+English | [简体中文](./README-zh_CN.md)
+
+# @ray/lamp-circle-picker
+
+[![latest](https://img.shields.io/npm/v/@ray/lamp-annulus-color-picker/latest.svg)](https://www.npmjs.com/package/@ray/lamp-annulus-color-picker) [![download](https://img.shields.io/npm/dt/@ray/lamp-annulus-color-picker.svg)](https://www.npmjs.com/package/@ray/lamp-annulus-color-picker)
+
+> LampCirclePicker
+
+## Installation
+
+```sh
+$ npm install @ray-js/components-ty-lamp
+# or
+$ yarn add @ray-js/components-ty-lamp
+```
+
+## Usage
+
+```tsx
+interface IProps {
+  /**
+   * @description.zh 色盘id 唯一标识
+   * @description.en Color wheel id unique identification
+   * @default
+   */
+  canvasId: string;
+  /**
+   * @description.zh 默认数值
+   * @description.en default value
+   * @default
+   */
+  value: number;
+  /**
+   * @description.zh 内部色环宽度
+   * @description.en The width of inner color ring
+   * @default 80
+   */
+  innerRingRadius?: number;
+  /**
+   * @description.zh 色盘宽度
+   * @description.en The width of color ring
+   * @default 140
+   */
+  radius?: number;
+  /**
+   * @description.zh 是否展示色圈
+   * @description.en Whether to show color circle
+   * @default true
+   */
+  isShowThumb?: boolean;
+  /**
+   * @description.zh 是否当前颜色文案
+   * @description.en Whether the current color text
+   * @default false
+   */
+  isShowColorTip?: boolean;
+  /**
+   * @description.zh 手指按下时的回调函数
+   * @description.en Finger press when the callback function
+   * @default ''
+   */
+  onTouchStart?: (value: number) => void;
+  /**
+   * @description.zh 手指按下拖动时的回调函数
+   * @description.en Finger to press the drag of the callback function
+   * @default ''
+   */
+  onTouchMove?: (value: number) => void;
+  /**
+   * @description.zh 手指按下结束时的回调函数
+   * @description.en Finger press at the end of the callback function
+   * @default ''
+   */
+  onTouchEnd?: (value: number) => void;
+}
+```
+
+```tsx
+// 用法
+import { LampCirclePicker } from '@ray-js/components-ty-lamp';
+
+export default () => {
+  const [temperature, setTemperature] = useState(20);
+  const handleMove = (v: number) => {
+    setTemperature(v);
+  };
+  const handleEnd = (v: number) => {
+    setTemperature(v);
+  };
+  return (
+    <LampCirclePicker
+      canvasId="whiteRing"
+      temperature={temperature}
+      onTouchMove={handleMove}
+      onTouchEnd={handleEnd}
+    />
+  );
+};
+```

package/lib/component/index.config.js

@@ -0,0 +1,18 @@
+export var web = {
+  backgroundColor: '#f2f4f6',
+  navigationBarTitleText: ''
+};
+export var wechat = {
+  backgroundColor: '#f2f4f6',
+  navigationBarTitleText: ''
+};
+export var tuya = {
+  backgroundColor: '#f2f4f6',
+  navigationBarTitleText: ''
+};
+export var native = {
+  backgroundColor: 'transparent',
+  isBleOfflineOverlay: false,
+  useSafeAreaView: true,
+  navigationBarTitleText: ''
+};

package/lib/component/index.d.ts

@@ -0,0 +1,3 @@
+/// <reference types="react" />
+import { IProps } from './props';
+export default function RectColor(props: IProps): JSX.Element;

package/lib/component/index.js

@@ -0,0 +1,27 @@
+/* eslint-disable prettier/prettier */
+import React from 'react';
+import RectColorPicker from './rjs';
+export default function RectColor(props) {
+  return /*#__PURE__*/React.createElement(RectColorPicker, {
+    canvasId: props.canvasId,
+    radius: props.radius,
+    innerRingRadius: props.innerRingRadius,
+    value: props.value,
+    isShowColorTip: props.isShowColorTip,
+    bindstart: function onTouchStart(e) {
+      var detail = e.detail;
+      var temp = Math.floor(detail);
+      props.onTouchStart && props.onTouchStart(temp);
+    },
+    bindmove: function onTouchMove(e) {
+      var detail = e.detail;
+      var temp = Math.floor(detail);
+      props.onTouchMove && props.onTouchMove(temp);
+    },
+    bindend: function onTouchEnd(e) {
+      var detail = e.detail;
+      var temp = Math.floor(detail);
+      props.onTouchEnd && props.onTouchEnd(temp);
+    }
+  });
+}

package/lib/component/index.module.less

@@ -0,0 +1,7 @@
+.thumb {
+  position: absolute;
+  width: 44rpx;
+  height: 44rpx;
+  border-radius: 50%;
+  border: 4rpx solid rgba(255, 255, 255, 0.8);
+}

package/lib/component/props.d.ts

@@ -0,0 +1,57 @@
+export interface IProps {
+    /**
+     * @description.zh 色盘id 唯一标识
+     * @description.en Color wheel id unique identification
+     * @default
+     */
+    canvasId: string;
+    /**
+     * @description.zh 默认数值
+     * @description.en default value
+     * @default
+     */
+    value: number;
+    /**
+     * @description.zh 内部色环宽度
+     * @description.en Drag the color ring width
+     * @default 80
+     */
+    innerRingRadius?: number;
+    /**
+     * @description.zh 色盘宽度
+     * @description.en Color plate width
+     * @default 140
+     */
+    radius?: number;
+    /**
+     * @description.zh 是否展示色圈
+     * @description.en Whether to show color circle
+     * @default true
+     */
+    isShowThumb?: boolean;
+    /**
+     * @description.zh 是否当前颜色文案
+     * @description.en Whether the current color text
+     * @default false
+     */
+    isShowColorTip?: boolean;
+    /**
+     * @description.zh 手指按下时的回调函数
+     * @description.en Finger press when the callback function
+     * @default ''
+     */
+    onTouchStart?: (value: number) => void;
+    /**
+     * @description.zh 手指按下拖动时的回调函数
+     * @description.en Finger to press the drag of the callback function
+     * @default ''
+     */
+    onTouchMove?: (value: number) => void;
+    /**
+     * @description.zh 手指按下结束时的回调函数
+     * @description.en Finger press at the end of the callback function
+     * @default ''
+     */
+    onTouchEnd?: (value: number) => void;
+}
+export declare const defaultProps: IProps;

package/lib/component/props.js

@@ -0,0 +1,14 @@
+// eslint-disable-next-line @typescript-eslint/explicit-module-boundary-types
+var nilFn = function () {
+  return null;
+};
+export var defaultProps = {
+  innerRingRadius: 80,
+  radius: 140,
+  isShowThumb: true,
+  onTouchStart: nilFn,
+  onTouchMove: nilFn,
+  onTouchEnd: nilFn,
+  canvasId: 'AnnulusPickerColor',
+  value: 0
+};

package/lib/component/rjs/index.js

@@ -0,0 +1,121 @@
+import "core-js/modules/es.number.constructor.js";
+import "core-js/modules/es.json.stringify.js";
+import Render from './indexRjs.rjs';
+import { getSystemInfo } from '@ray-js/api';
+var ETipRectPosition = {
+  LEFT: 'LEFT',
+  RIGHT: 'RIGHT'
+};
+
+// eslint-disable-next-line no-undef
+Component({
+  properties: {
+    canvasId: String,
+    containerStyle: String,
+    radius: {
+      type: Number,
+      value: 100
+    },
+    innerRingRadius: {
+      type: Number,
+      value: 50
+    },
+    value: {
+      type: Number,
+      value: 0
+    },
+    isShowColorTip: {
+      type: Boolean,
+      value: true
+    },
+    onTouchStart: Function,
+    onTouchMove: Function,
+    onTouchEnd: Function
+  },
+  data: {
+    render: null,
+    isTouch: false,
+    touchType: '',
+    colorText: '',
+    tipRectPosition: ETipRectPosition.LEFT
+  },
+  observers: {
+    'value.**': function value(v) {
+      if (Math.abs(this.lastValue / 10 - v / 10) > 1 || this.lastValue === 0 && v === 0) {
+        this._updatePosByRgb(v);
+        this.lastValue = v;
+      }
+    }
+  },
+  lifetimes: {
+    attached: function attached() {
+      this.render = new Render(this);
+      var _this$data = this.data,
+        radius = _this$data.radius,
+        innerRingRadius = _this$data.innerRingRadius;
+      this.render._setCircles(radius, innerRingRadius);
+    },
+    ready: function ready() {
+      var _this = this;
+      var canvasId = this.data.canvasId;
+      this.initCanvas();
+      setTimeout(function () {
+        _this.initCanvas();
+        _this.render.checkIsRender(canvasId);
+      }, 300);
+    }
+  },
+  methods: {
+    getCanvas: function getCanvas(canvas) {
+      if (JSON.stringify(canvas) === '{}') {
+        this.initCanvas();
+      }
+    },
+    initCanvas: function initCanvas() {
+      var _this$data2 = this.data,
+        canvasId = _this$data2.canvasId,
+        radius = _this$data2.radius,
+        innerRingRadius = _this$data2.innerRingRadius,
+        _this$data2$value = _this$data2.value,
+        value = _this$data2$value === void 0 ? 0 : _this$data2$value;
+      var ratio = getSystemInfo().pixelRatio || 2;
+      canvasId && this.render.renderAnnulusColor(canvasId, radius, innerRingRadius, ratio);
+      this._updatePosByRgb(value);
+      this.lastValue = value;
+    },
+    _updatePosByRgb: function _updatePosByRgb(value) {
+      var _this$render;
+      if (value === undefined) {
+        return;
+      }
+      (_this$render = this.render) === null || _this$render === void 0 ? void 0 : _this$render._getAnglePositionByValue(value);
+    },
+    _getRgb: function _getRgb(x, y) {
+      var _this$render2;
+      (_this$render2 = this.render) === null || _this$render2 === void 0 ? void 0 : _this$render2.getAnnulusImageData(x, y);
+    },
+    _getAnnulusImageData: function _getAnnulusImageData(dataRes) {
+      var position = dataRes.position,
+        touchType = dataRes.touchType;
+      this.touchType = touchType;
+      var result = this._getLengthByAnglePosition(position.x, position.y);
+      this.lastValue = result;
+      this.triggerEvent(touchType, result);
+    },
+    _getLengthByAnglePosition: function _getLengthByAnglePosition(x, y) {
+      var radius = this.data.radius;
+      var radian = Math.atan2(y - radius, x - radius); // 弧度
+      var angle = radian * (180 / Math.PI); // 角度
+      var angleData = 0;
+      if (+angle > 135 && +angle <= 180) {
+        angleData = angle - 135;
+      } else if (angle > -180 && angle <= 0) {
+        angleData = 45 + angle + 180;
+      } else if (angle > 0 && angle <= 45) {
+        angleData = 225 + angle;
+      }
+      var result = Math.round(angleData / 270 * 1000);
+      return result;
+    }
+  }
+});

package/lib/component/rjs/index.json

@@ -0,0 +1,3 @@
+{
+  "component": true
+}

package/lib/component/rjs/index.tyml

@@ -0,0 +1,15 @@
+<view style="{{ containerStyle }}">
+    <canvas
+        class="canvasWrapper"
+        type="2d"
+        canvas-id="{{ canvasId }}"
+        style="width: {{ radius * 2 }}px; height:  {{ radius * 2 }}px;"
+    >
+        <canvas
+            class="canvasThumbWrapper"
+            type="2d"
+            canvas-id="{{ canvasId }}_thumb"
+            style="width: {{ radius * 2 }}px; height:  {{ radius * 2 }}px;"
+        ></canvas>
+    </canvas>
+</view>

package/lib/component/rjs/index.tyss

@@ -0,0 +1,41 @@
+.container {}
+
+.canvasWrapper {
+  position: relative;
+}
+.canvasThumbWrapper {
+  z-index: 11;
+}
+
+.thumb {
+  position: absolute;
+  width: 44rpx;
+  height: 44rpx;
+  border-radius: 50%;
+  border: 5rpx solid rgba(255, 255, 255, 0.8);
+  z-index: 99;
+  box-shadow:0 0 7px 0 rgba(0, 0, 0, 0.16);
+}
+
+.colorTipWrapper {
+  position: absolute;
+  top: 12rpx;
+  left: 12rpx;
+  min-width: 72rpx;
+  padding-left: 10rpx;
+  padding-right: 10rpx;
+  height: 36rpx;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  background: rgba(0, 0, 0, 0.2);
+  color: #fff;
+  border-radius: 66rpx;
+  font-size: 20rpx;
+  z-index: 999;
+}
+
+.colorTip {
+  color: #fff;
+  font-size: 20rpx;
+}

package/lib/component/rjs/indexRjs.rjs

@@ -0,0 +1,216 @@
+// commonColor.rjs
+export default Render({
+  rectContext: null,
+
+  // 环形色盘
+  async renderAnnulusColor(id, radius, innerRingRadius, temp = 0) {
+    const canvas = await getCanvasById(id);
+    canvas.width = radius * 4;
+    canvas.height = radius * 4;
+    if (!canvas) {
+      console.error('canvas not found');
+      return;
+    }
+    const ctx = canvas.getContext('2d');
+
+    const startAngle = Math.PI * 0.75;
+    const endAngle = Math.PI * 0.25;
+
+    ctx.beginPath();
+    ctx.arc(
+      radius * 2,
+      radius * 2,
+      innerRingRadius * 2 + (radius - innerRingRadius),
+      startAngle,
+      endAngle
+    );
+
+    let grd = ctx.createRadialGradient(
+      0,
+      radius * 2,
+      radius * 2,
+      radius * 4,
+      radius * 2,
+      radius * 2
+    );
+    grd.addColorStop(0, '#FFCD65');
+    grd.addColorStop(0.7, '#FEECAB');
+    grd.addColorStop(1, '#CEEDFF');
+
+    //设定曲线粗细度
+    ctx.lineWidth = (radius - innerRingRadius) * 2;
+    //给曲线着色
+    ctx.strokeStyle = grd;
+    //连接处样式
+    ctx.lineCap = 'round';
+    //给环着色
+    ctx.stroke();
+    ctx.closePath();
+    ctx.scale(2, 2);
+    canvas.style.width = `${radius * 2}px`;
+    canvas.style.height = `${radius * 2}px`;
+    this.annulusContext = ctx;
+    this.renderAnnulusColorThumb(id, temp);
+  },
+  async renderAnnulusColorThumb(id, temp = 0) {
+    if (!this.canvasThumb) {
+      this.canvasThumb = await getCanvasById(`${id}_thumb`);
+      this.canvasThumbCtx = this.canvasThumb.getContext('2d');
+    }
+    this.addEventListeners();
+    this._getAnglePositionByValue(temp);
+  },
+  async checkIsRender(id) {
+    const canvas = await getCanvasById(id);
+    this.callMethod('getCanvas', canvas);
+  },
+  _setCircles(radius, innerRingRadius) {
+    this.radius = radius;
+    this.innerRingRadius = innerRingRadius;
+  },
+  _getAnglePositionByValue(value) {
+    const ctx = this.annulusContext;
+    const angle = 135 + (value / 1000) * 270;
+    const x =
+      this.radius +
+      (this.innerRingRadius + (this.radius - this.innerRingRadius) / 2) *
+        Math.cos((angle * Math.PI) / 180);
+    const y =
+      this.radius +
+      (this.innerRingRadius + (this.radius - this.innerRingRadius) / 2) *
+        Math.sin((angle * Math.PI) / 180);
+    const { data } = ctx.getImageData(x * 2, y * 2, 1, 1);
+    this.updateThumbPosition(x, y, { r: data[0], g: data[1], b: data[2] });
+  },
+  updateThumbPosition(x, y, rgb) {
+    if (!this.canvasThumb) {
+      console.error('canvasThumb not found');
+      return;
+    }
+    let ctx = this.canvasThumbCtx;
+    this.canvasThumb.width = this.radius * 4;
+    this.canvasThumb.height = this.radius * 4;
+    ctx.clearRect(0, 0, this.canvasThumb.width, this.canvasThumb.height);
+    ctx.beginPath();
+    const radius = this.radius - this.innerRingRadius - 4; // 圆弧半径
+    const startAngle = 0; // 开始点
+    const endAngle = 2 * Math.PI; // 结束点
+    ctx.arc(x * 2, y * 2, radius, startAngle, endAngle, true);
+    ctx.shadowBlur = 24;
+    ctx.shadowColor = 'rgba(0, 0, 0, 0.2)';
+    ctx.fillStyle = 'rgb(' + rgb.r + ',' + rgb.g + ',' + rgb.b + ')';
+    ctx.fill();
+    ctx.strokeStyle = '#fff';
+    ctx.lineWidth = 8;
+    ctx.stroke();
+    ctx.scale(2, 2);
+    this.canvasThumb.style.width = `${this.radius * 2}px`;
+    this.canvasThumb.style.height = `${this.radius * 2}px`;
+  },
+  getAnnulusImageData(x, y) {
+    const ctx = this.annulusContext;
+    if (!ctx) {
+      console.error('ctx not found');
+      return;
+    }
+    const { data } = ctx.getImageData(x * 2, y * 2, 1, 1);
+    const r = data[0];
+    const g = data[1];
+    const b = data[2];
+    this.updateThumbPosition(x, y, { r, g, b });
+    const dataRes = {
+      position: { x, y },
+      touchType: this.touchType,
+    };
+    this.callMethod('_getAnnulusImageData', dataRes);
+  },
+  _getRgb(x, y) {
+    if (x && y) {
+      this.getAnnulusImageData(x, y);
+    }
+  },
+  _getValidMaxMinRes(x, y) {
+    const { radius, innerRingRadius } = this;
+    const xDistance = Math.abs(x - radius);
+    const yDistance = Math.abs(y - radius);
+    const distance = Math.sqrt(xDistance * xDistance + yDistance * yDistance);
+    const radian = Math.atan2(y - radius, x - radius);
+    const angle = radian * (180 / Math.PI);
+    if (angle < 45 || angle > 135) {
+      const thumbPositionY =
+        radius +
+        (innerRingRadius + (radius - innerRingRadius) / 2) *
+          Math.sin(Math.atan2(y - radius, x - radius));
+      const thumbPositionX =
+        radius +
+        (innerRingRadius + (radius - innerRingRadius) / 2) *
+          Math.cos(Math.atan2(y - radius, x - radius));
+      return { x: thumbPositionX, y: thumbPositionY };
+    }
+    if (angle >= 45 && angle < 80) {
+      const thumbPositionY =
+        radius +
+        (innerRingRadius + (radius - innerRingRadius) / 2) *
+          Math.sin(Math.atan2(210 - radius, 210 - radius));
+      const thumbPositionX =
+        radius +
+        (innerRingRadius + (radius - innerRingRadius) / 2) *
+          Math.cos(Math.atan2(210 - radius, 210 - radius));
+      return { x: thumbPositionX, y: thumbPositionY };
+    }
+    if (angle > 115 && angle <= 135) {
+      const thumbPositionY =
+        radius +
+        (innerRingRadius + (radius - innerRingRadius) / 2) *
+          Math.sin(Math.atan2(210 - radius, 70 - radius));
+      const thumbPositionX =
+        radius +
+        (innerRingRadius + (radius - innerRingRadius) / 2) *
+          Math.cos(Math.atan2(210 - radius, 70 - radius));
+      return { x: thumbPositionX, y: thumbPositionY };
+    }
+  },
+  handleCanvasStartEvent(evt) {
+    this.touchType = 'start';
+    const { changedTouches } = evt;
+    const [point] = changedTouches;
+    const { top, left } = this.canvasThumb.getBoundingClientRect();
+    const validXY = this._getValidMaxMinRes(point.clientX - left, point.clientY - top);
+    if (!validXY) {
+      return;
+    }
+    this._getRgb(validXY.x, validXY.y);
+  },
+  handleCanvasEndEvent(evt) {
+    this.touchType = 'end';
+    const { changedTouches } = evt;
+    const [point] = changedTouches;
+    const { top, left } = this.canvasThumb.getBoundingClientRect();
+    const validXY = this._getValidMaxMinRes(point.clientX - left, point.clientY - top);
+    if (!validXY) {
+      return;
+    }
+    this._getRgb(validXY.x, validXY.y);
+  },
+  handleCanvasMoveEvent(evt) {
+    this.touchType = 'move';
+    const { changedTouches } = evt;
+    const [point] = changedTouches;
+    const { top, left } = this.canvasThumb.getBoundingClientRect();
+    const validXY = this._getValidMaxMinRes(point.clientX - left, point.clientY - top);
+    if (!validXY) {
+      return;
+    }
+    this._getRgb(validXY.x, validXY.y);
+  },
+  addEventListeners() {
+    this.canvasThumb.addEventListener('touchstart', this.handleCanvasStartEvent, false);
+    this.canvasThumb.addEventListener('touchmove', this.handleCanvasMoveEvent, false);
+    this.canvasThumb.addEventListener('touchend', this.handleCanvasEndEvent, false);
+  },
+  removeEventListeners() {
+    this.canvasThumb.removeEventListener('touchstart', this.handleCanvasStartEvent);
+    this.canvasThumb.removeEventListener('touchmove', this.handleCanvasMoveEvent);
+    this.canvasThumb.removeEventListener('touchend', this.handleCanvasEndEvent);
+  },
+});

package/lib/i18n/index.d.ts

@@ -0,0 +1,3 @@
+import { kit } from '@ray-js/panel-sdk';
+declare const _default: kit.I18N;
+export default _default;

package/lib/i18n/index.js

@@ -0,0 +1,4 @@
+import { kit } from '@ray-js/panel-sdk';
+import Strings from './strings';
+var I18N = kit.I18N;
+export default new I18N(Strings);

package/lib/i18n/strings.d.ts

@@ -0,0 +1,9 @@
+declare const _default: {
+    en: {
+        temperature: string;
+    };
+    zh: {
+        temperature: string;
+    };
+};
+export default _default;

package/lib/i18n/strings.js

@@ -0,0 +1,8 @@
+export default {
+  en: {
+    temperature: 'Temperature'
+  },
+  zh: {
+    temperature: '色温'
+  }
+};

package/lib/index.config.js

@@ -0,0 +1,18 @@
+export var web = {
+  backgroundColor: '#f2f4f6',
+  navigationBarTitleText: ''
+};
+export var wechat = {
+  backgroundColor: '#f2f4f6',
+  navigationBarTitleText: ''
+};
+export var tuya = {
+  backgroundColor: '#f2f4f6',
+  navigationBarTitleText: ''
+};
+export var native = {
+  backgroundColor: 'transparent',
+  isBleOfflineOverlay: false,
+  useSafeAreaView: true,
+  navigationBarTitleText: ''
+};

package/lib/index.d.ts

@@ -0,0 +1,23 @@
+/// <reference types="react" />
+interface IProps {
+    canvasId: string;
+    isShowColorTip?: boolean;
+    radius?: number;
+    innerRingRadius?: number;
+    temperature: number;
+    onTouchStart?: (v: number) => void;
+    onTouchMove?: (v: number) => void;
+    onTouchEnd?: (v: number) => void;
+}
+declare const WhiteRing: {
+    (props: IProps): JSX.Element;
+    defaultProps: {
+        radius: number;
+        innerRingRadius: number;
+        isShowColorTip: boolean;
+        onTouchStart: () => null;
+        onTouchMove: () => null;
+        onTouchEnd: () => null;
+    };
+};
+export default WhiteRing;

package/lib/index.js

@@ -0,0 +1,54 @@
+import "core-js/modules/es.math.trunc.js";
+import React from 'react';
+import { View, Image, Text } from '@ray-js/components';
+import clsx from 'clsx';
+import res from './res';
+import Strings from './i18n';
+import AnnulusPickerColor from './component';
+import styled from './index.module.less';
+var ring = res.ring;
+var WhiteRing = function (props) {
+  var temperature = props.temperature,
+    radius = props.radius,
+    canvasId = props.canvasId,
+    innerRingRadius = props.innerRingRadius,
+    isShowColorTip = props.isShowColorTip,
+    onTouchStart = props.onTouchStart,
+    onTouchMove = props.onTouchMove,
+    onTouchEnd = props.onTouchEnd;
+  return /*#__PURE__*/React.createElement(View, {
+    className: clsx(styled.container, styled.flexCenter)
+  }, /*#__PURE__*/React.createElement(AnnulusPickerColor, {
+    canvasId: canvasId,
+    value: temperature,
+    radius: radius,
+    innerRingRadius: innerRingRadius,
+    isShowColorTip: isShowColorTip,
+    onTouchStart: onTouchStart,
+    onTouchMove: onTouchMove,
+    onTouchEnd: onTouchEnd
+  }), /*#__PURE__*/React.createElement(View, {
+    className: clsx(styled.innerBox, styled.flexCenter)
+  }, /*#__PURE__*/React.createElement(Image, {
+    src: ring,
+    className: styled.ringIcon
+  }), /*#__PURE__*/React.createElement(View, {
+    className: clsx(styled.textBox, styled.flexCenter)
+  }, /*#__PURE__*/React.createElement(Text, {
+    className: styled.title
+  }, Math.trunc(temperature / 10), "%"), /*#__PURE__*/React.createElement(Text, {
+    className: styled.desc
+  }, Strings.getLang('temperature')))));
+};
+var nilFn = function () {
+  return null;
+};
+WhiteRing.defaultProps = {
+  radius: 140,
+  innerRingRadius: 80,
+  isShowColorTip: true,
+  onTouchStart: nilFn,
+  onTouchMove: nilFn,
+  onTouchEnd: nilFn
+};
+export default WhiteRing;

package/lib/index.module.less

@@ -0,0 +1,41 @@
+.container {
+  position: relative;
+
+  .innerBox {
+    width: 276rpx;
+    position: absolute;
+
+    .ringIcon {
+      position: absolute;
+      width: 276rpx;
+      height: 276rpx;
+    }
+
+    .textBox {
+      flex-direction: column;
+
+      .title {
+        font-weight: 600;
+        font-size: 28px;
+        line-height: 39px;
+        text-align: center;
+        color: #FFFFFF;
+      }
+
+      .desc {
+        font-weight: 500;
+        font-size: 13px;
+        line-height: 18px;
+        text-align: center;
+        color: rgba(255, 255, 255, .45);
+      }
+    }
+  }
+}
+
+.flexCenter {
+  display: flex;
+  flex: 1;
+  align-items: center;
+  justify-content: center;
+}

package/lib/props.d.ts

@@ -0,0 +1,56 @@
+export interface IProps {
+    /**
+     * @description.zh 色盘id 唯一标识
+     * @description.en Color wheel id unique identification
+     * @default
+     */
+    canvasId: string;
+    /**
+     * @description.zh 默认数值
+     * @description.en default value
+     * @default
+     */
+    value: number;
+    /**
+     * @description.zh 内部色环宽度
+     * @description.en The width of inner color ring
+     * @default 80
+     */
+    innerRingRadius?: number;
+    /**
+     * @description.zh 色盘宽度
+     * @description.en The width of color ring
+     * @default 140
+     */
+    radius?: number;
+    /**
+     * @description.zh 是否展示色圈
+     * @description.en Whether to show color circle
+     * @default true
+     */
+    isShowThumb?: boolean;
+    /**
+     * @description.zh 是否当前颜色文案
+     * @description.en Whether the current color text
+     * @default false
+     */
+    isShowColorTip?: boolean;
+    /**
+     * @description.zh 手指按下时的回调函数
+     * @description.en Finger press when the callback function
+     * @default ''
+     */
+    onTouchStart?: (value: number) => void;
+    /**
+     * @description.zh 手指按下拖动时的回调函数
+     * @description.en Finger to press the drag of the callback function
+     * @default ''
+     */
+    onTouchMove?: (value: number) => void;
+    /**
+     * @description.zh 手指按下结束时的回调函数
+     * @description.en Finger press at the end of the callback function
+     * @default ''
+     */
+    onTouchEnd?: (value: number) => void;
+}

package/lib/props.js

@@ -0,0 +1 @@
+export {};

package/lib/res/index.d.ts

@@ -0,0 +1,5 @@
+declare const _default: {
+    ring: any;
+    colorBg: any;
+};
+export default _default;

package/lib/res/index.js

@@ -0,0 +1,6 @@
+import ring from './ring.png';
+import colorBg from './colorBg.png';
+export default {
+  ring: ring,
+  colorBg: colorBg
+};

package/lib/typings/index.d.ts

@@ -0,0 +1,15 @@
+declare module '*.less';
+declare module '*.rjs';
+declare module '*.png';
+declare global {
+  interface Window {
+    devToolsExtension?: () => any;
+    ty: Ty;
+  }
+}
+
+interface Ty {
+  [key]: any;
+}
+
+declare const ty: Ty;

package/lib/utils/index.d.ts

@@ -0,0 +1,8 @@
+declare const rgb2hsv: any, hsv2rgb: any;
+declare type HSL = {
+    h: number;
+    s: number;
+    l: number;
+};
+declare const rgbToHsl: (r: number, g: number, b: number) => HSL;
+export { rgbToHsl, rgb2hsv, hsv2rgb };

package/lib/utils/index.js

@@ -0,0 +1,41 @@
+import { utils } from '@ray-js/panel-sdk';
+var rgb2hsv = utils.rgb2hsv,
+  hsv2rgb = utils.hsv2rgb;
+/* eslint-disable no-param-reassign */
+var rgbToHsl = function (r, g, b) {
+  r /= 255;
+  g /= 255;
+  b /= 255;
+  var max = Math.max(r, g, b);
+  var min = Math.min(r, g, b);
+  var h;
+  var s;
+  var l = (max + min) / 2;
+  if (max === min) {
+    h = 0;
+    s = 0; // achromatic
+  } else {
+    var d = max - min;
+    s = l > 0.5 ? d / (2 - max - min) : d / (max + min);
+    switch (max) {
+      case r:
+        h = (g - b) / d + (g < b ? 6 : 0);
+        break;
+      case g:
+        h = (b - r) / d + 2;
+        break;
+      case b:
+        h = (r - g) / d + 4;
+        break;
+      default:
+        break;
+    }
+    h /= 6;
+  }
+  return {
+    h: h * 360,
+    s: s,
+    l: l
+  };
+};
+export { rgbToHsl, rgb2hsv, hsv2rgb };

package/package.json

@@ -0,0 +1,70 @@
+{
+  "name": "@ray-js/lamp-circle-picker",
+  "version": "1.1.1",
+  "description": "LampUnfilledCornerAnnulusPickerWhite",
+  "main": "lib/index",
+  "files": [
+    "lib"
+  ],
+  "license": "MIT",
+  "types": "lib/index.d.ts",
+  "maintainers": [
+    "tuya_npm",
+    {
+      "name": "tuyafe",
+      "email": "tuyafe@tuya.com"
+    }
+  ],
+  "scripts": {
+    "lint": "eslint src --ext .js,.jsx,.ts,.tsx --fix",
+    "build": "ray build --type=component",
+    "watch": "ray start --type=component",
+    "build:tuya": "ray build ./example --target=tuya",
+    "build:wechat": "ray build ./example --target=wechat",
+    "build:web": "ray build ./example --target=web",
+    "build:native": "ray build ./example --target=native",
+    "start:native": "ray start ./example -t native --verbose",
+    "start:tuya": "ray start ./example -t tuya --verbose",
+    "start:wechat": "ray start ./example -t wechat --verbose",
+    "start:web": "ray start ./example -t web",
+    "prepublishOnly": "yarn build",
+    "release-it": "standard-version"
+  },
+  "peerDependencies": {},
+  "devDependencies": {
+    "@commitlint/cli": "^7.2.1",
+    "@commitlint/config-conventional": "^9.0.1",
+    "@ray-js/babel-preset-standard": "^0.6.14",
+    "@ray-js/cli": "^0.6.14",
+    "@ray-js/components": "^0.6.14",
+    "@ray-js/framework": "^0.6.14",
+    "@ray-js/rn-transformer-helper": "^0.5.5",
+    "@ray-js/types": "^0.6.14",
+    "@types/node": "^17.0.43",
+    "core-js": "^3.19.1",
+    "eslint-config-tuya-panel": "^0.4.1",
+    "husky": "^1.2.0",
+    "lint-staged": "^10.2.11",
+    "standard-version": "9.3.2"
+  },
+  "husky": {
+    "hooks": {
+      "commit-msg": "commitlint -E HUSKY_GIT_PARAMS --config commitlint.config.js",
+      "pre-commit": "lint-staged"
+    }
+  },
+  "lint-staged": {
+    "*.{ts,tsx,js,jsx}": [
+      "eslint --fix",
+      "git add"
+    ],
+    "*.{json,md,yml,yaml}": [
+      "prettier --write",
+      "git add"
+    ]
+  },
+  "dependencies": {
+    "@ray-js/panel-sdk": "^1.1.4",
+    "clsx": "^1.2.1"
+  }
+}