pds-dev-kit-web-test 0.3.67 → 0.3.69

package/dist/src/sub/DynamicLayout/sections/CustomSection/components/ComponentBlock/componentBlocks/Embed/Embed.d.ts

@@ -0,0 +1,5 @@
+/// <reference types="react" />
+import type { CB_EMBED_PROPERTIES_TYPE, IndexForIntersection } from '../../../../util/types';
+type Props = CB_EMBED_PROPERTIES_TYPE & IndexForIntersection;
+declare function Embed(props: Props): JSX.Element;
+export default Embed;

package/dist/src/sub/DynamicLayout/sections/CustomSection/components/ComponentBlock/componentBlocks/Embed/Embed.js

@@ -0,0 +1,48 @@
+"use strict";
+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 __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+var jsx_runtime_1 = require("react/jsx-runtime");
+var react_1 = require("react");
+var DynamicLayout_1 = require("../../../../../../../DynamicLayout");
+var hooks_1 = require("../../../../hooks");
+var util_1 = require("../../../../util");
+var S_CB_AnimationObserverBox_1 = require("../components/S_CB_AnimationObserverBox");
+var S_CB_BoxWithShadow_1 = require("../components/S_CB_BoxWithShadow");
+var constant_1 = require("./constant");
+var EmbedIframe_1 = __importDefault(require("./EmbedIframe"));
+var IframeDenied_1 = __importDefault(require("./IframeDenied"));
+function Embed(props) {
+    // eslint-disable-next-line @typescript-eslint/no-unused-vars
+    var _a = (0, react_1.useContext)(DynamicLayout_1.dynamicLayoutContext), device = _a.device, mode = _a.mode;
+    var CB_EFFECT_PROP_ENTANIM = props.CB_EFFECT_PROP_ENTANIM, index = props.index;
+    var CB_CONTENT_PROP_CODEBLOCK_SPEC_CODE = props.CB_CONTENT_PROP_CODEBLOCK.CB_CONTENT_PROP_CODEBLOCK_SPEC_CODE, CB_STYLE_PROP_SHADOW = props.CB_STYLE_PROP_SHADOW;
+    var _b = (0, util_1.parseProperties)(props, device), style = _b.style, hoverStyle = _b.hoverStyle, layout = _b.layout, effect = _b.effect;
+    var cbRef = (0, react_1.useRef)(null);
+    var entry = (0, hooks_1.useIntersectionObserver)(cbRef, { threshold: 0.2, freezeOnceVisible: false }, [
+        index
+    ]);
+    var isVisible = !!(entry === null || entry === void 0 ? void 0 : entry.isIntersecting);
+    var effectCssProperties = isVisible ? effect : {};
+    var editModeStyle = mode === 'EDIT' ? { pointerEvents: 'none' } : {};
+    var isNoneEffectType = device === 'DESKTOP'
+        ? CB_EFFECT_PROP_ENTANIM.CB_EFFECT_PROP_ENTANIM_SPEC_TYPE === 'NONE'
+        : CB_EFFECT_PROP_ENTANIM['CB_EFFECT_PROP_ENTANIM_SPEC_TYPE:MOBILE'] === 'NONE';
+    var hasEffect = !isNoneEffectType;
+    var effectVisibleStyle = hasEffect ? { opacity: isVisible ? 1 : 0 } : {};
+    var iframeAllowed = window.location.hostname !== constant_1.EMBED_DENIED_HOST;
+    return ((0, jsx_runtime_1.jsx)(S_CB_AnimationObserverBox_1.S_CB_AnimationObserverBox, __assign({ ref: hasEffect ? cbRef : null, effectVisibleStyle: effectVisibleStyle }, { children: (0, jsx_runtime_1.jsx)(S_CB_BoxWithShadow_1.S_CB_BoxWithShadow, __assign({ className: "cb-layout-box", normalStyle: __assign(__assign(__assign(__assign({}, style), layout), effectCssProperties), editModeStyle), hoverStyle: hoverStyle, cbStylePropsShadowSpecs: CB_STYLE_PROP_SHADOW, device: device }, { children: iframeAllowed ? ((0, jsx_runtime_1.jsx)(EmbedIframe_1.default, { embedCode: CB_CONTENT_PROP_CODEBLOCK_SPEC_CODE, style: layout })) : ((0, jsx_runtime_1.jsx)(IframeDenied_1.default, {})) })) })));
+}
+exports.default = Embed;

package/dist/src/sub/DynamicLayout/sections/CustomSection/components/ComponentBlock/componentBlocks/Embed/EmbedIframe.d.ts

@@ -0,0 +1,8 @@
+/// <reference types="react" />
+import { CSSProperties } from 'styled-components';
+interface EmbedCoreProps {
+    embedCode: string;
+    style: CSSProperties;
+}
+declare const EmbedIframe: React.FC<EmbedCoreProps>;
+export default EmbedIframe;

package/dist/src/sub/DynamicLayout/sections/CustomSection/components/ComponentBlock/componentBlocks/Embed/EmbedIframe.js

@@ -0,0 +1,45 @@
+"use strict";
+var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
+    if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
+    return cooked;
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+var jsx_runtime_1 = require("react/jsx-runtime");
+var react_1 = require("react");
+var styled_components_1 = __importDefault(require("styled-components"));
+var EmbedIframe = function (_a) {
+    var embedCode = _a.embedCode, style = _a.style;
+    var iframeRef = (0, react_1.useRef)(null);
+    var embedHtml = (0, react_1.useMemo)(function () {
+        return getHtmlCode(embedCode, style);
+    }, [embedCode, style]);
+    (0, react_1.useLayoutEffect)(function () {
+        var _a;
+        if (!iframeRef.current) {
+            return;
+        }
+        var iframeDoc = iframeRef.current.contentDocument || ((_a = iframeRef.current.contentWindow) === null || _a === void 0 ? void 0 : _a.document);
+        if (!iframeDoc || !embedHtml) {
+            return;
+        }
+        iframeDoc.open();
+        iframeDoc.write(embedHtml);
+        iframeDoc.close();
+    }, [embedHtml]);
+    return ((0, jsx_runtime_1.jsx)(S_Iframe, { ref: iframeRef, title: "cb-embed", allow: "accelerometer; camera; encrypted-media; geolocation; gyroscope; hid; microphone; midi; clipboard-write;", sandbox: "allow-forms allow-modals allow-same-origin allow-popups allow-presentation allow-scripts allow-downloads allow-pointer-lock" }));
+};
+var S_Iframe = styled_components_1.default.iframe(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  border: none;\n  display: block;\n  height: 100%;\n  width: 100%;\n"], ["\n  border: none;\n  display: block;\n  height: 100%;\n  width: 100%;\n"])));
+function getHtmlCode(code, style) {
+    var styleString = Object.entries(style).reduce(function (styleStr, _a) {
+        var prop = _a[0], value = _a[1];
+        var kebabProp = prop.replace(/([a-z0])([A-Z])/g, '$1-$2').toLowerCase();
+        return "".concat(styleStr).concat(kebabProp, ": ").concat(value, ";");
+    }, '');
+    var html = "\n    <!DOCTYPE html>\n    <html lang=\"en\">\n    <head>\n        <base href=\"https://example.com/\">\n        <meta charset=\"UTF-8\">\n        <style>\n            html, body {\n                margin: 0;\n                padding: 0;\n                width: 100%;\n                height: 100%;\n                ".concat(styleString, "\n            }\n\n            body > div { \n            flex-grow: 1;\n            width: 100%;\n          }\n        </style>\n    </head>\n    <body>\n        ").concat(code, "\n    </body>\n    </html>\n    ");
+    return html;
+}
+exports.default = EmbedIframe;
+var templateObject_1;

package/dist/src/sub/DynamicLayout/sections/CustomSection/components/ComponentBlock/componentBlocks/Embed/IframeDenied.d.ts

@@ -0,0 +1,3 @@
+/// <reference types="react" />
+declare function IframeDenied(): JSX.Element;
+export default IframeDenied;

package/dist/src/sub/DynamicLayout/sections/CustomSection/components/ComponentBlock/componentBlocks/Embed/IframeDenied.js

@@ -0,0 +1,21 @@
+"use strict";
+var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
+    if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
+    return cooked;
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+var jsx_runtime_1 = require("react/jsx-runtime");
+require("react");
+var react_i18next_1 = require("react-i18next");
+var components_1 = require("../../../../../../../DynamicLayout/components");
+var styled_components_1 = __importDefault(require("styled-components"));
+function IframeDenied() {
+    var t = (0, react_i18next_1.useTranslation)().t;
+    return ((0, jsx_runtime_1.jsx)(S_Denied, { children: (0, jsx_runtime_1.jsx)(components_1.D_TextLabel, { text: t('str_key_user_scene_x00001pages_notconnectdomain_embedcb_hide_info'), styleTheme: "caption1Regular", colorTheme: "sysTextSecondary", textAlign: "center" }) }));
+}
+var S_Denied = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  align-items: center;\n  background-color: #dddddd;\n  display: flex;\n  height: 100%;\n  justify-content: center;\n  width: 100%;\n"], ["\n  align-items: center;\n  background-color: #dddddd;\n  display: flex;\n  height: 100%;\n  justify-content: center;\n  width: 100%;\n"])));
+exports.default = IframeDenied;
+var templateObject_1;

package/dist/src/sub/DynamicLayout/sections/CustomSection/components/ComponentBlock/componentBlocks/Embed/constant.d.ts

@@ -0,0 +1 @@
+export declare const EMBED_DENIED_HOST = "app.publr.co";

package/dist/src/sub/DynamicLayout/sections/CustomSection/components/ComponentBlock/componentBlocks/Embed/constant.js

@@ -0,0 +1,4 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.EMBED_DENIED_HOST = void 0;
+exports.EMBED_DENIED_HOST = 'app.publr.co';

package/dist/src/sub/DynamicLayout/sections/CustomSection/components/ComponentBlock/componentBlocks/Embed/types.d.ts

@@ -0,0 +1,6 @@
+import type { DefaultBrightTheme } from '../../../../../../../DynamicLayout/sections/CustomSection/util/types';
+export type TwitterPropsKeys = keyof CB_TWITTER_STYLE_PROPS;
+export type CB_TWITTER_STYLE_PROPS = {
+    CB_STYLE_PROP_TWITTER_SPEC_THEME: DefaultBrightTheme;
+    'CB_STYLE_PROP_TWITTER_SPEC_THEME:MOBILE': DefaultBrightTheme | undefined;
+};

package/dist/src/sub/DynamicLayout/sections/CustomSection/components/ComponentBlock/componentBlocks/Embed/types.js

@@ -0,0 +1,2 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });

package/dist/src/sub/DynamicLayout/sections/CustomSection/components/ComponentBlock/componentBlocks/types.d.ts

@@ -19,3 +19,6 @@ export type CB_CONTENT_PROP_IMAGE = {
 export type CB_CONTENT_PROP_TWITTER = {
     CB_CONTENT_PROP_TWITTER_SPEC_SRC: STRING_PLAIN;
 };
+export type CB_CONTENT_PROP_CODEBLOCK = {
+    CB_CONTENT_PROP_CODEBLOCK_SPEC_CODE: STRING_PLAIN;
+};

package/dist/src/sub/DynamicLayout/sections/CustomSection/types.d.ts

@@ -1,6 +1,6 @@
-import type { CB_BTN_PROPERTIES_TYPE, CB_DIVIDER_PROPERTIES_TYPE, CB_IMG_PROPERTIES_TYPE, CB_RICHTEXT_PROPERTIES_TYPE, CB_TEXT_PROPERTIES_TYPE, CB_TWITTER_PROPERTIES_TYPE, CB_YOUTUBE_PROPERTIES_TYPE } from './util/types';
+import type { CB_BTN_PROPERTIES_TYPE, CB_DIVIDER_PROPERTIES_TYPE, CB_EMBED_PROPERTIES_TYPE, CB_IMG_PROPERTIES_TYPE, CB_RICHTEXT_PROPERTIES_TYPE, CB_TEXT_PROPERTIES_TYPE, CB_TWITTER_PROPERTIES_TYPE, CB_YOUTUBE_PROPERTIES_TYPE } from './util/types';
 export type CB_TYPES = 'GENERAL';
-export type ComponentBlock = CB_TEXT_TYPE | CB_BTN_TYPE | CB_RICHTEXT | CB_DIVIDER | CB_IMG | CB_YOUTUBE | CB_TWITTER;
+export type ComponentBlock = CB_TEXT_TYPE | CB_BTN_TYPE | CB_RICHTEXT | CB_DIVIDER | CB_IMG | CB_YOUTUBE | CB_TWITTER | CB_IFRAME;
 type GeneralCustomSectionType = {
     id: number;
     type: 'GENERAL';
@@ -17,7 +17,7 @@ export type GroupCustomSectionType = {
     queryableDefinitionPreset: string;
     dynamicLayoutSectionId: number;
 };
-export type AllCBProperties = CB_TEXT_PROPERTIES_TYPE | CB_BTN_PROPERTIES_TYPE | CB_RICHTEXT_PROPERTIES_TYPE | CB_RICHTEXT_PROPERTIES_TYPE | CB_DIVIDER_PROPERTIES_TYPE | CB_YOUTUBE_PROPERTIES_TYPE | CB_IMG_PROPERTIES_TYPE | CB_TWITTER_PROPERTIES_TYPE;
+export type AllCBProperties = CB_TEXT_PROPERTIES_TYPE | CB_BTN_PROPERTIES_TYPE | CB_RICHTEXT_PROPERTIES_TYPE | CB_RICHTEXT_PROPERTIES_TYPE | CB_DIVIDER_PROPERTIES_TYPE | CB_YOUTUBE_PROPERTIES_TYPE | CB_IMG_PROPERTIES_TYPE | CB_TWITTER_PROPERTIES_TYPE | CB_EMBED_PROPERTIES_TYPE;
 export type CB_TEXT_TYPE = GeneralCustomSectionType & {
     componentBlockCode: CB_ALL_CODES.CB_TEXT;
     jsonProperties: {
@@ -60,6 +60,12 @@ export type CB_TWITTER = GeneralCustomSectionType & {
         data: CB_TWITTER_PROPERTIES_TYPE;
     };
 };
+export type CB_IFRAME = GeneralCustomSectionType & {
+    componentBlockCode: CB_ALL_CODES.CB_EMBED;
+    jsonProperties: {
+        data: CB_TWITTER_PROPERTIES_TYPE;
+    };
+};
 export declare enum CB_ALL_CODES {
     CB_TEXT = "CB_TEXT",
     CB_BTN = "CB_BTN",
@@ -67,6 +73,7 @@ export declare enum CB_ALL_CODES {
     CB_DIVIDER = "CB_DIVIDER",
     CB_IMG = "CB_IMG",
     CB_YOUTUBE = "CB_YOUTUBE",
-    CB_TWITTER = "CB_TWITTER"
+    CB_TWITTER = "CB_TWITTER",
+    CB_EMBED = "CB_EMBED"
 }
 export {};

package/dist/src/sub/DynamicLayout/sections/CustomSection/types.js

@@ -10,4 +10,5 @@ var CB_ALL_CODES;
     CB_ALL_CODES["CB_IMG"] = "CB_IMG";
     CB_ALL_CODES["CB_YOUTUBE"] = "CB_YOUTUBE";
     CB_ALL_CODES["CB_TWITTER"] = "CB_TWITTER";
+    CB_ALL_CODES["CB_EMBED"] = "CB_EMBED";
 })(CB_ALL_CODES = exports.CB_ALL_CODES || (exports.CB_ALL_CODES = {}));

package/dist/src/sub/DynamicLayout/sections/CustomSection/util/parseProperties.d.ts

@@ -1,5 +1,5 @@
 import { CB_LAYOUT_PROP_KEYS } from './layoutPropParsers/types';
 import { CB_STYLE_PROP_KEYS } from './stylePropParsers/types';
-import type { Device, ParserResult, CB_TEXT_PROPERTIES_TYPE, CB_BTN_PROPERTIES_TYPE, CB_IMG_PROPERTIES_TYPE, CB_TWITTER_PROPERTIES_TYPE, CB_DIVIDER_PROPERTIES_TYPE, CB_YOUTUBE_PROPERTIES_TYPE, CB_RICHTEXT_PROPERTIES_TYPE } from './types';
+import type { Device, ParserResult, CB_TEXT_PROPERTIES_TYPE, CB_BTN_PROPERTIES_TYPE, CB_IMG_PROPERTIES_TYPE, CB_TWITTER_PROPERTIES_TYPE, CB_DIVIDER_PROPERTIES_TYPE, CB_YOUTUBE_PROPERTIES_TYPE, CB_RICHTEXT_PROPERTIES_TYPE, CB_EMBED_PROPERTIES_TYPE } from './types';
 export type specTypes = CB_LAYOUT_PROP_KEYS | CB_STYLE_PROP_KEYS;
-export default function parseProperties(properties: CB_TEXT_PROPERTIES_TYPE | CB_BTN_PROPERTIES_TYPE | CB_IMG_PROPERTIES_TYPE | CB_TWITTER_PROPERTIES_TYPE | CB_DIVIDER_PROPERTIES_TYPE | CB_YOUTUBE_PROPERTIES_TYPE | CB_RICHTEXT_PROPERTIES_TYPE, device: Device): ParserResult;
+export default function parseProperties(properties: CB_TEXT_PROPERTIES_TYPE | CB_BTN_PROPERTIES_TYPE | CB_IMG_PROPERTIES_TYPE | CB_TWITTER_PROPERTIES_TYPE | CB_DIVIDER_PROPERTIES_TYPE | CB_YOUTUBE_PROPERTIES_TYPE | CB_RICHTEXT_PROPERTIES_TYPE | CB_EMBED_PROPERTIES_TYPE, device: Device): ParserResult;

package/dist/src/sub/DynamicLayout/sections/CustomSection/util/types.d.ts

@@ -1,7 +1,7 @@
 import type { CB_BTNTEXT_STYLE_PROPS, CB_STYLE_PROP_BTNCOLOR_SPECS } from '../components/ComponentBlock/componentBlocks/Button/btnTypes';
 import type { CB_STYLE_PROP_TEXT_SPECS } from '../components/ComponentBlock/componentBlocks/Text/types';
 import type { CB_TWITTER_STYLE_PROPS } from '../components/ComponentBlock/componentBlocks/Twitter/types';
-import type { CB_CONTENT_PROP_CLINK, CB_CONTENT_PROP_IMAGE, CB_CONTENT_PROP_TEXT, CB_CONTENT_PROP_TWITTER } from '../components/ComponentBlock/componentBlocks/types';
+import type { CB_CONTENT_PROP_CLINK, CB_CONTENT_PROP_CODEBLOCK, CB_CONTENT_PROP_IMAGE, CB_CONTENT_PROP_TEXT, CB_CONTENT_PROP_TWITTER } from '../components/ComponentBlock/componentBlocks/types';
 import type { CB_CONTENT_PROP_YOUTUBE_TYPE, CB_STYLE_PROP_BGCOLOR_SPECS } from '../components/ComponentBlock/componentBlocks/Youtube/types';
 import type { CB_CONTENT_PROP_VISIBILITY_SPECS } from './contentPropParsers/parseContentVisibility';
 import type { CB_EFFECT_PROP_ENTANIM_SPECS } from './effectPropParsers/parseEffectPropEntAnim';
@@ -82,6 +82,16 @@ export type CB_TWITTER_PROPERTIES_TYPE = CB_GENERAL_PROPERTIES_TYPE & {
     CB_LAYOUT_PROP_PADDING: CB_LAYOUT_PROP_PADDING_SPECS;
     CB_EFFECT_PROP_ENTANIM: CB_EFFECT_PROP_ENTANIM_SPECS;
 };
+export type CB_EMBED_PROPERTIES_TYPE = CB_GENERAL_PROPERTIES_TYPE & {
+    CB_CONTENT_PROP_CODEBLOCK: CB_CONTENT_PROP_CODEBLOCK;
+    CB_CONTENT_PROP_VISIBILITY: CB_CONTENT_PROP_VISIBILITY_SPECS;
+    CB_STYLE_PROP_SHADOW: CB_STYLE_PROP_SHADOW_SPECS;
+    CB_STYLE_PROP_BGCOLOR: CB_STYLE_PROP_BGCOLOR_SPECS;
+    CB_STYLE_PROP_OPACITY: CB_STYLE_PROP_TEXT_OPACITY_SPECS;
+    CB_LAYOUT_PROP_PADDING: CB_LAYOUT_PROP_PADDING_SPECS;
+    CB_LAYOUT_PROP_ARRANGE: CB_LAYOUT_PROP_ARRANGE_SPECS;
+    CB_EFFECT_PROP_ENTANIM: CB_EFFECT_PROP_ENTANIM_SPECS;
+};
 export type CB_RICHTEXT_PROPERTIES_TYPE = CB_GENERAL_PROPERTIES_TYPE & {
     CB_CONTENT_PROP_TEXTEDIT: {
         CB_CONTENT_PROP_TEXTEDIT_SPEC_EDITOR: string;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "pds-dev-kit-web-test",
-  "version": "0.3.67",
+  "version": "0.3.69",
   "license": "MIT",
   "private": false,
   "main": "dist/index.js",