first commit
This commit is contained in:
@@ -0,0 +1,51 @@
|
||||
import { paramsList } from './params-list';
|
||||
import { isObject } from './utils';
|
||||
|
||||
function getChangedParams(swiperParams, oldParams, children, oldChildren) {
|
||||
var keys = [];
|
||||
if (!oldParams) return keys;
|
||||
|
||||
var addKey = function addKey(key) {
|
||||
if (keys.indexOf(key) < 0) keys.push(key);
|
||||
};
|
||||
|
||||
var oldChildrenKeys = oldChildren.map(function (child) {
|
||||
return child.key;
|
||||
});
|
||||
var childrenKeys = children.map(function (child) {
|
||||
return child.key;
|
||||
});
|
||||
if (oldChildrenKeys.join('') !== childrenKeys.join('')) addKey('children');
|
||||
if (oldChildren.length !== children.length) addKey('children');
|
||||
var watchParams = paramsList.filter(function (key) {
|
||||
return key[0] === '_';
|
||||
}).map(function (key) {
|
||||
return key.replace(/_/, '');
|
||||
});
|
||||
watchParams.forEach(function (key) {
|
||||
if (key in swiperParams && key in oldParams) {
|
||||
if (isObject(swiperParams[key]) && isObject(oldParams[key])) {
|
||||
var newKeys = Object.keys(swiperParams[key]);
|
||||
var oldKeys = Object.keys(oldParams[key]);
|
||||
|
||||
if (newKeys.length !== oldKeys.length) {
|
||||
addKey(key);
|
||||
} else {
|
||||
newKeys.forEach(function (newKey) {
|
||||
if (swiperParams[key][newKey] !== oldParams[key][newKey]) {
|
||||
addKey(key);
|
||||
}
|
||||
});
|
||||
oldKeys.forEach(function (oldKey) {
|
||||
if (swiperParams[key][oldKey] !== oldParams[key][oldKey]) addKey(key);
|
||||
});
|
||||
}
|
||||
} else if (swiperParams[key] !== oldParams[key]) {
|
||||
addKey(key);
|
||||
}
|
||||
}
|
||||
});
|
||||
return keys;
|
||||
}
|
||||
|
||||
export { getChangedParams };
|
||||
@@ -0,0 +1,50 @@
|
||||
import React from 'react';
|
||||
|
||||
function processChildren(c) {
|
||||
var slides = [];
|
||||
React.Children.toArray(c).forEach(function (child) {
|
||||
if (child.type && child.type.displayName === 'SwiperSlide') {
|
||||
slides.push(child);
|
||||
} else if (child.props && child.props.children) {
|
||||
processChildren(child.props.children).forEach(function (slide) {
|
||||
return slides.push(slide);
|
||||
});
|
||||
}
|
||||
});
|
||||
return slides;
|
||||
}
|
||||
|
||||
function getChildren(c) {
|
||||
var slides = [];
|
||||
var slots = {
|
||||
'container-start': [],
|
||||
'container-end': [],
|
||||
'wrapper-start': [],
|
||||
'wrapper-end': []
|
||||
};
|
||||
React.Children.toArray(c).forEach(function (child) {
|
||||
if (child.type && child.type.displayName === 'SwiperSlide') {
|
||||
slides.push(child);
|
||||
} else if (child.props && child.props.slot && slots[child.props.slot]) {
|
||||
slots[child.props.slot].push(child);
|
||||
} else if (child.props && child.props.children) {
|
||||
var foundSlides = processChildren(child.props.children);
|
||||
|
||||
if (foundSlides.length > 0) {
|
||||
foundSlides.forEach(function (slide) {
|
||||
return slides.push(slide);
|
||||
});
|
||||
} else {
|
||||
slots['container-end'].push(child);
|
||||
}
|
||||
} else {
|
||||
slots['container-end'].push(child);
|
||||
}
|
||||
});
|
||||
return {
|
||||
slides: slides,
|
||||
slots: slots
|
||||
};
|
||||
}
|
||||
|
||||
export { getChildren };
|
||||
@@ -0,0 +1,53 @@
|
||||
// eslint-disable-next-line
|
||||
import Swiper from '../../core';
|
||||
import { isObject, extend } from './utils';
|
||||
import { paramsList } from './params-list';
|
||||
|
||||
function getParams(obj) {
|
||||
if (obj === void 0) {
|
||||
obj = {};
|
||||
}
|
||||
|
||||
var params = {
|
||||
on: {}
|
||||
};
|
||||
var events = {};
|
||||
var passedParams = {};
|
||||
extend(params, Swiper.defaults);
|
||||
extend(params, Swiper.extendedDefaults);
|
||||
params._emitClasses = true;
|
||||
params.init = false;
|
||||
var rest = {};
|
||||
var allowedParams = paramsList.map(function (key) {
|
||||
return key.replace(/_/, '');
|
||||
});
|
||||
Object.keys(obj).forEach(function (key) {
|
||||
if (allowedParams.indexOf(key) >= 0) {
|
||||
if (isObject(obj[key])) {
|
||||
params[key] = {};
|
||||
passedParams[key] = {};
|
||||
extend(params[key], obj[key]);
|
||||
extend(passedParams[key], obj[key]);
|
||||
} else {
|
||||
params[key] = obj[key];
|
||||
passedParams[key] = obj[key];
|
||||
}
|
||||
} else if (key.search(/on[A-Z]/) === 0 && typeof obj[key] === 'function') {
|
||||
events["" + key[2].toLowerCase() + key.substr(3)] = obj[key];
|
||||
} else {
|
||||
rest[key] = obj[key];
|
||||
}
|
||||
});
|
||||
['navigation', 'pagination', 'scrollbar'].forEach(function (key) {
|
||||
if (params[key] === true) params[key] = {};
|
||||
if (params[key] === false) delete params[key];
|
||||
});
|
||||
return {
|
||||
params: params,
|
||||
passedParams: passedParams,
|
||||
rest: rest,
|
||||
events: events
|
||||
};
|
||||
}
|
||||
|
||||
export { getParams };
|
||||
@@ -0,0 +1,37 @@
|
||||
// eslint-disable-next-line
|
||||
import Swiper from '../../core';
|
||||
import { needsNavigation, needsPagination, needsScrollbar } from './utils';
|
||||
|
||||
function initSwiper(swiperParams) {
|
||||
return new Swiper(swiperParams);
|
||||
}
|
||||
|
||||
function mountSwiper(_ref, swiperParams) {
|
||||
var el = _ref.el,
|
||||
nextEl = _ref.nextEl,
|
||||
prevEl = _ref.prevEl,
|
||||
paginationEl = _ref.paginationEl,
|
||||
scrollbarEl = _ref.scrollbarEl,
|
||||
swiper = _ref.swiper;
|
||||
|
||||
if (needsNavigation(swiperParams) && nextEl && prevEl) {
|
||||
swiper.params.navigation.nextEl = nextEl;
|
||||
swiper.originalParams.navigation.nextEl = nextEl;
|
||||
swiper.params.navigation.prevEl = prevEl;
|
||||
swiper.originalParams.navigation.prevEl = prevEl;
|
||||
}
|
||||
|
||||
if (needsPagination(swiperParams) && paginationEl) {
|
||||
swiper.params.pagination.el = paginationEl;
|
||||
swiper.originalParams.pagination.el = paginationEl;
|
||||
}
|
||||
|
||||
if (needsScrollbar(swiperParams) && scrollbarEl) {
|
||||
swiper.params.scrollbar.el = scrollbarEl;
|
||||
swiper.originalParams.scrollbar.el = scrollbarEl;
|
||||
}
|
||||
|
||||
swiper.init(el);
|
||||
}
|
||||
|
||||
export { initSwiper, mountSwiper };
|
||||
@@ -0,0 +1,79 @@
|
||||
import React from 'react'; // eslint-disable-next-line
|
||||
|
||||
import Swiper from '../../core';
|
||||
|
||||
function calcLoopedSlides(slides, swiperParams) {
|
||||
var slidesPerViewParams = swiperParams.slidesPerView;
|
||||
|
||||
if (swiperParams.breakpoints) {
|
||||
var breakpoint = Swiper.prototype.getBreakpoint(swiperParams.breakpoints);
|
||||
var breakpointOnlyParams = breakpoint in swiperParams.breakpoints ? swiperParams.breakpoints[breakpoint] : undefined;
|
||||
|
||||
if (breakpointOnlyParams && breakpointOnlyParams.slidesPerView) {
|
||||
slidesPerViewParams = breakpointOnlyParams.slidesPerView;
|
||||
}
|
||||
}
|
||||
|
||||
var loopedSlides = Math.ceil(parseFloat(swiperParams.loopedSlides || slidesPerViewParams, 10));
|
||||
loopedSlides += swiperParams.loopAdditionalSlides;
|
||||
|
||||
if (loopedSlides > slides.length) {
|
||||
loopedSlides = slides.length;
|
||||
}
|
||||
|
||||
return loopedSlides;
|
||||
}
|
||||
|
||||
function renderLoop(swiper, slides, swiperParams) {
|
||||
var modifiedSlides = slides.map(function (child, index) {
|
||||
return /*#__PURE__*/React.cloneElement(child, {
|
||||
swiper: swiper,
|
||||
'data-swiper-slide-index': index
|
||||
});
|
||||
});
|
||||
|
||||
function duplicateSlide(child, index, position) {
|
||||
return /*#__PURE__*/React.cloneElement(child, {
|
||||
key: child.key + "-duplicate-" + index + "-" + position,
|
||||
className: (child.props.className || '') + " " + swiperParams.slideDuplicateClass
|
||||
});
|
||||
}
|
||||
|
||||
if (swiperParams.loopFillGroupWithBlank) {
|
||||
var blankSlidesNum = swiperParams.slidesPerGroup - modifiedSlides.length % swiperParams.slidesPerGroup;
|
||||
|
||||
if (blankSlidesNum !== swiperParams.slidesPerGroup) {
|
||||
for (var i = 0; i < blankSlidesNum; i += 1) {
|
||||
var blankSlide = /*#__PURE__*/React.createElement("div", {
|
||||
className: swiperParams.slideClass + " " + swiperParams.slideBlankClass
|
||||
});
|
||||
modifiedSlides.push(blankSlide);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
if (swiperParams.slidesPerView === 'auto' && !swiperParams.loopedSlides) {
|
||||
swiperParams.loopedSlides = modifiedSlides.length;
|
||||
}
|
||||
|
||||
var loopedSlides = calcLoopedSlides(modifiedSlides, swiperParams);
|
||||
var prependSlides = [];
|
||||
var appendSlides = [];
|
||||
modifiedSlides.forEach(function (child, index) {
|
||||
if (index < loopedSlides) {
|
||||
appendSlides.push(duplicateSlide(child, index, 'prepend'));
|
||||
}
|
||||
|
||||
if (index < modifiedSlides.length && index >= modifiedSlides.length - loopedSlides) {
|
||||
prependSlides.push(duplicateSlide(child, index, 'append'));
|
||||
}
|
||||
});
|
||||
|
||||
if (swiper) {
|
||||
swiper.loopedSlides = loopedSlides;
|
||||
}
|
||||
|
||||
return [].concat(prependSlides, modifiedSlides, appendSlides);
|
||||
}
|
||||
|
||||
export { calcLoopedSlides, renderLoop };
|
||||
@@ -0,0 +1,4 @@
|
||||
/* underscore in name -> watch for changes */
|
||||
var paramsList = ['init', '_direction', 'touchEventsTarget', 'initialSlide', '_speed', 'cssMode', 'updateOnWindowResize', 'resizeObserver', 'nested', 'focusableElements', '_enabled', '_width', '_height', 'preventInteractionOnTransition', 'userAgent', 'url', '_edgeSwipeDetection', '_edgeSwipeThreshold', '_freeMode', '_freeModeMomentum', '_freeModeMomentumRatio', '_freeModeMomentumBounce', '_freeModeMomentumBounceRatio', '_freeModeMomentumVelocityRatio', '_freeModeSticky', '_freeModeMinimumVelocity', '_autoHeight', 'setWrapperSize', 'virtualTranslate', '_effect', 'breakpoints', '_spaceBetween', '_slidesPerView', '_slidesPerColumn', '_slidesPerColumnFill', '_slidesPerGroup', '_slidesPerGroupSkip', '_centeredSlides', '_centeredSlidesBounds', '_slidesOffsetBefore', '_slidesOffsetAfter', 'normalizeSlideIndex', '_centerInsufficientSlides', '_watchOverflow', 'roundLengths', 'touchRatio', 'touchAngle', 'simulateTouch', '_shortSwipes', '_longSwipes', 'longSwipesRatio', 'longSwipesMs', '_followFinger', 'allowTouchMove', '_threshold', 'touchMoveStopPropagation', 'touchStartPreventDefault', 'touchStartForcePreventDefault', 'touchReleaseOnEdges', 'uniqueNavElements', '_resistance', '_resistanceRatio', '_watchSlidesProgress', '_watchSlidesVisibility', '_grabCursor', 'preventClicks', 'preventClicksPropagation', '_slideToClickedSlide', '_preloadImages', 'updateOnImagesReady', '_loop', '_loopAdditionalSlides', '_loopedSlides', '_loopFillGroupWithBlank', 'loopPreventsSlide', '_allowSlidePrev', '_allowSlideNext', '_swipeHandler', '_noSwiping', 'noSwipingClass', 'noSwipingSelector', 'passiveListeners', 'containerModifierClass', 'slideClass', 'slideBlankClass', 'slideActiveClass', 'slideDuplicateActiveClass', 'slideVisibleClass', 'slideDuplicateClass', 'slideNextClass', 'slideDuplicateNextClass', 'slidePrevClass', 'slideDuplicatePrevClass', 'wrapperClass', 'runCallbacksOnInit', 'observer', 'observeParents', 'observeSlideChildren', // modules
|
||||
'a11y', 'autoplay', '_controller', 'coverflowEffect', 'cubeEffect', 'fadeEffect', 'flipEffect', 'hashNavigation', 'history', 'keyboard', 'lazy', 'mousewheel', '_navigation', '_pagination', 'parallax', '_scrollbar', '_thumbs', 'virtual', 'zoom'];
|
||||
export { paramsList };
|
||||
@@ -0,0 +1,89 @@
|
||||
var _excluded = ["tag", "children", "className", "swiper", "zoom", "virtualIndex"];
|
||||
|
||||
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 _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, { useRef, useState, forwardRef } from 'react';
|
||||
import { uniqueClasses } from './utils';
|
||||
import { useIsomorphicLayoutEffect } from './use-isomorphic-layout-effect';
|
||||
var SwiperSlide = /*#__PURE__*/forwardRef(function (_temp, externalRef) {
|
||||
var _ref = _temp === void 0 ? {} : _temp,
|
||||
_ref$tag = _ref.tag,
|
||||
Tag = _ref$tag === void 0 ? 'div' : _ref$tag,
|
||||
children = _ref.children,
|
||||
_ref$className = _ref.className,
|
||||
className = _ref$className === void 0 ? '' : _ref$className,
|
||||
swiper = _ref.swiper,
|
||||
zoom = _ref.zoom,
|
||||
virtualIndex = _ref.virtualIndex,
|
||||
rest = _objectWithoutPropertiesLoose(_ref, _excluded);
|
||||
|
||||
var slideElRef = useRef(null);
|
||||
|
||||
var _useState = useState('swiper-slide'),
|
||||
slideClasses = _useState[0],
|
||||
setSlideClasses = _useState[1];
|
||||
|
||||
function updateClasses(swiper, el, classNames) {
|
||||
if (el === slideElRef.current) {
|
||||
setSlideClasses(classNames);
|
||||
}
|
||||
}
|
||||
|
||||
useIsomorphicLayoutEffect(function () {
|
||||
if (externalRef) {
|
||||
externalRef.current = slideElRef.current;
|
||||
}
|
||||
|
||||
if (!slideElRef.current || !swiper) {
|
||||
return;
|
||||
}
|
||||
|
||||
if (swiper.destroyed) {
|
||||
if (slideClasses !== 'swiper-slide') {
|
||||
setSlideClasses('swiper-slide');
|
||||
}
|
||||
|
||||
return;
|
||||
}
|
||||
|
||||
swiper.on('_slideClass', updateClasses); // eslint-disable-next-line
|
||||
|
||||
return function () {
|
||||
if (!swiper) return;
|
||||
swiper.off('_slideClass', updateClasses);
|
||||
};
|
||||
});
|
||||
useIsomorphicLayoutEffect(function () {
|
||||
if (swiper && slideElRef.current) {
|
||||
setSlideClasses(swiper.getSlideClasses(slideElRef.current));
|
||||
}
|
||||
}, [swiper]);
|
||||
var slideData;
|
||||
|
||||
if (typeof children === 'function') {
|
||||
slideData = {
|
||||
isActive: slideClasses.indexOf('swiper-slide-active') >= 0 || slideClasses.indexOf('swiper-slide-duplicate-active') >= 0,
|
||||
isVisible: slideClasses.indexOf('swiper-slide-visible') >= 0,
|
||||
isDuplicate: slideClasses.indexOf('swiper-slide-duplicate') >= 0,
|
||||
isPrev: slideClasses.indexOf('swiper-slide-prev') >= 0 || slideClasses.indexOf('swiper-slide-duplicate-prev') >= 0,
|
||||
isNext: slideClasses.indexOf('swiper-slide-next') >= 0 || slideClasses.indexOf('swiper-slide-duplicate-next') >= 0
|
||||
};
|
||||
}
|
||||
|
||||
var renderChildren = function renderChildren() {
|
||||
return typeof children === 'function' ? children(slideData) : children;
|
||||
};
|
||||
|
||||
return /*#__PURE__*/React.createElement(Tag, _extends({
|
||||
ref: slideElRef,
|
||||
className: uniqueClasses("" + slideClasses + (className ? " " + className : '')),
|
||||
"data-swiper-slide-index": virtualIndex
|
||||
}, rest), zoom ? /*#__PURE__*/React.createElement("div", {
|
||||
className: "swiper-zoom-container",
|
||||
"data-swiper-zoom": typeof zoom === 'number' ? zoom : undefined
|
||||
}, renderChildren()) : renderChildren());
|
||||
});
|
||||
SwiperSlide.displayName = 'SwiperSlide';
|
||||
export { SwiperSlide };
|
||||
@@ -0,0 +1,217 @@
|
||||
var _excluded = ["className", "tag", "wrapperTag", "children", "onSwiper"];
|
||||
|
||||
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 _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, { useRef, useState, useEffect, forwardRef } from 'react';
|
||||
import { getParams } from './get-params';
|
||||
import { initSwiper, mountSwiper } from './init-swiper';
|
||||
import { needsScrollbar, needsNavigation, needsPagination, uniqueClasses, extend } from './utils';
|
||||
import { renderLoop, calcLoopedSlides } from './loop';
|
||||
import { getChangedParams } from './get-changed-params';
|
||||
import { getChildren } from './get-children';
|
||||
import { updateSwiper } from './update-swiper';
|
||||
import { renderVirtual, updateOnVirtualData } from './virtual';
|
||||
import { useIsomorphicLayoutEffect } from './use-isomorphic-layout-effect';
|
||||
var Swiper = /*#__PURE__*/forwardRef(function (_temp, externalElRef) {
|
||||
var _ref = _temp === void 0 ? {} : _temp,
|
||||
className = _ref.className,
|
||||
_ref$tag = _ref.tag,
|
||||
Tag = _ref$tag === void 0 ? 'div' : _ref$tag,
|
||||
_ref$wrapperTag = _ref.wrapperTag,
|
||||
WrapperTag = _ref$wrapperTag === void 0 ? 'div' : _ref$wrapperTag,
|
||||
children = _ref.children,
|
||||
onSwiper = _ref.onSwiper,
|
||||
rest = _objectWithoutPropertiesLoose(_ref, _excluded);
|
||||
|
||||
var eventsAssigned = false;
|
||||
|
||||
var _useState = useState('swiper-container'),
|
||||
containerClasses = _useState[0],
|
||||
setContainerClasses = _useState[1];
|
||||
|
||||
var _useState2 = useState(null),
|
||||
virtualData = _useState2[0],
|
||||
setVirtualData = _useState2[1];
|
||||
|
||||
var _useState3 = useState(false),
|
||||
breakpointChanged = _useState3[0],
|
||||
setBreakpointChanged = _useState3[1];
|
||||
|
||||
var initializedRef = useRef(false);
|
||||
var swiperElRef = useRef(null);
|
||||
var swiperRef = useRef(null);
|
||||
var oldPassedParamsRef = useRef(null);
|
||||
var oldSlides = useRef(null);
|
||||
var nextElRef = useRef(null);
|
||||
var prevElRef = useRef(null);
|
||||
var paginationElRef = useRef(null);
|
||||
var scrollbarElRef = useRef(null);
|
||||
|
||||
var _getParams = getParams(rest),
|
||||
swiperParams = _getParams.params,
|
||||
passedParams = _getParams.passedParams,
|
||||
restProps = _getParams.rest,
|
||||
events = _getParams.events;
|
||||
|
||||
var _getChildren = getChildren(children),
|
||||
slides = _getChildren.slides,
|
||||
slots = _getChildren.slots;
|
||||
|
||||
var onBeforeBreakpoint = function onBeforeBreakpoint() {
|
||||
setBreakpointChanged(!breakpointChanged);
|
||||
};
|
||||
|
||||
Object.assign(swiperParams.on, {
|
||||
_containerClasses: function _containerClasses(swiper, classes) {
|
||||
setContainerClasses(classes);
|
||||
}
|
||||
});
|
||||
|
||||
if (!swiperElRef.current) {
|
||||
// init swiper
|
||||
Object.assign(swiperParams.on, events);
|
||||
eventsAssigned = true;
|
||||
swiperRef.current = initSwiper(swiperParams);
|
||||
|
||||
swiperRef.current.loopCreate = function () {};
|
||||
|
||||
swiperRef.current.loopDestroy = function () {};
|
||||
|
||||
if (swiperParams.loop) {
|
||||
swiperRef.current.loopedSlides = calcLoopedSlides(slides, swiperParams);
|
||||
}
|
||||
|
||||
if (swiperRef.current.virtual && swiperRef.current.params.virtual.enabled) {
|
||||
swiperRef.current.virtual.slides = slides;
|
||||
var extendWith = {
|
||||
cache: false,
|
||||
renderExternal: setVirtualData,
|
||||
renderExternalUpdate: false
|
||||
};
|
||||
extend(swiperRef.current.params.virtual, extendWith);
|
||||
extend(swiperRef.current.originalParams.virtual, extendWith);
|
||||
}
|
||||
} // Listen for breakpoints change
|
||||
|
||||
|
||||
if (swiperRef.current) {
|
||||
swiperRef.current.on('_beforeBreakpoint', onBeforeBreakpoint);
|
||||
}
|
||||
|
||||
var attachEvents = function attachEvents() {
|
||||
if (eventsAssigned || !events || !swiperRef.current) return;
|
||||
Object.keys(events).forEach(function (eventName) {
|
||||
swiperRef.current.on(eventName, events[eventName]);
|
||||
});
|
||||
};
|
||||
|
||||
var detachEvents = function detachEvents() {
|
||||
if (!events || !swiperRef.current) return;
|
||||
Object.keys(events).forEach(function (eventName) {
|
||||
swiperRef.current.off(eventName, events[eventName]);
|
||||
});
|
||||
};
|
||||
|
||||
useEffect(function () {
|
||||
return function () {
|
||||
if (swiperRef.current) swiperRef.current.off('_beforeBreakpoint', onBeforeBreakpoint);
|
||||
};
|
||||
}); // set initialized flag
|
||||
|
||||
useEffect(function () {
|
||||
if (!initializedRef.current && swiperRef.current) {
|
||||
swiperRef.current.emitSlidesClasses();
|
||||
initializedRef.current = true;
|
||||
}
|
||||
}); // mount swiper
|
||||
|
||||
useIsomorphicLayoutEffect(function () {
|
||||
if (externalElRef) {
|
||||
externalElRef.current = swiperElRef.current;
|
||||
}
|
||||
|
||||
if (!swiperElRef.current) return;
|
||||
mountSwiper({
|
||||
el: swiperElRef.current,
|
||||
nextEl: nextElRef.current,
|
||||
prevEl: prevElRef.current,
|
||||
paginationEl: paginationElRef.current,
|
||||
scrollbarEl: scrollbarElRef.current,
|
||||
swiper: swiperRef.current
|
||||
}, swiperParams);
|
||||
if (onSwiper) onSwiper(swiperRef.current); // eslint-disable-next-line
|
||||
|
||||
return function () {
|
||||
if (swiperRef.current && !swiperRef.current.destroyed) {
|
||||
swiperRef.current.destroy(true, false);
|
||||
}
|
||||
};
|
||||
}, []); // watch for params change
|
||||
|
||||
useIsomorphicLayoutEffect(function () {
|
||||
attachEvents();
|
||||
var changedParams = getChangedParams(passedParams, oldPassedParamsRef.current, slides, oldSlides.current);
|
||||
oldPassedParamsRef.current = passedParams;
|
||||
oldSlides.current = slides;
|
||||
|
||||
if (changedParams.length && swiperRef.current && !swiperRef.current.destroyed) {
|
||||
updateSwiper({
|
||||
swiper: swiperRef.current,
|
||||
slides: slides,
|
||||
passedParams: passedParams,
|
||||
changedParams: changedParams,
|
||||
nextEl: nextElRef.current,
|
||||
prevEl: prevElRef.current,
|
||||
scrollbarEl: scrollbarElRef.current,
|
||||
paginationEl: paginationElRef.current
|
||||
});
|
||||
}
|
||||
|
||||
return function () {
|
||||
detachEvents();
|
||||
};
|
||||
}); // update on virtual update
|
||||
|
||||
useIsomorphicLayoutEffect(function () {
|
||||
updateOnVirtualData(swiperRef.current);
|
||||
}, [virtualData]); // bypass swiper instance to slides
|
||||
|
||||
function renderSlides() {
|
||||
if (swiperParams.virtual) {
|
||||
return renderVirtual(swiperRef.current, slides, virtualData);
|
||||
}
|
||||
|
||||
if (!swiperParams.loop || swiperRef.current && swiperRef.current.destroyed) {
|
||||
return slides.map(function (child) {
|
||||
return /*#__PURE__*/React.cloneElement(child, {
|
||||
swiper: swiperRef.current
|
||||
});
|
||||
});
|
||||
}
|
||||
|
||||
return renderLoop(swiperRef.current, slides, swiperParams);
|
||||
}
|
||||
|
||||
return /*#__PURE__*/React.createElement(Tag, _extends({
|
||||
ref: swiperElRef,
|
||||
className: uniqueClasses("" + containerClasses + (className ? " " + className : ''))
|
||||
}, restProps), slots['container-start'], needsNavigation(swiperParams) && /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("div", {
|
||||
ref: prevElRef,
|
||||
className: "swiper-button-prev"
|
||||
}), /*#__PURE__*/React.createElement("div", {
|
||||
ref: nextElRef,
|
||||
className: "swiper-button-next"
|
||||
})), needsScrollbar(swiperParams) && /*#__PURE__*/React.createElement("div", {
|
||||
ref: scrollbarElRef,
|
||||
className: "swiper-scrollbar"
|
||||
}), needsPagination(swiperParams) && /*#__PURE__*/React.createElement("div", {
|
||||
ref: paginationElRef,
|
||||
className: "swiper-pagination"
|
||||
}), /*#__PURE__*/React.createElement(WrapperTag, {
|
||||
className: "swiper-wrapper"
|
||||
}, slots['wrapper-start'], renderSlides(), slots['wrapper-end']), slots['container-end']);
|
||||
});
|
||||
Swiper.displayName = 'Swiper';
|
||||
export { Swiper };
|
||||
@@ -0,0 +1,130 @@
|
||||
import { isObject, extend } from './utils';
|
||||
|
||||
function updateSwiper(_ref) {
|
||||
var swiper = _ref.swiper,
|
||||
slides = _ref.slides,
|
||||
passedParams = _ref.passedParams,
|
||||
changedParams = _ref.changedParams,
|
||||
nextEl = _ref.nextEl,
|
||||
prevEl = _ref.prevEl,
|
||||
scrollbarEl = _ref.scrollbarEl,
|
||||
paginationEl = _ref.paginationEl;
|
||||
var updateParams = changedParams.filter(function (key) {
|
||||
return key !== 'children' && key !== 'direction';
|
||||
});
|
||||
var currentParams = swiper.params,
|
||||
pagination = swiper.pagination,
|
||||
navigation = swiper.navigation,
|
||||
scrollbar = swiper.scrollbar,
|
||||
virtual = swiper.virtual,
|
||||
thumbs = swiper.thumbs;
|
||||
var needThumbsInit;
|
||||
var needControllerInit;
|
||||
var needPaginationInit;
|
||||
var needScrollbarInit;
|
||||
var needNavigationInit;
|
||||
|
||||
if (changedParams.includes('thumbs') && passedParams.thumbs && passedParams.thumbs.swiper && currentParams.thumbs && !currentParams.thumbs.swiper) {
|
||||
needThumbsInit = true;
|
||||
}
|
||||
|
||||
if (changedParams.includes('controller') && passedParams.controller && passedParams.controller.control && currentParams.controller && !currentParams.controller.control) {
|
||||
needControllerInit = true;
|
||||
}
|
||||
|
||||
if (changedParams.includes('pagination') && passedParams.pagination && (passedParams.pagination.el || paginationEl) && (currentParams.pagination || currentParams.pagination === false) && pagination && !pagination.el) {
|
||||
needPaginationInit = true;
|
||||
}
|
||||
|
||||
if (changedParams.includes('scrollbar') && passedParams.scrollbar && (passedParams.scrollbar.el || scrollbarEl) && (currentParams.scrollbar || currentParams.scrollbar === false) && scrollbar && !scrollbar.el) {
|
||||
needScrollbarInit = true;
|
||||
}
|
||||
|
||||
if (changedParams.includes('navigation') && passedParams.navigation && (passedParams.navigation.prevEl || prevEl) && (passedParams.navigation.nextEl || nextEl) && (currentParams.navigation || currentParams.navigation === false) && navigation && !navigation.prevEl && !navigation.nextEl) {
|
||||
needNavigationInit = true;
|
||||
}
|
||||
|
||||
var destroyModule = function destroyModule(mod) {
|
||||
if (!swiper[mod]) return;
|
||||
swiper[mod].destroy();
|
||||
|
||||
if (mod === 'navigation') {
|
||||
currentParams[mod].prevEl = undefined;
|
||||
currentParams[mod].nextEl = undefined;
|
||||
swiper[mod].prevEl = undefined;
|
||||
swiper[mod].nextEl = undefined;
|
||||
} else {
|
||||
currentParams[mod].el = undefined;
|
||||
swiper[mod].el = undefined;
|
||||
}
|
||||
};
|
||||
|
||||
updateParams.forEach(function (key) {
|
||||
if (isObject(currentParams[key]) && isObject(passedParams[key])) {
|
||||
extend(currentParams[key], passedParams[key]);
|
||||
} else {
|
||||
var newValue = passedParams[key];
|
||||
|
||||
if ((newValue === true || newValue === false) && (key === 'navigation' || key === 'pagination' || key === 'scrollbar')) {
|
||||
if (newValue === false) {
|
||||
destroyModule(key);
|
||||
}
|
||||
} else {
|
||||
currentParams[key] = passedParams[key];
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
if (changedParams.includes('children') && virtual && currentParams.virtual.enabled) {
|
||||
virtual.slides = slides;
|
||||
virtual.update(true);
|
||||
} else if (changedParams.includes('children') && swiper.lazy && swiper.params.lazy.enabled) {
|
||||
swiper.lazy.load();
|
||||
}
|
||||
|
||||
if (needThumbsInit) {
|
||||
var initialized = thumbs.init();
|
||||
if (initialized) thumbs.update(true);
|
||||
}
|
||||
|
||||
if (needControllerInit) {
|
||||
swiper.controller.control = currentParams.controller.control;
|
||||
}
|
||||
|
||||
if (needPaginationInit) {
|
||||
if (paginationEl) currentParams.pagination.el = paginationEl;
|
||||
pagination.init();
|
||||
pagination.render();
|
||||
pagination.update();
|
||||
}
|
||||
|
||||
if (needScrollbarInit) {
|
||||
if (scrollbarEl) currentParams.scrollbar.el = scrollbarEl;
|
||||
scrollbar.init();
|
||||
scrollbar.updateSize();
|
||||
scrollbar.setTranslate();
|
||||
}
|
||||
|
||||
if (needNavigationInit) {
|
||||
if (nextEl) currentParams.navigation.nextEl = nextEl;
|
||||
if (prevEl) currentParams.navigation.prevEl = prevEl;
|
||||
navigation.init();
|
||||
navigation.update();
|
||||
}
|
||||
|
||||
if (changedParams.includes('allowSlideNext')) {
|
||||
swiper.allowSlideNext = passedParams.allowSlideNext;
|
||||
}
|
||||
|
||||
if (changedParams.includes('allowSlidePrev')) {
|
||||
swiper.allowSlidePrev = passedParams.allowSlidePrev;
|
||||
}
|
||||
|
||||
if (changedParams.includes('direction')) {
|
||||
swiper.changeDirection(passedParams.direction, false);
|
||||
}
|
||||
|
||||
swiper.update();
|
||||
}
|
||||
|
||||
export { updateSwiper };
|
||||
@@ -0,0 +1,9 @@
|
||||
import { useEffect, useLayoutEffect } from 'react';
|
||||
|
||||
function useIsomorphicLayoutEffect(callback, deps) {
|
||||
// eslint-disable-next-line
|
||||
if (typeof window === 'undefined') return useEffect(callback, deps);
|
||||
return useLayoutEffect(callback, deps);
|
||||
}
|
||||
|
||||
export { useIsomorphicLayoutEffect };
|
||||
@@ -0,0 +1,59 @@
|
||||
function isObject(o) {
|
||||
return typeof o === 'object' && o !== null && o.constructor && Object.prototype.toString.call(o).slice(8, -1) === 'Object';
|
||||
}
|
||||
|
||||
function extend(target, src) {
|
||||
var noExtend = ['__proto__', 'constructor', 'prototype'];
|
||||
Object.keys(src).filter(function (key) {
|
||||
return noExtend.indexOf(key) < 0;
|
||||
}).forEach(function (key) {
|
||||
if (typeof target[key] === 'undefined') target[key] = src[key];else if (isObject(src[key]) && isObject(target[key]) && Object.keys(src[key]).length > 0) {
|
||||
if (src[key].__swiper__) target[key] = src[key];else extend(target[key], src[key]);
|
||||
} else {
|
||||
target[key] = src[key];
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
function needsNavigation(params) {
|
||||
if (params === void 0) {
|
||||
params = {};
|
||||
}
|
||||
|
||||
return params.navigation && typeof params.navigation.nextEl === 'undefined' && typeof params.navigation.prevEl === 'undefined';
|
||||
}
|
||||
|
||||
function needsPagination(params) {
|
||||
if (params === void 0) {
|
||||
params = {};
|
||||
}
|
||||
|
||||
return params.pagination && typeof params.pagination.el === 'undefined';
|
||||
}
|
||||
|
||||
function needsScrollbar(params) {
|
||||
if (params === void 0) {
|
||||
params = {};
|
||||
}
|
||||
|
||||
return params.scrollbar && typeof params.scrollbar.el === 'undefined';
|
||||
}
|
||||
|
||||
function uniqueClasses(classNames) {
|
||||
if (classNames === void 0) {
|
||||
classNames = '';
|
||||
}
|
||||
|
||||
var classes = classNames.split(' ').map(function (c) {
|
||||
return c.trim();
|
||||
}).filter(function (c) {
|
||||
return !!c;
|
||||
});
|
||||
var unique = [];
|
||||
classes.forEach(function (c) {
|
||||
if (unique.indexOf(c) < 0) unique.push(c);
|
||||
});
|
||||
return unique.join(' ');
|
||||
}
|
||||
|
||||
export { isObject, extend, needsNavigation, needsPagination, needsScrollbar, uniqueClasses };
|
||||
@@ -0,0 +1,35 @@
|
||||
import React from 'react';
|
||||
|
||||
function updateOnVirtualData(swiper) {
|
||||
if (!swiper || swiper.destroyed || !swiper.params.virtual || swiper.params.virtual && !swiper.params.virtual.enabled) return;
|
||||
swiper.updateSlides();
|
||||
swiper.updateProgress();
|
||||
swiper.updateSlidesClasses();
|
||||
|
||||
if (swiper.lazy && swiper.params.lazy.enabled) {
|
||||
swiper.lazy.load();
|
||||
}
|
||||
|
||||
if (swiper.parallax && swiper.params.parallax && swiper.params.parallax.enabled) {
|
||||
swiper.parallax.setTranslate();
|
||||
}
|
||||
}
|
||||
|
||||
function renderVirtual(swiper, slides, virtualData) {
|
||||
var _ref;
|
||||
|
||||
if (!virtualData) return null;
|
||||
var style = swiper.isHorizontal() ? (_ref = {}, _ref[swiper.rtlTranslate ? 'right' : 'left'] = virtualData.offset + "px", _ref) : {
|
||||
top: virtualData.offset + "px"
|
||||
};
|
||||
return slides.filter(function (child, index) {
|
||||
return index >= virtualData.from && index <= virtualData.to;
|
||||
}).map(function (child) {
|
||||
return /*#__PURE__*/React.cloneElement(child, {
|
||||
swiper: swiper,
|
||||
style: style
|
||||
});
|
||||
});
|
||||
}
|
||||
|
||||
export { renderVirtual, updateOnVirtualData };
|
||||
Reference in New Issue
Block a user