](http://godban.github.io/browsers-support-badges/)
](http://godban.github.io/browsers-support-badges/)
](http://godban.github.io/browsers-support-badges/)
](http://godban.github.io/browsers-support-badges/)
](http://godban.github.io/browsers-support-badges/)Here is a word that drag should not select it
67 |Slider with custom handle
15 |Reversed Slider with custom handle
19 |Slider with fixed values
23 |Range with custom tooltip
27 |Keyboard events disabled
37 |Slider with marks, `step=null`
32 |Range Slider with marks, `step=null`, pushable, draggableTrack
44 |Slider with marks and steps
59 |Reversed Slider with marks and steps
63 |Slider with marks, `included=false`
68 |Slider with marks and steps, `included=false`
72 |Range with marks
77 |Range with marks and steps
81 |Basic Range，`allowCross=false`
188 |Basic reverse Range`
192 |Basic Range，`step=20`
196 |Basic Range，`step=20, dots`
200 |Basic Range，disabled
204 |Controlled Range
208 |Controlled Range, not allow across
212 |Controlled Range, not allow across, pushable=5
216 |Multi Range, count=3 and pushable=true
220 |Multi Range with custom track and handle style and pushable
224 |Customized Range
236 |Range with dynamic `max` `min`
240 |Range as child component
244 |draggableTrack two points
248 |draggableTrack two points(reverse)
252 |draggableTrack multiple points
262 |Basic Slider
189 |Basic Slider, `startPoint=50`
193 |Slider reverse
197 |Basic Slider，`step=20`
201 |Basic Slider，`step=20, dots`
205 |209 | Basic Slider，`step=20, dots, dotStyle={"{borderColor: 'orange'}"}, activeDotStyle= 210 | {"{borderColor: 'yellow'}"}` 211 |
212 |Slider with tooltip, with custom `tipFormatter`
223 |231 | Slider with custom handle and track style.(old api, will be deprecated) 232 |
233 |249 | Slider with custom handle and track style.(The recommended new api) 250 |
251 |267 | Reversed Slider with custom handle and track style. 268 | (The recommended new api) 269 |
270 |Basic Slider, disabled
287 |Controlled Slider
291 |Customized Slider
295 |Slider with null value and reset button
299 |Range Slider with null value and reset button
303 |Slider with dynamic `min` `max` `step`
307 |Slider with marks, `step=null`
39 |Slider with marks, `step=null` and `startPoint=0`
43 |Reverse Slider with marks, `step=null`
55 |Slider with marks and steps
67 |Slider with marks, `included=false`
71 |Slider with marks and steps, `included=false`
75 |Range with marks
79 |Range with marks and steps
83 |Range with marks and draggableTrack
95 |Range with marks and draggableTrack(reverse)
106 |
19 | `,
20 | 'utf8',
21 | function(error) {
22 | if(error){
23 | console.log(error);
24 | return false;
25 | }
26 | console.log(`${name} 更新成功~`);
27 | }
28 | )
29 | });
30 |
--------------------------------------------------------------------------------
/src/Handles/Handle.tsx:
--------------------------------------------------------------------------------
1 | import cls from 'classnames';
2 | import KeyCode from 'rc-util/lib/KeyCode';
3 | import * as React from 'react';
4 | import SliderContext from '../context';
5 | import type { OnStartMove } from '../interface';
6 | import { getDirectionStyle, getIndex } from '../util';
7 |
8 | interface RenderProps {
9 | index: number;
10 | prefixCls: string;
11 | value: number;
12 | dragging: boolean;
13 | draggingDelete: boolean;
14 | }
15 |
16 | export interface HandleProps
17 | extends Omit, 'onFocus' | 'onMouseEnter'> {
18 | prefixCls: string;
19 | style?: React.CSSProperties;
20 | value: number;
21 | valueIndex: number;
22 | dragging: boolean;
23 | draggingDelete: boolean;
24 | onStartMove: OnStartMove;
25 | onDelete?: (index: number) => void;
26 | onOffsetChange: (value: number | 'min' | 'max', valueIndex: number) => void;
27 | onFocus: (e: React.FocusEvent, index: number) => void;
28 | onMouseEnter: (e: React.MouseEvent, index: number) => void;
29 | render?: (
30 | origin: React.ReactElement>,
31 | props: RenderProps,
32 | ) => React.ReactElement;
33 | onChangeComplete?: () => void;
34 | mock?: boolean;
35 | }
36 |
37 | const Handle = React.forwardRef((props, ref) => {
38 | const {
39 | prefixCls,
40 | value,
41 | valueIndex,
42 | onStartMove,
43 | onDelete,
44 | style,
45 | render,
46 | dragging,
47 | draggingDelete,
48 | onOffsetChange,
49 | onChangeComplete,
50 | onFocus,
51 | onMouseEnter,
52 | ...restProps
53 | } = props;
54 | const {
55 | min,
56 | max,
57 | direction,
58 | disabled,
59 | keyboard,
60 | range,
61 | tabIndex,
62 | ariaLabelForHandle,
63 | ariaLabelledByForHandle,
64 | ariaRequired,
65 | ariaValueTextFormatterForHandle,
66 | styles,
67 | classNames,
68 | } = React.useContext(SliderContext);
69 |
70 | const handlePrefixCls = `${prefixCls}-handle`;
71 |
72 | // ============================ Events ============================
73 | const onInternalStartMove = (e: React.MouseEvent | React.TouchEvent) => {
74 | if (!disabled) {
75 | onStartMove(e, valueIndex);
76 | }
77 | };
78 |
79 | const onInternalFocus = (e: React.FocusEvent) => {
80 | onFocus?.(e, valueIndex);
81 | };
82 |
83 | const onInternalMouseEnter = (e: React.MouseEvent) => {
84 | onMouseEnter(e, valueIndex);
85 | };
86 |
87 | // =========================== Keyboard ===========================
88 | const onKeyDown: React.KeyboardEventHandler = (e) => {
89 | if (!disabled && keyboard) {
90 | let offset: number | 'min' | 'max' = null;
91 |
92 | // Change the value
93 | switch (e.which || e.keyCode) {
94 | case KeyCode.LEFT:
95 | offset = direction === 'ltr' || direction === 'btt' ? -1 : 1;
96 | break;
97 |
98 | case KeyCode.RIGHT:
99 | offset = direction === 'ltr' || direction === 'btt' ? 1 : -1;
100 | break;
101 |
102 | // Up is plus
103 | case KeyCode.UP:
104 | offset = direction !== 'ttb' ? 1 : -1;
105 | break;
106 |
107 | // Down is minus
108 | case KeyCode.DOWN:
109 | offset = direction !== 'ttb' ? -1 : 1;
110 | break;
111 |
112 | case KeyCode.HOME:
113 | offset = 'min';
114 | break;
115 |
116 | case KeyCode.END:
117 | offset = 'max';
118 | break;
119 |
120 | case KeyCode.PAGE_UP:
121 | offset = 2;
122 | break;
123 |
124 | case KeyCode.PAGE_DOWN:
125 | offset = -2;
126 | break;
127 |
128 | case KeyCode.BACKSPACE:
129 | case KeyCode.DELETE:
130 | onDelete?.(valueIndex);
131 | break;
132 | }
133 |
134 | if (offset !== null) {
135 | e.preventDefault();
136 | onOffsetChange(offset, valueIndex);
137 | }
138 | }
139 | };
140 |
141 | const handleKeyUp = (e: React.KeyboardEvent) => {
142 | switch (e.which || e.keyCode) {
143 | case KeyCode.LEFT:
144 | case KeyCode.RIGHT:
145 | case KeyCode.UP:
146 | case KeyCode.DOWN:
147 | case KeyCode.HOME:
148 | case KeyCode.END:
149 | case KeyCode.PAGE_UP:
150 | case KeyCode.PAGE_DOWN:
151 | onChangeComplete?.();
152 | break;
153 | }
154 | };
155 |
156 | // ============================ Offset ============================
157 | const positionStyle = getDirectionStyle(direction, value, min, max);
158 |
159 | // ============================ Render ============================
160 | let divProps: React.HtmlHTMLAttributes = {};
161 |
162 | if (valueIndex !== null) {
163 | divProps = {
164 | tabIndex: disabled ? null : getIndex(tabIndex, valueIndex),
165 | role: 'slider',
166 | 'aria-valuemin': min,
167 | 'aria-valuemax': max,
168 | 'aria-valuenow': value,
169 | 'aria-disabled': disabled,
170 | 'aria-label': getIndex(ariaLabelForHandle, valueIndex),
171 | 'aria-labelledby': getIndex(ariaLabelledByForHandle, valueIndex),
172 | 'aria-required': getIndex(ariaRequired, valueIndex),
173 | 'aria-valuetext': getIndex(ariaValueTextFormatterForHandle, valueIndex)?.(value),
174 | 'aria-orientation': direction === 'ltr' || direction === 'rtl' ? 'horizontal' : 'vertical',
175 | onMouseDown: onInternalStartMove,
176 | onTouchStart: onInternalStartMove,
177 | onFocus: onInternalFocus,
178 | onMouseEnter: onInternalMouseEnter,
179 | onKeyDown,
180 | onKeyUp: handleKeyUp,
181 | };
182 | }
183 |
184 | let handleNode = (
185 |
204 | );
205 |
206 | // Customize
207 | if (render) {
208 | handleNode = render(handleNode, {
209 | index: valueIndex,
210 | prefixCls,
211 | value,
212 | dragging,
213 | draggingDelete,
214 | });
215 | }
216 |
217 | return handleNode;
218 | });
219 |
220 | if (process.env.NODE_ENV !== 'production') {
221 | Handle.displayName = 'Handle';
222 | }
223 |
224 | export default Handle;
225 |
--------------------------------------------------------------------------------
/src/Handles/index.tsx:
--------------------------------------------------------------------------------
1 | import * as React from 'react';
2 | import { flushSync } from 'react-dom';
3 | import type { OnStartMove } from '../interface';
4 | import { getIndex } from '../util';
5 | import type { HandleProps } from './Handle';
6 | import Handle from './Handle';
7 |
8 | export interface HandlesProps {
9 | prefixCls: string;
10 | style?: React.CSSProperties | React.CSSProperties[];
11 | values: number[];
12 | onStartMove: OnStartMove;
13 | onOffsetChange: (value: number | 'min' | 'max', valueIndex: number) => void;
14 | onFocus?: (e: React.FocusEvent) => void;
15 | onBlur?: (e: React.FocusEvent) => void;
16 | onDelete?: (index: number) => void;
17 | handleRender?: HandleProps['render'];
18 | /**
19 | * When config `activeHandleRender`,
20 | * it will render another hidden handle for active usage.
21 | * This is useful for accessibility or tooltip usage.
22 | */
23 | activeHandleRender?: HandleProps['render'];
24 | draggingIndex: number;
25 | draggingDelete: boolean;
26 | onChangeComplete?: () => void;
27 | }
28 |
29 | export interface HandlesRef {
30 | focus: (index: number) => void;
31 | hideHelp: VoidFunction;
32 | }
33 |
34 | const Handles = React.forwardRef((props, ref) => {
35 | const {
36 | prefixCls,
37 | style,
38 | onStartMove,
39 | onOffsetChange,
40 | values,
41 | handleRender,
42 | activeHandleRender,
43 | draggingIndex,
44 | draggingDelete,
45 | onFocus,
46 | ...restProps
47 | } = props;
48 | const handlesRef = React.useRef>({});
49 |
50 | // =========================== Active ===========================
51 | const [activeVisible, setActiveVisible] = React.useState(false);
52 | const [activeIndex, setActiveIndex] = React.useState(-1);
53 |
54 | const onActive = (index: number) => {
55 | setActiveIndex(index);
56 | setActiveVisible(true);
57 | };
58 |
59 | const onHandleFocus = (e: React.FocusEvent, index: number) => {
60 | onActive(index);
61 | onFocus?.(e);
62 | };
63 |
64 | const onHandleMouseEnter = (e: React.MouseEvent, index: number) => {
65 | onActive(index);
66 | };
67 |
68 | // =========================== Render ===========================
69 | React.useImperativeHandle(ref, () => ({
70 | focus: (index: number) => {
71 | handlesRef.current[index]?.focus();
72 | },
73 | hideHelp: () => {
74 | flushSync(() => {
75 | setActiveVisible(false);
76 | });
77 | },
78 | }));
79 |
80 | // =========================== Render ===========================
81 | // Handle Props
82 | const handleProps = {
83 | prefixCls,
84 | onStartMove,
85 | onOffsetChange,
86 | render: handleRender,
87 | onFocus: onHandleFocus,
88 | onMouseEnter: onHandleMouseEnter,
89 | ...restProps,
90 | };
91 |
92 | return (
93 | <>
94 | {values.map((value, index) => {
95 | const dragging = draggingIndex === index;
96 |
97 | return (
98 | {
100 | if (!node) {
101 | delete handlesRef.current[index];
102 | } else {
103 | handlesRef.current[index] = node;
104 | }
105 | }}
106 | dragging={dragging}
107 | draggingDelete={dragging && draggingDelete}
108 | style={getIndex(style, index)}
109 | key={index}
110 | value={value}
111 | valueIndex={index}
112 | {...handleProps}
113 | />
114 | );
115 | })}
116 |
117 | {/* Used for render tooltip, this is not a real handle */}
118 | {activeHandleRender && activeVisible && (
119 | = (props) => {
15 | const { prefixCls, style, children, value, onClick } = props;
16 | const { min, max, direction, includedStart, includedEnd, included } =
17 | React.useContext(SliderContext);
18 |
19 | const textCls = `${prefixCls}-text`;
20 |
21 | // ============================ Offset ============================
22 | const positionStyle = getDirectionStyle(direction, value, min, max);
23 |
24 | return (
25 | {
31 | e.stopPropagation();
32 | }}
33 | onClick={() => {
34 | onClick(value);
35 | }}
36 | >
37 | {children}
38 |
39 | );
40 | };
41 |
42 | export default Mark;
43 |
--------------------------------------------------------------------------------
/src/Marks/index.tsx:
--------------------------------------------------------------------------------
1 | import * as React from 'react';
2 | import Mark from './Mark';
3 |
4 | export interface MarkObj {
5 | style?: React.CSSProperties;
6 | label?: React.ReactNode;
7 | }
8 |
9 | export interface InternalMarkObj extends MarkObj {
10 | value: number;
11 | }
12 |
13 | export interface MarksProps {
14 | prefixCls: string;
15 | marks?: InternalMarkObj[];
16 | onClick: (value: number) => void;
17 | }
18 |
19 | const Marks: React.FC = (props) => {
20 | const { prefixCls, marks, onClick } = props;
21 |
22 | const markPrefixCls = `${prefixCls}-mark`;
23 |
24 | // Not render mark if empty
25 | if (!marks.length) {
26 | return null;
27 | }
28 |
29 | return (
30 |
31 | {marks.map(({ value, style, label }) => (
32 |
33 | {label}
34 |
35 | ))}
36 |
37 | );
38 | };
39 |
40 | export default Marks;
41 |
--------------------------------------------------------------------------------
/src/Slider.tsx:
--------------------------------------------------------------------------------
1 | import cls from 'classnames';
2 | import useEvent from 'rc-util/lib/hooks/useEvent';
3 | import useMergedState from 'rc-util/lib/hooks/useMergedState';
4 | import isEqual from 'rc-util/lib/isEqual';
5 | import warning from 'rc-util/lib/warning';
6 | import * as React from 'react';
7 | import type { HandlesProps, HandlesRef } from './Handles';
8 | import Handles from './Handles';
9 | import type { InternalMarkObj, MarkObj } from './Marks';
10 | import Marks from './Marks';
11 | import Steps from './Steps';
12 | import Tracks from './Tracks';
13 | import type { SliderContextProps } from './context';
14 | import SliderContext from './context';
15 | import useDrag from './hooks/useDrag';
16 | import useOffset from './hooks/useOffset';
17 | import useRange from './hooks/useRange';
18 | import type {
19 | AriaValueFormat,
20 | Direction,
21 | OnStartMove,
22 | SliderClassNames,
23 | SliderStyles,
24 | } from './interface';
25 |
26 | /**
27 | * New:
28 | * - click mark to update range value
29 | * - handleRender
30 | * - Fix handle with count not correct
31 | * - Fix pushable not work in some case
32 | * - No more FindDOMNode
33 | * - Move all position related style into inline style
34 | * - Key: up is plus, down is minus
35 | * - fix Key with step = null not align with marks
36 | * - Change range should not trigger onChange
37 | * - keyboard support pushable
38 | */
39 |
40 | export type RangeConfig = {
41 | editable?: boolean;
42 | draggableTrack?: boolean;
43 | /** Set min count when `editable` */
44 | minCount?: number;
45 | /** Set max count when `editable` */
46 | maxCount?: number;
47 | };
48 |
49 | export interface SliderProps {
50 | prefixCls?: string;
51 | className?: string;
52 | style?: React.CSSProperties;
53 |
54 | classNames?: SliderClassNames;
55 | styles?: SliderStyles;
56 |
57 | id?: string;
58 |
59 | // Status
60 | disabled?: boolean;
61 | keyboard?: boolean;
62 | autoFocus?: boolean;
63 | onFocus?: (e: React.FocusEvent) => void;
64 | onBlur?: (e: React.FocusEvent) => void;
65 |
66 | // Value
67 | range?: boolean | RangeConfig;
68 | /** @deprecated Use `range.minCount` or `range.maxCount` to handle this */
69 | count?: number;
70 | min?: number;
71 | max?: number;
72 | step?: number | null;
73 | value?: ValueType;
74 | defaultValue?: ValueType;
75 | onChange?: (value: ValueType) => void;
76 | /** @deprecated It's always better to use `onChange` instead */
77 | onBeforeChange?: (value: ValueType) => void;
78 | /** @deprecated Use `onChangeComplete` instead */
79 | onAfterChange?: (value: ValueType) => void;
80 | onChangeComplete?: (value: ValueType) => void;
81 |
82 | // Cross
83 | allowCross?: boolean;
84 | pushable?: boolean | number;
85 |
86 | // Direction
87 | reverse?: boolean;
88 | vertical?: boolean;
89 |
90 | // Style
91 | included?: boolean;
92 | startPoint?: number;
93 | /** @deprecated Please use `styles.track` instead */
94 | trackStyle?: React.CSSProperties | React.CSSProperties[];
95 | /** @deprecated Please use `styles.handle` instead */
96 | handleStyle?: React.CSSProperties | React.CSSProperties[];
97 | /** @deprecated Please use `styles.rail` instead */
98 | railStyle?: React.CSSProperties;
99 | dotStyle?: React.CSSProperties | ((dotValue: number) => React.CSSProperties);
100 | activeDotStyle?: React.CSSProperties | ((dotValue: number) => React.CSSProperties);
101 |
102 | // Decorations
103 | marks?: Record;
104 | dots?: boolean;
105 |
106 | // Components
107 | handleRender?: HandlesProps['handleRender'];
108 | activeHandleRender?: HandlesProps['handleRender'];
109 | track?: boolean;
110 |
111 | // Accessibility
112 | tabIndex?: number | number[];
113 | ariaLabelForHandle?: string | string[];
114 | ariaLabelledByForHandle?: string | string[];
115 | ariaRequired?: boolean;
116 | ariaValueTextFormatterForHandle?: AriaValueFormat | AriaValueFormat[];
117 | }
118 |
119 | export interface SliderRef {
120 | focus: () => void;
121 | blur: () => void;
122 | }
123 |
124 | const Slider = React.forwardRef>((props, ref) => {
125 | const {
126 | prefixCls = 'rc-slider',
127 | className,
128 | style,
129 | classNames,
130 | styles,
131 |
132 | id,
133 |
134 | // Status
135 | disabled = false,
136 | keyboard = true,
137 | autoFocus,
138 | onFocus,
139 | onBlur,
140 |
141 | // Value
142 | min = 0,
143 | max = 100,
144 | step = 1,
145 | value,
146 | defaultValue,
147 | range,
148 | count,
149 | onChange,
150 | onBeforeChange,
151 | onAfterChange,
152 | onChangeComplete,
153 |
154 | // Cross
155 | allowCross = true,
156 | pushable = false,
157 |
158 | // Direction
159 | reverse,
160 | vertical,
161 |
162 | // Style
163 | included = true,
164 | startPoint,
165 | trackStyle,
166 | handleStyle,
167 | railStyle,
168 | dotStyle,
169 | activeDotStyle,
170 |
171 | // Decorations
172 | marks,
173 | dots,
174 |
175 | // Components
176 | handleRender,
177 | activeHandleRender,
178 | track,
179 |
180 | // Accessibility
181 | tabIndex = 0,
182 | ariaLabelForHandle,
183 | ariaLabelledByForHandle,
184 | ariaRequired,
185 | ariaValueTextFormatterForHandle,
186 | } = props;
187 |
188 | const handlesRef = React.useRef(null);
189 | const containerRef = React.useRef(null);
190 |
191 | const direction = React.useMemo(() => {
192 | if (vertical) {
193 | return reverse ? 'ttb' : 'btt';
194 | }
195 | return reverse ? 'rtl' : 'ltr';
196 | }, [reverse, vertical]);
197 |
198 | // ============================ Range =============================
199 | const [rangeEnabled, rangeEditable, rangeDraggableTrack, minCount, maxCount] = useRange(range);
200 |
201 | const mergedMin = React.useMemo(() => (isFinite(min) ? min : 0), [min]);
202 | const mergedMax = React.useMemo(() => (isFinite(max) ? max : 100), [max]);
203 |
204 | // ============================= Step =============================
205 | const mergedStep = React.useMemo(() => (step !== null && step <= 0 ? 1 : step), [step]);
206 |
207 | // ============================= Push =============================
208 | const mergedPush = React.useMemo(() => {
209 | if (typeof pushable === 'boolean') {
210 | return pushable ? mergedStep : false;
211 | }
212 | return pushable >= 0 ? pushable : false;
213 | }, [pushable, mergedStep]);
214 |
215 | // ============================ Marks =============================
216 | const markList = React.useMemo(() => {
217 | return Object.keys(marks || {})
218 | .map((key) => {
219 | const mark = marks[key];
220 | const markObj: InternalMarkObj = {
221 | value: Number(key),
222 | };
223 |
224 | if (
225 | mark &&
226 | typeof mark === 'object' &&
227 | !React.isValidElement(mark) &&
228 | ('label' in mark || 'style' in mark)
229 | ) {
230 | markObj.style = mark.style;
231 | markObj.label = mark.label;
232 | } else {
233 | markObj.label = mark as React.ReactNode;
234 | }
235 |
236 | return markObj;
237 | })
238 | .filter(({ label }) => label || typeof label === 'number')
239 | .sort((a, b) => a.value - b.value);
240 | }, [marks]);
241 |
242 | // ============================ Format ============================
243 | const [formatValue, offsetValues] = useOffset(
244 | mergedMin,
245 | mergedMax,
246 | mergedStep,
247 | markList,
248 | allowCross,
249 | mergedPush,
250 | );
251 |
252 | // ============================ Values ============================
253 | const [mergedValue, setValue] = useMergedState(defaultValue, {
254 | value,
255 | });
256 |
257 | const rawValues = React.useMemo(() => {
258 | const valueList =
259 | mergedValue === null || mergedValue === undefined
260 | ? []
261 | : Array.isArray(mergedValue)
262 | ? mergedValue
263 | : [mergedValue];
264 |
265 | const [val0 = mergedMin] = valueList;
266 | let returnValues = mergedValue === null ? [] : [val0];
267 |
268 | // Format as range
269 | if (rangeEnabled) {
270 | returnValues = [...valueList];
271 |
272 | // When count provided or value is `undefined`, we fill values
273 | if (count || mergedValue === undefined) {
274 | const pointCount = count >= 0 ? count + 1 : 2;
275 | returnValues = returnValues.slice(0, pointCount);
276 |
277 | // Fill with count
278 | while (returnValues.length < pointCount) {
279 | returnValues.push(returnValues[returnValues.length - 1] ?? mergedMin);
280 | }
281 | }
282 | returnValues.sort((a, b) => a - b);
283 | }
284 |
285 | // Align in range
286 | returnValues.forEach((val, index) => {
287 | returnValues[index] = formatValue(val);
288 | });
289 |
290 | return returnValues;
291 | }, [mergedValue, rangeEnabled, mergedMin, count, formatValue]);
292 |
293 | // =========================== onChange ===========================
294 | const getTriggerValue = (triggerValues: number[]) =>
295 | rangeEnabled ? triggerValues : triggerValues[0];
296 |
297 | const triggerChange = useEvent((nextValues: number[]) => {
298 | // Order first
299 | const cloneNextValues = [...nextValues].sort((a, b) => a - b);
300 |
301 | // Trigger event if needed
302 | if (onChange && !isEqual(cloneNextValues, rawValues, true)) {
303 | onChange(getTriggerValue(cloneNextValues));
304 | }
305 |
306 | // We set this later since it will re-render component immediately
307 | setValue(cloneNextValues);
308 | });
309 |
310 | const finishChange = useEvent((draggingDelete?: boolean) => {
311 | // Trigger from `useDrag` will tell if it's a delete action
312 | if (draggingDelete) {
313 | handlesRef.current.hideHelp();
314 | }
315 |
316 | const finishValue = getTriggerValue(rawValues);
317 | onAfterChange?.(finishValue);
318 | warning(
319 | !onAfterChange,
320 | '[rc-slider] `onAfterChange` is deprecated. Please use `onChangeComplete` instead.',
321 | );
322 | onChangeComplete?.(finishValue);
323 | });
324 |
325 | const onDelete = (index: number) => {
326 | if (disabled || !rangeEditable || rawValues.length <= minCount) {
327 | return;
328 | }
329 |
330 | const cloneNextValues = [...rawValues];
331 | cloneNextValues.splice(index, 1);
332 |
333 | onBeforeChange?.(getTriggerValue(cloneNextValues));
334 | triggerChange(cloneNextValues);
335 |
336 | const nextFocusIndex = Math.max(0, index - 1);
337 | handlesRef.current.hideHelp();
338 | handlesRef.current.focus(nextFocusIndex);
339 | };
340 |
341 | const [draggingIndex, draggingValue, draggingDelete, cacheValues, onStartDrag] = useDrag(
342 | containerRef,
343 | direction,
344 | rawValues,
345 | mergedMin,
346 | mergedMax,
347 | formatValue,
348 | triggerChange,
349 | finishChange,
350 | offsetValues,
351 | rangeEditable,
352 | minCount,
353 | );
354 |
355 | /**
356 | * When `rangeEditable` will insert a new value in the values array.
357 | * Else it will replace the value in the values array.
358 | */
359 | const changeToCloseValue = (newValue: number, e?: React.MouseEvent) => {
360 | if (!disabled) {
361 | // Create new values
362 | const cloneNextValues = [...rawValues];
363 |
364 | let valueIndex = 0;
365 | let valueBeforeIndex = 0; // Record the index which value < newValue
366 | let valueDist = mergedMax - mergedMin;
367 |
368 | rawValues.forEach((val, index) => {
369 | const dist = Math.abs(newValue - val);
370 | if (dist <= valueDist) {
371 | valueDist = dist;
372 | valueIndex = index;
373 | }
374 |
375 | if (val < newValue) {
376 | valueBeforeIndex = index;
377 | }
378 | });
379 |
380 | let focusIndex = valueIndex;
381 |
382 | if (rangeEditable && valueDist !== 0 && (!maxCount || rawValues.length < maxCount)) {
383 | cloneNextValues.splice(valueBeforeIndex + 1, 0, newValue);
384 | focusIndex = valueBeforeIndex + 1;
385 | } else {
386 | cloneNextValues[valueIndex] = newValue;
387 | }
388 |
389 | // Fill value to match default 2 (only when `rawValues` is empty)
390 | if (rangeEnabled && !rawValues.length && count === undefined) {
391 | cloneNextValues.push(newValue);
392 | }
393 |
394 | const nextValue = getTriggerValue(cloneNextValues);
395 | onBeforeChange?.(nextValue);
396 | triggerChange(cloneNextValues);
397 |
398 | if (e) {
399 | (document.activeElement as HTMLElement)?.blur?.();
400 | handlesRef.current.focus(focusIndex);
401 | onStartDrag(e, focusIndex, cloneNextValues);
402 | } else {
403 | // https://github.com/ant-design/ant-design/issues/49997
404 | onAfterChange?.(nextValue);
405 | warning(
406 | !onAfterChange,
407 | '[rc-slider] `onAfterChange` is deprecated. Please use `onChangeComplete` instead.',
408 | );
409 | onChangeComplete?.(nextValue);
410 | }
411 | }
412 | };
413 |
414 | // ============================ Click =============================
415 | const onSliderMouseDown: React.MouseEventHandler = (e) => {
416 | e.preventDefault();
417 |
418 | const { width, height, left, top, bottom, right } =
419 | containerRef.current.getBoundingClientRect();
420 | const { clientX, clientY } = e;
421 |
422 | let percent: number;
423 | switch (direction) {
424 | case 'btt':
425 | percent = (bottom - clientY) / height;
426 | break;
427 |
428 | case 'ttb':
429 | percent = (clientY - top) / height;
430 | break;
431 |
432 | case 'rtl':
433 | percent = (right - clientX) / width;
434 | break;
435 |
436 | default:
437 | percent = (clientX - left) / width;
438 | }
439 |
440 | const nextValue = mergedMin + percent * (mergedMax - mergedMin);
441 | changeToCloseValue(formatValue(nextValue), e);
442 | };
443 |
444 | // =========================== Keyboard ===========================
445 | const [keyboardValue, setKeyboardValue] = React.useState(null);
446 |
447 | const onHandleOffsetChange = (offset: number | 'min' | 'max', valueIndex: number) => {
448 | if (!disabled) {
449 | const next = offsetValues(rawValues, offset, valueIndex);
450 |
451 | onBeforeChange?.(getTriggerValue(rawValues));
452 | triggerChange(next.values);
453 |
454 | setKeyboardValue(next.value);
455 | }
456 | };
457 |
458 | React.useEffect(() => {
459 | if (keyboardValue !== null) {
460 | const valueIndex = rawValues.indexOf(keyboardValue);
461 | if (valueIndex >= 0) {
462 | handlesRef.current.focus(valueIndex);
463 | }
464 | }
465 |
466 | setKeyboardValue(null);
467 | }, [keyboardValue]);
468 |
469 | // ============================= Drag =============================
470 | const mergedDraggableTrack = React.useMemo(() => {
471 | if (rangeDraggableTrack && mergedStep === null) {
472 | if (process.env.NODE_ENV !== 'production') {
473 | warning(false, '`draggableTrack` is not supported when `step` is `null`.');
474 | }
475 | return false;
476 | }
477 | return rangeDraggableTrack;
478 | }, [rangeDraggableTrack, mergedStep]);
479 |
480 | const onStartMove: OnStartMove = useEvent((e, valueIndex) => {
481 | onStartDrag(e, valueIndex);
482 |
483 | onBeforeChange?.(getTriggerValue(rawValues));
484 | });
485 |
486 | // Auto focus for updated handle
487 | const dragging = draggingIndex !== -1;
488 | React.useEffect(() => {
489 | if (!dragging) {
490 | const valueIndex = rawValues.lastIndexOf(draggingValue);
491 | handlesRef.current.focus(valueIndex);
492 | }
493 | }, [dragging]);
494 |
495 | // =========================== Included ===========================
496 | const sortedCacheValues = React.useMemo(
497 | () => [...cacheValues].sort((a, b) => a - b),
498 | [cacheValues],
499 | );
500 |
501 | // Provide a range values with included [min, max]
502 | // Used for Track, Mark & Dot
503 | const [includedStart, includedEnd] = React.useMemo(() => {
504 | if (!rangeEnabled) {
505 | return [mergedMin, sortedCacheValues[0]];
506 | }
507 |
508 | return [sortedCacheValues[0], sortedCacheValues[sortedCacheValues.length - 1]];
509 | }, [sortedCacheValues, rangeEnabled, mergedMin]);
510 |
511 | // ============================= Refs =============================
512 | React.useImperativeHandle(ref, () => ({
513 | focus: () => {
514 | handlesRef.current.focus(0);
515 | },
516 | blur: () => {
517 | const { activeElement } = document;
518 | if (containerRef.current?.contains(activeElement)) {
519 | (activeElement as HTMLElement)?.blur();
520 | }
521 | },
522 | }));
523 |
524 | // ========================== Auto Focus ==========================
525 | React.useEffect(() => {
526 | if (autoFocus) {
527 | handlesRef.current.focus(0);
528 | }
529 | }, []);
530 |
531 | // =========================== Context ============================
532 | const context = React.useMemo(
533 | () => ({
534 | min: mergedMin,
535 | max: mergedMax,
536 | direction,
537 | disabled,
538 | keyboard,
539 | step: mergedStep,
540 | included,
541 | includedStart,
542 | includedEnd,
543 | range: rangeEnabled,
544 | tabIndex,
545 | ariaLabelForHandle,
546 | ariaLabelledByForHandle,
547 | ariaRequired,
548 | ariaValueTextFormatterForHandle,
549 | styles: styles || {},
550 | classNames: classNames || {},
551 | }),
552 | [
553 | mergedMin,
554 | mergedMax,
555 | direction,
556 | disabled,
557 | keyboard,
558 | mergedStep,
559 | included,
560 | includedStart,
561 | includedEnd,
562 | rangeEnabled,
563 | tabIndex,
564 | ariaLabelForHandle,
565 | ariaLabelledByForHandle,
566 | ariaRequired,
567 | ariaValueTextFormatterForHandle,
568 | styles,
569 | classNames,
570 | ],
571 | );
572 |
573 | // ============================ Render ============================
574 | return (
575 |
576 |
588 |
592 |
593 | {track !== false && (
594 |
631 | );
632 | });
633 |
634 | if (process.env.NODE_ENV !== 'production') {
635 | Slider.displayName = 'Slider';
636 | }
637 |
638 | export default Slider;
639 |
--------------------------------------------------------------------------------
/src/Steps/Dot.tsx:
--------------------------------------------------------------------------------
1 | import classNames from 'classnames';
2 | import * as React from 'react';
3 | import SliderContext from '../context';
4 | import { getDirectionStyle } from '../util';
5 |
6 | export interface DotProps {
7 | prefixCls: string;
8 | value: number;
9 | style?: React.CSSProperties | ((dotValue: number) => React.CSSProperties);
10 | activeStyle?: React.CSSProperties | ((dotValue: number) => React.CSSProperties);
11 | }
12 |
13 | const Dot: React.FC = (props) => {
14 | const { prefixCls, value, style, activeStyle } = props;
15 | const { min, max, direction, included, includedStart, includedEnd } =
16 | React.useContext(SliderContext);
17 |
18 | const dotClassName = `${prefixCls}-dot`;
19 | const active = included && includedStart <= value && value <= includedEnd;
20 |
21 | // ============================ Offset ============================
22 | let mergedStyle: React.CSSProperties = {
23 | ...getDirectionStyle(direction, value, min, max),
24 | ...(typeof style === 'function' ? style(value) : style),
25 | };
26 |
27 | if (active) {
28 | mergedStyle = {
29 | ...mergedStyle,
30 | ...(typeof activeStyle === 'function' ? activeStyle(value) : activeStyle),
31 | };
32 | }
33 |
34 | return (
35 |
39 | );
40 | };
41 |
42 | export default Dot;
43 |
--------------------------------------------------------------------------------
/src/Steps/index.tsx:
--------------------------------------------------------------------------------
1 | import * as React from 'react';
2 | import type { InternalMarkObj } from '../Marks';
3 | import SliderContext from '../context';
4 | import Dot from './Dot';
5 |
6 | export interface StepsProps {
7 | prefixCls: string;
8 | marks: InternalMarkObj[];
9 | dots?: boolean;
10 | style?: React.CSSProperties | ((dotValue: number) => React.CSSProperties);
11 | activeStyle?: React.CSSProperties | ((dotValue: number) => React.CSSProperties);
12 | }
13 |
14 | const Steps: React.FC = (props) => {
15 | const { prefixCls, marks, dots, style, activeStyle } = props;
16 | const { min, max, step } = React.useContext(SliderContext);
17 |
18 | const stepDots = React.useMemo(() => {
19 | const dotSet = new Set();
20 |
21 | // Add marks
22 | marks.forEach((mark) => {
23 | dotSet.add(mark.value);
24 | });
25 |
26 | // Fill dots
27 | if (dots && step !== null) {
28 | let current = min;
29 | while (current <= max) {
30 | dotSet.add(current);
31 | current += step;
32 | }
33 | }
34 |
35 | return Array.from(dotSet);
36 | }, [min, max, step, dots, marks]);
37 |
38 | return (
39 |
40 | {stepDots.map((dotValue) => (
41 |
50 | );
51 | };
52 |
53 | export default Steps;
54 |
--------------------------------------------------------------------------------
/src/Tracks/Track.tsx:
--------------------------------------------------------------------------------
1 | import cls from 'classnames';
2 | import * as React from 'react';
3 | import SliderContext from '../context';
4 | import type { OnStartMove } from '../interface';
5 | import { getOffset } from '../util';
6 |
7 | export interface TrackProps {
8 | prefixCls: string;
9 | style?: React.CSSProperties;
10 | /** Replace with origin prefix concat className */
11 | replaceCls?: string;
12 | start: number;
13 | end: number;
14 | index: number;
15 | onStartMove?: OnStartMove;
16 | }
17 |
18 | const Track: React.FC = (props) => {
19 | const { prefixCls, style, start, end, index, onStartMove, replaceCls } = props;
20 | const { direction, min, max, disabled, range, classNames } = React.useContext(SliderContext);
21 |
22 | const trackPrefixCls = `${prefixCls}-track`;
23 |
24 | const offsetStart = getOffset(start, min, max);
25 | const offsetEnd = getOffset(end, min, max);
26 |
27 | // ============================ Events ============================
28 | const onInternalStartMove = (e: React.MouseEvent | React.TouchEvent) => {
29 | if (!disabled && onStartMove) {
30 | onStartMove(e, -1);
31 | }
32 | };
33 |
34 | // ============================ Render ============================
35 | const positionStyle: React.CSSProperties = {};
36 |
37 | switch (direction) {
38 | case 'rtl':
39 | positionStyle.right = `${offsetStart * 100}%`;
40 | positionStyle.width = `${offsetEnd * 100 - offsetStart * 100}%`;
41 | break;
42 |
43 | case 'btt':
44 | positionStyle.bottom = `${offsetStart * 100}%`;
45 | positionStyle.height = `${offsetEnd * 100 - offsetStart * 100}%`;
46 | break;
47 |
48 | case 'ttb':
49 | positionStyle.top = `${offsetStart * 100}%`;
50 | positionStyle.height = `${offsetEnd * 100 - offsetStart * 100}%`;
51 | break;
52 |
53 | default:
54 | positionStyle.left = `${offsetStart * 100}%`;
55 | positionStyle.width = `${offsetEnd * 100 - offsetStart * 100}%`;
56 | }
57 |
58 | const className =
59 | replaceCls ||
60 | cls(
61 | trackPrefixCls,
62 | {
63 | [`${trackPrefixCls}-${index + 1}`]: index !== null && range,
64 | [`${prefixCls}-track-draggable`]: onStartMove,
65 | },
66 | classNames.track,
67 | );
68 |
69 | return (
70 |
76 | );
77 | };
78 |
79 | export default Track;
80 |
--------------------------------------------------------------------------------
/src/Tracks/index.tsx:
--------------------------------------------------------------------------------
1 | import cls from 'classnames';
2 | import * as React from 'react';
3 | import SliderContext from '../context';
4 | import type { OnStartMove } from '../interface';
5 | import { getIndex } from '../util';
6 | import Track from './Track';
7 |
8 | export interface TrackProps {
9 | prefixCls: string;
10 | style?: React.CSSProperties | React.CSSProperties[];
11 | values: number[];
12 | onStartMove?: OnStartMove;
13 | startPoint?: number;
14 | }
15 |
16 | const Tracks: React.FC = (props) => {
17 | const { prefixCls, style, values, startPoint, onStartMove } = props;
18 | const { included, range, min, styles, classNames } = React.useContext(SliderContext);
19 |
20 | // =========================== List ===========================
21 | const trackList = React.useMemo(() => {
22 | if (!range) {
23 | // null value do not have track
24 | if (values.length === 0) {
25 | return [];
26 | }
27 |
28 | const startValue = startPoint ?? min;
29 | const endValue = values[0];
30 |
31 | return [{ start: Math.min(startValue, endValue), end: Math.max(startValue, endValue) }];
32 | }
33 |
34 | // Multiple
35 | const list: { start: number; end: number }[] = [];
36 |
37 | for (let i = 0; i < values.length - 1; i += 1) {
38 | list.push({ start: values[i], end: values[i + 1] });
39 | }
40 |
41 | return list;
42 | }, [values, range, startPoint, min]);
43 |
44 | if (!included) {
45 | return null;
46 | }
47 |
48 | // ========================== Render ==========================
49 | const tracksNode =
50 | trackList?.length && (classNames.tracks || styles.tracks) ? (
51 |
59 | ) : null;
60 |
61 | return (
62 | <>
63 | {tracksNode}
64 | {trackList.map(({ start, end }, index) => (
65 |
74 | ))}
75 |
76 | );
77 | };
78 |
79 | export default Tracks;
80 |
--------------------------------------------------------------------------------
/src/context.ts:
--------------------------------------------------------------------------------
1 | import * as React from 'react';
2 | import type { AriaValueFormat, Direction, SliderClassNames, SliderStyles } from './interface';
3 |
4 | export interface SliderContextProps {
5 | min: number;
6 | max: number;
7 | includedStart: number;
8 | includedEnd: number;
9 | direction: Direction;
10 | disabled?: boolean;
11 | keyboard?: boolean;
12 | included?: boolean;
13 | step: number | null;
14 | range?: boolean;
15 | tabIndex: number | number[];
16 | ariaLabelForHandle?: string | string[];
17 | ariaLabelledByForHandle?: string | string[];
18 | ariaRequired?: boolean;
19 | ariaValueTextFormatterForHandle?: AriaValueFormat | AriaValueFormat[];
20 | classNames: SliderClassNames;
21 | styles: SliderStyles;
22 | }
23 |
24 | const SliderContext = React.createContext({
25 | min: 0,
26 | max: 0,
27 | direction: 'ltr',
28 | step: 1,
29 | includedStart: 0,
30 | includedEnd: 0,
31 | tabIndex: 0,
32 | keyboard: true,
33 | styles: {},
34 | classNames: {},
35 | });
36 |
37 | export default SliderContext;
38 |
39 | export interface UnstableContextProps {
40 | onDragStart?: (info: {
41 | rawValues: number[];
42 | draggingIndex: number;
43 | draggingValue: number;
44 | }) => void;
45 | onDragChange?: (info: {
46 | rawValues: number[];
47 | deleteIndex: number;
48 | draggingIndex: number;
49 | draggingValue: number;
50 | }) => void;
51 | }
52 |
53 | /** @private NOT PROMISE AVAILABLE. DO NOT USE IN PRODUCTION. */
54 | export const UnstableContext = React.createContext({});
55 |
--------------------------------------------------------------------------------
/src/hooks/useDrag.ts:
--------------------------------------------------------------------------------
1 | import * as React from 'react';
2 | import useEvent from 'rc-util/lib/hooks/useEvent';
3 | import useLayoutEffect from 'rc-util/lib/hooks/useLayoutEffect';
4 | import { UnstableContext } from '../context';
5 | import type { Direction, OnStartMove } from '../interface';
6 | import type { OffsetValues } from './useOffset';
7 |
8 | /** Drag to delete offset. It's a user experience number for dragging out */
9 | const REMOVE_DIST = 130;
10 |
11 | function getPosition(e: React.MouseEvent | React.TouchEvent | MouseEvent | TouchEvent) {
12 | const obj = 'targetTouches' in e ? e.targetTouches[0] : e;
13 |
14 | return { pageX: obj.pageX, pageY: obj.pageY };
15 | }
16 |
17 | function useDrag(
18 | containerRef: React.RefObject,
19 | direction: Direction,
20 | rawValues: number[],
21 | min: number,
22 | max: number,
23 | formatValue: (value: number) => number,
24 | triggerChange: (values: number[]) => void,
25 | finishChange: (draggingDelete: boolean) => void,
26 | offsetValues: OffsetValues,
27 | editable: boolean,
28 | minCount: number,
29 | ): [
30 | draggingIndex: number,
31 | draggingValue: number,
32 | draggingDelete: boolean,
33 | returnValues: number[],
34 | onStartMove: OnStartMove,
35 | ] {
36 | const [draggingValue, setDraggingValue] = React.useState(null);
37 | const [draggingIndex, setDraggingIndex] = React.useState(-1);
38 | const [draggingDelete, setDraggingDelete] = React.useState(false);
39 | const [cacheValues, setCacheValues] = React.useState(rawValues);
40 | const [originValues, setOriginValues] = React.useState(rawValues);
41 |
42 | const mouseMoveEventRef = React.useRef<(event: MouseEvent) => void>(null);
43 | const mouseUpEventRef = React.useRef<(event: MouseEvent) => void>(null);
44 | const touchEventTargetRef = React.useRef(null);
45 |
46 | const { onDragStart, onDragChange } = React.useContext(UnstableContext);
47 |
48 | useLayoutEffect(() => {
49 | if (draggingIndex === -1) {
50 | setCacheValues(rawValues);
51 | }
52 | }, [rawValues, draggingIndex]);
53 |
54 | // Clean up event
55 | React.useEffect(
56 | () => () => {
57 | document.removeEventListener('mousemove', mouseMoveEventRef.current);
58 | document.removeEventListener('mouseup', mouseUpEventRef.current);
59 | if (touchEventTargetRef.current) {
60 | touchEventTargetRef.current.removeEventListener('touchmove', mouseMoveEventRef.current);
61 | touchEventTargetRef.current.removeEventListener('touchend', mouseUpEventRef.current);
62 | }
63 | },
64 | [],
65 | );
66 |
67 | const flushValues = (nextValues: number[], nextValue?: number, deleteMark?: boolean) => {
68 | // Perf: Only update state when value changed
69 | if (nextValue !== undefined) {
70 | setDraggingValue(nextValue);
71 | }
72 | setCacheValues(nextValues);
73 |
74 | let changeValues = nextValues;
75 | if (deleteMark) {
76 | changeValues = nextValues.filter((_, i) => i !== draggingIndex);
77 | }
78 | triggerChange(changeValues);
79 |
80 | if (onDragChange) {
81 | onDragChange({
82 | rawValues: nextValues,
83 | deleteIndex: deleteMark ? draggingIndex : -1,
84 | draggingIndex,
85 | draggingValue: nextValue,
86 | });
87 | }
88 | };
89 |
90 | const updateCacheValue = useEvent(
91 | (valueIndex: number, offsetPercent: number, deleteMark: boolean) => {
92 | if (valueIndex === -1) {
93 | // >>>> Dragging on the track
94 | const startValue = originValues[0];
95 | const endValue = originValues[originValues.length - 1];
96 | const maxStartOffset = min - startValue;
97 | const maxEndOffset = max - endValue;
98 |
99 | // Get valid offset
100 | let offset = offsetPercent * (max - min);
101 | offset = Math.max(offset, maxStartOffset);
102 | offset = Math.min(offset, maxEndOffset);
103 |
104 | // Use first value to revert back of valid offset (like steps marks)
105 | const formatStartValue = formatValue(startValue + offset);
106 | offset = formatStartValue - startValue;
107 | const cloneCacheValues = originValues.map((val) => val + offset);
108 | flushValues(cloneCacheValues);
109 | } else {
110 | // >>>> Dragging on the handle
111 | const offsetDist = (max - min) * offsetPercent;
112 |
113 | // Always start with the valueIndex origin value
114 | const cloneValues = [...cacheValues];
115 | cloneValues[valueIndex] = originValues[valueIndex];
116 |
117 | const next = offsetValues(cloneValues, offsetDist, valueIndex, 'dist');
118 |
119 | flushValues(next.values, next.value, deleteMark);
120 | }
121 | },
122 | );
123 |
124 | const onStartMove: OnStartMove = (e, valueIndex, startValues?: number[]) => {
125 | e.stopPropagation();
126 |
127 | // 如果是点击 track 触发的，需要传入变化后的初始值，而不能直接用 rawValues
128 | const initialValues = startValues || rawValues;
129 | const originValue = initialValues[valueIndex];
130 |
131 | setDraggingIndex(valueIndex);
132 | setDraggingValue(originValue);
133 | setOriginValues(initialValues);
134 | setCacheValues(initialValues);
135 | setDraggingDelete(false);
136 |
137 | const { pageX: startX, pageY: startY } = getPosition(e);
138 |
139 | // We declare it here since closure can't get outer latest value
140 | let deleteMark = false;
141 |
142 | // Internal trigger event
143 | if (onDragStart) {
144 | onDragStart({
145 | rawValues: initialValues,
146 | draggingIndex: valueIndex,
147 | draggingValue: originValue,
148 | });
149 | }
150 |
151 | // Moving
152 | const onMouseMove = (event: MouseEvent | TouchEvent) => {
153 | event.preventDefault();
154 |
155 | const { pageX: moveX, pageY: moveY } = getPosition(event);
156 | const offsetX = moveX - startX;
157 | const offsetY = moveY - startY;
158 |
159 | const { width, height } = containerRef.current.getBoundingClientRect();
160 |
161 | let offSetPercent: number;
162 | let removeDist: number;
163 |
164 | switch (direction) {
165 | case 'btt':
166 | offSetPercent = -offsetY / height;
167 | removeDist = offsetX;
168 | break;
169 |
170 | case 'ttb':
171 | offSetPercent = offsetY / height;
172 | removeDist = offsetX;
173 | break;
174 |
175 | case 'rtl':
176 | offSetPercent = -offsetX / width;
177 | removeDist = offsetY;
178 | break;
179 |
180 | default:
181 | offSetPercent = offsetX / width;
182 | removeDist = offsetY;
183 | }
184 |
185 | // Check if need mark remove
186 | deleteMark = editable
187 | ? Math.abs(removeDist) > REMOVE_DIST && minCount < cacheValues.length
188 | : false;
189 | setDraggingDelete(deleteMark);
190 |
191 | updateCacheValue(valueIndex, offSetPercent, deleteMark);
192 | };
193 |
194 | // End
195 | const onMouseUp = (event: MouseEvent | TouchEvent) => {
196 | event.preventDefault();
197 |
198 | document.removeEventListener('mouseup', onMouseUp);
199 | document.removeEventListener('mousemove', onMouseMove);
200 | if (touchEventTargetRef.current) {
201 | touchEventTargetRef.current.removeEventListener('touchmove', mouseMoveEventRef.current);
202 | touchEventTargetRef.current.removeEventListener('touchend', mouseUpEventRef.current);
203 | }
204 | mouseMoveEventRef.current = null;
205 | mouseUpEventRef.current = null;
206 | touchEventTargetRef.current = null;
207 |
208 | finishChange(deleteMark);
209 |
210 | setDraggingIndex(-1);
211 | setDraggingDelete(false);
212 | };
213 |
214 | document.addEventListener('mouseup', onMouseUp);
215 | document.addEventListener('mousemove', onMouseMove);
216 | e.currentTarget.addEventListener('touchend', onMouseUp);
217 | e.currentTarget.addEventListener('touchmove', onMouseMove);
218 | mouseMoveEventRef.current = onMouseMove;
219 | mouseUpEventRef.current = onMouseUp;
220 | touchEventTargetRef.current = e.currentTarget;
221 | };
222 |
223 | // Only return cache value when it mapping with rawValues
224 | const returnValues = React.useMemo(() => {
225 | const sourceValues = [...rawValues].sort((a, b) => a - b);
226 | const targetValues = [...cacheValues].sort((a, b) => a - b);
227 |
228 | const counts: Record = {};
229 | targetValues.forEach((val) => {
230 | counts[val] = (counts[val] || 0) + 1;
231 | });
232 | sourceValues.forEach((val) => {
233 | counts[val] = (counts[val] || 0) - 1;
234 | });
235 |
236 | const maxDiffCount = editable ? 1 : 0;
237 | const diffCount: number = Object.values(counts).reduce(
238 | (prev, next) => prev + Math.abs(next),
239 | 0,
240 | );
241 |
242 | return diffCount <= maxDiffCount ? cacheValues : rawValues;
243 | }, [rawValues, cacheValues, editable]);
244 |
245 | return [draggingIndex, draggingValue, draggingDelete, returnValues, onStartMove];
246 | }
247 |
248 | export default useDrag;
249 |
--------------------------------------------------------------------------------
/src/hooks/useOffset.ts:
--------------------------------------------------------------------------------
1 | import * as React from 'react';
2 | import type { InternalMarkObj } from '../Marks';
3 |
4 | /** Format the value in the range of [min, max] */
5 | type FormatRangeValue = (value: number) => number;
6 |
7 | /** Format value align with step */
8 | type FormatStepValue = (value: number) => number;
9 |
10 | /** Format value align with step & marks */
11 | type FormatValue = (value: number) => number;
12 |
13 | type OffsetMode = 'unit' | 'dist';
14 |
15 | type OffsetValue = (
16 | values: number[],
17 | offset: number | 'min' | 'max',
18 | valueIndex: number,
19 | mode?: OffsetMode,
20 | ) => number;
21 |
22 | export type OffsetValues = (
23 | values: number[],
24 | offset: number | 'min' | 'max',
25 | valueIndex: number,
26 | mode?: OffsetMode,
27 | ) => {
28 | value: number;
29 | values: number[];
30 | };
31 |
32 | export default function useOffset(
33 | min: number,
34 | max: number,
35 | step: number,
36 | markList: InternalMarkObj[],
37 | allowCross: boolean,
38 | pushable: false | number,
39 | ): [FormatValue, OffsetValues] {
40 | const formatRangeValue: FormatRangeValue = React.useCallback(
41 | (val) => Math.max(min, Math.min(max, val)),
42 | [min, max],
43 | );
44 |
45 | const formatStepValue: FormatStepValue = React.useCallback(
46 | (val) => {
47 | if (step !== null) {
48 | const stepValue = min + Math.round((formatRangeValue(val) - min) / step) * step;
49 |
50 | // Cut number in case to be like 0.30000000000000004
51 | const getDecimal = (num: number) => (String(num).split('.')[1] || '').length;
52 | const maxDecimal = Math.max(getDecimal(step), getDecimal(max), getDecimal(min));
53 | const fixedValue = Number(stepValue.toFixed(maxDecimal));
54 |
55 | return min <= fixedValue && fixedValue <= max ? fixedValue : null;
56 | }
57 | return null;
58 | },
59 | [step, min, max, formatRangeValue],
60 | );
61 |
62 | const formatValue = React.useCallback(
63 | (val) => {
64 | const formatNextValue = formatRangeValue(val);
65 |
66 | // List align values
67 | const alignValues = markList.map((mark) => mark.value);
68 | if (step !== null) {
69 | alignValues.push(formatStepValue(val));
70 | }
71 |
72 | // min & max
73 | alignValues.push(min, max);
74 |
75 | // Align with marks
76 | let closeValue = alignValues[0];
77 | let closeDist = max - min;
78 |
79 | alignValues.forEach((alignValue) => {
80 | const dist = Math.abs(formatNextValue - alignValue);
81 | if (dist <= closeDist) {
82 | closeValue = alignValue;
83 | closeDist = dist;
84 | }
85 | });
86 |
87 | return closeValue;
88 | },
89 | [min, max, markList, step, formatRangeValue, formatStepValue],
90 | );
91 |
92 | // ========================== Offset ==========================
93 | // Single Value
94 | const offsetValue: OffsetValue = (values, offset, valueIndex, mode = 'unit') => {
95 | if (typeof offset === 'number') {
96 | let nextValue: number;
97 | const originValue = values[valueIndex];
98 |
99 | // Only used for `dist` mode
100 | const targetDistValue = originValue + offset;
101 |
102 | // Compare next step value & mark value which is best match
103 | let potentialValues: number[] = [];
104 | markList.forEach((mark) => {
105 | potentialValues.push(mark.value);
106 | });
107 |
108 | // Min & Max
109 | potentialValues.push(min, max);
110 |
111 | // In case origin value is align with mark but not with step
112 | potentialValues.push(formatStepValue(originValue));
113 |
114 | // Put offset step value also
115 | const sign = offset > 0 ? 1 : -1;
116 |
117 | if (mode === 'unit') {
118 | potentialValues.push(formatStepValue(originValue + sign * step));
119 | } else {
120 | potentialValues.push(formatStepValue(targetDistValue));
121 | }
122 |
123 | // Find close one
124 | potentialValues = potentialValues
125 | .filter((val) => val !== null)
126 | // Remove reverse value
127 | .filter((val) => (offset < 0 ? val <= originValue : val >= originValue));
128 |
129 | if (mode === 'unit') {
130 | // `unit` mode can not contain itself
131 | potentialValues = potentialValues.filter((val) => val !== originValue);
132 | }
133 |
134 | const compareValue = mode === 'unit' ? originValue : targetDistValue;
135 |
136 | nextValue = potentialValues[0];
137 | let valueDist = Math.abs(nextValue - compareValue);
138 |
139 | potentialValues.forEach((potentialValue) => {
140 | const dist = Math.abs(potentialValue - compareValue);
141 | if (dist < valueDist) {
142 | nextValue = potentialValue;
143 | valueDist = dist;
144 | }
145 | });
146 |
147 | // Out of range will back to range
148 | if (nextValue === undefined) {
149 | return offset < 0 ? min : max;
150 | }
151 |
152 | // `dist` mode
153 | if (mode === 'dist') {
154 | return nextValue;
155 | }
156 |
157 | // `unit` mode may need another round
158 | if (Math.abs(offset) > 1) {
159 | const cloneValues = [...values];
160 | cloneValues[valueIndex] = nextValue;
161 |
162 | return offsetValue(cloneValues, offset - sign, valueIndex, mode);
163 | }
164 |
165 | return nextValue;
166 | } else if (offset === 'min') {
167 | return min;
168 | } else if (offset === 'max') {
169 | return max;
170 | }
171 | };
172 |
173 | /** Same as `offsetValue` but return `changed` mark to tell value changed */
174 | const offsetChangedValue = (
175 | values: number[],
176 | offset: number,
177 | valueIndex: number,
178 | mode: OffsetMode = 'unit',
179 | ) => {
180 | const originValue = values[valueIndex];
181 | const nextValue = offsetValue(values, offset, valueIndex, mode);
182 | return {
183 | value: nextValue,
184 | changed: nextValue !== originValue,
185 | };
186 | };
187 |
188 | const needPush = (dist: number) => {
189 | return (pushable === null && dist === 0) || (typeof pushable === 'number' && dist < pushable);
190 | };
191 |
192 | // Values
193 | const offsetValues: OffsetValues = (values, offset, valueIndex, mode = 'unit') => {
194 | const nextValues = values.map(formatValue);
195 | const originValue = nextValues[valueIndex];
196 | const nextValue = offsetValue(nextValues, offset, valueIndex, mode);
197 | nextValues[valueIndex] = nextValue;
198 |
199 | if (allowCross === false) {
200 | // >>>>> Allow Cross
201 | const pushNum = pushable || 0;
202 |
203 | // ============ AllowCross ===============
204 | if (valueIndex > 0 && nextValues[valueIndex - 1] !== originValue) {
205 | nextValues[valueIndex] = Math.max(
206 | nextValues[valueIndex],
207 | nextValues[valueIndex - 1] + pushNum,
208 | );
209 | }
210 |
211 | if (valueIndex < nextValues.length - 1 && nextValues[valueIndex + 1] !== originValue) {
212 | nextValues[valueIndex] = Math.min(
213 | nextValues[valueIndex],
214 | nextValues[valueIndex + 1] - pushNum,
215 | );
216 | }
217 | } else if (typeof pushable === 'number' || pushable === null) {
218 | // >>>>> Pushable
219 | // =============== Push ==================
220 |
221 | // >>>>>> Basic push
222 | // End values
223 | for (let i = valueIndex + 1; i < nextValues.length; i += 1) {
224 | let changed = true;
225 | while (needPush(nextValues[i] - nextValues[i - 1]) && changed) {
226 | ({ value: nextValues[i], changed } = offsetChangedValue(nextValues, 1, i));
227 | }
228 | }
229 |
230 | // Start values
231 | for (let i = valueIndex; i > 0; i -= 1) {
232 | let changed = true;
233 | while (needPush(nextValues[i] - nextValues[i - 1]) && changed) {
234 | ({ value: nextValues[i - 1], changed } = offsetChangedValue(nextValues, -1, i - 1));
235 | }
236 | }
237 |
238 | // >>>>> Revert back to safe push range
239 | // End to Start
240 | for (let i = nextValues.length - 1; i > 0; i -= 1) {
241 | let changed = true;
242 | while (needPush(nextValues[i] - nextValues[i - 1]) && changed) {
243 | ({ value: nextValues[i - 1], changed } = offsetChangedValue(nextValues, -1, i - 1));
244 | }
245 | }
246 |
247 | // Start to End
248 | for (let i = 0; i < nextValues.length - 1; i += 1) {
249 | let changed = true;
250 | while (needPush(nextValues[i + 1] - nextValues[i]) && changed) {
251 | ({ value: nextValues[i + 1], changed } = offsetChangedValue(nextValues, 1, i + 1));
252 | }
253 | }
254 | }
255 |
256 | return {
257 | value: nextValues[valueIndex],
258 | values: nextValues,
259 | };
260 | };
261 |
262 | return [formatValue, offsetValues];
263 | }
264 |
--------------------------------------------------------------------------------
/src/hooks/useRange.ts:
--------------------------------------------------------------------------------
1 | import { warning } from 'rc-util/lib/warning';
2 | import { useMemo } from 'react';
3 | import type { SliderProps } from '../Slider';
4 |
5 | export default function useRange(
6 | range?: SliderProps['range'],
7 | ): [
8 | range: boolean,
9 | rangeEditable: boolean,
10 | rangeDraggableTrack: boolean,
11 | minCount: number,
12 | maxCount?: number,
13 | ] {
14 | return useMemo(() => {
15 | if (range === true || !range) {
16 | return [!!range, false, false, 0];
17 | }
18 |
19 | const { editable, draggableTrack, minCount, maxCount } = range;
20 |
21 | if (process.env.NODE_ENV !== 'production') {
22 | warning(!editable || !draggableTrack, '`editable` can not work with `draggableTrack`.');
23 | }
24 |
25 | return [true, editable, !editable && draggableTrack, minCount || 0, maxCount];
26 | }, [range]);
27 | }
28 |
--------------------------------------------------------------------------------
/src/index.tsx:
--------------------------------------------------------------------------------
1 | import type { SliderProps, SliderRef } from './Slider';
2 | import Slider from './Slider';
3 | export { UnstableContext } from './context';
4 |
5 | export type { SliderProps, SliderRef };
6 |
7 | export default Slider;
8 |
--------------------------------------------------------------------------------
/src/interface.ts:
--------------------------------------------------------------------------------
1 | import type React from 'react';
2 |
3 | export type Direction = 'rtl' | 'ltr' | 'ttb' | 'btt';
4 |
5 | export type OnStartMove = (
6 | e: React.MouseEvent | React.TouchEvent,
7 | valueIndex: number,
8 | startValues?: number[],
9 | ) => void;
10 |
11 | export type AriaValueFormat = (value: number) => string;
12 |
13 | export type SemanticName = 'tracks' | 'track' | 'rail' | 'handle';
14 |
15 | export type SliderClassNames = Partial>;
16 |
17 | export type SliderStyles = Partial>;
18 |
--------------------------------------------------------------------------------
/src/util.ts:
--------------------------------------------------------------------------------
1 | import type { Direction } from './interface';
2 |
3 | export function getOffset(value: number, min: number, max: number) {
4 | return (value - min) / (max - min);
5 | }
6 |
7 | export function getDirectionStyle(direction: Direction, value: number, min: number, max: number) {
8 | const offset = getOffset(value, min, max);
9 |
10 | const positionStyle: React.CSSProperties = {};
11 |
12 | switch (direction) {
13 | case 'rtl':
14 | positionStyle.right = `${offset * 100}%`;
15 | positionStyle.transform = 'translateX(50%)';
16 | break;
17 |
18 | case 'btt':
19 | positionStyle.bottom = `${offset * 100}%`;
20 | positionStyle.transform = 'translateY(50%)';
21 | break;
22 |
23 | case 'ttb':
24 | positionStyle.top = `${offset * 100}%`;
25 | positionStyle.transform = 'translateY(-50%)';
26 | break;
27 |
28 | default:
29 | positionStyle.left = `${offset * 100}%`;
30 | positionStyle.transform = 'translateX(-50%)';
31 | break;
32 | }
33 |
34 | return positionStyle;
35 | }
36 |
37 | /** Return index value if is list or return value directly */
38 | export function getIndex(value: T | T[], index: number) {
39 | return Array.isArray(value) ? value[index] : value;
40 | }
41 |
--------------------------------------------------------------------------------
/tests/Range.test.tsx:
--------------------------------------------------------------------------------
1 | /* eslint-disable max-len, no-undef, react/no-string-refs, no-param-reassign, max-classes-per-file */
2 | import '@testing-library/jest-dom';
3 | import { createEvent, fireEvent, render } from '@testing-library/react';
4 | import keyCode from 'rc-util/lib/KeyCode';
5 | import { spyElementPrototypes } from 'rc-util/lib/test/domHook';
6 | import { resetWarned } from 'rc-util/lib/warning';
7 | import React from 'react';
8 | import Slider from '../src';
9 |
10 | describe('Range', () => {
11 | beforeAll(() => {
12 | spyElementPrototypes(HTMLElement, {
13 | getBoundingClientRect: () => ({
14 | width: 100,
15 | height: 100,
16 | left: 0,
17 | top: 0,
18 | bottom: 100,
19 | right: 100,
20 | }),
21 | });
22 | });
23 |
24 | beforeEach(() => {
25 | resetWarned();
26 | });
27 |
28 | function doMouseDown(
29 | container: HTMLElement,
30 | start: number,
31 | element = 'rc-slider-handle',
32 | skipEventCheck = false,
33 | ) {
34 | const ele = container.getElementsByClassName(element)[0];
35 | const mouseDown = createEvent.mouseDown(ele);
36 | (mouseDown as any).pageX = start;
37 | (mouseDown as any).pageY = start;
38 |
39 | const preventDefault = jest.fn();
40 |
41 | Object.defineProperties(mouseDown, {
42 | clientX: { get: () => start },
43 | clientY: { get: () => start },
44 | preventDefault: { value: preventDefault },
45 | });
46 |
47 | fireEvent.mouseEnter(ele);
48 | fireEvent(ele, mouseDown);
49 |
50 | // Should not prevent default since focus will not change
51 | if (!skipEventCheck) {
52 | expect(preventDefault).not.toHaveBeenCalled();
53 | }
54 | }
55 |
56 | function doMouseDrag(end: number) {
57 | const mouseMove = createEvent.mouseMove(document);
58 | (mouseMove as any).pageX = end;
59 | (mouseMove as any).pageY = end;
60 | fireEvent(document, mouseMove);
61 | }
62 |
63 | function doMouseMove(
64 | container: HTMLElement,
65 | start: number,
66 | end: number,
67 | element = 'rc-slider-handle',
68 | ) {
69 | doMouseDown(container, start, element);
70 |
71 | // Drag
72 | doMouseDrag(end);
73 | }
74 |
75 | function doTouchMove(
76 | container: HTMLElement,
77 | start: number,
78 | end: number,
79 | element = 'rc-slider-handle',
80 | ) {
81 | const touchStart = createEvent.touchStart(container.getElementsByClassName(element)[0], {
82 | touches: [{}],
83 | targetTouches: [{}],
84 | });
85 | (touchStart as any).targetTouches[0].pageX = start;
86 | fireEvent(container.getElementsByClassName(element)[0], touchStart);
87 |
88 | // Drag
89 | const touchMove = createEvent.touchMove(container.getElementsByClassName(element)[0], {
90 | touches: [{}],
91 | targetTouches: [{}],
92 | });
93 | (touchMove as any).targetTouches[0].pageX = end;
94 | fireEvent(container.getElementsByClassName(element)[0], touchMove);
95 | }
96 |
97 | it('should render Range with correct DOM structure', () => {
98 | const { asFragment } = render( {
398 | setValue(values);
399 | onChange(values);
400 | }}
401 | value={value}
402 | allowCross={false}
403 | pushable
404 | />
405 | );
406 | };
407 |
408 | global.error = true;
409 | const { container, unmount } = render( `${value} of something`,
503 | (value) => `${value} of something else`,
504 | ]}
505 | />,
506 | );
507 | expect(container.getElementsByClassName('rc-slider-handle')[0]).toHaveAttribute(
508 | 'aria-valuetext',
509 | '1 of something',
510 | );
511 | expect(container.getElementsByClassName('rc-slider-handle')[1]).toHaveAttribute(
512 | 'aria-valuetext',
513 | '3 of something else',
514 | );
515 | });
516 |
517 | // Corresponds to the issue described in https://github.com/react-component/slider/issues/690.
518 | it('should correctly display a dynamically changed number of handles', () => {
519 | const props = {
520 | range: true,
521 | allowCross: false,
522 | marks: {
523 | 0: { label: '0', style: {} },
524 | 25: { label: '25', style: {} },
525 | 50: { label: '50', style: {} },
526 | 75: { label: '75', style: {} },
527 | 100: { label: '100', style: {} },
528 | },
529 | step: null,
530 | };
531 |
532 | const { container, rerender } = render(('.rc-slider-handle').focus();
561 | expect(handleFocus).toBeCalled();
562 | });
563 |
564 | it('blur()', () => {
565 | const handleBlur = jest.fn();
566 | const { container } = render(('.rc-slider-handle').focus();
568 | container.querySelector('.rc-slider-handle').blur();
569 | expect(handleBlur).toHaveBeenCalled();
570 | });
571 | });
572 |
573 | it('warning for `draggableTrack` and `mergedStep=null`', () => {
574 | const errorSpy = jest.spyOn(console, 'error').mockImplementation(() => {});
575 |
576 | render( {
738 | onChange(nextValue);
739 | setValue(nextValue);
740 | }}
741 | onChangeComplete={onChangeComplete}
742 | min={0}
743 | max={100}
744 | value={value}
745 | range={{ editable: true }}
746 | />
747 | );
748 | };
749 |
750 | const { container } = render( ori}
773 | />,
774 | );
775 |
776 | const handle = container.querySelectorAll('.rc-slider-handle')[1];
777 |
778 | fireEvent.mouseEnter(handle);
779 | fireEvent.keyDown(handle, {
780 | keyCode: keyCode.DELETE,
781 | });
782 |
783 | expect(onChange).toHaveBeenCalledWith([0, 100]);
784 |
785 | // Clear all
786 | fireEvent.keyDown(container.querySelector('.rc-slider-handle'), {
787 | keyCode: keyCode.DELETE,
788 | });
789 | fireEvent.keyDown(container.querySelector('.rc-slider-handle'), {
790 | keyCode: keyCode.DELETE,
791 | });
792 | expect(onChange).toHaveBeenCalledWith([]);
793 |
794 | // 2 handle
795 | expect(container.querySelectorAll('.rc-slider-handle')).toHaveLength(0);
796 | });
797 |
798 | it('not remove when minCount', () => {
799 | const onChange = jest.fn();
800 |
801 | const { container } = render(
802 | ori}
809 | />,
810 | );
811 |
812 | const handle = container.querySelector('.rc-slider-handle');
813 |
814 | // Key
815 | fireEvent.mouseEnter(handle);
816 | fireEvent.keyDown(handle, {
817 | keyCode: keyCode.DELETE,
818 | });
819 | expect(onChange).not.toHaveBeenCalled();
820 |
821 | // Mouse
822 | doMouseMove(container, 0, 1000);
823 | expect(onChange).toHaveBeenCalledWith([100]);
824 | });
825 |
826 | it('maxCount not add', () => {
827 | const onChange = jest.fn();
828 | const { container } = render(
829 | `${value} of something`}
459 | />,
460 | );
461 | const handle = container.getElementsByClassName('rc-slider-handle')[0];
462 | expect(handle).toHaveAttribute('aria-valuetext', '3 of something');
463 |
464 | fireEvent.keyDown(handle, { keyCode: keyCode.RIGHT });
465 | expect(handle).toHaveAttribute('aria-valuetext', '4 of something');
466 | });
467 |
468 | describe('focus & blur', () => {
469 | it('focus', () => {
470 | const handleFocus = jest.fn();
471 | const { container, unmount } = render(
472 |
601 | React.cloneElement(node, {
602 | className: classNames(node.props.className, 'custom-handle'),
603 | })
604 | }
605 | />,
606 | );
607 |
608 | expect(container.querySelector('.custom-handle')).toBeTruthy();
609 | });
610 |
611 | // https://github.com/ant-design/ant-design/issues/34020
612 | it('max value not align with step', () => {
613 | const onChange = jest.fn();
614 | const { container } = render(
615 |
13 | React.cloneElement(node, {
14 | 'data-test': 'bamboo',
15 | 'data-value': info.value,
16 | })
17 | }
18 | />,
19 | );
20 |
21 | // Click second
22 | fireEvent.mouseEnter(container.querySelectorAll('.rc-slider-handle')[1]);
23 | expect(container.querySelector('.rc-slider-handle[data-test]')).toBeTruthy();
24 | expect(
25 | container.querySelector('.rc-slider-handle[data-value]').getAttribute('data-value'),
26 | ).toBe('50');
27 | });
28 | });
29 |
--------------------------------------------------------------------------------
/tests/__mocks__/rc-trigger.js:
--------------------------------------------------------------------------------
1 | import Trigger from 'rc-trigger/lib/mock';
2 |
3 | export default Trigger;
4 |
--------------------------------------------------------------------------------
/tests/__snapshots__/Range.test.tsx.snap:
--------------------------------------------------------------------------------
1 | // Jest Snapshot v1, https://goo.gl/fbAQLP
2 |
3 | exports[`Range should render Multi-Range with correct DOM structure 1`] = `
4 |
70 | `;
71 |
72 | exports[`Range should render Range with correct DOM structure 1`] = `
73 |
109 | `;
110 |
--------------------------------------------------------------------------------
/tests/__snapshots__/Slider.test.js.snap:
--------------------------------------------------------------------------------
1 | // Jest Snapshot v1, https://goo.gl/fbAQLP
2 |
3 | exports[`Slider should render Slider with correct DOM structure 1`] = `
4 |
29 | `;
30 |
31 | exports[`Slider should render Slider with included=false 1`] = `
32 |
53 | `;
54 |
55 | exports[`Slider should render Slider without handle if value is null 1`] = `
56 |
66 | `;
67 |
--------------------------------------------------------------------------------
/tests/common.test.js:
--------------------------------------------------------------------------------
1 | /* eslint-disable max-len, no-undef */
2 | import '@testing-library/jest-dom';
3 | import { createEvent, fireEvent, render } from '@testing-library/react';
4 | import KeyCode from 'rc-util/lib/KeyCode';
5 | import { spyElementPrototypes } from 'rc-util/lib/test/domHook';
6 | import React from 'react';
7 | import Slider from '../src';
8 |
9 | // const setWidth = (object, width) => {
10 | // // https://github.com/tmpvar/jsdom/commit/0cdb2efcc69b6672dc2928644fc0172df5521176
11 | // Object.defineProperty(object, 'getBoundingClientRect', {
12 | // value: () => ({
13 | // width,
14 | // // Let all other values retain the JSDom default of `0`.
15 | // bottom: 0,
16 | // height: 0,
17 | // left: 0,
18 | // right: 0,
19 | // top: 0,
20 | // }),
21 | // enumerable: true,
22 | // configurable: true,
23 | // });
24 | // };
25 |
26 | describe('Common', () => {
27 | beforeAll(() => {
28 | spyElementPrototypes(HTMLElement, {
29 | getBoundingClientRect: () => ({
30 | width: 100,
31 | height: 100,
32 | }),
33 | });
34 | });
35 |
36 | it('should render vertical Slider/Range, when `vertical` is true', () => {
37 | const { container: container1 } = render( ({ width: `${dotValue}px` })} />,
62 | );
63 | expect(container1.getElementsByClassName('rc-slider-dot')[1]).toHaveStyle(
64 | 'left: 10%; transform: translateX(-50%); width: 10px',
65 | );
66 | expect(container1.getElementsByClassName('rc-slider-dot')[2]).toHaveStyle(
67 | 'left: 20%; transform: translateX(-50%); width: 20px',
68 | );
69 |
70 | const { container: container2 } = render(
71 | ({ width: `${dotValue}px` })}
77 | />,
78 | );
79 | expect(container2.getElementsByClassName('rc-slider-dot-active')[1]).toHaveStyle(
80 | 'left: 30%; transform: translateX(-50%); width: 30px',
81 | );
82 | expect(container2.getElementsByClassName('rc-slider-dot-active')[2]).toHaveStyle(
83 | 'left: 40%; transform: translateX(-50%); width: 40px',
84 | );
85 | });
86 |
87 | it('should not set value greater than `max` or smaller `min`', () => {
88 | const { container: container1 } = render( document.getElementById('tooltip')}
383 | // />,
384 | // );
385 | // expect(wrapper.instance().props.getTooltipContainer).toBeTruthy();
386 | // });
387 | });
388 |
--------------------------------------------------------------------------------
/tests/marks.test.js:
--------------------------------------------------------------------------------
1 | /* eslint-disable max-len, no-undef */
2 | import '@testing-library/jest-dom';
3 | import { fireEvent, render } from '@testing-library/react';
4 | import { spyElementPrototypes } from 'rc-util/lib/test/domHook';
5 | import React from 'react';
6 | import Slider from '../src';
7 |
8 | describe('marks', () => {
9 | beforeAll(() => {
10 | spyElementPrototypes(HTMLElement, {
11 | getBoundingClientRect: () => ({
12 | width: 100,
13 | height: 100,
14 | }),
15 | });
16 | });
17 |
18 | it('should render marks correctly when `marks` is not an empty object', () => {
19 | const marks = { 0: 0, 30: '30', 99: '', 100: '100' };
20 |
21 | const { container } = render(