@@ -2,14 +2,15 @@ import { Slider as AntdSlider, type SliderSingleProps } from "antd";
22import type { SliderRangeProps } from "antd/lib/slider" ;
33import { clamp } from "libs/utils" ;
44import _ from "lodash" ;
5- import type { WheelEventHandler } from "react" ;
5+ import { useCallback , useEffect , useRef , useState } from "react" ;
66
77const DEFAULT_WHEEL_FACTOR = 0.02 ;
88const DEFAULT_STEP = 1 ;
99
1010type SliderProps = ( SliderSingleProps | SliderRangeProps ) & {
1111 wheelFactor ?: number ;
1212 onWheelDisabled ?: boolean ;
13+ onResetToDefault ?: ( ) => void ;
1314} ;
1415
1516const getDiffPerSliderStep = (
@@ -23,6 +24,8 @@ const getDiffPerSliderStep = (
2324} ;
2425
2526const getWheelStepFromEvent = ( step : number , deltaY : number , wheelStep : number ) => {
27+ const absDeltaY = Math . abs ( deltaY ) ;
28+ if ( absDeltaY === 0 || step === 0 ) return 0 ;
2629 // Make sure that result is a multiple of step
2730 return step * Math . round ( ( wheelStep * deltaY ) / Math . abs ( deltaY ) / step ) ;
2831} ;
@@ -32,6 +35,7 @@ export function Slider(props: SliderProps) {
3235 min,
3336 max,
3437 onChange,
38+ onResetToDefault,
3539 value,
3640 range,
3741 defaultValue,
@@ -40,49 +44,81 @@ export function Slider(props: SliderProps) {
4044 step,
4145 disabled,
4246 } = props ;
47+ const isFocused = useRef ( false ) ;
48+ const sliderRef = useRef < HTMLDivElement > ( null ) ;
49+
50+ const handleWheelEvent = useCallback (
51+ ( event : { preventDefault : ( ) => void ; deltaY : number } ) => {
52+ if (
53+ onWheelDisabled ||
54+ value == null ||
55+ min == null ||
56+ max == null ||
57+ ! isFocused . current ||
58+ onChange == null
59+ )
60+ return ;
61+ event . preventDefault ( ) ;
62+ const diff = getWheelStepFromEvent ( ensuredStep , event . deltaY , wheelStep ) ;
63+ // differentiate between single value and range slider
64+ if ( range === false || range == null ) {
65+ const newValue = value - diff ;
66+ const clampedNewValue = clamp ( min , newValue , max ) ;
67+ onChange ( clampedNewValue ) ;
68+ } else if ( range === true || typeof range === "object" ) {
69+ const newLowerValue = Math . round ( value [ 0 ] + diff ) ;
70+ const newUpperValue = Math . round ( value [ 1 ] - diff ) ;
71+ const clampedNewLowerValue = clamp ( min , newLowerValue , Math . min ( newUpperValue , max ) ) ;
72+ const clampedNewUpperValue = clamp ( newLowerValue , newUpperValue , max ) ;
73+ onChange ( [ clampedNewLowerValue , clampedNewUpperValue ] ) ;
74+ }
75+ } ,
76+ [ value , min , max , onChange , range , onWheelDisabled ] ,
77+ ) ;
78+
79+ // Reacts onWheel is passive by default, this means that it can't preventDefault.
80+ // Thus we need to add the event listener manually.
81+ // (See https://github.com/facebook/react/pull/19654)
82+ useEffect ( ( ) => {
83+ const sliderElement = sliderRef . current ;
84+ if ( sliderElement ) {
85+ sliderElement . addEventListener ( "wheel" , handleWheelEvent , { passive : false } ) ;
86+ return ( ) => {
87+ sliderElement . removeEventListener ( "wheel" , handleWheelEvent ) ;
88+ } ;
89+ }
90+ } , [ handleWheelEvent ] ) ;
91+
4392 if ( min == null || max == null || onChange == null || value == null || disabled )
4493 return < AntdSlider { ...props } /> ;
4594 const sliderRange = max - min ;
4695 const ensuredStep = step || DEFAULT_STEP ;
47- let handleWheelEvent : WheelEventHandler < HTMLDivElement > = _ . noop ;
48- let handleDoubleClick : React . MouseEventHandler < HTMLDivElement > = _ . noop ;
96+
4997 const wheelStep = getDiffPerSliderStep ( sliderRange , wheelFactor , ensuredStep ) ;
5098
51- handleDoubleClick = ( event ) => {
99+ const handleDoubleClick : React . MouseEventHandler < HTMLDivElement > = ( event ) => {
52100 if (
53101 event . target instanceof HTMLElement &&
54102 event . target . className . includes ( "ant-slider-handle" ) &&
55103 defaultValue != null
56104 )
57- // @ts -ignore Argument of type 'number | number[]' is not assignable to parameter of type 'number'.
58- //TypeScript doesn't understand that onChange always takes the type of defaultValue.
59- onChange ( defaultValue ) ;
105+ if ( onResetToDefault != null ) {
106+ onResetToDefault ( ) ;
107+ } else {
108+ // @ts -ignore Argument of type 'number | number[]' is not assignable to parameter of type 'number'.
109+ //TypeScript doesn't understand that onChange always takes the type of defaultValue.
110+ onChange ( defaultValue ) ;
111+ }
60112 } ;
61113
62- // differentiate between single value and range slider
63- if ( range === false || range == null ) {
64- if ( ! onWheelDisabled ) {
65- handleWheelEvent = ( event ) => {
66- const newValue = value - getWheelStepFromEvent ( ensuredStep , event . deltaY , wheelStep ) ;
67- const clampedNewValue = clamp ( min , newValue , max ) ;
68- onChange ( clampedNewValue ) ;
69- } ;
70- }
71- } else if ( range === true || typeof range === "object" ) {
72- if ( ! onWheelDisabled ) {
73- handleWheelEvent = ( event ) => {
74- const diff = getWheelStepFromEvent ( ensuredStep , event . deltaY , wheelStep ) ;
75- const newLowerValue = Math . round ( value [ 0 ] + diff ) ;
76- const newUpperValue = Math . round ( value [ 1 ] - diff ) ;
77- const clampedNewLowerValue = clamp ( min , newLowerValue , Math . min ( newUpperValue , max ) ) ;
78- const clampedNewUpperValue = clamp ( newLowerValue , newUpperValue , max ) ;
79- onChange ( [ clampedNewLowerValue , clampedNewUpperValue ] ) ;
80- } ;
81- }
82- }
83-
84114 return (
85- < div onWheel = { handleWheelEvent } onDoubleClick = { handleDoubleClick } style = { { flexGrow : 1 } } >
115+ < div
116+ ref = { sliderRef }
117+ onDoubleClick = { handleDoubleClick }
118+ style = { { flexGrow : 1 , touchAction : "none" , userSelect : isFocused ? "none" : "auto" } }
119+ onFocus = { ( ) => ( isFocused . current = true ) }
120+ onBlur = { ( ) => ( isFocused . current = false ) }
121+ >
86122 < AntdSlider { ...props } />
87123 </ div >
88124 ) ;
0 commit comments