@ray-js/lamp-circle-picker 1.0.13 → 1.0.14-beta.1

package/example/src/demoRjs/index.tyml

@@ -1,4 +1,4 @@
 <view 
-    class="container"
+    class="lamp-temp-circle-picker-container"
 >
 </view>

package/example/src/pages/index.tsx

@@ -44,7 +44,14 @@ export default function Home() {
   return (
     <View className={styles.view}>
       <DemoBlock title="基础用法">
-        <LampCirclePicker value={temperature} useEventChannel onTouchEnd={handleEnd} />
+        <LampCirclePicker
+          innerCircleStyle={{
+            backgroundColor: '#999',
+          }}
+          value={temperature}
+          useEventChannel
+          onTouchEnd={handleEnd}
+        />
       </DemoBlock>
 
       <DemoBlock title="HideThumb">

package/lib/component/index.module.less

@@ -1,4 +1,4 @@
-.thumb {
+.lamp-temp-circle-picker-thumb {
   position: absolute;
   width: 44rpx;
   height: 44rpx;

package/lib/component/rjs/index.tyml

@@ -1,14 +1,14 @@
-<view class="container" style="{{ containerStyle }}">
+<view class="lamp-temp-circle-picker-container" style="{{ containerStyle }}">
     <canvas
-        class="canvasWrapper"
+        class="lamp-temp-circle-picker-canvasWrapper"
         type="2d"
         canvas-id="{{ canvasId }}"
         disable-scroll="true"
         style="width: {{ radius * 2 }}px; height:  {{ radius * 2 }}px;"
     />
-    <view class="canvasPowerOffMask" style="position: absolute; top: 0; left: 0; width: {{ radius * 2 }}px; height:  {{ radius * 2 }}px;" ty:if="{{ maskVisible }}" />
+    <view class="lamp-temp-circle-picker-canvasPowerOffMask" style="position: absolute; top: 0; left: 0; width: {{ radius * 2 }}px; height:  {{ radius * 2 }}px;" ty:if="{{ maskVisible }}" />
     <canvas
-        class="canvasThumbWrapper"
+        class="lamp-temp-circle-picker-canvasThumbWrapper"
         type="2d"
         canvas-id="{{ canvasId }}_thumb"
         disable-scroll="true"

package/lib/component/rjs/index.tyss

@@ -1,20 +1,20 @@
-.container {
+.lamp-temp-circle-picker-container {
   position: relative;
 }
 
-.canvasWrapper {
+.lamp-temp-circle-picker-canvasWrapper {
   position: relative;
 }
-.canvasThumbWrapper {
+.lamp-temp-circle-picker-canvasThumbWrapper {
   z-index: 11;
 }
 
-.canvasPowerOffMask {
+.lamp-temp-circle-picker-canvasPowerOffMask {
   background-color: rgba(0, 0, 0, 0.5);
   transition: opacity 0.3s ease;
 }
 
-.thumb {
+.lamp-temp-circle-picker-thumb {
   position: absolute;
   width: 44rpx;
   height: 44rpx;
@@ -24,7 +24,7 @@
   box-shadow: 0 0 7px 0 rgba(0, 0, 0, 0.16);
 }
 
-.colorTipWrapper {
+.lamp-temp-circle-picker-colorTipWrapper {
   position: absolute;
   top: 12rpx;
   left: 12rpx;
@@ -42,7 +42,7 @@
   z-index: 999;
 }
 
-.colorTip {
+.lamp-temp-circle-picker-colorTip {
   color: #fff;
   font-size: 20rpx;
 }

package/lib/demoRjs/index.tyml

@@ -1,4 +1,4 @@
 <view 
-    class="container"
+    class="lamp-temp-circle-picker-container"
 >
 </view>

package/lib/demoRjs/index.tyss

@@ -1,4 +1,4 @@
-.container {
+.lamp-temp-circle-picker-container {
   position: relative;
   display: flex;
   align-items: center;

package/lib/index.d.ts

@@ -1,4 +1,5 @@
 import React from 'react';
+import './index.less';
 import { IProps } from './props';
 declare const LampCirclePicker: {
     (props: IProps): React.JSX.Element;

package/lib/index.js

@@ -5,7 +5,7 @@ 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';
+import './index.less';
 const LampCirclePicker = props => {
   const {
     value,
@@ -29,6 +29,7 @@ const LampCirclePicker = props => {
       width: 5,
       color: '#eee'
     },
+    innerCircleStyle = {},
     style,
     onTouchStart,
     onTouchMove,
@@ -50,26 +51,26 @@ const LampCirclePicker = props => {
     });
   }, [colorList]);
   return /*#__PURE__*/React.createElement(View, {
-    className: clsx(styled.container, styled.flexCenter),
+    className: clsx('lamp-temp-circle-picker-container', 'lamp-temp-circle-picker-flexCenter'),
     style: style
   }, showInnerCircle && /*#__PURE__*/React.createElement(View, {
-    className: clsx(styled.innerBox, styled.flexCenter)
+    className: clsx('lamp-temp-circle-picker-innerBox', 'lamp-temp-circle-picker-flexCenter')
   }, /*#__PURE__*/React.createElement(View, {
-    className: styled.ringIcon,
-    style: {
+    className: "lamp-temp-circle-picker-ringIcon",
+    style: _objectSpread({
       width: innerImgRadius,
       height: innerImgRadius,
       borderRadius: innerImgRadius,
       border: `${borderWidth}px solid ${borderColor}`,
       backgroundColor: innerCircleColor || 'transparent'
-    }
+    }, innerCircleStyle)
   }), /*#__PURE__*/React.createElement(View, {
-    className: clsx(styled.textBox, styled.flexCenter)
+    className: clsx('lamp-temp-circle-picker-textBox', 'lamp-temp-circle-picker-flexCenter')
   }, /*#__PURE__*/React.createElement(Text, {
-    className: styled.title,
+    className: "lamp-temp-circle-picker-title",
     style: titleStyle
   }, Math.trunc(_value / 10), "%"), /*#__PURE__*/React.createElement(Text, {
-    className: styled.desc,
+    className: "lamp-temp-circle-picker-desc",
     style: descStyle
   }, descText !== null && descText !== void 0 ? descText : Strings.getLang('temperature')))), /*#__PURE__*/React.createElement(AnnulusPickerColor, {
     canvasId: canvasId,

package/lib/{index.module.less → index.less}

@@ -1,21 +1,21 @@
-.container {
+.lamp-temp-circle-picker-container {
   position: relative;
 
-  .innerBox {
+  .lamp-temp-circle-picker-innerBox {
     width: 276rpx;
     position: absolute;
 
-    .ringIcon {
+    .lamp-temp-circle-picker-ringIcon {
       position: absolute;
       width: 276rpx;
       height: 276rpx;
     }
 
-    .textBox {
+    .lamp-temp-circle-picker-textBox {
       flex-direction: column;
       z-index: 100;
 
-      .title {
+      .lamp-temp-circle-picker-title {
         font-weight: 600;
         font-size: 28px;
         line-height: 39px;
@@ -23,7 +23,7 @@
         color: #FFFFFF;
       }
 
-      .desc {
+      .lamp-temp-circle-picker-desc {
         font-weight: 500;
         font-size: 13px;
         line-height: 18px;
@@ -34,9 +34,9 @@
   }
 }
 
-.flexCenter {
+.lamp-temp-circle-picker-flexCenter {
   display: flex;
   flex: 1;
   align-items: center;
   justify-content: center;
-}
+}

package/lib/props.d.ts

@@ -122,6 +122,13 @@ export interface IProps {
         color: string;
         width: number;
     };
+    /**
+     * @description.en innerCircleStyle
+     * @description.zh 内部圆环样式
+     * @default null
+     * @version 1.0.14
+     */
+    innerCircleStyle?: React.CSSProperties;
     /**
      * @description.en touchCircleStrokeStyle
      * @description.zh 触摸圆环描边颜色与 ctx.shadowColor 值相同

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ray-js/lamp-circle-picker",
-  "version": "1.0.13",
+  "version": "1.0.14-beta.1",
   "description": "照明缺角色环",
   "main": "lib/index",
   "files": [