lib-pixelbuild 0.1.2 → 0.1.3
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
|
@@ -1,3 +1,14 @@
|
|
|
1
|
+
var __rest = (this && this.__rest) || function (s, e) {
|
|
2
|
+
var t = {};
|
|
3
|
+
for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
|
|
4
|
+
t[p] = s[p];
|
|
5
|
+
if (s != null && typeof Object.getOwnPropertySymbols === "function")
|
|
6
|
+
for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
|
|
7
|
+
if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
|
|
8
|
+
t[p[i]] = s[p[i]];
|
|
9
|
+
}
|
|
10
|
+
return t;
|
|
11
|
+
};
|
|
1
12
|
import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
|
|
2
13
|
import { useEffect, useState } from 'react';
|
|
3
14
|
import { useKeenSlider } from 'keen-slider/react.js';
|
|
@@ -5,9 +16,18 @@ import { ElementFactory } from '../factories/ElementFactory.js';
|
|
|
5
16
|
import { orderBySort } from '../utils/orderBySort.js';
|
|
6
17
|
import 'keen-slider/keen-slider.min.css';
|
|
7
18
|
const elementFactory = new ElementFactory();
|
|
19
|
+
function cleanSlideStyles(element) {
|
|
20
|
+
const _b = element.styles, { height: _h, objectFit: _o } = _b, rest = __rest(_b, ["height", "objectFit"]);
|
|
21
|
+
return Object.assign(Object.assign({}, element), { styles: rest });
|
|
22
|
+
}
|
|
23
|
+
function cleanComponentStyles(styles) {
|
|
24
|
+
const { minHeight: _m, display: _d, alignItems: _a, justifyContent: _j, flexDirection: _f } = styles, rest = __rest(styles, ["minHeight", "display", "alignItems", "justifyContent", "flexDirection"]);
|
|
25
|
+
return rest;
|
|
26
|
+
}
|
|
8
27
|
function StaticSliderComponent({ component }) {
|
|
9
28
|
const firstSlide = orderBySort(component.elements)[0];
|
|
10
|
-
|
|
29
|
+
const slide = firstSlide ? cleanSlideStyles(firstSlide) : null;
|
|
30
|
+
return (_jsx("div", { style: Object.assign({ position: 'relative', overflow: 'hidden' }, cleanComponentStyles(component.styles)), children: slide && elementFactory.build(slide) }));
|
|
11
31
|
}
|
|
12
32
|
function InteractiveSliderComponent({ component }) {
|
|
13
33
|
const properties = component.properties;
|
|
@@ -29,12 +49,22 @@ function InteractiveSliderComponent({ component }) {
|
|
|
29
49
|
if (!properties.autoplay || slides.length < 2)
|
|
30
50
|
return;
|
|
31
51
|
const interval = Number(properties.interval) > 0 ? Number(properties.interval) : 5000;
|
|
32
|
-
const timer = window.setInterval(() => { var
|
|
52
|
+
const timer = window.setInterval(() => { var _b; return (_b = instanceRef.current) === null || _b === void 0 ? void 0 : _b.next(); }, interval);
|
|
33
53
|
return () => window.clearInterval(timer);
|
|
34
54
|
}, [instanceRef, properties.autoplay, properties.interval, slides.length]);
|
|
55
|
+
const fixedHeight = Number(properties.height) > 0 ? Number(properties.height) : 0;
|
|
35
56
|
const showArrows = Boolean(properties.showArrows) && loaded && slides.length > 1;
|
|
36
57
|
const showDots = Boolean(properties.showDots) && loaded && slides.length > 1;
|
|
37
|
-
|
|
58
|
+
const sliderStyle = fixedHeight
|
|
59
|
+
? { height: fixedHeight }
|
|
60
|
+
: { alignItems: 'flex-start' };
|
|
61
|
+
const slideStyle = fixedHeight
|
|
62
|
+
? { minHeight: '100%', height: '100%' }
|
|
63
|
+
: { minHeight: 'auto' };
|
|
64
|
+
return (_jsxs("div", { style: Object.assign({ position: 'relative' }, cleanComponentStyles(component.styles)), children: [_jsx("div", { ref: ref, className: "keen-slider", style: sliderStyle, children: slides.map((element) => {
|
|
65
|
+
const sanitized = fixedHeight ? element : cleanSlideStyles(element);
|
|
66
|
+
return (_jsx("div", { className: "keen-slider__slide", style: slideStyle, children: elementFactory.build(sanitized) }, element.id));
|
|
67
|
+
}) }), showArrows && (_jsxs(_Fragment, { children: [_jsx("button", { type: "button", "aria-label": "Slide anterior", onClick: () => { var _b; return (_b = instanceRef.current) === null || _b === void 0 ? void 0 : _b.prev(); }, style: { position: 'absolute', left: 0, top: '50%', transform: 'translateY(-50%)' }, children: '<' }), _jsx("button", { type: "button", "aria-label": "Proximo slide", onClick: () => { var _b; return (_b = instanceRef.current) === null || _b === void 0 ? void 0 : _b.next(); }, style: { position: 'absolute', right: 0, top: '50%', transform: 'translateY(-50%)' }, children: '>' })] })), showDots && (_jsx("div", { "aria-label": "Navegacao do slider", style: { display: 'flex', justifyContent: 'center', gap: 4 }, children: slides.map((element, index) => (_jsx("button", { type: "button", "aria-label": `Ir para o slide ${index + 1}`, "aria-current": currentSlide === index ? 'true' : undefined, onClick: () => { var _b; return (_b = instanceRef.current) === null || _b === void 0 ? void 0 : _b.moveToIdx(index); }, children: index + 1 }, element.id))) }))] }));
|
|
38
68
|
}
|
|
39
69
|
export function SliderComponent({ component, editionMode = false }) {
|
|
40
70
|
if (editionMode)
|