@re-flex/ui/hooks/useRanger.d.ts

Re-Flex ui library

import React from "react";
declare const linearInterpolator: {
    getPercentageForValue: (val: number, min: number, max: number) => number;
    getValueForClient: (client: number, trackDims: {
        [key: string]: number;
    }, min: number, max: number, mode: "vertical" | "horizontal") => number;
};
interface useRangerProps {
    trackElRef: React.MutableRefObject<HTMLDivElement>;
    interpolator?: typeof linearInterpolator;
    tickSize?: number;
    values: number[];
    min: number;
    max: number;
    ticks?: number[];
    steps?: number[];
    onChange: (e: number[]) => void;
    onDrag?: React.DragEventHandler<HTMLDivElement>;
    stepSize: number;
    mode: "vertical" | "horizontal";
}
declare function useRanger({ trackElRef, interpolator, tickSize, values, min, max, ticks: controlledTicks, steps, onChange, onDrag, stepSize, mode, }: useRangerProps): {
    activeHandleIndex: number;
    ticks: {
        value: number;
        getTickProps: ({ key, style, ...rest }?: {
            key?: number;
            style?: {};
        }) => {
            key: number;
            style: {};
        };
    }[];
    segments: {
        value: any;
        getSegmentProps: ({ key, style, ...rest }?: {
            key?: number;
            style?: {};
        }) => {
            key: number;
            style: {};
        };
    }[];
    handles: {
        value: number;
        active: boolean;
        getHandleProps: ({ key, onKeyDown, onMouseDown, onTouchStart, }?: any) => {
            key: any;
            onKeyDown: (e: React.KeyboardEvent) => void;
            onMouseDown: (e: React.KeyboardEvent) => void;
            onTouchStart: (e: React.KeyboardEvent) => void;
            style: {
                [x: string]: string;
                zIndex: string;
            };
        };
    }[];
    onClickTrack: React.MouseEventHandler<HTMLDivElement> | React.TouchEventHandler<HTMLDivElement>;
};
export default useRanger;