@ray-js/lamp-saturation-slider 1.1.0 → 1.1.1

package/README.md

@@ -2,9 +2,7 @@ English | [简体中文](./README-zh_CN.md)
 
 # @ray-js/lamp-saturation-slider
 
-[![latest](https://img.shields.io/npm/v/@ray/lamp-saturation-slider/latest.svg)](https://www.npmjs.com/package/@ray/lamp-saturation-slider) [![download](https://img.shields.io/npm/dt/@ray/lamp-saturation-slider.svg)](https://www.npmjs.com/package/@ray/lamp-saturation-slider)
-
-> 照明彩光 Slider
+> Lamp saturation Slider
 
 ## Installation
 
@@ -25,12 +23,6 @@ export interface IProps {
    * @default false
    */
   disable?: boolean;
-  /**
-   * @description.zh slider方向
-   * @description.en slider direction
-   * @default horizontal
-   */
-  direction?: 'horizontal' | 'vertical';
   /**
    * @description.zh 滑动槽样式
    * @description.en
@@ -43,6 +35,12 @@ export interface IProps {
    * @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
@@ -72,27 +70,24 @@ export const defaultProps: IProps = {
 ```
 
 ```tsx
-import LampSaturationSlider from '@ray-js/components-ty-lamp';
+import { LampSaturationSlider } from '@ray-js/components-ty-lamp';
 
 export default () => {
-  const [hue, setHue] = useState(100);
+  const [saturation, setSaturation] = useState(100);
 
   useEffect(() => {
     // 模拟dp上报
     setTimeout(() => {
-      setHue(321);
+      setSaturation(321);
     }, 3000);
   }, []);
 
   return (
     <LampSaturationSlider
-      value={hue}
-      disable
-      onTouchMove={val => {
-        setHue(val);
-      }}
+      hue={100}
+      value={saturation}
       onTouchEnd={val => {
-        setHue(val);
+        setSaturation(val);
       }}
     />
   );

package/lib/components/slider/index.sjs

@@ -738,7 +738,7 @@ const onChange = (ownerInstance, instanceId, position) => {
   });
 
   // publish
-  ownerInstance.triggerEvent('onChange', {
+  ownerInstance.triggerEvent('move', {
     instanceId,
     start: nextStart,
     end: nextEnd,
@@ -768,7 +768,7 @@ const onEnd = (event, ownerInstance, instanceId) => {
   });
 
   // publish
-  ownerInstance.triggerEvent('onEnd', {
+  ownerInstance.triggerEvent('end', {
     instanceId,
     start: nextStart,
     end: nextEnd,
@@ -794,7 +794,7 @@ const onStart = (event, ownerInstance, instanceId) => {
   });
 
   // publish
-  ownerInstance.triggerEvent('onStart', {
+  ownerInstance.triggerEvent('start', {
     instanceId,
     start: nextStart,
     end: nextEnd,

package/lib/index.js

@@ -23,6 +23,8 @@ function SaturationSlider(props) {
     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),
@@ -52,19 +54,17 @@ function SaturationSlider(props) {
     disable: disable,
     end: controllerSaturation,
     step: 1,
-    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) {
+      if (detail.end === startRefValue.current) {
         return;
       }
       onTouchStart && onTouchStart(detail.end);
-      lastSaturation.current = detail.end;
+      startRefValue.current = detail.end;
     },
     bindmove: function handTouchMove(_ref2) {
       var detail = _ref2.detail;
@@ -99,11 +99,11 @@ function SaturationSlider(props) {
       if (!onTouchEnd || disable) {
         return;
       }
-      if (detail.end === preSaturation.current) {
+      if (detail.end === endRefValue.current) {
         return;
       }
       onTouchEnd && onTouchEnd(detail.end);
-      preSaturation.current = detail.end;
+      endRefValue.current = detail.end;
     },
     trackStyle: _objectSpread(_objectSpread({
       width: "".concat(646, "rpx"),

package/lib/props.d.ts

@@ -6,12 +6,6 @@ export interface IProps {
      * @default false
      */
     disable?: boolean;
-    /**
-     * @description.zh slider方向
-     * @description.en slider direction
-     * @default horizontal
-     */
-    direction?: "horizontal" | "vertical";
     /**
      * @description.zh 滑动槽样式
      * @description.en Sliding groove style

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ray-js/lamp-saturation-slider",
-  "version": "1.1.0",
+  "version": "1.1.1",
   "description": "照明色温Slider",
   "main": "lib/index",
   "files": [
@@ -28,7 +28,8 @@
     "start:wechat": "ray start ./example -t wechat --verbose",
     "start:web": "ray start ./example -t web",
     "prepublishOnly": "yarn build",
-    "release-it": "standard-version"
+    "release-it": "standard-version",
+    "copy": "sh copy.sh"
   },
   "peerDependencies": {},
   "devDependencies": {
@@ -50,7 +51,7 @@
   "husky": {
     "hooks": {
       "commit-msg": "commitlint -E HUSKY_GIT_PARAMS --config commitlint.config.js",
-      "pre-commit": "lint-staged"
+      "pre-commit": "lint-staged && npm run copy"
     }
   },
   "lint-staged": {