Add scrollTopAtClose prop; Add marginTop prop; Add scrollable example; Add onTransitionEnd prop; shadows are now hidden when overflowHeight is set to 0 and sheet is closed; New release 1.1.0

Author: manufont

README.md

@@ -17,6 +17,7 @@ npm i -S react-swipeable-bottom-sheet
 - [Uncontrolled bottom sheet](http://manufont.github.io/react-swipeable-bottom-sheet/index.html)
 - [Controlled bottom sheet](http://manufont.github.io/react-swipeable-bottom-sheet/controlled.html)
 - [Fullscreen bottom sheet](http://manufont.github.io/react-swipeable-bottom-sheet/fullscreen.html)
+- [Scrollable bottom sheet](http://manufont.github.io/react-swipeable-bottom-sheet/scroll.html)
 
 
 ## Usage
@@ -32,7 +33,7 @@ import SwipeableBottomSheet from 'react-swipeable-bottom-sheet';
 </SwipeableBottomSheet>
 ```
 
-The bottom sheet's height (when open) scales automatically with its content. If it exceeds the window height, content is scrollable.
+The bottom sheet's height (when open) scales automatically with its content. If it exceeds the window height, content become scrollable.
 
 
 ### Props
@@ -43,10 +44,13 @@ The bottom sheet's height (when open) scales automatically with its content. If
 | 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. |
+| onTransitionEnd | function() | | The callback that fires after opening or closing animation. |
 | fullScreen | bool | false | If `true`, the sheet takes the full height of the window when open. |
+| marginTop | number | 0 | The top margin applied to the top of the sheet when open. Use this prop to prevent navbar overflow. |
 | 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. |
+| scrollTopAtClose | bool | true | If `true`, the content is scrolled to the top when sheet closes. |
 | 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. |

dist/react-swipeable-bottom-sheet.js

@@ -3874,7 +3874,6 @@ var HeightUpdater = (function (_Component) {
 		key: 'componentWillMount',
 		value: function componentWillMount() {
 			window.addEventListener('resize', this.onWindowResize);
-			this.onWindowResize();
 		}
 	}, {
 		key: 'componentWillUnmount',
@@ -3908,6 +3907,64 @@ Object.defineProperty(exports, '__esModule', {
 	value: true
 });
 
+var _createClass = (function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ('value' in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; })();
+
+var _get = function get(_x, _x2, _x3) { var _again = true; _function: while (_again) { var object = _x, property = _x2, receiver = _x3; _again = false; if (object === null) object = Function.prototype; var desc = Object.getOwnPropertyDescriptor(object, property); if (desc === undefined) { var parent = Object.getPrototypeOf(object); if (parent === null) { return undefined; } else { _x = parent; _x2 = property; _x3 = receiver; _again = true; desc = parent = undefined; continue _function; } } else if ('value' in desc) { return desc.value; } else { var getter = desc.get; if (getter === undefined) { return undefined; } return getter.call(receiver); } } };
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { 'default': obj }; }
+
+function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError('Cannot call a class as a function'); } }
+
+function _inherits(subClass, superClass) { if (typeof superClass !== 'function' && superClass !== null) { throw new TypeError('Super expression must either be null or a function, not ' + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass; }
+
+var _react = (typeof window !== "undefined" ? window['React'] : typeof global !== "undefined" ? global['React'] : null);
+
+var _react2 = _interopRequireDefault(_react);
+
+var _propTypes = require('prop-types');
+
+var _propTypes2 = _interopRequireDefault(_propTypes);
+
+var ScrollToTop = (function (_Component) {
+	_inherits(ScrollToTop, _Component);
+
+	function ScrollToTop() {
+		_classCallCheck(this, ScrollToTop);
+
+		_get(Object.getPrototypeOf(ScrollToTop.prototype), 'constructor', this).apply(this, arguments);
+	}
+
+	_createClass(ScrollToTop, [{
+		key: 'componentDidMount',
+		value: function componentDidMount() {
+			this.props.element().scrollTop = 0;
+		}
+	}, {
+		key: 'render',
+		value: function render() {
+			return null;
+		}
+	}]);
+
+	return ScrollToTop;
+})(_react.Component);
+
+ScrollToTop.propTypes = {
+	element: _propTypes2['default'].func.isRequired
+};
+
+exports['default'] = ScrollToTop;
+module.exports = exports['default'];
+
+}).call(this,typeof global !== "undefined" ? global : typeof self !== "undefined" ? self : typeof window !== "undefined" ? window : {})
+},{"prop-types":100}],116:[function(require,module,exports){
+(function (global){
+'use strict';
+
+Object.defineProperty(exports, '__esModule', {
+	value: true
+});
+
 var _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; };
 
 var _createClass = (function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ('value' in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; })();
@@ -3936,6 +3993,10 @@ var _HeightUpdater = require('./HeightUpdater');
 
 var _HeightUpdater2 = _interopRequireDefault(_HeightUpdater);
 
+var _ScrollToTop = require('./ScrollToTop');
+
+var _ScrollToTop2 = _interopRequireDefault(_ScrollToTop);
+
 var SwipeableBottomSheet = (function (_Component) {
 	_inherits(SwipeableBottomSheet, _Component);
 
@@ -3944,8 +4005,13 @@ var SwipeableBottomSheet = (function (_Component) {
 
 		_get(Object.getPrototypeOf(SwipeableBottomSheet.prototype), 'constructor', this).call(this, props);
 
+		this.onHeightChange = this.onHeightChange.bind(this);
+		this.onChangeIndex = this.onChangeIndex.bind(this);
+		this.onTransitionEnd = this.onTransitionEnd.bind(this);
+
 		this.state = {
-			open: props.defaultOpen
+			open: props.defaultOpen,
+			height: window.innerHeight
 		};
 	}
 
@@ -3966,22 +4032,41 @@ var SwipeableBottomSheet = (function (_Component) {
 			}
 		}
 	}, {
-		key: 'render',
-		value: function render() {
-			var _this = this;
-
+		key: 'onTransitionEnd',
+		value: function onTransitionEnd() {
 			var _props = this.props;
 			var overflowHeight = _props.overflowHeight;
-			var fullScreen = _props.fullScreen;
-			var open = _props.open;
-			var topShadow = _props.topShadow;
-			var shadowTip = _props.shadowTip;
-			var overlay = _props.overlay;
 			var swipeableViewsProps = _props.swipeableViewsProps;
 
+			if (overflowHeight === 0) {
+				this.bodyElt.scrollTop = 0;
+			}
+			if (swipeableViewsProps.onTransitionEnd) {
+				swipeableViewsProps.onTransitionEnd();
+			}
+		}
+	}, {
+		key: 'render',
+		value: function render() {
+			var _this = this;
+
+			var _props2 = this.props;
+			var overflowHeight = _props2.overflowHeight;
+			var fullScreen = _props2.fullScreen;
+			var marginTop = _props2.marginTop;
+			var open = _props2.open;
+			var topShadow = _props2.topShadow;
+			var shadowTip = _props2.shadowTip;
+			var overlay = _props2.overlay;
+			var swipeableViewsProps = _props2.swipeableViewsProps;
+			var scrollTopAtClose = _props2.scrollTopAtClose;
+
+			var hiddenWhenClosed = overflowHeight === 0;
 			var isControlled = open !== undefined;
 			var isOpen = isControlled ? open : this.state.open;
+			var hideShadows = hiddenWhenClosed && !isOpen;
 			var index = isOpen ? 1 : 0;
+			var maxHeight = this.state.height - marginTop;
 
 			var styles = {
 				root: _extends({
@@ -3998,7 +4083,7 @@ var SwipeableBottomSheet = (function (_Component) {
 					}, swipeableViewsProps.style),
 					container: _extends({
 						boxSizing: 'border-box'
-					}, topShadow && {
+					}, topShadow && !hideShadows && {
 						boxShadow: 'rgba(0, 0, 0, 0.156863) 0px -6px 5px'
 					}, swipeableViewsProps.containerStyle),
 					slide: _extends({
@@ -4012,16 +4097,16 @@ var SwipeableBottomSheet = (function (_Component) {
 					body: _extends({
 						overflow: isOpen ? 'auto' : 'hidden',
 						backgroundColor: 'white',
-						height: fullScreen ? this.state.height : 'initial',
-						maxHeight: this.state.height
+						height: fullScreen ? maxHeight : 'initial',
+						maxHeight: maxHeight
 					}, this.props.bodyStyle)
 				},
 				overlay: _extends({
 					position: 'fixed',
-					height: '100vh',
-					width: '100vw',
 					top: 0,
 					right: 0,
+					left: 0,
+					height: this.state.height,
 					transition: 'opacity 450ms',
 					pointerEvents: 'none',
 					backgroundColor: 'black',
@@ -4047,7 +4132,7 @@ var SwipeableBottomSheet = (function (_Component) {
 				{ style: styles.root },
 				_react2['default'].createElement(_HeightUpdater2['default'], {
 					height: this.state.height,
-					onHeightChange: this.onHeightChange.bind(this)
+					onHeightChange: this.onHeightChange
 				}),
 				overlay && _react2['default'].createElement('div', { style: styles.overlay, onClick: function () {
 						return _this.onChangeIndex(0);
@@ -4058,20 +4143,26 @@ var SwipeableBottomSheet = (function (_Component) {
 						index: index,
 						axis: 'y',
 						enableMouseEvents: true,
-						onChangeIndex: this.onChangeIndex.bind(this)
+						onChangeIndex: this.onChangeIndex
 					}, this.props.swipeableViewsProps, {
+						onTransitionEnd: this.onTransitionEnd,
 						style: styles.swiper.root,
 						containerStyle: styles.swiper.container,
 						slideStyle: styles.swiper.slide
 					}),
 					_react2['default'].createElement(
 						'div',
-						{ style: styles.swiper.body },
+						{ style: styles.swiper.body, ref: function (elt) {
+								return _this.bodyElt = elt;
+							} },
 						this.props.children
 					),
 					_react2['default'].createElement('div', { style: styles.swiper.bottomSlide })
 				),
-				shadowTip && _react2['default'].createElement('div', { style: styles.shadowTip })
+				shadowTip && !hideShadows && _react2['default'].createElement('div', { style: styles.shadowTip }),
+				!isOpen && scrollTopAtClose && !hiddenWhenClosed && _react2['default'].createElement(_ScrollToTop2['default'], { element: function () {
+						return _this.bodyElt;
+					} })
 			);
 		}
 	}]);
@@ -4086,11 +4177,14 @@ SwipeableBottomSheet.propTypes = {
 	children: _propTypes2['default'].node.isRequired,
 	defaultOpen: _propTypes2['default'].bool,
 	fullScreen: _propTypes2['default'].bool,
+	marginTop: _propTypes2['default'].number,
 	onChange: _propTypes2['default'].func,
+	onTransitionEnd: _propTypes2['default'].func,
 	open: _propTypes2['default'].bool,
 	overflowHeight: _propTypes2['default'].number,
 	overlay: _propTypes2['default'].bool,
 	overlayStyle: _propTypes2['default'].object,
+	scrollTopAtClose: _propTypes2['default'].bool,
 	shadowTip: _propTypes2['default'].bool,
 	style: _propTypes2['default'].object,
 	swipeableViewsProps: _propTypes2['default'].object,
@@ -4100,8 +4194,10 @@ SwipeableBottomSheet.propTypes = {
 SwipeableBottomSheet.defaultProps = {
 	defaultOpen: false,
 	fullScreen: false,
+	marginTop: 0,
 	overflowHeight: 0,
 	overlay: true,
+	scrollTopAtClose: true,
 	shadowTip: true,
 	swipeableViewsProps: {},
 	topShadow: true
@@ -4111,5 +4207,5 @@ exports['default'] = SwipeableBottomSheet;
 module.exports = exports['default'];
 
 }).call(this,typeof global !== "undefined" ? global : typeof self !== "undefined" ? self : typeof window !== "undefined" ? window : {})
-},{"./HeightUpdater":114,"prop-types":100,"react-swipeable-views":112}]},{},[115])(115)
+},{"./HeightUpdater":114,"./ScrollToTop":115,"prop-types":100,"react-swipeable-views":112}]},{},[116])(116)
 });

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

@@ -12,8 +12,10 @@ <h2><a href="https://github.com/manufont/react-swipeable-bottom-sheet">View proj
 		<div id="app"></div>
 		<div class="hint">
 			This example shows a controlled Swipeable Bottom Sheet.<br/>
+			<a href="https://github.com/manufont/react-swipeable-bottom-sheet/blob/master/example/src/controlled.js">Show me the code</a><br/><br/>
 			<a href="index.html">See uncontrolled example</a><br/>
-			<a href="fullscreen.html">See fullscreen example</a>
+			<a href="fullscreen.html">See fullscreen example</a><br/>
+			<a href="scroll.html">See scrollable example</a>
 		</div>
 	</div>
 	<script src="common.js"></script>

example/src/controlled.html

@@ -12,9 +12,10 @@ <h2><a href="https://github.com/manufont/react-swipeable-bottom-sheet">View proj
 		<div id="app"></div>
 		<div class="hint">
 			This example shows a fullscreen, controlled Swipeable Bottom Sheet.<br/>
-			BottomTip is disabled and no overflow height is specified.<br/>
+			<a href="https://github.com/manufont/react-swipeable-bottom-sheet/blob/master/example/src/fullscreen.js">Show me the code</a><br/><br/>
 			<a href="index.html">See uncontrolled example</a><br/>
-			<a href="controlled.html">See controlled example</a>
+			<a href="controlled.html">See controlled example</a><br/>
+			<a href="scroll.html">See scrollable example</a>
 		</div>
 	</div>
 	<script src="common.js"></script>

example/src/fullscreen.html

@@ -42,11 +42,9 @@ class App extends React.Component {
 					open={this.state.open}
 					onChange={this.openBottomSheet.bind(this)}
 					fullScreen
-					shadowTip={false}
-					topShadow={false}
 				>
 					<div style={styles.title}>
-						Controlled fullscreen bottom sheet
+						Fullscreen bottom sheet
 					</div>
 					<div style={styles.text}>
 						Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et

example/src/fullscreen.js

@@ -13,8 +13,10 @@ <h2><a href="https://github.com/manufont/react-swipeable-bottom-sheet">View proj
 		<div class="hint">
 			This example shows a basic, uncontrolled Swipeable Bottom Sheet.<br/>
 			Here, the bottom sheet height scales automatically with its content.<br/>
+			<a href="https://github.com/manufont/react-swipeable-bottom-sheet/blob/master/example/src/uncontrolled.js">Show me the code</a><br/><br/>
 			<a href="controlled.html">See controlled example</a><br/>
-			<a href="fullscreen.html">See fullscreen example</a>
+			<a href="fullscreen.html">See fullscreen example</a><br/>
+			<a href="scroll.html">See scrollable example</a>
 		</div>
 	</div>
 	<script src="common.js"></script>

example/src/index.html

@@ -0,0 +1,24 @@
+<!doctype html>
+<head>
+	<title>Swipeable Bottom Sheet</title>
+	<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
+	<link rel="stylesheet" href="example.css">
+</head>
+<body>
+	<div class="container">
+		<h1>Swipeable Bottom Sheet</h1>
+		<h2><a href="https://github.com/manufont/react-swipeable-bottom-sheet">View project on GitHub</a></h2>
+		<!-- the example app is rendered into this div -->
+		<div id="app"></div>
+		<div class="hint">
+			This example shows how large content overflows the bottom sheet. Here, a margin is applied to the top of the sheet using <i>marginTop</i> prop.<br/>
+			<a href="https://github.com/manufont/react-swipeable-bottom-sheet/blob/master/example/src/scroll.js">Show me the code</a><br/><br/>
+			<a href="index.html">See uncontrolled example</a><br/>
+			<a href="controlled.html">See controlled example</a><br/>
+			<a href="fullscreen.html">See fullscreen example</a>
+		</div>
+	</div>
+	<script src="common.js"></script>
+	<script src="bundle.js"></script>
+	<script src="scroll.js"></script>
+</body>