SHARE
TWEET

Untitled

a guest Oct 20th, 2019 66 Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
  1. const Range = ({ containerStyle, containerClassName, min, max, value, step, onChange }) => {
  2.   const animate = (timestamp, delta) => {
  3.     console.log('AnimationTick', {timestamp, delta})
  4.   }
  5.  
  6.   const [startAnimation, stopAnimation, getIsAnimatingRef, getIsAnimatingState] = useAnimationFrame(animate, true)
  7.  
  8.   useDocumentEvents({
  9.     'pointerup' (event) {
  10.       stopAnimation()
  11.     },
  12.     'pointermove' (event) {
  13.       if (getIsAnimatingRef()) {
  14.         console.log('[Document Pointer Move]', event)
  15.       }
  16.     }
  17.   })
  18.  
  19.   const pointerDownEventHandlerForRangeDot = event => {
  20.     if (getIsAnimatingRef() !== true) {
  21.       startAnimation()
  22.     }
  23.   }
  24.  
  25.   return (
  26.     <div>
  27.       <div>
  28.         { getIsAnimatingState() ? 'Animating' : 'Stopped' }
  29.       </div>
  30.       <div style={containerStyle} className={`range ${containerClassName}`}>
  31.         <div className='range-dot' style={{ background: 'red' }}
  32.           onPointerDown={pointerDownEventHandlerForRangeDot}
  33.           onPointerUp={() => stopAnimation()}
  34.           onPointerCancel={() => stopAnimation()}
  35.         />
  36.       </div>
  37.     </div>
  38.   )
  39. }
RAW Paste Data
We use cookies for various purposes including analytics. By continuing to use Pastebin, you agree to our use of cookies as described in the Cookies Policy. OK, I Understand
 
Top