Boundary Processing

docs/guides/sticky/README.md

@@ -14,6 +14,7 @@ _setRef(recycler) {
     this._recyclerRef = recycler;
 }
 ```
+* If using `overrideRowRenderer`, keep in mind that upon scrolling to the very top or bottom of the content, stickies will be hidden. eg. If the first item in the list is given as sticky, scrolling to the top will display the original view and not the overridden view.
 
 ### 2) Props
 * `stickyHeaderIndices`   - An array of indices whose corresponding items need to be stuck to the top of the RecyclerListView once the items scroll off the top. Every subsequent sticky index view will push the previous sticky view off the top to take its place. Needs to be sorted ascending.

package.json

@@ -1,6 +1,6 @@
 {
   "name": "recyclerlistview",
-  "version": "1.4.0-beta.sticky.15",
+  "version": "1.4.0-beta.sticky.16",
   "description": "The listview that you need and deserve. It was built for performance, uses cell recycling to achieve smooth scrolling.",
   "main": "dist/reactnative/index.js",
   "types": "dist/reactnative/index.d.ts",

src/core/RecyclerListView.tsx

@@ -36,13 +36,11 @@ import { TOnItemStatusChanged } from "./ViewabilityTracker";
 import VirtualRenderer, { RenderStack, RenderStackItem, RenderStackParams } from "./VirtualRenderer";
 import ItemAnimator, { BaseItemAnimator } from "./ItemAnimator";
 import { DebugHandlers } from "..";
-
 //#if [REACT-NATIVE]
 import ScrollComponent from "../platform/reactnative/scrollcomponent/ScrollComponent";
 import ViewRenderer from "../platform/reactnative/viewrenderer/ViewRenderer";
 import { DefaultJSItemAnimator as DefaultItemAnimator } from "../platform/reactnative/itemanimators/defaultjsanimator/DefaultJSItemAnimator";
 import { Platform } from "react-native";
-
 const IS_WEB = !Platform || Platform.OS === "web";
 //#endif
 
@@ -91,7 +89,6 @@ export interface RecyclerListViewProps {
     onScroll?: (rawEvent: ScrollEvent, offsetX: number, offsetY: number) => void;
     onRecreate?: (params: OnRecreateParams) => void;
     onEndReached?: () => void;
-    onVisibleEndReached?: () => void;
     onEndReachedThreshold?: number;
     onVisibleIndexesChanged?: TOnItemStatusChanged;
     onVisibleIndicesChanged?: TOnItemStatusChanged;
@@ -323,6 +320,10 @@ export default class RecyclerListView<P extends RecyclerListViewProps, S extends
         return this._layout;
     }
 
+    public getContentDimension(): Dimension {
+        return this._virtualRenderer.getLayoutDimension();
+    }
+
     public render(): JSX.Element {
         //TODO:Talha
         // const {
@@ -571,7 +572,7 @@ export default class RecyclerListView<P extends RecyclerListViewProps, S extends
     }
 
     private _processOnEndReached(): void {
-        if ((this.props.onEndReached || this.props.onVisibleEndReached) && this._virtualRenderer) {
+        if (this.props.onEndReached && this._virtualRenderer) {
             const layout = this._virtualRenderer.getLayoutDimension();
             const viewabilityTracker = this._virtualRenderer.getViewabilityTracker();
             if (viewabilityTracker) {
@@ -583,9 +584,6 @@ export default class RecyclerListView<P extends RecyclerListViewProps, S extends
                         this._onEndReachedCalled = true;
                         this.props.onEndReached();
                     }
-                    if (this.props.onVisibleEndReached && endReachedMargin <= 0) {
-                        this.props.onVisibleEndReached();
-                    }
                 } else {
                     this._onEndReachedCalled = false;
                 }

src/core/StickyContainer.tsx

@@ -24,20 +24,18 @@ export interface StickyContainerProps {
     overrideRowRenderer?: (type: string | number | undefined, data: any, index: number, extendedState?: object) => JSX.Element | JSX.Element[] | null;
     style?: StyleProp<ViewStyle>;
 }
-export interface StickyContainerState {
-    topVisible: boolean;
-}
 export interface RecyclerChild extends React.ReactElement<RecyclerListViewProps> {
     ref: (recyclerRef: any) => {};
     props: RecyclerListViewProps;
 }
-export default class StickyContainer<P extends StickyContainerProps, S extends StickyContainerState> extends React.Component<P, S> {
+export default class StickyContainer<P extends StickyContainerProps> extends React.Component<P> {
     public static propTypes = {};
     private _recyclerRef: RecyclerListView<RecyclerListViewProps, RecyclerListViewState> | undefined = undefined;
     private _dataProvider: DataProvider;
     private _layoutProvider: BaseLayoutProvider;
     private _extendedState: object | undefined;
     private _rowRenderer: ((type: string | number, data: any, index: number, extendedState?: object) => JSX.Element | JSX.Element[] | null);
+    private _distanceFromWindow: number;
 
     private _stickyHeaderRef: StickyHeader<StickyObjectProps, StickyObjectState> | null = null;
     private _stickyFooterRef: StickyFooter<StickyObjectProps, StickyObjectState> | null = null;
@@ -46,15 +44,16 @@ export default class StickyContainer<P extends StickyContainerProps, S extends S
     constructor(props: P, context?: any) {
         super(props, context);
         this._assertChildType();
-        const childProps: RecyclerListViewProps = this.props.children.props;
-        this._dataProvider = childProps.dataProvider;
+        const childProps: RecyclerListViewProps = props.children.props;
         this._dataProvider = childProps.dataProvider;
         this._layoutProvider = childProps.layoutProvider;
         this._extendedState = childProps.extendedState;
         this._rowRenderer = childProps.rowRenderer;
-        this.state = {
-            topVisible: false,
-        } as S;
+        this._distanceFromWindow = childProps.distanceFromWindow ? childProps.distanceFromWindow : 0;
+    }
+
+    public componentWillReceiveProps(newProps: P): void {
+        this._initParams(newProps);
     }
 
     public render(): JSX.Element {
@@ -64,7 +63,6 @@ export default class StickyContainer<P extends StickyContainerProps, S extends S
             ref: this._getRecyclerRef,
             onVisibleIndicesChanged: this._onVisibleIndicesChanged,
             onScroll: this._onScroll,
-            onVisibleEndReached: this._onEndReached,
         });
         return (
             <View style={this.props.style ? this.props.style : {flex: 1}}>
@@ -77,7 +75,9 @@ export default class StickyContainer<P extends StickyContainerProps, S extends S
                                   getLayoutTypeForIndex={this._getLayoutTypeForIndex}
                                   getExtendedState={this._getExtendedState}
                                   getRLVRenderedSize={this._getRLVRenderedSize}
+                                  getContentDimension={this._getContentDimension}
                                   getRowRenderer={this._getRowRenderer}
+                                  getDistanceFromWindow={this._getDistanceFromWindow}
                                   overrideRowRenderer={this.props.overrideRowRenderer}/>
                 ) : null}
                 {this.props.stickyFooterIndices ? (
@@ -88,7 +88,9 @@ export default class StickyContainer<P extends StickyContainerProps, S extends S
                                   getLayoutTypeForIndex={this._getLayoutTypeForIndex}
                                   getExtendedState={this._getExtendedState}
                                   getRLVRenderedSize={this._getRLVRenderedSize}
+                                  getContentDimension={this._getContentDimension}
                                   getRowRenderer={this._getRowRenderer}
+                                  getDistanceFromWindow={this._getDistanceFromWindow}
                                   overrideRowRenderer={this.props.overrideRowRenderer}/>
                 ) : null}
             </View>
@@ -142,9 +144,6 @@ export default class StickyContainer<P extends StickyContainerProps, S extends S
     private _onScroll = (rawEvent: ScrollEvent, offsetX: number, offsetY: number) => {
         if (this._stickyHeaderRef) {
             this._stickyHeaderRef.onScroll(offsetY);
-            if (offsetY === 0) {
-                this._stickyHeaderRef.onStartReached();
-            }
         }
         if (this._stickyFooterRef) {
             this._stickyFooterRef.onScroll(offsetY);
@@ -154,12 +153,6 @@ export default class StickyContainer<P extends StickyContainerProps, S extends S
         }
     }
 
-    private _onEndReached = () => {
-        if (this._stickyFooterRef) {
-            this._stickyFooterRef.onEndReached();
-        }
-    }
-
     private _assertChildType = (): void => {
         if (React.Children.count(this.props.children) !== 1 || !this._isChildRecyclerInstance()) {
             throw new CustomError(RecyclerListViewExceptions.wrongStickyChildTypeException);
@@ -204,6 +197,26 @@ export default class StickyContainer<P extends StickyContainerProps, S extends S
         }
         return undefined;
     }
+
+    private _getContentDimension = (): Dimension | undefined => {
+        if (this._recyclerRef) {
+            return this._recyclerRef.getContentDimension();
+        }
+        return undefined;
+    }
+
+    private _getDistanceFromWindow = (): number => {
+        return this._distanceFromWindow;
+    }
+
+    private _initParams = (props: P) => {
+        const childProps: RecyclerListViewProps = props.children.props;
+        this._dataProvider = childProps.dataProvider;
+        this._layoutProvider = childProps.layoutProvider;
+        this._extendedState = childProps.extendedState;
+        this._rowRenderer = childProps.rowRenderer;
+        this._distanceFromWindow = childProps.distanceFromWindow ? childProps.distanceFromWindow : 0;
+    }
 }
 
 StickyContainer.propTypes = {

src/core/sticky/StickyFooter.tsx

@@ -6,36 +6,24 @@ import StickyObject, {StickyObjectProps, StickyObjectState, StickyType} from "./
 import BinarySearch, {ValueAndIndex} from "../../utils/BinarySearch";
 
 export default class StickyFooter<P extends StickyObjectProps, S extends StickyObjectState> extends StickyObject<P, S> {
-    private _initialOnScroll: boolean = true;
-
     constructor(props: P, context?: any) {
         super(props, context);
     }
 
-    public onEndReached(): void {
-        this._stickyViewVisible(false);
-        this.boundaryReached = true;
-    }
-
-    protected boundaryProcessing(): void {
-        if (this.boundaryReached && !this._initialOnScroll) {
-            this.boundaryReached = false;
-            this.onVisibleIndicesChanged(this.visibleIndices);
-        }
-        this._initialOnScroll = false;
-    }
-
-    protected initStickyParams(_offsetY: number): void {
+    protected initStickyParams(): void {
         this.stickyType = StickyType.FOOTER;
         this.stickyTypeMultiplier = -1;
         this.containerPosition = {bottom: 0};
+        this.bounceScrolling = false;
     }
 
     protected calculateVisibleStickyIndex(
-        stickyIndices: number[] | undefined, _smallestVisibleIndex: number, largestVisibleIndex: number, _offsetY: number,
+        stickyIndices: number[] | undefined, _smallestVisibleIndex: number, largestVisibleIndex: number,
+        offsetY: number, distanceFromWindow: number, windowBound ?: number,
     ): void {
-        if (stickyIndices && largestVisibleIndex && !this.boundaryReached) {
-            if (largestVisibleIndex > stickyIndices[stickyIndices.length - 1]) {
+        if (stickyIndices && largestVisibleIndex) {
+            this.bounceScrolling = this.hasReachedBoundary(offsetY, distanceFromWindow, windowBound);
+            if (largestVisibleIndex > stickyIndices[stickyIndices.length - 1] || this.bounceScrolling) {
                 this.stickyVisiblity = false;
             } else {
                 this.stickyVisiblity = true;
@@ -58,7 +46,15 @@ export default class StickyFooter<P extends StickyObjectProps, S extends StickyO
         return -1 * (currentY + currentHeight);
     }
 
-    protected getScrollY(offsetY: number, scrollableHeight: number): number | null {
-        return scrollableHeight ? -1 * (offsetY + scrollableHeight) : null;
+    protected getScrollY(offsetY: number, scrollableHeight: number): number | undefined {
+        return scrollableHeight ? -1 * (offsetY + scrollableHeight) : undefined;
+    }
+
+    protected hasReachedBoundary(offsetY: number, distanceFromWindow: number, windowBound?: number): boolean {
+        if (windowBound) {
+            const endReachedMargin = Math.round(offsetY - (windowBound + distanceFromWindow));
+            return endReachedMargin >= 0;
+        }
+        return false;
     }
 }

src/core/sticky/StickyHeader.tsx

@@ -10,32 +10,22 @@ export default class StickyHeader<P extends StickyObjectProps, S extends StickyO
         super(props, context);
     }
 
-    public onStartReached(): void {
-        this._stickyViewVisible(false);
-        this.boundaryReached = true;
-    }
-
-    protected boundaryProcessing(): void {
-        if (this.boundaryReached) {
-            this.boundaryReached = false;
-            this.onVisibleIndicesChanged(this.visibleIndices);
-        }
-    }
-
-    protected initStickyParams(offsetY: number): void {
+    protected initStickyParams(): void {
         this.stickyType = StickyType.HEADER;
         this.stickyTypeMultiplier = 1;
         this.containerPosition = {top: 0};
-        if (offsetY === 0) {
-            this.boundaryReached = true;
-        }
+
+        // Kept as true contrary to as in StickyFooter because in case of initialOffset not given, onScroll isn't called and boundaryProcessing isn't done.
+        // Default behaviour in that case will be sticky header hidden.
+        this.bounceScrolling = true;
     }
 
     protected calculateVisibleStickyIndex(
-        stickyIndices: number[] | undefined, smallestVisibleIndex: number, largestVisibleIndex: number, offsetY: number,
+        stickyIndices: number[] | undefined, smallestVisibleIndex: number, largestVisibleIndex: number, offsetY: number, distanceFromWindow: number,
     ): void {
         if (stickyIndices && smallestVisibleIndex !== undefined) {
-            if (smallestVisibleIndex < stickyIndices[0] || offsetY === 0) {
+            this.bounceScrolling = this.hasReachedBoundary(offsetY, distanceFromWindow);
+            if (smallestVisibleIndex < stickyIndices[0] || this.bounceScrolling) {
                 this.stickyVisiblity = false;
             } else {
                 this.stickyVisiblity = true;
@@ -58,7 +48,11 @@ export default class StickyHeader<P extends StickyObjectProps, S extends StickyO
         return currentY;
     }
 
-    protected getScrollY(offsetY: number, scrollableHeight: number): number | null {
+    protected getScrollY(offsetY: number, scrollableHeight: number): number | undefined {
         return offsetY;
     }
+
+    protected hasReachedBoundary(offsetY: number, distanceFromWindow: number, _windowBound?: number): boolean {
+        return offsetY <= distanceFromWindow;
+    }
 }