aio-range 2.0.3 → 2.1.0

package/index.d.ts

@@ -72,6 +72,9 @@ export type I_Range = {
     labels?: AI_label[];
     ranges?: I_range[];
     rangeOption?: {
+        clickMode?: 'step' | 'exact';
+        onStartDrag?: (index: number) => void;
+        onEndDrag?: () => void;
         pointHtml?: (p: {
             index: number;
             value: number;

package/index.js

@@ -245,12 +245,16 @@ const useRange = (PROPS, type) => {
                 dom: mainDom.current,
                 childIndexAttr: 'data-range-index',
                 start: ({ index }) => {
+                    var _a;
                     const { disabled } = propsRef.current;
                     if (disabled === true) {
                         return false;
                     }
                     temp.index = index;
                     temp.start = [...values];
+                    if ((_a = PROPS.rangeOption) === null || _a === void 0 ? void 0 : _a.onStartDrag) {
+                        PROPS.rangeOption.onStartDrag(index || 0);
+                    }
                     return [0, 0];
                 },
                 move: (p) => {
@@ -259,36 +263,50 @@ const useRange = (PROPS, type) => {
                         changeHandle({ dx: change.dx, dy: change.dy, deltaCenterAngle: change.deltaCenterAngle, centerAngle: mousePosition.centerAngle });
                     }
                 },
+                end: () => {
+                    var _a;
+                    if ((_a = PROPS.rangeOption) === null || _a === void 0 ? void 0 : _a.onEndDrag) {
+                        PROPS.rangeOption.onEndDrag();
+                    }
+                },
                 onClick: function (p) {
                     const { disabled } = propsRef.current;
                     if (disabled) {
                         return;
                     }
-                    click(p.mousePosition);
+                    click(p.mousePosition, p.domLimit);
                 }
             });
         }, 100);
     }, [changeHandle]);
-    function click(mousePosition) {
+    function click(mousePosition, domLimit) {
+        var _a;
+        const exactClick = type === 'slider' && ((_a = props.rangeOption) === null || _a === void 0 ? void 0 : _a.clickMode) === 'exact' && !props.multiple && !props.vertical;
         if (props.disabled === true) {
             return;
         }
-        let clickedValue;
-        //vertical condition
-        if (type === "spinner") {
-            clickedValue = getValueByAngle(mousePosition.centerAngle);
-        }
-        else {
-            clickedValue = getValueByXP(mousePosition[props.vertical ? 'yp' : 'xp']);
-        }
-        if (clickedValue < values[values.length - 1] && clickedValue > values[0]) {
-            return;
-        }
-        if (clickedValue < values[0]) {
-            change1Unit(-1);
+        if (!exactClick) {
+            let clickedValue;
+            //vertical condition
+            if (type === "spinner") {
+                clickedValue = getValueByAngle(mousePosition.centerAngle);
+            }
+            else {
+                clickedValue = getValueByXP(mousePosition[props.vertical ? 'yp' : 'xp']);
+            }
+            if (clickedValue < values[values.length - 1] && clickedValue > values[0]) {
+                return;
+            }
+            if (clickedValue < values[0]) {
+                change1Unit(-1);
+            }
+            else {
+                change1Unit(1);
+            }
         }
         else {
-            change1Unit(1);
+            const xp = 100 * mousePosition.x / domLimit.width;
+            changeByPercent(props.reverse ? 100 - xp : xp);
         }
     }
     function changeHandle(obj) {
@@ -345,6 +363,20 @@ const useRange = (PROPS, type) => {
         newValue = moveAll(newValue, dir * props.step);
         changeValue(newValue);
     }
+    function changeByPercent(percent) {
+        const { start, end } = props;
+        const range = end - start;
+        const value = percent * range / 100 + start;
+        let newValue = [value];
+        changeValue(newValue);
+    }
+    function moveAll(newValue, offset, ifFailedReturnOriginalValue) {
+        let res = newValue.map((o) => o + offset);
+        if (res[0] < props.start || res[res.length - 1] > props.end) {
+            return ifFailedReturnOriginalValue ? values : newValue;
+        }
+        return res;
+    }
     function changeValue(newValue) {
         if (!props.onChange || props.disabled === true) {
             return;
@@ -368,13 +400,6 @@ const useRange = (PROPS, type) => {
         }
         return { before, after };
     }
-    function moveAll(newValue, offset, ifFailedReturnOriginalValue) {
-        let res = newValue.map((o) => o + offset);
-        if (res[0] < props.start || res[res.length - 1] > props.end) {
-            return ifFailedReturnOriginalValue ? values : newValue;
-        }
-        return res;
-    }
     const getFloatLength = (step) => {
         const str = step.toString();
         if (str.indexOf('.') === -1) {

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "aio-range",
-    "version": "2.0.3",
+    "version": "2.1.0",
     "description": "linear and circular range input",
     "main": "index.js",
     "scripts": {