diff --git a/package.json b/package.json index 51897a422..089bf404d 100644 --- a/package.json +++ b/package.json @@ -71,8 +71,8 @@ "less": "^3.10.3", "np": "^7.0.0", "rc-test": "^7.0.15", - "rc-tooltip": "^5.0.1", - "rc-trigger": "^5.0.4", + "rc-tooltip": "^6.1.2", + "rc-trigger": "^5.3.4", "react": "^16.0.0", "react-dom": "^16.0.0", "regenerator-runtime": "^0.13.9", diff --git a/src/Slider.tsx b/src/Slider.tsx index d4145ea5d..33a993d50 100644 --- a/src/Slider.tsx +++ b/src/Slider.tsx @@ -288,7 +288,23 @@ const Slider = React.forwardRef((props: SliderProps, ref: React.Ref) setValue(cloneNextValues); }; - const changeToCloseValue = (newValue: number) => { + const finishChange = () => { + onAfterChange?.(getTriggerValue(rawValuesRef.current)); + }; + + const [draggingIndex, draggingValue, cacheValues, onStartDrag] = useDrag( + containerRef, + direction, + rawValues, + mergedMin, + mergedMax, + formatValue, + triggerChange, + finishChange, + offsetValues, + ); + + const changeToCloseValue = (newValue: number, e?: React.MouseEvent) => { if (!disabled) { let valueIndex = 0; let valueDist = mergedMax - mergedMin; @@ -314,6 +330,9 @@ const Slider = React.forwardRef((props: SliderProps, ref: React.Ref) onBeforeChange?.(getTriggerValue(cloneNextValues)); triggerChange(cloneNextValues); onAfterChange?.(getTriggerValue(cloneNextValues)); + if (e) { + onStartDrag(e, valueIndex, cloneNextValues); + } } }; @@ -344,7 +363,7 @@ const Slider = React.forwardRef((props: SliderProps, ref: React.Ref) } const nextValue = mergedMin + percent * (mergedMax - mergedMin); - changeToCloseValue(formatValue(nextValue)); + changeToCloseValue(formatValue(nextValue), e); }; // =========================== Keyboard =========================== @@ -384,22 +403,6 @@ const Slider = React.forwardRef((props: SliderProps, ref: React.Ref) return draggableTrack; }, [draggableTrack, mergedStep]); - const finishChange = () => { - onAfterChange?.(getTriggerValue(rawValuesRef.current)); - }; - - const [draggingIndex, draggingValue, cacheValues, onStartDrag] = useDrag( - containerRef, - direction, - rawValues, - mergedMin, - mergedMax, - formatValue, - triggerChange, - finishChange, - offsetValues, - ); - const onStartMove: OnStartMove = (e, valueIndex) => { onStartDrag(e, valueIndex); diff --git a/src/hooks/useDrag.ts b/src/hooks/useDrag.ts index 83fadd56d..8e7f2cdc5 100644 --- a/src/hooks/useDrag.ts +++ b/src/hooks/useDrag.ts @@ -93,14 +93,16 @@ export default function useDrag( const updateCacheValueRef = React.useRef(updateCacheValue); updateCacheValueRef.current = updateCacheValue; - const onStartMove: OnStartMove = (e, valueIndex) => { + const onStartMove: OnStartMove = (e, valueIndex, startValues?: number[]) => { e.stopPropagation(); - const originValue = rawValues[valueIndex]; + // 如果是点击 track 触发的,需要传入变化后的初始值,而不能直接用 rawValues + const initialValues = startValues || rawValues; + const originValue = initialValues[valueIndex]; setDraggingIndex(valueIndex); setDraggingValue(originValue); - setOriginValues(rawValues); + setOriginValues(initialValues); const { pageX: startX, pageY: startY } = getPosition(e); diff --git a/src/interface.ts b/src/interface.ts index 0a52e22f3..82f0b59ea 100644 --- a/src/interface.ts +++ b/src/interface.ts @@ -2,7 +2,7 @@ import type React from 'react'; export type Direction = 'rtl' | 'ltr' | 'ttb' | 'btt'; -export type OnStartMove = (e: React.MouseEvent | React.TouchEvent, valueIndex: number) => void; +export type OnStartMove = (e: React.MouseEvent | React.TouchEvent, valueIndex: number, startValues?: number[]) => void; export type AriaValueFormat = (value: number) => string; diff --git a/tests/Slider.test.js b/tests/Slider.test.js index 57f68d2b5..48cb554a1 100644 --- a/tests/Slider.test.js +++ b/tests/Slider.test.js @@ -1,6 +1,6 @@ import React from 'react'; import classNames from 'classnames'; -import { render, fireEvent } from '@testing-library/react'; +import { render, fireEvent, createEvent } from '@testing-library/react'; import '@testing-library/jest-dom'; import keyCode from 'rc-util/lib/KeyCode'; import { spyElementPrototypes } from 'rc-util/lib/test/domHook'; @@ -609,4 +609,20 @@ describe('Slider', () => { }); expect(onAfterChange).toHaveBeenCalledWith(20); }); + + // https://github.com/react-component/slider/pull/948 + it('could drag handler after click tracker', () => { + const onChange = jest.fn(); + const { container } = render(); + fireEvent.mouseDown(container.querySelector('.rc-slider'), { + clientX: 20, + }); + expect(onChange).toHaveBeenLastCalledWith(20); + + // Drag + const mouseMove = createEvent.mouseMove(document); + mouseMove.pageX = 100; + fireEvent(document, mouseMove); + expect(onChange).toHaveBeenLastCalledWith(100); + }); });