PLAT-48029: Added reachedEdgeInfo within onScrollStop callback (#1933)

* PLAT-48029: Added reachedEdgeInfo within `onScrollStop` callback

* Cleared code

* Cleared code

Author: SkylerBaek

packages/ui/Scrollable/Scrollable.js

@@ -461,7 +461,7 @@ class ScrollableBase extends Component {
 	componentWillUnmount () {
 		// Before call cancelAnimationFrame, you must send scrollStop Event.
 		if (this.animator.isAnimating()) {
-			this.forwardScrollEvent('onScrollStop');
+			this.forwardScrollEvent('onScrollStop', this.getReachedEdgeInfo());
 			this.animator.stop();
 		}
 
@@ -823,8 +823,8 @@ class ScrollableBase extends Component {
 
 	// call scroll callbacks
 
-	forwardScrollEvent (type) {
-		forward(type, {scrollLeft: this.scrollLeft, scrollTop: this.scrollTop, moreInfo: this.getMoreInfo()}, this.props);
+	forwardScrollEvent (type, reachedEdgeInfo) {
+		forward(type, {scrollLeft: this.scrollLeft, scrollTop: this.scrollTop, moreInfo: this.getMoreInfo(), reachedEdgeInfo}, this.props);
 	}
 
 	// update scroll position
@@ -857,6 +857,38 @@ class ScrollableBase extends Component {
 		}
 	}
 
+	getReachedEdgeInfo = () => {
+		const
+			bounds = this.getScrollBounds(),
+			reachedEdgeInfo = {bottom: false, left: false, right: false, top: false};
+
+		if (this.canScrollHorizontally(bounds)) {
+			const
+				rtl = this.state.rtl,
+				edge = this.getEdgeFromPosition(this.scrollLeft, bounds.maxLeft);
+
+			if (edge) { // if edge is null, no need to check which edge is reached.
+				if ((edge === 'before' && !rtl) || (edge === 'after' && rtl)) {
+					reachedEdgeInfo.left = true;
+				} else {
+					reachedEdgeInfo.right = true;
+				}
+			}
+		}
+
+		if (this.canScrollVertically(bounds)) {
+			const edge = this.getEdgeFromPosition(this.scrollTop, bounds.maxTop);
+
+			if (edge === 'before') {
+				reachedEdgeInfo.top = true;
+			} else if (edge === 'after') {
+				reachedEdgeInfo.bottom = true;
+			}
+		}
+
+		return reachedEdgeInfo;
+	}
+
 	// scroll start/stop
 
 	start ({targetX, targetY, animate = true, duration = animationDuration, overscrollEffect = false}) {
@@ -973,7 +1005,7 @@ class ScrollableBase extends Component {
 		}
 		if (this.scrolling) {
 			this.scrolling = false;
-			this.forwardScrollEvent('onScrollStop');
+			this.forwardScrollEvent('onScrollStop', this.getReachedEdgeInfo());
 		}
 	}
 

packages/ui/Scrollable/ScrollableNative.js

@@ -461,7 +461,7 @@ class ScrollableBaseNative extends Component {
 	componentWillUnmount () {
 		// Before call cancelAnimationFrame, you must send scrollStop Event.
 		if (this.scrolling) {
-			this.forwardScrollEvent('onScrollStop');
+			this.forwardScrollEvent('onScrollStop', this.getReachedEdgeInfo());
 		}
 		this.scrollStopJob.stop();
 
@@ -907,8 +907,8 @@ class ScrollableBaseNative extends Component {
 
 	// call scroll callbacks
 
-	forwardScrollEvent (type) {
-		forward(type, {scrollLeft: this.scrollLeft, scrollTop: this.scrollTop, moreInfo: this.getMoreInfo()}, this.props);
+	forwardScrollEvent (type, reachedEdgeInfo) {
+		forward(type, {scrollLeft: this.scrollLeft, scrollTop: this.scrollTop, moreInfo: this.getMoreInfo(), reachedEdgeInfo}, this.props);
 	}
 
 	// call scroll callbacks and update scrollbars for native scroll
@@ -929,7 +929,7 @@ class ScrollableBaseNative extends Component {
 		this.lastInputType = null;
 		this.isScrollAnimationTargetAccumulated = false;
 		this.scrolling = false;
-		this.forwardScrollEvent('onScrollStop');
+		this.forwardScrollEvent('onScrollStop', this.getReachedEdgeInfo());
 		this.startHidingThumb();
 	}
 
@@ -999,6 +999,38 @@ class ScrollableBaseNative extends Component {
 		}
 	}
 
+	getReachedEdgeInfo = () => {
+		const
+			bounds = this.getScrollBounds(),
+			reachedEdgeInfo = {bottom: false, left: false, right: false, top: false};
+
+		if (this.canScrollHorizontally(bounds)) {
+			const
+				rtl = this.state.rtl,
+				edge = this.getEdgeFromPosition(this.scrollLeft, bounds.maxLeft);
+
+			if (edge) { // if edge is null, no need to check which edge is reached.
+				if ((edge === 'before' && !rtl) || (edge === 'after' && rtl)) {
+					reachedEdgeInfo.left = true;
+				} else {
+					reachedEdgeInfo.right = true;
+				}
+			}
+		}
+
+		if (this.canScrollVertically(bounds)) {
+			const edge = this.getEdgeFromPosition(this.scrollTop, bounds.maxTop);
+
+			if (edge === 'before') {
+				reachedEdgeInfo.top = true;
+			} else if (edge === 'after') {
+				reachedEdgeInfo.bottom = true;
+			}
+		}
+
+		return reachedEdgeInfo;
+	}
+
 	// scroll start
 
 	start ({targetX, targetY, animate = true, overscrollEffect = false}) {