lib-pixelbuild 0.1.2 → 0.1.4
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.
|
@@ -5,8 +5,43 @@ import { ElementFactory } from '../factories/ElementFactory.js';
|
|
|
5
5
|
import { orderBySort } from '../utils/orderBySort.js';
|
|
6
6
|
const elementFactory = new ElementFactory();
|
|
7
7
|
export function CardComponent({ component }) {
|
|
8
|
-
|
|
9
|
-
|
|
8
|
+
const props = component.properties || {};
|
|
9
|
+
const cardOrder = [
|
|
10
|
+
props.cardElement1,
|
|
11
|
+
props.cardElement2,
|
|
12
|
+
props.cardElement3,
|
|
13
|
+
props.cardElement4,
|
|
14
|
+
].filter(Boolean);
|
|
15
|
+
const orderedElements = cardOrder.length > 0
|
|
16
|
+
? cardOrder
|
|
17
|
+
.map((type) => component.elements.find((el) => el.elementType === String(type)))
|
|
18
|
+
.filter(Boolean)
|
|
19
|
+
: orderBySort(component.elements);
|
|
20
|
+
const applyCardStyles = (element) => {
|
|
21
|
+
const overrides = {};
|
|
22
|
+
if (element.elementType === 'icon') {
|
|
23
|
+
if (props.cardIconColor)
|
|
24
|
+
overrides.color = props.cardIconColor;
|
|
25
|
+
if (props.cardIconSize)
|
|
26
|
+
overrides.fontSize = props.cardIconSize;
|
|
27
|
+
}
|
|
28
|
+
else if (element.elementType === 'title') {
|
|
29
|
+
if (props.cardTitleColor)
|
|
30
|
+
overrides.color = props.cardTitleColor;
|
|
31
|
+
if (props.cardTitleSize)
|
|
32
|
+
overrides.fontSize = props.cardTitleSize;
|
|
33
|
+
}
|
|
34
|
+
else if (element.elementType === 'text') {
|
|
35
|
+
if (props.cardTextColor)
|
|
36
|
+
overrides.color = props.cardTextColor;
|
|
37
|
+
if (props.cardTextSize)
|
|
38
|
+
overrides.fontSize = props.cardTextSize;
|
|
39
|
+
}
|
|
40
|
+
return Object.assign(Object.assign({}, element), { styles: Object.assign(Object.assign({}, element.styles), overrides) });
|
|
41
|
+
};
|
|
42
|
+
return (_jsx(Container, { style: component.styles, children: _jsx(Row, { id: "element-row", children: orderedElements.map((element) => {
|
|
43
|
+
const enhanced = applyCardStyles(element);
|
|
44
|
+
const e = elementFactory.build(enhanced);
|
|
10
45
|
return React.cloneElement(e, { key: element.id });
|
|
11
46
|
}) }) }));
|
|
12
47
|
}
|
|
@@ -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,19 +16,25 @@ 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 cleanComponentStyles(styles) {
|
|
20
|
+
const { minHeight: _m, display: _d, alignItems: _a, justifyContent: _j, flexDirection: _f } = styles, rest = __rest(styles, ["minHeight", "display", "alignItems", "justifyContent", "flexDirection"]);
|
|
21
|
+
return rest;
|
|
22
|
+
}
|
|
8
23
|
function StaticSliderComponent({ component }) {
|
|
9
24
|
const firstSlide = orderBySort(component.elements)[0];
|
|
10
|
-
|
|
25
|
+
if (!firstSlide)
|
|
26
|
+
return null;
|
|
27
|
+
return (_jsx("div", { style: Object.assign({ position: 'relative', overflow: 'hidden' }, cleanComponentStyles(component.styles)), children: elementFactory.build(firstSlide) }));
|
|
11
28
|
}
|
|
12
29
|
function InteractiveSliderComponent({ component }) {
|
|
13
|
-
const properties = component.properties;
|
|
30
|
+
const properties = component.properties || {};
|
|
14
31
|
const slides = orderBySort(component.elements);
|
|
15
32
|
const [currentSlide, setCurrentSlide] = useState(0);
|
|
16
33
|
const [loaded, setLoaded] = useState(false);
|
|
17
34
|
const [ref, instanceRef] = useKeenSlider({
|
|
18
35
|
loop: slides.length > 1,
|
|
19
36
|
mode: 'snap',
|
|
20
|
-
slides: { perView: 1, spacing: 10 },
|
|
37
|
+
slides: { perView: Number(properties.perView) || 1, spacing: 10 },
|
|
21
38
|
created() {
|
|
22
39
|
setLoaded(true);
|
|
23
40
|
},
|
|
@@ -29,12 +46,17 @@ function InteractiveSliderComponent({ component }) {
|
|
|
29
46
|
if (!properties.autoplay || slides.length < 2)
|
|
30
47
|
return;
|
|
31
48
|
const interval = Number(properties.interval) > 0 ? Number(properties.interval) : 5000;
|
|
32
|
-
const timer = window.setInterval(() => { var
|
|
49
|
+
const timer = window.setInterval(() => { var _b; return (_b = instanceRef.current) === null || _b === void 0 ? void 0 : _b.moveToIdx(instanceRef.current.track.details.rel + 1); }, interval);
|
|
33
50
|
return () => window.clearInterval(timer);
|
|
34
51
|
}, [instanceRef, properties.autoplay, properties.interval, slides.length]);
|
|
35
|
-
const
|
|
52
|
+
const fixedHeight = Number(properties.height) > 0 ? Number(properties.height) : 0;
|
|
53
|
+
const perView = Number(properties.perView) || 1;
|
|
54
|
+
const showArrows = Boolean(properties.showArrows) && loaded && slides.length > perView;
|
|
36
55
|
const showDots = Boolean(properties.showDots) && loaded && slides.length > 1;
|
|
37
|
-
return (_jsxs("div", { style: Object.assign({ position: 'relative' }, component.styles), children: [_jsx("div", { ref: ref, className: "keen-slider",
|
|
56
|
+
return (_jsxs("div", { style: Object.assign({ position: 'relative' }, cleanComponentStyles(component.styles)), children: [_jsx("div", { ref: ref, className: "keen-slider", style: fixedHeight ? { height: fixedHeight } : undefined, children: slides.map((element) => (_jsx("div", { className: "keen-slider__slide", style: { overflow: 'hidden' }, children: elementFactory.build(Object.assign(Object.assign({}, element), { styles: element.elementType === 'image' || element.elementType === 'video'
|
|
57
|
+
? fixedHeight
|
|
58
|
+
? Object.assign({ width: '100%', height: '100%', objectFit: 'cover' }, element.styles) : Object.assign({ width: '100%' }, element.styles)
|
|
59
|
+
: element.styles })) }, element.id))) }), 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.moveToIdx(instanceRef.current.track.details.rel - 1); }, 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.moveToIdx(instanceRef.current.track.details.rel + 1); }, 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
60
|
}
|
|
39
61
|
export function SliderComponent({ component, editionMode = false }) {
|
|
40
62
|
if (editionMode)
|
|
@@ -8,7 +8,9 @@ const icons = {
|
|
|
8
8
|
FaTwitter, FaUser, FaWhatsapp, FaYoutube,
|
|
9
9
|
};
|
|
10
10
|
export function IconElement({ element }) {
|
|
11
|
+
var _a;
|
|
11
12
|
const name = String(element.properties.name || '');
|
|
12
13
|
const Icon = icons[name] || FaQuestionCircle;
|
|
13
|
-
|
|
14
|
+
const iconSize = ((_a = element.styles) === null || _a === void 0 ? void 0 : _a.fontSize) || '1.25rem';
|
|
15
|
+
return (_jsx(ElementColWrapper, { element: element, children: _jsx("span", { style: { fontSize: iconSize, display: 'inline-flex' }, children: _jsx(Icon, { size: "1em", style: element.styles, "aria-label": name || 'Ícone' }) }) }));
|
|
14
16
|
}
|