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

accomodating content insets and content container padding in visible … #196

Merged
merged 7 commits into from
Jun 19, 2018
Merged

accomodating content insets and content container padding in visible … #196

Changes from 2 commits
Commits
Show all changes
7 commits
Select commit Hold shift + click to select a range
5195ef0
accomodating content insets and content container padding in visible …
rajatgupta26 Jun 11, 2018
c0117af
introduced contentInsets as a standard prop of RecyclerListView
rajatgupta26 Jun 13, 2018
2387c43
Using existing prop to deal with padding
naqvitalha Jun 15, 2018
b58aad9
Window scroll offset fix
naqvitalha Jun 15, 2018
8bf7ce2
doc fix
naqvitalha Jun 15, 2018
9dba4ab
Merge pull request #199 from Flipkart/insetAlternate
rajatgupta26 Jun 18, 2018
1ce5bd5
Merge branch 'master' into insetsFix
naqvitalha Jun 19, 2018
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
30 changes: 29 additions & 1 deletion src/core/RecyclerListView.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -44,6 +44,13 @@ import { Platform } from "react-native";
const IS_WEB = !Platform || Platform.OS === "web";
//#endif

export interface EdgeInsets {
top: number;
left: number;
right: number;
bottom: number;
}

/***
* To use on web, start importing from recyclerlistview/web. To make it even easier specify an alias in you builder of choice.
*/
Expand Down Expand Up @@ -108,6 +115,12 @@ export interface RecyclerListViewProps {
//For all props that need to be proxied to inner/external scrollview. Put them in an object and they'll be spread
//and passed down. For better typescript support.
scrollViewProps?: object;

/**
* Use this prop to provide padding around list content instead of
* using padding/margin in contentContainerStyle prop of scroll view.
*/
contentInsets?: EdgeInsets;
Copy link
Collaborator

Choose a reason for hiding this comment

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

Won't this conflict with existing ScrollView prop?

Copy link
Collaborator

Choose a reason for hiding this comment

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

Can we just take paddingTop etc directly which we can override in give contentContainerStyle.
Also will need to be handled in web version

}
export interface RecyclerListViewState {
renderStack: RenderStack;
Expand Down Expand Up @@ -148,6 +161,8 @@ export default class RecyclerListView extends React.Component<RecyclerListViewPr

private _defaultItemAnimator: ItemAnimator = new DefaultItemAnimator();

private _contentInsets: EdgeInsets = { top: 0, left: 0, bottom: 0, right: 0 };

constructor(props: RecyclerListViewProps) {
super(props);
this._onScroll = this._onScroll.bind(this);
Expand All @@ -169,6 +184,7 @@ export default class RecyclerListView extends React.Component<RecyclerListViewPr
}

public componentWillReceiveProps(newProps: RecyclerListViewProps): void {
this._contentInsets = this.props.contentInsets ? this.props.contentInsets : { top: 0, left: 0, right: 0, bottom: 0 };
this._assertDependencyPresence(newProps);
this._checkAndChangeLayouts(newProps);
if (!this.props.onVisibleIndexesChanged) {
Expand Down Expand Up @@ -319,6 +335,14 @@ export default class RecyclerListView extends React.Component<RecyclerListViewPr
ref={(scrollComponent) => this._scrollComponent = scrollComponent as BaseScrollComponent | null}
{...this.props}
{...this.props.scrollViewProps}
{...{
contentContainerStyle: {
Copy link
Collaborator

Choose a reason for hiding this comment

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

Let's resolve conflicts if dev already sends this prop

paddingTop: this._contentInsets.top,
Copy link
Collaborator

Choose a reason for hiding this comment

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

All are top, typo

paddingLeft: this._contentInsets.top,
paddingBottom: this._contentInsets.top,
paddingRight: this._contentInsets.top,
},
}}
onScroll={this._onScroll}
onSizeChanged={this._onSizeChanged}
contentHeight={this._initComplete ? this._virtualRenderer.getLayoutDimension().height : 0}
Expand Down Expand Up @@ -512,7 +536,11 @@ export default class RecyclerListView extends React.Component<RecyclerListViewPr
}

private _onScroll(offsetX: number, offsetY: number, rawEvent: ScrollEvent): void {
this._virtualRenderer.updateOffset(offsetX, offsetY);
const forwardOffsetX = offsetX - this._contentInsets.left;
const forwardOffsetY = offsetX - this._contentInsets.top;

this._virtualRenderer.updateOffset(forwardOffsetX, forwardOffsetY);

if (this.props.onScroll) {
this.props.onScroll(rawEvent, offsetX, offsetY);
}
Expand Down