@ray-js/lamp-saturation-slider 0.0.2-beta-1 → 1.1.0

package/lib/components/slider/index.tyml

@@ -0,0 +1,89 @@
+<sjs src="./index.sjs" module="computed"></sjs>
+
+<view 
+  id="{{instanceId}}"
+  class="rayui-slider {{direction === 'vertical' ? 'vertical': 'horizontal'}} {{reverse ? 'reverse': 'no-reverse'}} {{disable ? 'disabled': ''}} {{className}}"
+  disable="{{disable}}"
+  
+  change:start="{{computed.startPropObserver(instanceId)}}"
+  change:end="{{computed.endPropObserver(instanceId)}}"
+  change:watchstart="{{computed.watchstartPropObserver(instanceId)}}"
+  change:watchend="{{computed.watchenddPropObserver(instanceId)}}"
+  change:hue="{{hue}}"
+  start="{{start}}"
+  end="{{end}}"
+  watchstart="{{watchStart}}"
+  watchend="{{watchEnd}}"
+  
+  data-hue="{{hue}}"
+  data-min="{{min}}"
+  data-max="{{max}}"
+
+  data-step="{{step}}"
+
+  bind:touchstart="{{computed.handleTrackMouseDown(instanceId)}}"
+  bind:touchmove="{{computed.onMouseMove(instanceId)}}"
+  bind:touchend="{{computed.onTrackMouseUp(instanceId)}}"
+
+  data-startmin="{{startMin}}"
+  data-startmax="{{startMax}}"
+  
+  data-endmin="{{endMin}}"
+  data-endmax="{{endMax}}"
+
+  data-mode="{{mode}}"
+  data-barpad="{{barPad}}"
+  data-hidethumb="{{hideThumb}}"
+  data-showsteps="{{showSteps}}"
+  data-direction="{{direction}}"
+  data-reverse="{{reverse}}"
+  data-enabletouch="{{enableTouch}}"
+  data-enabletouchbar="{{enableTouchBar}}"
+  data-maxrangeoffset="{{maxRangeOffset}}"
+  data-texttemplate="{{textTemplate}}"
+  data-showtext="{{showText}}"
+  data-thumbstylecalc="{{thumbStyleCalc}}"
+
+  style="{{trackStyle}}"
+>
+  <view ty:if="{{disable}}" class="rayui-slider-mask"></view>
+  <view ty:if="{{showSteps}}" class="rayui-slider-steps">
+    <view class="rayui-slider-steps-dot" ty:for="{{steps}}" style="{{stepStyle}}" ty:for-item="step">
+    </view>
+  </view>
+  <view class="rayui-slider-bar"
+    style="{{barStyle}}"
+  >
+    <view ty:if="{{showText}}" class="rayui-slider-bar-text" style="{{textStyle}}">
+      {{text}}
+    </view>
+    <view class="rayui-slider-bar-steps_wrap">
+      <view ty:if="{{showSteps}}" class="rayui-slider-steps">
+        <view class="rayui-slider-steps-dot" ty:for="{{steps}}" style="{{activeStepStyle}}" ty:for-item="step">
+        </view>
+      </view>  
+    </view>
+  </view>
+  <view
+    class="rayui-slider-thumb rayui-slider-thumb-start"
+    data-name="start"
+    bind:touchstart="{{computed.handleMouseDown(instanceId)}}"
+    bind:touchend="{{computed.onMouseUp(instanceId)}}"
+  >
+    <view 
+      data-name="start"
+      class="rayui-slider-thumb-render rayui-slider-thumb-start-render" style="{{thumbStartStyle}}"
+    ></view>
+  </view>
+  <view
+    class="rayui-slider-thumb rayui-slider-thumb-end"
+    data-name="end"
+    bind:touchstart="{{computed.handleMouseDown(instanceId)}}"
+    bind:touchend="{{computed.onMouseUp(instanceId)}}"
+  >
+    <view 
+      data-name="end"
+      class="rayui-slider-thumb-render rayui-slider-thumb-end-render" style="{{thumbEndStyle}}"
+    ></view>
+  </view>
+</view>

package/lib/index.d.ts

@@ -1,7 +1,7 @@
 /// <reference types="react" />
 import { IProps } from './props';
-declare function LampSaturationSlider(props: IProps): JSX.Element;
-declare namespace LampSaturationSlider {
+declare function SaturationSlider(props: IProps): JSX.Element;
+declare namespace SaturationSlider {
     var defaultProps: IProps;
 }
-export default LampSaturationSlider;
+export default SaturationSlider;

package/lib/index.js

@@ -1,58 +1,128 @@
+import _objectSpread from "@babel/runtime/helpers/esm/objectSpread2";
 import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
 import "core-js/modules/es.array.concat.js";
-import React, { useState, useEffect } from 'react';
-import { ColorUtils } from '@ray-js/ray-panel-utils';
-import { Slider } from '@ray-js/components';
+import "core-js/modules/es.array.slice.js";
+/* eslint-disable @typescript-eslint/no-unused-vars */
+import React, { useRef, useState, useEffect, useMemo } from 'react';
+import { View } from '@ray-js/components';
+import { hsvToRgb } from './utils';
+import Slider from './components/slider';
 import { defaultProps } from './props';
-
-function LampSaturationSlider(props) {
-  var defaultValue = props.value,
-      defaultColor = props.defaultColor;
-
-  var _useState = useState(defaultValue),
-      _useState2 = _slicedToArray(_useState, 2),
-      value = _useState2[0],
-      setValue = _useState2[1];
-
-  var HValue = ColorUtils.rgbToHsl(defaultColor.r, defaultColor.g, defaultColor.b).h;
+function SaturationSlider(props) {
+  var preSaturation = useRef(-1);
+  var lastSaturation = useRef(null);
+  var timer = useRef(null);
+  var timer1 = useRef(null);
+  var saturation = props.value,
+    hue = props.hue,
+    _props$trackStyle = props.trackStyle,
+    trackStyle = _props$trackStyle === void 0 ? {} : _props$trackStyle,
+    _props$thumbStyle = props.thumbStyle,
+    thumbStyle = _props$thumbStyle === void 0 ? {} : _props$thumbStyle,
+    disable = props.disable,
+    onTouchStart = props.onTouchStart,
+    onTouchMove = props.onTouchMove,
+    onTouchEnd = props.onTouchEnd;
+  var instanceId = useRef("Color_".concat(String(+new Date()).slice(-4), "_").concat(String(Math.random()).slice(-2)));
+  var _useState = useState(-1),
+    _useState2 = _slicedToArray(_useState, 2),
+    controllerSaturation = _useState2[0],
+    setControllerSaturation = _useState2[1];
   useEffect(function () {
-    var currentHValue = ColorUtils.rgbToHsl(defaultColor.r, defaultColor.g, defaultColor.b).h;
-    var rgb = ColorUtils.hslToRgb(currentHValue, 1, 1 - value / 200);
-    props.onAfterChange && props.onAfterChange(rgb);
-  }, [defaultColor]);
-
-  var onChange = function (event) {
-    setValue(event);
-    var rgb = ColorUtils.hslToRgb(HValue, 1, 1 - event / 200);
-    props.onChange && props.onChange(rgb);
-  };
-
-  var onAfterChange = function (event) {
-    setValue(event);
-    var rgb = ColorUtils.hslToRgb(HValue, 1, 1 - event / 200);
-    props.onAfterChange && props.onAfterChange(rgb);
-  }; // const onBeforeChange = event => {
-  //   setValue(event);
-  //   const rgb = ColorUtils.hslToRgb(HValue, event / 100, 0.5);
-  //   props.onBeforeChange && props.onBeforeChange(rgb);
-  // };
-
-
-  return /*#__PURE__*/React.createElement(Slider, {
+    if (preSaturation.current !== saturation) {
+      setControllerSaturation(saturation);
+    }
+  }, [saturation]);
+  var _useMemo = useMemo(function () {
+      return hsvToRgb(hue, 1000, 1000);
+    }, [hue]),
+    r = _useMemo.r,
+    g = _useMemo.g,
+    b = _useMemo.b;
+  var bg = "linear-gradient(to right, rgba(".concat(r, ", ").concat(g, ", ").concat(b, ", 0.01) 0%, rgba(").concat(r, ", ").concat(g, ", ").concat(b, ", 1) 100%)");
+  return /*#__PURE__*/React.createElement(View, {
+    style: {
+      position: 'relative'
+    }
+  }, /*#__PURE__*/React.createElement(Slider, {
+    instanceId: instanceId.current,
+    hue: hue,
     min: 0,
-    max: 100,
+    max: 1000,
+    disable: disable,
+    end: controllerSaturation,
     step: 1,
-    value: defaultValue,
-    onChange: function (va) {
-      onAfterChange(va.value);
+    enableTouch: true,
+    maxRangeOffset: 16,
+    bindstart: function handleTouchStart(_ref) {
+      var detail = _ref.detail;
+      if (!onTouchStart || disable) {
+        return;
+      }
+      lastSaturation.current = detail.end;
+      if (detail.end === lastSaturation.current) {
+        return;
+      }
+      onTouchStart && onTouchStart(detail.end);
+      lastSaturation.current = detail.end;
+    },
+    bindmove: function handTouchMove(_ref2) {
+      var detail = _ref2.detail;
+      if (!onTouchMove || disable) {
+        return;
+      }
+      lastSaturation.current = detail.end;
+      if (detail.end === preSaturation.current) {
+        return;
+      }
+      if (timer.current) {
+        return;
+      }
+      // 移动结束后多久进行更新
+
+      timer.current = setTimeout(function () {
+        onTouchMove && onTouchMove(detail.end);
+        preSaturation.current = detail.end;
+        clearTimeout(timer.current);
+        timer.current = null;
+        clearTimeout(timer1.current);
+        timer1.current = null;
+        timer1.current = setTimeout(function () {
+          if (lastSaturation.current !== preSaturation.current) {
+            onTouchMove && onTouchMove(lastSaturation.current);
+          }
+        }, 200);
+      }, 50);
     },
-    onChanging: function onChanging(va) {
-      onChange(va.value);
+    bindend: function handTouchEnd(_ref3) {
+      var detail = _ref3.detail;
+      if (!onTouchEnd || disable) {
+        return;
+      }
+      if (detail.end === preSaturation.current) {
+        return;
+      }
+      onTouchEnd && onTouchEnd(detail.end);
+      preSaturation.current = detail.end;
     },
-    backgroundColor: "linear-gradient(to right, hsl(".concat(HValue, ", 100%, 100%), hsl(").concat(HValue, ", 100%, 50%))"),
-    activeColor: "transparent"
-  });
+    trackStyle: _objectSpread(_objectSpread({
+      width: "".concat(646, "rpx"),
+      height: "".concat(88, "rpx"),
+      borderRadius: "".concat(28, "rpx")
+    }, trackStyle), {}, {
+      background: bg
+    }),
+    barStyle: {
+      background: 'transparent'
+    },
+    thumbEndStyle: _objectSpread({
+      width: '32rpx',
+      height: '104rpx',
+      border: "9rpx solid #fff",
+      borderRadius: '28rpx',
+      background: "".concat(disable ? '#000' : 'transparent')
+    }, thumbStyle)
+  }));
 }
-
-LampSaturationSlider.defaultProps = defaultProps;
-export default LampSaturationSlider;
+SaturationSlider.defaultProps = defaultProps;
+export default SaturationSlider;

package/lib/index.module.less

@@ -1,5 +1,5 @@
-.text {
+.lampSliderMask {
   color: #000;
   font-size: 48rpx;
   font-weight: bold;
-}
+}

package/lib/props.d.ts

@@ -1,32 +1,57 @@
+/// <reference types="react" />
 export interface IProps {
     /**
-     * @description.zh slider值 范围0 - 100
-     * @description.en slider value range 0 - 100
+     * @description.zh 禁止滑动
+     * @description.en Ban sliding
+     * @default false
+     */
+    disable?: boolean;
+    /**
+     * @description.zh slider方向
+     * @description.en slider direction
+     * @default horizontal
+     */
+    direction?: "horizontal" | "vertical";
+    /**
+     * @description.zh 滑动槽样式
+     * @description.en Sliding groove style
+     * @default {}
+     */
+    trackStyle?: React.CSSProperties;
+    /**
+     * @description.en Fingers sliding block style
+     * @description.zh 手指滑块样式
+     */
+    thumbStyle?: React.CSSProperties;
+    /**
+     * @description.zh slider值 对应hsv的saturation 范围 1 - 1000
+     * @description.en slider value
      * @default 0
      */
     value: number;
     /**
-     * @description.zh slider 值改变时触发
+     * @description.zh slider 展示的颜色值 对应hsv的hue
+     * @description.en slider value
+     * @default 0
+     */
+    hue: number;
+    /**
+     * @description.zh slider 手指点击时触发
      * @description.en slider Value changes
-     * @default '() => {}'
+     * @default () => {}
      */
-    onChange: (value: RGB) => void;
+    onTouchStart: (value: number) => void;
     /**
-     * @description.zh 值改变后触发
-     * @description.en Values change after the trigger
-     * @default '() => {}'
+     * @description.zh slider 手指拖动时触发
+     * @description.en slider Value changes
+     * @default () => {}
      */
-    onAfterChange?: (value: RGB) => void;
+    onTouchMove: (value: number) => void;
     /**
-     * @description.zh 默认传入的RGB值
-     * @description.en The default incoming RGB values
-     * @default '() => {}'
+     * @description.zh slider 手指离开时触发
+     * @description.en Values change after the trigger
+     * @default () => {}
      */
-    defaultColor: RGB;
+    onTouchEnd?: (value: number) => void;
 }
-export declare type RGB = {
-    r: number;
-    g: number;
-    b: number;
-};
 export declare const defaultProps: IProps;

package/lib/props.js

@@ -1,14 +1,16 @@
+/* eslint-disable prettier/prettier */
+/* eslint-disable @typescript-eslint/no-empty-function */
+
 export var defaultProps = {
-  onChange: function onChange() {
+  value: 1,
+  trackStyle: {},
+  onTouchStart: function onTouchStart() {
     return null;
   },
-  onAfterChange: function onAfterChange() {
+  onTouchMove: function onTouchMove() {
     return null;
   },
-  value: 0,
-  defaultColor: {
-    r: 255,
-    g: 0,
-    b: 0
+  onTouchEnd: function onTouchEnd() {
+    return null;
   }
 };

package/lib/utils/index.d.ts

@@ -0,0 +1,13 @@
+type HSV = {
+    h: number;
+    s: number;
+    v: number;
+};
+type RGB = {
+    r: number;
+    g: number;
+    b: number;
+};
+declare const rgbToHsv: (r: number, g: number, b: number) => HSV;
+declare const hsvToRgb: (h: number, s: number, v: number) => RGB;
+export { rgbToHsv, hsvToRgb };

package/lib/utils/index.js

@@ -0,0 +1,29 @@
+import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
+import { utils } from '@ray-js/panel-sdk';
+var rgb2hsv = utils.rgb2hsv,
+  hsv2rgb = utils.hsv2rgb;
+var rgbToHsv = function (r, g, b) {
+  var _rgb2hsv = rgb2hsv(r, g, b),
+    _rgb2hsv2 = _slicedToArray(_rgb2hsv, 3),
+    h = _rgb2hsv2[0],
+    s = _rgb2hsv2[1],
+    v = _rgb2hsv2[2];
+  return {
+    h: h,
+    s: s,
+    v: v
+  };
+};
+var hsvToRgb = function (h, s, v) {
+  var _hsv2rgb = hsv2rgb(h, s, v),
+    _hsv2rgb2 = _slicedToArray(_hsv2rgb, 3),
+    r = _hsv2rgb2[0],
+    g = _hsv2rgb2[1],
+    b = _hsv2rgb2[2];
+  return {
+    r: r,
+    g: g,
+    b: b
+  };
+};
+export { rgbToHsv, hsvToRgb };

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@ray-js/lamp-saturation-slider",
-  "version": "0.0.2-beta-1",
-  "description": "照明饱和度Slider",
+  "version": "1.1.0",
+  "description": "照明色温Slider",
   "main": "lib/index",
   "files": [
     "lib"
@@ -30,19 +30,16 @@
     "prepublishOnly": "yarn build",
     "release-it": "standard-version"
   },
-  "peerDependencies": {
-    "@ray-js/components": "^0.3.19-beta-a6eb801d",
-    "@ray-js/framework": "^0.3.19-beta-a6eb801d"
-  },
+  "peerDependencies": {},
   "devDependencies": {
     "@commitlint/cli": "^7.2.1",
     "@commitlint/config-conventional": "^9.0.1",
-    "@ray-js/babel-preset-standard": "^0.3.19-beta-a6eb801d",
-    "@ray-js/cli": "^0.3.19-beta-a6eb801d",
-    "@ray-js/components": "^0.3.19-beta-a6eb801d",
-    "@ray-js/framework": "^0.3.19-beta-a6eb801d",
-    "@ray-js/rn-transformer-helper": "^0.3.19-beta-a6eb801d",
-    "@ray-js/types": "^0.3.19-beta-a6eb801d",
+    "@ray-js/babel-preset-standard": "^0.6.14",
+    "@ray-js/cli": "^0.6.14",
+    "@ray-js/components": "^0.6.14",
+    "@ray-js/ray": "^0.6.14",
+    "@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",
@@ -65,5 +62,9 @@
       "prettier --write",
       "git add"
     ]
+  },
+  "dependencies": {
+    "@ray-js/components-ty-slider": "^0.2.20",
+    "@ray-js/panel-sdk": "^1.1.4"
   }
 }

package/lib/index.android.js

@@ -1 +0,0 @@
-var _interopRequireDefault=require("@babel/runtime/helpers/interopRequireDefault");Object.defineProperty(exports,"__esModule",{value:true});exports.default=void 0;var _slicedToArray2=_interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));var _react=_interopRequireWildcard(require("react"));var _rayPanelUtils=require("@ray-js/ray-panel-utils");var _components=require("@ray-js/components");var _props=require("./props");var _jsxFileName="/drone/src/src/index.tsx";function _getRequireWildcardCache(nodeInterop){if(typeof WeakMap!=="function")return null;var cacheBabelInterop=new WeakMap();var cacheNodeInterop=new WeakMap();return(_getRequireWildcardCache=function _getRequireWildcardCache(nodeInterop){return nodeInterop?cacheNodeInterop:cacheBabelInterop;})(nodeInterop);}function _interopRequireWildcard(obj,nodeInterop){if(!nodeInterop&&obj&&obj.__esModule){return obj;}if(obj===null||typeof obj!=="object"&&typeof obj!=="function"){return{default:obj};}var cache=_getRequireWildcardCache(nodeInterop);if(cache&&cache.has(obj)){return cache.get(obj);}var newObj={};var hasPropertyDescriptor=Object.defineProperty&&Object.getOwnPropertyDescriptor;for(var key in obj){if(key!=="default"&&Object.prototype.hasOwnProperty.call(obj,key)){var desc=hasPropertyDescriptor?Object.getOwnPropertyDescriptor(obj,key):null;if(desc&&(desc.get||desc.set)){Object.defineProperty(newObj,key,desc);}else{newObj[key]=obj[key];}}}newObj.default=obj;if(cache){cache.set(obj,newObj);}return newObj;}var _styleSheet=styles;function LampSaturationSlider(props){var defaultValue=props.value,defaultColor=props.defaultColor;var _useState=(0,_react.useState)(defaultValue),_useState2=(0,_slicedToArray2.default)(_useState,2),value=_useState2[0],setValue=_useState2[1];var HValue=_rayPanelUtils.ColorUtils.rgbToHsl(defaultColor.r,defaultColor.g,defaultColor.b).h;(0,_react.useEffect)(function(){var currentHValue=_rayPanelUtils.ColorUtils.rgbToHsl(defaultColor.r,defaultColor.g,defaultColor.b).h;var rgb=_rayPanelUtils.ColorUtils.hslToRgb(currentHValue,1,1-value/200);props.onAfterChange&&props.onAfterChange(rgb);},[defaultColor]);var onChange=function(event){setValue(event);var rgb=_rayPanelUtils.ColorUtils.hslToRgb(HValue,1,1-event/200);props.onChange&&props.onChange(rgb);};var onAfterChange=function(event){setValue(event);var rgb=_rayPanelUtils.ColorUtils.hslToRgb(HValue,1,1-event/200);props.onAfterChange&&props.onAfterChange(rgb);};return _react.default.createElement(_components.Slider,{min:0,max:100,step:1,value:defaultValue,onChange:function(va){onAfterChange(va.value);},onChanging:function onChanging(va){onChange(va.value);},backgroundColor:"linear-gradient(to right, hsl("+HValue+", 100%, 100%), hsl("+HValue+", 100%, 50%))",activeColor:"transparent",__self:this,__source:{fileName:_jsxFileName,lineNumber:37,columnNumber:10}});}LampSaturationSlider.defaultProps=_props.defaultProps;var _default=LampSaturationSlider;exports.default=_default;

package/lib/index.config.android.js

@@ -1 +0,0 @@
-Object.defineProperty(exports,"__esModule",{value:true});exports.wechat=exports.tuya=exports.native=void 0;var tuya={backgroundColor:'#f2f4f6',navigationBarTitleText:'Ray 跨端组件'};exports.tuya=tuya;var wechat={backgroundColor:'#f2f4f6',navigationBarTitleText:'Ray 跨端组件'};exports.wechat=wechat;var native={backgroundColor:'transparent',isBleOfflineOverlay:false,useSafeAreaView:true,navigationBarTitleText:'Ray 跨端组件'};exports.native=native;

package/lib/index.config.ios.js

@@ -1 +0,0 @@
-Object.defineProperty(exports,"__esModule",{value:true});exports.wechat=exports.tuya=exports.native=void 0;var tuya={backgroundColor:'#f2f4f6',navigationBarTitleText:'Ray 跨端组件'};exports.tuya=tuya;var wechat={backgroundColor:'#f2f4f6',navigationBarTitleText:'Ray 跨端组件'};exports.wechat=wechat;var native={backgroundColor:'transparent',isBleOfflineOverlay:false,useSafeAreaView:true,navigationBarTitleText:'Ray 跨端组件'};exports.native=native;

package/lib/index.config.tuya.js

@@ -1,14 +0,0 @@
-export var tuya = {
-  backgroundColor: '#f2f4f6',
-  navigationBarTitleText: 'Ray 跨端组件'
-};
-export var wechat = {
-  backgroundColor: '#f2f4f6',
-  navigationBarTitleText: 'Ray 跨端组件'
-};
-export var native = {
-  backgroundColor: 'transparent',
-  isBleOfflineOverlay: false,
-  useSafeAreaView: true,
-  navigationBarTitleText: 'Ray 跨端组件'
-};

package/lib/index.config.web.js

@@ -1,14 +0,0 @@
-export var tuya = {
-  backgroundColor: '#f2f4f6',
-  navigationBarTitleText: 'Ray 跨端组件'
-};
-export var wechat = {
-  backgroundColor: '#f2f4f6',
-  navigationBarTitleText: 'Ray 跨端组件'
-};
-export var native = {
-  backgroundColor: 'transparent',
-  isBleOfflineOverlay: false,
-  useSafeAreaView: true,
-  navigationBarTitleText: 'Ray 跨端组件'
-};

package/lib/index.config.wechat.js

@@ -1,14 +0,0 @@
-export var tuya = {
-  backgroundColor: '#f2f4f6',
-  navigationBarTitleText: 'Ray 跨端组件'
-};
-export var wechat = {
-  backgroundColor: '#f2f4f6',
-  navigationBarTitleText: 'Ray 跨端组件'
-};
-export var native = {
-  backgroundColor: 'transparent',
-  isBleOfflineOverlay: false,
-  useSafeAreaView: true,
-  navigationBarTitleText: 'Ray 跨端组件'
-};

package/lib/index.ios.js

@@ -1 +0,0 @@
-var _interopRequireDefault=require("@babel/runtime/helpers/interopRequireDefault");Object.defineProperty(exports,"__esModule",{value:true});exports.default=void 0;var _slicedToArray2=_interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));var _react=_interopRequireWildcard(require("react"));var _rayPanelUtils=require("@ray-js/ray-panel-utils");var _components=require("@ray-js/components");var _props=require("./props");var _jsxFileName="/drone/src/src/index.tsx";function _getRequireWildcardCache(nodeInterop){if(typeof WeakMap!=="function")return null;var cacheBabelInterop=new WeakMap();var cacheNodeInterop=new WeakMap();return(_getRequireWildcardCache=function _getRequireWildcardCache(nodeInterop){return nodeInterop?cacheNodeInterop:cacheBabelInterop;})(nodeInterop);}function _interopRequireWildcard(obj,nodeInterop){if(!nodeInterop&&obj&&obj.__esModule){return obj;}if(obj===null||typeof obj!=="object"&&typeof obj!=="function"){return{default:obj};}var cache=_getRequireWildcardCache(nodeInterop);if(cache&&cache.has(obj)){return cache.get(obj);}var newObj={};var hasPropertyDescriptor=Object.defineProperty&&Object.getOwnPropertyDescriptor;for(var key in obj){if(key!=="default"&&Object.prototype.hasOwnProperty.call(obj,key)){var desc=hasPropertyDescriptor?Object.getOwnPropertyDescriptor(obj,key):null;if(desc&&(desc.get||desc.set)){Object.defineProperty(newObj,key,desc);}else{newObj[key]=obj[key];}}}newObj.default=obj;if(cache){cache.set(obj,newObj);}return newObj;}var _styleSheet=styles;function LampSaturationSlider(props){var defaultValue=props.value,defaultColor=props.defaultColor;var _useState=(0,_react.useState)(defaultValue),_useState2=(0,_slicedToArray2.default)(_useState,2),value=_useState2[0],setValue=_useState2[1];var HValue=_rayPanelUtils.ColorUtils.rgbToHsl(defaultColor.r,defaultColor.g,defaultColor.b).h;(0,_react.useEffect)(function(){var currentHValue=_rayPanelUtils.ColorUtils.rgbToHsl(defaultColor.r,defaultColor.g,defaultColor.b).h;var rgb=_rayPanelUtils.ColorUtils.hslToRgb(currentHValue,1,1-value/200);props.onAfterChange&&props.onAfterChange(rgb);},[defaultColor]);var onChange=function(event){setValue(event);var rgb=_rayPanelUtils.ColorUtils.hslToRgb(HValue,1,1-event/200);props.onChange&&props.onChange(rgb);};var onAfterChange=function(event){setValue(event);var rgb=_rayPanelUtils.ColorUtils.hslToRgb(HValue,1,1-event/200);props.onAfterChange&&props.onAfterChange(rgb);};return _react.default.createElement(_components.Slider,{min:0,max:100,step:1,value:defaultValue,onChange:function(va){onAfterChange(va.value);},onChanging:function onChanging(va){onChange(va.value);},backgroundColor:"linear-gradient(to right, hsl("+HValue+", 100%, 100%), hsl("+HValue+", 100%, 50%))",activeColor:"transparent",__self:this,__source:{fileName:_jsxFileName,lineNumber:37,columnNumber:10}});}LampSaturationSlider.defaultProps=_props.defaultProps;var _default=LampSaturationSlider;exports.default=_default;

package/lib/index.tuya.js

@@ -1,58 +0,0 @@
-import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
-import "core-js/modules/es.array.concat.js";
-import React, { useState, useEffect } from 'react';
-import { ColorUtils } from '@ray-js/ray-panel-utils';
-import { Slider } from '@ray-js/components';
-import { defaultProps } from './props';
-
-function LampSaturationSlider(props) {
-  var defaultValue = props.value,
-      defaultColor = props.defaultColor;
-
-  var _useState = useState(defaultValue),
-      _useState2 = _slicedToArray(_useState, 2),
-      value = _useState2[0],
-      setValue = _useState2[1];
-
-  var HValue = ColorUtils.rgbToHsl(defaultColor.r, defaultColor.g, defaultColor.b).h;
-  useEffect(function () {
-    var currentHValue = ColorUtils.rgbToHsl(defaultColor.r, defaultColor.g, defaultColor.b).h;
-    var rgb = ColorUtils.hslToRgb(currentHValue, 1, 1 - value / 200);
-    props.onAfterChange && props.onAfterChange(rgb);
-  }, [defaultColor]);
-
-  var onChange = function (event) {
-    setValue(event);
-    var rgb = ColorUtils.hslToRgb(HValue, 1, 1 - event / 200);
-    props.onChange && props.onChange(rgb);
-  };
-
-  var onAfterChange = function (event) {
-    setValue(event);
-    var rgb = ColorUtils.hslToRgb(HValue, 1, 1 - event / 200);
-    props.onAfterChange && props.onAfterChange(rgb);
-  }; // const onBeforeChange = event => {
-  //   setValue(event);
-  //   const rgb = ColorUtils.hslToRgb(HValue, event / 100, 0.5);
-  //   props.onBeforeChange && props.onBeforeChange(rgb);
-  // };
-
-
-  return /*#__PURE__*/React.createElement(Slider, {
-    min: 0,
-    max: 100,
-    step: 1,
-    value: defaultValue,
-    onChange: function (va) {
-      onAfterChange(va.value);
-    },
-    onChanging: function onChanging(va) {
-      onChange(va.value);
-    },
-    backgroundColor: "linear-gradient(to right, hsl(".concat(HValue, ", 100%, 100%), hsl(").concat(HValue, ", 100%, 50%))"),
-    activeColor: "transparent"
-  });
-}
-
-LampSaturationSlider.defaultProps = defaultProps;
-export default LampSaturationSlider;