aio-range 1.0.1 → 2.0.1

package/index.css

@@ -4,42 +4,39 @@
     user-select: none;
 }
 
-
-.aio-input-range-value {
-    width: 100%;
-    overflow: visible;
-}
-
-.ai-range-horizontal {
+.ai-slider-horizontal {
     height: 48px;
     align-items: center;
     width: 100%;
 }
 
-.ai-range-horizontal .ai-range-groove {
+.ai-slider-horizontal .ai-slider-groove {
     height: 1px;
     width: 100%;
     background: #ddd;
 }
 
-.ai-range-vertical {
+.ai-slider-vertical {
     width: 48px;
     height: 240px;
     justify-content: center;
     margin: 12px 0;
 }
 
-.ai-range-vertical .ai-range-groove {
+.ai-slider-vertical .ai-slider-groove {
     width: 1px;
     height: 100%;
     background: #ddd;
 }
 
-.ai-range-reverse {
+.ai-slider-reverse {
+    direction: rtl;
+}
+.ai-spinner-reverse {
     direction: rtl;
 }
 
-.ai-range-round {
+.ai-spinner {
     border-radius: 100%;
     justify-content: center;
     align-items: center;
@@ -57,11 +54,11 @@
     z-index: 10;
 }
 
-.ai-range-round .ai-range-value-container {
+.ai-spinner .ai-range-value-container {
     justify-content: flex-end;
 }
 
-.aio-input-handle {
+.ai-spinner-handle {
     position: absolute;
     width: 0;
     height: 0;
@@ -76,7 +73,7 @@
     height: 0;
 }
 
-.ai-range-round .ai-range-label-container {
+.ai-spinner .ai-range-label-container {
     justify-content: flex-end;
 }
 
@@ -84,12 +81,12 @@
     position: absolute;
 }
 
-.ai-range-horizontal .ai-range-labels {
+.ai-slider-horizontal .ai-range-labels {
     width: 100%;
     height: 100%;
 }
 
-.ai-range-vertical .ai-range-labels {
+.ai-slider-vertical .ai-range-labels {
     width: 100%;
     height: 100%;
 }
@@ -100,6 +97,8 @@
     align-items: center;
     justify-content: center;
     font-size: 12px;
+    width: 0;
+    height:0;
 }
 
 .ai-range-label>* {
@@ -135,7 +134,7 @@
     justify-content: center;
 }
 
-.ai-range-range {
+.ai-slider-range {
     position: absolute;
 }
 
@@ -148,7 +147,7 @@
     height: 0;
 }
 
-.ai-range-round .ai-range-scale-container {
+.ai-spinner .ai-range-scale-container {
     justify-content: flex-end;
 }
 
@@ -164,27 +163,27 @@
 
 }
 
-.ai-range-round .ai-range-scale {
+.ai-spinner .ai-range-scale {
     height: 2px;
     width: 6px;
     left: 6px;
 }
 
-.ai-range-vertical .ai-range-scale {
+.ai-slider-vertical .ai-range-scale {
     height: 2px;
     width: 6px;
 }
 
-.ai-range-fill {
+.ai-slider-fill {
     background: #0069ff;
     position: absolute;
     z-index: 10;
 }
 
-.ai-range-horizontal .ai-range-fill {
+.ai-slider-horizontal .ai-slider-fill {
     height: 4px;
 }
 
-.ai-range-vertical .ai-range-fill {
+.ai-slider-vertical .ai-slider-fill {
     width: 4px;
 }

package/index.d.ts

@@ -1,4 +1,4 @@
-import { FC, ReactNode } from "react";
+import { type FC, type ReactNode } from "react";
 import './index.css';
 export type AI_RangeContext = {
     rangeHook: ReturnType<typeof useRange>;
@@ -24,6 +24,7 @@ export type AI_label = {
     setting: (value: number, p: {
         angle: number;
         disabled: boolean;
+        index: number;
     }) => AI_labelItem;
 };
 export type AI_labelItem = {
@@ -78,6 +79,12 @@ export type I_Range = {
             disabled: boolean;
             angle: number;
         }) => ReactNode | false | undefined;
+        pointContent?: (p: {
+            index: number;
+            value: number;
+            disabled: boolean;
+            angle: number;
+        }) => ReactNode;
         pointOffset?: (p: {
             index: number;
             value: number;
@@ -122,13 +129,15 @@ type I_Range_default = I_Range & {
     rotate: number;
     ranges: I_range[];
 };
-declare const AIORange: FC<I_Range>;
-export default AIORange;
-export type I_RangeLabelItem = {
-    label: AI_label;
-    itemValue: number;
+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;
 };
-declare const useRange: (PROPS: I_Range) => {
+declare const useRange: (PROPS: I_Range, type: 'slider' | 'spinner') => {
     values: number[];
     getValues: (value: any) => number[];
     getSide: () => "left" | "right" | "bottom" | "top";
@@ -137,6 +146,8 @@ declare const useRange: (PROPS: I_Range) => {
     mainDom: any;
     isValueDisabled: (value: number) => boolean;
     rootProps: I_Range_default;
+    getRootProps: (props: I_Range, type: 'slider' | 'spinner') => any;
+    getLabelList: (label: AI_label) => number[];
     getArc: (rc: I_range) => {
         thickness: number;
         color: string;
@@ -153,5 +164,35 @@ declare const useRange: (PROPS: I_Range) => {
     getXPByValue: (value: number) => number;
     getValueByXP: (xp: number) => number;
     getXPByX: (x: number) => number;
-    getGroove: () => import("react/jsx-runtime").JSX.Element;
+    handleZIndex: (index: number) => void;
+    getSpinnerLabel: (labelItem: AI_labelItem, itemValue: number) => import("react/jsx-runtime").JSX.Element;
+    getSliderPointContainerStyle: (rangeValue: I_RangeValue) => {
+        [x: string]: number;
+    };
+    getSpinnerPointContainerStyle: (rangeValue: I_RangeValue) => {
+        left: number;
+        transform: string;
+    };
+    getSliderValueProps: (rangeValue: I_RangeValue) => {
+        className: string;
+        draggable: boolean;
+        style: {
+            [x: string]: string;
+        };
+    };
+    getSpinnerValueProps: (rangeValue: I_RangeValue) => {
+        className: string;
+        draggable: boolean;
+        style: {
+            transform: string;
+        };
+    };
+    getRangeValue: (itemValue: number, index: number) => {
+        disabled: boolean;
+        value: number;
+        index: number;
+        angle: number;
+    };
+    getSliderLabel: (labelItem: AI_labelItem, itemValue: number) => import("react/jsx-runtime").JSX.Element;
 };
+export {};

package/index.js

@@ -1,5 +1,5 @@
 import { createElement as _createElement } from "react";
-import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+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';
@@ -7,90 +7,59 @@ import './index.css';
 const RangeContext = createContext({});
 const RangeProvider = ({ value, children }) => _jsx(RangeContext.Provider, { value: value, children: children });
 const useRangeProvider = () => useContext(RangeContext);
-const AIORange = (props) => {
-    const rangeHook = useRange(props);
-    function getRootClassName() {
-        let c = 'ai-range';
-        if (props.round) {
-            c += ` ai-range-round`;
-        }
-        else {
-            c += props.vertical ? ` ai-range-vertical` : ` ai-range-horizontal`;
-        }
-        if (props.className) {
-            c += ' ' + props.className;
-        }
-        if (props.reverse) {
-            c += ` ai-range-reverse`;
-        }
-        return c;
-    }
-    function getRootStyle() {
-        let { style } = props;
-        let res;
-        if (props.round) {
-            res = { width: props.size, height: props.size };
-        }
-        return Object.assign(Object.assign({}, res), style);
-    }
-    function getRootProps() {
-        let { attrs = {} } = props;
-        let rootStyle = getRootStyle();
-        return UT.AddToAttrs(attrs, { className: getRootClassName(), style: rootStyle, attrs: { ref: rangeHook.mainDom } });
-    }
-    function root_node() {
-        const { labels } = rangeHook.rootProps;
-        return (_jsxs("div", Object.assign({}, getRootProps(), { children: [rangeHook.getGroove(), props.text !== undefined && _jsx("div", { className: 'ai-range-text', children: props.text }, 'rangetext'), !props.round &&
-                    _jsxs(_Fragment, { children: [_jsx(AIRangeRects, {}, 'rangeRects'), _jsx(RangeFills, {}, 'rangeFills')] }), _jsx(RangeSvg, {}), labels.map((label, i) => _jsx(RangeLabel, { label: label }, i)), _jsx(RangeValues, {})] })));
+export const AIOSlider = (props) => {
+    const rangeHook = useRange(props, 'slider');
+    return (_jsx(RangeProvider, { value: { rangeHook }, children: _jsxs("div", Object.assign({}, rangeHook.getRootProps(props, 'slider'), { children: [_jsx(SliderGroove, { grooveAttrs: props.grooveAttrs }), _jsx(SliderRects, { ranges: props.ranges }), _jsx(SliderFills, {}), _jsx(RangeLabels, { type: 'slider' }), _jsx(RangeValues, { type: 'slider' })] })) }));
+};
+export const AIOSpinner = (props) => {
+    const rangeHook = useRange(props, 'spinner');
+    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' })));
+};
+const SpinnerText = ({ text }) => {
+    if (text === undefined || text === null) {
+        return null;
     }
-    return (_jsx(RangeProvider, { value: { rangeHook }, children: root_node() }));
+    return _jsx("div", { className: 'ai-range-text', children: text });
 };
-export default AIORange;
-const RangeValues = () => {
+const RangeLabels = ({ type }) => {
+    const { rangeHook } = useRangeProvider();
+    const { labels } = rangeHook.rootProps;
+    return (_jsx(_Fragment, { children: labels.map((label, i) => _jsx(RangeLabel, { label: label, type: type }, i)) }));
+};
+const RangeValues = ({ type }) => {
     const { rangeHook } = useRangeProvider();
     return (_jsx(_Fragment, { children: rangeHook.values.map((itemValue, i) => {
-            return _jsx(RangeValue, { index: i, itemValue: itemValue }, 'rangecontainervalue' + i);
+            return _jsx(RangeValue, { index: i, itemValue: itemValue, type: type }, 'rangecontainervalue' + i);
         }) }));
 };
-const RangeValue = (props) => {
+const RangeValue = ({ itemValue, index, type }) => {
     let { rangeHook } = useRangeProvider();
-    let { itemValue, index } = props;
-    let { round } = rangeHook.rootProps;
-    let angle = rangeHook.fixAngle(rangeHook.getAngleByValue(itemValue));
-    function containerProps() {
-        let style;
-        if (!round) {
-            style = { [rangeHook.getSide()]: rangeHook.getXPByValue(itemValue) + '%' };
-        }
-        else {
-            style = { transform: `rotate(${angle}deg)` };
-        }
-        return { className: 'ai-range-value-container', draggable: false, style };
-    }
-    const disabled = rangeHook.isValueDisabled(itemValue);
-    return (_jsxs("div", Object.assign({}, containerProps(), { children: [_jsx(RangeHandle, { disabled: disabled, value: itemValue, index: index, angle: angle }), _jsx(AIRangePoint, { disabled: disabled, value: itemValue, index: index, angle: angle })] })));
+    const rangeValue = rangeHook.getRangeValue(itemValue, index);
+    const props = type === 'spinner' ? rangeHook.getSpinnerValueProps(rangeValue) : rangeHook.getSliderValueProps(rangeValue);
+    return (_jsxs("div", Object.assign({}, props, { children: [_jsx(SpinnerHandle, { rangeValue: rangeValue }), _jsx(AIRangePoint, { rangeValue: rangeValue, type: type })] })));
 };
-const RangeSvg = () => {
+const SpinnerSvg = () => {
     const { rangeHook } = useRangeProvider();
-    const { round, ranges, size } = rangeHook.rootProps;
-    if (!round || !ranges.length) {
+    const { ranges, size } = rangeHook.rootProps;
+    if (!ranges.length) {
         return null;
     }
-    return (_jsx("svg", { style: { position: 'absolute', left: 0, top: 0 }, width: size, height: size, children: ranges.map((range, i) => _jsx(RangeArc, { range: range }, 'rangecirclearc' + i)) }));
+    return (_jsx("svg", { style: { position: 'absolute', left: 0, top: 0 }, width: size, height: size, children: ranges.map((range, i) => _jsx(SpinnerArc, { range: range }, 'rangecirclearc' + i)) }));
 };
-const AIRangeRects = () => {
-    const { rangeHook } = useRangeProvider();
-    const { ranges = [] } = rangeHook.rootProps;
-    return (_jsx(_Fragment, { children: ranges.map((range, i) => _jsx(RangeRect, { range: range }, 'range' + i)) }));
-};
-const RangeFills = () => {
-    let { rangeHook } = useRangeProvider();
-    let { start, round, rangeOption = {} } = rangeHook.rootProps;
-    if (round) {
+const SliderRects = ({ ranges = [] }) => {
+    if (!ranges.length) {
         return null;
     }
+    return (_jsx(_Fragment, { children: ranges.map((range, i) => _jsx(SliderRect, { range: range }, 'range' + i)) }));
+};
+const SliderFills = () => {
+    const { rangeHook } = useRangeProvider();
+    const { rootProps, values } = rangeHook;
+    const { rangeOption = {}, start } = rootProps;
     const { fill } = rangeOption;
-    const values = rangeHook.values;
     let limit = values.length === 1 ? [start, values[0]] : [...values];
     const fillHtmls = [];
     for (let i = 1; i < limit.length; i++) {
@@ -104,24 +73,24 @@ const RangeFills = () => {
         const { thickness = 4, style, className: fillClassName, color } = res;
         let from = limit[startPoint.index];
         let to = limit[endPoint.index];
-        let className = 'ai-range-fill';
+        let className = 'ai-slider-fill';
         if (fillClassName) {
             className += ' ' + fillClassName;
         }
-        fillHtmls.push(_jsx(RangeRect, { range: { thickness, color, from, to, className, style, offset: 0 } }, 'fill' + i));
+        fillHtmls.push(_jsx(SliderRect, { range: { thickness, color, from, to, className, style, offset: 0 } }, 'fill' + i));
     }
     return _jsx(_Fragment, { children: fillHtmls });
 };
-const RangeRect = ({ range }) => {
+const SliderRect = ({ range }) => {
     let { rangeHook } = useRangeProvider();
     let { color, from, to, className, style, offset, thickness, roundCap } = range;
-    className = UT.classListToString(['ai-range-range', range.className]);
+    className = UT.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);
     return _jsx("div", { className: className, style: Style });
 };
-const RangeArc = ({ range }) => {
+const SpinnerArc = ({ range }) => {
     let { rangeHook } = useRangeProvider();
     let { size, reverse } = rangeHook.rootProps;
     const { thickness, color, radius, roundCap, full, from, to } = rangeHook.getArc(range);
@@ -146,15 +115,14 @@ const RangeArc = ({ range }) => {
     }
     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}`);
 };
-const RangeHandle = (props) => {
+const SpinnerHandle = ({ rangeValue }) => {
     let { rangeHook } = useRangeProvider();
-    let { index } = props;
-    let { rangeOption = {}, round } = rangeHook.rootProps;
-    if (!round || !rangeOption.handle) {
+    let { rangeOption = {} } = rangeHook.rootProps;
+    if (!rangeOption.handle) {
         return null;
     }
     const { handle: handleFn } = rangeOption;
-    const handle = handleFn(props);
+    const handle = handleFn(rangeValue);
     if (!handle) {
         return null;
     }
@@ -174,33 +142,18 @@ const RangeHandle = (props) => {
             return { width, height, left: offset, background: color };
         }
     }
-    let PROPS = UT.AddToAttrs({}, { className: 'aio-input-handle', style: getStyle(), attrs: { draggable: false } });
-    return (_createElement("div", Object.assign({}, PROPS, { key: 'rangehandle' + index })));
+    let PROPS = UT.AddToAttrs({}, { className: 'ai-spinner-handle', style: getStyle(), attrs: { draggable: false } });
+    return (_createElement("div", Object.assign({}, PROPS, { key: 'rangehandle' + rangeValue.index })));
 };
 const RangeLabel = (props) => {
     let { rangeHook } = useRangeProvider();
     let { label } = props;
-    let { zIndex, dynamic, step, list = [] } = label;
-    let { round, start, end, reverse, vertical } = rangeHook.rootProps;
+    let { zIndex, dynamic } = label;
+    let { reverse, vertical } = rangeHook.rootProps;
     let [def] = useState(getDef);
     function getDef() { return RENDER(true); }
-    function getList() {
-        let res = [];
-        if (step) {
-            let { start: lstart = start, end: lend = end } = label;
-            for (let i = lstart; i <= lend; i += step) {
-                res.push(i);
-            }
-        }
-        for (let i = 0; i < list.length; i++) {
-            if (res.indexOf(list[i]) === -1) {
-                res.push(list[i]);
-            }
-        }
-        return res;
-    }
     function updateLabels() {
-        if (round || !label.autoHide || vertical) {
+        if (props.type !== "spinner" || !label.autoHide || vertical) {
             return;
         }
         let container = $(rangeHook.mainDom.current);
@@ -242,93 +195,32 @@ const RangeLabel = (props) => {
         if (!init && !dynamic) {
             return def;
         }
-        return (_jsx("div", { className: 'ai-range-labels', style: { zIndex }, children: getList().map((itemValue) => _jsx(RangeLabelItem, { label: label, itemValue: itemValue }, itemValue)) }));
+        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 });
+                if (props.type === "slider") {
+                    return (rangeHook.getSliderLabel(labelItem, itemValue));
+                }
+                else {
+                    return rangeHook.getSpinnerLabel(labelItem, itemValue);
+                }
+            }) }));
     }
     return _jsx(_Fragment, { children: RENDER(false) });
 };
-const RangeLabelItem = (props) => {
+const AIRangePoint = ({ rangeValue, type }) => {
     let { rangeHook } = useRangeProvider();
-    let { label, itemValue } = props;
-    let { round, vertical, size } = rangeHook.rootProps;
-    let angle;
-    if (round) {
-        angle = rangeHook.fixAngle(rangeHook.getAngleByValue(itemValue));
-    }
-    let disabled = rangeHook.isValueDisabled(itemValue);
-    function getContainerStyle(distance) {
-        if (round) {
-            return { transform: `rotate(${angle}deg)` };
-        }
-        else {
-            return Object.assign({ [rangeHook.getSide()]: rangeHook.getXPByValue(itemValue) + '%' }, distance);
-        }
-    }
-    function getTextStyle(item, distance) {
-        let res = {};
-        if (round) {
-            res = Object.assign(Object.assign({}, res), distance);
-            if (item.fixAngle) {
-                res = Object.assign(Object.assign({}, res), { transform: `rotate(${-angle}deg)` });
-            }
-        }
-        return Object.assign({ width: 0, height: 0 }, res);
-    }
-    function getDetails() {
-        let item = label.setting(itemValue, { disabled, angle });
-        let { offset = 0, html = '', config } = item;
-        let distance = { [round || vertical ? 'left' : 'top']: size * offset / 100 / 2 };
-        if (round) {
-            distance.left = size * offset / 100 / 2;
-        }
-        else if (vertical) {
-            distance.left = `calc(50% + ${offset || 0}px)`;
-        }
-        else {
-            distance.top = `calc(50% + ${offset || 0}px)`;
-        }
-        let containerStyle = getContainerStyle(distance);
-        let containerProps = { className: 'ai-range-label-container', style: containerStyle, draggable: false };
-        let textProps = UT.AddToAttrs({}, { className: ['ai-range-label'], style: getTextStyle(item, distance), attrs: { draggable: false } });
-        if (config) {
-            html = (_jsx("div", { className: "msf", style: {
-                    [!!round && !vertical ? 'height' : 'width']: size * config.thickness / 100,
-                    [!!round && !vertical ? 'width' : 'height']: size * config.height / 100,
-                    //transform:`translate${!!round && !vertical?'Y':'X'}${-size * config.thickness / 200}`,
-                    background: config.color
-                } }));
-        }
-        return { html, textProps, containerProps };
-    }
-    let { html, textProps, containerProps } = getDetails();
-    return (_jsx("div", Object.assign({}, containerProps, { children: _jsx("div", Object.assign({}, textProps, { children: html })) })));
-};
-const AIRangePoint = (props) => {
-    let { rangeHook } = useRangeProvider();
-    const { size, vertical, rangeOption = {}, round } = rangeHook.rootProps;
-    function getContainerStyle(offset) {
-        let containerStyle;
-        if (round) {
-            containerStyle = { left: size / 2 + offset, transform: `rotate(${-props.angle}deg)` };
-        }
-        else {
-            containerStyle = { [vertical ? 'left' : 'top']: offset };
-        }
-        return containerStyle;
-    }
-    function handleZIndex(index) {
-        let containers = $(rangeHook.mainDom.current).find(`.ai-range-value-container`);
-        containers.css({ zIndex: 10 });
-        containers.eq(index).css({ zIndex: 100 });
-    }
-    const { pointHtml = (() => _jsx("div", { className: 'ai-range-point', children: props.value })), pointOffset = (() => 0) } = rangeOption;
-    const point = pointHtml(props);
+    const { rangeOption = {} } = rangeHook.rootProps;
+    const { pointContent = (() => rangeValue.value), pointHtml = (() => _jsx("div", { className: 'ai-range-point', children: pointContent(rangeValue) })), } = rangeOption;
+    const point = pointHtml(rangeValue);
     if (point === false) {
         return null;
     }
-    const offset = pointOffset(props) || 0;
-    return (_jsx("div", { style: getContainerStyle(offset), className: 'ai-range-point-container', draggable: false, "data-index": props.index, onMouseDown: () => handleZIndex(props.index), children: point }, 'rangepoint' + props.index));
+    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));
 };
-const useRange = (PROPS) => {
+const useRange = (PROPS, type) => {
     const getProps = () => {
         const { start = 0, end = 100, min = start, max = end, step = 1, size = 72, labels = [], rotate = 0, ranges = [] } = PROPS;
         return Object.assign(Object.assign({}, PROPS), { start, end, min, max, step, size, labels, rotate, ranges });
@@ -339,7 +231,7 @@ const useRange = (PROPS) => {
     let [temp] = useState({ start: 0, index: false });
     const [mainDom] = useState(createRef());
     const [values, setValues] = useState([]);
-    const { vertical, reverse, start = 0, end = 100, min = start, max = end, step = 1, rotate = 0, round, size = 72, ranges = [], grooveAttrs } = props;
+    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) {
             return;
@@ -386,7 +278,7 @@ const useRange = (PROPS) => {
         }
         let clickedValue;
         //vertical condition
-        if (props.round) {
+        if (type === "spinner") {
             clickedValue = getValueByAngle(mousePosition.centerAngle);
         }
         else {
@@ -425,7 +317,7 @@ const useRange = (PROPS) => {
         let res;
         if (index === false) {
             let deltaValue;
-            if (props.round) {
+            if (type === "spinner") {
                 let v = deltaCenterAngle * (props.end - props.start) / 360;
                 v = Math.round(v / props.step) * props.step;
                 deltaValue = v;
@@ -439,7 +331,7 @@ const useRange = (PROPS) => {
         else {
             let { before, after } = getIndexLimit(index);
             let newUnitValue;
-            if (props.round) {
+            if (type === 'spinner') {
                 newUnitValue = Math.round(getValueByAngle(centerAngle) / props.step) * props.step;
             }
             else {
@@ -515,7 +407,8 @@ const useRange = (PROPS) => {
         for (let i = 0; i < value.length; i++) {
             let point = value[i] || 0;
             point = Math.round((point - start) / step) * step + start;
-            point = +point.toFixed(UT.GetPrecisionCount(step));
+            const { floatLength } = UT.Float(step);
+            point = +point.toFixed(floatLength);
             if (point < min) {
                 point = min;
             }
@@ -533,7 +426,7 @@ const useRange = (PROPS) => {
         return vertical ? (reverse ? 'bottom' : 'top') : (reverse ? 'right' : 'left');
     }
     function fixValueInEmpty(value) {
-        let fill = round || 1;
+        let fill = round;
         let empty = 1 - fill;
         let emptyValue = empty * (end - start) / fill;
         if (value > end + emptyValue / 2) {
@@ -543,7 +436,7 @@ const useRange = (PROPS) => {
     }
     function fixAngle(angle) { angle = angle % 360; return angle < 0 ? angle = 360 + angle : angle; }
     function getValueByAngle(angle) {
-        let fillAngle = 360 * (round || 1);
+        let fillAngle = 360 * round;
         let emptyAngle = 360 - fillAngle;
         if (reverse) {
             angle = 180 - angle;
@@ -608,11 +501,120 @@ const useRange = (PROPS) => {
         offset = sbp(offset);
         return { thickness, radius, color, roundCap, full, className, from, to };
     };
-    function getGroove() {
-        return _jsx("div", Object.assign({}, UT.AddToAttrs(grooveAttrs, { className: 'ai-range-groove' })));
+    function handleZIndex(index) {
+        let containers = $(mainDom.current).find(`.ai-range-value-container`);
+        containers.css({ zIndex: 10 });
+        containers.eq(index).css({ zIndex: 100 });
+    }
+    function getOffset(rangeValue) {
+        const { pointOffset = (() => 0) } = props.rangeOption || {};
+        return pointOffset(rangeValue) || 0;
+    }
+    function getSliderPointContainerStyle(rangeValue) { return { [vertical ? 'left' : 'top']: getOffset(rangeValue) }; }
+    function getSpinnerPointContainerStyle(rangeValue) { return { left: size / 2 + getOffset(rangeValue), transform: `rotate(${-rangeValue.angle}deg)` }; }
+    function getSliderValueProps(rangeValue) { return { className: 'ai-range-value-container', draggable: false, style: { [getSide()]: getXPByValue(rangeValue.value) + '%' } }; }
+    function getSpinnerValueProps(rangeValue) {
+        return { className: 'ai-range-value-container', draggable: false, style: { transform: `rotate(${rangeValue.angle}deg)` } };
+    }
+    const getRangeValue = (itemValue, index) => {
+        let angle = fixAngle(getAngleByValue(itemValue));
+        const disabled = isValueDisabled(itemValue);
+        return { disabled, value: itemValue, index, angle };
+    };
+    function getRootClassName(props, type) {
+        let c = 'ai-range';
+        if (type === "spinner") {
+            c += ` ai-spinner`;
+        }
+        else {
+            c += props.vertical ? ` ai-slider-vertical` : ` ai-slider-horizontal`;
+        }
+        if (props.className) {
+            c += ' ' + props.className;
+        }
+        if (props.reverse) {
+            c += ` ai-${type === "spinner" ? 'spinner' : 'slider'}-reverse`;
+        }
+        return c;
+    }
+    function getRootStyle(props, type) {
+        let { style } = props;
+        let res;
+        if (type === "spinner") {
+            res = { width: props.size, height: props.size };
+        }
+        return Object.assign(Object.assign({}, res), style);
+    }
+    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 } });
+    }
+    function getDistance(labelItem, type) {
+        let { offset = 0 } = labelItem;
+        let distance = { [type === "spinner" || vertical ? 'left' : 'top']: size * offset / 100 / 2 };
+        if (type === "spinner") {
+            distance.left = size * offset / 100 / 2;
+        }
+        else if (vertical) {
+            distance.left = `calc(50% + ${offset || 0}px)`;
+        }
+        else {
+            distance.top = `calc(50% + ${offset || 0}px)`;
+        }
+        return distance;
+    }
+    function getSliderLabel(labelItem, itemValue) {
+        let { html = '', config } = labelItem;
+        if (config) {
+            html = (_jsx("div", { style: {
+                    [!vertical ? 'width' : 'height']: size * config.thickness / 100,
+                    [!vertical ? 'height' : 'width']: size * config.height / 100,
+                    background: config.color
+                } }));
+        }
+        const htmlProps = UT.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 })) })));
+    }
+    function getLabelList(label) {
+        let { step, list = [] } = label;
+        let res = [];
+        if (step) {
+            let { start: lstart = start, end: lend = end } = label;
+            for (let i = lstart; i <= lend; i += step) {
+                res.push(i);
+            }
+        }
+        for (let i = 0; i < list.length; i++) {
+            if (res.indexOf(list[i]) === -1) {
+                res.push(list[i]);
+            }
+        }
+        return res;
+    }
+    function getSpinnerLabel(labelItem, itemValue) {
+        let { html = '', config } = labelItem;
+        if (config) {
+            html = (_jsx("div", { style: {
+                    height: size * config.thickness / 100,
+                    width: size * config.height / 100,
+                    background: config.color
+                } }));
+        }
+        let angle = fixAngle(getAngleByValue(itemValue)) || 0;
+        let containerStyle = { transform: `rotate(${angle}deg)` };
+        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 } });
+        return (_jsx("div", Object.assign({}, containerProps, { children: _jsx("div", Object.assign({}, htmlProps, { children: html })) })));
     }
     return {
-        values, getValues, getSide, fixAngle, getValueByAngle, mainDom, isValueDisabled, rootProps: props,
-        getArc, getAngleByValue, getRectByStr, sbp, getXPByValue, getValueByXP, getXPByX, getGroove
+        values, getValues, getSide, fixAngle, getValueByAngle, mainDom, isValueDisabled, rootProps: props, getRootProps, getLabelList,
+        getArc, getAngleByValue, getRectByStr, sbp, getXPByValue, getValueByXP, getXPByX, handleZIndex, getSpinnerLabel,
+        getSliderPointContainerStyle, getSpinnerPointContainerStyle, getSliderValueProps, getSpinnerValueProps, getRangeValue,
+        getSliderLabel
     };
 };

package/package.json

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