@ray-js/lamp-saturation-slider 1.1.1 → 1.1.4-beta-1

package/lib/index.config.js

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

package/lib/index.d.ts

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

package/lib/index.js

@@ -1,62 +1,61 @@
 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 "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 Slider from '@ray-js/components-ty-slider/lib/slider';
 import { hsvToRgb } from './utils';
-import Slider from './components/slider';
 import { defaultProps } from './props';
-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 startRefValue = useRef(-1);
-  var endRefValue = useRef(-1);
-  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 () {
+function LampSaturationSlider(props) {
+  const preSaturation = useRef(-1);
+  const lastSaturation = useRef(null);
+  const timer = useRef(null);
+  const timer1 = useRef(null);
+  const {
+    value: saturation,
+    hue,
+    trackStyle = {},
+    thumbStyle = {},
+    disable,
+    closed,
+    onTouchStart,
+    onTouchMove,
+    onTouchEnd
+  } = props;
+  const startRefValue = useRef(-1);
+  const endRefValue = useRef(-1);
+  const instanceId = useRef(`Color_${String(+new Date()).slice(-4)}_${String(Math.random()).slice(-2)}`);
+  const [controllerSaturation, setControllerSaturation] = useState(-1);
+  useEffect(() => {
     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%)");
+  const {
+    r,
+    g,
+    b
+  } = useMemo(() => hsvToRgb(hue, 1000, 1000), [hue]);
   return /*#__PURE__*/React.createElement(View, {
     style: {
-      position: 'relative'
+      position: 'relative',
+      background: '#fff',
+      width: `${646}rpx`,
+      height: `${88}rpx`,
+      borderRadius: `${28}rpx`
     }
   }, /*#__PURE__*/React.createElement(Slider, {
     instanceId: instanceId.current,
     hue: hue,
     min: 0,
     max: 1000,
+    closed: closed,
     disable: disable,
     end: controllerSaturation,
     step: 1,
-    maxRangeOffset: 16,
-    bindstart: function handleTouchStart(_ref) {
-      var detail = _ref.detail;
+    bindstart: _ref => {
+      let {
+        detail
+      } = _ref;
       if (!onTouchStart || disable) {
         return;
       }
@@ -66,8 +65,10 @@ function SaturationSlider(props) {
       onTouchStart && onTouchStart(detail.end);
       startRefValue.current = detail.end;
     },
-    bindmove: function handTouchMove(_ref2) {
-      var detail = _ref2.detail;
+    bindmove: _ref2 => {
+      let {
+        detail
+      } = _ref2;
       if (!onTouchMove || disable) {
         return;
       }
@@ -78,24 +79,29 @@ function SaturationSlider(props) {
       if (timer.current) {
         return;
       }
+
+      // 移动更新的频率
+
       // 移动结束后多久进行更新
 
-      timer.current = setTimeout(function () {
+      timer.current = setTimeout(() => {
         onTouchMove && onTouchMove(detail.end);
         preSaturation.current = detail.end;
         clearTimeout(timer.current);
         timer.current = null;
         clearTimeout(timer1.current);
         timer1.current = null;
-        timer1.current = setTimeout(function () {
+        timer1.current = setTimeout(() => {
           if (lastSaturation.current !== preSaturation.current) {
             onTouchMove && onTouchMove(lastSaturation.current);
           }
         }, 200);
       }, 50);
     },
-    bindend: function handTouchEnd(_ref3) {
-      var detail = _ref3.detail;
+    bindend: _ref3 => {
+      let {
+        detail
+      } = _ref3;
       if (!onTouchEnd || disable) {
         return;
       }
@@ -106,23 +112,23 @@ function SaturationSlider(props) {
       endRefValue.current = detail.end;
     },
     trackStyle: _objectSpread(_objectSpread({
-      width: "".concat(646, "rpx"),
-      height: "".concat(88, "rpx"),
-      borderRadius: "".concat(28, "rpx")
+      width: `${646}rpx`,
+      height: `${88}rpx`,
+      borderRadius: `${28}rpx`
     }, trackStyle), {}, {
-      background: bg
+      background: `linear-gradient(to right, rgba(${r}, ${g}, ${b}, 0.01) 0%, rgba(${r}, ${g}, ${b}, 1) 100%)`
     }),
     barStyle: {
       background: 'transparent'
     },
-    thumbEndStyle: _objectSpread({
+    thumbStyle: _objectSpread({
       width: '32rpx',
       height: '104rpx',
-      border: "9rpx solid #fff",
+      border: `9rpx solid #fff`,
       borderRadius: '28rpx',
-      background: "".concat(disable ? '#000' : 'transparent')
+      background: `${disable ? '#000' : 'transparent'}`
     }, thumbStyle)
   }));
 }
-SaturationSlider.defaultProps = defaultProps;
-export default SaturationSlider;
+LampSaturationSlider.defaultProps = defaultProps;
+export default LampSaturationSlider;

package/lib/props.d.ts

@@ -6,6 +6,12 @@ export interface IProps {
      * @default false
      */
     disable?: boolean;
+    /**
+     * @description.zh 灯关闭状态时 thumb的状态
+     * @description.en The state of thumb when the light is off
+     * @default false
+     */
+    closed?: boolean;
     /**
      * @description.zh 滑动槽样式
      * @description.en Sliding groove style

package/lib/props.js

@@ -1,16 +1,10 @@
 /* eslint-disable prettier/prettier */
 /* eslint-disable @typescript-eslint/no-empty-function */
 
-export var defaultProps = {
+export const defaultProps = {
   value: 1,
   trackStyle: {},
-  onTouchStart: function onTouchStart() {
-    return null;
-  },
-  onTouchMove: function onTouchMove() {
-    return null;
-  },
-  onTouchEnd: function onTouchEnd() {
-    return null;
-  }
+  onTouchStart: () => null,
+  onTouchMove: () => null,
+  onTouchEnd: () => null
 };

package/lib/utils/index.js

@@ -1,29 +1,22 @@
-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];
+const {
+  rgb2hsv,
+  hsv2rgb
+} = utils;
+const rgbToHsv = (r, g, b) => {
+  const [h, s, v] = rgb2hsv(r, g, b);
   return {
-    h: h,
-    s: s,
-    v: v
+    h,
+    s,
+    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];
+const hsvToRgb = (h, s, v) => {
+  const [r, g, b] = hsv2rgb(h, s, v);
   return {
-    r: r,
-    g: g,
-    b: b
+    r,
+    g,
+    b
   };
 };
 export { rgbToHsv, hsvToRgb };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ray-js/lamp-saturation-slider",
-  "version": "1.1.1",
+  "version": "1.1.4-beta-1",
   "description": "照明色温Slider",
   "main": "lib/index",
   "files": [
@@ -8,13 +8,6 @@
   ],
   "license": "MIT",
   "types": "lib/index.d.ts",
-  "maintainers": [
-    "tuya_npm",
-    {
-      "name": "tuyafe",
-      "email": "tuyafe@tuya.com"
-    }
-  ],
   "scripts": {
     "lint": "eslint src --ext .js,.jsx,.ts,.tsx --fix",
     "build": "ray build --type=component",
@@ -24,7 +17,7 @@
     "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 -t tuya --verbose",
+    "start:tuya": "ray start ./example --verbose",
     "start:wechat": "ray start ./example -t wechat --verbose",
     "start:web": "ray start ./example -t web",
     "prepublishOnly": "yarn build",
@@ -36,9 +29,8 @@
     "@commitlint/cli": "^7.2.1",
     "@commitlint/config-conventional": "^9.0.1",
     "@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/cli": "^1.4.9",
+    "@ray-js/ray": "^1.4.9",
     "@ray-js/rn-transformer-helper": "^0.5.5",
     "@ray-js/types": "^0.6.14",
     "@types/node": "^17.0.43",
@@ -65,7 +57,13 @@
     ]
   },
   "dependencies": {
-    "@ray-js/components-ty-slider": "^0.2.20",
+    "@ray-js/components-ty-slider": "^0.2.36-beta-1",
     "@ray-js/panel-sdk": "^1.1.4"
-  }
+  },
+  "maintainers": [
+    {
+      "name": "tuyafe",
+      "email": "tuyafe@tuya.com"
+    }
+  ]
 }

package/lib/components/slider/index.d.ts

@@ -1,230 +0,0 @@
-/* eslint-disable react/require-default-props */
-import React from 'react';
-
-export interface EventType<T> {
-  type: T;
-  timeStamp: number;
-  target: any;
-  currentTarget: any;
-  detail: SjsSliderEventData;
-}
-
-export interface SjsSliderEventData {
-  start: number;
-  end: number;
-  range: number;
-  position: 'start' | 'end';
-}
-
-export interface SjsSliderProps {
-  /**
-   * @description.en hue值
-   * @description.zh hue value
-   */
-  hue: number;
-  /**
-   * @description.en instanceId
-   * @description.zh 唯一ID
-   */
-  instanceId: string;
-  /**
-   * @description.en className
-   * @description.zh 样式
-   */
-  className?: string;
-  /**
-   * @description.en disable
-   * @description.zh disable
-   * @default false
-   */
-  disable?: boolean;
-  /**
-   * @description.en left value
-   * @description.zh 左滑块初始值
-   * @default 0
-   */
-  start?: number;
-  /**
-   * @description.en watch value and change
-   * @description.zh 监听值，并随之变化
-   */
-  watchStart?: number;
-  /**
-   * @description.en left value min
-   * @description.zh 左滑块最小值限制
-   */
-  startMin?: number;
-  /**
-   * @description.en left value max
-   * @description.zh 左滑块最大值限制
-   */
-  startMax?: number;
-  /**
-   * @description.en Right slider initial value/one-way slider initial value
-   * @description.zh 右滑块初始值/单向滑条初始值
-   * @default 30
-   */
-  end?: number;
-  /**
-   * @description.en watch value and change
-   * @description.zh 监听值，并随之变化
-   */
-  watchEnd?: number;
-  /**
-   * @description.en Right slider min/one-way slider min
-   * @description.zh 右滑块最小值/单向滑条最小值
-   */
-  endMin?: number;
-  /**
-   * @description.en Right slider Max/one-way slider Max
-   * @description.zh 右滑块最大值/单向滑条最大值
-   */
-  endMax?: number;
-  /**
-   * @description.en min
-   * @description.zh 最小值, 建议用 endMin 代替
-   * @default 0
-   * @deprecated
-   */
-  min?: number;
-  /**
-   * @description.en max
-   * @description.zh 最大值
-   * @default 100
-   */
-  max?: number;
-  /**
-   * @description.en step
-   * @description.zh 阶段值
-   * @default 1
-   */
-  step?: number;
-  /**
-   * @description.en step
-   * @description.zh 阶段值
-   */
-  forceStep?: number;
-  /**
-   * @description.en thumbStyle
-   * @description.zh 滑块样式
-   */
-  thumbStartStyle?: React.CSSProperties;
-  /**
-   * @description.en thumbStyle
-   * @description.zh 滑块样式
-   */
-  thumbEndStyle?: React.CSSProperties;
-  /**
-   * @description.en trackStyle
-   * @description.zh 轨道样式
-   */
-  trackStyle?: React.CSSProperties;
-  /**
-   * @description.en barStyle
-   * @description.zh 滑条样式
-   */
-  barStyle?: React.CSSProperties;
-  /**
-   * @description.en stepStyle
-   * @description.zh step样式
-   */
-  stepStyle?: React.CSSProperties;
-  /**
-   * @description.en bar stepStyle
-   * @description.zh bar step样式
-   */
-  activeStepStyle?: React.CSSProperties;
-  /**
-   * @description.en mode
-   * @description.zh 单向还是双向
-   * @default normal
-   */
-  mode?: 'range' | 'normal';
-  /**
-   * @description.en barPad
-   * @description.zh 控制滑动bar的偏移量，用于样式微调
-   */
-  barPad?: number;
-  /**
-   * @description.en maxRangeOffset
-   * @description.zh 按钮对齐偏移
-   * @default null
-   */
-  maxRangeOffset?: number;
-  /**
-   * @description.en hideThumb
-   * @description.zh 隐藏滑块
-   * @default false
-   */
-  hideThumb?: boolean;
-  /**
-   * @description.en showSteps
-   * @description.zh 显示阶段提示
-   * @default false
-   */
-  showSteps?: boolean;
-  /**
-   * @description.en direction
-   * @description.zh 方向
-   * @default horizontal
-   */
-  direction?: 'horizontal' | 'vertical';
-  /**
-   * @description.en callback
-   * @description.zh 回调
-   */
-  bindmove?: (event: EventType<'move'>) => void;
-  /**
-   * @description.en callback
-   * @description.zh 回调
-   */
-  bindend?: (event: EventType<'end'>) => void;
-  /**
-   * @description.en callback
-   * @description.zh 回调
-   */
-  bindstart?: (event: EventType<'start'>) => void;
-  /**
-   * @description.en reverse
-   * @description.zh 是否反转
-   * @default false
-   */
-  reverse?: boolean;
-  /**
-   * @description.en enableTouch
-   * @description.zh 使用触摸跳跃
-   * @default false
-   */
-  enableTouch?: boolean;
-  /**
-   * @description.en enableTouchBar
-   * @description.zh 使用触摸bar增加偏移
-   * @default false
-   */
-  enableTouchBar?: boolean;
-  /**
-   * @description.en showText
-   * @description.zh 在bar上显示文本
-   * @default false
-   */
-  showText?: boolean;
-  /**
-   * @description.en textStyle
-   * @description.zh bar文本样式
-   */
-  textStyle?: React.CSSProperties;
-  /**
-   * @description.en textTemplate
-   * @description.zh 文本格式化，例如 textTemplate="比率 {{text}} %"
-   */
-  textTemplate?: string;
-  /**
-   * @description.en calc style, such as { background: "rgba(0,0,0, {{text / 100 }}" }
-   * @description.zh 动态计算thumb样式，如 { background: "rgba(0,0,0, {{text /100 }})" }
-   */
-  thumbStyleCalc?: Partial<Record<keyof React.CSSProperties, string>>;
-}
-
-const SjsSlider: React.FC<SjsSliderProps>;
-
-export default SjsSlider;