pragmate-ui
Version:
An advanced, on-demand React UI library optimized for BeyondJS. Pragmate UI provides modular, responsive, and accessible components with a focus on efficient bundle sizes and a streamlined development process.
511 lines (476 loc) • 17.6 kB
JavaScript
System.register(["@beyond-js/kernel/bundle", "react", "pragmate-ui/icons", "swiper", "swiper/modules", "@beyond-js/reactive/model", "@beyond-js/kernel/styles"], function (_export, _context2) {
"use strict";
var dependency_0, dependency_1, dependency_2, dependency_3, dependency_4, dependency_5, dependency_6, __Bundle, __pkg, ims, SwiperSlider, __beyond_pkg, hmr;
_export("SwiperSlider", void 0);
return {
setters: [function (_beyondJsKernelBundle) {
dependency_0 = _beyondJsKernelBundle;
}, function (_react2) {
dependency_1 = _react2;
}, function (_pragmateUiIcons) {
dependency_2 = _pragmateUiIcons;
}, function (_swiper) {
dependency_3 = _swiper;
}, function (_swiperModules) {
dependency_4 = _swiperModules;
}, function (_beyondJsReactiveModel) {
dependency_5 = _beyondJsReactiveModel;
}, function (_beyondJsKernelStyles) {
dependency_6 = _beyondJsKernelStyles;
}],
execute: function () {
({
Bundle: __Bundle
} = dependency_0);
__pkg = new __Bundle({
"module": {
"vspecifier": "pragmate-ui@1.0.1/swiper"
},
"type": "code"
}, _context2.meta.url).package();
;
__pkg.dependencies.update([['react', dependency_1], ['pragmate-ui/icons', dependency_2], ['swiper', dependency_3], ['swiper/modules', dependency_4], ['@beyond-js/reactive/model', dependency_5], ['@beyond-js/kernel/styles', dependency_6]]);
brequire('@beyond-js/kernel/styles').styles.register('pragmate-ui@1.0.1/swiper');
ims = new Map();
/***********************************
INTERNAL MODULE: ./components/footer
***********************************/
ims.set('./components/footer', {
hash: 4152585320,
creator: function (require, exports) {
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.SwiperFooter = SwiperFooter;
var _react = require("react");
function SwiperFooter(props) {
const {
footer,
controller,
refs
} = props;
if (!footer) return null;
return _react.default.createElement(_react.default.Fragment, null, !controller?.swiper.isEnd && _react.default.createElement("button", {
className: "swiper-button-prev",
onClick: props.functionNext
}, "SKIP"), _react.default.createElement("div", {
ref: refs.pagination,
className: "swiper-pagination"
}), _react.default.createElement("button", {
className: "swiper-button-next ",
onClick: controller?.next
}, "Next"));
}
}
});
/***************************************
INTERNAL MODULE: ./components/navigation
***************************************/
ims.set('./components/navigation', {
hash: 1445369557,
creator: function (require, exports) {
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.SwiperNavigation = SwiperNavigation;
var _react = require("react");
var _icons = require("pragmate-ui/icons");
var _context = require("../context");
function SwiperNavigation() {
const {
controller,
navigation,
refs: {
prev,
next
}
} = (0, _context.useSwiperContext)();
if (!navigation) return null;
return _react.default.createElement(_react.default.Fragment, null, _react.default.createElement(_icons.IconButton, {
ref: prev,
icon: 'left',
variant: 'primary',
className: 'swiper__navigation-btn swiper-button-prev',
onClick: controller?.prevSlide
}), _react.default.createElement(_icons.IconButton, {
icon: 'right',
ref: next,
variant: 'primary',
onClick: controller?.nextSlide,
className: 'swiper__navigation-btn swiper-button-next'
}));
}
}
});
/***************************************
INTERNAL MODULE: ./components/pagination
***************************************/
ims.set('./components/pagination', {
hash: 1487697459,
creator: function (require, exports) {
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.Pagination = Pagination;
var _react = require("react");
var _context = require("../context");
function Pagination() {
const {
pagination,
refs
} = (0, _context.useSwiperContext)();
if (!pagination) return null;
return _react.default.createElement("div", {
ref: refs.pagination,
className: "swiper-pagination"
});
}
}
});
/*************************
INTERNAL MODULE: ./context
*************************/
ims.set('./context', {
hash: 522084440,
creator: function (require, exports) {
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.useSwiperContext = exports.SwiperContext = void 0;
var _react = require("react");
const SwiperContext = exports.SwiperContext = _react.default.createContext({});
const useSwiperContext = () => _react.default.useContext(SwiperContext);
exports.useSwiperContext = useSwiperContext;
}
});
/***********************
INTERNAL MODULE: ./index
***********************/
ims.set('./index', {
hash: 4094575603,
creator: function (require, exports) {
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.SwiperSlider = SwiperSlider;
var _react = require("react");
var _footer = require("./components/footer");
var _navigation = require("./components/navigation");
var _slide = require("./slide");
var _useSwiper = require("./use-swiper");
var _context = require("./context");
var _pagination = require("./components/pagination");
/*bundle*/
function SwiperSlider(props) {
const {
pagination,
footer,
navigation,
children
} = props;
const {
refs,
state
} = (0, _useSwiper.useSwiperSlider)(props);
const {
controller
} = state;
const contextValue = {
footer,
pagination,
controller,
navigation,
refs
};
const cls = `swiper-container swiper ${props.className ? `${props.className} pui-swiper-slider` : 'pui-swiper-slider'};`;
return _react.default.createElement(_context.SwiperContext.Provider, {
value: contextValue
}, _react.default.createElement("div", {
ref: refs.container,
className: cls
}, _react.default.createElement(_slide.SlideItems, {
items: children
}), _react.default.createElement(_pagination.Pagination, null), _react.default.createElement(_footer.SwiperFooter, null), _react.default.createElement(_navigation.SwiperNavigation, null)));
}
}
});
/************************************
INTERNAL MODULE: ./interfaces/options
************************************/
ims.set('./interfaces/options', {
hash: 1670442219,
creator: function (require, exports) {
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
class Swiper {
constructor(container, options) {
// Swiper initialization code
}
// Swiper methods
slideNext(speed, runCallbacks) {}
slidePrev(speed, runCallbacks) {}
slideTo(index, speed, runCallbacks) {}
update() {}
destroy(deleteInstance, cleanStyles) {}
}
}
});
/*****************************************
INTERNAL MODULE: ./interfaces/swiper-props
*****************************************/
ims.set('./interfaces/swiper-props', {
hash: 3138111793,
creator: function (require, exports) {
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
}
});
/*****************************
INTERNAL MODULE: ./slide/index
*****************************/
ims.set('./slide/index', {
hash: 721733334,
creator: function (require, exports) {
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.SlideItems = SlideItems;
var _react = require("react");
var _slide = require("./slide");
function SlideItems({
items
}) {
const slides = items.map((slide, index) => _react.default.createElement(_slide.Slide, {
key: index
}, slide));
return _react.default.createElement("div", {
className: "swiper-wrapper"
}, slides);
}
}
});
/*****************************
INTERNAL MODULE: ./slide/slide
*****************************/
ims.set('./slide/slide', {
hash: 2855517027,
creator: function (require, exports) {
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.Slide = Slide;
var _react = require("react");
function Slide({
children
}) {
return _react.default.createElement("div", {
className: "swiper-slide"
}, children);
}
}
});
/**********************************
INTERNAL MODULE: ./state/controller
**********************************/
ims.set('./state/controller', {
hash: 3431124586,
creator: function (require, exports) {
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.Controller = void 0;
var Swiper = require("swiper");
var _modules = require("swiper/modules");
var _model = require("@beyond-js/reactive/model");
const SwiperCasted = Swiper.Swiper;
class Controller extends _model.ReactiveModel {
#swiper;
get swiper() {
return this.#swiper;
}
#onEnd;
#props;
setSwiper = (element, props, ref) => {
this.#props = props;
let specs = {
// slidesPerView: props.slidesPerView ?? 3,
spaceBetween: props.spaceBetween ?? 10,
modules: [_modules.Navigation, _modules.Pagination],
...props
};
Object.keys(specs).forEach(key => {
if (['children'].includes(key)) delete specs[key];
});
if (!Swiper) {
console.warn('Swiper keeps without been loaded');
return;
}
if (props.pagination || props.footer) {
specs.pagination = {
el: ref.pagination.current,
clickable: true,
type: props.typePagination ?? 'bullets',
dynamicBullets: props.dynamicBullets ?? false
};
}
if (props.navigation) {
specs.navigation = {
nextEl: ref.next.current,
prevEl: ref.prev.current
};
}
this.#swiper = new SwiperCasted(element, specs);
if (props.activeSlide) this.#swiper.slideTo(parseInt(props.activeSlide));
const nextSlide = () => {
if (this.#swiper) this.#swiper.slideNext();
};
const prevSlide = () => {
if (this.#swiper) this.#swiper.slidePrev();
};
const slideTo = index => {
if (this.#swiper) this.#swiper.slideTo(parseInt(index));
};
if (props.nextSlide && typeof props.nextSlide === 'function') props.nextSlide(nextSlide);
if (props.prevSlide && typeof props.prevSlide === 'function') props.prevSlide(prevSlide);
if (props.slideTo && typeof props.slideTo === 'function') props.slideTo(slideTo);
this.#swiper.on('slideChange', () => {
if (this.#swiper?.isEnd) {
this.#onEnd = true;
this.triggerEvent();
} else {
this.#onEnd = false;
this.triggerEvent();
}
});
};
nextSlide = () => {
if (!this.#swiper?.isEnd) {
this.#swiper?.slideNext(500, false);
return;
}
if (!this.#onEnd) return;
if (this.#props.onNext) this.#props.onNext();else this.#swiper?.slideNext(500, false);
};
prevSlide = () => {
if (!this.#swiper?.isEnd) {
this.#swiper?.slidePrev(500, false);
return;
}
if (this.#props.onPrev) this.#props.onPrev();else this.#swiper?.slidePrev(500, false);
};
next = () => {
if (!this.#swiper?.isEnd) {
this.#swiper?.slideNext(500, false);
return;
}
if (!this.#onEnd) return;
this.#props.functionNext();
};
}
exports.Controller = Controller;
}
});
/*********************************
INTERNAL MODULE: ./state/interface
*********************************/
ims.set('./state/interface', {
hash: 3704574833,
creator: function (require, exports) {
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
}
});
/****************************
INTERNAL MODULE: ./use-swiper
****************************/
ims.set('./use-swiper', {
hash: 2195260495,
creator: function (require, exports) {
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.useSwiperSlider = void 0;
var _react = require("react");
var _controller = require("./state/controller");
const useSwiperSlider = props => {
/* const { props } = useSwiperContext(); */
const refs = {
next: _react.default.useRef(),
container: _react.default.useRef(),
pagination: _react.default.useRef(),
prev: _react.default.useRef()
};
const {
slideTo
} = props;
const {
container,
prev
} = refs;
const [state, setState] = _react.default.useState({});
_react.default.useEffect(() => {
const controller = new _controller.Controller();
const onChange = () => setState({
...state,
ready: true,
swiper: controller.swiper,
controller,
lastIndex: controller.lastIndex
});
controller.on('change', onChange);
if (!controller.destroyed) controller.setSwiper(container.current, props, refs);
onChange();
return () => controller.off('change', onChange);
}, []);
_react.default.useEffect(() => {
if (!state.swiper || !slideTo) return;
state.swiper.slideTo(slideTo);
}, [slideTo]);
return {
refs,
state,
prev,
container
};
};
exports.useSwiperSlider = useSwiperSlider;
}
});
__pkg.exports.descriptor = [{
"im": "./index",
"from": "SwiperSlider",
"name": "SwiperSlider"
}];
// Module exports
__pkg.exports.process = function ({
require,
prop,
value
}) {
(require || prop === 'SwiperSlider') && _export("SwiperSlider", SwiperSlider = require ? require('./index').SwiperSlider : value);
};
_export("__beyond_pkg", __beyond_pkg = __pkg);
_export("hmr", hmr = new function () {
this.on = (event, listener) => void 0;
this.off = (event, listener) => void 0;
}());
__pkg.initialise(ims);
}
};
});
//# sourceMappingURL=swiper.sjs.js.map