aio-range 1.0.0 → 2.0.0

package/index.css

@@ -0,0 +1,190 @@
+.ai-range {
+    display: flex;
+    position: relative;
+    user-select: none;
+}
+
+
+.aio-input-range-value {
+    width: 100%;
+    overflow: visible;
+}
+
+.ai-range-horizontal {
+    height: 48px;
+    align-items: center;
+    width: 100%;
+}
+
+.ai-range-horizontal .ai-range-groove {
+    height: 1px;
+    width: 100%;
+    background: #ddd;
+}
+
+.ai-range-vertical {
+    width: 48px;
+    height: 240px;
+    justify-content: center;
+    margin: 12px 0;
+}
+
+.ai-range-vertical .ai-range-groove {
+    width: 1px;
+    height: 100%;
+    background: #ddd;
+}
+
+.ai-range-reverse {
+    direction: rtl;
+}
+
+.ai-range-round {
+    border-radius: 100%;
+    justify-content: center;
+    align-items: center;
+    height: unset;
+}
+
+.ai-range-value-container {
+    display: flex;
+    align-items: center;
+    width: 0;
+    height: 0;
+    justify-content: center;
+    overflow: visible;
+    position: absolute;
+    z-index: 10;
+}
+
+.ai-range-round .ai-range-value-container {
+    justify-content: flex-end;
+}
+
+.aio-input-handle {
+    position: absolute;
+    width: 0;
+    height: 0;
+}
+
+.ai-range-label-container {
+    position: absolute;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    width: 0;
+    height: 0;
+}
+
+.ai-range-round .ai-range-label-container {
+    justify-content: flex-end;
+}
+
+.ai-range-labels {
+    position: absolute;
+}
+
+.ai-range-horizontal .ai-range-labels {
+    width: 100%;
+    height: 100%;
+}
+
+.ai-range-vertical .ai-range-labels {
+    width: 100%;
+    height: 100%;
+}
+
+.ai-range-label {
+    position: absolute;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    font-size: 12px;
+}
+
+.ai-range-label>* {
+    position: absolute;
+}
+
+.ai-range-value {
+    padding: 0 16px;
+}
+
+.ai-range-point-container {
+    position: absolute;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    width: 0;
+    height: 0;
+}
+
+.ai-range-point-container>* {
+    position: absolute;
+}
+
+.ai-range-point {
+    height: 2em;
+    width: 2em;
+    font-size: 0.8em;
+    border-radius: 48px;
+    background: #0069ff;
+    color: #fff;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+}
+
+.ai-range-range {
+    position: absolute;
+}
+
+.ai-range-scale-container {
+    position: absolute;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    width: 0;
+    height: 0;
+}
+
+.ai-range-round .ai-range-scale-container {
+    justify-content: flex-end;
+}
+
+.ai-range-scale {
+    position: absolute;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    background: #999;
+    font-size: 12px;
+    width: 1px;
+    height: 6px;
+
+}
+
+.ai-range-round .ai-range-scale {
+    height: 2px;
+    width: 6px;
+    left: 6px;
+}
+
+.ai-range-vertical .ai-range-scale {
+    height: 2px;
+    width: 6px;
+}
+
+.ai-range-fill {
+    background: #0069ff;
+    position: absolute;
+    z-index: 10;
+}
+
+.ai-range-horizontal .ai-range-fill {
+    height: 4px;
+}
+
+.ai-range-vertical .ai-range-fill {
+    width: 4px;
+}

package/index.d.ts

@@ -0,0 +1,165 @@
+import { FC, ReactNode } from "react";
+import './index.css';
+export type AI_RangeContext = {
+    rangeHook: ReturnType<typeof useRange>;
+};
+type AI_sbp = (size: number, half?: boolean) => number;
+type AI_rbs = (range: I_range) => {
+    thickness: number;
+    color: string;
+    roundCap: boolean;
+    offset: number;
+    className?: string;
+    from: number;
+    to: number;
+};
+export type AI_label = {
+    list?: number[];
+    start?: number;
+    end?: number;
+    step?: number;
+    dynamic?: boolean;
+    autoHide?: boolean;
+    zIndex?: number;
+    setting: (value: number, p: {
+        angle: number;
+        disabled: boolean;
+        index: number;
+    }) => AI_labelItem;
+};
+export type AI_labelItem = {
+    offset?: number;
+    fixAngle?: boolean;
+    html?: ReactNode;
+    config?: {
+        thickness: number;
+        height: number;
+        color: string;
+    };
+};
+export type I_range = {
+    thickness: number;
+    offset: number;
+    color?: string;
+    roundCap?: boolean;
+    full?: boolean;
+    className?: string;
+    from: number;
+    to: number;
+    style?: any;
+};
+export type I_Range = {
+    value?: any;
+    start?: number;
+    end?: number;
+    max?: number;
+    min?: number;
+    step?: number;
+    onChange?: (v: any) => void;
+    multiple?: boolean;
+    text?: ReactNode;
+    style?: any;
+    attrs?: any;
+    className?: string;
+    disabled?: boolean;
+    reverse?: boolean;
+    size?: number;
+    vertical?: boolean;
+    rotate?: number;
+    round?: number;
+    grooveAttrs?: {
+        [key: string]: any;
+    };
+    labels?: AI_label[];
+    ranges?: I_range[];
+    rangeOption?: {
+        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;
+        }, endPoint: {
+            index: number;
+            value: number;
+        }) => {
+            thickness?: number;
+            color?: string;
+            className?: string;
+            style?: any;
+        } | false | undefined;
+        handle?: (p: {
+            index: number;
+            value: number;
+            disabled: boolean;
+            angle: number;
+        }) => {
+            widthPercent?: number;
+            heightPercent?: number;
+            color?: string;
+            offset?: number;
+            sharp?: boolean;
+        } | undefined;
+    };
+};
+type I_Range_default = I_Range & {
+    start: number;
+    end: number;
+    step: number;
+    min: number;
+    max: number;
+    size: number;
+    labels: AI_label[];
+    rotate: number;
+    ranges: I_range[];
+};
+declare const AIORange: FC<I_Range>;
+export default AIORange;
+export type I_RangeLabelItem = {
+    label: AI_label;
+    itemValue: number;
+    index: number;
+};
+declare const useRange: (PROPS: I_Range) => {
+    values: number[];
+    getValues: (value: any) => number[];
+    getSide: () => "left" | "right" | "bottom" | "top";
+    fixAngle: (angle: number) => number;
+    getValueByAngle: (angle: number) => number;
+    mainDom: any;
+    isValueDisabled: (value: number) => boolean;
+    rootProps: I_Range_default;
+    getArc: (rc: I_range) => {
+        thickness: number;
+        color: string;
+        roundCap: boolean;
+        full: boolean;
+        radius: number;
+        className?: string;
+        from: number;
+        to: number;
+    };
+    getAngleByValue: (value: number, ang?: number) => number;
+    getRectByStr: AI_rbs;
+    sbp: AI_sbp;
+    getXPByValue: (value: number) => number;
+    getValueByXP: (xp: number) => number;
+    getXPByX: (x: number) => number;
+    getGroove: () => import("react/jsx-runtime").JSX.Element;
+};

package/index.js

@@ -0,0 +1,619 @@
+import { createElement as _createElement } from "react";
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { createContext, createRef, useContext, useEffect, useRef, useState } from "react";
+import * as UT from 'aio-utils';
+import { $ } from 'aio-deps';
+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, {})] })));
+    }
+    return (_jsx(RangeProvider, { value: { rangeHook }, children: root_node() }));
+};
+export default AIORange;
+const RangeValues = () => {
+    const { rangeHook } = useRangeProvider();
+    return (_jsx(_Fragment, { children: rangeHook.values.map((itemValue, i) => {
+            return _jsx(RangeValue, { index: i, itemValue: itemValue }, 'rangecontainervalue' + i);
+        }) }));
+};
+const RangeValue = (props) => {
+    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 RangeSvg = () => {
+    const { rangeHook } = useRangeProvider();
+    const { round, ranges, size } = rangeHook.rootProps;
+    if (!round || !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)) }));
+};
+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) {
+        return null;
+    }
+    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++) {
+        const startPoint = { index: i - 1, value: limit[i - 1] };
+        const endPoint = { index: i, value: limit[i] };
+        let res = !fill ? { thickness: 4 } : fill(startPoint, endPoint);
+        if (res === false) {
+            continue;
+        }
+        res = res || { thickness: 4 };
+        const { thickness = 4, style, className: fillClassName, color } = res;
+        let from = limit[startPoint.index];
+        let to = limit[endPoint.index];
+        let className = 'ai-range-fill';
+        if (fillClassName) {
+            className += ' ' + fillClassName;
+        }
+        fillHtmls.push(_jsx(RangeRect, { range: { thickness, color, from, to, className, style, offset: 0 } }, 'fill' + i));
+    }
+    return _jsx(_Fragment, { children: fillHtmls });
+};
+const RangeRect = ({ range }) => {
+    let { rangeHook } = useRangeProvider();
+    let { color, from, to, className, style, offset, thickness, roundCap } = range;
+    className = UT.classListToString(['ai-range-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 }) => {
+    let { rangeHook } = useRangeProvider();
+    let { size, reverse } = rangeHook.rootProps;
+    const { thickness, color, radius, roundCap, full, from, to } = rangeHook.getArc(range);
+    let a, b;
+    let x = size / 2, y = size / 2;
+    if (full) {
+        a = 0;
+        b = 360;
+    }
+    else {
+        let startAngle = rangeHook.fixAngle(rangeHook.getAngleByValue(from) + 90);
+        let endAngle = rangeHook.fixAngle(rangeHook.getAngleByValue(to) + 90);
+        if (endAngle === 0) {
+            endAngle = 360;
+        }
+        a = startAngle;
+        b = endAngle;
+        if (reverse) {
+            b = startAngle;
+            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}`);
+};
+const RangeHandle = (props) => {
+    let { rangeHook } = useRangeProvider();
+    let { index } = props;
+    let { rangeOption = {}, round } = rangeHook.rootProps;
+    if (!round || !rangeOption.handle) {
+        return null;
+    }
+    const { handle: handleFn } = rangeOption;
+    const handle = handleFn(props);
+    if (!handle) {
+        return null;
+    }
+    let { sharp = false, widthPercent = 10, heightPercent = 90, color = '#000', offset = 0 } = handle;
+    let width = rangeHook.sbp(heightPercent, true);
+    let height = rangeHook.sbp(widthPercent, true) * 2;
+    function getStyle() {
+        if (sharp) {
+            return {
+                [width < 0 ? 'borderRight' : 'borderLeft']: `${Math.abs(width)}px solid ${color}`,
+                borderTop: `${height / 2}px solid transparent`,
+                borderBottom: `${height / 2}px solid transparent`,
+                left: rangeHook.sbp(offset)
+            };
+        }
+        else {
+            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 })));
+};
+const RangeLabel = (props) => {
+    let { rangeHook } = useRangeProvider();
+    let { label } = props;
+    let { zIndex, dynamic, step, list = [] } = label;
+    let { round, start, end, 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) {
+            return;
+        }
+        let container = $(rangeHook.mainDom.current);
+        let labels = container.find(`.ai-range-label`);
+        if (!labels.length) {
+            return;
+        }
+        let firstLabel = labels.eq(0);
+        let firstLabelHProp = firstLabel.attr('data-rotated') === 'yes' ? 'height' : 'width';
+        let end = firstLabel.offset().left + (!reverse ? firstLabel[firstLabelHProp]() : 0);
+        for (let i = 1; i < labels.length; i++) {
+            let label = labels.eq(i);
+            let hProp = label.attr('data-rotated') === 'yes' ? 'height' : 'width';
+            label.css({ display: 'flex' });
+            let left = label.offset().left;
+            let width = label[hProp]();
+            let right = left + width;
+            if (!reverse) {
+                if (left < end + 5) {
+                    label.css({ display: 'none' });
+                }
+                else {
+                    end = left + width;
+                }
+            }
+            else {
+                if (right > end - 5) {
+                    label.css({ display: 'none' });
+                }
+                else {
+                    end = left;
+                }
+            }
+        }
+    }
+    useEffect(() => { $(window).on('resize', updateLabels); }, []);
+    useEffect(() => { updateLabels(); });
+    function RENDER(init) {
+        if (!init && !dynamic) {
+            return def;
+        }
+        return (_jsx("div", { className: 'ai-range-labels', style: { zIndex }, children: getList().map((itemValue, index) => _jsx(RangeLabelItem, { label: label, itemValue: itemValue, index: index }, itemValue)) }));
+    }
+    return _jsx(_Fragment, { children: RENDER(false) });
+};
+const RangeLabelItem = (props) => {
+    let { rangeHook } = useRangeProvider();
+    let { label, itemValue, index } = 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, index });
+        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 { pointContent = (() => props.value), pointHtml = (() => _jsx("div", { className: 'ai-range-point', children: pointContent(props) })), pointOffset = (() => 0) } = rangeOption;
+    const point = pointHtml(props);
+    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 useRange = (PROPS) => {
+    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 });
+    };
+    const props = getProps();
+    const propsRef = useRef(props);
+    propsRef.current = 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;
+    useEffect(() => {
+        if (!props.onChange || props.disabled === true) {
+            return;
+        }
+        clearTimeout(temp.timeOut);
+        temp.timeOut = setTimeout(() => {
+            new UT.Swip({
+                reverseX: !!props.reverse,
+                //vertical condition
+                reverseY: !!props.reverse && !!props.vertical,
+                dom: () => $(mainDom.current),
+                start: (p) => {
+                    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];
+                    }
+                    return [0, 0];
+                },
+                move: (p) => {
+                    let { change, mousePosition } = p;
+                    if (change) {
+                        changeHandle({ dx: change.dx, dy: change.dy, deltaCenterAngle: change.deltaCenterAngle, centerAngle: mousePosition.centerAngle });
+                    }
+                },
+                onClick: function (p) {
+                    const { disabled } = propsRef.current;
+                    if (disabled) {
+                        return;
+                    }
+                    click(p.mousePosition);
+                }
+            });
+        }, 100);
+    }, [changeHandle]);
+    function click(mousePosition) {
+        if (props.disabled === true || temp.index !== false) {
+            return;
+        }
+        let clickedValue;
+        //vertical condition
+        if (props.round) {
+            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);
+        }
+    }
+    function changeHandle(obj) {
+        if (props.disabled === true) {
+            return;
+        }
+        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) {
+            index = 0;
+        }
+        let res;
+        if (index === false) {
+            let deltaValue;
+            if (props.round) {
+                let v = deltaCenterAngle * (props.end - props.start) / 360;
+                v = Math.round(v / props.step) * props.step;
+                deltaValue = v;
+            }
+            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;
+        }
+        else {
+            let { before, after } = getIndexLimit(index);
+            let newUnitValue;
+            if (props.round) {
+                newUnitValue = Math.round(getValueByAngle(centerAngle) / props.step) * props.step;
+            }
+            else {
+                let deltaValue = Math.round(getValueByXP(getXPByX(props.vertical ? dy : dx)) / props.step) * props.step;
+                newUnitValue = startValue[index] + deltaValue;
+            }
+            if (newUnitValue > after) {
+                newUnitValue = after;
+            }
+            if (newUnitValue < before) {
+                newUnitValue = before;
+            }
+            if (isValueDisabled(newUnitValue)) {
+                newUnitValue = values[index];
+            }
+            startValue[index] = newUnitValue;
+            res = startValue;
+        }
+        return res;
+    }
+    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) {
+        if (!props.onChange || props.disabled === true) {
+            return;
+        }
+        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) {
+            before = props.start;
+        }
+        else {
+            before = values[index - 1];
+        }
+        if (index === values.length - 1) {
+            after = props.end;
+        }
+        else {
+            after = values[index + 1];
+        }
+        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;
+    }
+    function getValues(value) {
+        if (!Array.isArray(value)) {
+            value = [value || 0];
+        }
+        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 = +floatLength;
+            if (point < min) {
+                point = min;
+            }
+            if (point > max) {
+                point = max;
+            }
+            value[i] = point;
+        }
+        return value;
+    }
+    useEffect(() => {
+        setValues(getValues(props.value));
+    }, [props.value]);
+    function getSide() {
+        return vertical ? (reverse ? 'bottom' : 'top') : (reverse ? 'right' : 'left');
+    }
+    function fixValueInEmpty(value) {
+        let fill = round || 1;
+        let empty = 1 - fill;
+        let emptyValue = empty * (end - start) / fill;
+        if (value > end + emptyValue / 2) {
+            value = start - emptyValue + value - end;
+        }
+        return value;
+    }
+    function fixAngle(angle) { angle = angle % 360; return angle < 0 ? angle = 360 + angle : angle; }
+    function getValueByAngle(angle) {
+        let fillAngle = 360 * (round || 1);
+        let emptyAngle = 360 - fillAngle;
+        if (reverse) {
+            angle = 180 - angle;
+        }
+        angle -= rotate;
+        angle -= emptyAngle / 2;
+        angle -= 90;
+        angle = fixAngle(angle);
+        let res = angle * (end - start) / fillAngle;
+        res = fixValueInEmpty(res);
+        return res;
+    }
+    function getAngleByValue(value, ang) {
+        let fillAngle = 360 * round;
+        let emptyAngle = 360 - fillAngle;
+        let res = value * fillAngle / (end - start);
+        res += 90;
+        res += emptyAngle / 2;
+        res += rotate;
+        res += (ang || 0);
+        return reverse ? res = 180 - res : res;
+    }
+    const sbp = (value, half) => size / (half ? 2 : 1) * value / 100;
+    const getRectByStr = (obj) => {
+        let { thickness = 1, offset = 0, color = '#000', roundCap = false, className, from = start, to = end } = obj;
+        try {
+            let thicknessValue = thickness;
+            if (isNaN(thicknessValue)) {
+                thicknessValue = 1;
+            }
+            thickness = thicknessValue;
+            let offsetValue = offset;
+            if (isNaN(offsetValue)) {
+                offsetValue = 0;
+            }
+            let defaultOffset = (size / 2) - (thickness / 2);
+            offset = defaultOffset - offsetValue;
+            if (offset > size - thickness / 2) {
+                offset = size - thickness / 2;
+            }
+            if (offset < thickness / 2) {
+                offset = thickness / 2;
+            }
+        }
+        catch (_a) { }
+        return { thickness, offset, color, roundCap, className, from, to };
+    };
+    function getXPByValue(value) {
+        return 100 * (value - start) / (end - start);
+    }
+    function getValueByXP(xp) {
+        return xp * (end - start) / 100;
+    }
+    function getXPByX(x) {
+        return x * 100 / $(mainDom.current)[vertical ? 'height' : 'width']();
+    }
+    const getArc = (rc) => {
+        let roundCap = rc.roundCap || false, full = rc.full || false, offset = rc.offset, color = rc.color || '#000', className = rc.className;
+        const { from = start, to = end } = rc;
+        const thickness = size * rc.thickness / 100;
+        const radius = (rc.offset * size / 2 / 100) - thickness / 2;
+        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' })));
+    }
+    return {
+        values, getValues, getSide, fixAngle, getValueByAngle, mainDom, isValueDisabled, rootProps: props,
+        getArc, getAngleByValue, getRectByStr, sbp, getXPByValue, getValueByXP, getXPByX, getGroove
+    };
+};

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "aio-range",
-    "version": "1.0.0",
+    "version": "2.0.0",
     "description": "linear and circular range input",
     "main": "index.js",
     "scripts": {
@@ -12,12 +12,8 @@
         "url": "git+https://github.com/mohammadFeiz/aio-range.git"
     },
     "dependencies": {
-        "aio-table": "latest",
-        "aio-cordova": "latest",
-        "aio-entity": "latest",
-        "aio-input": "latest",
-        "aio-utils": "latest",
-        "aio-date": "latest"
+        "aio-deps": "latest",
+        "aio-utils": "latest"
     },
     "keywords": [
         "range",

package/README.md

@@ -1 +0,0 @@
-# aio-range