Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Always sticky feature #534

Open
wants to merge 10 commits into
base: master
Choose a base branch
from
Open

Always sticky feature #534

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
10 commits
Select commit Hold shift + click to select a range
c2be53b
Always Sticky Feature
Aug 6, 2020
258866d
version bump
Aug 6, 2020
0aa797b
Review changes
Aug 7, 2020
62af59b
Fixing issue for scrollable state change
Aug 7, 2020
1b10d2a
Version bump
Aug 7, 2020
8d5e60b
Merge branch 'master' into alwaysStickyFeature
Aug 7, 2020
7aff2bf
renamed variable.
Aug 7, 2020
557d938
Fixed the onSizeChange listener for View Container size change
Sep 9, 2020
4c9565e
Content height listener issue fix
Oct 1, 2020
226d4dd
Sticky fix
Oct 30, 2020
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
3 changes: 2 additions & 1 deletion .gitignore
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -47,4 +47,5 @@ yarn.lock
package-lock.json

#npm release config
.npmrc
.npmrc
scripts/publish-local.sh
2 changes: 1 addition & 1 deletion package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
{
"name": "recyclerlistview",
"version": "3.0.4",
"version": "3.0.9",
"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",
Expand Down
2 changes: 1 addition & 1 deletion scripts/publish-local.sh
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
#!/usr/bin/env bash
set -e

TARGET=$"/Users/talha.naqvi/Documents/Work/RLV-Demo/node_modules/recyclerlistview/dist" #target-path
TARGET=$"/Users/manish.patwari/work/FFB-Exp-Apps/node_modules/recyclerlistview/dist" #target-path

npm run build

Expand Down
9 changes: 9 additions & 0 deletions src/core/RecyclerListView.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -110,6 +110,7 @@ export interface RecyclerListViewProps {
scrollViewProps?: object;
applyWindowCorrection?: (offsetX: number, offsetY: number, windowCorrection: WindowCorrection) => void;
onItemLayout?: (index: number) => void;
onSizeChange?: (rlvDimension: Dimension, contentDimension: Dimension) => void;
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

You can use contentSizeChanged event of scrollview instead

Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@naqvitalha does RLV's _onSizeChanged get called on content size change or just container size change?

Copy link
Collaborator Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@ananyachandra14 contentSizeChanged this gets called only for ScrollView container size has changed.
@naqvitalha We had to add this for any size change (RVL + ScrollView container).. and to know if the RLV is scrollable or not.

Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@manishPatwari can we add a callback for both RLV size change and content size change and force rerender in both?

Copy link
Collaborator Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This change is for the same. RLV change hight is computed in onSize itself.

Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

But I'm not sure if this will cover the scenario where our RLV size remains the same but we dynamically increase the widget heights so the RLV becomes scrollable. In that case the footer will always remain sticky. Correct me if I'm wrong.

Copy link
Collaborator Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

It will cover that Ananya, RLV dimension is dependent on ScrollView. OnSizeChange, RLV dimension is computed.

Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@manishPatwari there are two components which can change here:

  • RLV layout size - which is the size of the container in which the content scrolls. This is the one which is covered by ScrollComponent's onSizeChanged and the changes for which have been added.
  • Content size - which is the size of the entire scrollable content. Check LayoutManager's getContentDimension.

Imo RLV should check and give a callback for scrollable state change any time either of the above two changes. StickyContainer should simply listen to this rather than determining on its own whether RLV is scrollable.

Copy link
Collaborator Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Done the changes.

Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Awesome, checking

}

export interface RecyclerListViewState {
Expand Down Expand Up @@ -402,6 +403,7 @@ export default class RecyclerListView<P extends RecyclerListViewProps, S extends
}

private _checkAndChangeLayouts(newProps: RecyclerListViewProps, forceFullRender?: boolean): void {
const { height: oldContentHeight, width: oldContentWidth } = this.getContentDimension();
this._params.isHorizontal = newProps.isHorizontal;
this._params.itemCount = newProps.dataProvider.getSize();
this._virtualRenderer.setParamsAndDimensions(this._params, this._layout);
Expand Down Expand Up @@ -443,6 +445,10 @@ export default class RecyclerListView<P extends RecyclerListViewProps, S extends
this._refreshViewability();
}
}
const {height: newContentHeight, width: newContentWidth} = this.getContentDimension();
if (this.props.onSizeChange && (oldContentHeight !== newContentHeight || oldContentWidth !== newContentWidth)) {
this.props.onSizeChange(this.getRenderedSize(), this.getContentDimension());
}
}

private _refreshViewability(): void {
Expand Down Expand Up @@ -483,6 +489,9 @@ export default class RecyclerListView<P extends RecyclerListViewProps, S extends
this._refreshViewability();
}
}
if (this.props.onSizeChange) {
this.props.onSizeChange(this.getRenderedSize(), this.getContentDimension());
}
}

private _initStateIfRequired(stack?: RenderStack): boolean {
Expand Down
30 changes: 21 additions & 9 deletions src/core/StickyContainer.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -43,6 +43,7 @@ export default class StickyContainer<P extends StickyContainerProps> extends Com
private _stickyHeaderRef: StickyHeader<StickyObjectProps> | null = null;
private _stickyFooterRef: StickyFooter<StickyObjectProps> | null = null;
private _visibleIndicesAll: number[] = [];
private _isRlvScrollable: boolean = true;
private _windowCorrection: WindowCorrection = {
startCorrection: 0, endCorrection: 0, windowShift: 0,
};
Expand Down Expand Up @@ -71,6 +72,7 @@ export default class StickyContainer<P extends StickyContainerProps> extends Com
onScroll: this._onScroll,
applyWindowCorrection: this._applyWindowCorrection,
rowRenderer: this._rlvRowRenderer,
onSizeChange: this.props.alwaysStickyFooter ? this._onSizeChange : undefined,
});
return (
<View style={this.props.style ? this.props.style : { flex: 1 }}>
Expand Down Expand Up @@ -102,28 +104,38 @@ export default class StickyContainer<P extends StickyContainerProps> extends Com
overrideRowRenderer={this.props.overrideRowRenderer}
renderContainer={this.props.renderStickyContainer}
getWindowCorrection={this._getCurrentWindowCorrection}
alwaysStickBottom = {this.props.alwaysStickyFooter} />
alwaysStickyFooter = {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]) {
if (!this._isRlvScrollable && this.props.stickyFooterIndices
&& index === this.props.stickyFooterIndices[this.props.stickyFooterIndices.length - 1]) {
return null;
}
}
return this._rowRenderer(type, data, index, extendedState);
}

private _onSizeChange = (rlvDimension: Dimension, contentDimension: Dimension) => {
let isScrollable = this._isRlvScrollable;
if (rlvDimension && contentDimension) {
isScrollable = contentDimension.height > rlvDimension.height;
}
// In case of scrollable state change, we have to force render to current Sticky slots rendering.
if (this._recyclerRef && this._isRlvScrollable !== isScrollable) {
this._isRlvScrollable = isScrollable;
if (!isScrollable && this._stickyFooterRef) {
this._stickyFooterRef.onScroll(0);
this.forceUpdate();
}
this._recyclerRef.forceRerender();
}
}

private _getRecyclerRef = (recycler: any) => {
this._recyclerRef = recycler as (RecyclerListView<RecyclerListViewProps, RecyclerListViewState> | undefined);
if (this.props.children.ref) {
Expand Down