import * as React from 'react' ; import classNames from 'classnames' ; import isMobile from 'rc-util/lib/isMobile' ; /**
 * When click and hold on a button - the speed of auto changing the value.
 */ const STEP_INTERVAL = 200 ; /**
 * When click and hold on a button - the delay before auto changing the value.
 */ const STEP_DELAY = 600 ; export interface StepHandlerProps { prefixCls : string ; upNode ? : React . ReactNode ; downNode ? : React . ReactNode ; upDisabled ? : boolean ; downDisabled ? : boolean ; onStep : ( up : boolean ) => void ; } export default function StepHandler ( { prefixCls , upNode , downNode , upDisabled , downDisabled , onStep , } ) { const stepTimeoutRef = React . useRef < any > ( ) ; const onStepRef = React . useRef < StepHandlerProps [ 'onStep' ] > ( ) ; onStepRef . current = onStep ; const onStepMouseDown = ( e , up ) => { e . preventDefault ( ) ; onStepRef . current ( up ) ; function loopStep ( ) { onStepRef . current ( up ) ; stepTimeoutRef . current = setTimeout ( loopStep , STEP_INTERVAL ) ; } stepTimeoutRef . current = setTimeout ( loopStep , STEP_DELAY ) ; } ; const onStopStep = ( ) => { clearTimeout ( stepTimeoutRef . current ) ; } ; React . useEffect ( ( ) => onStopStep , [ ] ) ; if ( isMobile ( ) ) { return null ; } const handlerClassName = `${ prefixCls }-handler` ; const upClassName = classNames ( handlerClassName , `${ handlerClassName }-up` , { [ `${ handlerClassName }-up-disabled` ] : upDisabled , } ) ; const downClassName = classNames ( handlerClassName , `${ handlerClassName }-down` , { [ `${ handlerClassName }-down-disabled` ] : downDisabled , } ) ; const sharedHandlerProps = { unselectable : 'on' as const , role : 'button' , onMouseUp : onStopStep , onMouseLeave : onStopStep , } ; return ( < div className = { `${ handlerClassName }-wrap` } > < span { ... sharedHandlerProps } onMouseDown = { ( e ) => { onStepMouseDown ( e , true ) ; } } aria - label = "Increase Value" aria - disabled = { upDisabled } className = { upClassName } > { upNode || < span unselectable = "on" className = { `${ prefixCls }-handler-up-inner` } />} < /span> < span { ... sharedHandlerProps } onMouseDown = { ( e ) => { onStepMouseDown ( e , false ) ; } } aria - label = "Decrease Value" aria - disabled = { downDisabled } className = { downClassName } > { downNode || < span unselectable = "on" className = { `${ prefixCls }-handler-down-inner` } />} < /span> < /div>); }