Removed scrollOnWindowOverflow prop & update readme

Author: manufont

README.md

@@ -25,31 +25,29 @@ npm i -S react-swipeable-bottom-sheet
 ```
 import SwipeableBottomSheet from 'react-swipeable-bottom-sheet';
 
-<SwipeableBottomSheet
-overflowHeight={64}>
+<SwipeableBottomSheet overflowHeight={64}>
 	<div style={{ height: '240px' }}>
 		Here goes the content of your bottom sheet
 	</div>
 </SwipeableBottomSheet>
 ```
 
-The bottom sheet's height (when open) scales automatically with its content.
+The bottom sheet's height (when open) scales automatically with its content. If it exceeds the window height, content is scrollable.
 
 
-### Properties
+### Props
 
 | Name | Type | Default | Description |
 |:-----|:-----|:--------|:------------|
 | overflowHeight | number | 0 | The height (in px) of the sheet when closed. |
 | open | bool | | Use this property to enable controlled mode. If `true`, it will open the sheet. |
 | defaultOpen | bool | false | If `true`, the sheet is open at component mount. |
 | onChange | function(isOpen) | | The callback that fires after sheet opens or closes. |
-| scrollOnWindowOverflow | bool | true | If `true`, the sheet content will scroll when overflowing window height |
 | fullScreen | bool | false | If `true`, the sheet takes the full height of the window when open. |
 | shadowTip | bool | true | If `true`, a box shadow is displayed at sheet bottom when closed. This is used to show that content is hidden below. |
 | topShadow | bool | true | If `true`, a box shadow is displayed at sheet top border. |
 | overlay | bool | true | If `true`, an overlay is displayed behind sheet when open. A click on the overlay closes the sheet. |
-| swipeableViewsProps | object | `{}` | Props passed to SwipeableViews component. |
+| swipeableViewsProps | object | `{}` | Props passed to SwipeableViews component (see [documentation](https://github.com/oliviertassinari/react-swipeable-views#api)). |
 | style | object | `{}` | Style applied on the root (non-swiped) component. |
 | bodyStyle | object | `{}` | Style applied on the body of the bottom sheet. |
 | overlayStyle | object | `{}` | Style applied on the overlay. |

dist/react-swipeable-bottom-sheet.js

@@ -3973,7 +3973,6 @@ var SwipeableBottomSheet = (function (_Component) {
 			var _props = this.props;
 			var overflowHeight = _props.overflowHeight;
 			var fullScreen = _props.fullScreen;
-			var scrollOnWindowOverflow = _props.scrollOnWindowOverflow;
 			var open = _props.open;
 			var topShadow = _props.topShadow;
 			var shadowTip = _props.shadowTip;
@@ -4011,12 +4010,10 @@ var SwipeableBottomSheet = (function (_Component) {
 						marginBottom: overflowHeight
 					},
 					body: _extends({
-						overflow: 'hidden',
-						backgroundColor: 'white'
-					}, scrollOnWindowOverflow && {
 						overflow: isOpen ? 'auto' : 'hidden',
+						backgroundColor: 'white',
 						height: fullScreen ? this.state.height : 'initial',
-						maxHeight: fullScreen ? 'initial' : this.state.height
+						maxHeight: this.state.height
 					}, this.props.bodyStyle)
 				},
 				overlay: _extends({
@@ -4048,9 +4045,10 @@ var SwipeableBottomSheet = (function (_Component) {
 			return _react2['default'].createElement(
 				'div',
 				{ style: styles.root },
-				scrollOnWindowOverflow && _react2['default'].createElement(_HeightUpdater2['default'], {
+				_react2['default'].createElement(_HeightUpdater2['default'], {
 					height: this.state.height,
-					onHeightChange: this.onHeightChange.bind(this) }),
+					onHeightChange: this.onHeightChange.bind(this)
+				}),
 				overlay && _react2['default'].createElement('div', { style: styles.overlay, onClick: function () {
 						return _this.onChangeIndex(0);
 					} }),
@@ -4064,7 +4062,8 @@ var SwipeableBottomSheet = (function (_Component) {
 					}, this.props.swipeableViewsProps, {
 						style: styles.swiper.root,
 						containerStyle: styles.swiper.container,
-						slideStyle: styles.swiper.slide }),
+						slideStyle: styles.swiper.slide
+					}),
 					_react2['default'].createElement(
 						'div',
 						{ style: styles.swiper.body },
@@ -4092,7 +4091,6 @@ SwipeableBottomSheet.propTypes = {
 	overflowHeight: _propTypes2['default'].number,
 	overlay: _propTypes2['default'].bool,
 	overlayStyle: _propTypes2['default'].object,
-	scrollOnWindowOverflow: _propTypes2['default'].bool,
 	shadowTip: _propTypes2['default'].bool,
 	style: _propTypes2['default'].object,
 	swipeableViewsProps: _propTypes2['default'].object,
@@ -4104,7 +4102,6 @@ SwipeableBottomSheet.defaultProps = {
 	fullScreen: false,
 	overflowHeight: 0,
 	overlay: true,
-	scrollOnWindowOverflow: true,
 	shadowTip: true,
 	swipeableViewsProps: {},
 	topShadow: true

dist/react-swipeable-bottom-sheet.min.js

@@ -42,9 +42,10 @@ class App extends React.Component {
 		return (
 			<div>
 				<SwipeableBottomSheet
-				overflowHeight={64}
-				open={this.state.open}
-				onChange={this.openBottomSheet.bind(this)}>
+					overflowHeight={64}
+					open={this.state.open}
+					onChange={this.openBottomSheet.bind(this)}
+				>
 					<div style={styles.title}>
 						Controlled bottom sheet&nbsp;
 						<button onClick={this.toggleBottomSheet.bind(this)}>

example/src/controlled.js

@@ -35,13 +35,16 @@ class App extends React.Component {
 
 		return (
 			<div>
-				<button onClick={() => this.openBottomSheet(true)}>Open bottom sheet</button>
+				<button onClick={() => this.openBottomSheet(true)}>
+					Open bottom sheet
+				</button>
 				<SwipeableBottomSheet
-				open={this.state.open}
-				onChange={this.openBottomSheet.bind(this)}
-				fullScreen
-				shadowTip={false}
-				topShadow={false}>
+					open={this.state.open}
+					onChange={this.openBottomSheet.bind(this)}
+					fullScreen
+					shadowTip={false}
+					topShadow={false}
+				>
 					<div style={styles.title}>
 						Controlled fullscreen bottom sheet
 					</div>
@@ -52,7 +55,9 @@ class App extends React.Component {
 						reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
 						Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia
 						deserunt mollit anim id est laborum.<br/>
-						<button onClick={() => this.openBottomSheet(false)}>Close</button>
+						<button onClick={() => this.openBottomSheet(false)}>
+							Close
+						</button>
 					</div>
 				</SwipeableBottomSheet>
 			</div>

example/src/fullscreen.js

@@ -24,8 +24,7 @@ class App extends React.Component {
 
 		return (
 			<div>
-				<SwipeableBottomSheet
-				overflowHeight={64}>
+				<SwipeableBottomSheet overflowHeight={64}>
 					<div style={styles.title}>
 						Swipeable bottom sheet
 					</div>

example/src/uncontrolled.js

@@ -69,7 +69,6 @@ var SwipeableBottomSheet = (function (_Component) {
 			var _props = this.props;
 			var overflowHeight = _props.overflowHeight;
 			var fullScreen = _props.fullScreen;
-			var scrollOnWindowOverflow = _props.scrollOnWindowOverflow;
 			var open = _props.open;
 			var topShadow = _props.topShadow;
 			var shadowTip = _props.shadowTip;
@@ -107,12 +106,10 @@ var SwipeableBottomSheet = (function (_Component) {
 						marginBottom: overflowHeight
 					},
 					body: _extends({
-						overflow: 'hidden',
-						backgroundColor: 'white'
-					}, scrollOnWindowOverflow && {
 						overflow: isOpen ? 'auto' : 'hidden',
+						backgroundColor: 'white',
 						height: fullScreen ? this.state.height : 'initial',
-						maxHeight: fullScreen ? 'initial' : this.state.height
+						maxHeight: this.state.height
 					}, this.props.bodyStyle)
 				},
 				overlay: _extends({
@@ -144,9 +141,10 @@ var SwipeableBottomSheet = (function (_Component) {
 			return _react2['default'].createElement(
 				'div',
 				{ style: styles.root },
-				scrollOnWindowOverflow && _react2['default'].createElement(_HeightUpdater2['default'], {
+				_react2['default'].createElement(_HeightUpdater2['default'], {
 					height: this.state.height,
-					onHeightChange: this.onHeightChange.bind(this) }),
+					onHeightChange: this.onHeightChange.bind(this)
+				}),
 				overlay && _react2['default'].createElement('div', { style: styles.overlay, onClick: function () {
 						return _this.onChangeIndex(0);
 					} }),
@@ -160,7 +158,8 @@ var SwipeableBottomSheet = (function (_Component) {
 					}, this.props.swipeableViewsProps, {
 						style: styles.swiper.root,
 						containerStyle: styles.swiper.container,
-						slideStyle: styles.swiper.slide }),
+						slideStyle: styles.swiper.slide
+					}),
 					_react2['default'].createElement(
 						'div',
 						{ style: styles.swiper.body },
@@ -188,7 +187,6 @@ SwipeableBottomSheet.propTypes = {
 	overflowHeight: _propTypes2['default'].number,
 	overlay: _propTypes2['default'].bool,
 	overlayStyle: _propTypes2['default'].object,
-	scrollOnWindowOverflow: _propTypes2['default'].bool,
 	shadowTip: _propTypes2['default'].bool,
 	style: _propTypes2['default'].object,
 	swipeableViewsProps: _propTypes2['default'].object,
@@ -200,7 +198,6 @@ SwipeableBottomSheet.defaultProps = {
 	fullScreen: false,
 	overflowHeight: 0,
 	overlay: true,
-	scrollOnWindowOverflow: true,
 	shadowTip: true,
 	swipeableViewsProps: {},
 	topShadow: true

lib/SwipeableBottomSheet.js

@@ -35,7 +35,6 @@ class SwipeableBottomSheet extends Component {
 		const {
 			overflowHeight,
 			fullScreen,
-			scrollOnWindowOverflow,
 			open,
 			topShadow,
 			shadowTip,
@@ -79,13 +78,10 @@ class SwipeableBottomSheet extends Component {
 					marginBottom: overflowHeight,
 				},
 				body:{
-					overflow: 'hidden',
+					overflow: isOpen ? 'auto' : 'hidden',
 					backgroundColor: 'white',
-					...scrollOnWindowOverflow && {
-						overflow: isOpen ? 'auto' : 'hidden',
-						height: fullScreen ? this.state.height : 'initial',
-						maxHeight: fullScreen ? 'initial' : this.state.height
-					},
+					height: fullScreen ? this.state.height : 'initial',
+					maxHeight: this.state.height,
 					...this.props.bodyStyle
 				}
 			},
@@ -119,23 +115,23 @@ class SwipeableBottomSheet extends Component {
 
 		return (
 			<div style={styles.root}>
-				{scrollOnWindowOverflow &&
-					<HeightUpdater
+				<HeightUpdater
 					height={this.state.height}
-					onHeightChange={this.onHeightChange.bind(this)}/>
-				}
+					onHeightChange={this.onHeightChange.bind(this)}
+				/>
 				{overlay &&
 					<div style={styles.overlay} onClick={() => this.onChangeIndex(0)}/>
 				}
 				<SwipeableViews
-				index={index}
-				axis="y"
-				enableMouseEvents
-				onChangeIndex={this.onChangeIndex.bind(this)}
-				{...this.props.swipeableViewsProps}
-				style={styles.swiper.root}
-				containerStyle={styles.swiper.container}
-				slideStyle={styles.swiper.slide}>
+					index={index}
+					axis="y"
+					enableMouseEvents
+					onChangeIndex={this.onChangeIndex.bind(this)}
+					{...this.props.swipeableViewsProps}
+					style={styles.swiper.root}
+					containerStyle={styles.swiper.container}
+					slideStyle={styles.swiper.slide}
+				>
 					<div style={styles.swiper.body}>
 						{this.props.children}
 					</div>
@@ -159,7 +155,6 @@ SwipeableBottomSheet.propTypes = {
 	overflowHeight: PropTypes.number,
 	overlay: PropTypes.bool,
 	overlayStyle: PropTypes.object,
-	scrollOnWindowOverflow: PropTypes.bool,
 	shadowTip: PropTypes.bool,
 	style: PropTypes.object,
 	swipeableViewsProps: PropTypes.object,
@@ -171,7 +166,6 @@ SwipeableBottomSheet.defaultProps = {
 	fullScreen: false,
 	overflowHeight: 0,
 	overlay: true,
-	scrollOnWindowOverflow: true,
 	shadowTip: true,
   	swipeableViewsProps: {},
   	topShadow: true