@lifarl/react-scroll-snap-slider/dist/index.js

A React Slider / Carousel Component with Scroll Snapping and Intersection Observer. ***[Demo](https://lifarl.github.io/react-scroll-snap-slider/)***

"use strict";function n(n){return n&&"object"==typeof n&&"default"in n?n.default:n}Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react"),r=n(e),t=n(require("styled-components"));
/*! *****************************************************************************
Copyright (c) Microsoft Corporation. All rights reserved.
Licensed under the Apache License, Version 2.0 (the "License"); you may not use
this file except in compliance with the License. You may obtain a copy of the
License at http://www.apache.org/licenses/LICENSE-2.0

THIS CODE IS PROVIDED ON AN *AS IS* BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
KIND, EITHER EXPRESS OR IMPLIED, INCLUDING WITHOUT LIMITATION ANY IMPLIED
WARRANTIES OR CONDITIONS OF TITLE, FITNESS FOR A PARTICULAR PURPOSE,
MERCHANTABLITY OR NON-INFRINGEMENT.

See the Apache Version 2.0 License for specific language governing permissions
and limitations under the License.
***************************************************************************** */
function i(n,e){return Object.defineProperty?Object.defineProperty(n,"raw",{value:e}):n.raw=e,n}var l,o=t.li(l||(l=i(["\n  scroll-snap-align: center;\n  display: flex;\n  justify-content: center;\n  min-width: ",";\n  :not(:last-child) {\n    margin-right: 8px;\n  }\n\n  @media (min-width: 512px) {\n    ",";\n  }\n\n  @media (min-width: 753px) {\n    ",";\n  }\n\n  @media (min-width: 1232px) {\n    ",";\n  }\n"],["\n  scroll-snap-align: center;\n  display: flex;\n  justify-content: center;\n  min-width: ",";\n  :not(:last-child) {\n    margin-right: 8px;\n  }\n\n  @media (min-width: 512px) {\n    ",";\n  }\n\n  @media (min-width: 753px) {\n    ",";\n  }\n\n  @media (min-width: 1232px) {\n    ",";\n  }\n"])),(function(n){return n.slidesPerPageSettings?100/n.slidesPerPageSettings.mobileSmall+"%":n.slideWidth?n.slideWidth+"px":"100%"}),(function(n){return n.slidesPerPageSettings?"min-width: "+100/n.slidesPerPageSettings.mobileBig+"%":""}),(function(n){return n.slidesPerPageSettings?"min-width: "+100/n.slidesPerPageSettings.tablet+"%":""}),(function(n){return n.slidesPerPageSettings?"min-width: "+100/n.slidesPerPageSettings.desktop+"%":""})),c=r.forwardRef((function(n,e){var t=n.slideIndex,i=n.slidesPerPageSettings,l=n.slideWidth,c=n.children;return r.createElement(o,{slidesPerPageSettings:i,slideWidth:l,"data-index-number":t,key:t,ref:e},c)}));c.displayName="Slide";var s,a,u=t.div(s||(s=i(["\n  position: absolute;\n  ","\n  ","\n  cursor: pointer;\n  transition: all 0.1s ease-in-out;\n  background-color: white;\n  padding: 0.5em;\n  border-radius: 4px;\n  z-index: 1;\n  :active {\n    transform: scale(0.9);\n  }\n\n  @media (max-width: 512px) {\n    display: none !important;\n  }\n"],["\n  position: absolute;\n  ","\n  ","\n  cursor: pointer;\n  transition: all 0.1s ease-in-out;\n  background-color: white;\n  padding: 0.5em;\n  border-radius: 4px;\n  z-index: 1;\n  :active {\n    transform: scale(0.9);\n  }\n\n  @media (max-width: 512px) {\n    display: none !important;\n  }\n"])),(function(n){return"next"===n.direction&&"right: 5%;"}),(function(n){return"prev"===n.direction&&"left: 5%;"})),d=t.svg(a||(a=i(["\n  width: 22px;\n  height: 22px;\n  fill: #676767;\n"],["\n  width: 22px;\n  height: 22px;\n  fill: #676767;\n"]))),f=e.forwardRef((function(n,r){var t=n.direction,i=n.onClick,l="prev"===t?"M5.25 0l-4 4 4 4 1.5-1.5-2.5-2.5 2.5-2.5-1.5-1.5z":"M2.75 0l-1.5 1.5 2.5 2.5-2.5 2.5 1.5 1.5 4-4-4-4z";return e.createElement(u,{direction:t,onClick:i,ref:r},e.createElement(d,{viewBox:"0 0 8 8"},e.createElement("path",{d:l})))}));f.displayName="NavArrow";var p,h,m,v=t.div(p||(p=i(["\n  width: 100%;\n  height: 100%;\n  display: flex;\n  align-items: center;\n"],["\n  width: 100%;\n  height: 100%;\n  display: flex;\n  align-items: center;\n"]))),g=t.div(h||(h=i(["\n  ::-webkit-scrollbar {\n    display: none;\n  }\n  -webkit-overflow-scrolling: touch;\n  -ms-overflow-style: none;\n  scrollbar-width: none;\n  scroll-snap-type: x mandatory;\n  scroll-behavior: smooth;\n  overflow-x: scroll;\n  width: 100%;\n"],["\n  ::-webkit-scrollbar {\n    display: none;\n  }\n  -webkit-overflow-scrolling: touch;\n  -ms-overflow-style: none;\n  scrollbar-width: none;\n  scroll-snap-type: x mandatory;\n  scroll-behavior: smooth;\n  overflow-x: scroll;\n  width: 100%;\n"]))),y=t.ul(m||(m=i(["\n  display: flex;\n  flex-wrap: nowrap;\n  white-space: nowrap;\n  list-style: none;\n  width: 100%;\n  padding: 0;\n  margin: 0;\n"],["\n  display: flex;\n  flex-wrap: nowrap;\n  white-space: nowrap;\n  list-style: none;\n  width: 100%;\n  padding: 0;\n  margin: 0;\n"]))),w=e.forwardRef((function(n,t){var i=n.renderCustomArrow,l=n.slidesPerPageSettings,o=n.slideWidth,s=n.onScrollStart,a=n.onScrollEnd,u=n.onSlidesVisibilityChange,d=n.onSlideVisible,p=n.children,h=e.useState(!1),m=h[0],w=h[1],x=e.useRef(null),b=e.useRef(null),S=e.useRef([]),P=e.useRef(null),k=e.useRef(null),C=e.useRef(null),E=e.useRef(0),R=e.useRef(0),W=e.useRef([]),N=e.useCallback((function(n,e){S.current[e]=n}),[]),j=e.useCallback((function(){var n,e,r;return(null===(r=null===(e=null===(n=b.current)||void 0===n?void 0:n.firstChild)||void 0===e?void 0:e.firstChild)||void 0===r?void 0:r.clientWidth)||0}),[]),M=e.useCallback((function(n){n.forEach((function(n){var e,r,t=n.target,i=Number(t.dataset.indexNumber);if(n.intersectionRatio>=.5)return E.current=i,W.current.push(i),W.current.sort(),null===(e=S.current[i])||void 0===e||e.setAttribute("aria-hidden","false"),void(d&&d(i));W.current=W.current.filter((function(n){return n!==i})),null===(r=S.current[i])||void 0===r||r.setAttribute("aria-hidden","true")})),R.current=W.current[Math.floor(W.current.length/2)],u&&u(R.current)}),[]),A=e.useCallback((function(){if(!b.current)return!1;var n=b.current.clientWidth,e=j()-1;return S.current.length*e>n}),[]),I=function(n){var e="prev"===n?-1:1;if(b.current){var r=j(),t=Math.floor(b.current.clientWidth/r);b.current.scrollBy({top:0,behavior:"smooth",left:t*r*e})}},z=e.useCallback((function(n){b.current&&b.current.scrollTo({top:0,behavior:"smooth",left:n})}),[]),O=e.useCallback((function(n){if(b.current){var e=b.current.scrollLeft,r=b.current.clientWidth,t=j(),i=t*n;i<e?z(i):i+t>e+r&&z(i+t-r)}}),[]);return e.useImperativeHandle(t,(function(){return{scrollToSlide:O,sliderRef:b}})),e.useEffect((function(){C.current&&C.current.disconnect();for(var n=function(n,e,r,t){void 0===n&&(n=null);var i=e.current;if(null!==i)return i;var l=new IntersectionObserver(r,{root:n,rootMargin:"0px",threshold:t});return e.current=l,l}(b.current,C,M,.5),e=0,r=S.current;e<r.length;e++){var t=r[e];t&&n.observe(t)}return function(){return n.disconnect()}}),[r.Children.count(p)]),e.useEffect((function(){m&&s&&s(R.current)}),[m]),e.useEffect((function(){if(A()&&b.current&&k.current&&P.current)return m?(k.current.style.display="none",void(P.current.style.display="none")):void(b.current.scrollLeft<=30?(k.current.style.display="block",P.current.style.display="none"):b.current.clientWidth+b.current.scrollLeft>=b.current.scrollWidth-30?(P.current.style.display="block",k.current.style.display="none"):(k.current.style.display="block",P.current.style.display="block"))}),[r.Children.count(p),m]),r.createElement(v,null,i?r.createElement(r.Fragment,null,i({direction:"prev",ref:P,onClick:I}),i({direction:"next",ref:k,onClick:I})):r.createElement(r.Fragment,null,r.createElement(f,{ref:P,direction:"prev",onClick:function(){return I("prev")}}),r.createElement(f,{ref:k,direction:"next",onClick:function(){return I("next")}})),r.createElement(g,{onScroll:function(){x.current&&clearTimeout(x.current),x.current=setTimeout((function(){x.current=null,w(!1),a&&a(R.current)}),250),m||w(!0)},ref:b,tabIndex:0},r.createElement(y,null,e.Children.map(p,(function(n,e){return r.createElement(c,{key:e,slideIndex:e,slidesPerPageSettings:l,slideWidth:o,ref:function(n){return N(n,e)}},n)})))))}));w.displayName="Carousel";var x=w;exports.Slider=x,exports.StyledArrow=d,exports.StyledCarousel=v,exports.StyledNavWrapper=u,exports.StyledSlide=o,exports.StyledSlider=g,exports.StyledUl=y;
//# sourceMappingURL=index.js.map