diff --git a/src/core/RecyclerListView.tsx b/src/core/RecyclerListView.tsx index 91bab993..9cc8be39 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<ScrollComponentProps, {}> { 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..af68f472 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 = Math.min(window.innerWidth, 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 = Math.min(window.innerWidth, this.props.maxWidth); + } + this.props.onSizeChanged({ height: window.innerHeight, width: maxWidth }); } }