aio-range 2.0.1 → 2.0.3

package/index.d.ts

@@ -23,7 +23,6 @@ export type AI_label = {
     zIndex?: number;
     setting: (value: number, p: {
         angle: number;
-        disabled: boolean;
         index: number;
     }) => AI_labelItem;
 };
@@ -76,22 +75,18 @@ export type I_Range = {
         pointHtml?: (p: {
             index: number;
             value: number;
-            disabled: boolean;
             angle: number;
         }) => ReactNode | false | undefined;
         pointContent?: (p: {
             index: number;
             value: number;
-            disabled: boolean;
             angle: number;
         }) => ReactNode;
         pointOffset?: (p: {
             index: number;
             value: number;
-            disabled: boolean;
             angle: number;
         }) => number | undefined;
-        disabled?: (value: number) => boolean;
         fill?: (startPoint: {
             index: number;
             value: number;
@@ -107,7 +102,6 @@ export type I_Range = {
         handle?: (p: {
             index: number;
             value: number;
-            disabled: boolean;
             angle: number;
         }) => {
             widthPercent?: number;
@@ -133,7 +127,6 @@ export declare const AIOSlider: FC<I_Range>;
 export declare const AIOSpinner: FC<I_Range>;
 type I_RangeValue = {
     value: number;
-    disabled: boolean;
     angle: number;
     index: number;
 };
@@ -144,7 +137,6 @@ declare const useRange: (PROPS: I_Range, type: 'slider' | 'spinner') => {
     fixAngle: (angle: number) => number;
     getValueByAngle: (angle: number) => number;
     mainDom: any;
-    isValueDisabled: (value: number) => boolean;
     rootProps: I_Range_default;
     getRootProps: (props: I_Range, type: 'slider' | 'spinner') => any;
     getLabelList: (label: AI_label) => number[];
@@ -188,7 +180,6 @@ declare const useRange: (PROPS: I_Range, type: 'slider' | 'spinner') => {
         };
     };
     getRangeValue: (itemValue: number, index: number) => {
-        disabled: boolean;
         value: number;
         index: number;
         angle: 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) {
@@ -197,8 +199,7 @@ const RangeLabel = (props) => {
         }
         const list = rangeHook.getLabelList(label);
         return (_jsx("div", { className: 'ai-range-labels', style: { zIndex }, children: list.map((itemValue, index) => {
-                let disabled = rangeHook.isValueDisabled(itemValue);
-                let labelItem = label.setting(itemValue, { disabled, angle: 0, index });
+                let labelItem = label.setting(itemValue, { angle: 0, index });
                 if (props.type === "slider") {
                     return (rangeHook.getSliderLabel(labelItem, itemValue));
                 }
@@ -218,7 +219,7 @@ const AIRangePoint = ({ rangeValue, type }) => {
         return null;
     }
     const containerStyle = type === "spinner" ? rangeHook.getSpinnerPointContainerStyle(rangeValue) : rangeHook.getSliderPointContainerStyle(rangeValue);
-    return (_jsx("div", { style: containerStyle, className: 'ai-range-point-container', draggable: false, "data-index": rangeValue.index, onMouseDown: () => rangeHook.handleZIndex(rangeValue.index), children: point }, 'rangepoint' + rangeValue.index));
+    return (_jsx("div", { style: containerStyle, className: 'ai-range-point-container', draggable: false, "data-range-index": rangeValue.index, onMouseDown: () => rangeHook.handleZIndex(rangeValue.index), children: point }, 'rangepoint' + rangeValue.index));
 };
 const useRange = (PROPS, type) => {
     const getProps = () => {
@@ -233,27 +234,23 @@ const useRange = (PROPS, type) => {
     const [values, setValues] = useState([]);
     const { vertical, reverse, start = 0, end = 100, min = start, max = end, step = 1, rotate = 0, round = 1, size = 72 } = props;
     useEffect(() => {
-        if (!props.onChange || props.disabled === true) {
+        if (!props.onChange) {
             return;
         }
         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 }) => {
                     const { disabled } = propsRef.current;
                     if (disabled === true) {
                         return false;
                     }
-                    let { event } = p;
-                    if (event.target !== null) {
-                        let index = UT.GetAttr($(event.target), 'data-index');
-                        temp.index = index === null ? false : +index;
-                        temp.start = [...values];
-                    }
+                    temp.index = index;
+                    temp.start = [...values];
                     return [0, 0];
                 },
                 move: (p) => {
@@ -273,7 +270,7 @@ const useRange = (PROPS, type) => {
         }, 100);
     }, [changeHandle]);
     function click(mousePosition) {
-        if (props.disabled === true || temp.index !== false) {
+        if (props.disabled === true) {
             return;
         }
         let clickedValue;
@@ -301,17 +298,12 @@ const useRange = (PROPS, type) => {
         let newValue = getChangedValue(obj);
         changeValue(newValue);
     }
-    function isValueDisabled(value) {
-        const { rangeOption = {} } = props;
-        const { disabled: d = () => false } = rangeOption;
-        return d(value);
-    }
     function getChangedValue(obj) {
         let { dx, dy, deltaCenterAngle, centerAngle } = obj;
         let startValue = [...temp.start];
         let index = temp.index;
         //agar faghat yek point darim har koja mousedown shod farz kon rooye oon point mousedown karde im
-        if (startValue.length === 1 && index === false) {
+        if (startValue.length === 1 && index !== false) {
             index = 0;
         }
         let res;
@@ -325,8 +317,7 @@ const useRange = (PROPS, type) => {
             else {
                 deltaValue = Math.round(getValueByXP(getXPByX(props.vertical ? dy : dx)) / props.step) * props.step;
             }
-            let newValue = moveAll(startValue, deltaValue, true);
-            res = !isValueValid(newValue) ? values : newValue;
+            res = moveAll(startValue, deltaValue, true);
         }
         else {
             let { before, after } = getIndexLimit(index);
@@ -344,9 +335,6 @@ const useRange = (PROPS, type) => {
             if (newUnitValue < before) {
                 newUnitValue = before;
             }
-            if (isValueDisabled(newUnitValue)) {
-                newUnitValue = values[index];
-            }
             startValue[index] = newUnitValue;
             res = startValue;
         }
@@ -354,12 +342,7 @@ const useRange = (PROPS, type) => {
     }
     function change1Unit(dir) {
         let newValue = [...values];
-        let lastValue = JSON.stringify(newValue);
         newValue = moveAll(newValue, dir * props.step);
-        while (!isValueValid(newValue) && JSON.stringify(newValue) !== lastValue) {
-            lastValue = JSON.stringify(newValue);
-            newValue = moveAll(newValue, dir * props.step);
-        }
         changeValue(newValue);
     }
     function changeValue(newValue) {
@@ -369,14 +352,6 @@ const useRange = (PROPS, type) => {
         newValue = getValues(newValue);
         props.onChange(!!props.multiple ? newValue : newValue[0]);
     }
-    function isValueValid(value) {
-        for (let i = 0; i < value.length; i++) {
-            if (isValueDisabled(value[i])) {
-                return false;
-            }
-        }
-        return true;
-    }
     function getIndexLimit(index) {
         let before, after;
         if (index === 0) {
@@ -400,6 +375,13 @@ const useRange = (PROPS, type) => {
         }
         return res;
     }
+    const getFloatLength = (step) => {
+        const str = step.toString();
+        if (str.indexOf('.') === -1) {
+            return 0;
+        }
+        return str.split('.')[1].length;
+    };
     function getValues(value) {
         if (!Array.isArray(value)) {
             value = [value || 0];
@@ -407,8 +389,12 @@ const useRange = (PROPS, type) => {
         for (let i = 0; i < value.length; i++) {
             let point = value[i] || 0;
             point = Math.round((point - start) / step) * step + start;
-            const { floatLength } = UT.Float(step);
-            point = +point.toFixed(floatLength);
+            try {
+                point = +point.toFixed(getFloatLength(step));
+            }
+            catch (err) {
+                console.error(err.message);
+            }
             if (point < min) {
                 point = min;
             }
@@ -491,7 +477,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;
@@ -502,9 +490,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 || {};
@@ -518,8 +509,7 @@ const useRange = (PROPS, type) => {
     }
     const getRangeValue = (itemValue, index) => {
         let angle = fixAngle(getAngleByValue(itemValue));
-        const disabled = isValueDisabled(itemValue);
-        return { disabled, value: itemValue, index, angle };
+        return { value: itemValue, index, angle };
     };
     function getRootClassName(props, type) {
         let c = 'ai-range';
@@ -548,7 +538,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;
@@ -573,7 +563,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 })) })));
@@ -608,13 +598,75 @@ 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 {
-        values, getValues, getSide, fixAngle, getValueByAngle, mainDom, isValueDisabled, rootProps: props, getRootProps, getLabelList,
+        values, getValues, getSide, fixAngle, getValueByAngle, mainDom, rootProps: props, getRootProps, getLabelList,
         getArc, getAngleByValue, getRectByStr, sbp, getXPByValue, getValueByXP, getXPByX, handleZIndex, getSpinnerLabel,
         getSliderPointContainerStyle, getSpinnerPointContainerStyle, getSliderValueProps, getSpinnerValueProps, getRangeValue,
         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.1",
+    "version": "2.0.3",
     "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",