UNPKG

3.06 kBTypeScriptView Raw
1import * as React from 'react';
2import type { HandlesProps } from './Handles';
3import type { MarkObj } from './Marks';
4import type { AriaValueFormat, SliderClassNames, SliderStyles } from './interface';
5/**
6 * New:
7 * - click mark to update range value
8 * - handleRender
9 * - Fix handle with count not correct
10 * - Fix pushable not work in some case
11 * - No more FindDOMNode
12 * - Move all position related style into inline style
13 * - Key: up is plus, down is minus
14 * - fix Key with step = null not align with marks
15 * - Change range should not trigger onChange
16 * - keyboard support pushable
17 */
18export type RangeConfig = {
19 editable?: boolean;
20 draggableTrack?: boolean;
21 /** Set min count when `editable` */
22 minCount?: number;
23 /** Set max count when `editable` */
24 maxCount?: number;
25};
26export interface SliderProps<ValueType = number | number[]> {
27 prefixCls?: string;
28 className?: string;
29 style?: React.CSSProperties;
30 classNames?: SliderClassNames;
31 styles?: SliderStyles;
32 disabled?: boolean;
33 keyboard?: boolean;
34 autoFocus?: boolean;
35 onFocus?: (e: React.FocusEvent<HTMLDivElement>) => void;
36 onBlur?: (e: React.FocusEvent<HTMLDivElement>) => void;
37 range?: boolean | RangeConfig;
38 /** @deprecated Use `range.minCount` or `range.maxCount` to handle this */
39 count?: number;
40 min?: number;
41 max?: number;
42 step?: number | null;
43 value?: ValueType;
44 defaultValue?: ValueType;
45 onChange?: (value: ValueType) => void;
46 /** @deprecated It's always better to use `onChange` instead */
47 onBeforeChange?: (value: ValueType) => void;
48 /** @deprecated Use `onChangeComplete` instead */
49 onAfterChange?: (value: ValueType) => void;
50 onChangeComplete?: (value: ValueType) => void;
51 allowCross?: boolean;
52 pushable?: boolean | number;
53 reverse?: boolean;
54 vertical?: boolean;
55 included?: boolean;
56 startPoint?: number;
57 /** @deprecated Please use `styles.track` instead */
58 trackStyle?: React.CSSProperties | React.CSSProperties[];
59 /** @deprecated Please use `styles.handle` instead */
60 handleStyle?: React.CSSProperties | React.CSSProperties[];
61 /** @deprecated Please use `styles.rail` instead */
62 railStyle?: React.CSSProperties;
63 dotStyle?: React.CSSProperties | ((dotValue: number) => React.CSSProperties);
64 activeDotStyle?: React.CSSProperties | ((dotValue: number) => React.CSSProperties);
65 marks?: Record<string | number, React.ReactNode | MarkObj>;
66 dots?: boolean;
67 handleRender?: HandlesProps['handleRender'];
68 activeHandleRender?: HandlesProps['handleRender'];
69 track?: boolean;
70 tabIndex?: number | number[];
71 ariaLabelForHandle?: string | string[];
72 ariaLabelledByForHandle?: string | string[];
73 ariaValueTextFormatterForHandle?: AriaValueFormat | AriaValueFormat[];
74}
75export interface SliderRef {
76 focus: () => void;
77 blur: () => void;
78}
79declare const Slider: React.ForwardRefExoticComponent<SliderProps<number | number[]> & React.RefAttributes<SliderRef>>;
80export default Slider;