@ray-js/lamp-circle-picker 1.0.10-beta-1 → 1.0.11-beta-1

package/README.md

@@ -87,13 +87,13 @@ interface IProps {
   /**
    * @description.en touchCircleStrokeStyle
    * @description.zh 触摸圆环描边颜色与 ctx.shadowColor 值相同
-   * @default null
+   * @default ''
    */
   touchCircleStrokeStyle?: string;
   /**
    * @description.en touchCircleLineWidth
    * @description.zh 触摸圆环描边宽度与 ctx.shadowBlur 值相同
-   * @default null
+   * @default 0
    */
   touchCircleLineWidth?: number;
   /**

package/example/src/demoRjs/index.json

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

package/example/src/demoRjs/index.rjs

@@ -0,0 +1,15 @@
+// src/demoRjs/index.rjs
+var demoRjs_default = Render({
+  renderChannel() {
+    try {
+      const eventChannelName = 'lampCirclePickerEventChannel';
+      this.instance.eventChannel.on(eventChannelName, e => {
+        console.warn('eventChannel get', e);
+      });
+    } catch (e) {
+      console.warn(e);
+    }
+  },
+});
+export { demoRjs_default as default };
+//# sourceMappingURL=data:application/json;base64,ewogICJ2ZXJzaW9uIjogMywKICAic291cmNlcyI6IFsiLi4vLi4vLi4vLi4vLi4vLi4vLi4vc3JjL2RlbW9SanMvaW5kZXgucmpzIl0sCiAgInNvdXJjZXNDb250ZW50IjogWyJleHBvcnQgZGVmYXVsdCBSZW5kZXIoe1xuICByZW5kZXJDaGFubmVsKCkge1xuICAgIHRyeSB7XG4gICAgICBjb25zdCBldmVudENoYW5uZWxOYW1lID0gJ2xhbXBDaXJjbGVQaWNrZXJFdmVudENoYW5uZWwnO1xuICAgICAgY29uc29sZS5sb2codGhpcy5pbnN0YW5jZSwgJ3RoaXMuaW5zdGFuY2V0aGlzLmluc3RhbmNlJyk7XG4gICAgICB0aGlzLmluc3RhbmNlLmV2ZW50Q2hhbm5lbC5vbihldmVudENoYW5uZWxOYW1lLCBlID0+IHtcbiAgICAgICAgY29uc29sZS53YXJuKCdldmVudENoYW5uZWwgZ2V0JywgZSk7XG4gICAgICB9KTtcbiAgICB9IGNhdGNoIChlKSB7XG4gICAgICBjb25zb2xlLndhcm4oZSk7XG4gICAgfVxuICB9LFxufSk7XG4iXSwKICAibWFwcGluZ3MiOiAiO0FBQUEsSUFBTyxrQkFBUSxPQUFPO0FBQUEsRUFDcEIsZ0JBQWdCO0FBQ2QsUUFBSTtBQUNGLFlBQU0sbUJBQW1CO0FBQ3pCLGNBQVEsSUFBSSxLQUFLLFVBQVUsNEJBQTRCO0FBQ3ZELFdBQUssU0FBUyxhQUFhLEdBQUcsa0JBQWtCLE9BQUs7QUFDbkQsZ0JBQVEsS0FBSyxvQkFBb0IsQ0FBQztBQUFBLE1BQ3BDLENBQUM7QUFBQSxJQUNILFNBQVMsR0FBRztBQUNWLGNBQVEsS0FBSyxDQUFDO0FBQUEsSUFDaEI7QUFBQSxFQUNGO0FBQ0YsQ0FBQzsiLAogICJuYW1lcyI6IFtdCn0K

package/example/src/demoRjs/index.tyml

@@ -0,0 +1,4 @@
+<view 
+    class="container"
+>
+</view>

package/example/src/pages/index.tsx

@@ -35,13 +35,21 @@ export default function Home() {
       <DemoBlock title="基础用法">
         <LampCirclePicker
           value={temperature}
-          // innerRingRadius={60}
-          // radius={80}
           useEventChannel
           onTouchMove={handleMove}
           onTouchEnd={handleEnd}
         />
       </DemoBlock>
+
+      <DemoBlock title="HideThumb">
+        <LampCirclePicker
+          value={temperature}
+          useEventChannel
+          hideThumb
+          onTouchMove={handleMove}
+          onTouchEnd={handleEnd}
+        />
+      </DemoBlock>
       <DemoBlock title="自定义色盘颜色">
         <LampCirclePicker
           value={temperature}
@@ -53,7 +61,7 @@ export default function Home() {
             { offset: 1, color: '#0000ff' },
           ]}
           style={{
-            background: '#222',
+            background: '#ddd',
           }}
           innerBorderStyle={{
             width: 2,

package/lib/component/index.config.js

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

package/lib/component/index.d.ts

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

package/lib/component/index.js

@@ -1,30 +1,42 @@
 /* eslint-disable prettier/prettier */
 import React from 'react';
 import RectColorPicker from './rjs';
+import { useStdPx2Adapt } from '../hooks';
 export default function RectColor(props) {
+  var _props$hideThumb, _props$colorList;
+  const radius = useStdPx2Adapt(props.radius);
+  const innerRingRadius = useStdPx2Adapt(props.innerRingRadius);
+  const touchCircleLineWidth = useStdPx2Adapt(props.touchCircleLineWidth);
   return /*#__PURE__*/React.createElement(RectColorPicker, {
-    radius: props.radius,
-    innerRingRadius: props.innerRingRadius,
+    radius: radius,
+    innerRingRadius: innerRingRadius,
     value: props.value,
+    hideThumb: (_props$hideThumb = props.hideThumb) !== null && _props$hideThumb !== void 0 ? _props$hideThumb : false,
     canvasId: props.canvasId,
-    colorList: props.colorList,
+    colorList: (_props$colorList = props.colorList) !== null && _props$colorList !== void 0 ? _props$colorList : [],
     useEventChannel: props.useEventChannel,
     eventChannelName: props.eventChannelName,
     touchCircleStrokeStyle: props.touchCircleStrokeStyle,
-    touchCircleLineWidth: props.touchCircleLineWidth,
-    bindstart: function onTouchStart(e) {
-      var detail = e.detail;
-      var temp = Math.floor(detail);
+    touchCircleLineWidth: touchCircleLineWidth,
+    bindstart: e => {
+      const {
+        detail
+      } = e;
+      const temp = Math.floor(detail);
       props.onTouchStart && props.onTouchStart(temp);
     },
-    bindmove: function onTouchMove(e) {
-      var detail = e.detail;
-      var temp = Math.floor(detail);
+    bindmove: e => {
+      const {
+        detail
+      } = e;
+      const temp = Math.floor(detail);
       props.onTouchMove && props.onTouchMove(temp);
     },
-    bindend: function onTouchEnd(e) {
-      var detail = e.detail;
-      var temp = Math.floor(detail);
+    bindend: e => {
+      const {
+        detail
+      } = e;
+      const temp = Math.floor(detail);
       props.onTouchEnd && props.onTouchEnd(temp);
     }
   });

package/lib/component/props.d.ts

@@ -1,10 +1,22 @@
 export interface IProps {
+    /**
+     * @description.zh canvasId
+     * @description.en canvasId
+     * @default
+     */
+    canvasId: string;
     /**
      * @description.zh 默认数值
      * @description.en default value
      * @default
      */
     value: number;
+    /**
+     * @description.zh 是否隐藏拖拽圆环
+     * @description.en Whether to hide the drag ring
+     * @default false
+     */
+    hideThumb: boolean;
     /**
      * @description.zh 内部色环宽度
      * @description.en Drag the color ring width
@@ -58,13 +70,13 @@ export interface IProps {
     /**
      * @description.en touchCircleStrokeStyle
      * @description.zh 触摸圆环描边颜色
-     * @default null
+     * @default ''
      */
     touchCircleStrokeStyle?: string;
     /**
      * @description.en touchCircleLineWidth
      * @description.zh 触摸圆环描边宽度
-     * @default null
+     * @default 0
      */
     touchCircleLineWidth?: number;
 }

package/lib/component/props.js

@@ -1,8 +1,6 @@
 // eslint-disable-next-line @typescript-eslint/explicit-module-boundary-types
-var nilFn = function () {
-  return null;
-};
-export var defaultProps = {
+const nilFn = () => null;
+export const defaultProps = {
   value: 0,
   innerRingRadius: 80,
   radius: 140,

package/lib/component/rjs/index.js

@@ -1,8 +1,5 @@
-import "core-js/modules/es.number.constructor.js";
-import "core-js/modules/es.json.stringify.js";
 import Render from './index.rjs';
-import { getSystemInfo } from '@ray-js/api';
-var ETipRectPosition = {
+const ETipRectPosition = {
   LEFT: 'LEFT',
   RIGHT: 'RIGHT'
 };
@@ -11,6 +8,10 @@ var ETipRectPosition = {
 Component({
   properties: {
     canvasId: String,
+    hideThumb: {
+      type: Boolean,
+      value: false
+    },
     containerStyle: {
       type: String,
       value: 'position: relative;'
@@ -54,7 +55,7 @@ Component({
     tipRectPosition: ETipRectPosition.LEFT
   },
   observers: {
-    'value.**': function value(v) {
+    'value.**'(v) {
       if (this.touchType === 'move') {
         return;
       }
@@ -65,81 +66,88 @@ Component({
     }
   },
   lifetimes: {
-    attached: function attached() {
+    attached() {
       this.render = new Render(this);
-      var _this$data = this.data,
-        radius = _this$data.radius,
-        innerRingRadius = _this$data.innerRingRadius;
+      const {
+        radius,
+        innerRingRadius
+      } = this.data;
       this.render._setCircles(radius, innerRingRadius);
     },
-    ready: function ready() {
-      var _this = this;
-      var canvasId = this.data.canvasId;
+    ready() {
+      const {
+        canvasId
+      } = this.data;
       this.initCanvas();
-      setTimeout(function () {
-        _this.initCanvas();
-        _this.render.checkIsRender(canvasId);
+      setTimeout(() => {
+        this.initCanvas();
+        this.render.checkIsRender(canvasId);
       }, 300);
     }
   },
   methods: {
-    getCanvas: function getCanvas(canvas) {
+    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,
-        useEventChannel = _this$data2.useEventChannel,
-        eventChannelName = _this$data2.eventChannelName,
-        colorList = _this$data2.colorList,
-        touchCircleStrokeStyle = _this$data2.touchCircleStrokeStyle,
-        touchCircleLineWidth = _this$data2.touchCircleLineWidth;
-      var ratio = getSystemInfo().pixelRatio || 2;
-      canvasId && this.render.renderAnnulusColor(canvasId, radius, innerRingRadius, ratio, {
-        useEventChannel: useEventChannel,
-        eventChannelName: eventChannelName,
-        colorList: colorList,
-        touchCircleStrokeStyle: touchCircleStrokeStyle,
-        touchCircleLineWidth: touchCircleLineWidth
+    initCanvas() {
+      const {
+        canvasId,
+        radius,
+        innerRingRadius,
+        value = 0,
+        hideThumb = false,
+        useEventChannel,
+        eventChannelName,
+        colorList,
+        touchCircleStrokeStyle = '',
+        touchCircleLineWidth = 0
+      } = this.data;
+      canvasId && this.render.renderAnnulusColor(canvasId, radius, innerRingRadius, value, {
+        useEventChannel,
+        eventChannelName,
+        hideThumb,
+        colorList,
+        touchCircleStrokeStyle,
+        touchCircleLineWidth
       });
-      // this._updatePosByRgb(value);
       this.lastValue = value;
     },
-    initedCanvas: function initedCanvas() {
-      var _this$data$value = this.data.value,
-        value = _this$data$value === void 0 ? 0 : _this$data$value;
-      this._updatePosByRgb(value);
+    initedCanvas() {
+      const {
+        value
+      } = this.data;
+      value !== undefined && this._updatePosByRgb(value);
     },
-    _updatePosByRgb: function _updatePosByRgb(value) {
+    _updatePosByRgb(value) {
       var _this$render;
       if (value === undefined) {
         return;
       }
-      (_this$render = this.render) === null || _this$render === void 0 ? void 0 : _this$render._getAnglePositionByValue(value);
+      (_this$render = this.render) === null || _this$render === void 0 || _this$render._getAnglePositionByValue(value);
     },
-    _getRgb: function _getRgb(x, y) {
+    _getRgb(x, y) {
       var _this$render2;
-      (_this$render2 = this.render) === null || _this$render2 === void 0 ? void 0 : _this$render2.getAnnulusImageData(x, y);
+      (_this$render2 = this.render) === null || _this$render2 === void 0 || _this$render2.getAnnulusImageData(x, y);
     },
-    _getAnnulusImageData: function _getAnnulusImageData(dataRes) {
-      var position = dataRes.position,
-        touchType = dataRes.touchType;
+    _getAnnulusImageData(dataRes) {
+      const {
+        position,
+        touchType
+      } = dataRes;
       this.touchType = touchType;
-      var result = this._getLengthByAnglePosition(position.x, position.y);
+      const result = this._getLengthByAnglePosition(position.x, position.y);
       this.lastValue = result;
       this.triggerEvent(touchType, result);
     },
-    _getLengthByAnglePosition: function _getLengthByAnglePosition(x, y) {
-      var radius = this.data.radius;
+    _getLengthByAnglePosition(x, y) {
+      const {
+        radius
+      } = this.data;
       var radian = Math.atan2(y - radius, x - radius); // 弧度
       var angle = radian * (180 / Math.PI); // 角度
-      var angleData = 0;
+      let angleData = 0;
       if (+angle > 135 && +angle <= 180) {
         angleData = angle - 135;
       } else if (angle > -180 && angle <= 0) {
@@ -147,7 +155,7 @@ Component({
       } else if (angle > 0 && angle <= 45) {
         angleData = 225 + angle;
       }
-      var result = Math.round(angleData / 270 * 1000);
+      const result = Math.round(angleData / 270 * 1000);
       return result;
     }
   }

package/lib/component/rjs/index.rjs

@@ -7,9 +7,10 @@ export default Render({
   // 环形色盘
   async renderAnnulusColor(id, radius, innerRingRadius, temp = 0, options = {}) {
     let canvas = null;
-    const { touchCircleStrokeStyle, touchCircleLineWidth } = options || {};
+    const { touchCircleStrokeStyle = '', touchCircleLineWidth = 0, hideThumb = false } = options || {};
     this.touchCircleStrokeStyle = touchCircleStrokeStyle;
     this.touchCircleLineWidth = touchCircleLineWidth;
+    this.hideThumb = hideThumb;
 
     try {
       canvas = await getCanvasById(id);
@@ -59,10 +60,13 @@ export default Render({
     canvas.style.width = `${radius * 2}px`;
     canvas.style.height = `${radius * 2}px`;
     this.annulusContext = ctx;
-    this.renderAnnulusColorThumb(id, temp);
+    !this.hideThumb && this.renderAnnulusColorThumb(id, temp);
     this.callMethod('initedCanvas', {});
   },
   async renderAnnulusColorThumb(id, temp = 0) {
+    if (!this.hideThumb) {
+      return;
+    }
     if (!this.canvasThumb) {
       this.canvasThumb = await getCanvasById(`${id}_thumb`);
       this.canvasThumbCtx = this.canvasThumb.getContext('2d');
@@ -94,6 +98,9 @@ export default Render({
     this.updateThumbPosition(x, y, { r: data[0], g: data[1], b: data[2] });
   },
   updateThumbPosition(x, y, rgb) {
+    if (!this.hideThumb) {
+      return;
+    }
     if (!this.canvasThumb) {
       console.error('canvasThumb not found');
       return;
@@ -223,6 +230,10 @@ export default Render({
     this._getRgb(validXY.x, validXY.y);
   },
   handleCanvasMoveEvent(evt) {
+    if (!this.hideThumb) {
+      return;
+    }
+
     this.touchType = 'move';
     const { changedTouches } = evt;
     const [point] = changedTouches;
@@ -234,11 +245,17 @@ export default Render({
     this._getRgb(validXY.x, validXY.y);
   },
   addEventListeners() {
+    if (!this.hideThumb) {
+      return;
+    }
     this.canvasThumb.addEventListener('touchstart', this.handleCanvasStartEvent, false);
     this.canvasThumb.addEventListener('touchmove', this.handleCanvasMoveEvent, false);
     this.canvasThumb.addEventListener('touchend', this.handleCanvasEndEvent, false);
   },
   removeEventListeners() {
+    if (!this.hideThumb) {
+      return;
+    }
     this.canvasThumb.removeEventListener('touchstart', this.handleCanvasStartEvent);
     this.canvasThumb.removeEventListener('touchmove', this.handleCanvasMoveEvent);
     this.canvasThumb.removeEventListener('touchend', this.handleCanvasEndEvent);

package/lib/demoRjs/index.js

@@ -2,7 +2,7 @@
 import Render from './index.rjs';
 Component({
   lifetimes: {
-    ready: function ready() {
+    ready() {
       this.render = new Render(this);
       this.render.renderChannel();
     }

package/lib/demoRjs/index.rjs

@@ -2,7 +2,6 @@ export default Render({
   renderChannel() {
     try {
       const eventChannelName = 'lampCirclePickerEventChannel';
-      console.log(this.instance, 'this.instancethis.instance');
       this.instance.eventChannel.on(eventChannelName, e => {
         console.warn('eventChannel get', e);
       });

package/lib/hooks.d.ts

@@ -0,0 +1,7 @@
+/**
+ * @description 将标准像素转换为适配后的像素
+ * @param stdPx 标准像素
+ * @param toFixed 保留小数点后几位
+ * @returns 适配后的像素
+ */
+export declare const useStdPx2Adapt: (stdPx: number, toFixed?: number) => number;

package/lib/hooks.js

@@ -0,0 +1,15 @@
+import { useMemo } from 'react';
+import { getSystemCacheInfo } from './utils';
+/**
+ * @description 将标准像素转换为适配后的像素
+ * @param stdPx 标准像素
+ * @param toFixed 保留小数点后几位
+ * @returns 适配后的像素
+ */
+export const useStdPx2Adapt = function (stdPx) {
+  let toFixed = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 2;
+  const {
+    screenWidth
+  } = useMemo(() => getSystemCacheInfo(), [stdPx]);
+  return +(stdPx * (screenWidth / 375)).toFixed(toFixed) || stdPx;
+};

package/lib/i18n/index.d.ts

@@ -1,3 +1,14 @@
 import { kit } from '@ray-js/panel-sdk';
-declare const _default: kit.I18N;
+declare const _default: kit.I18N<{
+    en: {
+        temperature: string;
+    };
+    zh: {
+        temperature: string;
+    };
+}, {
+    temperature: string;
+} | {
+    temperature: string;
+}>;
 export default _default;

package/lib/i18n/index.js

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

package/lib/index.config.js

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

package/lib/index.d.ts

@@ -1,7 +1,7 @@
-/// <reference types="react" />
+import React from 'react';
 import { IProps } from './props';
 declare const LampCirclePicker: {
-    (props: IProps): JSX.Element;
+    (props: IProps): React.JSX.Element;
     defaultProps: {
         radius: number;
         innerRingRadius: number;

package/lib/index.js

@@ -1,47 +1,45 @@
 import _objectSpread from "@babel/runtime/helpers/esm/objectSpread2";
-import "core-js/modules/es.array.concat.js";
-import "core-js/modules/es.array.slice.js";
-import "core-js/modules/es.array.map.js";
-import "core-js/modules/es.math.trunc.js";
+import "core-js/modules/esnext.iterator.map.js";
 import React, { useMemo } from 'react';
 import { View, Text } from '@ray-js/components';
 import clsx from 'clsx';
 import Strings from './i18n';
 import AnnulusPickerColor from './component';
 import styled from './index.module.less';
-var LampCirclePicker = function (props) {
-  var value = props.value,
-    temperature = props.temperature,
-    radius = props.radius,
-    innerRingRadius = props.innerRingRadius,
-    colorList = props.colorList,
-    useEventChannel = props.useEventChannel,
-    eventChannelName = props.eventChannelName,
-    titleStyle = props.titleStyle,
-    descStyle = props.descStyle,
-    descText = props.descText,
-    _props$showInnerCircl = props.showInnerCircle,
-    showInnerCircle = _props$showInnerCircl === void 0 ? true : _props$showInnerCircl,
-    touchCircleLineWidth = props.touchCircleLineWidth,
-    touchCircleStrokeStyle = props.touchCircleStrokeStyle,
-    _props$innerBorderSty = props.innerBorderStyle,
-    innerBorderStyle = _props$innerBorderSty === void 0 ? {
+const LampCirclePicker = props => {
+  const {
+    value,
+    hideThumb,
+    temperature,
+    radius,
+    innerRingRadius,
+    colorList,
+    useEventChannel,
+    eventChannelName,
+    titleStyle,
+    descStyle,
+    descText,
+    showInnerCircle = true,
+    touchCircleLineWidth = 0,
+    touchCircleStrokeStyle = '',
+    innerBorderStyle = {
       width: 5,
       color: '#eee'
-    } : _props$innerBorderSty,
-    style = props.style,
-    onTouchStart = props.onTouchStart,
-    onTouchMove = props.onTouchMove,
-    onTouchEnd = props.onTouchEnd;
-  var innerImgRadius = innerRingRadius * 4 * 0.8;
-  var _value = value !== null && value !== void 0 ? value : temperature;
-  var canvasId = useMemo(function () {
-    return "canvasId_".concat(String(+new Date()).slice(-3), "_").concat(String(Math.random()).slice(-3));
+    },
+    style,
+    onTouchStart,
+    onTouchMove,
+    onTouchEnd
+  } = props;
+  const innerImgRadius = innerRingRadius * 4 * 0.8;
+  const _value = value !== null && value !== void 0 ? value : temperature;
+  const canvasId = useMemo(() => {
+    return `canvasId_${String(+new Date()).slice(-3)}_${String(Math.random()).slice(-3)}`;
   }, []);
-  var borderWidth = innerBorderStyle === null || innerBorderStyle === void 0 ? void 0 : innerBorderStyle.width;
-  var borderColor = innerBorderStyle === null || innerBorderStyle === void 0 ? void 0 : innerBorderStyle.color;
-  var _colorList = useMemo(function () {
-    return colorList.map(function (i) {
+  const borderWidth = innerBorderStyle === null || innerBorderStyle === void 0 ? void 0 : innerBorderStyle.width;
+  const borderColor = innerBorderStyle === null || innerBorderStyle === void 0 ? void 0 : innerBorderStyle.color;
+  const _colorList = useMemo(() => {
+    return colorList.map(i => {
       return _objectSpread(_objectSpread({}, i), {}, {
         offset: i.offset * 0.75
       });
@@ -52,6 +50,7 @@ var LampCirclePicker = function (props) {
     style: style
   }, /*#__PURE__*/React.createElement(AnnulusPickerColor, {
     canvasId: canvasId,
+    hideThumb: hideThumb,
     value: _value,
     radius: radius,
     touchCircleLineWidth: touchCircleLineWidth,
@@ -71,7 +70,7 @@ var LampCirclePicker = function (props) {
       width: innerImgRadius,
       height: innerImgRadius,
       borderRadius: innerImgRadius,
-      border: "".concat(borderWidth, "px solid ").concat(borderColor)
+      border: `${borderWidth}px solid ${borderColor}`
     }
   }), /*#__PURE__*/React.createElement(View, {
     className: clsx(styled.textBox, styled.flexCenter)
@@ -83,9 +82,7 @@ var LampCirclePicker = function (props) {
     style: descStyle
   }, descText !== null && descText !== void 0 ? descText : Strings.getLang('temperature')))));
 };
-var nilFn = function () {
-  return null;
-};
+const nilFn = () => null;
 LampCirclePicker.defaultProps = {
   radius: 140,
   innerRingRadius: 80,

package/lib/props.d.ts

@@ -14,6 +14,12 @@ export interface IProps {
      * @default
      */
     value: number;
+    /**
+     * @description.zh 是否隐藏拖拽圆环
+     * @description.en Whether to hide the drag ring
+     * @default false
+     */
+    hideThumb: boolean;
     /**
      * @description.en temperature
      * @description.zh 色温
@@ -99,13 +105,13 @@ export interface IProps {
     /**
      * @description.en touchCircleStrokeStyle
      * @description.zh 触摸圆环描边颜色与 ctx.shadowColor 值相同
-     * @default null
+     * @default '
      */
     touchCircleStrokeStyle?: string;
     /**
      * @description.en touchCircleLineWidth
      * @description.zh 触摸圆环描边宽度与 ctx.shadowBlur 值相同
-     * @default null
+     * @default 0
      */
     touchCircleLineWidth?: number;
 }

package/lib/res/index.js

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

package/lib/utils/index.d.ts

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

package/lib/utils/index.js

@@ -1,21 +1,24 @@
 import { utils } from '@ray-js/panel-sdk';
-var rgb2hsv = utils.rgb2hsv,
-  hsv2rgb = utils.hsv2rgb;
+import { getSystemInfoSync } from '@ray-js/ray';
+const {
+  rgb2hsv,
+  hsv2rgb
+} = utils;
 /* eslint-disable no-param-reassign */
-var rgbToHsl = function (r, g, b) {
+const rgbToHsl = (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;
+  const max = Math.max(r, g, b);
+  const min = Math.min(r, g, b);
+  let h;
+  let s;
+  const l = (max + min) / 2;
   if (max === min) {
     h = 0;
     s = 0; // achromatic
   } else {
-    var d = max - min;
+    const d = max - min;
     s = l > 0.5 ? d / (2 - max - min) : d / (max + min);
     switch (max) {
       case r:
@@ -34,8 +37,15 @@ var rgbToHsl = function (r, g, b) {
   }
   return {
     h: h * 360,
-    s: s,
-    l: l
+    s,
+    l
   };
 };
+let __systemCacheInfo = null;
+export const getSystemCacheInfo = () => {
+  if (!__systemCacheInfo) {
+    __systemCacheInfo = getSystemInfoSync();
+  }
+  return __systemCacheInfo;
+};
 export { rgbToHsl, rgb2hsv, hsv2rgb };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ray-js/lamp-circle-picker",
-  "version": "1.0.10-beta-1",
+  "version": "1.0.11-beta-1",
   "description": "照明缺角色环",
   "main": "lib/index",
   "files": [
@@ -18,16 +18,9 @@
   ],
   "scripts": {
     "lint": "eslint src --ext .js,.jsx,.ts,.tsx --fix",
+    "dev": "yarn start:tuya",
     "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",
+    "start:tuya": "ray start ./example",
     "prepublishOnly": "yarn build",
     "release-it": "standard-version"
   },
@@ -37,12 +30,10 @@
   "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.16",
-    "@ray-js/ray": "^0.6.14",
-    "@ray-js/components": "^0.6.14",
-    "@ray-js/framework": "^0.6.14",
-    "@ray-js/panel-sdk": "^1.1.4",
+    "@ray-js/babel-preset-standard": "^1.5.45",
+    "@ray-js/cli": "^1.5.45",
+    "@ray-js/panel-sdk": "^1.13.1",
+    "@ray-js/ray": "^1.5.45",
     "@ray-js/rn-transformer-helper": "^0.5.5",
     "@ray-js/types": "^0.6.14",
     "@types/node": "^17.0.43",