Skip to content

Commit

Permalink
Merge pull request #199 from Flipkart/insetAlternate
Browse files Browse the repository at this point in the history 
Using existing prop to deal with padding
  • Loading branch information
@rajatgupta26
rajatgupta26 authored Jun 18, 2018
2 parents c0117af + 8bf7ce2 commit 9dba4ab
Show file tree
Hide file tree
Showing 6 changed files with 17 additions and 47 deletions.
40 changes: 11 additions & 29 deletions src/core/RecyclerListView.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -44,13 +44,6 @@ 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 @@ -115,12 +108,6 @@ 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;
}
export interface RecyclerListViewState {
renderStack: RenderStack;
Expand All @@ -134,6 +121,7 @@ export default class RecyclerListView extends React.Component<RecyclerListViewPr
initialRenderIndex: 0,
isHorizontal: false,
onEndReachedThreshold: 0,
distanceFromWindow: 0,
renderAheadOffset: IS_WEB ? 1000 : 250,
};

Expand Down Expand Up @@ -161,8 +149,6 @@ 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 @@ -184,7 +170,6 @@ 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 @@ -292,6 +277,10 @@ export default class RecyclerListView extends React.Component<RecyclerListViewPr

public scrollToOffset(x: number, y: number, animate: boolean = false): void {
if (this._scrollComponent) {
if (IS_WEB && this.props.useWindowScroll) {
x += this.props.distanceFromWindow!;
y += this.props.distanceFromWindow!;
}
if (this.props.isHorizontal) {
y = 0;
} else {
Expand Down Expand Up @@ -335,14 +324,6 @@ export default class RecyclerListView extends React.Component<RecyclerListViewPr
ref={(scrollComponent) => this._scrollComponent = scrollComponent as BaseScrollComponent | null}
{...this.props}
{...this.props.scrollViewProps}
{...{
contentContainerStyle: {
paddingTop: this._contentInsets.top,
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 @@ -536,10 +517,8 @@ export default class RecyclerListView extends React.Component<RecyclerListViewPr
}

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

this._virtualRenderer.updateOffset(forwardOffsetX, forwardOffsetY);
//Adjusting offsets using distanceFromWindow
this._virtualRenderer.updateOffset(offsetX - this.props.distanceFromWindow!, offsetY - this.props.distanceFromWindow!);

if (this.props.onScroll) {
this.props.onScroll(rawEvent, offsetX, offsetY);
Expand Down Expand Up @@ -622,7 +601,10 @@ RecyclerListView.propTypes = {
//Specify if size can change, listview will automatically relayout items. For web, works only with useWindowScroll = true
canChangeSize: PropTypes.bool,

//Web only. Specify how far away the first list item is from window top. This is an adjustment for better optimization.
//Specify how far away the first list item is from start of the RecyclerListView. e.g, if you have content padding on top or left.
//This is an adjustment for optimization and to make sure onVisibileIndexesChanged callback is correct.
//Ideally try to avoid setting large padding values on RLV content. If you have to please correct offsets reported, handle
//them in a custom ScrollView and pass it as an externalScrollView.
distanceFromWindow: PropTypes.number,

//Web only. Layout elements in window instead of a scrollable div.
Expand Down
1 change: 0 additions & 1 deletion src/core/scrollcomponent/BaseScrollComponent.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -12,7 +12,6 @@ export interface ScrollComponentProps {
isHorizontal?: boolean;
renderFooter?: () => JSX.Element | JSX.Element[] | null;
scrollThrottle?: number;
distanceFromWindow?: number;
useWindowScroll?: boolean;
onLayout?: any;
}
Expand Down
1 change: 0 additions & 1 deletion src/core/scrollcomponent/BaseScrollView.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -8,7 +8,6 @@ export interface ScrollViewDefaultProps {
horizontal: boolean;
canChangeSize: boolean;
style?: CSSProperties | null;
distanceFromWindow: number;
useWindowScroll: boolean;
}
export interface ScrollEvent {
Expand Down
1 change: 0 additions & 1 deletion src/platform/reactnative/scrollcomponent/ScrollComponent.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -54,7 +54,6 @@ export default class ScrollComponent extends BaseScrollComponent {
// contentWidth,
// externalScrollView,
// canChangeSize,
// distanceFromWindow,
// renderFooter,
// isHorizontal,
// scrollThrottle,
Expand Down
6 changes: 3 additions & 3 deletions src/platform/web/scrollcomponent/ScrollEventNormalizer.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,7 +3,7 @@ import { ScrollEvent } from "../../../core/scrollcomponent/BaseScrollView";
export class ScrollEventNormalizer {
public divEvent: ScrollEvent;
public windowEvent: ScrollEvent;
constructor(target: HTMLDivElement, distanceFromWindow: number) {
constructor(target: HTMLDivElement) {
this.divEvent = {
nativeEvent: {
contentOffset: {
Expand Down Expand Up @@ -36,10 +36,10 @@ export class ScrollEventNormalizer {
nativeEvent: {
contentOffset: {
get x(): number {
return window.scrollX - distanceFromWindow;
return window.scrollX;
},
get y(): number {
return window.scrollY - distanceFromWindow;
return window.scrollY;
},
},
contentSize: {
Expand Down
15 changes: 3 additions & 12 deletions src/platform/web/scrollcomponent/ScrollViewer.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -13,7 +13,6 @@ const scrollEndEventSimulator = debounce((executable: () => void) => {
export default class ScrollViewer extends BaseScrollView {
public static defaultProps = {
canChangeSize: false,
distanceFromWindow: 0,
horizontal: false,
style: null,
useWindowScroll: false,
Expand Down Expand Up @@ -46,14 +45,6 @@ export default class ScrollViewer extends BaseScrollView {
}
}

public componentWillReceiveProps(nextProps: ScrollViewDefaultProps): void {
if (this.props.distanceFromWindow !== nextProps.distanceFromWindow) {
if (this._mainDivRef) {
this._scrollEventNormalizer = new ScrollEventNormalizer(this._mainDivRef, nextProps.distanceFromWindow);
}
}
}

public componentWillUnmount(): void {
window.removeEventListener("scroll", this._windowOnScroll);
if (this._mainDivRef) {
Expand Down Expand Up @@ -97,7 +88,7 @@ export default class ScrollViewer extends BaseScrollView {
private _setDivRef(div: HTMLDivElement | null): void {
this._mainDivRef = div;
if (div) {
this._scrollEventNormalizer = new ScrollEventNormalizer(div, this.props.distanceFromWindow);
this._scrollEventNormalizer = new ScrollEventNormalizer(div);
} else {
this._scrollEventNormalizer = null;
}
Expand Down Expand Up @@ -133,9 +124,9 @@ export default class ScrollViewer extends BaseScrollView {
}
} else {
if (this.props.horizontal) {
window.scrollTo(offset + this.props.distanceFromWindow, 0);
window.scrollTo(offset, 0);
} else {
window.scrollTo(0, offset + this.props.distanceFromWindow);
window.scrollTo(0, offset);
}
}
}
Expand Down

0 comments on commit 9dba4ab

Please sign in to comment.