@ray-js/lamp-circle-picker 1.0.0 → 1.0.2-beta-1

package/README.md

@@ -6,6 +6,10 @@ English | [简体中文](./README-zh_CN.md)
 
 > LampCirclePicker
 
+## Preview
+
+![avatar](https://images.tuyacn.com/smart/ui_design_pkg_icon/non-session-user/1667468836c2ddbd9815e.png)
+
 ## Installation
 
 ```sh
@@ -18,12 +22,6 @@ $ yarn add @ray-js/components-ty-lamp
 
 ```tsx
 interface IProps {
-  /**
-   * @description.zh 色盘id 唯一标识
-   * @description.en Color wheel id unique identification
-   * @default
-   */
-  canvasId: string;
   /**
    * @description.zh 默认数值
    * @description.en default value
@@ -76,7 +74,6 @@ interface IProps {
 ```
 
 ```tsx
-// 用法
 import { LampCirclePicker } from '@ray-js/components-ty-lamp';
 
 export default () => {
@@ -88,12 +85,7 @@ export default () => {
     setTemperature(v);
   };
   return (
-    <LampCirclePicker
-      canvasId="whiteRing"
-      temperature={temperature}
-      onTouchMove={handleMove}
-      onTouchEnd={handleEnd}
-    />
+    <LampCirclePicker temperature={temperature} onTouchMove={handleMove} onTouchEnd={handleEnd} />
   );
 };
 ```

package/lib/component/index.js

@@ -3,7 +3,6 @@ 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,

package/lib/component/props.d.ts

@@ -1,10 +1,4 @@
 export interface IProps {
-    /**
-     * @description.zh 色盘id 唯一标识
-     * @description.en Color wheel id unique identification
-     * @default
-     */
-    canvasId: string;
     /**
      * @description.zh 默认数值
      * @description.en default value

package/lib/component/props.js

@@ -9,6 +9,5 @@ export var defaultProps = {
   onTouchStart: nilFn,
   onTouchMove: nilFn,
   onTouchEnd: nilFn,
-  canvasId: 'AnnulusPickerColor',
   value: 0
 };

package/lib/component/rjs/index.js

@@ -1,4 +1,6 @@
 import "core-js/modules/es.number.constructor.js";
+import "core-js/modules/es.array.concat.js";
+import "core-js/modules/es.array.slice.js";
 import "core-js/modules/es.json.stringify.js";
 import Render from './indexRjs.rjs';
 import { getSystemInfo } from '@ray-js/api';
@@ -10,7 +12,6 @@ var ETipRectPosition = {
 // eslint-disable-next-line no-undef
 Component({
   properties: {
-    canvasId: String,
     containerStyle: String,
     radius: {
       type: Number,
@@ -37,10 +38,14 @@ Component({
     isTouch: false,
     touchType: '',
     colorText: '',
-    tipRectPosition: ETipRectPosition.LEFT
+    tipRectPosition: ETipRectPosition.LEFT,
+    canvasId: "canvasId_".concat(String(+new Date()).slice(-3), "_").concat(String(Math.random()).slice(-3))
   },
   observers: {
     'value.**': function value(v) {
+      if (this.touchType === 'move') {
+        return;
+      }
       if (Math.abs(this.lastValue / 10 - v / 10) > 1 || this.lastValue === 0 && v === 0) {
         this._updatePosByRgb(v);
         this.lastValue = v;

package/lib/component/rjs/index.tyml

@@ -1,15 +1,17 @@
-<view style="{{ containerStyle }}">
+<view class="container" style="{{ containerStyle }}">
     <canvas
         class="canvasWrapper"
         type="2d"
         canvas-id="{{ canvasId }}"
+        disable-scroll="true"
         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>
+    <canvas
+        class="canvasThumbWrapper"
+        type="2d"
+        canvas-id="{{ canvasId }}_thumb"
+        disable-scroll="true"
+        style="position: absolute; top: 0; left: 0; width: {{ radius * 2 }}px; height:  {{ radius * 2 }}px;"
+    ></canvas>
 </view>

package/lib/component/rjs/index.tyss

@@ -1,4 +1,6 @@
-.container {}
+.container {
+  position: relative;
+}
 
 .canvasWrapper {
   position: relative;

package/lib/index.d.ts

@@ -1,6 +1,5 @@
 /// <reference types="react" />
 interface IProps {
-    canvasId: string;
     isShowColorTip?: boolean;
     radius?: number;
     innerRingRadius?: number;

package/lib/index.js

@@ -10,7 +10,6 @@ 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,
@@ -19,7 +18,6 @@ var WhiteRing = function (props) {
   return /*#__PURE__*/React.createElement(View, {
     className: clsx(styled.container, styled.flexCenter)
   }, /*#__PURE__*/React.createElement(AnnulusPickerColor, {
-    canvasId: canvasId,
     value: temperature,
     radius: radius,
     innerRingRadius: innerRingRadius,

package/lib/props.d.ts

@@ -1,10 +1,4 @@
 export interface IProps {
-    /**
-     * @description.zh 色盘id 唯一标识
-     * @description.en Color wheel id unique identification
-     * @default
-     */
-    canvasId: string;
     /**
      * @description.zh 默认数值
      * @description.en default value

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@ray-js/lamp-circle-picker",
-  "version": "1.0.0",
-  "description": "LampUnfilledCornerAnnulusPickerWhite",
+  "version": "1.0.2-beta-1",
+  "description": "照明缺角色环",
   "main": "lib/index",
   "files": [
     "lib"