index.d.ts

import * as React from "react";
import { RCTooltip } from 'rc-tooltip';

export interface Marks {
    [number: number]:
    | JSX.Element
    | string
    | { style: any; label: string | JSX.Element };
}

export interface CommonApiProps {
    /**
     * Additional CSS class for the root DOM node
     *  @default ''
     */
    className?: string;
    /**
     * The minimum value of the slider
     *  @default 0
     */
    min?: number;
    /**
     * The maximum value of the slider
     *  @default 100
     */
    max?: number;
    /**
     * Marks on the slider. The key determines the position, and the value determines what will show.
     * If you want to set the style of a specific mark point, the value should be an object which contains style and label properties.
     *  @default '{}' | {number: { style, label }}
     */
    marks?: Marks;
    /**
     * Value to be added or subtracted on each step the slider makes. Must be greater than zero, and max - min should be evenly divisible by the step value.
     *  @default 1
     */
    step?: number | null;
    /**
     * If vertical is true, the slider will be vertical.
     * @default false
     */
    vertical?: boolean;
    /**
     * A handle generator which could be used to customized handle.
     */
    handle?(props: any): React.ReactNode;
    /**
     * If the value is true, it means a continuous value interval, otherwise, it is a independent value.
     *  @default true
     */
    included?: boolean;
    /**
     * If true, handles can't be moved.
     *  @default false
     */
    disabled?: boolean;
    /**
     * When the step value is greater than 1, you can set the dots to true if you want to render the slider with dots.
     *  @default false
     */
    dots?: boolean;

    /**
     * @deprecated in version ^6.0.0. Use rc-tooltip
     * Tooltip transition class name
     */
    tipTransitionName?: string;

    /**
     * @deprecated in version ^6.0.0. Use rc-tooltip
     * Tooltip formatter
     */
    tipFormatter?: ((value: any) => any | undefined) | null;

    /**
     * The style used for the background and container. (both for slider(Object) and range(Array of Object), the array will be used for mutli handle follow element order)
     */
    style?: React.CSSProperties[] | React.CSSProperties;

    /**
     * The style used for handle. (both for slider(Object) and range(Array of Object), the array will be used for mutli handle follow element order)
     */
    handleStyle?: React.CSSProperties[] | React.CSSProperties;

    /**
     * The style used for track. (both for slider(Object) and range(Array of Object), the array will be used for mutli track follow element order)
     */
    trackStyle?: React.CSSProperties[] | React.CSSProperties;

    /**
     * The style used for the track base color.
     */
    railStyle?: React.CSSProperties;

    /**
     * The style used for the dots.
     */
    dotStyle?: React.CSSProperties;

    /**
     * The style used for the active dots.
     */
    activeDotStyle?: React.CSSProperties;
}

export interface SliderProps extends CommonApiProps {
    /**
     * onBeforeChange will be triggered when ontouchstart or onmousedown is triggered.
     */
    onBeforeChange?(value: number): void;
    /**
     * onChange will be triggered while the value of Slider changing.
     */
    onChange?(value: number): void;
    /**
     * onAfterChange will be triggered when ontouchend or onmouseup is triggered.
     */
    onAfterChange?(value: number): void;
    /**
     * Set initial value of slider.
     *  @default 0
     */
    defaultValue?: number;
    /**
     * Set current value of slider.
     */
    value?: number;
}

export interface AddHandleProps {
    offset: number;
    value: number;
}
export type AddHandleComponent = React.FunctionComponent<AddHandleProps>;

export interface RangeProps extends CommonApiProps {
    /**
     * onBeforeChange will be triggered when ontouchstart or onmousedown is triggered.
     * For prop (count = -1) type returned is [number, undefined]. Bug raised in rc-slider https://github.com/react-component/slider/issues/457
     */
    onBeforeChange?(value: number[]): void;
    /**
     * onChange will be triggered while the value of Slider changing.
     * For prop (count = -1) type returned is [number, undefined]. Bug raised in rc-slider https://github.com/react-component/slider/issues/457
     */
    onChange?(value: number[]): void;
    /**
     * onAfterChange will be triggered when ontouchend or onmouseup is triggered.
     * For prop (count = -1) type returned is [number, undefined]. Bug raised in rc-slider https://github.com/react-component/slider/issues/457
     */
    onAfterChange?(value: number[]): void;
    /**
     * Set initial positions of handles.
     *  @default [0,0]
     */
    defaultValue?: number[];
    /**
     * Set current positions of handles.
     */
    value?: number[];
    /**
     * Determine how many ranges to render, and multiple handles will be rendered (number + 1).
     *  @default 1
     */
    count?: number;
    /**
     * allowCross could be set as true to allow those handles to cross.
     *  @default true
     */
    allowCross?: boolean;
    /**
     * pushable could be set as true to allow pushing of surrounding handles when moving an handle. When set to a number, the number will be the minimum ensured distance between handles.
     *  @default true
     */
    pushable?: boolean | number;

    /**
     * function that returns add hadle element
     */
    addHandle?: AddHandleComponent;
    
    /**
     * whether clicks on rail will be processed (click on rail => handle moves)
     */
    isTrackDisabled?: boolean;

    /**
     * array of values, which handle representators won't move
     */
    disabledHandles?: number[];
    
    /**
     * maximum possible value that can be added through addMode
     */
    maxAddBound?: number;
    
    /**
     * addMode onAdd handler (will be called when item is added to slider via addMode)
     */
    onAdd?: (value: number) => any;
}

export interface HandleProps extends CommonApiProps {
    /**
     * Class name
     */
    className: string;
    /**
     * Styling if true, then bottom: {offset} else left: {offset}
     * @default False
     */
    vertical: boolean;
    /**
     * Styling option offset
     */
    offset: number;
}

export interface WithTooltipProps {
    tipFormatter?: (value: number) => React.ReactNode;
    tipProps?: Partial<RCTooltip.Props>;
}

export default class Slider extends React.Component<SliderProps> { }
export class Range extends React.Component<RangeProps> { }
export class Handle extends React.Component<HandleProps> { }

export function createSliderWithTooltip(slider: typeof Slider): new() => React.Component<WithTooltipProps & SliderProps>;
export function createSliderWithTooltip(range: typeof Range): new() => React.Component<WithTooltipProps & RangeProps>;