@ray-js/lamp-saturation-slider 1.1.4-beta-3 → 1.1.4-beta-5

package/lib/index.js

@@ -7,6 +7,7 @@ import { toStyle } from '@ray-js/components-ty-slider';
 import { hsvToRgb } from './utils';
 import { defaultProps } from './props';
 function LampSaturationSlider(props) {
+  var _trackStyle$width, _trackStyle$height;
   const preSaturation = useRef(-1);
   const lastSaturation = useRef(null);
   const timer = useRef(null);
@@ -24,7 +25,7 @@ function LampSaturationSlider(props) {
   } = props;
   const startRefValue = useRef(-1);
   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 [controllerSaturation, setControllerSaturation] = useState(-1);
   useEffect(() => {
     if (preSaturation.current !== saturation) {
@@ -40,16 +41,14 @@ function LampSaturationSlider(props) {
     style: {
       position: 'relative',
       background: '#fff',
-      width: `${646}rpx`,
-      height: `${88}rpx`,
+      width: typeof (trackStyle === null || trackStyle === void 0 ? void 0 : trackStyle.width) === 'number' ? trackStyle.width * 2 : (_trackStyle$width = trackStyle.width) !== null && _trackStyle$width !== void 0 ? _trackStyle$width : `${646}rpx`,
+      height: typeof (trackStyle === null || trackStyle === void 0 ? void 0 : trackStyle.height) === 'number' ? trackStyle.height * 2 : (_trackStyle$height = trackStyle.height) !== null && _trackStyle$height !== void 0 ? _trackStyle$height : `${88}rpx`,
       borderRadius: `${28}rpx`
     }
   }, /*#__PURE__*/React.createElement(Slider, {
-    instanceId: instanceId.current,
-    hue: hue,
+    instanceId: props.instanceId || instanceId.current,
     min: 0,
     max: 1000,
-    closed: closed,
     disable: disable,
     end: controllerSaturation,
     step: 1,
@@ -128,7 +127,13 @@ function LampSaturationSlider(props) {
       border: `9rpx solid #fff`,
       borderRadius: '28rpx',
       background: `${disable ? '#000' : 'transparent'}`
-    }, thumbStyle))
+    }, thumbStyle)),
+    thumbStyleRenderFormatter: {
+      background: `hsl(${props.hue}deg 100% value%)`
+    },
+    thumbStyleRenderValueScale: 0.05,
+    thumbStyleRenderValueStart: 50,
+    thumbStyleRenderValueReverse: true
   }));
 }
 LampSaturationSlider.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 禁止滑动
      * @description.en Ban sliding

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ray-js/lamp-saturation-slider",
-  "version": "1.1.4-beta-3",
+  "version": "1.1.4-beta-5",
   "description": "照明色温Slider",
   "main": "lib/index",
   "files": [
@@ -24,12 +24,15 @@
     "release-it": "standard-version",
     "copy": "sh copy.sh"
   },
-  "peerDependencies": {},
+  "peerDependencies": {
+    "@ray-js/panel-sdk": "^1.1.4"
+  },
   "devDependencies": {
     "@commitlint/cli": "^7.2.1",
     "@commitlint/config-conventional": "^9.0.1",
     "@ray-js/babel-preset-standard": "^0.6.14",
     "@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",
     "@ray-js/types": "^0.6.14",
@@ -57,8 +60,7 @@
     ]
   },
   "dependencies": {
-    "@ray-js/components-ty-slider": "0.2.36-beta-3",
-    "@ray-js/panel-sdk": "^1.1.4"
+    "@ray-js/components-ty-slider": "~0.2.36-beta-7"
   },
   "maintainers": [
     {