infinity-forge
Version:
220 lines • 10.6 kB
JavaScript
;
var __assign = (this && this.__assign) || function () {
__assign = Object.assign || function(t) {
for (var s, i = 1, n = arguments.length; i < n; i++) {
s = arguments[i];
for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
t[p] = s[p];
}
return t;
};
return __assign.apply(this, arguments);
};
var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
if (k2 === undefined) k2 = k;
var desc = Object.getOwnPropertyDescriptor(m, k);
if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
desc = { enumerable: true, get: function() { return m[k]; } };
}
Object.defineProperty(o, k2, desc);
}) : (function(o, m, k, k2) {
if (k2 === undefined) k2 = k;
o[k2] = m[k];
}));
var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
Object.defineProperty(o, "default", { enumerable: true, value: v });
}) : function(o, v) {
o["default"] = v;
});
var __importStar = (this && this.__importStar) || (function () {
var ownKeys = function(o) {
ownKeys = Object.getOwnPropertyNames || function (o) {
var ar = [];
for (var k in o) if (Object.prototype.hasOwnProperty.call(o, k)) ar[ar.length] = k;
return ar;
};
return ownKeys(o);
};
return function (mod) {
if (mod && mod.__esModule) return mod;
var result = {};
if (mod != null) for (var k = ownKeys(mod), i = 0; i < k.length; i++) if (k[i] !== "default") __createBinding(result, mod, k[i]);
__setModuleDefault(result, mod);
return result;
};
})();
var __rest = (this && this.__rest) || function (s, e) {
var t = {};
for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
t[p] = s[p];
if (s != null && typeof Object.getOwnPropertySymbols === "function")
for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
t[p[i]] = s[p[i]];
}
return t;
};
var __importDefault = (this && this.__importDefault) || function (mod) {
return (mod && mod.__esModule) ? mod : { "default": mod };
};
Object.defineProperty(exports, "__esModule", { value: true });
exports.Swiper = void 0;
var jsx_runtime_1 = require("react/jsx-runtime");
// @ts-nocheck
var react_1 = __importStar(require("react"));
var swiper_1 = __importDefault(require("../swiper.js"));
var get_params_1 = require("../components-shared/get-params.js");
var mount_swiper_1 = require("../components-shared/mount-swiper.js");
var utils_1 = require("../components-shared/utils.js");
var get_changed_params_1 = require("../components-shared/get-changed-params.js");
var get_children_1 = require("./get-children.js");
var update_swiper_1 = require("../components-shared/update-swiper.js");
var virtual_1 = require("./virtual.js");
var update_on_virtual_data_1 = require("../components-shared/update-on-virtual-data.js");
var use_isomorphic_layout_effect_1 = require("./use-isomorphic-layout-effect.js");
var context_1 = require("./context.js");
var Swiper = (0, react_1.forwardRef)(function (_a, externalElRef) {
var className = _a.className, _b = _a.tag, Tag = _b === void 0 ? 'div' : _b, _c = _a.wrapperTag, WrapperTag = _c === void 0 ? 'div' : _c, children = _a.children, onSwiper = _a.onSwiper, rest = __rest(_a, ["className", "tag", "wrapperTag", "children", "onSwiper"]);
var eventsAssigned = false;
var _d = (0, react_1.useState)('swiper'), containerClasses = _d[0], setContainerClasses = _d[1];
var _e = (0, react_1.useState)(null), virtualData = _e[0], setVirtualData = _e[1];
var _f = (0, react_1.useState)(false), breakpointChanged = _f[0], setBreakpointChanged = _f[1];
var initializedRef = (0, react_1.useRef)(false);
var swiperElRef = (0, react_1.useRef)(null);
var swiperRef = (0, react_1.useRef)(null);
var oldPassedParamsRef = (0, react_1.useRef)(null);
var oldSlides = (0, react_1.useRef)(null);
var nextElRef = (0, react_1.useRef)(null);
var prevElRef = (0, react_1.useRef)(null);
var paginationElRef = (0, react_1.useRef)(null);
var scrollbarElRef = (0, react_1.useRef)(null);
var _g = (0, get_params_1.getParams)(rest), swiperParams = _g.params, passedParams = _g.passedParams, restProps = _g.rest, events = _g.events;
var _h = (0, get_children_1.getChildren)(children), slides = _h.slides, slots = _h.slots;
var onBeforeBreakpoint = function () {
setBreakpointChanged(!breakpointChanged);
};
Object.assign(swiperParams.on, {
_containerClasses: function (swiper, classes) {
setContainerClasses(classes);
},
});
var initSwiper = function () {
// init swiper
Object.assign(swiperParams.on, events);
eventsAssigned = true;
var passParams = __assign({}, swiperParams);
delete passParams.wrapperClass;
swiperRef.current = new swiper_1.default(passParams);
if (swiperRef.current.virtual && swiperRef.current.params.virtual.enabled) {
swiperRef.current.virtual.slides = slides;
var extendWith = {
cache: false,
slides: slides,
renderExternal: setVirtualData,
renderExternalUpdate: false,
};
(0, utils_1.extend)(swiperRef.current.params.virtual, extendWith);
(0, utils_1.extend)(swiperRef.current.originalParams.virtual, extendWith);
}
};
if (!swiperElRef.current) {
initSwiper();
}
// Listen for breakpoints change
if (swiperRef.current) {
swiperRef.current.on('_beforeBreakpoint', onBeforeBreakpoint);
}
var attachEvents = function () {
if (eventsAssigned || !events || !swiperRef.current)
return;
Object.keys(events).forEach(function (eventName) {
swiperRef.current.on(eventName, events[eventName]);
});
};
var detachEvents = function () {
if (!events || !swiperRef.current)
return;
Object.keys(events).forEach(function (eventName) {
swiperRef.current.off(eventName, events[eventName]);
});
};
(0, react_1.useEffect)(function () {
return function () {
if (swiperRef.current)
swiperRef.current.off('_beforeBreakpoint', onBeforeBreakpoint);
};
});
// set initialized flag
(0, react_1.useEffect)(function () {
if (!initializedRef.current && swiperRef.current) {
swiperRef.current.emitSlidesClasses();
initializedRef.current = true;
}
});
// mount swiper
(0, use_isomorphic_layout_effect_1.useIsomorphicLayoutEffect)(function () {
if (externalElRef) {
externalElRef.current = swiperElRef.current;
}
if (!swiperElRef.current)
return;
if (swiperRef.current.destroyed) {
initSwiper();
}
(0, mount_swiper_1.mountSwiper)({
el: swiperElRef.current,
nextEl: nextElRef.current,
prevEl: prevElRef.current,
paginationEl: paginationElRef.current,
scrollbarEl: scrollbarElRef.current,
swiper: swiperRef.current,
}, swiperParams);
if (onSwiper && !swiperRef.current.destroyed)
onSwiper(swiperRef.current);
// eslint-disable-next-line
return function () {
if (swiperRef.current && !swiperRef.current.destroyed) {
swiperRef.current.destroy(true, false);
}
};
}, []);
// watch for params change
(0, use_isomorphic_layout_effect_1.useIsomorphicLayoutEffect)(function () {
attachEvents();
var changedParams = (0, get_changed_params_1.getChangedParams)(passedParams, oldPassedParamsRef.current, slides, oldSlides.current, function (c) { return c.key; });
oldPassedParamsRef.current = passedParams;
oldSlides.current = slides;
if (changedParams.length && swiperRef.current && !swiperRef.current.destroyed) {
(0, update_swiper_1.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
(0, use_isomorphic_layout_effect_1.useIsomorphicLayoutEffect)(function () {
(0, update_on_virtual_data_1.updateOnVirtualData)(swiperRef.current);
}, [virtualData]);
// bypass swiper instance to slides
function renderSlides() {
if (swiperParams.virtual) {
return (0, virtual_1.renderVirtual)(swiperRef.current, slides, virtualData);
}
return slides.map(function (child, index) {
return react_1.default.cloneElement(child, { swiper: swiperRef.current, swiperSlideIndex: index });
});
}
return ((0, jsx_runtime_1.jsx)(Tag, __assign({ ref: swiperElRef, className: (0, utils_1.uniqueClasses)("".concat(containerClasses).concat(className ? " ".concat(className) : '')) }, restProps, { children: (0, jsx_runtime_1.jsxs)(context_1.SwiperContext.Provider, { value: swiperRef.current, children: [slots['container-start'], (0, jsx_runtime_1.jsxs)(WrapperTag, { className: (0, utils_1.wrapperClass)(swiperParams.wrapperClass), children: [slots['wrapper-start'], renderSlides(), slots['wrapper-end']] }), (0, utils_1.needsNavigation)(swiperParams) && ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)("div", { ref: prevElRef, className: "swiper-button-prev" }), (0, jsx_runtime_1.jsx)("div", { ref: nextElRef, className: "swiper-button-next" })] })), (0, utils_1.needsScrollbar)(swiperParams) && ((0, jsx_runtime_1.jsx)("div", { ref: scrollbarElRef, className: "swiper-scrollbar" })), (0, utils_1.needsPagination)(swiperParams) && ((0, jsx_runtime_1.jsx)("div", { ref: paginationElRef, className: "swiper-pagination" })), slots['container-end']] }) })));
});
exports.Swiper = Swiper;
Swiper.displayName = 'Swiper';
//# sourceMappingURL=swiper.js.map