From 6a199245ddaa0f1b11506ceba546b67d5909c2c3 Mon Sep 17 00:00:00 2001 From: Dailenis Gonzalez Date: Mon, 19 Mar 2018 16:08:13 -0600 Subject: [PATCH 1/2] feat: support max width parameter --- src/core/RecyclerListView.tsx | 4 ++++ src/core/scrollcomponent/BaseScrollComponent.tsx | 1 + src/core/scrollcomponent/BaseScrollView.tsx | 1 + src/platform/web/scrollcomponent/ScrollViewer.tsx | 12 ++++++++++-- 4 files changed, 16 insertions(+), 2 deletions(-) diff --git a/src/core/RecyclerListView.tsx b/src/core/RecyclerListView.tsx index 27f695b5..9027b7ed 100644 --- a/src/core/RecyclerListView.tsx +++ b/src/core/RecyclerListView.tsx @@ -93,6 +93,7 @@ export interface RecyclerListViewProps { canChangeSize?: boolean; distanceFromWindow?: number; useWindowScroll?: boolean; + maxWidth?: number; disableRecycling?: boolean; forceNonDeterministicRendering?: boolean; extendedState?: object; @@ -541,6 +542,9 @@ RecyclerListView.propTypes = { //Web only. Specify how far away the first list item is from window top. This is an adjustment for better optimization. distanceFromWindow: PropTypes.number, + //Specify the max maxWidth of the list. + maxWidth: PropTypes.number, + //Web only. Layout elements in window instead of a scrollable div. useWindowScroll: PropTypes.bool, diff --git a/src/core/scrollcomponent/BaseScrollComponent.tsx b/src/core/scrollcomponent/BaseScrollComponent.tsx index 466e75cc..3ab0b9b0 100644 --- a/src/core/scrollcomponent/BaseScrollComponent.tsx +++ b/src/core/scrollcomponent/BaseScrollComponent.tsx @@ -14,6 +14,7 @@ export interface ScrollComponentProps { scrollThrottle?: number; distanceFromWindow?: number; useWindowScroll?: boolean; + maxWidth?: number; } export default abstract class BaseScrollComponent extends React.Component { public abstract scrollTo(x: number, y: number, animate: boolean): void; diff --git a/src/core/scrollcomponent/BaseScrollView.tsx b/src/core/scrollcomponent/BaseScrollView.tsx index b40a74ea..34ae8297 100644 --- a/src/core/scrollcomponent/BaseScrollView.tsx +++ b/src/core/scrollcomponent/BaseScrollView.tsx @@ -10,6 +10,7 @@ export interface ScrollViewDefaultProps { style?: CSSProperties | null; distanceFromWindow: number; useWindowScroll: boolean; + maxWidth?: number; } export interface ScrollEvent { nativeEvent: { diff --git a/src/platform/web/scrollcomponent/ScrollViewer.tsx b/src/platform/web/scrollcomponent/ScrollViewer.tsx index b337a356..11b9664f 100644 --- a/src/platform/web/scrollcomponent/ScrollViewer.tsx +++ b/src/platform/web/scrollcomponent/ScrollViewer.tsx @@ -47,7 +47,11 @@ export default class ScrollViewer extends BaseScrollView { if (this.props.onSizeChanged) { if (this.props.useWindowScroll) { this._startListeningToWindowEvents(); - this.props.onSizeChanged({ height: window.innerHeight, width: window.innerWidth }); + let maxWidth = window.innerWidth; + if ( this.props.maxWidth ) { + maxWidth = this.props.maxWidth; + } + this.props.onSizeChanged({ height: window.innerHeight, width: maxWidth }); } } } @@ -199,7 +203,11 @@ export default class ScrollViewer extends BaseScrollView { private _onWindowResize(): void { if (this.props.onSizeChanged && this.props.useWindowScroll) { - this.props.onSizeChanged({ height: window.innerHeight, width: window.innerWidth }); + let maxWidth = window.innerWidth; + if ( this.props.maxWidth ) { + maxWidth = this.props.maxWidth; + } + this.props.onSizeChanged({ height: window.innerHeight, width: maxWidth }); } } From d314170534313cc14e4def6903bb40d9d5a3b1a6 Mon Sep 17 00:00:00 2001 From: Matias Barletta Date: Thu, 7 Jun 2018 09:04:23 -0600 Subject: [PATCH 2/2] fix: Maxwidth Min of props or Window --- src/platform/web/scrollcomponent/ScrollViewer.tsx | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/platform/web/scrollcomponent/ScrollViewer.tsx b/src/platform/web/scrollcomponent/ScrollViewer.tsx index 11b9664f..af68f472 100644 --- a/src/platform/web/scrollcomponent/ScrollViewer.tsx +++ b/src/platform/web/scrollcomponent/ScrollViewer.tsx @@ -49,7 +49,7 @@ export default class ScrollViewer extends BaseScrollView { this._startListeningToWindowEvents(); let maxWidth = window.innerWidth; if ( this.props.maxWidth ) { - maxWidth = this.props.maxWidth; + maxWidth = Math.min(window.innerWidth, this.props.maxWidth); } this.props.onSizeChanged({ height: window.innerHeight, width: maxWidth }); } @@ -205,7 +205,7 @@ export default class ScrollViewer extends BaseScrollView { if (this.props.onSizeChanged && this.props.useWindowScroll) { let maxWidth = window.innerWidth; if ( this.props.maxWidth ) { - maxWidth = this.props.maxWidth; + maxWidth = Math.min(window.innerWidth, this.props.maxWidth); } this.props.onSizeChanged({ height: window.innerHeight, width: maxWidth }); }