1+ var _extends = Object . assign || function ( target ) { for ( var i = 1 ; i < arguments . length ; i ++ ) { var source = arguments [ i ] ; for ( var key in source ) { if ( Object . prototype . hasOwnProperty . call ( source , key ) ) { target [ key ] = source [ key ] ; } } } return target ; } ;
2+
3+ var _createClass = function ( ) { function defineProperties ( target , props ) { for ( var i = 0 ; i < props . length ; i ++ ) { var descriptor = props [ i ] ; descriptor . enumerable = descriptor . enumerable || false ; descriptor . configurable = true ; if ( "value" in descriptor ) descriptor . writable = true ; Object . defineProperty ( target , descriptor . key , descriptor ) ; } } return function ( Constructor , protoProps , staticProps ) { if ( protoProps ) defineProperties ( Constructor . prototype , protoProps ) ; if ( staticProps ) defineProperties ( Constructor , staticProps ) ; return Constructor ; } ; } ( ) ;
4+
5+ function _classCallCheck ( instance , Constructor ) { if ( ! ( instance instanceof Constructor ) ) { throw new TypeError ( "Cannot call a class as a function" ) ; } }
6+
7+ function _possibleConstructorReturn ( self , call ) { if ( ! self ) { throw new ReferenceError ( "this hasn't been initialised - super() hasn't been called" ) ; } return call && ( typeof call === "object" || typeof call === "function" ) ? call : self ; }
8+
9+ function _inherits ( subClass , superClass ) { if ( typeof superClass !== "function" && superClass !== null ) { throw new TypeError ( "Super expression must either be null or a function, not " + typeof superClass ) ; } subClass . prototype = Object . create ( superClass && superClass . prototype , { constructor : { value : subClass , enumerable : false , writable : true , configurable : true } } ) ; if ( superClass ) Object . setPrototypeOf ? Object . setPrototypeOf ( subClass , superClass ) : subClass . __proto__ = superClass ; }
10+
11+ import React , { Component } from 'react' ;
12+ import PropTypes from 'prop-types' ;
13+ import ReactDOM from 'react-dom' ;
14+ import omit from 'lodash/omit' ;
15+ import throttle from 'lodash/throttle' ;
16+
17+ var ScrollTrigger = function ( _Component ) {
18+ _inherits ( ScrollTrigger , _Component ) ;
19+
20+ function ScrollTrigger ( props ) {
21+ _classCallCheck ( this , ScrollTrigger ) ;
22+
23+ var _this = _possibleConstructorReturn ( this , ( ScrollTrigger . __proto__ || Object . getPrototypeOf ( ScrollTrigger ) ) . call ( this , props ) ) ;
24+
25+ _this . onScroll = throttle ( _this . onScroll . bind ( _this ) , 100 , {
26+ trailing : false
27+ } ) ;
28+
29+ _this . onResize = throttle ( _this . onResize . bind ( _this ) , 100 , {
30+ trailing : false
31+ } ) ;
32+
33+ _this . state = {
34+ inViewport : false ,
35+ progress : 0 ,
36+ lastScrollPosition : null ,
37+ lastScrollTime : null
38+ } ;
39+ return _this ;
40+ }
41+
42+ _createClass ( ScrollTrigger , [ {
43+ key : 'componentDidMount' ,
44+ value : function componentDidMount ( ) {
45+ addEventListener ( 'resize' , this . onResize ) ;
46+ addEventListener ( 'scroll' , this . onScroll ) ;
47+
48+ if ( this . props . triggerOnLoad ) {
49+ this . checkStatus ( ) ;
50+ }
51+ }
52+ } , {
53+ key : 'componentWillUnmount' ,
54+ value : function componentWillUnmount ( ) {
55+ removeEventListener ( 'resize' , this . onResize ) ;
56+ removeEventListener ( 'scroll' , this . onScroll ) ;
57+ }
58+ } , {
59+ key : 'onResize' ,
60+ value : function onResize ( ) {
61+ this . checkStatus ( ) ;
62+ }
63+ } , {
64+ key : 'onScroll' ,
65+ value : function onScroll ( ) {
66+ this . checkStatus ( ) ;
67+ }
68+ } , {
69+ key : 'checkStatus' ,
70+ value : function checkStatus ( ) {
71+ var _props = this . props ,
72+ onEnter = _props . onEnter ,
73+ onExit = _props . onExit ,
74+ onProgress = _props . onProgress ;
75+ var _state = this . state ,
76+ lastScrollPosition = _state . lastScrollPosition ,
77+ lastScrollTime = _state . lastScrollTime ;
78+
79+
80+ var element = ReactDOM . findDOMNode ( this . element ) ;
81+ var elementRect = element . getBoundingClientRect ( ) ;
82+ var viewportStart = 0 ;
83+ var viewportEnd = document . body . clientHeight ;
84+ var inViewport = elementRect . top < viewportEnd && elementRect . bottom > viewportStart ;
85+
86+ var position = window . scrollY ;
87+ var velocity = lastScrollPosition && lastScrollTime ? Math . abs ( ( lastScrollPosition - position ) / ( lastScrollTime - Date . now ( ) ) ) : null ;
88+
89+ if ( inViewport ) {
90+ var progress = Math . max ( 0 , Math . min ( 1 , 1 - elementRect . bottom / ( viewportEnd + elementRect . height ) ) ) ;
91+
92+ if ( ! this . state . inViewPort ) {
93+ this . setState ( {
94+ inViewport : inViewport
95+ } ) ;
96+
97+ onEnter ( {
98+ progress : progress ,
99+ velocity : velocity
100+ } , this ) ;
101+ }
102+
103+ this . setState ( {
104+ lastScrollPosition : position ,
105+ lastScrollTime : Date . now ( )
106+ } ) ;
107+
108+ onProgress ( {
109+ progress : progress ,
110+ velocity : velocity
111+ } , this ) ;
112+ return ;
113+ }
114+
115+ if ( this . state . inViewport ) {
116+ var _progress = elementRect . top <= viewportEnd ? 1 : 0 ;
117+
118+ this . setState ( {
119+ lastScrollPosition : position ,
120+ lastScrollTime : Date . now ( ) ,
121+ inViewport : inViewport ,
122+ progress : _progress
123+ } ) ;
124+
125+ onProgress ( {
126+ progress : _progress ,
127+ velocity : velocity
128+ } , this ) ;
129+
130+ onExit ( {
131+ progress : _progress ,
132+ velocity : velocity
133+ } , this ) ;
134+ }
135+ }
136+ } , {
137+ key : 'render' ,
138+ value : function render ( ) {
139+ var _this2 = this ;
140+
141+ var children = this . props . children ;
142+
143+
144+ var props = omit ( this . props , [ 'onEnter' , 'onExit' , 'onProgress' , 'triggerOnLoad' ] ) ;
145+
146+ return React . createElement (
147+ 'div' ,
148+ _extends ( { } , props , {
149+ ref : function ref ( element ) {
150+ _this2 . element = element ;
151+ }
152+ } ) ,
153+ children
154+ ) ;
155+ }
156+ } ] ) ;
157+
158+ return ScrollTrigger ;
159+ } ( Component ) ;
160+
161+ ScrollTrigger . propTypes = {
162+ triggerOnLoad : PropTypes . bool ,
163+ onEnter : PropTypes . func ,
164+ onExit : PropTypes . func ,
165+ onProgress : PropTypes . func
166+ } ;
167+
168+ ScrollTrigger . defaultProps = {
169+ triggerOnLoad : true ,
170+ onEnter : function onEnter ( ) { } ,
171+ onExit : function onExit ( ) { } ,
172+ onProgress : function onProgress ( ) { }
173+ } ;
174+
175+ export default ScrollTrigger ;
0 commit comments