@rakhimgaliyev/react-bottom-sheet/dist/react-bottom-sheet.cjs.production.min.js

Congrats! You just saved yourself hours of work by bootstrapping this project with TSDX. Let’s get you oriented with what’s here and how to use it.

"use strict";function e(e){return e&&"object"==typeof e&&"default"in e?e.default:e}Object.defineProperty(exports,"__esModule",{value:!0});var t=require("react"),r=e(t),n=require("react-jss"),o=e(require("classnames")),c=e(require("react-dom"));function a(){return(a=Object.assign||function(e){for(var t=1;t<arguments.length;t++){var r=arguments[t];for(var n in r)Object.prototype.hasOwnProperty.call(r,n)&&(e[n]=r[n])}return e}).apply(this,arguments)}var i,s=function(e){var n,o,a=e.children,i=(n=e.id,o=t.useRef(null),t.useEffect((function(){var e=document.querySelector("#"+n),t=e||function(e){var t=document.createElement("div");return t.setAttribute("id",e),t.style.cssText="position: fixed; z-index: 300;",t}(n);return e||document.body.insertBefore(t,document.body.lastElementChild.nextElementSibling),t.appendChild(o.current),function(){o.current.remove(),t.childElementCount||t.remove()}}),[n]),o.current||(o.current=document.createElement("div"),o.current.style.cssText="top: 0px; bottom: 0px; left: 0px; right: 0px; position: fixed; overflow: hidden;"),o.current);return i?c.createPortal(a,i):r.createElement(r.Fragment,null)},l=0,u=n.createUseStyles((function(){return{"@global":{"html[data-hide-scroll], html[data-hide-scroll] body":{position:"relative !important"}},root:{top:"auto",bottom:0,left:0,width:"100%",willChange:"transform",position:"fixed",zIndex:2,"-webkit-transform":"matrix(1, 0, 0, 1, 0, 0)","@media (min-width: 641px)":{left:"50%",maxWidth:500,transform:"translateX(-50%)",transition:"translateX(-50%)"}},rootIsOpen:{pointerEvents:"auto"},mask:{position:"fixed",top:-375,left:0,bottom:0,right:0,opacity:0,background:"rgba(0, 0, 0, 0.7);",transition:"opacity 0.25s cubic-bezier(0.7, 0.3, 0.1, 1)",pointerEvents:"auto","-webkit-transform":"translate3d(0, 0, 0)"},maskIsOpen:{opacity:1},contentWrap:{width:"100%",bottom:0,background:"#fff",overflow:"hidden","-webkit-transform":"translate3d(0,0,0)",zIndex:2,overscrollBehavior:"none",scrollbarWidth:"none","-ms-overflow-style":"none","&::-webkit-scrollbar":{display:"none"},position:"fixed",borderRadius:"30px 30px 0px 0px",display:"flex",justifyContent:"center",transition:"transform 0.25s cubic-bezier(0.7, 0.3, 0.1, 1)"},inner:{width:"100%",overflowY:"hidden",overflowX:"hidden"},content:{display:"flex",flexDirection:"column",width:"100%"},scrollDiv:{display:"flex",flexDirection:"column",width:"100%",overflowY:"auto",overflowX:"hidden"},header:{position:"relative",left:0,top:0,width:"100%"},footer:{position:"relative",left:0,bottom:0,width:"100%"},shadowBox:{pointerEvents:"none",position:"absolute",zIndex:2,width:"100%"}}})),p={startY:0,touchStartY:0,isTop:!0,noScroll:!1,startScrollTop:0};!function(e){e[e.DIALOG_INIT=1]="DIALOG_INIT",e[e.DIALOG_STARTED_TO_OPEN=2]="DIALOG_STARTED_TO_OPEN",e[e.DIALOG_IS_OPENING=3]="DIALOG_IS_OPENING",e[e.DIALOG_IS_OPEN=4]="DIALOG_IS_OPEN",e[e.DIALOG_STARTED_TO_CLOSE=5]="DIALOG_STARTED_TO_CLOSE",e[e.DIALOG_IS_CLOSING=6]="DIALOG_IS_CLOSING",e[e.DIALOG_IS_CLOSED=7]="DIALOG_IS_CLOSED"}(i||(i={})),exports.BottomSheetDialog=function(e){var n=e.open,c=e.setOpen,f=e.children,d=e.header,v=e.footer,I=e.horizontalScrollElRef,O=u(),h=t.useRef(null),S=t.useRef(null),_=t.useRef(null),m=function(){var e=function(){return{width:window.innerWidth,height:window.innerHeight}},r=t.useState(e),n=r[0],o=r[1];return t.useEffect((function(){var t=function(){o(e())};return window.addEventListener("resize",t),function(){return window.removeEventListener("resize",t)}}),[]),n}(),x=t.useState(++l)[0],E=t.useState(i.DIALOG_INIT),L=E[0],D=E[1],T=t.useState(!1),b=T[0],A=T[1],G=t.useState(!1),g=G[0],N=G[1],w=t.useState(p),C=w[0],y=w[1],P=t.useState({curr:0,prev:0}),Y=P[0],R=P[1],X=t.useState(0),k=X[0],H=X[1],z=t.useState({startX:0,startY:0,isCalculated:!1,preventScroll:!1}),W=z[0],j=z[1],B=t.useMemo((function(){return L===i.DIALOG_IS_OPENING||L===i.DIALOG_IS_OPEN}),[L]),q=t.useMemo((function(){if(L===i.DIALOG_INIT||L===i.DIALOG_STARTED_TO_CLOSE||L===i.DIALOG_IS_CLOSING)return 0;if(0!==C.startScrollTop)return 0;var e=C.startY-Y.curr;return e<0&&(C.noScroll||C.isTop)?e:0}),[L,C.startScrollTop,C.startY,C.noScroll,C.isTop,Y.curr]),M=function(){D(i.DIALOG_STARTED_TO_CLOSE)},F=t.useCallback((function(e){if(I&&I.current&&I.current.contains(e.target))return j({startX:e.touches[0].clientX,startY:e.touches[0].clientY,isCalculated:!1,preventScroll:!1}),void e.stopPropagation();if(S.current||!e.cancelable){e.stopPropagation();var t=S.current.scrollHeight-S.current.clientHeight;N(!1),y(a({},C,{startY:e.touches[0].clientY,touchStartY:e.touches[0].clientY,noScroll:0===t,isTop:0===S.current.scrollTop,startScrollTop:S.current.scrollTop}))}else e.preventDefault()}),[I,C]),U=t.useCallback((function(e){if(I&&I.current&&I.current.contains(e.target))if(W.isCalculated)W.preventScroll?e.preventDefault():e.stopPropagation();else{var t=e.touches[0].clientX;Math.abs(W.startX-t)<5?(j({startX:0,startY:0,isCalculated:!0,preventScroll:!0}),e.preventDefault()):j(0===I.current.scrollLeft&&W.startX-t<0||I.current.scrollLeft===I.current.scrollWidth-I.current.clientWidth&&W.startX-t>0?{startX:0,startY:0,isCalculated:!0,preventScroll:!0}:{startX:0,startY:0,isCalculated:!0,preventScroll:!1})}else if(S.current||!e.cancelable){var r=e.touches[0].clientY,n=C.startY-r,o=0===S.current.scrollTop,c=S.current.scrollTop===S.current.scrollHeight-S.current.clientHeight,a=b;g||(o&&n<0&&(A(!0),a=!0),N(!0)),R({curr:r,prev:Y.curr}),(C.noScroll||a||n<0&&o||c&&n>0)&&e.cancelable&&e.preventDefault()}else e.preventDefault()}),[I,W.isCalculated,W.preventScroll,W.startX,b,g,C.noScroll,C.startY,Y.curr]),J=t.useCallback((function(e){if(I&&I.current&&I.current.contains(e.target))e.stopPropagation();else if(S.current||!e.cancelable){if(A(!1),y(a({},C,{isTop:0===S.current.scrollTop})),R({curr:0,prev:0}),0!==C.touchStartY){var t=C.touchStartY-e.changedTouches[0].clientY;if(C.isTop&&t<0){var r=S.current.clientHeight;r>0&&-t>.25*r&&M()}}}else e.preventDefault()}),[I,C]),K=function(e){var t=e.target;H(t.scrollTop/(t.scrollHeight-t.clientHeight))};t.useEffect((function(){n&&L===i.DIALOG_INIT&&D(i.DIALOG_STARTED_TO_OPEN),L===i.DIALOG_STARTED_TO_OPEN&&D(i.DIALOG_IS_OPENING),L===i.DIALOG_STARTED_TO_CLOSE&&D(i.DIALOG_IS_CLOSING),L===i.DIALOG_IS_CLOSED&&(A(!1),N(!1),y(p),R({curr:0,prev:0}),D(i.DIALOG_INIT),n&&c(!1)),n||L!==i.DIALOG_IS_OPEN||M()}),[n,L,c]);var Q=t.useCallback((function(){L===i.DIALOG_IS_OPENING?D(i.DIALOG_IS_OPEN):L===i.DIALOG_IS_CLOSING&&D(i.DIALOG_IS_CLOSED)}),[L]);t.useEffect((function(){return L===i.DIALOG_IS_CLOSED&&_&&_.current&&(_.current.removeEventListener("touchstart",F),_.current.removeEventListener("touchmove",U),_.current.removeEventListener("touchend",J)),_&&_.current&&(_.current.addEventListener("touchstart",F,{passive:!1}),_.current.addEventListener("touchmove",U,{passive:!1}),_.current.addEventListener("touchend",J,{passive:!1})),function(){_&&_.current&&(_.current.removeEventListener("touchstart",F),_.current.removeEventListener("touchmove",U),_.current.removeEventListener("touchend",J))}}),[L,F,U,J]),t.useEffect((function(){L===i.DIALOG_STARTED_TO_OPEN?S&&S.current&&f&&(S.current.scrollHeight!==S.current.clientHeight?(H(0),S.current.addEventListener("scroll",K,{passive:!0})):H(1)):L===i.DIALOG_IS_CLOSED&&S&&S.current&&S.current.removeEventListener("scroll",K)}),[f,L]),t.useEffect((function(){return function(){S&&S.current&&S.current.removeEventListener("scroll",K)}}),[]),t.useEffect((function(){var e=function(e){L!==i.DIALOG_IS_OPEN&&L!==i.DIALOG_IS_OPENING||(e.cancelable&&e.preventDefault(),M())};return h&&h.current&&h.current.addEventListener("touchstart",e,{passive:!1}),function(){h&&h.current&&h.current.removeEventListener("touchstart",e)}}),[L]);var V=t.useMemo((function(){return k>.99?"rgba(0, 0, 0, 0.05) 0px 8px 8px -4px inset, rgba(0, 0, 0, 0) 0px 0px 0px 0px inset, rgba(0, 0, 0, 0) 0px 0px 0px 0px inset, rgba(0, 0, 0, 0) 0px 0px 0px 0px inset":k>.01?"rgba(0, 0, 0, 0.05) 0px 8px 8px -4px inset, rgba(0, 0, 0, 0.05) 0px -8px 8px -4px inset, rgba(0, 0, 0, 0) 0px 0px 0px 0px inset, rgba(0, 0, 0, 0) 0px 0px 0px 0px inset":"rgba(0, 0, 0, 0) 0px 0px 0px 0px inset, rgba(0, 0, 0, 0.05) 0px -8px 8px -4px inset, rgba(0, 0, 0, 0) 0px 0px 0px 0px inset, rgba(0, 0, 0, 0) 0px 0px 0px 0px inset"}),[k]);return L===i.DIALOG_INIT?r.createElement(r.Fragment,null):r.createElement(s,{id:"BottomSheetComponent-"+x},r.createElement("div",{className:o(O.mask,B&&O.maskIsOpen),ref:h}),r.createElement("div",{className:o(O.root,B&&O.rootIsOpen),onTransitionEnd:Q},r.createElement("div",{className:O.contentWrap,style:a({},!B&&{transform:"translateY(100%)"},0!==q&&{transition:"none 0s ease 0s",transform:"translateY("+-q+"px"})},r.createElement("div",{className:O.inner,ref:_},r.createElement("div",{className:O.content,style:{maxHeight:.9*m.height}},r.createElement("div",{className:O.header},d),r.createElement("div",{className:O.scrollDiv,ref:S},r.createElement("div",{className:O.shadowBox,style:a({boxShadow:V},S.current&&{height:S.current.offsetHeight})}),f),r.createElement("div",{className:O.footer},v))))))};
//# sourceMappingURL=react-bottom-sheet.cjs.production.min.js.map