@ray-js/lamp-saturation-slider 1.1.5 → 1.1.6-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

@@ -2,7 +2,7 @@ import _objectSpread from "@babel/runtime/helpers/esm/objectSpread2";
 /* 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 Slider from '@ray-js/components-ty-slider/lib/SjsSlider';
 import { toStyle } from '@ray-js/components-ty-slider';
 import { hsvToRgb } from './utils';
 import { defaultProps } from './props';
@@ -21,7 +21,8 @@ function LampSaturationSlider(props) {
     onTouchStart,
     onTouchMove,
     onTouchEnd,
-    enableTouch = true
+    enableTouch = true,
+    max = 1000
   } = props;
   const startRefValue = useRef(-1);
   const endRefValue = useRef(-1);
@@ -48,7 +49,7 @@ function LampSaturationSlider(props) {
   }, /*#__PURE__*/React.createElement(Slider, {
     instanceId: props.instanceId || instanceId.current,
     min: 0,
-    max: 1000,
+    max: max,
     disable: disable,
     end: controllerSaturation,
     enableTouch: enableTouch,
@@ -132,7 +133,7 @@ function LampSaturationSlider(props) {
     thumbStyleRenderFormatter: {
       background: `hsl(${props.hue}deg 100% value%)`
     },
-    thumbStyleRenderValueScale: 0.05,
+    thumbStyleRenderValueScale: max === 1000 ? 0.05 : 0.5,
     thumbStyleRenderValueStart: 50,
     thumbStyleRenderValueReverse: true
   }));

package/lib/props.d.ts

@@ -58,5 +58,11 @@ export interface IProps {
      * @default true
      */
     enableTouch?: boolean;
+    /**
+     * @description.en Maximum color temperature
+     * @description.zh 最大色温
+     * @default 1000
+     */
+    max?: 100 | 1000;
 }
 export declare const defaultProps: IProps;

package/lib/props.js

@@ -6,5 +6,7 @@ export const defaultProps = {
   trackStyle: {},
   onTouchStart: () => null,
   onTouchMove: () => null,
-  onTouchEnd: () => null
+  onTouchEnd: () => null,
+  max: 1000,
+  hue: 0
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ray-js/lamp-saturation-slider",
-  "version": "1.1.5",
+  "version": "1.1.6-beta-2",
   "description": "照明色温Slider",
   "main": "lib/index",
   "files": [
@@ -60,7 +60,7 @@
     ]
   },
   "dependencies": {
-    "@ray-js/components-ty-slider": "^0.2.40"
+    "@ray-js/components-ty-slider": "^0.2.52"
   },
   "maintainers": [
     {