pds-dev-kit-web-test 0.2.25 → 0.2.27

package/dist/src/sub/DynamicLayout/components/Section/Section.d.ts

@@ -1,7 +1,9 @@
-/// <reference types="react" />
+import { CSSProperties } from 'react';
 import type { ISection } from '../../types';
 declare type SectionPropTypes = ISection & {
     children?: React.ReactNode;
+} & {
+    overrideStyles?: CSSProperties;
 };
-declare function Section({ children, ...props }: SectionPropTypes): JSX.Element;
+declare function Section({ children, overrideStyles, ...props }: SectionPropTypes): JSX.Element;
 export default Section;

package/dist/src/sub/DynamicLayout/components/Section/Section.js

@@ -37,8 +37,9 @@ var YouTubeIframe_1 = require("../YouTubeIframe");
 var sectionContext_1 = require("./sectionContext");
 function Section(_a) {
     var _b;
-    var children = _a.children, props = __rest(_a, ["children"]);
-    return ((0, jsx_runtime_1.jsx)(sectionContext_1.sectionContext.Provider, __assign({ value: __assign({}, props) }, { children: (0, jsx_runtime_1.jsxs)(S_Section, __assign({ isIframeSection: ((_b = props.manifest) === null || _b === void 0 ? void 0 : _b.schema) === 'EXP_IFRAME' }, { children: [(0, jsx_runtime_1.jsx)(Background, {}, void 0), children] }), void 0) }), void 0));
+    var children = _a.children, overrideStyles = _a.overrideStyles, props = __rest(_a, ["children", "overrideStyles"]);
+    var _c = (0, react_1.useState)(false), isHover = _c[0], setIsHover = _c[1];
+    return ((0, jsx_runtime_1.jsx)(sectionContext_1.sectionContext.Provider, __assign({ value: __assign({}, props) }, { children: (0, jsx_runtime_1.jsxs)(S_Section, __assign({ style: overrideStyles, isIframeSection: ((_b = props.manifest) === null || _b === void 0 ? void 0 : _b.schema) === 'EXP_IFRAME', onMouseEnter: function () { return setIsHover(true); }, onMouseMove: function () { return !isHover && setIsHover(true); }, onMouseLeave: function () { return setIsHover(false); } }, { children: [(0, jsx_runtime_1.jsx)(Background, {}, void 0), children] }), void 0) }), void 0));
 }
 var S_Section = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  box-sizing: border-box;\n  height: ", ";\n  position: relative;\n  width: 100%;\n  z-index: 0;\n"], ["\n  box-sizing: border-box;\n  height: ", ";\n  position: relative;\n  width: 100%;\n  z-index: 0;\n"])), function (_a) {
     var isIframeSection = _a.isIframeSection;

package/dist/src/sub/DynamicLayout/components/Section/components/CustomSectionBackgroundMedia.js

@@ -90,7 +90,7 @@ function CustomSectionBackgroundMedia(_a) {
         case 'IMAGE':
             return ((0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: CB_STYLE_PROP_BGMEDIA_SPEC_IMAGESELECTOR && ((0, jsx_runtime_1.jsx)(S_Image, __assign({ src: String(CB_STYLE_PROP_BGMEDIA_SPEC_IMAGESELECTOR), normalStyle: componentStyle }, { children: (0, jsx_runtime_1.jsx)("img", { src: String(CB_STYLE_PROP_BGMEDIA_SPEC_IMAGESELECTOR), style: { visibility: 'hidden', width: '100%', height: '100%' } }, void 0) }), void 0)) }, void 0));
         case 'YOUTUBE':
-            return ((0, jsx_runtime_1.jsx)(S_YoutubeContainer, __assign({}, youtubeSize, { children: youtubeSize.height > 0 && youtubeSize.width > 0 && ((0, jsx_runtime_1.jsx)(YouTubeIframe_1.YouTubeIframe, { id: playerId, src: String(CB_STYLE_PROP_BGMEDIA_SPEC_YSRC), loopMode: CB_STYLE_PROP_BGMEDIA_SPEC_REPLAY ? 'use' : 'none', startSeconds: Number(CB_STYLE_PROP_BGMEDIA_SPEC_STARTTIME), endSeconds: Number(CB_STYLE_PROP_BGMEDIA_SPEC_ENDTIME), customHeight: youtubeSize.height, customWidth: youtubeSize.width }, void 0)) }), void 0));
+            return ((0, jsx_runtime_1.jsx)(S_YoutubeContainer, __assign({}, youtubeSize, { children: youtubeSize.height > 0 && youtubeSize.width > 0 && ((0, jsx_runtime_1.jsx)(YouTubeIframe_1.YouTubeIframe, { id: playerId, src: String(CB_STYLE_PROP_BGMEDIA_SPEC_YSRC), loopMode: CB_STYLE_PROP_BGMEDIA_SPEC_REPLAY ? 'use' : 'none', startSeconds: Number(CB_STYLE_PROP_BGMEDIA_SPEC_STARTTIME), endSeconds: Number(CB_STYLE_PROP_BGMEDIA_SPEC_ENDTIME), customHeight: youtubeSize.height, customWidth: youtubeSize.width }, CB_STYLE_PROP_BGMEDIA_SPEC_REPLAY + "-" + CB_STYLE_PROP_BGMEDIA_SPEC_STARTTIME + "-" + CB_STYLE_PROP_BGMEDIA_SPEC_ENDTIME)) }), void 0));
         case 'NONE':
         default:
             return (0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, {}, void 0);

package/dist/src/sub/DynamicLayout/components/YouTubeIframe/YouTubeIframe.js

@@ -215,7 +215,7 @@ function YouTubeIframe(_a) {
             youtubeScript === null || youtubeScript === void 0 ? void 0 : youtubeScript.remove();
         };
     }, []);
-    return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [isYoutubeLoading && (0, jsx_runtime_1.jsx)(BlackScreen, {}, void 0), (0, jsx_runtime_1.jsx)(S_IframeWrapper, { children: (0, jsx_runtime_1.jsx)("div", { id: PLAYER_ID }, "" + loopMode + startSeconds + endSeconds) }, void 0)] }, void 0));
+    return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [isYoutubeLoading && (0, jsx_runtime_1.jsx)(BlackScreen, {}, void 0), (0, jsx_runtime_1.jsx)(S_IframeWrapper, { children: (0, jsx_runtime_1.jsx)("div", { id: PLAYER_ID }, void 0) }, void 0)] }, void 0));
 }
 var BlackScreen = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  background-color: ", ";\n  bottom: 0;\n  left: 0;\n  position: absolute;\n  right: 0;\n  top: 0;\n"], ["\n  background-color: ", ";\n  bottom: 0;\n  left: 0;\n  position: absolute;\n  right: 0;\n  top: 0;\n"])), function (_a) {
     var theme = _a.theme;

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

@@ -45,18 +45,20 @@ 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 S_HiddenCover_1 = require("../components/S_HiddenCover");
 var useCLINK_1 = __importDefault(require("../hooks/useCLINK"));
 function Image(props) {
-    var device = (0, react_1.useContext)(DynamicLayout_1.dynamicLayoutContext).device;
-    var CB_CONTENT_PROP_IMAGE = props.CB_CONTENT_PROP_IMAGE, _a = props.CB_CONTENT_PROP_CLINK, CB_CONTENT_PROP_CLINK_SPEC_SRC = _a.CB_CONTENT_PROP_CLINK_SPEC_SRC, CB_CONTENT_PROP_CLINK_SPEC_TYPE = _a.CB_CONTENT_PROP_CLINK_SPEC_TYPE, CB_CONTENT_PROP_CLINK_SPEC_NEWTAB = _a.CB_CONTENT_PROP_CLINK_SPEC_NEWTAB, CB_CONTENT_PROP_CLINK_SPEC_INTERNALSRC = _a.CB_CONTENT_PROP_CLINK_SPEC_INTERNALSRC, CB_STYLE_PROP_SHADOW = props.CB_STYLE_PROP_SHADOW, CB_EFFECT_PROP_ENTANIM = props.CB_EFFECT_PROP_ENTANIM;
-    var _b = (0, useCLINK_1.default)({
+    var _a = (0, react_1.useContext)(DynamicLayout_1.dynamicLayoutContext), device = _a.device, mode = _a.mode;
+    var CB_CONTENT_PROP_IMAGE = props.CB_CONTENT_PROP_IMAGE, _b = props.CB_CONTENT_PROP_CLINK, CB_CONTENT_PROP_CLINK_SPEC_SRC = _b.CB_CONTENT_PROP_CLINK_SPEC_SRC, CB_CONTENT_PROP_CLINK_SPEC_TYPE = _b.CB_CONTENT_PROP_CLINK_SPEC_TYPE, CB_CONTENT_PROP_CLINK_SPEC_NEWTAB = _b.CB_CONTENT_PROP_CLINK_SPEC_NEWTAB, CB_CONTENT_PROP_CLINK_SPEC_INTERNALSRC = _b.CB_CONTENT_PROP_CLINK_SPEC_INTERNALSRC, CB_STYLE_PROP_SHADOW = props.CB_STYLE_PROP_SHADOW, CB_EFFECT_PROP_ENTANIM = props.CB_EFFECT_PROP_ENTANIM;
+    var _c = (0, useCLINK_1.default)({
         src: CB_CONTENT_PROP_CLINK_SPEC_SRC,
         type: CB_CONTENT_PROP_CLINK_SPEC_TYPE,
         openNewTab: CB_CONTENT_PROP_CLINK_SPEC_NEWTAB,
         internalSrc: String(CB_CONTENT_PROP_CLINK_SPEC_INTERNALSRC)
-    }), onClickCLINK = _b.onClickCLINK, CLINKCursor = _b.CLINKCursor;
-    var _c = (0, util_1.parseProperties)(props, device), style = _c.style, hoverStyle = _c.hoverStyle, layout = _c.layout, effect = _c.effect;
-    var _d = parseImageCBStyle(style, hoverStyle), boxStyle = _d.boxStyle, imgStyle = _d.imgStyle;
+    }), onClickCLINK = _c.onClickCLINK, CLINKCursor = _c.CLINKCursor;
+    var _d = (0, util_1.parseProperties)(props, device), style = _d.style, hoverStyle = _d.hoverStyle, layout = _d.layout, effect = _d.effect;
+    var _e = parseImageCBStyle(style, hoverStyle, mode), boxStyle = _e.boxStyle, imgStyle = _e.imgStyle;
+    var isEditModeAndHidden = style.visibility === 'hidden' && mode === 'EDIT';
     var cbRef = (0, react_1.useRef)(null);
     var entry = (0, hooks_1.useIntersectionObserver)(cbRef, { threshold: 0.2, freezeOnceVisible: false });
     var isVisible = !!(entry === null || entry === void 0 ? void 0 : entry.isIntersecting);
@@ -64,19 +66,19 @@ function Image(props) {
     var hasEffect = CB_EFFECT_PROP_ENTANIM.CB_EFFECT_PROP_ENTANIM_SPEC_TYPE !== 'NONE' &&
         CB_EFFECT_PROP_ENTANIM['CB_EFFECT_PROP_ENTANIM_SPEC_TYPE:MOBILE'] !== 'NONE';
     var effectVisibleStyle = hasEffect ? { opacity: isVisible ? 1 : 0 } : {};
-    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({}, layout), effectCssProperties), boxStyle.normal), { cursor: CLINKCursor }), hoverStyle: __assign({}, boxStyle.hover), cbStylePropsShadowSpecs: CB_STYLE_PROP_SHADOW, device: device, ref: cbRef, onClick: onClickCLINK }, { children: (0, jsx_runtime_1.jsx)(S_Image, __assign({ src: CB_CONTENT_PROP_IMAGE.CB_CONTENT_PROP_IMAGE_SPEC_SELECTOR, normalStyle: __assign({}, imgStyle.normal), hoverStyle: __assign({}, imgStyle.hover) }, { children: (0, jsx_runtime_1.jsx)("img", { src: CB_CONTENT_PROP_IMAGE.CB_CONTENT_PROP_IMAGE_SPEC_SELECTOR, style: { visibility: 'hidden', width: '100%', height: '100%' } }, void 0) }), void 0) }), void 0) }), void 0));
+    return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [isEditModeAndHidden && (0, jsx_runtime_1.jsx)(S_HiddenCover_1.S_HiddenCover, {}, void 0), (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_ImageWrapper, __assign({ style: __assign({}, effectCssProperties) }, { children: (0, jsx_runtime_1.jsx)(S_CB_BoxWithShadow_1.S_CB_BoxWithShadow, __assign({ className: "cb-layout-box", normalStyle: __assign(__assign(__assign(__assign({}, layout), { overflow: 'hidden' }), boxStyle.normal), { cursor: CLINKCursor }), hoverStyle: __assign({}, boxStyle.hover), cbStylePropsShadowSpecs: CB_STYLE_PROP_SHADOW, device: device, ref: cbRef, onClick: onClickCLINK }, { children: (0, jsx_runtime_1.jsx)(S_Image, __assign({ src: CB_CONTENT_PROP_IMAGE.CB_CONTENT_PROP_IMAGE_SPEC_SELECTOR, normalStyle: __assign({}, imgStyle.normal), hoverStyle: __assign({}, imgStyle.hover) }, { children: (0, jsx_runtime_1.jsx)("img", { src: CB_CONTENT_PROP_IMAGE.CB_CONTENT_PROP_IMAGE_SPEC_SELECTOR, style: { visibility: 'hidden', width: '100%', height: '100%' } }, void 0) }), void 0) }), void 0) }), void 0) }), void 0)] }, void 0));
 }
-function parseImageCBStyle(style, hoverStyle) {
+function parseImageCBStyle(style, hoverStyle, mode) {
     var boxStyle = {
         normal: {
             borderBottomRightRadius: style.borderBottomRightRadius,
-            borderBottomLeftRadius: style.borderBottomRightRadius,
+            borderBottomLeftRadius: style.borderBottomLeftRadius,
             borderTopLeftRadius: style.borderTopLeftRadius,
             borderTopRightRadius: style.borderTopRightRadius,
             borderColor: style.borderColor,
             borderStyle: style.borderStyle,
             borderWidth: style.borderWidth,
-            visibility: style.visibility,
+            visibility: mode === 'EDIT' ? 'visible' : style.visibility,
             opacity: style.opacity,
             boxShadow: style.boxShadow
         },
@@ -88,7 +90,7 @@ function parseImageCBStyle(style, hoverStyle) {
             borderColor: hoverStyle.borderColor,
             borderStyle: hoverStyle.borderStyle,
             borderWidth: hoverStyle.borderWidth,
-            visibility: hoverStyle.visibility,
+            visibility: mode === 'EDIT' ? 'visible' : hoverStyle.visibility,
             opacity: hoverStyle.opacity,
             boxShadow: hoverStyle.boxShadow
         }
@@ -105,25 +107,26 @@ function parseImageCBStyle(style, hoverStyle) {
     };
     return { boxStyle: boxStyle, imgStyle: imgStyle };
 }
-var S_Image = styled_components_1.default.div(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n  background-image: ", ";\n  background-repeat: no-repeat;\n  height: 100%;\n  width: 100%;\n\n  ", ";\n\n  &:hover {\n    ", ";\n  }\n\n  & img {\n    ", ";\n  }\n\n  &:hover img {\n    ", ";\n  }\n"], ["\n  background-image: ", ";\n  background-repeat: no-repeat;\n  height: 100%;\n  width: 100%;\n\n  ", ";\n\n  &:hover {\n    ", ";\n  }\n\n  & img {\n    ", ";\n  }\n\n  &:hover img {\n    ", ";\n  }\n"])), function (_a) {
+var S_ImageWrapper = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  height: 100%;\n  width: 100%;\n"], ["\n  height: 100%;\n  width: 100%;\n"])));
+var S_Image = styled_components_1.default.div(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n  background-image: ", ";\n  background-repeat: no-repeat;\n  height: 100%;\n  width: 100%;\n\n  ", ";\n\n  &:hover {\n    ", ";\n  }\n\n  & img {\n    ", ";\n  }\n\n  &:hover img {\n    ", ";\n  }\n"], ["\n  background-image: ", ";\n  background-repeat: no-repeat;\n  height: 100%;\n  width: 100%;\n\n  ", ";\n\n  &:hover {\n    ", ";\n  }\n\n  & img {\n    ", ";\n  }\n\n  &:hover img {\n    ", ";\n  }\n"])), function (_a) {
     var src = _a.src;
     return "url(" + src + ")";
 }, function (_a) {
     var normalStyle = _a.normalStyle;
-    return (0, styled_components_1.css)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n      ", "\n    "], ["\n      ", "\n    "])), __assign(__assign({}, normalStyle), { backgroundPosition: normalStyle.backgroundPosition }));
+    return (0, styled_components_1.css)(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n      ", "\n    "], ["\n      ", "\n    "])), __assign(__assign({}, normalStyle), { backgroundPosition: normalStyle.backgroundPosition }));
 }, function (_a) {
     var hoverStyle = _a.hoverStyle;
-    return (0, styled_components_1.css)(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n        ", "\n      "], ["\n        ", "\n      "])), __assign(__assign({}, hoverStyle), { backgroundPosition: hoverStyle.backgroundPosition }));
+    return (0, styled_components_1.css)(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n        ", "\n      "], ["\n        ", "\n      "])), __assign(__assign({}, hoverStyle), { backgroundPosition: hoverStyle.backgroundPosition }));
 }, function (_a) {
     var normalStyle = _a.normalStyle;
     var isContain = normalStyle.backgroundSize === 'contain';
-    return (0, styled_components_1.css)(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n        object-fit: ", ";\n      "], ["\n        object-fit: ", ";\n      "])), isContain ? 'contain' : 'cover');
+    return (0, styled_components_1.css)(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n        object-fit: ", ";\n      "], ["\n        object-fit: ", ";\n      "])), isContain ? 'contain' : 'cover');
 }, function (_a) {
     var hoverStyle = _a.hoverStyle, normalStyle = _a.normalStyle;
     var isContain = hoverStyle.backgroundSize
         ? hoverStyle.backgroundSize === 'contain'
         : normalStyle.backgroundSize === 'contain';
-    return (0, styled_components_1.css)(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n        object-fit: ", ";\n      "], ["\n        object-fit: ", ";\n      "])), isContain ? 'contain' : 'cover');
+    return (0, styled_components_1.css)(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n        object-fit: ", ";\n      "], ["\n        object-fit: ", ";\n      "])), isContain ? 'contain' : 'cover');
 });
 exports.default = Image;
-var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5;
+var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6;

package/dist/src/sub/DynamicLayout/sections/CustomSection/util/stylePropParsers/parseStylePropBgOverlay.js

@@ -84,7 +84,7 @@ function valueGenerator(valueSet, device) {
                 return gradientType + "(" + gradientDegree + " " + gradientStartColor + " " + gradientStartPosition + "%, " + gradientEndColor + " " + gradientEndPosition + "%)";
             }
             case 'SOLID':
-                return "" + valueSet.CB_STYLE_PROP_BGOVERLAY_SPEC_COLOR;
+                return "" + valueSet['CB_STYLE_PROP_BGOVERLAY_SPEC_COLOR:MOBILE'];
             case 'NONE':
                 return 'transparent';
             default:

package/package.json

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

package/release-note.md

@@ -1,7 +1,7 @@
 # pds-dev-kit-web-test Release Notes
-## [v0.2.25]
-## 기준 pds-dev-kit-web 버전 @2.1.18
+## [v0.2.27]
+## 기준 pds-dev-kit-web 버전 @2.1.19
 
 ### sub
-* DynamicLayout
-    * section hover시 리렌더 이슈 픽스
+* DynamicLayout - custom section
+    * BGMedia의 값이 Youtube 타입일 경우, spec panel에서 해당 영상의 상세 옵션(루프 모드, 시작시간, 종료시간) 설정을 변경하였을 때 대상 section이 리렌더 되지 않는 현상을 수정