@ray-js/lamp-saturation-slider 1.1.7 → 1.1.8-beta-2

package/README-zh_CN.md

@@ -0,0 +1,95 @@
+[English](./README.md) | 简体中文
+
+# @ray-js/lamp-saturation-slider
+
+> 照明饱和度 Slider
+
+## 安装
+
+```sh
+$ npm install @ray-js/components-ty-lamp
+// 或者
+$ yarn add @ray-js/components-ty-lamp
+```
+
+## 使用
+
+```ts
+// 属性
+export interface IProps {
+  /**
+   * @description.zh 禁止滑动
+   * @description.en Ban sliding
+   * @default false
+   */
+  disable?: boolean;
+  /**
+   * @description.zh 滑动槽样式
+   * @description.en
+   * @default {}
+   */
+  trackStyle?: React.CSSProperties;
+  /**
+   * @description.zh slider值
+   * @description.en slider value
+   * @default 0
+   */
+  value: number;
+  /**
+   * @description.zh slider 展示的颜色值 对应hsv的hue
+   * @description.en slider value
+   * @default 0
+   */
+  hue: number; // 0 - 359
+  /**
+   * @description.zh slider 手指点击时触发
+   * @description.en slider Value changes
+   * @default () => {}
+   */
+  onTouchStart?: (value: number) => void;
+  /**
+   * @description.zh slider 手指拖动时触发
+   * @description.en slider Value changes
+   * @default () => {}
+   */
+  onTouchMove?: (value: number) => void;
+  /**
+   * @description.zh slider 手指离开时触发
+   * @description.en Values change after the trigger
+   * @default () => {}
+   */
+  onTouchEnd?: (value: number) => void;
+}
+
+export const defaultProps: IProps = {
+  value: 0,
+  onTouchStart: () => null,
+  onTouchMove: () => null,
+  onTouchEnd: () => null,
+};
+```
+
+```tsx
+import { LampSaturationSlider } from '@ray-js/components-ty-lamp';
+
+export default () => {
+  const [saturation, setSaturation] = useState(100);
+
+  useEffect(() => {
+    // 模拟dp上报
+    setTimeout(() => {
+      setSaturation(321);
+    }, 3000);
+  }, []);
+
+  return (
+    <LampSaturationSlider
+      hue={100}
+      value={saturation}
+      onTouchEnd={val => {
+        setSaturation(val);
+      }}
+    />
+  );
+};
+```

package/lib/index.js

@@ -1,6 +1,6 @@
 import _objectSpread from "@babel/runtime/helpers/esm/objectSpread2";
 /* eslint-disable @typescript-eslint/no-unused-vars */
-import React, { useRef, useState, useEffect, useMemo } from 'react';
+import React, { useRef, useMemo } from 'react';
 import { View } from '@ray-js/components';
 import Slider from '@ray-js/components-ty-slider/lib/SjsSlider';
 import { toStyle } from '@ray-js/components-ty-slider';
@@ -8,10 +8,6 @@ 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);
-  const timer1 = useRef(null);
   const {
     value: saturation,
     hue,
@@ -22,17 +18,11 @@ function LampSaturationSlider(props) {
     onTouchMove,
     onTouchEnd,
     enableTouch = true,
-    max = 1000
+    max = 1000,
+    useCustomThumbStyle,
+    useCustomTrackStyle
   } = props;
-  const startRefValue = useRef(-1);
-  const endRefValue = useRef(-1);
   const instanceId = useRef(`Color_${String(+new Date()).slice(-4)}_${String(Math.random()).slice(-10)}`);
-  const [controllerSaturation, setControllerSaturation] = useState(-1);
-  useEffect(() => {
-    if (preSaturation.current !== saturation) {
-      setControllerSaturation(saturation);
-    }
-  }, [saturation]);
   const {
     r,
     g,
@@ -51,7 +41,7 @@ function LampSaturationSlider(props) {
     min: 0,
     max: max,
     disable: disable,
-    end: controllerSaturation,
+    end: saturation,
     enableTouch: enableTouch,
     step: 1,
     bindstart: _ref => {
@@ -61,11 +51,8 @@ function LampSaturationSlider(props) {
       if (!onTouchStart || disable) {
         return;
       }
-      if (detail.end === startRefValue.current) {
-        return;
-      }
-      onTouchStart && onTouchStart(detail.end);
-      startRefValue.current = detail.end;
+      const value = Math.max(detail.end, 1);
+      onTouchStart && onTouchStart(value);
     },
     bindmove: _ref2 => {
       let {
@@ -74,31 +61,7 @@ function LampSaturationSlider(props) {
       if (!onTouchMove || disable) {
         return;
       }
-      lastSaturation.current = detail.end;
-      if (detail.end === preSaturation.current) {
-        return;
-      }
-      if (timer.current) {
-        return;
-      }
-
-      // 移动更新的频率
-
-      // 移动结束后多久进行更新
-
-      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(() => {
-          if (lastSaturation.current !== preSaturation.current) {
-            onTouchMove && onTouchMove(lastSaturation.current);
-          }
-        }, 200);
-      }, 50);
+      onTouchMove && onTouchMove(detail.end);
     },
     bindend: _ref3 => {
       let {
@@ -107,18 +70,14 @@ function LampSaturationSlider(props) {
       if (!onTouchEnd || disable) {
         return;
       }
-      if (detail.end === endRefValue.current) {
-        return;
-      }
       onTouchEnd && onTouchEnd(detail.end);
-      endRefValue.current = detail.end;
     },
     trackStyle: toStyle(_objectSpread(_objectSpread({
       width: `${646}rpx`,
       height: `${88}rpx`,
       borderRadius: `${28}rpx`
     }, trackStyle), {}, {
-      background: `linear-gradient(to right, rgba(${r}, ${g}, ${b}, 0.01) 0%, rgba(${r}, ${g}, ${b}, 1) 100%)`
+      background: useCustomTrackStyle ? trackStyle === null || trackStyle === void 0 ? void 0 : trackStyle.background : `linear-gradient(to right, rgba(${r}, ${g}, ${b}, 0.01) 0%, rgba(${r}, ${g}, ${b}, 1) 100%)`
     })),
     barStyle: toStyle({
       background: 'transparent'
@@ -130,7 +89,7 @@ function LampSaturationSlider(props) {
       borderRadius: '28rpx',
       background: `${disable ? '#000' : 'transparent'}`
     }, thumbStyle)),
-    thumbStyleRenderFormatter: {
+    thumbStyleRenderFormatter: useCustomThumbStyle ? null : {
       background: `hsl(${props.hue}deg 100% value%)`
     },
     thumbStyleRenderValueScale: 50 / max,

package/lib/props.d.ts

@@ -64,5 +64,17 @@ export interface IProps {
      * @default 1000
      */
     max?: 100 | 1000;
+    /**
+     * @description.en useCustomThumbStyle
+     * @description.zh 使用自定义按钮样式
+     * @default null
+     */
+    useCustomThumbStyle?: boolean;
+    /**
+     * @description.en useCustomTrackStyle
+     * @description.zh 使用自定义滑槽样式
+     * @default null
+     */
+    useCustomTrackStyle?: boolean;
 }
 export declare const defaultProps: IProps;

package/lib/props.js

@@ -8,5 +8,7 @@ export const defaultProps = {
   onTouchMove: () => null,
   onTouchEnd: () => null,
   max: 1000,
-  hue: 0
+  hue: 0,
+  useCustomThumbStyle: false,
+  useCustomTrackStyle: false
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ray-js/lamp-saturation-slider",
-  "version": "1.1.7",
+  "version": "1.1.8-beta-2",
   "description": "照明色温Slider",
   "main": "lib/index",
   "files": [
@@ -43,6 +43,11 @@
     "lint-staged": "^10.2.11",
     "standard-version": "9.3.2"
   },
+  "resolutions": {
+    "follow-redirects": "1.15.6",
+    "shell-quote": "1.7.3",
+    "ip": "2.0.1"
+  },
   "husky": {
     "hooks": {
       "commit-msg": "commitlint -E HUSKY_GIT_PARAMS --config commitlint.config.js",