@ray-js/lamp-circle-picker 1.0.8-beta-2 → 1.0.9-beta-1

package/README.md

@@ -28,6 +28,14 @@ interface IProps {
    * @default
    */
   value: number;
+  /**
+   * @description.zh 色盘渐变颜色列表
+   * @description.en Color plate gradient color list
+   */
+  colorList?: {
+    offset: number;
+    color: string;
+  }[];
   /**
    * @description.zh 内部色环宽度
    * @description.en The width of inner color ring
@@ -76,6 +84,20 @@ interface IProps {
 ```
 
 ```tsx
+// Basic usage
+import { LampCirclePicker } from '@ray-js/components-ty-lamp';
+
+export default () => {
+  const [temperature, setTemperature] = useState(20);
+  const handleEnd = (v: number) => {
+    setTemperature(v);
+  };
+  return <LampCirclePicker value={temperature} innerRingRadius={80} onTouchEnd={handleEnd} />;
+};
+```
+
+```tsx
+// Advanced usage
 import { LampCirclePicker } from '@ray-js/components-ty-lamp';
 
 export default () => {
@@ -86,7 +108,35 @@ export default () => {
   const handleEnd = (v: number) => {
     setTemperature(v);
   };
-  return <LampCirclePicker value={temperature} onTouchMove={handleMove} onTouchEnd={handleEnd} />;
+  return (
+    <LampCirclePicker
+      value={temperature}
+      innerRingRadius={80}
+      // custom color(optional)
+      colorList={[
+        { offset: 0, color: '#ff0000' },
+        { offset: 0.5, color: '#00ff00' },
+        { offset: 1, color: '#0000ff' },
+      ]}
+      style={{
+        background: '#222',
+      }}
+      innerBorderStyle={{
+        width: 2,
+        color: 'pink',
+      }}
+      descText="temp"
+      descStyle={{
+        color: 'red',
+      }}
+      titleStyle={{
+        color: 'blue',
+      }}
+      useEventChannel
+      onTouchMove={handleMove}
+      onTouchEnd={handleEnd}
+    />
+  );
 };
 ```
 

package/example/src/app.config.ts

@@ -0,0 +1,20 @@
+// this file generate by @ray-js/build-plugin-router.
+// do not modify this file!!!
+export const thing = {
+  "window": {
+    "backgroundColor": "#f2f4f6",
+    "navigationBarTitleText": "涂鸦小程序示例",
+    "navigationBarBackgroundColor": "#f2f4f6",
+    "navigationBarTextStyle": "black"
+  },
+  "dependencies": {
+    "BaseKit": "2.0.5",
+    "DeviceKit": "2.0.5",
+    "MiniKit": "2.0.6",
+    "TYKit": "2.0.5"
+  },
+  "pages": [
+    "pages/index"
+  ]
+};
+

package/example/src/app.tsx

@@ -0,0 +1,42 @@
+import React from 'react';
+import './app.less';
+
+class App extends React.Component {
+  componentDidMount() {
+    console.info('app did mount');
+  }
+
+  onLaunch(object: any) {
+    console.log('app onLaunch', object);
+  }
+
+  onShow(object: any) {
+    console.log('app onShow', object);
+  }
+
+  onHide(object: any) {
+    console.log('app onHide', object);
+  }
+
+  onError(object: any) {
+    console.log('app onError', object);
+  }
+
+  onPageNotFound(object: any) {
+    console.log('app onPageNotFound', object);
+  }
+
+  onUnhandledRejection(object: any) {
+    console.log('app onUnhandledRejection', object);
+  }
+
+  onThemeChange(object: any) {
+    console.log('app onThemeChange', object);
+  }
+
+  render() {
+    return this.props.children;
+  }
+}
+
+export default App;

package/example/src/global.config.ts

@@ -0,0 +1,57 @@
+import { GlobalConfig } from '@ray-js/types';
+
+export const wechat = {
+  window: {
+    backgroundColor: '#f2f4f6',
+    navigationBarTitleText: 'Ray 小程序示例',
+    navigationBarBackgroundColor: '#f2f4f6',
+    navigationBarTextStyle: 'black',
+  },
+};
+
+export const web = {
+  window: {
+    backgroundColor: '#f2f4f6',
+    navigationBarTitleText: 'Ray Web App',
+  },
+};
+
+export const native = {
+  window: {
+    backgroundTextStyle: 'dark',
+    navigationBarBackgroundColor: '#fff',
+    navigationBarTitleText: '',
+    navigationBarTextStyle: 'black',
+    backgroundColorTop: 'red',
+    navigationStyle: 'custom',
+  },
+  pageWrapper: [],
+
+  dependencies: {
+    BaseKit: '2.0.5',
+    DeviceKit: '2.0.5',
+    MiniKit: '2.0.6',
+    TYKit: '2.0.5',
+  },
+};
+
+export const tuya = {
+  window: {
+    backgroundColor: '#f2f4f6',
+    navigationBarTitleText: '涂鸦小程序示例',
+    navigationBarBackgroundColor: '#f2f4f6',
+    navigationBarTextStyle: 'black',
+  },
+  dependencies: {
+    BaseKit: '2.0.5',
+    DeviceKit: '2.0.5',
+    MiniKit: '2.0.6',
+    TYKit: '2.0.5',
+  },
+};
+
+const globalConfig: GlobalConfig = {
+  basename: '',
+};
+
+export default globalConfig;

package/example/src/pages/index.config.ts

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

package/example/src/pages/index.module.less

@@ -0,0 +1,31 @@
+.view {
+  width: 100%;
+  flex: 1;
+  padding-bottom: 48rpx;
+}
+
+.demoBlock {
+  padding: 0 16px 20px;
+}
+
+.demoBlockTitle {
+  position: relative;
+  padding: 40rpx 32rpx 32rpx 0px;
+
+  .demoBlockTitleText {
+    color: rgba(0, 0, 0, 0.45);
+    font-size: 28rpx;
+    padding-left: 16rpx;
+  }
+
+  .demoBlockTitleText::before {
+    position: absolute;
+    content: '';
+    top: calc(50% - 2rpx);
+    left: 0;
+    width: 4rpx;
+    height: 4rpx;
+    border-radius: 50%;
+    background-color: rgba(0, 0, 0, 0.45);
+  }
+}

package/example/src/pages/index.tsx

@@ -0,0 +1,78 @@
+import React, { useState, useEffect } from 'react';
+import { View, Text } from '@ray-js/components';
+import LampCirclePicker from '../../../src/index';
+import DemoRjs from '../../../src/demoRjs';
+
+import styles from './index.module.less';
+
+const DemoBlock = ({ title, children }) => (
+  <View className={styles.demoBlock}>
+    <View className={styles.demoBlockTitle}>
+      <Text className={styles.demoBlockTitleText}>{title}</Text>
+    </View>
+    {children}
+  </View>
+);
+
+export default function Home() {
+  const [temperature, setTemperature] = useState(20);
+
+  const handleMove = (v: number) => {
+    setTemperature(v);
+  };
+
+  const handleEnd = (v: number) => {
+    setTemperature(v);
+  };
+  useEffect(() => {
+    setTimeout(() => {
+      setTemperature(500);
+    }, 3000);
+  }, []);
+
+  return (
+    <View className={styles.view}>
+      <DemoBlock title="基础用法">
+        <LampCirclePicker
+          value={temperature}
+          // innerRingRadius={60}
+          // radius={80}
+          useEventChannel
+          onTouchMove={handleMove}
+          onTouchEnd={handleEnd}
+        />
+      </DemoBlock>
+      <DemoBlock title="自定义色盘颜色">
+        <LampCirclePicker
+          value={temperature}
+          innerRingRadius={80}
+          showInnerCircle
+          colorList={[
+            { offset: 0, color: '#ff0000' },
+            { offset: 0.5, color: '#00ff00' },
+            { offset: 1, color: '#0000ff' },
+          ]}
+          style={{
+            background: '#222',
+          }}
+          innerBorderStyle={{
+            width: 2,
+            color: 'pink',
+          }}
+          descText="temp"
+          descStyle={{
+            color: 'red',
+          }}
+          titleStyle={{
+            color: 'blue',
+          }}
+          useEventChannel
+          onTouchMove={handleMove}
+          onTouchEnd={handleEnd}
+        />
+      </DemoBlock>
+
+      <DemoRjs />
+    </View>
+  );
+}

package/example/src/routes.config.ts

@@ -0,0 +1,11 @@
+import { Routes } from '@ray-js/types';
+
+export const routes: Routes = [
+  {
+    route: '/',
+    path: '/pages/index',
+    name: 'Page',
+  },
+];
+
+export const tabBar = {};

package/example/src/variables.less

@@ -0,0 +1,7 @@
+@primary-color: #ff592a;
+
+// font
+@font-gray-0: #040a23;
+@font-gray-1: #656979;
+@font-gray-2: #9aa0b1;
+@font-gray-3: #e1e5ec;

package/lib/component/index.config.js

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

package/lib/component/index.d.ts

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

package/lib/component/index.js

@@ -2,35 +2,27 @@
 import React from 'react';
 import RectColorPicker from './rjs';
 export default function RectColor(props) {
-  const canvasIdRef = React.useRef(props.canvasId || `canvasId_${String(+new Date()).slice(-3)}_${String(Math.random()).slice(-3)}`);
   return /*#__PURE__*/React.createElement(RectColorPicker, {
-    canvasId: canvasIdRef.current,
     radius: props.radius,
     innerRingRadius: props.innerRingRadius,
     value: props.value,
+    canvasId: props.canvasId,
+    colorList: props.colorList,
     useEventChannel: props.useEventChannel,
     eventChannelName: props.eventChannelName,
-    touchCircleStrokeStyle: props.touchCircleStrokeStyle,
-    touchCircleLineWidth: props.touchCircleLineWidth,
-    bindstart: e => {
-      const {
-        detail
-      } = e;
-      const temp = Math.floor(detail);
+    bindstart: function onTouchStart(e) {
+      var detail = e.detail;
+      var temp = Math.floor(detail);
       props.onTouchStart && props.onTouchStart(temp);
     },
-    bindmove: e => {
-      const {
-        detail
-      } = e;
-      const temp = Math.floor(detail);
+    bindmove: function onTouchMove(e) {
+      var detail = e.detail;
+      var temp = Math.floor(detail);
       props.onTouchMove && props.onTouchMove(temp);
     },
-    bindend: e => {
-      const {
-        detail
-      } = e;
-      const temp = Math.floor(detail);
+    bindend: function onTouchEnd(e) {
+      var detail = e.detail;
+      var temp = Math.floor(detail);
       props.onTouchEnd && props.onTouchEnd(temp);
     }
   });

package/lib/component/props.d.ts

@@ -23,6 +23,14 @@ export interface IProps {
      * @default false
      */
     useEventChannel?: boolean;
+    /**
+     * @description.zh 色盘渐变颜色列表
+     * @description.en Color plate gradient color list
+     */
+    colorList?: {
+        offset: number;
+        color: string;
+    }[];
     /**
      * @description.zh 事件通道名称
      * @description.en Event channel name
@@ -59,6 +67,5 @@ export interface IProps {
      * @default null
      */
     touchCircleLineWidth?: number;
-    canvasId?: string;
 }
 export declare const defaultProps: IProps;

package/lib/component/props.js

@@ -1,9 +1,21 @@
 // eslint-disable-next-line @typescript-eslint/explicit-module-boundary-types
-const nilFn = () => null;
-export const defaultProps = {
+var nilFn = function () {
+  return null;
+};
+export var defaultProps = {
   value: 0,
   innerRingRadius: 80,
   radius: 140,
+  colorList: [{
+    offset: 0,
+    color: '#FFCD65'
+  }, {
+    offset: 0.7,
+    color: '#FEECAB'
+  }, {
+    offset: 1,
+    color: '#CEEDFF'
+  }],
   useEventChannel: false,
   eventChannelName: 'lampCirclePickerEventChannel',
   onTouchStart: nilFn,

package/lib/component/rjs/index.js

@@ -1,6 +1,8 @@
+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';
-const ETipRectPosition = {
+var ETipRectPosition = {
   LEFT: 'LEFT',
   RIGHT: 'RIGHT'
 };
@@ -8,6 +10,7 @@ const ETipRectPosition = {
 // eslint-disable-next-line no-undef
 Component({
   properties: {
+    canvasId: String,
     containerStyle: {
       type: String,
       value: 'position: relative;'
@@ -16,6 +19,10 @@ Component({
       type: Number,
       value: 100
     },
+    colorList: {
+      type: Array,
+      value: []
+    },
     innerRingRadius: {
       type: Number,
       value: 50
@@ -33,12 +40,11 @@ Component({
       type: String,
       value: 'lampCirclePickerEventChannel'
     },
-    onTouchStart: Function,
-    onTouchMove: Function,
-    onTouchEnd: Function,
     touchCircleStrokeStyle: String,
     touchCircleLineWidth: Number,
-    canvasId: String
+    onTouchStart: Function,
+    onTouchMove: Function,
+    onTouchEnd: Function
   },
   data: {
     render: null,
@@ -48,7 +54,7 @@ Component({
     tipRectPosition: ETipRectPosition.LEFT
   },
   observers: {
-    'value.**'(v) {
+    'value.**': function value(v) {
       if (this.touchType === 'move') {
         return;
       }
@@ -59,85 +65,81 @@ Component({
     }
   },
   lifetimes: {
-    attached() {
+    attached: function attached() {
       this.render = new Render(this);
-      const {
-        radius,
-        innerRingRadius
-      } = this.data;
+      var _this$data = this.data,
+        radius = _this$data.radius,
+        innerRingRadius = _this$data.innerRingRadius;
       this.render._setCircles(radius, innerRingRadius);
     },
-    ready() {
-      const {
-        canvasId
-      } = this.data;
+    ready: function ready() {
+      var _this = this;
+      var canvasId = this.data.canvasId;
       this.initCanvas();
-      setTimeout(() => {
-        this.initCanvas();
-        this.render.checkIsRender(canvasId);
+      setTimeout(function () {
+        _this.initCanvas();
+        _this.render.checkIsRender(canvasId);
       }, 300);
     }
   },
   methods: {
-    getCanvas(canvas) {
+    getCanvas: function getCanvas(canvas) {
       if (JSON.stringify(canvas) === '{}') {
         this.initCanvas();
       }
     },
-    initCanvas() {
-      const {
-        canvasId,
-        radius,
-        innerRingRadius,
-        value = 0,
-        useEventChannel,
-        eventChannelName,
-        touchCircleStrokeStyle,
-        touchCircleLineWidth
-      } = this.data;
-      const ratio = getSystemInfo().pixelRatio || 2;
+    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,
-        eventChannelName,
-        touchCircleStrokeStyle,
-        touchCircleLineWidth
+        useEventChannel: useEventChannel,
+        eventChannelName: eventChannelName,
+        colorList: colorList,
+        touchCircleStrokeStyle: touchCircleStrokeStyle,
+        touchCircleLineWidth: touchCircleLineWidth
       });
+      // this._updatePosByRgb(value);
       this.lastValue = value;
     },
-    initedCanvas() {
-      const {
-        value = 0
-      } = this.data;
+    initedCanvas: function initedCanvas() {
+      var _this$data$value = this.data.value,
+        value = _this$data$value === void 0 ? 0 : _this$data$value;
       this._updatePosByRgb(value);
     },
-    _updatePosByRgb(value) {
+    _updatePosByRgb: function _updatePosByRgb(value) {
       var _this$render;
       if (value === undefined) {
         return;
       }
-      (_this$render = this.render) === null || _this$render === void 0 || _this$render._getAnglePositionByValue(value);
+      (_this$render = this.render) === null || _this$render === void 0 ? void 0 : _this$render._getAnglePositionByValue(value);
     },
-    _getRgb(x, y) {
+    _getRgb: function _getRgb(x, y) {
       var _this$render2;
-      (_this$render2 = this.render) === null || _this$render2 === void 0 || _this$render2.getAnnulusImageData(x, y);
+      (_this$render2 = this.render) === null || _this$render2 === void 0 ? void 0 : _this$render2.getAnnulusImageData(x, y);
     },
-    _getAnnulusImageData(dataRes) {
-      const {
-        position,
-        touchType
-      } = dataRes;
+    _getAnnulusImageData: function _getAnnulusImageData(dataRes) {
+      var position = dataRes.position,
+        touchType = dataRes.touchType;
       this.touchType = touchType;
-      const result = this._getLengthByAnglePosition(position.x, position.y);
+      var result = this._getLengthByAnglePosition(position.x, position.y);
       this.lastValue = result;
       this.triggerEvent(touchType, result);
     },
-    _getLengthByAnglePosition(x, y) {
-      const {
-        radius
-      } = this.data;
+    _getLengthByAnglePosition: function _getLengthByAnglePosition(x, y) {
+      var radius = this.data.radius;
       var radian = Math.atan2(y - radius, x - radius); // 弧度
       var angle = radian * (180 / Math.PI); // 角度
-      let angleData = 0;
+      var angleData = 0;
       if (+angle > 135 && +angle <= 180) {
         angleData = angle - 135;
       } else if (angle > -180 && angle <= 0) {
@@ -145,7 +147,7 @@ Component({
       } else if (angle > 0 && angle <= 45) {
         angleData = 225 + angle;
       }
-      const result = Math.round(angleData / 270 * 1000);
+      var result = Math.round(angleData / 270 * 1000);
       return result;
     }
   }

package/lib/component/rjs/index.rjs

@@ -39,17 +39,15 @@ export default Render({
       endAngle
     );
 
-    let grd = ctx.createRadialGradient(
-      0,
+    let grd = ctx.createConicGradient(
+      startAngle - Math.PI * 0.1,
       radius * 2,
       radius * 2,
-      radius * 4,
-      radius * 2,
-      radius * 2
     );
-    grd.addColorStop(0, '#FFCD65');
-    grd.addColorStop(0.7, '#FEECAB');
-    grd.addColorStop(1, '#CEEDFF');
+
+    options.colorList?.forEach((item) => {
+      grd.addColorStop(item.offset, item.color);
+    })
 
     //设定曲线粗细度
     ctx.lineWidth = (radius - innerRingRadius) * 2;
@@ -116,7 +114,7 @@ export default Render({
     ctx.shadowColor = 'rgba(0, 0, 0, 0.2)';
     ctx.fillStyle = 'rgb(' + rgb.r + ',' + rgb.g + ',' + rgb.b + ')';
     ctx.fill();
-
+  
     if(this.touchCircleStrokeStyle) {
       ctx.shadowColor = this.touchCircleStrokeStyle;
     }
@@ -192,13 +190,14 @@ export default Render({
       return { x: thumbPositionX, y: thumbPositionY };
     }
     if (angle > 115 && angle <= 135) {
-      // 修正在范围外的点击区域导致的取色问题
-      const _angle = 135;
-      const realAngle = ((180 - _angle) / 180) * Math.PI;
-      const thumbPositionY =
-        radius + (innerRingRadius + (radius - innerRingRadius) / 2) * Math.sin(realAngle);
-      const thumbPositionX =
-        radius - (innerRingRadius + (radius - innerRingRadius) / 2) * Math.cos(realAngle);
+        // 修正在范围外的点击区域导致的取色问题
+        const _angle = 135;
+        const realAngle = ((180 - _angle) / 180) * Math.PI;
+  
+      const thumbPositionY =  radius + (innerRingRadius + (radius - innerRingRadius) / 2) * Math.sin(realAngle);
+
+      const thumbPositionX = radius - (innerRingRadius + (radius - innerRingRadius) / 2) * Math.cos(realAngle);
+
       return { x: thumbPositionX, y: thumbPositionY };
     }
   },

package/lib/demoRjs/index.js

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

package/lib/demoRjs/index.rjs

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

package/lib/i18n/index.d.ts

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

package/lib/i18n/index.js

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

package/lib/index.config.js

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

package/lib/index.d.ts

@@ -1,10 +1,14 @@
-import React from 'react';
+/// <reference types="react" />
 import { IProps } from './props';
 declare const LampCirclePicker: {
-    (props: IProps): React.JSX.Element;
+    (props: IProps): JSX.Element;
     defaultProps: {
         radius: number;
         innerRingRadius: number;
+        colorList: {
+            offset: number;
+            color: string;
+        }[];
         useEventChannel: boolean;
         eventChannelName: string;
         titleStyle: {};

package/lib/index.js

@@ -1,56 +1,77 @@
-import React from 'react';
-import { View, Image, Text } from '@ray-js/components';
+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 React, { useMemo } from 'react';
+import { View, 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';
-const {
-  ring
-} = res;
-const LampCirclePicker = props => {
-  const {
-    value,
-    temperature,
-    radius,
-    innerRingRadius,
-    useEventChannel,
-    eventChannelName,
-    titleStyle,
-    descStyle,
-    style,
-    onTouchStart,
-    desc,
-    onTouchMove,
-    onTouchEnd,
-    showInnerCircle = true,
-    touchCircleLineWidth,
-    touchCircleStrokeStyle
-  } = props;
-  const innerImgRadius = innerRingRadius * 4 * 0.8;
-  const _value = value !== null && value !== void 0 ? value : temperature;
+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 ? {
+      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));
+  }, []);
+  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) {
+      return _objectSpread(_objectSpread({}, i), {}, {
+        offset: i.offset * 0.75
+      });
+    });
+  }, [colorList]);
   return /*#__PURE__*/React.createElement(View, {
     className: clsx(styled.container, styled.flexCenter),
     style: style
   }, /*#__PURE__*/React.createElement(AnnulusPickerColor, {
+    canvasId: canvasId,
     value: _value,
     radius: radius,
+    touchCircleLineWidth: touchCircleLineWidth,
+    touchCircleStrokeStyle: touchCircleStrokeStyle,
     innerRingRadius: innerRingRadius,
+    colorList: _colorList,
     useEventChannel: useEventChannel || false,
     eventChannelName: eventChannelName,
-    touchCircleLineWidth: touchCircleLineWidth,
-    touchCircleStrokeStyle: touchCircleStrokeStyle,
     onTouchStart: onTouchStart,
     onTouchMove: onTouchMove,
     onTouchEnd: onTouchEnd
   }), /*#__PURE__*/React.createElement(View, {
     className: clsx(styled.innerBox, styled.flexCenter)
-  }, showInnerCircle && /*#__PURE__*/React.createElement(Image, {
-    src: ring,
+  }, showInnerCircle && /*#__PURE__*/React.createElement(View, {
     className: styled.ringIcon,
     style: {
       width: innerImgRadius,
-      height: innerImgRadius
+      height: innerImgRadius,
+      borderRadius: innerImgRadius,
+      border: "".concat(borderWidth, "px solid ").concat(borderColor)
     }
   }), /*#__PURE__*/React.createElement(View, {
     className: clsx(styled.textBox, styled.flexCenter)
@@ -60,12 +81,24 @@ const LampCirclePicker = props => {
   }, Math.trunc(_value / 10), "%"), /*#__PURE__*/React.createElement(Text, {
     className: styled.desc,
     style: descStyle
-  }, desc || Strings.getLang('temperature')))));
+  }, descText !== null && descText !== void 0 ? descText : Strings.getLang('temperature')))));
+};
+var nilFn = function () {
+  return null;
 };
-const nilFn = () => null;
 LampCirclePicker.defaultProps = {
   radius: 140,
   innerRingRadius: 80,
+  colorList: [{
+    offset: 0,
+    color: '#FFCD65'
+  }, {
+    offset: 0.5,
+    color: '#FEECAB'
+  }, {
+    offset: 1,
+    color: '#CEEDFF'
+  }],
   useEventChannel: false,
   eventChannelName: 'lampCirclePickerEventChannel',
   titleStyle: {},

package/lib/props.d.ts

@@ -1,5 +1,13 @@
-/// <reference types="react" />
+import React from 'react';
 export interface IProps {
+    /**
+     * @description.en colorList
+     * @description.zh 色盘渐变颜色列表
+     */
+    colorList?: {
+        offset: number;
+        color: string;
+    }[];
     /**
      * @description.zh 默认数值
      * @description.en default value
@@ -66,6 +74,7 @@ export interface IProps {
      * @default null
      */
     titleStyle?: React.CSSProperties;
+    descText?: string;
     /**
      * @description.en descStyle
      * @description.zh 描述样式
@@ -78,21 +87,25 @@ export interface IProps {
      * @default null
      */
     style?: React.CSSProperties;
+    /**
+     * @description.en innerBorderStyle
+     * @description.zh 内部圆环描边
+     * @default null
+     */
+    innerBorderStyle?: {
+        color: string;
+        width: number;
+    };
     /**
      * @description.en touchCircleStrokeStyle
-     * @description.zh 触摸圆环描边颜色
+     * @description.zh 触摸圆环描边颜色与 ctx.shadowColor 值相同
      * @default null
      */
     touchCircleStrokeStyle?: string;
     /**
      * @description.en touchCircleLineWidth
-     * @description.zh 触摸圆环描边宽度
+     * @description.zh 触摸圆环描边宽度与 ctx.shadowBlur 值相同
      * @default null
      */
     touchCircleLineWidth?: number;
-    /**
-     * @description.en desc
-     * @description.zh 中间文案
-     */
-    desc?: string;
 }

package/lib/res/index.js

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

package/lib/utils/index.d.ts

@@ -1,5 +1,5 @@
 declare const rgb2hsv: any, hsv2rgb: any;
-type HSL = {
+declare type HSL = {
     h: number;
     s: number;
     l: number;

package/lib/utils/index.js

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

package/package.json

@@ -1,10 +1,11 @@
 {
   "name": "@ray-js/lamp-circle-picker",
-  "version": "1.0.8-beta-2",
+  "version": "1.0.9-beta-1",
   "description": "照明缺角色环",
   "main": "lib/index",
   "files": [
-    "lib"
+    "lib",
+    "example/src"
   ],
   "license": "MIT",
   "types": "lib/index.d.ts",
@@ -18,13 +19,13 @@
   "scripts": {
     "lint": "eslint src --ext .js,.jsx,.ts,.tsx --fix",
     "build": "ray build --type=component",
-    "watch": "ray start --type=component --output ./example/src/lib",
+    "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",
+    "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",
@@ -36,11 +37,14 @@
   "devDependencies": {
     "@commitlint/cli": "^7.2.1",
     "@commitlint/config-conventional": "^9.0.1",
-    "@ray-js/babel-preset-standard": "^0.4.11",
-    "@ray-js/cli": "^1.4.44",
-    "@ray-js/panel-sdk": "^1.12.0",
-    "@ray-js/ray": "^1.4.9",
-    "@ray-js/types": "^0.6.15",
+    "@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/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",
@@ -48,6 +52,10 @@
     "lint-staged": "^10.2.11",
     "standard-version": "9.3.2"
   },
+  "resolutions": {
+    "shell-quote": "~1.7.3",
+    "follow-redirects": "~1.15.6"
+  },
   "husky": {
     "hooks": {
       "commit-msg": "commitlint -E HUSKY_GIT_PARAMS --config commitlint.config.js",