aio-range 2.0.2 → 2.0.4

package/index.d.ts

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

package/index.js

@@ -1,8 +1,7 @@
 import { createElement as _createElement } from "react";
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 import { createContext, createRef, useContext, useEffect, useRef, useState } from "react";
-import * as UT from 'aio-utils';
-import { $ } from 'aio-deps';
+import { Swip } from 'aio-class';
 import './index.css';
 const RangeContext = createContext({});
 const RangeProvider = ({ value, children }) => _jsx(RangeContext.Provider, { value: value, children: children });
@@ -16,7 +15,7 @@ export const AIOSpinner = (props) => {
     return (_jsx(RangeProvider, { value: { rangeHook }, children: _jsxs("div", Object.assign({}, rangeHook.getRootProps(props, 'spinner'), { children: [_jsx(SpinnerText, { text: props.text }), _jsx(SpinnerSvg, {}), _jsx(RangeLabels, { type: 'spinner' }), _jsx(RangeValues, { type: 'spinner' })] })) }));
 };
 const SliderGroove = ({ grooveAttrs }) => {
-    return _jsx("div", Object.assign({}, UT.AddToAttrs(grooveAttrs, { className: 'ai-slider-groove' })));
+    return _jsx("div", Object.assign({}, AddToAttrs(grooveAttrs, { className: 'ai-slider-groove' })));
 };
 const SpinnerText = ({ text }) => {
     if (text === undefined || text === null) {
@@ -84,7 +83,7 @@ const SliderFills = () => {
 const SliderRect = ({ range }) => {
     let { rangeHook } = useRangeProvider();
     let { color, from, to, className, style, offset, thickness, roundCap } = range;
-    className = UT.classListToString(['ai-slider-range', range.className]);
+    className = classListToString(['ai-slider-range', range.className]);
     const { vertical, reverse } = rangeHook.rootProps;
     let startSide = rangeHook.getXPByValue(from), endSide = rangeHook.getXPByValue(to);
     let Style = Object.assign({ [vertical ? 'height' : 'width']: (endSide - startSide) + '%', [vertical ? 'width' : 'height']: range.thickness, [vertical ? (reverse ? 'bottom' : 'top') : (reverse ? 'right' : 'left')]: startSide + '%', [vertical ? 'left' : 'top']: `calc(50% - ${(thickness / 2) + offset}px)`, borderRadius: roundCap ? 48 : 0, background: color }, style);
@@ -113,7 +112,7 @@ const SpinnerArc = ({ range }) => {
             a = endAngle;
         }
     }
-    return _jsx("path", { d: UT.svgArc(x, y, radius, a, b), stroke: color, strokeWidth: thickness, fill: 'transparent', strokeLinecap: roundCap ? 'round' : undefined, className: range.className }, `from${from}to${to}`);
+    return _jsx("path", { d: svgArc(x, y, radius, a, b), stroke: color, strokeWidth: thickness, fill: 'transparent', strokeLinecap: roundCap ? 'round' : undefined, className: range.className }, `from${from}to${to}`);
 };
 const SpinnerHandle = ({ rangeValue }) => {
     let { rangeHook } = useRangeProvider();
@@ -142,7 +141,7 @@ const SpinnerHandle = ({ rangeValue }) => {
             return { width, height, left: offset, background: color };
         }
     }
-    let PROPS = UT.AddToAttrs({}, { className: 'ai-spinner-handle', style: getStyle(), attrs: { draggable: false } });
+    let PROPS = AddToAttrs({}, { className: 'ai-spinner-handle', style: getStyle(), attrs: { draggable: false } });
     return (_createElement("div", Object.assign({}, PROPS, { key: 'rangehandle' + rangeValue.index })));
 };
 const RangeLabel = (props) => {
@@ -156,9 +155,9 @@ const RangeLabel = (props) => {
         if (props.type !== "spinner" || !label.autoHide || vertical) {
             return;
         }
-        let container = $(rangeHook.mainDom.current);
-        let labels = container.find(`.ai-range-label`);
-        if (!labels.length) {
+        const container = rangeHook.mainDom.current;
+        const labels = container.querySelectorAll('.ai-range-label');
+        if (!labels || !labels.length) {
             return;
         }
         let firstLabel = labels.eq(0);
@@ -189,7 +188,10 @@ const RangeLabel = (props) => {
             }
         }
     }
-    useEffect(() => { $(window).on('resize', updateLabels); }, []);
+    useEffect(() => {
+        window.addEventListener('resize', updateLabels);
+        return () => { window.removeEventListener('resize', updateLabels); };
+    }, []);
     useEffect(() => { updateLabels(); });
     function RENDER(init) {
         if (!init && !dynamic) {
@@ -237,21 +239,21 @@ const useRange = (PROPS, type) => {
         }
         clearTimeout(temp.timeOut);
         temp.timeOut = setTimeout(() => {
-            new UT.Swip({
+            new Swip({
                 reverseX: !!props.reverse,
-                //vertical condition
                 reverseY: !!props.reverse && !!props.vertical,
-                dom: () => $(mainDom.current),
-                start: (p) => {
+                dom: mainDom.current,
+                childIndexAttr: 'data-range-index',
+                start: ({ index }) => {
+                    var _a;
                     const { disabled } = propsRef.current;
                     if (disabled === true) {
                         return false;
                     }
-                    let { event } = p;
-                    if (event.target !== null) {
-                        let index = UT.GetAttr($(event.target), 'data-range-index');
-                        temp.index = index === null ? false : +index;
-                        temp.start = [...values];
+                    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];
                 },
@@ -261,6 +263,12 @@ 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) {
@@ -479,7 +487,9 @@ const useRange = (PROPS, type) => {
         return xp * (end - start) / 100;
     }
     function getXPByX(x) {
-        return x * 100 / $(mainDom.current)[vertical ? 'height' : 'width']();
+        const container = mainDom.current;
+        const size = vertical ? container.clientHeight : container.clientWidth;
+        return (x * 100) / size;
     }
     const getArc = (rc) => {
         let roundCap = rc.roundCap || false, full = rc.full || false, offset = rc.offset, color = rc.color || '#000', className = rc.className;
@@ -490,9 +500,12 @@ const useRange = (PROPS, type) => {
         return { thickness, radius, color, roundCap, full, className, from, to };
     };
     function handleZIndex(index) {
-        let containers = $(mainDom.current).find(`.ai-range-value-container`);
-        containers.css({ zIndex: 10 });
-        containers.eq(index).css({ zIndex: 100 });
+        const dom = mainDom.current;
+        const containers = dom.querySelectorAll('.ai-range-value-container');
+        containers === null || containers === void 0 ? void 0 : containers.forEach((container) => { container.style.zIndex = '10'; });
+        if (containers === null || containers === void 0 ? void 0 : containers[index]) {
+            containers[index].style.zIndex = '100';
+        }
     }
     function getOffset(rangeValue) {
         const { pointOffset = (() => 0) } = props.rangeOption || {};
@@ -535,7 +548,7 @@ const useRange = (PROPS, type) => {
     function getRootProps(props, type) {
         let { attrs = {} } = props;
         let rootStyle = getRootStyle(props, type);
-        return UT.AddToAttrs(attrs, { className: getRootClassName(props, type), style: rootStyle, attrs: { ref: mainDom } });
+        return AddToAttrs(attrs, { className: getRootClassName(props, type), style: rootStyle, attrs: { ref: mainDom } });
     }
     function getDistance(labelItem, type) {
         let { offset = 0 } = labelItem;
@@ -560,7 +573,7 @@ const useRange = (PROPS, type) => {
                     background: config.color
                 } }));
         }
-        const htmlProps = UT.AddToAttrs({}, { className: ['ai-range-label'], attrs: { draggable: false } });
+        const htmlProps = AddToAttrs({}, { className: ['ai-range-label'], attrs: { draggable: false } });
         const containerStyle = Object.assign({ [getSide()]: getXPByValue(itemValue) + '%' }, getDistance(labelItem, 'slider'));
         const containerProps = { className: 'ai-range-label-container', style: containerStyle, draggable: false };
         return (_jsx("div", Object.assign({}, containerProps, { children: _jsx("div", Object.assign({}, htmlProps, { children: html })) })));
@@ -595,7 +608,7 @@ const useRange = (PROPS, type) => {
         let containerProps = { className: 'ai-range-label-container', style: containerStyle, draggable: false };
         const distance = getDistance(labelItem, "spinner");
         let textStyle = Object.assign(Object.assign({}, distance), { transform: labelItem.fixAngle ? `rotate(${-angle}deg)` : undefined });
-        const htmlProps = UT.AddToAttrs({}, { className: ['ai-range-label'], style: textStyle, attrs: { draggable: false } });
+        const htmlProps = AddToAttrs({}, { className: ['ai-range-label'], style: textStyle, attrs: { draggable: false } });
         return (_jsx("div", Object.assign({}, containerProps, { children: _jsx("div", Object.assign({}, htmlProps, { children: html })) })));
     }
     return {
@@ -605,3 +618,65 @@ const useRange = (PROPS, type) => {
         getSliderLabel
     };
 };
+function svgArcRange(centerX, centerY, radius, angleInDegrees) {
+    let angleInRadians = (angleInDegrees - 90) * Math.PI / 180.0;
+    return {
+        x: centerX + (radius * Math.cos(angleInRadians)),
+        y: centerY + (radius * Math.sin(angleInRadians))
+    };
+}
+function svgArc(x, y, radius, startAngle, endAngle) {
+    if (startAngle === endAngle || endAngle - startAngle === 360) {
+        startAngle = 0;
+        endAngle = 360;
+    }
+    if (startAngle === 360) {
+        startAngle = 359.99;
+    }
+    if (endAngle === 360) {
+        endAngle = 359.99;
+    }
+    let start = svgArcRange(x, y, radius, endAngle);
+    let end = svgArcRange(x, y, radius, startAngle);
+    let largeArcFlag;
+    if (endAngle - startAngle < -180) {
+        largeArcFlag = '0';
+    }
+    else if (endAngle - startAngle < 0) {
+        largeArcFlag = '1';
+    }
+    else if (endAngle - startAngle <= 180) {
+        largeArcFlag = '0';
+    }
+    else if (endAngle - startAngle <= 360) {
+        largeArcFlag = '1';
+    }
+    else {
+        largeArcFlag = '0';
+    }
+    return ["M", start.x, start.y, "A", radius, radius, 0, largeArcFlag, 0, end.x, end.y].join(" ");
+}
+function classListToString(classes) {
+    let list = [];
+    const getClasses = (cls) => {
+        if (Array.isArray(cls)) {
+            return cls.filter((o) => !!o && typeof o === 'string');
+        }
+        else if (!!cls && typeof cls === 'string') {
+            return cls.split(' ');
+        }
+        return [];
+    };
+    for (let i = 0; i < classes.length; i++) {
+        const cls = classes[i];
+        list = [...list, ...getClasses(cls)];
+    }
+    return list.length ? list.join(' ') : '';
+}
+function AddToAttrs(attrs, p) {
+    attrs = attrs || {};
+    const className = classListToString([attrs.className, p === null || p === void 0 ? void 0 : p.className]);
+    let newStyle = Object.assign(Object.assign({}, attrs.style), p === null || p === void 0 ? void 0 : p.style);
+    const res = Object.assign(Object.assign(Object.assign({}, attrs), { className, style: newStyle }), p === null || p === void 0 ? void 0 : p.attrs);
+    return res;
+}

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "aio-range",
-    "version": "2.0.2",
+    "version": "2.0.4",
     "description": "linear and circular range input",
     "main": "index.js",
     "scripts": {
@@ -12,8 +12,7 @@
         "url": "git+https://github.com/mohammadFeiz/aio-range.git"
     },
     "dependencies": {
-        "aio-deps": "latest",
-        "aio-utils": "latest"
+        "aio-class":"latest"
     },
     "keywords": [
         "range",