Always Sticky Feature (Flipkart#533)

* Always Sticky Feature * version bump * Review changes
fortmarek · Aug 7, 2020 · db15a36 · db15a36
1 parent 6ab87e6
commit db15a36
Show file tree

Hide file tree

Showing 3 changed files with 30 additions and 3 deletions.
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "recyclerlistview",
-  "version": "3.0.3",
+  "version": "3.0.4",
   "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",

diff --git a/src/core/StickyContainer.tsx b/src/core/StickyContainer.tsx
@@ -27,6 +27,7 @@ export interface StickyContainerProps {
     applyWindowCorrection?: (offsetX: number, offsetY: number, winowCorrection: WindowCorrection) => void;
     renderStickyContainer?: (stickyContent: JSX.Element, index: number, extendedState?: object) => JSX.Element | null;
     style?: StyleProp<ViewStyle>;
+    alwaysStickyFooter?: boolean;
 }
 export interface RecyclerChild extends React.ReactElement<RecyclerListViewProps> {
     ref: (recyclerRef: any) => {};
@@ -69,6 +70,7 @@ export default class StickyContainer<P extends StickyContainerProps> extends Com
             onVisibleIndicesChanged: this._onVisibleIndicesChanged,
             onScroll: this._onScroll,
             applyWindowCorrection: this._applyWindowCorrection,
+            rowRenderer: this._rlvRowRenderer,
         });
         return (
             <View style={this.props.style ? this.props.style : { flex: 1 }}>
@@ -99,12 +101,29 @@ export default class StickyContainer<P extends StickyContainerProps> extends Com
                         getRowRenderer={this._getRowRenderer}
                         overrideRowRenderer={this.props.overrideRowRenderer}
                         renderContainer={this.props.renderStickyContainer}
-                        getWindowCorrection={this._getCurrentWindowCorrection} />
+                        getWindowCorrection={this._getCurrentWindowCorrection}
+                        alwaysStickBottom = {this.props.alwaysStickyFooter} />
                 ) : null}
             </View>
         );
     }
 
+    private _rlvRowRenderer = (type: string | number, data: any, index: number, extendedState?: object): JSX.Element | JSX.Element[] | null => {
+        if (this.props.alwaysStickyFooter) {
+            const rlvDimension: Dimension | undefined = this._getRLVRenderedSize();
+            const contentDimension: Dimension | undefined = this._getContentDimension();
+            let isScrollable = false;
+            if (rlvDimension && contentDimension) {
+                isScrollable = contentDimension.height > rlvDimension.height;
+            }
+            if (!isScrollable && this.props.stickyFooterIndices
+                && index === this.props.stickyFooterIndices[0]) {
+                return null;
+            }
+        }
+        return this._rowRenderer(type, data, index, extendedState);
+    }
+
     private _getRecyclerRef = (recycler: any) => {
         this._recyclerRef = recycler as (RecyclerListView<RecyclerListViewProps, RecyclerListViewState> | undefined);
         if (this.props.children.ref) {

diff --git a/src/core/sticky/StickyFooter.tsx b/src/core/sticky/StickyFooter.tsx
@@ -6,7 +6,11 @@ import StickyObject, { StickyObjectProps, StickyType } from "./StickyObject";
 import BinarySearch, { ValueAndIndex } from "../../utils/BinarySearch";
 import { WindowCorrection } from "../ViewabilityTracker";
 
-export default class StickyFooter<P extends StickyObjectProps> extends StickyObject<P> {
+export interface StickyFooterProps extends StickyObjectProps {
+    alwaysStickyFooter?: boolean;
+}
+
+export default class StickyFooter<P extends StickyFooterProps> extends StickyObject<P> {
     constructor(props: P, context?: any) {
         super(props, context);
     }
@@ -33,6 +37,10 @@ export default class StickyFooter<P extends StickyObjectProps> extends StickyObj
             this.bounceScrolling = this.hasReachedBoundary(offsetY, windowBound);
             if (largestVisibleIndex > stickyIndices[stickyIndices.length - 1] || this.bounceScrolling) {
                 this.stickyVisiblity = false;
+                //This is needed only in when the window is non-scrollable.
+                if (this.props.alwaysStickyFooter && offsetY === 0) {
+                    this.stickyVisiblity = true;
+                }
             } else {
                 this.stickyVisiblity = true;
                 const valueAndIndex: ValueAndIndex | undefined = BinarySearch.findValueLargerThanTarget(stickyIndices, largestVisibleIndex);