@shopgate/pwa-common/components/Swiper/index.js

Common library for the Shopgate Connect PWA.

var _excluded=["maxIndicators","indicators","controls","aria-hidden","disabled","autoPlay","interval","classNames","className","onSlideChange","additionalModules","children"];function _defineProperty(obj,key,value){if(key in obj){Object.defineProperty(obj,key,{value:value,enumerable:true,configurable:true,writable:true});}else{obj[key]=value;}return obj;}function _extends(){_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;};return _extends.apply(this,arguments);}function _typeof(obj){if(typeof Symbol==="function"&&typeof Symbol.iterator==="symbol"){_typeof=function _typeof(obj){return typeof obj;};}else{_typeof=function _typeof(obj){return obj&&typeof Symbol==="function"&&obj.constructor===Symbol&&obj!==Symbol.prototype?"symbol":typeof obj;};}return _typeof(obj);}function _objectWithoutProperties(source,excluded){if(source==null)return{};var target=_objectWithoutPropertiesLoose(source,excluded);var key,i;if(Object.getOwnPropertySymbols){var sourceSymbolKeys=Object.getOwnPropertySymbols(source);for(i=0;i<sourceSymbolKeys.length;i++){key=sourceSymbolKeys[i];if(excluded.indexOf(key)>=0)continue;if(!Object.prototype.propertyIsEnumerable.call(source,key))continue;target[key]=source[key];}}return target;}function _objectWithoutPropertiesLoose(source,excluded){if(source==null)return{};var target={};var sourceKeys=Object.keys(source);var key,i;for(i=0;i<sourceKeys.length;i++){key=sourceKeys[i];if(excluded.indexOf(key)>=0)continue;target[key]=source[key];}return target;}import React,{useMemo,useCallback,useEffect,useRef}from'react';import PropTypes from'prop-types';import cls from'classnames';import{A11y,Autoplay,FreeMode,Navigation,Pagination,Zoom}from'swiper/modules';import'swiper/swiper.min.css';import'swiper/modules/a11y.min.css';import'swiper/modules/pagination.min.css';import'swiper/modules/navigation.min.css';import'swiper/modules/zoom.min.css';import{useReduceMotion}from'@shopgate/engage/a11y/hooks';import SwiperItem from"./components/SwiperItem";import OriginalSwiper from"./components/OriginalSwiper";import{container,innerContainer,zoomFix,buttonNext,buttonPrev}from"./styles";/**
 * @typedef {import('swiper/react').SwiperProps} SwiperCmpProps
 */ /**
 * The basic Swiper component. It acts as a wrapper for the Swiper JS library component.
 *
 * This component wraps the [Swiper](https://swiperjs.com/) library's main component.
 * Refer to the [Swiper documentation](https://swiperjs.com/react) for details on the available props.
 *
 * @param {SwiperCmpProps} props The component props.
 * @returns {JSX.Element}
 */var Swiper=function Swiper(_ref){var maxIndicators=_ref.maxIndicators,indicators=_ref.indicators,controls=_ref.controls,ariaHidden=_ref['aria-hidden'],disabled=_ref.disabled,autoPlay=_ref.autoPlay,interval=_ref.interval,classNames=_ref.classNames,className=_ref.className,onSlideChange=_ref.onSlideChange,additionalModules=_ref.additionalModules,children=_ref.children,swiperProps=_objectWithoutProperties(_ref,_excluded);var useFraction=maxIndicators&&maxIndicators<children.length;var paginationType=useFraction?'fraction':'bullets';var showPagination=indicators&&children.length>1;var hasControls=typeof controls==='boolean'&&controls===true;var reduceMotion=useReduceMotion();var swiperRef=useRef(null);var navigation=useMemo(function(){var nav;if(hasControls){nav={// Important to use dot notation (swiper uses it as selector internally)
nextEl:".swiper-button-next.".concat(buttonNext),prevEl:".swiper-button-prev.".concat(buttonPrev)};}if(_typeof(controls)==='object'){nav=controls;}return nav;},[controls,hasControls]);var handleSlideChange=useCallback(function(swiper){if(typeof onSlideChange==='function'){onSlideChange(swiper.realIndex,swiper);}},[onSlideChange]);/**
   * @type {SwiperCmpProps}
   */var internalProps=useMemo(function(){return _extends({modules:[A11y,Autoplay,FreeMode,Navigation,Pagination,Zoom].concat(Array.isArray(additionalModules)?additionalModules:[]),className:cls(innerContainer,classNames.container,_defineProperty({},zoomFix,swiperProps===null||swiperProps===void 0?void 0:swiperProps.zoom)),autoplay:autoPlay?{delay:interval}:false,navigation:navigation},showPagination&&{pagination:{el:undefined,type:paginationType,bulletClass:classNames.bulletClass||'swiper-pagination-bullet',bulletActiveClass:classNames.bulletActiveClass||'swiper-pagination-bullet-active',dynamicBullets:true,clickable:true,enabled:indicators&&children.length>1}},{allowSlidePrev:!disabled,allowSlideNext:!disabled,onSlideChange:handleSlideChange});},[additionalModules,classNames.container,classNames.bulletClass,classNames.bulletActiveClass,swiperProps,autoPlay,interval,navigation,showPagination,paginationType,indicators,children.length,disabled,handleSlideChange]);useEffect(function(){var _swiperRef$current,_swiperRef$current$sw;if(!internalProps.autoplay&&!swiperProps.autoplay){return;}if((_swiperRef$current=swiperRef.current)===null||_swiperRef$current===void 0?void 0:(_swiperRef$current$sw=_swiperRef$current.swiper)===null||_swiperRef$current$sw===void 0?void 0:_swiperRef$current$sw.autoplay){if(reduceMotion){swiperRef.current.swiper.autoplay.stop();}else{swiperRef.current.swiper.autoplay.start();}}},[internalProps.autoplay,reduceMotion,swiperProps.autoplay]);return React.createElement("div",{className:cls(container,className,'common__swiper'),"aria-hidden":ariaHidden},React.createElement(OriginalSwiper,_extends({"aria-live":"off",a11y:{enabled:false}},internalProps,swiperProps,{ref:swiperRef}),children,hasControls&&React.createElement(React.Fragment,null,React.createElement("div",{className:"swiper-button-next ".concat(buttonNext)}),React.createElement("div",{className:"swiper-button-prev ".concat(buttonPrev)}))));};Swiper.Item=SwiperItem;Swiper.defaultProps={'aria-hidden':false,additionalModules:null,autoPlay:false,className:null,classNames:{},controls:false,indicators:false,interval:3000,maxIndicators:null,disabled:false,onSlideChange:null};export default Swiper;