react-swipeable-drawer/dist/react-swipeable-drawer.umd.min.js

A swipeable drawer for the mobile web

!function(e,t){"object"==typeof exports&&"undefined"!=typeof module?t(exports,require("react"),require("prop-types")):"function"==typeof define&&define.amd?define(["exports","react","prop-types"],t):t(e.Drawer={},e.React,e.PropTypes)}(this,function(e,t,n){"use strict";var o="default"in t?t.default:t;n=n&&n.hasOwnProperty("default")?n.default:n;var r=function(e){var t=e.position,n=e.size,r=e.swiping,i=e.translation,a=e.toggleDrawer,s=e.handleTouchStart,l=e.handleTouchMove,h=e.handleTouchEnd,d=e.drawerContent,p=e.overlayStyle,f=e.contentStyle,g=i>0;return o.createElement("div",{className:"DrawerContainer"},o.createElement(u,{position:t,open:g,swiping:r,translation:i,toggleDrawer:a,handleTouchStart:s,handleTouchMove:l,handleTouchEnd:h,style:p}),o.createElement(c,{position:t,size:n,swiping:r,translation:i,toggleDrawer:a,handleTouchStart:s,handleTouchMove:l,handleTouchEnd:h,drawerContent:d,style:f}))};r.propTypes={position:n.oneOf(["left","right","top","bottom"]).isRequired,size:n.number.isRequired,swiping:n.bool.isRequired,translation:n.number.isRequired,toggleDrawer:n.func.isRequired,handleTouchStart:n.func.isRequired,handleTouchMove:n.func.isRequired,handleTouchEnd:n.func.isRequired,drawerContent:n.element.isRequired,overlayStyle:n.object,contentStyle:n.object},r.defaultProps={overlayStyle:{},contentStyle:{}};var i=function(e,t){if(!(e instanceof t))throw new TypeError("Cannot call a class as a function")},a=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}}(),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},l=function(e,t){if(!e)throw new ReferenceError("this hasn't been initialised - super() hasn't been called");return!t||"object"!=typeof t&&"function"!=typeof t?e:t},u=function(e){var t=e.position,n=e.open,r=e.swiping,i=e.translation,a=e.toggleDrawer,l=e.handleTouchStart,u=e.handleTouchMove,c=e.handleTouchEnd,h=e.style;return o.createElement("div",{className:"DrawerOverlay",onClick:n?a:null,onTouchStart:l,onTouchMove:u(100),onTouchEnd:c,style:s({position:"fixed",zIndex:1,backgroundColor:"rgba(0,0,0,"+.6*i/100+")",transition:function(e){var t=e.swiping,n=e.open;return t?"":n?"background-color .2s ease-in-out, width 0s 0s, height 0s 0s":"background-color .2s ease-in-out, width 0s .2s, height 0s 0s"}({swiping:r,open:n})},function(e){var t=e.position,n=e.swiping,o=e.open;switch(t){case"top":return{top:0,left:0,right:0,height:n||o?"100%":"20px"};case"right":return{right:0,top:0,bottom:0,width:n||o?"100%":"20px"};case"bottom":return{bottom:0,left:0,right:0,height:n||o?"100%":"20px"};case"left":default:return{left:0,top:0,bottom:0,width:n||o?"100%":"20px"}}}({position:t,swiping:r,open:n}),h)})};u.propTypes={position:n.oneOf(["left","right","top","bottom"]).isRequired,open:n.bool.isRequired,swiping:n.bool.isRequired,translation:n.number.isRequired,toggleDrawer:n.func.isRequired,handleTouchStart:n.func.isRequired,handleTouchMove:n.func.isRequired,handleTouchEnd:n.func.isRequired,style:n.object.isRequired};var c=function(e){var t=e.position,n=e.size,r=e.swiping,i=e.translation,a=e.handleTouchStart,l=e.handleTouchMove,u=e.handleTouchEnd,c=e.drawerContent,h=e.style;return o.createElement("div",{className:"DrawerContentContainer",onTouchStart:a,onTouchMove:l(n),onTouchEnd:u,style:s({position:"fixed",zIndex:1,transition:r?"":"transform .2s ease-in-out"},function(e){var t=e.position,n=e.size,o=e.translation;switch(t){case"top":return{left:0,right:0,top:"-"+n+"%",height:n+"%",transform:"translateY("+o+"%)"};case"right":return{top:0,bottom:0,right:"-"+n+"%",width:n+"%",transform:"translateX("+-o+"%)"};case"bottom":return{left:0,right:0,bottom:"-"+n+"%",height:n+"%",transform:"translateY("+-o+"%)"};case"left":default:return{top:0,bottom:0,left:"-"+n+"%",width:n+"%",transform:"translateX("+o+"%)"}}}({position:t,size:n,translation:i}),h)},c)};c.propTypes={position:n.oneOf(["left","right","top","bottom"]).isRequired,size:n.number.isRequired,swiping:n.bool.isRequired,translation:n.number.isRequired,handleTouchStart:n.func.isRequired,handleTouchMove:n.func.isRequired,handleTouchEnd:n.func.isRequired,drawerContent:n.element.isRequired,style:n.object.isRequired};var h=function(e){var t=e.translation,n=e.mainContentScroll,r=e.children,i=t>0?{position:"fixed",top:-n,left:0,right:0}:{};return o.createElement("div",{className:"MainContentContainer",style:s({},i)},r)};h.propTypes={translation:n.number.isRequired,mainContentScroll:n.number.isRequired,children:n.node.isRequired};var d=-10,p=100,f=function(e){function n(){var e,t,o;i(this,n);for(var r=arguments.length,a=Array(r),s=0;s<r;s++)a[s]=arguments[s];return t=o=l(this,(e=n.__proto__||Object.getPrototypeOf(n)).call.apply(e,[this].concat(a))),o.state={swiping:!1,scrolling:!1,translation:d,clientX:0,clientY:0},o.mainContentScroll=0,o.saveScrollPosition=function(){o.state.translation===d&&(o.mainContentScroll=window.pageYOffset)},o.toggleDrawer=function(){o.saveScrollPosition(),o.setState(function(e){return{translation:e.translation>50?d:p}})},o.handleTouchStart=function(e){o.saveScrollPosition();var t=e.targetTouches[0],n=t.clientX,r=t.clientY;o.setState({swiping:!0,clientX:n,clientY:r})},o.handleTouchMove=function(e){return function(t){var n=o.props.position,r=o.state,i=r.clientX,a=r.clientY,s=r.scrolling,l=window.innerWidth,u=t.targetTouches[0],c=u.clientX,h=u.clientY,d=Math.abs(c-i),f=Math.abs(h-a);s||f>d?o.setState({scrolling:!0}):"right"===n?o.setState({translation:Math.min((l-c)/(l*e/100)*100,p)}):o.setState({translation:Math.min(c/(l*e/100)*100,p)})}},o.handleTouchEnd=function(){o.setState(function(e){return{swiping:!1,scrolling:!1,translation:e.translation<50?d:p}})},l(o,t)}return function(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)}(n,t.Component),a(n,[{key:"componentDidUpdate",value:function(e,t){var n=this.state.translation;n!==t.translation&&n===d&&window.scrollTo(0,this.mainContentScroll)}},{key:"render",value:function(){var e=this.props,t=e.position,n=e.size,o=e.children,r=this.state;return o({position:t,size:n,swiping:r.swiping,translation:r.translation,mainContentScroll:this.mainContentScroll,toggleDrawer:this.toggleDrawer,handleTouchStart:this.handleTouchStart,handleTouchMove:this.handleTouchMove,handleTouchEnd:this.handleTouchEnd})}}]),n}();f.propTypes={position:n.oneOf(["left","right","top","bottom"]).isRequired,size:n.number.isRequired,children:n.func.isRequired},e.default=f,e.DrawerContainer=r,e.DrawerOverlay=u,e.DrawerContentContainer=c,e.MainContentContainer=h,Object.defineProperty(e,"__esModule",{value:!0})});
//# sourceMappingURL=react-swipeable-drawer.umd.min.js.map