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

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.
Files changed (8) hide show
  1. package/dist/src/sub/DynamicLayout/components/Section/Section.d.ts +4 -2
  2. package/dist/src/sub/DynamicLayout/components/Section/Section.js +3 -2
  3. package/dist/src/sub/DynamicLayout/components/Section/components/CustomSectionBackgroundMedia.js +1 -1
  4. package/dist/src/sub/DynamicLayout/components/YouTubeIframe/YouTubeIframe.js +1 -1
  5. package/dist/src/sub/DynamicLayout/sections/CustomSection/components/ComponentBlock/componentBlocks/Image/Image.js +20 -17
  6. package/dist/src/sub/DynamicLayout/sections/CustomSection/util/stylePropParsers/parseStylePropBgOverlay.js +1 -1
  7. package/package.json +1 -1
  8. package/release-note.md +4 -4
package/dist/src/sub/DynamicLayout/components/Section/Section.d.ts CHANGED
@@ -1,7 +1,9 @@
1
- /// <reference types="react" />
1
+ import { CSSProperties } from 'react';
2
2
  import type { ISection } from '../../types';
3
3
  declare type SectionPropTypes = ISection & {
4
4
  children?: React.ReactNode;
5
+ } & {
6
+ overrideStyles?: CSSProperties;
5
7
  };
6
- declare function Section({ children, ...props }: SectionPropTypes): JSX.Element;
8
+ declare function Section({ children, overrideStyles, ...props }: SectionPropTypes): JSX.Element;
7
9
  export default Section;
package/dist/src/sub/DynamicLayout/components/Section/Section.js CHANGED
@@ -37,8 +37,9 @@ var YouTubeIframe_1 = require("../YouTubeIframe");
37
37
  var sectionContext_1 = require("./sectionContext");
38
38
  function Section(_a) {
39
39
  var _b;
40
- var children = _a.children, props = __rest(_a, ["children"]);
41
- 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));
40
+ var children = _a.children, overrideStyles = _a.overrideStyles, props = __rest(_a, ["children", "overrideStyles"]);
41
+ var _c = (0, react_1.useState)(false), isHover = _c[0], setIsHover = _c[1];
42
+ 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));
42
43
  }
43
44
  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) {
44
45
  var isIframeSection = _a.isIframeSection;
package/dist/src/sub/DynamicLayout/components/Section/components/CustomSectionBackgroundMedia.js CHANGED
@@ -90,7 +90,7 @@ function CustomSectionBackgroundMedia(_a) {
90
90
  case 'IMAGE':
91
91
  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));
92
92
  case 'YOUTUBE':
93
- 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));
93
+ 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));
94
94
  case 'NONE':
95
95
  default:
96
96
  return (0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, {}, void 0);
package/dist/src/sub/DynamicLayout/components/YouTubeIframe/YouTubeIframe.js CHANGED
@@ -215,7 +215,7 @@ function YouTubeIframe(_a) {
215
215
  youtubeScript === null || youtubeScript === void 0 ? void 0 : youtubeScript.remove();
216
216
  };
217
217
  }, []);
218
- 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));
218
+ 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));
219
219
  }
220
220
  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) {
221
221
  var theme = _a.theme;
package/dist/src/sub/DynamicLayout/sections/CustomSection/components/ComponentBlock/componentBlocks/Image/Image.js CHANGED
@@ -45,18 +45,20 @@ var hooks_1 = require("../../../../hooks");
45
45
  var util_1 = require("../../../../util");
46
46
  var S_CB_AnimationObserverBox_1 = require("../components/S_CB_AnimationObserverBox");
47
47
  var S_CB_BoxWithShadow_1 = require("../components/S_CB_BoxWithShadow");
48
+ var S_HiddenCover_1 = require("../components/S_HiddenCover");
48
49
  var useCLINK_1 = __importDefault(require("../hooks/useCLINK"));
49
50
  function Image(props) {
50
- var device = (0, react_1.useContext)(DynamicLayout_1.dynamicLayoutContext).device;
51
- 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;
52
- var _b = (0, useCLINK_1.default)({
51
+ var _a = (0, react_1.useContext)(DynamicLayout_1.dynamicLayoutContext), device = _a.device, mode = _a.mode;
52
+ 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;
53
+ var _c = (0, useCLINK_1.default)({
53
54
  src: CB_CONTENT_PROP_CLINK_SPEC_SRC,
54
55
  type: CB_CONTENT_PROP_CLINK_SPEC_TYPE,
55
56
  openNewTab: CB_CONTENT_PROP_CLINK_SPEC_NEWTAB,
56
57
  internalSrc: String(CB_CONTENT_PROP_CLINK_SPEC_INTERNALSRC)
57
- }), onClickCLINK = _b.onClickCLINK, CLINKCursor = _b.CLINKCursor;
58
- var _c = (0, util_1.parseProperties)(props, device), style = _c.style, hoverStyle = _c.hoverStyle, layout = _c.layout, effect = _c.effect;
59
- var _d = parseImageCBStyle(style, hoverStyle), boxStyle = _d.boxStyle, imgStyle = _d.imgStyle;
58
+ }), onClickCLINK = _c.onClickCLINK, CLINKCursor = _c.CLINKCursor;
59
+ var _d = (0, util_1.parseProperties)(props, device), style = _d.style, hoverStyle = _d.hoverStyle, layout = _d.layout, effect = _d.effect;
60
+ var _e = parseImageCBStyle(style, hoverStyle, mode), boxStyle = _e.boxStyle, imgStyle = _e.imgStyle;
61
+ var isEditModeAndHidden = style.visibility === 'hidden' && mode === 'EDIT';
60
62
  var cbRef = (0, react_1.useRef)(null);
61
63
  var entry = (0, hooks_1.useIntersectionObserver)(cbRef, { threshold: 0.2, freezeOnceVisible: false });
62
64
  var isVisible = !!(entry === null || entry === void 0 ? void 0 : entry.isIntersecting);
@@ -64,19 +66,19 @@ function Image(props) {
64
66
  var hasEffect = CB_EFFECT_PROP_ENTANIM.CB_EFFECT_PROP_ENTANIM_SPEC_TYPE !== 'NONE' &&
65
67
  CB_EFFECT_PROP_ENTANIM['CB_EFFECT_PROP_ENTANIM_SPEC_TYPE:MOBILE'] !== 'NONE';
66
68
  var effectVisibleStyle = hasEffect ? { opacity: isVisible ? 1 : 0 } : {};
67
- 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));
69
+ 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));
68
70
  }
69
- function parseImageCBStyle(style, hoverStyle) {
71
+ function parseImageCBStyle(style, hoverStyle, mode) {
70
72
  var boxStyle = {
71
73
  normal: {
72
74
  borderBottomRightRadius: style.borderBottomRightRadius,
73
- borderBottomLeftRadius: style.borderBottomRightRadius,
75
+ borderBottomLeftRadius: style.borderBottomLeftRadius,
74
76
  borderTopLeftRadius: style.borderTopLeftRadius,
75
77
  borderTopRightRadius: style.borderTopRightRadius,
76
78
  borderColor: style.borderColor,
77
79
  borderStyle: style.borderStyle,
78
80
  borderWidth: style.borderWidth,
79
- visibility: style.visibility,
81
+ visibility: mode === 'EDIT' ? 'visible' : style.visibility,
80
82
  opacity: style.opacity,
81
83
  boxShadow: style.boxShadow
82
84
  },
@@ -88,7 +90,7 @@ function parseImageCBStyle(style, hoverStyle) {
88
90
  borderColor: hoverStyle.borderColor,
89
91
  borderStyle: hoverStyle.borderStyle,
90
92
  borderWidth: hoverStyle.borderWidth,
91
- visibility: hoverStyle.visibility,
93
+ visibility: mode === 'EDIT' ? 'visible' : hoverStyle.visibility,
92
94
  opacity: hoverStyle.opacity,
93
95
  boxShadow: hoverStyle.boxShadow
94
96
  }
@@ -105,25 +107,26 @@ function parseImageCBStyle(style, hoverStyle) {
105
107
  };
106
108
  return { boxStyle: boxStyle, imgStyle: imgStyle };
107
109
  }
108
- 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) {
110
+ 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"])));
111
+ 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) {
109
112
  var src = _a.src;
110
113
  return "url(" + src + ")";
111
114
  }, function (_a) {
112
115
  var normalStyle = _a.normalStyle;
113
- return (0, styled_components_1.css)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n ", "\n "], ["\n ", "\n "])), __assign(__assign({}, normalStyle), { backgroundPosition: normalStyle.backgroundPosition }));
116
+ return (0, styled_components_1.css)(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n ", "\n "], ["\n ", "\n "])), __assign(__assign({}, normalStyle), { backgroundPosition: normalStyle.backgroundPosition }));
114
117
  }, function (_a) {
115
118
  var hoverStyle = _a.hoverStyle;
116
- return (0, styled_components_1.css)(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n ", "\n "], ["\n ", "\n "])), __assign(__assign({}, hoverStyle), { backgroundPosition: hoverStyle.backgroundPosition }));
119
+ return (0, styled_components_1.css)(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n ", "\n "], ["\n ", "\n "])), __assign(__assign({}, hoverStyle), { backgroundPosition: hoverStyle.backgroundPosition }));
117
120
  }, function (_a) {
118
121
  var normalStyle = _a.normalStyle;
119
122
  var isContain = normalStyle.backgroundSize === 'contain';
120
- return (0, styled_components_1.css)(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n object-fit: ", ";\n "], ["\n object-fit: ", ";\n "])), isContain ? 'contain' : 'cover');
123
+ return (0, styled_components_1.css)(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n object-fit: ", ";\n "], ["\n object-fit: ", ";\n "])), isContain ? 'contain' : 'cover');
121
124
  }, function (_a) {
122
125
  var hoverStyle = _a.hoverStyle, normalStyle = _a.normalStyle;
123
126
  var isContain = hoverStyle.backgroundSize
124
127
  ? hoverStyle.backgroundSize === 'contain'
125
128
  : normalStyle.backgroundSize === 'contain';
126
- return (0, styled_components_1.css)(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n object-fit: ", ";\n "], ["\n object-fit: ", ";\n "])), isContain ? 'contain' : 'cover');
129
+ return (0, styled_components_1.css)(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n object-fit: ", ";\n "], ["\n object-fit: ", ";\n "])), isContain ? 'contain' : 'cover');
127
130
  });
128
131
  exports.default = Image;
129
- var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5;
132
+ var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6;
package/dist/src/sub/DynamicLayout/sections/CustomSection/util/stylePropParsers/parseStylePropBgOverlay.js CHANGED
@@ -84,7 +84,7 @@ function valueGenerator(valueSet, device) {
84
84
  return gradientType + "(" + gradientDegree + " " + gradientStartColor + " " + gradientStartPosition + "%, " + gradientEndColor + " " + gradientEndPosition + "%)";
85
85
  }
86
86
  case 'SOLID':
87
- return "" + valueSet.CB_STYLE_PROP_BGOVERLAY_SPEC_COLOR;
87
+ return "" + valueSet['CB_STYLE_PROP_BGOVERLAY_SPEC_COLOR:MOBILE'];
88
88
  case 'NONE':
89
89
  return 'transparent';
90
90
  default:
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "pds-dev-kit-web-test",
3
- "version": "0.2.25",
3
+ "version": "0.2.27",
4
4
  "license": "MIT",
5
5
  "private": false,
6
6
  "main": "dist/index.js",
package/release-note.md CHANGED
@@ -1,7 +1,7 @@
1
1
  # pds-dev-kit-web-test Release Notes
2
- ## [v0.2.25]
3
- ## 기준 pds-dev-kit-web 버전 @2.1.18
2
+ ## [v0.2.27]
3
+ ## 기준 pds-dev-kit-web 버전 @2.1.19
4
4
 
5
5
  ### sub
6
- * DynamicLayout
7
- * section hover시 리렌더 이슈 픽스
6
+ * DynamicLayout - custom section
7
+ * BGMedia의 값이 Youtube 타입일 경우, spec panel에서 해당 영상의 상세 옵션(루프 모드, 시작시간, 종료시간) 설정을 변경하였을 때 대상 section이 리렌더 되지 않는 현상을 수정