@betterstore/react 0.3.43 → 0.3.44
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.
- package/CHANGELOG.md +6 -0
- package/dist/index.cjs.js +11 -8
- package/dist/index.mjs +11 -8
- package/package.json +1 -1
package/CHANGELOG.md
CHANGED
package/dist/index.cjs.js
CHANGED
|
@@ -570,25 +570,28 @@ const appearance = {
|
|
|
570
570
|
|
|
571
571
|
function Appearance({ appearance, fonts, }) {
|
|
572
572
|
React.useEffect(() => {
|
|
573
|
+
var _a;
|
|
573
574
|
const variables = getVariablesFromAppearanceConfig(appearance);
|
|
574
|
-
|
|
575
|
+
const iframe = document.querySelector("iframe");
|
|
576
|
+
const iframeDoc = (iframe === null || iframe === void 0 ? void 0 : iframe.contentDocument) || ((_a = iframe === null || iframe === void 0 ? void 0 : iframe.contentWindow) === null || _a === void 0 ? void 0 : _a.document);
|
|
577
|
+
if (variables && iframeDoc) {
|
|
575
578
|
Object.entries(variables).forEach(([key, value]) => {
|
|
576
|
-
|
|
579
|
+
iframeDoc.documentElement.style.setProperty(key, value);
|
|
577
580
|
});
|
|
578
581
|
}
|
|
579
582
|
// Load fonts if provided
|
|
580
|
-
if (fonts) {
|
|
583
|
+
if (fonts && iframeDoc) {
|
|
581
584
|
fonts.forEach((font) => {
|
|
582
585
|
if ("cssSrc" in font) {
|
|
583
586
|
// Handle CSS font source
|
|
584
|
-
const link =
|
|
587
|
+
const link = iframeDoc.createElement("link");
|
|
585
588
|
link.rel = "stylesheet";
|
|
586
589
|
link.href = font.cssSrc;
|
|
587
|
-
|
|
590
|
+
iframeDoc.head.appendChild(link);
|
|
588
591
|
}
|
|
589
592
|
else if ("family" in font) {
|
|
590
593
|
// Handle custom font source
|
|
591
|
-
const style =
|
|
594
|
+
const style = iframeDoc.createElement("style");
|
|
592
595
|
style.textContent = `
|
|
593
596
|
@font-face {
|
|
594
597
|
font-family: '${font.family}';
|
|
@@ -597,11 +600,11 @@ function Appearance({ appearance, fonts, }) {
|
|
|
597
600
|
font-style: ${font.style || "normal"};
|
|
598
601
|
}
|
|
599
602
|
`;
|
|
600
|
-
|
|
603
|
+
iframeDoc.head.appendChild(style);
|
|
601
604
|
}
|
|
602
605
|
});
|
|
603
606
|
}
|
|
604
|
-
}, [appearance]);
|
|
607
|
+
}, [appearance, fonts]);
|
|
605
608
|
return null;
|
|
606
609
|
}
|
|
607
610
|
const getVariablesFromAppearanceConfig = (appearance) => {
|
package/dist/index.mjs
CHANGED
|
@@ -547,25 +547,28 @@ const appearance = {
|
|
|
547
547
|
|
|
548
548
|
function Appearance({ appearance, fonts, }) {
|
|
549
549
|
useEffect(() => {
|
|
550
|
+
var _a;
|
|
550
551
|
const variables = getVariablesFromAppearanceConfig(appearance);
|
|
551
|
-
|
|
552
|
+
const iframe = document.querySelector("iframe");
|
|
553
|
+
const iframeDoc = (iframe === null || iframe === void 0 ? void 0 : iframe.contentDocument) || ((_a = iframe === null || iframe === void 0 ? void 0 : iframe.contentWindow) === null || _a === void 0 ? void 0 : _a.document);
|
|
554
|
+
if (variables && iframeDoc) {
|
|
552
555
|
Object.entries(variables).forEach(([key, value]) => {
|
|
553
|
-
|
|
556
|
+
iframeDoc.documentElement.style.setProperty(key, value);
|
|
554
557
|
});
|
|
555
558
|
}
|
|
556
559
|
// Load fonts if provided
|
|
557
|
-
if (fonts) {
|
|
560
|
+
if (fonts && iframeDoc) {
|
|
558
561
|
fonts.forEach((font) => {
|
|
559
562
|
if ("cssSrc" in font) {
|
|
560
563
|
// Handle CSS font source
|
|
561
|
-
const link =
|
|
564
|
+
const link = iframeDoc.createElement("link");
|
|
562
565
|
link.rel = "stylesheet";
|
|
563
566
|
link.href = font.cssSrc;
|
|
564
|
-
|
|
567
|
+
iframeDoc.head.appendChild(link);
|
|
565
568
|
}
|
|
566
569
|
else if ("family" in font) {
|
|
567
570
|
// Handle custom font source
|
|
568
|
-
const style =
|
|
571
|
+
const style = iframeDoc.createElement("style");
|
|
569
572
|
style.textContent = `
|
|
570
573
|
@font-face {
|
|
571
574
|
font-family: '${font.family}';
|
|
@@ -574,11 +577,11 @@ function Appearance({ appearance, fonts, }) {
|
|
|
574
577
|
font-style: ${font.style || "normal"};
|
|
575
578
|
}
|
|
576
579
|
`;
|
|
577
|
-
|
|
580
|
+
iframeDoc.head.appendChild(style);
|
|
578
581
|
}
|
|
579
582
|
});
|
|
580
583
|
}
|
|
581
|
-
}, [appearance]);
|
|
584
|
+
}, [appearance, fonts]);
|
|
582
585
|
return null;
|
|
583
586
|
}
|
|
584
587
|
const getVariablesFromAppearanceConfig = (appearance) => {
|