├── .editorconfig
├── .eslintignore
├── .eslintrc
├── .gitignore
├── LICENSE
├── README.md
├── bower.json
├── demos
    └── swipeable-bottom-sheet.gif
├── dist
    ├── react-swipeable-bottom-sheet.js
    └── react-swipeable-bottom-sheet.min.js
├── example
    └── src
    │   ├── .gitignore
    │   ├── controlled.html
    │   ├── controlled.js
    │   ├── example.less
    │   ├── fullscreen.html
    │   ├── fullscreen.js
    │   ├── index.html
    │   ├── scroll.html
    │   ├── scroll.js
    │   └── uncontrolled.js
├── gulpfile.js
├── lib
    ├── HeightUpdater.js
    ├── ScrollToTop.js
    └── SwipeableBottomSheet.js
├── package-lock.json
├── package.json
└── src
    ├── HeightUpdater.js
    ├── ScrollToTop.js
    └── SwipeableBottomSheet.js


/.editorconfig:
--------------------------------------------------------------------------------
 1 | # This file is for unifying the coding style for different editors and IDEs
 2 | # editorconfig.org
 3 | root = true
 4 | 
 5 | [*]
 6 | end_of_line = lf
 7 | charset = utf-8
 8 | trim_trailing_whitespace = false
 9 | insert_final_newline = true
10 | indent_style = tab
11 | 
12 | [*.json]
13 | indent_style = space
14 | indent_size = 2
15 | 


--------------------------------------------------------------------------------
/.eslintignore:
--------------------------------------------------------------------------------
1 | .publish/*
2 | dist/*
3 | example/dist/*
4 | lib/*
5 | node_modules/*
6 | 


--------------------------------------------------------------------------------
/.eslintrc:
--------------------------------------------------------------------------------
 1 | {
 2 | 	"parser": "babel-eslint",
 3 | 	"env": {
 4 | 		"browser": true,
 5 | 		"node": true
 6 | 	},
 7 | 	"plugins": [
 8 | 		"react"
 9 | 	],
10 | 	"rules": {
11 | 		"curly": [2, "multi-line"],
12 | 		"quotes": [2, "single", "avoid-escape"],
13 | 		"react/display-name": 0,
14 | 		"react/jsx-boolean-value": 1,
15 | 		"react/jsx-quotes": 1,
16 | 		"react/jsx-no-undef": 1,
17 | 		"react/jsx-sort-props": 0,
18 | 		"react/jsx-sort-prop-types": 1,
19 | 		"react/jsx-uses-react": 1,
20 | 		"react/jsx-uses-vars": 1,
21 | 		"react/no-did-mount-set-state": 1,
22 | 		"react/no-did-update-set-state": 1,
23 | 		"react/no-multi-comp": 1,
24 | 		"react/no-unknown-property": 1,
25 | 		"react/prop-types": 1,
26 | 		"react/react-in-jsx-scope": 1,
27 | 		"react/self-closing-comp": 1,
28 | 		"react/wrap-multilines": 1,
29 | 		"semi": 2,
30 | 		"strict": 0
31 | 	}
32 | }
33 | 


--------------------------------------------------------------------------------
/.gitignore:
--------------------------------------------------------------------------------
 1 | # Logs
 2 | logs
 3 | *.log
 4 | 
 5 | # Runtime data
 6 | pids
 7 | *.pid
 8 | *.seed
 9 | 
10 | # Coverage tools
11 | lib-cov
12 | coverage
13 | coverage.html
14 | .cover*
15 | 
16 | # Dependency directory
17 | node_modules
18 | 
19 | # Example build directory
20 | example/dist
21 | .publish
22 | 
23 | # Editor and other tmp files
24 | *.swp
25 | *.un~
26 | *.iml
27 | *.ipr
28 | *.iws
29 | *.sublime-*
30 | .idea/
31 | *.DS_Store
32 | 


--------------------------------------------------------------------------------
/LICENSE:
--------------------------------------------------------------------------------
 1 | MIT License
 2 | 
 3 | Copyright (c) 2017 manufont
 4 | 
 5 | Permission is hereby granted, free of charge, to any person obtaining a copy
 6 | of this software and associated documentation files (the "Software"), to deal
 7 | in the Software without restriction, including without limitation the rights
 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
 9 | copies of the Software, and to permit persons to whom the Software is
10 | furnished to do so, subject to the following conditions:
11 | 
12 | The above copyright notice and this permission notice shall be included in all
13 | copies or substantial portions of the Software.
14 | 
15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
21 | SOFTWARE.
22 | 


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
 1 | # Swipeable Bottom Sheet
 2 | 
 3 | A swipeable material's bottom sheet implementation, that uses [react-swipeable-views](https://github.com/oliviertassinari/react-swipeable-views).
 4 | This can be used to reproduce Material Design's [Bottom Sheet](https://material.io/guidelines/components/bottom-sheets.html) guidelines
 5 | 
 6 | ![Alt text](demos/swipeable-bottom-sheet.gif?raw=true "Uncontrolled example")
 7 | 
 8 | ## Installation
 9 | 
10 | 
11 | ```
12 | npm i -S react-swipeable-bottom-sheet
13 | ```
14 | 
15 | ## Demo & Examples
16 | 
17 | - [Uncontrolled bottom sheet](http://manufont.github.io/react-swipeable-bottom-sheet/index.html)
18 | - [Controlled bottom sheet](http://manufont.github.io/react-swipeable-bottom-sheet/controlled.html)
19 | - [Fullscreen bottom sheet](http://manufont.github.io/react-swipeable-bottom-sheet/fullscreen.html)
20 | - [Scrollable bottom sheet](http://manufont.github.io/react-swipeable-bottom-sheet/scroll.html)
21 | 
22 | 
23 | ## Usage
24 | 
25 | 
26 | ```
27 | import SwipeableBottomSheet from 'react-swipeable-bottom-sheet';
28 | 
29 | <SwipeableBottomSheet overflowHeight={64}>
30 | 	<div style={{ height: '240px' }}>
31 | 		Here goes the content of your bottom sheet
32 | 	</div>
33 | </SwipeableBottomSheet>
34 | ```
35 | 
36 | The bottom sheet's height (when open) scales automatically with its content. If it exceeds the window height, content become scrollable.
37 | 
38 | 
39 | ### Props
40 | 
41 | | Name | Type | Default | Description |
42 | |:-----|:-----|:--------|:------------|
43 | | overflowHeight | number | 0 | The height (in px) of the sheet when closed. |
44 | | open | bool | | Use this property to enable controlled mode. If `true`, it will open the sheet. |
45 | | defaultOpen | bool | false | If `true`, the sheet is open at component mount. |
46 | | onChange | function(isOpen) | | The callback that fires after sheet opens or closes. |
47 | | onTransitionEnd | function() | | The callback that fires after opening or closing animation. |
48 | | fullScreen | bool | false | If `true`, the sheet takes the full height of the window when open. |
49 | | marginTop | number | 0 | The top margin applied to the top of the sheet when open. Use this prop to prevent navbar overflow. |
50 | | 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. |
51 | | topShadow | bool | true | If `true`, a box shadow is displayed at sheet top border. |
52 | | overlay | bool | true | If `true`, an overlay is displayed behind sheet when open. A click on the overlay closes the sheet. |
53 | | scrollTopAtClose | bool | true | If `true`, the content is scrolled to the top when sheet closes. |
54 | | swipeableViewsProps | object | `{}` | Props passed to SwipeableViews component (see [documentation](https://github.com/oliviertassinari/react-swipeable-views#api)). |
55 | | style | object | `{}` | Style applied on the root (non-swiped) component. |
56 | | bodyStyle | object | `{}` | Style applied on the body of the bottom sheet. |
57 | | overlayStyle | object | `{}` | Style applied on the overlay. |
58 | 
59 | 
60 | ## Development (`src`, `lib` and the build process)
61 | 
62 | **NOTE:** The source code for the component is in `src`. A transpiled CommonJS version (generated with Babel) is available in `lib` for use with node.js, browserify and webpack. A UMD bundle is also built to `dist`, which can be included without the need for any build system.
63 | 
64 | To build the examples locally, run:
65 | 
66 | ```
67 | npm install
68 | npm start
69 | ```
70 | 
71 | Then open [`localhost:8000`](http://localhost:8000) in a browser.
72 | 
73 | To build, watch and serve the examples (which will also watch the component source), run `npm start`. If you just want to watch changes to `src` and rebuild `lib`, run `npm run watch` (this is useful if you are working with `npm link`).
74 | 
75 | ## License
76 | 
77 | MIT
78 | 


--------------------------------------------------------------------------------
/bower.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "react-swipeable-bottom-sheet",
 3 |   "version": "0.0.0",
 4 |   "description": "Swipeable Bottom Sheet",
 5 |   "main": "dist/react-swipeable-bottom-sheet.min.js",
 6 |   "homepage": "https://github.com/manufont/react-swipeable-bottom-sheet",
 7 |   "authors": [
 8 |     "Emmanuel Fonteneau"
 9 |   ],
10 |   "moduleType": [
11 |     "amd",
12 |     "globals",
13 |     "node"
14 |   ],
15 |   "keywords": [
16 |     "react",
17 |     "react-component"
18 |   ],
19 |   "license": "MIT",
20 |   "ignore": [
21 |     ".editorconfig",
22 |     ".gitignore",
23 |     "package.json",
24 |     "src",
25 |     "node_modules",
26 |     "example",
27 |     "test"
28 |   ]
29 | }
30 | 


--------------------------------------------------------------------------------
/demos/swipeable-bottom-sheet.gif:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/manufont/react-swipeable-bottom-sheet/f27cfdf4aa021052e90ba2a8599ea8791700c8d0/demos/swipeable-bottom-sheet.gif


--------------------------------------------------------------------------------
/dist/react-swipeable-bottom-sheet.min.js:
--------------------------------------------------------------------------------
1 | !function(e){if("object"==typeof exports&&"undefined"!=typeof module)module.exports=e();else if("function"==typeof define&&define.amd)define([],e);else{var t;t="undefined"!=typeof window?window:"undefined"!=typeof global?global:"undefined"!=typeof self?self:this,t.SwipeableBottomSheet=e()}}(function(){return function e(t,n,o){function r(a,s){if(!n[a]){if(!t[a]){var u="function"==typeof require&&require;if(!s&&u)return u(a,!0);if(i)return i(a,!0);var c=new Error("Cannot find module '"+a+"'");throw c.code="MODULE_NOT_FOUND",c}var l=n[a]={exports:{}};t[a][0].call(l.exports,function(e){var n=t[a][1][e];return r(n?n:e)},l,l.exports,e,t,n,o)}return n[a].exports}for(var i="function"==typeof require&&require,a=0;a<o.length;a++)r(o[a]);return r}({1:[function(e,t,n){t.exports={"default":e("core-js/library/fn/object/assign"),__esModule:!0}},{"core-js/library/fn/object/assign":15}],2:[function(e,t,n){t.exports={"default":e("core-js/library/fn/object/create"),__esModule:!0}},{"core-js/library/fn/object/create":16}],3:[function(e,t,n){t.exports={"default":e("core-js/library/fn/object/define-property"),__esModule:!0}},{"core-js/library/fn/object/define-property":17}],4:[function(e,t,n){t.exports={"default":e("core-js/library/fn/object/get-prototype-of"),__esModule:!0}},{"core-js/library/fn/object/get-prototype-of":18}],5:[function(e,t,n){t.exports={"default":e("core-js/library/fn/object/set-prototype-of"),__esModule:!0}},{"core-js/library/fn/object/set-prototype-of":19}],6:[function(e,t,n){t.exports={"default":e("core-js/library/fn/symbol"),__esModule:!0}},{"core-js/library/fn/symbol":20}],7:[function(e,t,n){t.exports={"default":e("core-js/library/fn/symbol/iterator"),__esModule:!0}},{"core-js/library/fn/symbol/iterator":21}],8:[function(e,t,n){"use strict";n.__esModule=!0,n["default"]=function(e,t){if(!(e instanceof t))throw new TypeError("Cannot call a class as a function")}},{}],9:[function(e,t,n){"use strict";function o(e){return e&&e.__esModule?e:{"default":e}}n.__esModule=!0;var r=e("../core-js/object/define-property"),i=o(r);n["default"]=function(){function e(e,t){for(var n=0;n<t.length;n++){var o=t[n];o.enumerable=o.enumerable||!1,o.configurable=!0,"value"in o&&(o.writable=!0),(0,i["default"])(e,o.key,o)}}return function(t,n,o){return n&&e(t.prototype,n),o&&e(t,o),t}}()},{"../core-js/object/define-property":3}],10:[function(e,t,n){"use strict";function o(e){return e&&e.__esModule?e:{"default":e}}n.__esModule=!0;var r=e("../core-js/object/assign"),i=o(r);n["default"]=i["default"]||function(e){for(var t=1;t<arguments.length;t++){var n=arguments[t];for(var o in n)Object.prototype.hasOwnProperty.call(n,o)&&(e[o]=n[o])}return e}},{"../core-js/object/assign":1}],11:[function(e,t,n){"use strict";function o(e){return e&&e.__esModule?e:{"default":e}}n.__esModule=!0;var r=e("../core-js/object/set-prototype-of"),i=o(r),a=e("../core-js/object/create"),s=o(a),u=e("../helpers/typeof"),c=o(u);n["default"]=function(e,t){if("function"!=typeof t&&null!==t)throw new TypeError("Super expression must either be null or a function, not "+("undefined"==typeof t?"undefined":(0,c["default"])(t)));e.prototype=(0,s["default"])(t&&t.prototype,{constructor:{value:e,enumerable:!1,writable:!0,configurable:!0}}),t&&(i["default"]?(0,i["default"])(e,t):e.__proto__=t)}},{"../core-js/object/create":2,"../core-js/object/set-prototype-of":5,"../helpers/typeof":14}],12:[function(e,t,n){"use strict";n.__esModule=!0,n["default"]=function(e,t){var n={};for(var o in e)t.indexOf(o)>=0||Object.prototype.hasOwnProperty.call(e,o)&&(n[o]=e[o]);return n}},{}],13:[function(e,t,n){"use strict";function o(e){return e&&e.__esModule?e:{"default":e}}n.__esModule=!0;var r=e("../helpers/typeof"),i=o(r);n["default"]=function(e,t){if(!e)throw new ReferenceError("this hasn't been initialised - super() hasn't been called");return!t||"object"!==("undefined"==typeof t?"undefined":(0,i["default"])(t))&&"function"!=typeof t?e:t}},{"../helpers/typeof":14}],14:[function(e,t,n){"use strict";function o(e){return e&&e.__esModule?e:{"default":e}}n.__esModule=!0;var r=e("../core-js/symbol/iterator"),i=o(r),a=e("../core-js/symbol"),s=o(a),u="function"==typeof s["default"]&&"symbol"==typeof i["default"]?function(e){return typeof e}:function(e){return e&&"function"==typeof s["default"]&&e.constructor===s["default"]&&e!==s["default"].prototype?"symbol":typeof e};n["default"]="function"==typeof s["default"]&&"symbol"===u(i["default"])?function(e){return"undefined"==typeof e?"undefined":u(e)}:function(e){return e&&"function"==typeof s["default"]&&e.constructor===s["default"]&&e!==s["default"].prototype?"symbol":"undefined"==typeof e?"undefined":u(e)}},{"../core-js/symbol":6,"../core-js/symbol/iterator":7}],15:[function(e,t,n){e("../../modules/es6.object.assign"),t.exports=e("../../modules/_core").Object.assign},{"../../modules/_core":27,"../../modules/es6.object.assign":81}],16:[function(e,t,n){e("../../modules/es6.object.create");var o=e("../../modules/_core").Object;t.exports=function(e,t){return o.create(e,t)}},{"../../modules/_core":27,"../../modules/es6.object.create":82}],17:[function(e,t,n){e("../../modules/es6.object.define-property");var o=e("../../modules/_core").Object;t.exports=function(e,t,n){return o.defineProperty(e,t,n)}},{"../../modules/_core":27,"../../modules/es6.object.define-property":83}],18:[function(e,t,n){e("../../modules/es6.object.get-prototype-of"),t.exports=e("../../modules/_core").Object.getPrototypeOf},{"../../modules/_core":27,"../../modules/es6.object.get-prototype-of":84}],19:[function(e,t,n){e("../../modules/es6.object.set-prototype-of"),t.exports=e("../../modules/_core").Object.setPrototypeOf},{"../../modules/_core":27,"../../modules/es6.object.set-prototype-of":85}],20:[function(e,t,n){e("../../modules/es6.symbol"),e("../../modules/es6.object.to-string"),e("../../modules/es7.symbol.async-iterator"),e("../../modules/es7.symbol.observable"),t.exports=e("../../modules/_core").Symbol},{"../../modules/_core":27,"../../modules/es6.object.to-string":86,"../../modules/es6.symbol":88,"../../modules/es7.symbol.async-iterator":89,"../../modules/es7.symbol.observable":90}],21:[function(e,t,n){e("../../modules/es6.string.iterator"),e("../../modules/web.dom.iterable"),t.exports=e("../../modules/_wks-ext").f("iterator")},{"../../modules/_wks-ext":78,"../../modules/es6.string.iterator":87,"../../modules/web.dom.iterable":91}],22:[function(e,t,n){t.exports=function(e){if("function"!=typeof e)throw TypeError(e+" is not a function!");return e}},{}],23:[function(e,t,n){t.exports=function(){}},{}],24:[function(e,t,n){var o=e("./_is-object");t.exports=function(e){if(!o(e))throw TypeError(e+" is not an object!");return e}},{"./_is-object":43}],25:[function(e,t,n){var o=e("./_to-iobject"),r=e("./_to-length"),i=e("./_to-absolute-index");t.exports=function(e){return function(t,n,a){var s,u=o(t),c=r(u.length),l=i(a,c);if(e&&n!=n){for(;c>l;)if(s=u[l++],s!=s)return!0}else for(;c>l;l++)if((e||l in u)&&u[l]===n)return e||l||0;return!e&&-1}}},{"./_to-absolute-index":70,"./_to-iobject":72,"./_to-length":73}],26:[function(e,t,n){var o={}.toString;t.exports=function(e){return o.call(e).slice(8,-1)}},{}],27:[function(e,t,n){var o=t.exports={version:"2.5.1"};"number"==typeof __e&&(__e=o)},{}],28:[function(e,t,n){var o=e("./_a-function");t.exports=function(e,t,n){if(o(e),void 0===t)return e;switch(n){case 1:return function(n){return e.call(t,n)};case 2:return function(n,o){return e.call(t,n,o)};case 3:return function(n,o,r){return e.call(t,n,o,r)}}return function(){return e.apply(t,arguments)}}},{"./_a-function":22}],29:[function(e,t,n){t.exports=function(e){if(void 0==e)throw TypeError("Can't call method on  "+e);return e}},{}],30:[function(e,t,n){t.exports=!e("./_fails")(function(){return 7!=Object.defineProperty({},"a",{get:function(){return 7}}).a})},{"./_fails":35}],31:[function(e,t,n){var o=e("./_is-object"),r=e("./_global").document,i=o(r)&&o(r.createElement);t.exports=function(e){return i?r.createElement(e):{}}},{"./_global":36,"./_is-object":43}],32:[function(e,t,n){t.exports="constructor,hasOwnProperty,isPrototypeOf,propertyIsEnumerable,toLocaleString,toString,valueOf".split(",")},{}],33:[function(e,t,n){var o=e("./_object-keys"),r=e("./_object-gops"),i=e("./_object-pie");t.exports=function(e){var t=o(e),n=r.f;if(n)for(var a,s=n(e),u=i.f,c=0;s.length>c;)u.call(e,a=s[c++])&&t.push(a);return t}},{"./_object-gops":57,"./_object-keys":60,"./_object-pie":61}],34:[function(e,t,n){var o=e("./_global"),r=e("./_core"),i=e("./_ctx"),a=e("./_hide"),s="prototype",u=function(e,t,n){var c,l,f,d=e&u.F,p=e&u.G,h=e&u.S,b=e&u.P,y=e&u.B,v=e&u.W,_=p?r:r[t]||(r[t]={}),g=_[s],m=p?o:h?o[t]:(o[t]||{})[s];p&&(n=t);for(c in n)l=!d&&m&&void 0!==m[c],l&&c in _||(f=l?m[c]:n[c],_[c]=p&&"function"!=typeof m[c]?n[c]:y&&l?i(f,o):v&&m[c]==f?function(e){var t=function(t,n,o){if(this instanceof e){switch(arguments.length){case 0:return new e;case 1:return new e(t);case 2:return new e(t,n)}return new e(t,n,o)}return e.apply(this,arguments)};return t[s]=e[s],t}(f):b&&"function"==typeof f?i(Function.call,f):f,b&&((_.virtual||(_.virtual={}))[c]=f,e&u.R&&g&&!g[c]&&a(g,c,f)))};u.F=1,u.G=2,u.S=4,u.P=8,u.B=16,u.W=32,u.U=64,u.R=128,t.exports=u},{"./_core":27,"./_ctx":28,"./_global":36,"./_hide":38}],35:[function(e,t,n){t.exports=function(e){try{return!!e()}catch(t){return!0}}},{}],36:[function(e,t,n){var o=t.exports="undefined"!=typeof window&&window.Math==Math?window:"undefined"!=typeof self&&self.Math==Math?self:Function("return this")();"number"==typeof __g&&(__g=o)},{}],37:[function(e,t,n){var o={}.hasOwnProperty;t.exports=function(e,t){return o.call(e,t)}},{}],38:[function(e,t,n){var o=e("./_object-dp"),r=e("./_property-desc");t.exports=e("./_descriptors")?function(e,t,n){return o.f(e,t,r(1,n))}:function(e,t,n){return e[t]=n,e}},{"./_descriptors":30,"./_object-dp":52,"./_property-desc":63}],39:[function(e,t,n){var o=e("./_global").document;t.exports=o&&o.documentElement},{"./_global":36}],40:[function(e,t,n){t.exports=!e("./_descriptors")&&!e("./_fails")(function(){return 7!=Object.defineProperty(e("./_dom-create")("div"),"a",{get:function(){return 7}}).a})},{"./_descriptors":30,"./_dom-create":31,"./_fails":35}],41:[function(e,t,n){var o=e("./_cof");t.exports=Object("z").propertyIsEnumerable(0)?Object:function(e){return"String"==o(e)?e.split(""):Object(e)}},{"./_cof":26}],42:[function(e,t,n){var o=e("./_cof");t.exports=Array.isArray||function(e){return"Array"==o(e)}},{"./_cof":26}],43:[function(e,t,n){t.exports=function(e){return"object"==typeof e?null!==e:"function"==typeof e}},{}],44:[function(e,t,n){"use strict";var o=e("./_object-create"),r=e("./_property-desc"),i=e("./_set-to-string-tag"),a={};e("./_hide")(a,e("./_wks")("iterator"),function(){return this}),t.exports=function(e,t,n){e.prototype=o(a,{next:r(1,n)}),i(e,t+" Iterator")}},{"./_hide":38,"./_object-create":51,"./_property-desc":63,"./_set-to-string-tag":66,"./_wks":79}],45:[function(e,t,n){"use strict";var o=e("./_library"),r=e("./_export"),i=e("./_redefine"),a=e("./_hide"),s=e("./_has"),u=e("./_iterators"),c=e("./_iter-create"),l=e("./_set-to-string-tag"),f=e("./_object-gpo"),d=e("./_wks")("iterator"),p=!([].keys&&"next"in[].keys()),h="@@iterator",b="keys",y="values",v=function(){return this};t.exports=function(e,t,n,_,g,m,w){c(n,t,_);var j,x,S,O=function(e){if(!p&&e in M)return M[e];switch(e){case b:return function(){return new n(this,e)};case y:return function(){return new n(this,e)}}return function(){return new n(this,e)}},T=t+" Iterator",E=g==y,k=!1,M=e.prototype,P=M[d]||M[h]||g&&M[g],C=P||O(g),L=g?E?O("entries"):C:void 0,N="Array"==t?M.entries||P:P;if(N&&(S=f(N.call(new e)),S!==Object.prototype&&S.next&&(l(S,T,!0),o||s(S,d)||a(S,d,v))),E&&P&&P.name!==y&&(k=!0,C=function(){return P.call(this)}),o&&!w||!p&&!k&&M[d]||a(M,d,C),u[t]=C,u[T]=v,g)if(j={values:E?C:O(y),keys:m?C:O(b),entries:L},w)for(x in j)x in M||i(M,x,j[x]);else r(r.P+r.F*(p||k),t,j);return j}},{"./_export":34,"./_has":37,"./_hide":38,"./_iter-create":44,"./_iterators":47,"./_library":48,"./_object-gpo":58,"./_redefine":64,"./_set-to-string-tag":66,"./_wks":79}],46:[function(e,t,n){t.exports=function(e,t){return{value:t,done:!!e}}},{}],47:[function(e,t,n){t.exports={}},{}],48:[function(e,t,n){t.exports=!0},{}],49:[function(e,t,n){var o=e("./_uid")("meta"),r=e("./_is-object"),i=e("./_has"),a=e("./_object-dp").f,s=0,u=Object.isExtensible||function(){return!0},c=!e("./_fails")(function(){return u(Object.preventExtensions({}))}),l=function(e){a(e,o,{value:{i:"O"+ ++s,w:{}}})},f=function(e,t){if(!r(e))return"symbol"==typeof e?e:("string"==typeof e?"S":"P")+e;if(!i(e,o)){if(!u(e))return"F";if(!t)return"E";l(e)}return e[o].i},d=function(e,t){if(!i(e,o)){if(!u(e))return!0;if(!t)return!1;l(e)}return e[o].w},p=function(e){return c&&h.NEED&&u(e)&&!i(e,o)&&l(e),e},h=t.exports={KEY:o,NEED:!1,fastKey:f,getWeak:d,onFreeze:p}},{"./_fails":35,"./_has":37,"./_is-object":43,"./_object-dp":52,"./_uid":76}],50:[function(e,t,n){"use strict";var o=e("./_object-keys"),r=e("./_object-gops"),i=e("./_object-pie"),a=e("./_to-object"),s=e("./_iobject"),u=Object.assign;t.exports=!u||e("./_fails")(function(){var e={},t={},n=Symbol(),o="abcdefghijklmnopqrst";return e[n]=7,o.split("").forEach(function(e){t[e]=e}),7!=u({},e)[n]||Object.keys(u({},t)).join("")!=o})?function(e,t){for(var n=a(e),u=arguments.length,c=1,l=r.f,f=i.f;u>c;)for(var d,p=s(arguments[c++]),h=l?o(p).concat(l(p)):o(p),b=h.length,y=0;b>y;)f.call(p,d=h[y++])&&(n[d]=p[d]);return n}:u},{"./_fails":35,"./_iobject":41,"./_object-gops":57,"./_object-keys":60,"./_object-pie":61,"./_to-object":74}],51:[function(e,t,n){var o=e("./_an-object"),r=e("./_object-dps"),i=e("./_enum-bug-keys"),a=e("./_shared-key")("IE_PROTO"),s=function(){},u="prototype",c=function(){var t,n=e("./_dom-create")("iframe"),o=i.length,r="<",a=">";for(n.style.display="none",e("./_html").appendChild(n),n.src="javascript:",t=n.contentWindow.document,t.open(),t.write(r+"script"+a+"document.F=Object"+r+"/script"+a),t.close(),c=t.F;o--;)delete c[u][i[o]];return c()};t.exports=Object.create||function(e,t){var n;return null!==e?(s[u]=o(e),n=new s,s[u]=null,n[a]=e):n=c(),void 0===t?n:r(n,t)}},{"./_an-object":24,"./_dom-create":31,"./_enum-bug-keys":32,"./_html":39,"./_object-dps":53,"./_shared-key":67}],52:[function(e,t,n){var o=e("./_an-object"),r=e("./_ie8-dom-define"),i=e("./_to-primitive"),a=Object.defineProperty;n.f=e("./_descriptors")?Object.defineProperty:function(e,t,n){if(o(e),t=i(t,!0),o(n),r)try{return a(e,t,n)}catch(s){}if("get"in n||"set"in n)throw TypeError("Accessors not supported!");return"value"in n&&(e[t]=n.value),e}},{"./_an-object":24,"./_descriptors":30,"./_ie8-dom-define":40,"./_to-primitive":75}],53:[function(e,t,n){var o=e("./_object-dp"),r=e("./_an-object"),i=e("./_object-keys");t.exports=e("./_descriptors")?Object.defineProperties:function(e,t){r(e);for(var n,a=i(t),s=a.length,u=0;s>u;)o.f(e,n=a[u++],t[n]);return e}},{"./_an-object":24,"./_descriptors":30,"./_object-dp":52,"./_object-keys":60}],54:[function(e,t,n){var o=e("./_object-pie"),r=e("./_property-desc"),i=e("./_to-iobject"),a=e("./_to-primitive"),s=e("./_has"),u=e("./_ie8-dom-define"),c=Object.getOwnPropertyDescriptor;n.f=e("./_descriptors")?c:function(e,t){if(e=i(e),t=a(t,!0),u)try{return c(e,t)}catch(n){}if(s(e,t))return r(!o.f.call(e,t),e[t])}},{"./_descriptors":30,"./_has":37,"./_ie8-dom-define":40,"./_object-pie":61,"./_property-desc":63,"./_to-iobject":72,"./_to-primitive":75}],55:[function(e,t,n){var o=e("./_to-iobject"),r=e("./_object-gopn").f,i={}.toString,a="object"==typeof window&&window&&Object.getOwnPropertyNames?Object.getOwnPropertyNames(window):[],s=function(e){try{return r(e)}catch(t){return a.slice()}};t.exports.f=function(e){return a&&"[object Window]"==i.call(e)?s(e):r(o(e))}},{"./_object-gopn":56,"./_to-iobject":72}],56:[function(e,t,n){var o=e("./_object-keys-internal"),r=e("./_enum-bug-keys").concat("length","prototype");n.f=Object.getOwnPropertyNames||function(e){return o(e,r)}},{"./_enum-bug-keys":32,"./_object-keys-internal":59}],57:[function(e,t,n){n.f=Object.getOwnPropertySymbols},{}],58:[function(e,t,n){var o=e("./_has"),r=e("./_to-object"),i=e("./_shared-key")("IE_PROTO"),a=Object.prototype;t.exports=Object.getPrototypeOf||function(e){return e=r(e),o(e,i)?e[i]:"function"==typeof e.constructor&&e instanceof e.constructor?e.constructor.prototype:e instanceof Object?a:null}},{"./_has":37,"./_shared-key":67,"./_to-object":74}],59:[function(e,t,n){var o=e("./_has"),r=e("./_to-iobject"),i=e("./_array-includes")(!1),a=e("./_shared-key")("IE_PROTO");t.exports=function(e,t){var n,s=r(e),u=0,c=[];for(n in s)n!=a&&o(s,n)&&c.push(n);for(;t.length>u;)o(s,n=t[u++])&&(~i(c,n)||c.push(n));return c}},{"./_array-includes":25,"./_has":37,"./_shared-key":67,"./_to-iobject":72}],60:[function(e,t,n){var o=e("./_object-keys-internal"),r=e("./_enum-bug-keys");t.exports=Object.keys||function(e){return o(e,r)}},{"./_enum-bug-keys":32,"./_object-keys-internal":59}],61:[function(e,t,n){n.f={}.propertyIsEnumerable},{}],62:[function(e,t,n){var o=e("./_export"),r=e("./_core"),i=e("./_fails");t.exports=function(e,t){var n=(r.Object||{})[e]||Object[e],a={};a[e]=t(n),o(o.S+o.F*i(function(){n(1)}),"Object",a)}},{"./_core":27,"./_export":34,"./_fails":35}],63:[function(e,t,n){t.exports=function(e,t){return{enumerable:!(1&e),configurable:!(2&e),writable:!(4&e),value:t}}},{}],64:[function(e,t,n){t.exports=e("./_hide")},{"./_hide":38}],65:[function(e,t,n){var o=e("./_is-object"),r=e("./_an-object"),i=function(e,t){if(r(e),!o(t)&&null!==t)throw TypeError(t+": can't set as prototype!")};t.exports={set:Object.setPrototypeOf||("__proto__"in{}?function(t,n,o){try{o=e("./_ctx")(Function.call,e("./_object-gopd").f(Object.prototype,"__proto__").set,2),o(t,[]),n=!(t instanceof Array)}catch(r){n=!0}return function(e,t){return i(e,t),n?e.__proto__=t:o(e,t),e}}({},!1):void 0),check:i}},{"./_an-object":24,"./_ctx":28,"./_is-object":43,"./_object-gopd":54}],66:[function(e,t,n){var o=e("./_object-dp").f,r=e("./_has"),i=e("./_wks")("toStringTag");t.exports=function(e,t,n){e&&!r(e=n?e:e.prototype,i)&&o(e,i,{configurable:!0,value:t})}},{"./_has":37,"./_object-dp":52,"./_wks":79}],67:[function(e,t,n){var o=e("./_shared")("keys"),r=e("./_uid");t.exports=function(e){return o[e]||(o[e]=r(e))}},{"./_shared":68,"./_uid":76}],68:[function(e,t,n){var o=e("./_global"),r="__core-js_shared__",i=o[r]||(o[r]={});t.exports=function(e){return i[e]||(i[e]={})}},{"./_global":36}],69:[function(e,t,n){var o=e("./_to-integer"),r=e("./_defined");t.exports=function(e){return function(t,n){var i,a,s=String(r(t)),u=o(n),c=s.length;return u<0||u>=c?e?"":void 0:(i=s.charCodeAt(u),i<55296||i>56319||u+1===c||(a=s.charCodeAt(u+1))<56320||a>57343?e?s.charAt(u):i:e?s.slice(u,u+2):(i-55296<<10)+(a-56320)+65536)}}},{"./_defined":29,"./_to-integer":71}],70:[function(e,t,n){var o=e("./_to-integer"),r=Math.max,i=Math.min;t.exports=function(e,t){return e=o(e),e<0?r(e+t,0):i(e,t)}},{"./_to-integer":71}],71:[function(e,t,n){var o=Math.ceil,r=Math.floor;t.exports=function(e){return isNaN(e=+e)?0:(e>0?r:o)(e)}},{}],72:[function(e,t,n){var o=e("./_iobject"),r=e("./_defined");t.exports=function(e){return o(r(e))}},{"./_defined":29,"./_iobject":41}],73:[function(e,t,n){var o=e("./_to-integer"),r=Math.min;t.exports=function(e){return e>0?r(o(e),9007199254740991):0}},{"./_to-integer":71}],74:[function(e,t,n){var o=e("./_defined");t.exports=function(e){return Object(o(e))}},{"./_defined":29}],75:[function(e,t,n){var o=e("./_is-object");t.exports=function(e,t){if(!o(e))return e;var n,r;if(t&&"function"==typeof(n=e.toString)&&!o(r=n.call(e)))return r;if("function"==typeof(n=e.valueOf)&&!o(r=n.call(e)))return r;if(!t&&"function"==typeof(n=e.toString)&&!o(r=n.call(e)))return r;throw TypeError("Can't convert object to primitive value")}},{"./_is-object":43}],76:[function(e,t,n){var o=0,r=Math.random();t.exports=function(e){return"Symbol(".concat(void 0===e?"":e,")_",(++o+r).toString(36))}},{}],77:[function(e,t,n){var o=e("./_global"),r=e("./_core"),i=e("./_library"),a=e("./_wks-ext"),s=e("./_object-dp").f;t.exports=function(e){var t=r.Symbol||(r.Symbol=i?{}:o.Symbol||{});"_"==e.charAt(0)||e in t||s(t,e,{value:a.f(e)})}},{"./_core":27,"./_global":36,"./_library":48,"./_object-dp":52,"./_wks-ext":78}],78:[function(e,t,n){n.f=e("./_wks")},{"./_wks":79}],79:[function(e,t,n){var o=e("./_shared")("wks"),r=e("./_uid"),i=e("./_global").Symbol,a="function"==typeof i,s=t.exports=function(e){return o[e]||(o[e]=a&&i[e]||(a?i:r)("Symbol."+e))};s.store=o},{"./_global":36,"./_shared":68,"./_uid":76}],80:[function(e,t,n){"use strict";var o=e("./_add-to-unscopables"),r=e("./_iter-step"),i=e("./_iterators"),a=e("./_to-iobject");t.exports=e("./_iter-define")(Array,"Array",function(e,t){this._t=a(e),this._i=0,this._k=t},function(){var e=this._t,t=this._k,n=this._i++;return!e||n>=e.length?(this._t=void 0,r(1)):"keys"==t?r(0,n):"values"==t?r(0,e[n]):r(0,[n,e[n]])},"values"),i.Arguments=i.Array,o("keys"),o("values"),o("entries")},{"./_add-to-unscopables":23,"./_iter-define":45,"./_iter-step":46,"./_iterators":47,"./_to-iobject":72}],81:[function(e,t,n){var o=e("./_export");o(o.S+o.F,"Object",{assign:e("./_object-assign")})},{"./_export":34,"./_object-assign":50}],82:[function(e,t,n){var o=e("./_export");o(o.S,"Object",{create:e("./_object-create")})},{"./_export":34,"./_object-create":51}],83:[function(e,t,n){var o=e("./_export");o(o.S+o.F*!e("./_descriptors"),"Object",{defineProperty:e("./_object-dp").f})},{"./_descriptors":30,"./_export":34,"./_object-dp":52}],84:[function(e,t,n){var o=e("./_to-object"),r=e("./_object-gpo");e("./_object-sap")("getPrototypeOf",function(){return function(e){return r(o(e))}})},{"./_object-gpo":58,"./_object-sap":62,"./_to-object":74}],85:[function(e,t,n){var o=e("./_export");o(o.S,"Object",{setPrototypeOf:e("./_set-proto").set})},{"./_export":34,"./_set-proto":65}],86:[function(e,t,n){},{}],87:[function(e,t,n){"use strict";var o=e("./_string-at")(!0);e("./_iter-define")(String,"String",function(e){this._t=String(e),this._i=0},function(){var e,t=this._t,n=this._i;return n>=t.length?{value:void 0,done:!0}:(e=o(t,n),this._i+=e.length,{value:e,done:!1})})},{"./_iter-define":45,"./_string-at":69}],88:[function(e,t,n){"use strict";var o=e("./_global"),r=e("./_has"),i=e("./_descriptors"),a=e("./_export"),s=e("./_redefine"),u=e("./_meta").KEY,c=e("./_fails"),l=e("./_shared"),f=e("./_set-to-string-tag"),d=e("./_uid"),p=e("./_wks"),h=e("./_wks-ext"),b=e("./_wks-define"),y=e("./_enum-keys"),v=e("./_is-array"),_=e("./_an-object"),g=e("./_to-iobject"),m=e("./_to-primitive"),w=e("./_property-desc"),j=e("./_object-create"),x=e("./_object-gopn-ext"),S=e("./_object-gopd"),O=e("./_object-dp"),T=e("./_object-keys"),E=S.f,k=O.f,M=x.f,P=o.Symbol,C=o.JSON,L=C&&C.stringify,N="prototype",D=p("_hidden"),R=p("toPrimitive"),I={}.propertyIsEnumerable,H=l("symbol-registry"),A=l("symbols"),F=l("op-symbols"),W=Object[N],X="function"==typeof P,V=o.QObject,Y=!V||!V[N]||!V[N].findChild,U=i&&c(function(){return 7!=j(k({},"a",{get:function(){return k(this,"a",{value:7}).a}})).a})?function(e,t,n){var o=E(W,t);o&&delete W[t],k(e,t,n),o&&e!==W&&k(W,t,o)}:k,z=function(e){var t=A[e]=j(P[N]);return t._k=e,t},B=X&&"symbol"==typeof P.iterator?function(e){return"symbol"==typeof e}:function(e){return e instanceof P},q=function(e,t,n){return e===W&&q(F,t,n),_(e),t=m(t,!0),_(n),r(A,t)?(n.enumerable?(r(e,D)&&e[D][t]&&(e[D][t]=!1),n=j(n,{enumerable:w(0,!1)})):(r(e,D)||k(e,D,w(1,{})),e[D][t]=!0),U(e,t,n)):k(e,t,n)},G=function(e,t){_(e);for(var n,o=y(t=g(t)),r=0,i=o.length;i>r;)q(e,n=o[r++],t[n]);return e},J=function(e,t){return void 0===t?j(e):G(j(e),t)},K=function(e){var t=I.call(this,e=m(e,!0));return!(this===W&&r(A,e)&&!r(F,e))&&(!(t||!r(this,e)||!r(A,e)||r(this,D)&&this[D][e])||t)},Q=function(e,t){if(e=g(e),t=m(t,!0),e!==W||!r(A,t)||r(F,t)){var n=E(e,t);return!n||!r(A,t)||r(e,D)&&e[D][t]||(n.enumerable=!0),n}},Z=function(e){for(var t,n=M(g(e)),o=[],i=0;n.length>i;)r(A,t=n[i++])||t==D||t==u||o.push(t);return o},$=function(e){for(var t,n=e===W,o=M(n?F:g(e)),i=[],a=0;o.length>a;)!r(A,t=o[a++])||n&&!r(W,t)||i.push(A[t]);return i};X||(P=function(){if(this instanceof P)throw TypeError("Symbol is not a constructor!");var e=d(arguments.length>0?arguments[0]:void 0),t=function(n){this===W&&t.call(F,n),r(this,D)&&r(this[D],e)&&(this[D][e]=!1),U(this,e,w(1,n))};return i&&Y&&U(W,e,{configurable:!0,set:t}),z(e)},s(P[N],"toString",function(){return this._k}),S.f=Q,O.f=q,e("./_object-gopn").f=x.f=Z,e("./_object-pie").f=K,e("./_object-gops").f=$,i&&!e("./_library")&&s(W,"propertyIsEnumerable",K,!0),h.f=function(e){return z(p(e))}),a(a.G+a.W+a.F*!X,{Symbol:P});for(var ee="hasInstance,isConcatSpreadable,iterator,match,replace,search,species,split,toPrimitive,toStringTag,unscopables".split(","),te=0;ee.length>te;)p(ee[te++]);for(var ne=T(p.store),oe=0;ne.length>oe;)b(ne[oe++]);a(a.S+a.F*!X,"Symbol",{"for":function(e){return r(H,e+="")?H[e]:H[e]=P(e)},keyFor:function(e){if(!B(e))throw TypeError(e+" is not a symbol!");for(var t in H)if(H[t]===e)return t},useSetter:function(){Y=!0},useSimple:function(){Y=!1}}),a(a.S+a.F*!X,"Object",{create:J,defineProperty:q,defineProperties:G,getOwnPropertyDescriptor:Q,getOwnPropertyNames:Z,getOwnPropertySymbols:$}),C&&a(a.S+a.F*(!X||c(function(){var e=P();return"[null]"!=L([e])||"{}"!=L({a:e})||"{}"!=L(Object(e))})),"JSON",{stringify:function(e){if(void 0!==e&&!B(e)){for(var t,n,o=[e],r=1;arguments.length>r;)o.push(arguments[r++]);return t=o[1],"function"==typeof t&&(n=t),!n&&v(t)||(t=function(e,t){if(n&&(t=n.call(this,e,t)),!B(t))return t}),o[1]=t,L.apply(C,o)}}}),P[N][R]||e("./_hide")(P[N],R,P[N].valueOf),f(P,"Symbol"),f(Math,"Math",!0),f(o.JSON,"JSON",!0)},{"./_an-object":24,"./_descriptors":30,"./_enum-keys":33,"./_export":34,"./_fails":35,"./_global":36,"./_has":37,"./_hide":38,"./_is-array":42,"./_library":48,"./_meta":49,"./_object-create":51,"./_object-dp":52,"./_object-gopd":54,"./_object-gopn":56,"./_object-gopn-ext":55,"./_object-gops":57,"./_object-keys":60,"./_object-pie":61,"./_property-desc":63,"./_redefine":64,"./_set-to-string-tag":66,"./_shared":68,"./_to-iobject":72,"./_to-primitive":75,"./_uid":76,"./_wks":79,"./_wks-define":77,"./_wks-ext":78}],89:[function(e,t,n){e("./_wks-define")("asyncIterator")},{"./_wks-define":77}],90:[function(e,t,n){e("./_wks-define")("observable")},{"./_wks-define":77}],91:[function(e,t,n){e("./es6.array.iterator");for(var o=e("./_global"),r=e("./_hide"),i=e("./_iterators"),a=e("./_wks")("toStringTag"),s="CSSRuleList,CSSStyleDeclaration,CSSValueList,ClientRectList,DOMRectList,DOMStringList,DOMTokenList,DataTransferItemList,FileList,HTMLAllCollection,HTMLCollection,HTMLFormElement,HTMLSelectElement,MediaList,MimeTypeArray,NamedNodeMap,NodeList,PaintRequestList,Plugin,PluginArray,SVGLengthList,SVGNumberList,SVGPathSegList,SVGPointList,SVGStringList,SVGTransformList,SourceBufferList,StyleSheetList,TextTrackCueList,TextTrackList,TouchList".split(","),u=0;u<s.length;u++){var c=s[u],l=o[c],f=l&&l.prototype;f&&!f[a]&&r(f,a,c),i[c]=i.Array}},{"./_global":36,"./_hide":38,"./_iterators":47,"./_wks":79,"./es6.array.iterator":80}],92:[function(e,t,n){"use strict";function o(e){return e&&e.__esModule?e:{"default":e}}Object.defineProperty(n,"__esModule",{value:!0});var r=e("../util/inDOM"),i=o(r),a=function(){};i["default"]&&(a=function(){return document.addEventListener?function(e,t,n,o){return e.removeEventListener(t,n,o||!1)}:document.attachEvent?function(e,t,n){return e.detachEvent("on"+t,n)}:void 0}()),n["default"]=a,t.exports=n["default"]},{"../util/inDOM":95}],93:[function(e,t,n){"use strict";function o(e){return e&&e.__esModule?e:{"default":e}}Object.defineProperty(n,"__esModule",{value:!0});var r=e("../util/inDOM"),i=o(r),a=function(){};i["default"]&&(a=function(){return document.addEventListener?function(e,t,n,o){return e.addEventListener(t,n,o||!1)}:document.attachEvent?function(e,t,n){return e.attachEvent("on"+t,function(t){t=t||window.event,t.target=t.target||t.srcElement,t.currentTarget=e,n.call(e,t)})}:void 0}()),n["default"]=a,t.exports=n["default"]},{"../util/inDOM":95}],94:[function(e,t,n){"use strict";function o(e){return e&&e.__esModule?e:{"default":e}}function r(){for(var e=document.createElement("div").style,t={O:function(e){return"o"+e.toLowerCase()},Moz:function(e){return e.toLowerCase()},Webkit:function(e){return"webkit"+e},ms:function(e){return"MS"+e}},n=Object.keys(t),o=void 0,r=void 0,i="",a=0;a<n.length;a++){var s=n[a];if(s+"TransitionProperty"in e){i="-"+s.toLowerCase(),o=t[s]("TransitionEnd"),r=t[s]("AnimationEnd");break}}return!o&&"transitionProperty"in e&&(o="transitionend"),!r&&"animationName"in e&&(r="animationend"),e=null,{animationEnd:r,transitionEnd:o,prefix:i}}Object.defineProperty(n,"__esModule",{value:!0}),n.animationEnd=n.animationDelay=n.animationTiming=n.animationDuration=n.animationName=n.transitionEnd=n.transitionDuration=n.transitionDelay=n.transitionTiming=n.transitionProperty=n.transform=void 0;var i=e("../util/inDOM"),a=o(i),s="transform",u=void 0,c=void 0,l=void 0,f=void 0,d=void 0,p=void 0,h=void 0,b=void 0,y=void 0,v=void 0,_=void 0;if(a["default"]){var g=r();u=g.prefix,n.transitionEnd=c=g.transitionEnd,n.animationEnd=l=g.animationEnd,n.transform=s=u+"-"+s,n.transitionProperty=f=u+"-transition-property",n.transitionDuration=d=u+"-transition-duration",n.transitionDelay=h=u+"-transition-delay",n.transitionTiming=p=u+"-transition-timing-function",n.animationName=b=u+"-animation-name",n.animationDuration=y=u+"-animation-duration",n.animationTiming=v=u+"-animation-delay",n.animationDelay=_=u+"-animation-timing-function"}n.transform=s,n.transitionProperty=f,n.transitionTiming=p,n.transitionDelay=h,n.transitionDuration=d,n.transitionEnd=c,n.animationName=b,n.animationDuration=y,n.animationTiming=v,n.animationDelay=_,n.animationEnd=l,n["default"]={transform:s,end:c,property:f,timing:p,delay:h,duration:d}},{"../util/inDOM":95}],95:[function(e,t,n){"use strict";Object.defineProperty(n,"__esModule",{value:!0}),n["default"]=!("undefined"==typeof window||!window.document||!window.document.createElement),t.exports=n["default"]},{}],96:[function(e,t,n){function o(){throw new Error("setTimeout has not been defined")}function r(){throw new Error("clearTimeout has not been defined")}function i(e){if(f===setTimeout)return setTimeout(e,0);if((f===o||!f)&&setTimeout)return f=setTimeout,setTimeout(e,0);try{return f(e,0)}catch(t){try{return f.call(null,e,0)}catch(t){return f.call(this,e,0)}}}function a(e){if(d===clearTimeout)return clearTimeout(e);if((d===r||!d)&&clearTimeout)return d=clearTimeout,clearTimeout(e);try{return d(e)}catch(t){try{return d.call(null,e)}catch(t){return d.call(this,e)}}}function s(){y&&h&&(y=!1,h.length?b=h.concat(b):v=-1,b.length&&u())}function u(){if(!y){var e=i(s);y=!0;for(var t=b.length;t;){for(h=b,b=[];++v<t;)h&&h[v].run();v=-1,t=b.length}h=null,y=!1,a(e)}}function c(e,t){this.fun=e,this.array=t}function l(){}var f,d,p=t.exports={};!function(){try{f="function"==typeof setTimeout?setTimeout:o}catch(e){f=o}try{d="function"==typeof clearTimeout?clearTimeout:r}catch(e){d=r}}();var h,b=[],y=!1,v=-1;p.nextTick=function(e){var t=new Array(arguments.length-1);if(arguments.length>1)for(var n=1;n<arguments.length;n++)t[n-1]=arguments[n];b.push(new c(e,t)),1!==b.length||y||i(u)},c.prototype.run=function(){this.fun.apply(null,this.array)},p.title="browser",p.browser=!0,p.env={},p.argv=[],p.version="",p.versions={},p.on=l,p.addListener=l,p.once=l,p.off=l,p.removeListener=l,p.removeAllListeners=l,p.emit=l,p.prependListener=l,p.prependOnceListener=l,p.listeners=function(e){return[]},p.binding=function(e){throw new Error("process.binding is not supported")},p.cwd=function(){return"/"},p.chdir=function(e){throw new Error("process.chdir is not supported")},p.umask=function(){return 0}},{}],97:[function(e,t,n){"use strict";function o(e,t,n,o,r){}t.exports=o},{"./lib/ReactPropTypesSecret":101,"fbjs/lib/invariant":103,
2 | "fbjs/lib/warning":104}],98:[function(e,t,n){"use strict";var o=e("fbjs/lib/emptyFunction"),r=e("fbjs/lib/invariant"),i=e("./lib/ReactPropTypesSecret");t.exports=function(){function e(e,t,n,o,a,s){s!==i&&r(!1,"Calling PropTypes validators directly is not supported by the `prop-types` package. Use PropTypes.checkPropTypes() to call them. Read more at http://fb.me/use-check-prop-types")}function t(){return e}e.isRequired=e;var n={array:e,bool:e,func:e,number:e,object:e,string:e,symbol:e,any:e,arrayOf:t,element:e,instanceOf:t,node:e,objectOf:t,oneOf:t,oneOfType:t,shape:t};return n.checkPropTypes=o,n.PropTypes=n,n}},{"./lib/ReactPropTypesSecret":101,"fbjs/lib/emptyFunction":102,"fbjs/lib/invariant":103}],99:[function(e,t,n){"use strict";var o=e("fbjs/lib/emptyFunction"),r=e("fbjs/lib/invariant"),i=e("fbjs/lib/warning"),a=e("./lib/ReactPropTypesSecret"),s=e("./checkPropTypes");t.exports=function(e,t){function n(e){var t=e&&(E&&e[E]||e[k]);if("function"==typeof t)return t}function u(e,t){return e===t?0!==e||1/e===1/t:e!==e&&t!==t}function c(e){this.message=e,this.stack=""}function l(e){function n(n,o,i,s,u,l,f){if(s=s||M,l=l||i,f!==a)if(t)r(!1,"Calling PropTypes validators directly is not supported by the `prop-types` package. Use `PropTypes.checkPropTypes()` to call them. Read more at http://fb.me/use-check-prop-types");else;return null==o[i]?n?new c(null===o[i]?"The "+u+" `"+l+"` is marked as required "+("in `"+s+"`, but its value is `null`."):"The "+u+" `"+l+"` is marked as required in "+("`"+s+"`, but its value is `undefined`.")):null:e(o,i,s,u,l)}var o=n.bind(null,!1);return o.isRequired=n.bind(null,!0),o}function f(e){function t(t,n,o,r,i,a){var s=t[n],u=x(s);if(u!==e){var l=S(s);return new c("Invalid "+r+" `"+i+"` of type "+("`"+l+"` supplied to `"+o+"`, expected ")+("`"+e+"`."))}return null}return l(t)}function d(){return l(o.thatReturnsNull)}function p(e){function t(t,n,o,r,i){if("function"!=typeof e)return new c("Property `"+i+"` of component `"+o+"` has invalid PropType notation inside arrayOf.");var s=t[n];if(!Array.isArray(s)){var u=x(s);return new c("Invalid "+r+" `"+i+"` of type "+("`"+u+"` supplied to `"+o+"`, expected an array."))}for(var l=0;l<s.length;l++){var f=e(s,l,o,r,i+"["+l+"]",a);if(f instanceof Error)return f}return null}return l(t)}function h(){function t(t,n,o,r,i){var a=t[n];if(!e(a)){var s=x(a);return new c("Invalid "+r+" `"+i+"` of type "+("`"+s+"` supplied to `"+o+"`, expected a single ReactElement."))}return null}return l(t)}function b(e){function t(t,n,o,r,i){if(!(t[n]instanceof e)){var a=e.name||M,s=T(t[n]);return new c("Invalid "+r+" `"+i+"` of type "+("`"+s+"` supplied to `"+o+"`, expected ")+("instance of `"+a+"`."))}return null}return l(t)}function y(e){function t(t,n,o,r,i){for(var a=t[n],s=0;s<e.length;s++)if(u(a,e[s]))return null;var l=JSON.stringify(e);return new c("Invalid "+r+" `"+i+"` of value `"+a+"` "+("supplied to `"+o+"`, expected one of "+l+"."))}return Array.isArray(e)?l(t):o.thatReturnsNull}function v(e){function t(t,n,o,r,i){if("function"!=typeof e)return new c("Property `"+i+"` of component `"+o+"` has invalid PropType notation inside objectOf.");var s=t[n],u=x(s);if("object"!==u)return new c("Invalid "+r+" `"+i+"` of type "+("`"+u+"` supplied to `"+o+"`, expected an object."));for(var l in s)if(s.hasOwnProperty(l)){var f=e(s,l,o,r,i+"."+l,a);if(f instanceof Error)return f}return null}return l(t)}function _(e){function t(t,n,o,r,i){for(var s=0;s<e.length;s++){var u=e[s];if(null==u(t,n,o,r,i,a))return null}return new c("Invalid "+r+" `"+i+"` supplied to "+("`"+o+"`."))}if(!Array.isArray(e))return o.thatReturnsNull;for(var n=0;n<e.length;n++){var r=e[n];if("function"!=typeof r)return i(!1,"Invalid argument supplid to oneOfType. Expected an array of check functions, but received %s at index %s.",O(r),n),o.thatReturnsNull}return l(t)}function g(){function e(e,t,n,o,r){return w(e[t])?null:new c("Invalid "+o+" `"+r+"` supplied to "+("`"+n+"`, expected a ReactNode."))}return l(e)}function m(e){function t(t,n,o,r,i){var s=t[n],u=x(s);if("object"!==u)return new c("Invalid "+r+" `"+i+"` of type `"+u+"` "+("supplied to `"+o+"`, expected `object`."));for(var l in e){var f=e[l];if(f){var d=f(s,l,o,r,i+"."+l,a);if(d)return d}}return null}return l(t)}function w(t){switch(typeof t){case"number":case"string":case"undefined":return!0;case"boolean":return!t;case"object":if(Array.isArray(t))return t.every(w);if(null===t||e(t))return!0;var o=n(t);if(!o)return!1;var r,i=o.call(t);if(o!==t.entries){for(;!(r=i.next()).done;)if(!w(r.value))return!1}else for(;!(r=i.next()).done;){var a=r.value;if(a&&!w(a[1]))return!1}return!0;default:return!1}}function j(e,t){return"symbol"===e||("Symbol"===t["@@toStringTag"]||"function"==typeof Symbol&&t instanceof Symbol)}function x(e){var t=typeof e;return Array.isArray(e)?"array":e instanceof RegExp?"object":j(t,e)?"symbol":t}function S(e){if("undefined"==typeof e||null===e)return""+e;var t=x(e);if("object"===t){if(e instanceof Date)return"date";if(e instanceof RegExp)return"regexp"}return t}function O(e){var t=S(e);switch(t){case"array":case"object":return"an "+t;case"boolean":case"date":case"regexp":return"a "+t;default:return t}}function T(e){return e.constructor&&e.constructor.name?e.constructor.name:M}var E="function"==typeof Symbol&&Symbol.iterator,k="@@iterator",M="<<anonymous>>",P={array:f("array"),bool:f("boolean"),func:f("function"),number:f("number"),object:f("object"),string:f("string"),symbol:f("symbol"),any:d(),arrayOf:p,element:h(),instanceOf:b,node:g(),objectOf:v,oneOf:y,oneOfType:_,shape:m};return c.prototype=Error.prototype,P.checkPropTypes=s,P.PropTypes=P,P}},{"./checkPropTypes":97,"./lib/ReactPropTypesSecret":101,"fbjs/lib/emptyFunction":102,"fbjs/lib/invariant":103,"fbjs/lib/warning":104}],100:[function(e,t,n){t.exports=e("./factoryWithThrowingShims")()},{"./factoryWithThrowingShims":98,"./factoryWithTypeCheckers":99}],101:[function(e,t,n){"use strict";var o="SECRET_DO_NOT_PASS_THIS_OR_YOU_WILL_BE_FIRED";t.exports=o},{}],102:[function(e,t,n){"use strict";function o(e){return function(){return e}}var r=function(){};r.thatReturns=o,r.thatReturnsFalse=o(!1),r.thatReturnsTrue=o(!0),r.thatReturnsNull=o(null),r.thatReturnsThis=function(){return this},r.thatReturnsArgument=function(e){return e},t.exports=r},{}],103:[function(e,t,n){"use strict";function o(e,t,n,o,i,a,s,u){if(r(t),!e){var c;if(void 0===t)c=new Error("Minified exception occurred; use the non-minified dev environment for the full error message and additional helpful warnings.");else{var l=[n,o,i,a,s,u],f=0;c=new Error(t.replace(/%s/g,function(){return l[f++]})),c.name="Invariant Violation"}throw c.framesToPop=1,c}}var r=function(e){};t.exports=o},{}],104:[function(e,t,n){"use strict";var o=e("./emptyFunction"),r=o;t.exports=r},{"./emptyFunction":102}],105:[function(e,t,n){(function(t){"use strict";function o(e){return e&&e.__esModule?e:{"default":e}}Object.defineProperty(n,"__esModule",{value:!0});var r=e("react"),i=e("warning"),a=o(i),s=function(e){var n=e.index,o=e.children,i=r.Children.count(o);"production"!==t.env.NODE_ENV?(0,a["default"])(n>=0&&n<=i,"react-swipeable-view: the new index: "+n+" is out of bounds: [0-"+i+"]."):void 0};n["default"]=s}).call(this,e("_process"))},{_process:96,react:void 0,warning:113}],106:[function(e,t,n){"use strict";function o(e){return e&&e.__esModule?e:{"default":e}}function r(e){var t=e.children,n=e.startIndex,o=e.startX,r=e.pageX,a=e.viewLength,u=e.resistance,c=i.Children.count(t)-1,l=n+(o-r)/a,f=void 0;return u?l<0?l=Math.exp(l*s["default"].RESISTANCE_COEF)-1:l>c&&(l=c+1-Math.exp((c-l)*s["default"].RESISTANCE_COEF)):l<0?(l=0,f=(l-n)*a+r):l>c&&(l=c,f=(l-n)*a+r),{index:l,startX:f}}Object.defineProperty(n,"__esModule",{value:!0}),n["default"]=r;var i=e("react"),a=e("./constant"),s=o(a)},{"./constant":107,react:void 0}],107:[function(e,t,n){"use strict";Object.defineProperty(n,"__esModule",{value:!0}),n["default"]={RESISTANCE_COEF:.6,UNCERTAINTY_THRESHOLD:3}},{}],108:[function(e,t,n){"use strict";Object.defineProperty(n,"__esModule",{value:!0});var o=function(e,t){var n=!1;if(e.children.length&&t.children.length){var o=e.children[e.index],r=o?o.key:"empty";if(null!==r){var i=t.children[t.index],a=i?i.key:"empty";r===a&&(n=!0)}}return n};n["default"]=o},{}],109:[function(e,t,n){"use strict";function o(e){return e&&e.__esModule?e:{"default":e}}Object.defineProperty(n,"__esModule",{value:!0});var r=e("./checkIndexBounds");Object.defineProperty(n,"checkIndexBounds",{enumerable:!0,get:function(){return o(r)["default"]}});var i=e("./computeIndex");Object.defineProperty(n,"computeIndex",{enumerable:!0,get:function(){return o(i)["default"]}});var a=e("./constant");Object.defineProperty(n,"constant",{enumerable:!0,get:function(){return o(a)["default"]}});var s=e("./getDisplaySameSlide");Object.defineProperty(n,"getDisplaySameSlide",{enumerable:!0,get:function(){return o(s)["default"]}});var u=e("./mod");Object.defineProperty(n,"mod",{enumerable:!0,get:function(){return o(u)["default"]}})},{"./checkIndexBounds":105,"./computeIndex":106,"./constant":107,"./getDisplaySameSlide":108,"./mod":110}],110:[function(e,t,n){"use strict";function o(e,t){var n=e%t;return n<0?n+t:n}Object.defineProperty(n,"__esModule",{value:!0}),n["default"]=o},{}],111:[function(e,t,n){(function(t){"use strict";function o(e){return e&&e.__esModule?e:{"default":e}}function r(e,t,n,o){return(0,I["default"])(e,t,n,o),{remove:function(){(0,A["default"])(e,t,n,o)}}}function i(){if(!W){var e=document.createElement("style");e.innerHTML="\n      .react-swipeable-view-container {\n        display: -webkit-box;\n        display: -ms-flexbox;\n      }\n      .react-swipeable-view-container > div {\n        -ms-flex-negative: 0;\n      }\n    ",document.body&&document.body.appendChild(e),W=!0}}function a(e,t){var n=t.duration,o=t.easeFunction,r=t.delay;return e+" "+n+" "+o+" "+r}function s(e,t){var n=V.rotationMatrix[t];return{pageX:n.x[0]*e.pageX+n.x[1]*e.pageY,pageY:n.y[0]*e.pageX+n.y[1]*e.pageY}}function u(e){return e.touches=[{pageX:e.pageX,pageY:e.pageY}],e}function c(e,t){for(var n=[];e&&e!==t&&!e.hasAttribute("data-swipeable");){var o=window.getComputedStyle(e);"absolute"===o.getPropertyValue("position")||"hidden"===o.getPropertyValue("overflow-x")?n=[]:(e.clientWidth>0&&e.scrollWidth>e.clientWidth||e.clientHeight>0&&e.scrollHeight>e.clientHeight)&&n.push({element:e,scrollWidth:e.scrollWidth,scrollHeight:e.scrollHeight,clientWidth:e.clientWidth,clientHeight:e.clientHeight,scrollLeft:e.scrollLeft,scrollTop:e.scrollTop}),e=e.parentNode}return n}function l(e){var t=e.domTreeShapes,n=e.pageX,o=e.startX,r=e.axis;return t.some(function(e){var t=n>=o;"x"!==r&&"y"!==r||(t=!t);var i=e[V.scrollPosition[r]],a=i>0,s=i+e[V.clientLength[r]]<e[V.scrollLength[r]];return!!(t&&s||!t&&a)&&(Y=e.element,!0)})}Object.defineProperty(n,"__esModule",{value:!0});var f=e("babel-runtime/helpers/extends"),d=o(f),p=e("babel-runtime/core-js/object/assign"),h=o(p),b=e("babel-runtime/helpers/objectWithoutProperties"),y=o(b),v=e("babel-runtime/core-js/object/get-prototype-of"),_=o(v),g=e("babel-runtime/helpers/classCallCheck"),m=o(g),w=e("babel-runtime/helpers/createClass"),j=o(w),x=e("babel-runtime/helpers/possibleConstructorReturn"),S=o(x),O=e("babel-runtime/helpers/inherits"),T=o(O);n.getDomTreeShapes=c,n.findNativeHandler=l;var E=e("react"),k=o(E),M=e("prop-types"),P=o(M),C=e("warning"),L=o(C),N=e("dom-helpers/transition/properties"),D=o(N),R=e("dom-helpers/events/on"),I=o(R),H=e("dom-helpers/events/off"),A=o(H),F=e("react-swipeable-views-core"),W=!1,X={container:{direction:"ltr",display:"flex"},slide:{width:"100%",WebkitFlexShrink:0,flexShrink:0,overflow:"auto"}},V={root:{x:{overflowX:"hidden"},"x-reverse":{overflowX:"hidden"},y:{overflowY:"hidden"},"y-reverse":{overflowY:"hidden"}},flexDirection:{x:"row","x-reverse":"row-reverse",y:"column","y-reverse":"column-reverse"},transform:{x:function(e){return"translate("+-e+"%, 0)"},"x-reverse":function(e){return"translate("+e+"%, 0)"},y:function(e){return"translate(0, "+-e+"%)"},"y-reverse":function(e){return"translate(0, "+e+"%)"}},length:{x:"width","x-reverse":"width",y:"height","y-reverse":"height"},rotationMatrix:{x:{x:[1,0],y:[0,1]},"x-reverse":{x:[-1,0],y:[0,1]},y:{x:[0,1],y:[1,0]},"y-reverse":{x:[0,-1],y:[1,0]}},scrollPosition:{x:"scrollLeft","x-reverse":"scrollLeft",y:"scrollTop","y-reverse":"scrollTop"},scrollLength:{x:"scrollWidth","x-reverse":"scrollWidth",y:"scrollHeight","y-reverse":"scrollHeight"},clientLength:{x:"clientWidth","x-reverse":"clientWidth",y:"clientHeight","y-reverse":"clientHeight"}},Y=null,U=function(e){function n(){var e,t,o,r;(0,m["default"])(this,n);for(var i=arguments.length,a=Array(i),f=0;f<i;f++)a[f]=arguments[f];return t=o=(0,S["default"])(this,(e=n.__proto__||(0,_["default"])(n)).call.apply(e,[this].concat(a))),o.state={},o.rootNode=null,o.containerNode=null,o.ignoreNextScrollEvents=!1,o.viewLength=0,o.startX=0,o.lastX=0,o.vx=0,o.startY=0,o.isSwiping=void 0,o.started=!1,o.startIndex=0,o.transitionListener=null,o.touchMoveListener=null,o.activeSlide=null,o.handleSwipeStart=function(e){var t=o.props.axis;if(null!==o.rootNode){var n=s(e.touches[0],t);o.viewLength=o.rootNode.getBoundingClientRect()[V.length[t]],o.startX=n.pageX,o.lastX=n.pageX,o.vx=0,o.startY=n.pageY,o.isSwiping=void 0,o.started=!0;var r=window.getComputedStyle(o.containerNode),i=r.getPropertyValue("-webkit-transform")||r.getPropertyValue("transform");if(i){var a=i.split("(")[1].split(")")[0].split(","),u=window.getComputedStyle(o.rootNode),c=s({pageX:parseInt(a[4],10),pageY:parseInt(a[5],10)},t);o.startIndex=-c.pageX/(o.viewLength-parseInt(u.paddingLeft,10)-parseInt(u.paddingRight,10))}}},o.handleSwipeMove=function(e){if(!o.started)return void o.handleTouchStart(e);if(null!==o.rootNode&&(null===Y||Y===o.rootNode)){var t=o.props,n=t.axis,r=t.children,i=t.ignoreNativeScroll,a=t.onSwitching,u=t.resistance,f=s(e.touches[0],n);if(void 0===o.isSwiping){var d=Math.abs(o.startX-f.pageX),p=Math.abs(o.startY-f.pageY),h=d>p&&d>F.constant.UNCERTAINTY_THRESHOLD;if(d>p&&e.preventDefault(),h===!0||p>F.constant.UNCERTAINTY_THRESHOLD)return o.isSwiping=h,void(o.startX=f.pageX)}if(o.isSwiping===!0){e.preventDefault(),o.vx=.5*o.vx+.5*(f.pageX-o.lastX),o.lastX=f.pageX;var b=(0,F.computeIndex)({children:r,resistance:u,pageX:f.pageX,startIndex:o.startIndex,startX:o.startX,viewLength:o.viewLength}),y=b.index,v=b.startX;if(null===Y&&!i){var _=c(e.target,o.rootNode),g=l({domTreeShapes:_,startX:o.startX,pageX:f.pageX,axis:n});if(g)return}v?o.startX=v:null===Y&&(Y=o.rootNode),o.setState({displaySameSlide:!1,isDragging:!0,indexCurrent:y},function(){a&&a(y,"move")})}}},o.handleSwipeEnd=function(){if(Y=null,o.started&&(o.started=!1,o.isSwiping===!0)){var e=o.state.indexLatest,t=o.state.indexCurrent,n=e-t,r=void 0;r=Math.abs(o.vx)>o.props.threshold?o.vx>0?Math.floor(t):Math.ceil(t):Math.abs(n)>o.props.hysteresis?n>0?Math.floor(t):Math.ceil(t):e;var i=E.Children.count(o.props.children)-1;r<0?r=0:r>i&&(r=i),o.setState({indexCurrent:r,indexLatest:r,isDragging:!1},function(){o.props.onSwitching&&o.props.onSwitching(r,"end"),o.props.onChangeIndex&&r!==e&&o.props.onChangeIndex(r,e),t===e&&o.handleTransitionEnd()})}},o.handleTouchStart=function(e){o.props.onTouchStart&&o.props.onTouchStart(e),o.handleSwipeStart(e)},o.handleTouchEnd=function(e){o.props.onTouchEnd&&o.props.onTouchEnd(e),o.handleSwipeEnd(e)},o.handleMouseDown=function(e){o.props.onMouseDown&&o.props.onMouseDown(e),e.persist(),o.handleSwipeStart(u(e))},o.handleMouseUp=function(e){o.props.onMouseUp&&o.props.onMouseUp(e),o.handleSwipeEnd(u(e))},o.handleMouseLeave=function(e){o.props.onMouseLeave&&o.props.onMouseLeave(e),o.started&&o.handleSwipeEnd(u(e))},o.handleMouseMove=function(e){o.props.onMouseMove&&o.props.onMouseMove(e),o.started&&o.handleSwipeMove(u(e))},o.handleScroll=function(e){if(o.props.onScroll&&o.props.onScroll(e),e.target===o.rootNode){if(o.ignoreNextScrollEvents)return void(o.ignoreNextScrollEvents=!1);var t=o.state.indexLatest,n=Math.ceil(e.target.scrollLeft/e.target.clientWidth)+t;o.ignoreNextScrollEvents=!0,e.target.scrollLeft=0,o.props.onChangeIndex&&n!==t&&o.props.onChangeIndex(n,t)}},r=t,(0,S["default"])(o,r)}return(0,T["default"])(n,e),(0,j["default"])(n,[{key:"getChildContext",value:function(){var e=this;return{swipeableViews:{slideUpdateHeight:function(){e.updateHeight()}}}}},{key:"componentWillMount",value:function(){"production"!==t.env.NODE_ENV&&(0,F.checkIndexBounds)(this.props),this.setState({indexCurrent:this.props.index,indexLatest:this.props.index,isDragging:!1,isFirstRender:!this.props.disableLazyLoading,heightLatest:0})}},{key:"componentDidMount",value:function(){var e=this;this.transitionListener=r(this.containerNode,D["default"].end,function(t){t.target===e.containerNode&&e.handleTransitionEnd()}),this.touchMoveListener=r(this.rootNode,"touchmove",function(t){e.props.disabled||e.handleSwipeMove(t)},{passive:!1}),this.setState({isFirstRender:!1}),i()}},{key:"componentWillReceiveProps",value:function(e){var n=e.index;"number"==typeof n&&n!==this.props.index&&("production"!==t.env.NODE_ENV&&(0,F.checkIndexBounds)(e),this.setState({displaySameSlide:(0,F.getDisplaySameSlide)(this.props,e),indexCurrent:n,indexLatest:n}))}},{key:"componentDidUpdate",value:function(e,t){this.props.animateTransitions||t.indexCurrent===this.state.indexCurrent||this.handleTransitionEnd()}},{key:"componentWillUnmount",value:function(){this.transitionListener.remove(),this.touchMoveListener.remove()}},{key:"handleTransitionEnd",value:function(){this.props.onTransitionEnd&&(this.state.displaySameSlide||this.state.isDragging||this.props.onTransitionEnd())}},{key:"updateHeight",value:function(){if(null!==this.activeSlide){var e=this.activeSlide.children[0];void 0!==e&&void 0!==e.offsetHeight&&this.state.heightLatest!==e.offsetHeight&&this.setState({heightLatest:e.offsetHeight})}}},{key:"render",value:function(){var e=this,n=this.props,o=n.animateHeight,r=n.animateTransitions,i=n.axis,s=n.children,u=n.containerStyle,c=n.disabled,l=(n.disableLazyLoading,n.enableMouseEvents),f=(n.hysteresis,n.ignoreNativeScroll,n.index,n.onChangeIndex,n.onSwitching,n.onTransitionEnd,n.resistance,n.slideStyle),p=n.slideClassName,b=n.springConfig,v=n.style,_=(n.threshold,(0,y["default"])(n,["animateHeight","animateTransitions","axis","children","containerStyle","disabled","disableLazyLoading","enableMouseEvents","hysteresis","ignoreNativeScroll","index","onChangeIndex","onSwitching","onTransitionEnd","resistance","slideStyle","slideClassName","springConfig","style","threshold"])),g=this.state,m=g.displaySameSlide,w=g.heightLatest,j=g.indexCurrent,x=g.isDragging,S=g.isFirstRender,O=c?{}:{onTouchStart:this.handleTouchStart,onTouchEnd:this.handleTouchEnd},T=!c&&l?{onMouseDown:this.handleMouseDown,onMouseUp:this.handleMouseUp,onMouseLeave:this.handleMouseLeave,onMouseMove:this.handleMouseMove}:{};"production"!==t.env.NODE_ENV?(0,L["default"])(!o||!u||!u.height,"react-swipeable-view: You are setting animateHeight to true but you are\nalso providing a custom height.\nThe custom height has a higher priority than the animateHeight property.\nSo animateHeight is most likely having no effect at all."):void 0;var M=(0,h["default"])({},X.slide,f),P=void 0,C=void 0;if(x||!r||m)P="all 0s ease 0s",C="all 0s ease 0s";else if(P=a("transform",b),C=a("-webkit-transform",b),0!==w){var N=", "+a("height",b);P+=N,C+=N}var D=V.transform[i](100*j),R={WebkitTransform:D,transform:D,height:null,WebkitFlexDirection:V.flexDirection[i],flexDirection:V.flexDirection[i],WebkitTransition:C,transition:P};return o&&(R.height=w),k["default"].createElement("div",(0,d["default"])({ref:function(t){e.rootNode=t},style:(0,h["default"])({},V.root[i],v)},_,O,T,{onScroll:this.handleScroll}),k["default"].createElement("div",{ref:function(t){e.containerNode=t},style:(0,h["default"])({},R,X.container,u),className:"react-swipeable-view-container"},E.Children.map(s,function(n,r){if(S&&r>0)return null;"production"!==t.env.NODE_ENV?(0,L["default"])((0,E.isValidElement)(n),"react-swipeable-view: one of the children provided is invalid: "+n+".\nWe are expecting a valid React Element"):void 0;var i=void 0,a=!0;return r===e.state.indexLatest&&(a=!1,o&&(i=function(t){e.activeSlide=t,e.updateHeight()},M.overflowY="hidden")),k["default"].createElement("div",{ref:i,style:M,className:p,"aria-hidden":a,"data-swipeable":"true"},n)})))}}]),n}(E.Component);U.displayName="ReactSwipableView",U.defaultProps={animateHeight:!1,animateTransitions:!0,axis:"x",disabled:!1,disableLazyLoading:!1,enableMouseEvents:!1,hysteresis:.6,ignoreNativeScroll:!1,index:0,threshold:5,springConfig:{duration:"0.35s",easeFunction:"cubic-bezier(0.15, 0.3, 0.25, 1)",delay:"0s"},resistance:!1},U.childContextTypes={swipeableViews:P["default"].shape({slideUpdateHeight:P["default"].func})},U.propTypes="production"!==t.env.NODE_ENV?{animateHeight:P["default"].bool,animateTransitions:P["default"].bool,axis:P["default"].oneOf(["x","x-reverse","y","y-reverse"]),children:P["default"].node.isRequired,containerStyle:P["default"].object,disabled:P["default"].bool,disableLazyLoading:P["default"].bool,enableMouseEvents:P["default"].bool,hysteresis:P["default"].number,ignoreNativeScroll:P["default"].bool,index:P["default"].number,onChangeIndex:P["default"].func,onMouseDown:P["default"].func,onMouseLeave:P["default"].func,onMouseMove:P["default"].func,onMouseUp:P["default"].func,onScroll:P["default"].func,onSwitching:P["default"].func,onTouchEnd:P["default"].func,onTouchMove:P["default"].func,onTouchStart:P["default"].func,onTransitionEnd:P["default"].func,resistance:P["default"].bool,slideClassName:P["default"].string,slideStyle:P["default"].object,springConfig:P["default"].shape({duration:P["default"].string,easeFunction:P["default"].string,delay:P["default"].string}),style:P["default"].object,threshold:P["default"].number}:{},n["default"]=U}).call(this,e("_process"))},{_process:96,"babel-runtime/core-js/object/assign":1,"babel-runtime/core-js/object/get-prototype-of":4,"babel-runtime/helpers/classCallCheck":8,"babel-runtime/helpers/createClass":9,"babel-runtime/helpers/extends":10,"babel-runtime/helpers/inherits":11,"babel-runtime/helpers/objectWithoutProperties":12,"babel-runtime/helpers/possibleConstructorReturn":13,"dom-helpers/events/off":92,"dom-helpers/events/on":93,"dom-helpers/transition/properties":94,"prop-types":100,react:void 0,"react-swipeable-views-core":109,warning:113}],112:[function(e,t,n){"use strict";function o(e){return e&&e.__esModule?e:{"default":e}}Object.defineProperty(n,"__esModule",{value:!0});var r=e("./SwipeableViews"),i=o(r);n["default"]=i["default"]},{"./SwipeableViews":111}],113:[function(e,t,n){"use strict";var o=function(){};t.exports=o},{}],114:[function(e,t,n){(function(o){"use strict";function r(e){return e&&e.__esModule?e:{"default":e}}function i(e,t){if(!(e instanceof t))throw new TypeError("Cannot call a class as a function")}function a(e,t){if("function"!=typeof t&&null!==t)throw new TypeError("Super expression must either be null or a function, not "+typeof t);e.prototype=Object.create(t&&t.prototype,{constructor:{value:e,enumerable:!1,writable:!0,configurable:!0}}),t&&(Object.setPrototypeOf?Object.setPrototypeOf(e,t):e.__proto__=t)}Object.defineProperty(n,"__esModule",{value:!0});var s=function(){function e(e,t){for(var n=0;n<t.length;n++){var o=t[n];o.enumerable=o.enumerable||!1,o.configurable=!0,"value"in o&&(o.writable=!0),Object.defineProperty(e,o.key,o)}}return function(t,n,o){return n&&e(t.prototype,n),o&&e(t,o),t}}(),u=function(e,t,n){for(var o=!0;o;){var r=e,i=t,a=n;o=!1,null===r&&(r=Function.prototype);var s=Object.getOwnPropertyDescriptor(r,i);if(void 0!==s){if("value"in s)return s.value;var u=s.get;if(void 0===u)return;return u.call(a)}var c=Object.getPrototypeOf(r);if(null===c)return;e=c,t=i,n=a,o=!0,s=c=void 0}},c="undefined"!=typeof window?window.React:"undefined"!=typeof o?o.React:null,l=(r(c),e("prop-types")),f=r(l),d=function(e){function t(e){i(this,t),u(Object.getPrototypeOf(t.prototype),"constructor",this).call(this,e),this.onWindowResize=this.onWindowResize.bind(this)}return a(t,e),s(t,[{key:"onWindowResize",value:function(){var e=window.innerHeight;e!==this.props.height&&this.props.onHeightChange(e)}},{key:"componentWillMount",value:function(){window.addEventListener("resize",this.onWindowResize)}},{key:"componentWillUnmount",value:function(){window.removeEventListener("resize",this.onWindowResize)}},{key:"render",value:function(){return null}}]),t}(c.Component);d.propTypes={height:f["default"].number,onHeightChange:f["default"].func},n["default"]=d,t.exports=n["default"]}).call(this,"undefined"!=typeof global?global:"undefined"!=typeof self?self:"undefined"!=typeof window?window:{})},{"prop-types":100}],115:[function(e,t,n){(function(o){"use strict";function r(e){return e&&e.__esModule?e:{"default":e}}function i(e,t){if(!(e instanceof t))throw new TypeError("Cannot call a class as a function")}function a(e,t){if("function"!=typeof t&&null!==t)throw new TypeError("Super expression must either be null or a function, not "+typeof t);e.prototype=Object.create(t&&t.prototype,{constructor:{value:e,enumerable:!1,writable:!0,configurable:!0}}),t&&(Object.setPrototypeOf?Object.setPrototypeOf(e,t):e.__proto__=t)}Object.defineProperty(n,"__esModule",{value:!0});var s=function(){function e(e,t){for(var n=0;n<t.length;n++){var o=t[n];o.enumerable=o.enumerable||!1,o.configurable=!0,"value"in o&&(o.writable=!0),Object.defineProperty(e,o.key,o)}}return function(t,n,o){return n&&e(t.prototype,n),o&&e(t,o),t}}(),u=function(e,t,n){for(var o=!0;o;){var r=e,i=t,a=n;o=!1,null===r&&(r=Function.prototype);var s=Object.getOwnPropertyDescriptor(r,i);if(void 0!==s){if("value"in s)return s.value;var u=s.get;if(void 0===u)return;return u.call(a)}var c=Object.getPrototypeOf(r);if(null===c)return;e=c,t=i,n=a,o=!0,s=c=void 0}},c="undefined"!=typeof window?window.React:"undefined"!=typeof o?o.React:null,l=(r(c),e("prop-types")),f=r(l),d=function(e){function t(){i(this,t),u(Object.getPrototypeOf(t.prototype),"constructor",this).apply(this,arguments)}return a(t,e),s(t,[{key:"componentDidMount",value:function(){this.props.element().scrollTop=0}},{key:"render",value:function(){return null}}]),t}(c.Component);d.propTypes={element:f["default"].func.isRequired},n["default"]=d,t.exports=n["default"]}).call(this,"undefined"!=typeof global?global:"undefined"!=typeof self?self:"undefined"!=typeof window?window:{})},{"prop-types":100}],116:[function(e,t,n){(function(o){"use strict";function r(e){return e&&e.__esModule?e:{"default":e}}function i(e,t){if(!(e instanceof t))throw new TypeError("Cannot call a class as a function")}function a(e,t){if("function"!=typeof t&&null!==t)throw new TypeError("Super expression must either be null or a function, not "+typeof t);e.prototype=Object.create(t&&t.prototype,{constructor:{value:e,enumerable:!1,writable:!0,configurable:!0}}),t&&(Object.setPrototypeOf?Object.setPrototypeOf(e,t):e.__proto__=t)}Object.defineProperty(n,"__esModule",{value:!0});var s=Object.assign||function(e){for(var t=1;t<arguments.length;t++){var n=arguments[t];for(var o in n)Object.prototype.hasOwnProperty.call(n,o)&&(e[o]=n[o])}return e},u=function(){function e(e,t){for(var n=0;n<t.length;n++){var o=t[n];o.enumerable=o.enumerable||!1,o.configurable=!0,"value"in o&&(o.writable=!0),Object.defineProperty(e,o.key,o)}}return function(t,n,o){return n&&e(t.prototype,n),o&&e(t,o),t}}(),c=function(e,t,n){for(var o=!0;o;){var r=e,i=t,a=n;o=!1,null===r&&(r=Function.prototype);var s=Object.getOwnPropertyDescriptor(r,i);if(void 0!==s){if("value"in s)return s.value;var u=s.get;if(void 0===u)return;return u.call(a)}var c=Object.getPrototypeOf(r);if(null===c)return;e=c,t=i,n=a,o=!0,s=c=void 0}},l="undefined"!=typeof window?window.React:"undefined"!=typeof o?o.React:null,f=r(l),d=e("prop-types"),p=r(d),h=e("react-swipeable-views"),b=r(h),y=e("./HeightUpdater"),v=r(y),_=e("./ScrollToTop"),g=r(_),m=function(e){function t(e){i(this,t),c(Object.getPrototypeOf(t.prototype),"constructor",this).call(this,e),this.onHeightChange=this.onHeightChange.bind(this),this.onChangeIndex=this.onChangeIndex.bind(this),this.onTransitionEnd=this.onTransitionEnd.bind(this),this.state={open:e.defaultOpen,height:window.innerHeight}}return a(t,e),u(t,[{key:"onHeightChange",value:function(e){this.setState({height:e})}},{key:"onChangeIndex",value:function(e){var t=1===e;void 0===this.props.open&&this.setState({open:t}),void 0!==this.props.onChange&&this.props.onChange(t)}},{key:"onTransitionEnd",value:function(){var e=this.props,t=e.overflowHeight,n=e.swipeableViewsProps;0===t&&(this.bodyElt.scrollTop=0),n.onTransitionEnd&&n.onTransitionEnd()}},{key:"render",value:function(){var e=this,t=this.props,n=t.overflowHeight,o=t.fullScreen,r=t.marginTop,i=t.open,a=t.topShadow,u=t.shadowTip,c=t.overlay,l=t.swipeableViewsProps,d=t.scrollTopAtClose,p=0===n,h=void 0!==i,y=h?i:this.state.open,_=p&&!y,m=y?1:0,w=this.state.height-r,j={root:s({height:n,position:"fixed",bottom:0,right:0,left:0},this.props.style),swiper:{root:s({overflowY:"initial",boxSizing:"border-box"},l.style),container:s({boxSizing:"border-box"},a&&!_&&{boxShadow:"rgba(0, 0, 0, 0.156863) 0px -6px 5px"},l.containerStyle),slide:s({boxSizing:"border-box",overflow:"visible",marginBottom:-n},l.slideStyle),bottomSlide:{marginBottom:n},body:s({overflow:y?"auto":"hidden",backgroundColor:"white",height:o?w:"initial",maxHeight:w},this.props.bodyStyle)},overlay:s({position:"fixed",top:0,right:0,left:0,height:this.state.height,transition:"opacity 450ms",pointerEvents:"none",backgroundColor:"black",opacity:0},y&&{opacity:.54,pointerEvents:"auto"},this.props.overlayStyle),shadowTip:{position:"fixed",height:60,width:"200%",bottom:-60,left:"-50%",boxShadow:"rgba(0, 0, 0, 0.7) 0px 0px 30px",transition:"transform 450ms",transform:y?"translateY(50px)":"translateY(0)"}};return f["default"].createElement("div",{style:j.root},f["default"].createElement(v["default"],{height:this.state.height,onHeightChange:this.onHeightChange}),c&&f["default"].createElement("div",{style:j.overlay,onClick:function(){return e.onChangeIndex(0)}}),f["default"].createElement(b["default"],s({index:m,axis:"y",enableMouseEvents:!0,onChangeIndex:this.onChangeIndex},this.props.swipeableViewsProps,{onTransitionEnd:this.onTransitionEnd,style:j.swiper.root,containerStyle:j.swiper.container,slideStyle:j.swiper.slide}),f["default"].createElement("div",{ref:function(t){return e.bodyElt=t},style:j.swiper.body,className:"ReactSwipeableBottomSheet--"+(y?"open":"closed")},this.props.children),f["default"].createElement("div",{style:j.swiper.bottomSlide})),u&&!_&&f["default"].createElement("div",{style:j.shadowTip}),!y&&d&&!p&&f["default"].createElement(g["default"],{element:function(){return e.bodyElt}}))}}]),t}(l.Component);m.propTypes={bodyStyle:p["default"].object,children:p["default"].node.isRequired,defaultOpen:p["default"].bool,fullScreen:p["default"].bool,marginTop:p["default"].number,onChange:p["default"].func,onTransitionEnd:p["default"].func,open:p["default"].bool,overflowHeight:p["default"].number,overlay:p["default"].bool,overlayStyle:p["default"].object,scrollTopAtClose:p["default"].bool,shadowTip:p["default"].bool,style:p["default"].object,swipeableViewsProps:p["default"].object,topShadow:p["default"].bool},m.defaultProps={defaultOpen:!1,fullScreen:!1,marginTop:0,overflowHeight:0,overlay:!0,scrollTopAtClose:!0,shadowTip:!0,swipeableViewsProps:{},topShadow:!0},n["default"]=m,t.exports=n["default"]}).call(this,"undefined"!=typeof global?global:"undefined"!=typeof self?self:"undefined"!=typeof window?window:{})},{"./HeightUpdater":114,"./ScrollToTop":115,"prop-types":100,"react-swipeable-views":112}]},{},[116])(116)});


--------------------------------------------------------------------------------
/example/src/.gitignore:
--------------------------------------------------------------------------------
1 | ## This file is here to ensure it is included in the gh-pages branch,
2 | ## when `gulp deploy` is used to push updates to the demo site.
3 | 
4 | # Dependency directory
5 | node_modules
6 | 


--------------------------------------------------------------------------------
/example/src/controlled.html:
--------------------------------------------------------------------------------
 1 | <!doctype html>
 2 | <head>
 3 | 	<title>Swipeable Bottom Sheet</title>
 4 | 	<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
 5 | 	<link rel="stylesheet" href="example.css">
 6 | </head>
 7 | <body>
 8 | 	<div class="container">
 9 | 		<h1>Swipeable Bottom Sheet</h1>
10 | 		<h2><a href="https://github.com/manufont/react-swipeable-bottom-sheet">View project on GitHub</a></h2>
11 | 		<!-- the example app is rendered into this div -->
12 | 		<div id="app"></div>
13 | 		<div class="hint">
14 | 			This example shows a controlled Swipeable Bottom Sheet.<br/>
15 | 			<a href="https://github.com/manufont/react-swipeable-bottom-sheet/blob/master/example/src/controlled.js">Show me the code</a><br/><br/>
16 | 			<a href="index.html">See uncontrolled example</a><br/>
17 | 			<a href="fullscreen.html">See fullscreen example</a><br/>
18 | 			<a href="scroll.html">See scrollable example</a>
19 | 		</div>
20 | 	</div>
21 | 	<script src="common.js"></script>
22 | 	<script src="bundle.js"></script>
23 | 	<script src="controlled.js"></script>
24 | </body>
25 | 


--------------------------------------------------------------------------------
/example/src/controlled.js:
--------------------------------------------------------------------------------
 1 | import React from 'react';
 2 | import ReactDOM from 'react-dom';
 3 | import SwipeableBottomSheet from 'react-swipeable-bottom-sheet';
 4 | 
 5 | class App extends React.Component {
 6 | 	constructor(props){
 7 | 		super(props);
 8 | 
 9 | 		this.state = {
10 | 			open: false
11 | 		};
12 | 	};
13 | 
14 | 	openBottomSheet(open){
15 | 		this.setState({ open });
16 | 	};
17 | 
18 | 	toggleBottomSheet(){
19 | 		this.openBottomSheet(!this.state.open);
20 | 	};
21 | 
22 | 	render () {
23 | 		const styles={
24 | 			title:{
25 | 				backgroundColor: '#00bcd4',
26 | 				padding: '16px 0',
27 | 				boxSizing: 'border-box',
28 | 				color: 'white',
29 | 				minHeight: '64px',
30 | 				fontSize: '24px',
31 | 				textAlign: 'center',
32 | 				flex:1
33 | 			},
34 | 			text:{
35 | 				padding: '10px',
36 | 				boxSizing: 'border-box',
37 | 				backgroundColor: 'white',
38 | 				fontSize: '18px',
39 | 				minHeight: '50vh'
40 | 			}
41 | 		};
42 | 
43 | 		return (
44 | 			<div>
45 | 				<SwipeableBottomSheet
46 | 					overflowHeight={64}
47 | 					open={this.state.open}
48 | 					onChange={this.openBottomSheet.bind(this)}
49 | 				>
50 | 					<div style={styles.title}>
51 | 						Controlled bottom sheet&nbsp;
52 | 						<button onClick={this.toggleBottomSheet.bind(this)}>
53 | 							{this.state.open ? 'Close' : 'Open'}
54 | 						</button>
55 | 					</div>
56 | 					<div style={styles.text}>
57 | 						Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et
58 | 						dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco
59 | 						laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in
60 | 						reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
61 | 						Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia
62 | 						deserunt mollit anim id est laborum.
63 | 					</div>
64 | 				</SwipeableBottomSheet>
65 | 			</div>
66 | 		);
67 | 	}
68 | };
69 | 
70 | ReactDOM.render(<App />, document.getElementById('app'));
71 | 


--------------------------------------------------------------------------------
/example/src/example.less:
--------------------------------------------------------------------------------
 1 | /* 
 2 | // Examples Stylesheet
 3 | // -------------------
 4 | */
 5 | 
 6 | body {
 7 | 	font-family: Helvetica Neue, Helvetica, Arial, sans-serif;
 8 | 	font-size: 14px;
 9 | 	color: #333;
10 | 	margin: 0;
11 | 	padding: 0;
12 | }
13 | 
14 | a {
15 | 	color: #08c;
16 | 	text-decoration: none;
17 | }
18 | 
19 | a:hover {
20 | 	text-decoration: underline;
21 | }
22 | 
23 | .container {
24 | 	margin-left: auto;
25 | 	margin-right: auto;
26 | 	max-width: 720px;
27 | 	padding: 1em;
28 | }
29 | 
30 | .footer {
31 | 	margin-top: 50px;
32 | 	border-top: 1px solid #eee;
33 | 	padding: 20px 0;
34 | 	font-size: 12px;
35 | 	color: #999;
36 | }
37 | 
38 | h1, h2, h3, h4, h5, h6 {
39 | 	color: #222;
40 | 	font-weight: 100;
41 | 	margin: 0.5em 0;
42 | }
43 | 
44 | label {
45 | 	color: #999;
46 | 	display: inline-block;
47 | 	font-size: 0.85em;
48 | 	font-weight: bold;
49 | 	margin: 1em 0;
50 | 	text-transform: uppercase;
51 | }
52 | 
53 | .hint {
54 | 	margin: 15px 0;
55 | 	font-style: italic;
56 | 	color: #999;
57 | }
58 | 


--------------------------------------------------------------------------------
/example/src/fullscreen.html:
--------------------------------------------------------------------------------
 1 | <!doctype html>
 2 | <head>
 3 | 	<title>Swipeable Bottom Sheet</title>
 4 | 	<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
 5 | 	<link rel="stylesheet" href="example.css">
 6 | </head>
 7 | <body>
 8 | 	<div class="container">
 9 | 		<h1>Swipeable Bottom Sheet</h1>
10 | 		<h2><a href="https://github.com/manufont/react-swipeable-bottom-sheet">View project on GitHub</a></h2>
11 | 		<!-- the example app is rendered into this div -->
12 | 		<div id="app"></div>
13 | 		<div class="hint">
14 | 			This example shows a fullscreen, controlled Swipeable Bottom Sheet.<br/>
15 | 			<a href="https://github.com/manufont/react-swipeable-bottom-sheet/blob/master/example/src/fullscreen.js">Show me the code</a><br/><br/>
16 | 			<a href="index.html">See uncontrolled example</a><br/>
17 | 			<a href="controlled.html">See controlled example</a><br/>
18 | 			<a href="scroll.html">See scrollable example</a>
19 | 		</div>
20 | 	</div>
21 | 	<script src="common.js"></script>
22 | 	<script src="bundle.js"></script>
23 | 	<script src="fullscreen.js"></script>
24 | </body>
25 | 


--------------------------------------------------------------------------------
/example/src/fullscreen.js:
--------------------------------------------------------------------------------
 1 | import React from 'react';
 2 | import ReactDOM from 'react-dom';
 3 | import SwipeableBottomSheet from 'react-swipeable-bottom-sheet';
 4 | 
 5 | class App extends React.Component {
 6 | 	constructor(props){
 7 | 		super(props);
 8 | 
 9 | 		this.state = {
10 | 			open: false
11 | 		};
12 | 	};
13 | 
14 | 	openBottomSheet(open){
15 | 		this.setState({ open });
16 | 	};
17 | 
18 | 	render () {
19 | 		const styles={
20 | 			title:{
21 | 				backgroundColor: '#00bcd4',
22 | 				padding: '16px 0',
23 | 				boxSizing: 'border-box',
24 | 				color: 'white',
25 | 				fontSize: '24px',
26 | 				textAlign: 'center'
27 | 			},
28 | 			text:{
29 | 				padding: '10px',
30 | 				boxSizing: 'border-box',
31 | 				backgroundColor: 'white',
32 | 				fontSize: '18px',
33 | 			}
34 | 		};
35 | 
36 | 		return (
37 | 			<div>
38 | 				<button onClick={() => this.openBottomSheet(true)}>
39 | 					Open bottom sheet
40 | 				</button>
41 | 				<SwipeableBottomSheet
42 | 					open={this.state.open}
43 | 					onChange={this.openBottomSheet.bind(this)}
44 | 					fullScreen
45 | 				>
46 | 					<div style={styles.title}>
47 | 						Fullscreen bottom sheet
48 | 					</div>
49 | 					<div style={styles.text}>
50 | 						Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et
51 | 						dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco
52 | 						laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in
53 | 						reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
54 | 						Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia
55 | 						deserunt mollit anim id est laborum.<br/>
56 | 						<button onClick={() => this.openBottomSheet(false)}>
57 | 							Close
58 | 						</button>
59 | 					</div>
60 | 				</SwipeableBottomSheet>
61 | 			</div>
62 | 		);
63 | 	}
64 | };
65 | 
66 | ReactDOM.render(<App />, document.getElementById('app'));
67 | 


--------------------------------------------------------------------------------
/example/src/index.html:
--------------------------------------------------------------------------------
 1 | <!doctype html>
 2 | <head>
 3 | 	<title>Swipeable Bottom Sheet</title>
 4 | 	<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
 5 | 	<link rel="stylesheet" href="example.css">
 6 | </head>
 7 | <body>
 8 | 	<div class="container">
 9 | 		<h1>Swipeable Bottom Sheet</h1>
10 | 		<h2><a href="https://github.com/manufont/react-swipeable-bottom-sheet">View project on GitHub</a></h2>
11 | 		<!-- the example app is rendered into this div -->
12 | 		<div id="app"></div>
13 | 		<div class="hint">
14 | 			This example shows a basic, uncontrolled Swipeable Bottom Sheet.<br/>
15 | 			Here, the bottom sheet height scales automatically with its content.<br/>
16 | 			<a href="https://github.com/manufont/react-swipeable-bottom-sheet/blob/master/example/src/uncontrolled.js">Show me the code</a><br/><br/>
17 | 			<a href="controlled.html">See controlled example</a><br/>
18 | 			<a href="fullscreen.html">See fullscreen example</a><br/>
19 | 			<a href="scroll.html">See scrollable example</a>
20 | 		</div>
21 | 	</div>
22 | 	<script src="common.js"></script>
23 | 	<script src="bundle.js"></script>
24 | 	<script src="uncontrolled.js"></script>
25 | </body>
26 | 


--------------------------------------------------------------------------------
/example/src/scroll.html:
--------------------------------------------------------------------------------
 1 | <!doctype html>
 2 | <head>
 3 | 	<title>Swipeable Bottom Sheet</title>
 4 | 	<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
 5 | 	<link rel="stylesheet" href="example.css">
 6 | </head>
 7 | <body>
 8 | 	<div class="container">
 9 | 		<h1>Swipeable Bottom Sheet</h1>
10 | 		<h2><a href="https://github.com/manufont/react-swipeable-bottom-sheet">View project on GitHub</a></h2>
11 | 		<!-- the example app is rendered into this div -->
12 | 		<div id="app"></div>
13 | 		<div class="hint">
14 | 			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/>
15 | 			<a href="https://github.com/manufont/react-swipeable-bottom-sheet/blob/master/example/src/scroll.js">Show me the code</a><br/><br/>
16 | 			<a href="index.html">See uncontrolled example</a><br/>
17 | 			<a href="controlled.html">See controlled example</a><br/>
18 | 			<a href="fullscreen.html">See fullscreen example</a>
19 | 		</div>
20 | 	</div>
21 | 	<script src="common.js"></script>
22 | 	<script src="bundle.js"></script>
23 | 	<script src="scroll.js"></script>
24 | </body>
25 | 


--------------------------------------------------------------------------------
/example/src/scroll.js:
--------------------------------------------------------------------------------
 1 | import React from 'react';
 2 | import ReactDOM from 'react-dom';
 3 | import SwipeableBottomSheet from 'react-swipeable-bottom-sheet';
 4 | 
 5 | class App extends React.Component {
 6 | 
 7 | 	render () {
 8 | 		const styles={
 9 | 			title:{
10 | 				backgroundColor: '#00bcd4',
11 | 				padding: '16px 0',
12 | 				boxSizing: 'border-box',
13 | 				color: 'white',
14 | 				minHeight: '64px',
15 | 				fontSize: '24px',
16 | 				textAlign: 'center'
17 | 			},
18 | 			colouredDiv: hue => ({
19 | 				height: '100px',
20 | 				backgroundColor: `hsl(${hue%360}, 80%, 80%)`
21 | 			})
22 | 		};
23 | 
24 | 		return (
25 | 			<SwipeableBottomSheet
26 | 				overflowHeight={64}
27 | 				marginTop={128}
28 | 			>
29 | 				<div style={styles.title}>
30 | 					Scrollable bottom sheet
31 | 				</div>
32 | 				{Array(30).fill().map((o, i) => 
33 | 					<div key={i} style={styles.colouredDiv(i*20)} />
34 | 				)}
35 | 			</SwipeableBottomSheet>
36 | 		);
37 | 	}
38 | };
39 | 
40 | ReactDOM.render(<App />, document.getElementById('app'));
41 | 


--------------------------------------------------------------------------------
/example/src/uncontrolled.js:
--------------------------------------------------------------------------------
 1 | import React from 'react';
 2 | import ReactDOM from 'react-dom';
 3 | import SwipeableBottomSheet from 'react-swipeable-bottom-sheet';
 4 | 
 5 | class App extends React.Component {
 6 | 	render () {
 7 | 		const styles={
 8 | 			title:{
 9 | 				backgroundColor: '#00bcd4',
10 | 				padding: '16px 0',
11 | 				boxSizing: 'border-box',
12 | 				color: 'white',
13 | 				minHeight: '64px',
14 | 				fontSize: '24px',
15 | 				textAlign: 'center'
16 | 			},
17 | 			text:{
18 | 				padding: '10px',
19 | 				boxSizing: 'border-box',
20 | 				backgroundColor: 'white',
21 | 				fontSize: '18px',
22 | 				minHeight: '50vh'
23 | 			}
24 | 		};
25 | 
26 | 		return (
27 | 			<SwipeableBottomSheet overflowHeight={64}>
28 | 				<div style={styles.title}>
29 | 					Swipeable bottom sheet
30 | 				</div>
31 | 				<div style={styles.text}>
32 | 					Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et
33 | 					dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco
34 | 					laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in
35 | 					reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
36 | 					Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia
37 | 					deserunt mollit anim id est laborum.
38 | 				</div>
39 | 			</SwipeableBottomSheet>
40 | 		);
41 | 	}
42 | };
43 | 
44 | ReactDOM.render(<App />, document.getElementById('app'));
45 | 


--------------------------------------------------------------------------------
/gulpfile.js:
--------------------------------------------------------------------------------
 1 | var gulp = require('gulp');
 2 | var initGulpTasks = require('react-component-gulp-tasks');
 3 | 
 4 | /**
 5 |  * Tasks are added by the react-component-gulp-tasks package
 6 |  *
 7 |  * See https://github.com/JedWatson/react-component-gulp-tasks
 8 |  * for documentation.
 9 |  *
10 |  * You can also add your own additional gulp tasks if you like.
11 |  */
12 | 
13 | var taskConfig = {
14 | 
15 | 	component: {
16 | 		name: 'SwipeableBottomSheet',
17 | 		dependencies: [
18 | 			'classnames',
19 | 			'react',
20 | 			'react-dom'
21 | 		],
22 | 		lib: 'lib'
23 | 	},
24 | 
25 | 	example: {
26 | 		src: 'example/src',
27 | 		dist: 'example/dist',
28 | 		files: [
29 | 			'index.html',
30 | 			'controlled.html',
31 | 			'fullscreen.html',
32 | 			'scroll.html',
33 | 			'.gitignore'
34 | 		],
35 | 		scripts: [
36 | 			'uncontrolled.js',
37 | 			'controlled.js',
38 | 			'fullscreen.js',
39 | 			'scroll.js'
40 | 		],
41 | 		less: [
42 | 			'example.less'
43 | 		]
44 | 	}
45 | 
46 | };
47 | 
48 | initGulpTasks(gulp, taskConfig);
49 | 


--------------------------------------------------------------------------------
/lib/HeightUpdater.js:
--------------------------------------------------------------------------------
 1 | 'use strict';
 2 | 
 3 | Object.defineProperty(exports, '__esModule', {
 4 | 	value: true
 5 | });
 6 | 
 7 | 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; }; })();
 8 | 
 9 | 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); } } };
10 | 
11 | function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { 'default': obj }; }
12 | 
13 | function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError('Cannot call a class as a function'); } }
14 | 
15 | 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; }
16 | 
17 | var _react = require('react');
18 | 
19 | var _react2 = _interopRequireDefault(_react);
20 | 
21 | var _propTypes = require('prop-types');
22 | 
23 | var _propTypes2 = _interopRequireDefault(_propTypes);
24 | 
25 | var HeightUpdater = (function (_Component) {
26 | 	_inherits(HeightUpdater, _Component);
27 | 
28 | 	function HeightUpdater(props) {
29 | 		_classCallCheck(this, HeightUpdater);
30 | 
31 | 		_get(Object.getPrototypeOf(HeightUpdater.prototype), 'constructor', this).call(this, props);
32 | 
33 | 		this.onWindowResize = this.onWindowResize.bind(this);
34 | 	}
35 | 
36 | 	_createClass(HeightUpdater, [{
37 | 		key: 'onWindowResize',
38 | 		value: function onWindowResize() {
39 | 			var height = window.innerHeight;
40 | 			if (height !== this.props.height) {
41 | 				this.props.onHeightChange(height);
42 | 			}
43 | 		}
44 | 	}, {
45 | 		key: 'componentWillMount',
46 | 		value: function componentWillMount() {
47 | 			window.addEventListener('resize', this.onWindowResize);
48 | 		}
49 | 	}, {
50 | 		key: 'componentWillUnmount',
51 | 		value: function componentWillUnmount() {
52 | 			window.removeEventListener('resize', this.onWindowResize);
53 | 		}
54 | 	}, {
55 | 		key: 'render',
56 | 		value: function render() {
57 | 			return null;
58 | 		}
59 | 	}]);
60 | 
61 | 	return HeightUpdater;
62 | })(_react.Component);
63 | 
64 | HeightUpdater.propTypes = {
65 | 	height: _propTypes2['default'].number,
66 | 	onHeightChange: _propTypes2['default'].func
67 | };
68 | 
69 | exports['default'] = HeightUpdater;
70 | module.exports = exports['default'];


--------------------------------------------------------------------------------
/lib/ScrollToTop.js:
--------------------------------------------------------------------------------
 1 | 'use strict';
 2 | 
 3 | Object.defineProperty(exports, '__esModule', {
 4 | 	value: true
 5 | });
 6 | 
 7 | 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; }; })();
 8 | 
 9 | 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); } } };
10 | 
11 | function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { 'default': obj }; }
12 | 
13 | function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError('Cannot call a class as a function'); } }
14 | 
15 | 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; }
16 | 
17 | var _react = require('react');
18 | 
19 | var _react2 = _interopRequireDefault(_react);
20 | 
21 | var _propTypes = require('prop-types');
22 | 
23 | var _propTypes2 = _interopRequireDefault(_propTypes);
24 | 
25 | var ScrollToTop = (function (_Component) {
26 | 	_inherits(ScrollToTop, _Component);
27 | 
28 | 	function ScrollToTop() {
29 | 		_classCallCheck(this, ScrollToTop);
30 | 
31 | 		_get(Object.getPrototypeOf(ScrollToTop.prototype), 'constructor', this).apply(this, arguments);
32 | 	}
33 | 
34 | 	_createClass(ScrollToTop, [{
35 | 		key: 'componentDidMount',
36 | 		value: function componentDidMount() {
37 | 			this.props.element().scrollTop = 0;
38 | 		}
39 | 	}, {
40 | 		key: 'render',
41 | 		value: function render() {
42 | 			return null;
43 | 		}
44 | 	}]);
45 | 
46 | 	return ScrollToTop;
47 | })(_react.Component);
48 | 
49 | ScrollToTop.propTypes = {
50 | 	element: _propTypes2['default'].func.isRequired
51 | };
52 | 
53 | exports['default'] = ScrollToTop;
54 | module.exports = exports['default'];


--------------------------------------------------------------------------------
/lib/SwipeableBottomSheet.js:
--------------------------------------------------------------------------------
  1 | 'use strict';
  2 | 
  3 | Object.defineProperty(exports, '__esModule', {
  4 | 	value: true
  5 | });
  6 | 
  7 | 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; };
  8 | 
  9 | 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; }; })();
 10 | 
 11 | 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); } } };
 12 | 
 13 | function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { 'default': obj }; }
 14 | 
 15 | function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError('Cannot call a class as a function'); } }
 16 | 
 17 | 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; }
 18 | 
 19 | var _react = require('react');
 20 | 
 21 | var _react2 = _interopRequireDefault(_react);
 22 | 
 23 | var _propTypes = require('prop-types');
 24 | 
 25 | var _propTypes2 = _interopRequireDefault(_propTypes);
 26 | 
 27 | var _reactSwipeableViews = require('react-swipeable-views');
 28 | 
 29 | var _reactSwipeableViews2 = _interopRequireDefault(_reactSwipeableViews);
 30 | 
 31 | var _HeightUpdater = require('./HeightUpdater');
 32 | 
 33 | var _HeightUpdater2 = _interopRequireDefault(_HeightUpdater);
 34 | 
 35 | var _ScrollToTop = require('./ScrollToTop');
 36 | 
 37 | var _ScrollToTop2 = _interopRequireDefault(_ScrollToTop);
 38 | 
 39 | var SwipeableBottomSheet = (function (_Component) {
 40 | 	_inherits(SwipeableBottomSheet, _Component);
 41 | 
 42 | 	function SwipeableBottomSheet(props) {
 43 | 		_classCallCheck(this, SwipeableBottomSheet);
 44 | 
 45 | 		_get(Object.getPrototypeOf(SwipeableBottomSheet.prototype), 'constructor', this).call(this, props);
 46 | 
 47 | 		this.onHeightChange = this.onHeightChange.bind(this);
 48 | 		this.onChangeIndex = this.onChangeIndex.bind(this);
 49 | 		this.onTransitionEnd = this.onTransitionEnd.bind(this);
 50 | 
 51 | 		this.state = {
 52 | 			open: props.defaultOpen,
 53 | 			height: window.innerHeight
 54 | 		};
 55 | 	}
 56 | 
 57 | 	_createClass(SwipeableBottomSheet, [{
 58 | 		key: 'onHeightChange',
 59 | 		value: function onHeightChange(height) {
 60 | 			this.setState({ height: height });
 61 | 		}
 62 | 	}, {
 63 | 		key: 'onChangeIndex',
 64 | 		value: function onChangeIndex(index) {
 65 | 			var open = index === 1;
 66 | 			if (this.props.open === undefined) {
 67 | 				this.setState({ open: open });
 68 | 			}
 69 | 			if (this.props.onChange !== undefined) {
 70 | 				this.props.onChange(open);
 71 | 			}
 72 | 		}
 73 | 	}, {
 74 | 		key: 'onTransitionEnd',
 75 | 		value: function onTransitionEnd() {
 76 | 			var _props = this.props;
 77 | 			var overflowHeight = _props.overflowHeight;
 78 | 			var swipeableViewsProps = _props.swipeableViewsProps;
 79 | 
 80 | 			if (overflowHeight === 0) {
 81 | 				this.bodyElt.scrollTop = 0;
 82 | 			}
 83 | 			if (swipeableViewsProps.onTransitionEnd) {
 84 | 				swipeableViewsProps.onTransitionEnd();
 85 | 			}
 86 | 		}
 87 | 	}, {
 88 | 		key: 'render',
 89 | 		value: function render() {
 90 | 			var _this = this;
 91 | 
 92 | 			var _props2 = this.props;
 93 | 			var overflowHeight = _props2.overflowHeight;
 94 | 			var fullScreen = _props2.fullScreen;
 95 | 			var marginTop = _props2.marginTop;
 96 | 			var open = _props2.open;
 97 | 			var topShadow = _props2.topShadow;
 98 | 			var shadowTip = _props2.shadowTip;
 99 | 			var overlay = _props2.overlay;
100 | 			var swipeableViewsProps = _props2.swipeableViewsProps;
101 | 			var scrollTopAtClose = _props2.scrollTopAtClose;
102 | 
103 | 			var hiddenWhenClosed = overflowHeight === 0;
104 | 			var isControlled = open !== undefined;
105 | 			var isOpen = isControlled ? open : this.state.open;
106 | 			var hideShadows = hiddenWhenClosed && !isOpen;
107 | 			var index = isOpen ? 1 : 0;
108 | 			var maxHeight = this.state.height - marginTop;
109 | 
110 | 			var styles = {
111 | 				root: _extends({
112 | 					height: overflowHeight,
113 | 					position: 'fixed',
114 | 					bottom: 0,
115 | 					right: 0,
116 | 					left: 0
117 | 				}, this.props.style),
118 | 				swiper: {
119 | 					root: _extends({
120 | 						overflowY: 'initial',
121 | 						boxSizing: 'border-box'
122 | 					}, swipeableViewsProps.style),
123 | 					container: _extends({
124 | 						boxSizing: 'border-box'
125 | 					}, topShadow && !hideShadows && {
126 | 						boxShadow: 'rgba(0, 0, 0, 0.156863) 0px -6px 5px'
127 | 					}, swipeableViewsProps.containerStyle),
128 | 					slide: _extends({
129 | 						boxSizing: 'border-box',
130 | 						overflow: 'visible',
131 | 						marginBottom: -overflowHeight
132 | 					}, swipeableViewsProps.slideStyle),
133 | 					bottomSlide: {
134 | 						marginBottom: overflowHeight
135 | 					},
136 | 					body: _extends({
137 | 						overflow: isOpen ? 'auto' : 'hidden',
138 | 						backgroundColor: 'white',
139 | 						height: fullScreen ? maxHeight : 'initial',
140 | 						maxHeight: maxHeight
141 | 					}, this.props.bodyStyle)
142 | 				},
143 | 				overlay: _extends({
144 | 					position: 'fixed',
145 | 					top: 0,
146 | 					right: 0,
147 | 					left: 0,
148 | 					height: this.state.height,
149 | 					transition: 'opacity 450ms',
150 | 					pointerEvents: 'none',
151 | 					backgroundColor: 'black',
152 | 					opacity: 0
153 | 				}, isOpen && {
154 | 					opacity: 0.54,
155 | 					pointerEvents: 'auto'
156 | 				}, this.props.overlayStyle),
157 | 				shadowTip: {
158 | 					position: 'fixed',
159 | 					height: 60,
160 | 					width: '200%',
161 | 					bottom: -60,
162 | 					left: '-50%',
163 | 					boxShadow: 'rgba(0, 0, 0, 0.7) 0px 0px 30px',
164 | 					transition: 'transform 450ms',
165 | 					transform: isOpen ? 'translateY(50px)' : 'translateY(0)'
166 | 				}
167 | 			};
168 | 
169 | 			return _react2['default'].createElement(
170 | 				'div',
171 | 				{ style: styles.root },
172 | 				_react2['default'].createElement(_HeightUpdater2['default'], {
173 | 					height: this.state.height,
174 | 					onHeightChange: this.onHeightChange
175 | 				}),
176 | 				overlay && _react2['default'].createElement('div', { style: styles.overlay, onClick: function () {
177 | 						return _this.onChangeIndex(0);
178 | 					} }),
179 | 				_react2['default'].createElement(
180 | 					_reactSwipeableViews2['default'],
181 | 					_extends({
182 | 						index: index,
183 | 						axis: 'y',
184 | 						enableMouseEvents: true,
185 | 						onChangeIndex: this.onChangeIndex
186 | 					}, this.props.swipeableViewsProps, {
187 | 						onTransitionEnd: this.onTransitionEnd,
188 | 						style: styles.swiper.root,
189 | 						containerStyle: styles.swiper.container,
190 | 						slideStyle: styles.swiper.slide
191 | 					}),
192 | 					_react2['default'].createElement(
193 | 						'div',
194 | 						{
195 | 							ref: function (elt) {
196 | 								return _this.bodyElt = elt;
197 | 							},
198 | 							style: styles.swiper.body,
199 | 							className: 'ReactSwipeableBottomSheet--' + (isOpen ? 'open' : 'closed')
200 | 						},
201 | 						this.props.children
202 | 					),
203 | 					_react2['default'].createElement('div', { style: styles.swiper.bottomSlide })
204 | 				),
205 | 				shadowTip && !hideShadows && _react2['default'].createElement('div', { style: styles.shadowTip }),
206 | 				!isOpen && scrollTopAtClose && !hiddenWhenClosed && _react2['default'].createElement(_ScrollToTop2['default'], { element: function () {
207 | 						return _this.bodyElt;
208 | 					} })
209 | 			);
210 | 		}
211 | 	}]);
212 | 
213 | 	return SwipeableBottomSheet;
214 | })(_react.Component);
215 | 
216 | ;
217 | 
218 | SwipeableBottomSheet.propTypes = {
219 | 	bodyStyle: _propTypes2['default'].object,
220 | 	children: _propTypes2['default'].node.isRequired,
221 | 	defaultOpen: _propTypes2['default'].bool,
222 | 	fullScreen: _propTypes2['default'].bool,
223 | 	marginTop: _propTypes2['default'].number,
224 | 	onChange: _propTypes2['default'].func,
225 | 	onTransitionEnd: _propTypes2['default'].func,
226 | 	open: _propTypes2['default'].bool,
227 | 	overflowHeight: _propTypes2['default'].number,
228 | 	overlay: _propTypes2['default'].bool,
229 | 	overlayStyle: _propTypes2['default'].object,
230 | 	scrollTopAtClose: _propTypes2['default'].bool,
231 | 	shadowTip: _propTypes2['default'].bool,
232 | 	style: _propTypes2['default'].object,
233 | 	swipeableViewsProps: _propTypes2['default'].object,
234 | 	topShadow: _propTypes2['default'].bool
235 | };
236 | 
237 | SwipeableBottomSheet.defaultProps = {
238 | 	defaultOpen: false,
239 | 	fullScreen: false,
240 | 	marginTop: 0,
241 | 	overflowHeight: 0,
242 | 	overlay: true,
243 | 	scrollTopAtClose: true,
244 | 	shadowTip: true,
245 | 	swipeableViewsProps: {},
246 | 	topShadow: true
247 | };
248 | 
249 | exports['default'] = SwipeableBottomSheet;
250 | module.exports = exports['default'];


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "react-swipeable-bottom-sheet",
 3 |   "version": "1.1.2",
 4 |   "description": "Swipeable Bottom Sheet",
 5 |   "main": "lib/SwipeableBottomSheet.js",
 6 |   "author": "Emmanuel Fonteneau",
 7 |   "homepage": "https://github.com/manufont/react-swipeable-bottom-sheet",
 8 |   "licence": "MIT",
 9 |   "repository": {
10 |     "type": "git",
11 |     "url": "https://github.com/manufont/react-swipeable-bottom-sheet.git"
12 |   },
13 |   "bugs": {
14 |     "url": "https://github.com/manufont/react-swipeable-bottom-sheet/issues"
15 |   },
16 |   "dependencies": {
17 |     "classnames": "^2.2.6",
18 |     "react-swipeable-views": "^0.14.0-alpha.0"
19 |   },
20 |   "devDependencies": {
21 |     "babel-eslint": "^10.1.0",
22 |     "eslint": "^7.9.0",
23 |     "eslint-plugin-react": "^7.20.6",
24 |     "gulp": "^3.9.1",
25 |     "react": "^16.13.0",
26 |     "react-component-gulp-tasks": "^0.7.7",
27 |     "react-dom": "^16.13.0"
28 |   },
29 |   "peerDependencies": {
30 |     "react": "^16.13.0"
31 |   },
32 |   "browserify-shim": {
33 |     "react": "global:React"
34 |   },
35 |   "scripts": {
36 |     "build": "gulp clean && NODE_ENV=production gulp build",
37 |     "examples": "gulp dev:server",
38 |     "lint": "eslint ./; true",
39 |     "publish:site": "NODE_ENV=production gulp publish:examples",
40 |     "release": "NODE_ENV=production gulp release",
41 |     "start": "gulp dev",
42 |     "test": "echo \"no tests yet\" && exit 0",
43 |     "watch": "gulp watch:lib"
44 |   },
45 |   "keywords": [
46 |     "react",
47 |     "react-component"
48 |   ]
49 | }
50 | 


--------------------------------------------------------------------------------
/src/HeightUpdater.js:
--------------------------------------------------------------------------------
 1 | import React, { Component } from 'react';
 2 | import PropTypes from 'prop-types';
 3 | 
 4 | 
 5 | class HeightUpdater extends Component {
 6 | 	constructor(props){
 7 | 		super(props);
 8 | 
 9 | 		this.onWindowResize = this.onWindowResize.bind(this);
10 | 	}
11 | 
12 | 	onWindowResize(){
13 | 		const height = window.innerHeight;
14 | 		if(height !== this.props.height){
15 | 			this.props.onHeightChange(height);
16 | 		}
17 | 	}
18 | 
19 | 	componentDidMount(){
20 | 		window.addEventListener('resize', this.onWindowResize);
21 | 	}
22 | 
23 | 	componentWillUnmount(){
24 | 		window.removeEventListener('resize', this.onWindowResize);
25 | 	}
26 | 
27 | 	render(){
28 | 		return null;
29 | 	}
30 | }
31 | 
32 | HeightUpdater.propTypes = {
33 | 	height: PropTypes.number,
34 | 	onHeightChange: PropTypes.func
35 | };
36 | 
37 | export default HeightUpdater;
38 | 


--------------------------------------------------------------------------------
/src/ScrollToTop.js:
--------------------------------------------------------------------------------
 1 | import React, { Component } from 'react';
 2 | import PropTypes from 'prop-types';
 3 | 
 4 | 
 5 | class ScrollToTop extends Component {
 6 | 
 7 | 	componentDidMount(){
 8 | 		this.props.element().scrollTop = 0;
 9 | 	}
10 | 
11 | 	render(){
12 | 		return null;
13 | 	}
14 | }
15 | 
16 | ScrollToTop.propTypes = {
17 | 	element: PropTypes.func.isRequired
18 | };
19 | 
20 | export default ScrollToTop;


--------------------------------------------------------------------------------
/src/SwipeableBottomSheet.js:
--------------------------------------------------------------------------------
  1 | import React, { Component } from 'react';
  2 | import PropTypes from 'prop-types';
  3 | import SwipeableViews from 'react-swipeable-views';
  4 | 
  5 | import HeightUpdater from './HeightUpdater';
  6 | import ScrollToTop from './ScrollToTop';
  7 | 
  8 | 
  9 | class SwipeableBottomSheet extends Component {
 10 | 
 11 | 	constructor(props){
 12 | 		super(props);
 13 | 
 14 | 		this.onHeightChange = this.onHeightChange.bind(this);
 15 | 		this.onChangeIndex = this.onChangeIndex.bind(this);
 16 | 		this.onTransitionEnd = this.onTransitionEnd.bind(this);
 17 | 
 18 | 		this.state = {
 19 | 			open: props.defaultOpen,
 20 | 			height: window.innerHeight
 21 | 		};
 22 | 	};
 23 | 
 24 | 	onHeightChange(height){
 25 | 		this.setState({ height });
 26 | 	}
 27 | 
 28 | 	onChangeIndex(index){
 29 | 		const open = index === 1;
 30 | 		if(this.props.open === undefined){
 31 | 			this.setState({ open });
 32 | 		}
 33 | 		if(this.props.onChange !== undefined){
 34 | 			this.props.onChange(open);
 35 | 		}
 36 | 	};
 37 | 
 38 | 	onTransitionEnd(){
 39 | 		const { overflowHeight, swipeableViewsProps } = this.props;
 40 | 		if(overflowHeight === 0){
 41 | 			this.bodyElt.scrollTop = 0;
 42 | 		}
 43 | 		if(swipeableViewsProps.onTransitionEnd){
 44 | 			swipeableViewsProps.onTransitionEnd();
 45 | 		}
 46 | 	};
 47 | 
 48 | 
 49 | 	render() {
 50 | 
 51 | 		const {
 52 | 			overflowHeight,
 53 | 			fullScreen,
 54 | 			marginTop,
 55 | 			open,
 56 | 			topShadow,
 57 | 			shadowTip,
 58 | 			overlay,
 59 | 			swipeableViewsProps,
 60 | 			scrollTopAtClose
 61 | 		} = this.props;
 62 | 
 63 | 		const hiddenWhenClosed = overflowHeight === 0;
 64 | 		const isControlled = open !== undefined;
 65 | 		const isOpen = isControlled ? open : this.state.open;
 66 | 		const hideShadows = hiddenWhenClosed && !isOpen;
 67 | 		const index = isOpen ? 1 : 0;
 68 | 		const maxHeight = this.state.height - marginTop;
 69 | 
 70 | 
 71 | 		const styles = {
 72 | 			root:{
 73 | 				height: overflowHeight,
 74 | 				position: 'fixed',
 75 | 				bottom: 0,
 76 | 				right: 0,
 77 | 				left: 0,
 78 | 				...this.props.style
 79 | 			},
 80 | 			swiper:{
 81 | 				root:{
 82 | 					overflowY: 'initial',
 83 | 					boxSizing: 'border-box',
 84 | 					...swipeableViewsProps.style
 85 | 				},
 86 | 				container: {
 87 | 					boxSizing: 'border-box',
 88 | 					...topShadow && !hideShadows && {
 89 | 						boxShadow: 'rgba(0, 0, 0, 0.156863) 0px -6px 5px',
 90 | 					},
 91 | 					...swipeableViewsProps.containerStyle
 92 | 				},
 93 | 				slide:{
 94 | 					boxSizing: 'border-box',
 95 | 					overflow: 'visible',
 96 | 					marginBottom: -overflowHeight,
 97 | 					...swipeableViewsProps.slideStyle
 98 | 				},
 99 | 				bottomSlide:{
100 | 					marginBottom: overflowHeight,
101 | 				},
102 | 				body:{
103 | 					overflow: isOpen ? 'auto' : 'hidden',
104 | 					backgroundColor: 'white',
105 | 					height: fullScreen ? maxHeight : 'initial',
106 | 					maxHeight: maxHeight,
107 | 					...this.props.bodyStyle
108 | 				}
109 | 			},
110 | 			overlay:{
111 | 				position: 'fixed',
112 | 				top: 0,
113 | 				right: 0,
114 | 				left: 0,
115 | 				height: this.state.height,
116 | 				transition: 'opacity 450ms',
117 | 				pointerEvents: 'none',
118 | 				backgroundColor: 'black',
119 | 				opacity: 0,
120 | 				...isOpen && {
121 | 					opacity: 0.54,
122 | 					pointerEvents: 'auto',
123 | 				},
124 | 				...this.props.overlayStyle
125 | 			},
126 | 			shadowTip:{
127 | 				position: 'fixed',
128 | 				height: 60,
129 | 				width: '200%',
130 | 				bottom: -60,
131 | 				left: '-50%',
132 | 				boxShadow: 'rgba(0, 0, 0, 0.7) 0px 0px 30px',
133 | 				transition: 'transform 450ms',
134 | 				transform: isOpen ? 'translateY(50px)' : 'translateY(0)'
135 | 			}
136 | 		};
137 | 
138 | 		return (
139 | 			<div style={styles.root}>
140 | 				<HeightUpdater
141 | 					height={this.state.height}
142 | 					onHeightChange={this.onHeightChange}
143 | 				/>
144 | 				{overlay &&
145 | 					<div style={styles.overlay} onClick={() => this.onChangeIndex(0)}/>
146 | 				}
147 | 				<SwipeableViews
148 | 					index={index}
149 | 					axis="y"
150 | 					enableMouseEvents
151 | 					onChangeIndex={this.onChangeIndex}
152 | 					{...this.props.swipeableViewsProps}
153 | 					onTransitionEnd={this.onTransitionEnd}
154 | 					style={styles.swiper.root}
155 | 					containerStyle={styles.swiper.container}
156 | 					slideStyle={styles.swiper.slide}
157 | 				>
158 | 					<div
159 | 						ref={elt => this.bodyElt = elt}
160 | 						style={styles.swiper.body}
161 | 						className={`ReactSwipeableBottomSheet--${isOpen ? 'open' : 'closed'}`}
162 | 					>
163 | 						{this.props.children}
164 | 					</div>
165 | 					<div style={styles.swiper.bottomSlide}/>
166 | 				</SwipeableViews>
167 | 				{shadowTip && !hideShadows &&
168 | 					<div style={styles.shadowTip}/>
169 | 				}
170 | 				{!isOpen && scrollTopAtClose && !hiddenWhenClosed &&
171 | 					<ScrollToTop element={() => this.bodyElt}/>
172 | 				}
173 | 			</div>
174 | 		);
175 | 	}
176 | };
177 | 
178 | SwipeableBottomSheet.propTypes = {
179 | 	bodyStyle: PropTypes.object,
180 | 	children: PropTypes.node.isRequired,
181 | 	defaultOpen: PropTypes.bool,
182 | 	fullScreen: PropTypes.bool,
183 | 	marginTop: PropTypes.number,
184 | 	onChange: PropTypes.func,
185 | 	onTransitionEnd: PropTypes.func,
186 | 	open: PropTypes.bool,
187 | 	overflowHeight: PropTypes.number,
188 | 	overlay: PropTypes.bool,
189 | 	overlayStyle: PropTypes.object,
190 | 	scrollTopAtClose: PropTypes.bool,
191 | 	shadowTip: PropTypes.bool,
192 | 	style: PropTypes.object,
193 | 	swipeableViewsProps: PropTypes.object,
194 | 	topShadow: PropTypes.bool
195 | };
196 | 
197 | SwipeableBottomSheet.defaultProps = {
198 | 	defaultOpen: false,
199 | 	fullScreen: false,
200 | 	marginTop: 0,
201 | 	overflowHeight: 0,
202 | 	overlay: true,
203 | 	scrollTopAtClose: true,
204 | 	shadowTip: true,
205 |   	swipeableViewsProps: {},
206 |   	topShadow: true
207 | };
208 | 
209 | export default SwipeableBottomSheet;
210 | 


--------------------------------------------------------------------------------