pds-dev-kit-web 2.1.18 → 2.1.20

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 +2 -4
  2. package/dist/src/sub/DynamicLayout/components/Section/Section.js +2 -3
  3. package/dist/src/sub/DynamicLayout/components/YouTubeIframe/YouTubeIframe.js +1 -1
  4. package/dist/src/sub/DynamicLayout/sections/CustomSection/components/ComponentBlock/componentBlocks/Image/Image.js +20 -17
  5. package/dist/src/sub/DynamicLayout/sections/CustomSection/util/stylePropParsers/parseStylePropBgOverlay.js +1 -1
  6. package/package.json +1 -1
  7. package/release-note.md +5 -7
  8. package/webhook/node_modules/esrecurse/.babelrc +3 -0
package/dist/src/sub/DynamicLayout/components/Section/Section.d.ts CHANGED
@@ -1,9 +1,7 @@
1
- import { CSSProperties } from 'react';
1
+ /// <reference types="react" />
2
2
  import type { ISection } from '../../types';
3
3
  declare type SectionPropTypes = ISection & {
4
4
  children?: React.ReactNode;
5
- } & {
6
- overrideStyles?: CSSProperties;
7
5
  };
8
- declare function Section({ children, overrideStyles, ...props }: SectionPropTypes): JSX.Element;
6
+ declare function Section({ children, ...props }: SectionPropTypes): JSX.Element;
9
7
  export default Section;
package/dist/src/sub/DynamicLayout/components/Section/Section.js CHANGED
@@ -37,9 +37,8 @@ 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, 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));
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));
43
42
  }
44
43
  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) {
45
44
  var isIframeSection = _a.isIframeSection;
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",
3
- "version": "2.1.18",
3
+ "version": "2.1.20",
4
4
  "license": "MIT",
5
5
  "private": false,
6
6
  "main": "dist/index.js",
package/release-note.md CHANGED
@@ -1,9 +1,7 @@
1
1
  # PDS-DEV-KIT-WEB Release Notes
2
- ## [v2.1.18]
3
- ## daily|https://design.storybook.publ.biz/
2
+ ## [v2.1.20]
3
+ ## urgent|https://design.storybook.publ.biz/
4
4
 
5
- ### Components
6
- * opacity 수정
7
-
8
- ### Color
9
- * 컬러 키 값 23.08.07 02시 23분 기준 싱크
5
+ ### sub
6
+ * DynamicLayout
7
+ * Section에 hover관련 사항 제거를 통한 리렌더 이슈 픽스
package/webhook/node_modules/esrecurse/.babelrc ADDED
@@ -0,0 +1,3 @@
1
+ {
2
+ "presets": ["es2015"]
3
+ }