@ray-js/lamp-style-slider 0.0.3-beta-5 → 0.0.3-beta-7

package/lib/index.js

@@ -9,6 +9,7 @@ import { formatPercent } from './utils';
 import styles from './index.module.less';
 import { defaultProps } from './props';
 function OpacitySlider(props) {
+  var _props$thumbColorForm, _props$thumbColorForm2;
   const preValue = useRef(-1);
   const lastValue = useRef(null);
   const timer = useRef(null);
@@ -62,7 +63,7 @@ function OpacitySlider(props) {
     wait: 80
   }).run;
   const endRefValue = useRef(-1);
-  const instanceId = useRef(`Color_${String(+new Date()).slice(-4)}_${String(Math.random()).slice(-2)}`);
+  const instanceId = useRef(`Color_${String(+new Date()).slice(-4)}_${String(Math.random()).slice(-10)}`);
   const [controllerValue, setControllerValue] = useState(-1);
   useEffect(() => {
     if (!isMove.current && value !== controllerValue) {
@@ -102,7 +103,7 @@ function OpacitySlider(props) {
       borderRadius: '28rpx'
     }, trackStyle)
   }, /*#__PURE__*/React.createElement(Slider, {
-    instanceId: instanceId.current,
+    instanceId: props.instanceId || instanceId.current,
     min: 0,
     max: max - min,
     disable: disable,
@@ -158,7 +159,11 @@ function OpacitySlider(props) {
       borderRadius: '50%',
       boxShadow: 'rgb(255 255 255 / 10%) 0px 0px 1px',
       background: `${disable ? '#000' : 'transparent'}`
-    }, thumbStyle))
+    }, thumbStyle)),
+    thumbStyleRenderFormatter: {
+      background: props === null || props === void 0 ? void 0 : (_props$thumbColorForm = props.thumbColorFormatterConfig) === null || _props$thumbColorForm === void 0 ? void 0 : _props$thumbColorForm.formatter
+    },
+    thumbStyleRenderValueScale: props === null || props === void 0 ? void 0 : (_props$thumbColorForm2 = props.thumbColorFormatterConfig) === null || _props$thumbColorForm2 === void 0 ? void 0 : _props$thumbColorForm2.scale
   })));
 }
 OpacitySlider.defaultProps = defaultProps;

package/lib/props.d.ts

@@ -1,5 +1,10 @@
 /// <reference types="react" />
 export interface IProps {
+    /**
+     * @description.en instanceId
+     * @description.zh 实例id
+     */
+    instanceId?: string;
     /**
      * @description.zh value文字样式
      * @description.en Value style
@@ -95,5 +100,14 @@ export interface IProps {
      * @default () => {}
      */
     onTouchEnd?: (value: number) => void;
+    /**
+     * @description.en style
+     * @description.zh 按钮hsv背景渲染,例如 "hsl(valuedeg 100% 50%)"
+     * @default null
+     */
+    thumbColorFormatterConfig?: {
+        formatter: string;
+        scale?: number;
+    };
 }
 export declare const defaultProps: IProps;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ray-js/lamp-style-slider",
-  "version": "0.0.3-beta-5",
+  "version": "0.0.3-beta-7",
   "description": "照明样式的基础滑动条",
   "main": "lib/index",
   "files": [
@@ -31,8 +31,8 @@
     "@commitlint/cli": "^7.2.1",
     "@commitlint/config-conventional": "^9.0.1",
     "@ray-js/babel-preset-standard": "^0.6.14",
-    "@ray-js/panel-sdk": "^1.1.4",
     "@ray-js/cli": "^1.4.9",
+    "@ray-js/panel-sdk": "^1.1.4",
     "@ray-js/ray": "^1.4.9",
     "@ray-js/rn-transformer-helper": "^0.5.5",
     "@types/node": "^17.0.43",
@@ -59,7 +59,7 @@
     ]
   },
   "dependencies": {
-    "@ray-js/components-ty-slider": "0.2.36-beta-3"
+    "@ray-js/components-ty-slider": "0.2.36-beta-6"
   },
   "maintainers": [
     {