pds-dev-kit-web-test 0.2.21 → 0.2.23

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 (19) hide show
  1. package/dist/src/sub/DynamicLayout/components/Section/components/CustomSectionBackgroundMedia.js +1 -1
  2. package/dist/src/sub/DynamicLayout/components/YouTubeIframe/YouTubeIframe.d.ts +3 -1
  3. package/dist/src/sub/DynamicLayout/components/YouTubeIframe/YouTubeIframe.js +35 -24
  4. package/dist/src/sub/DynamicLayout/mock_customSection.js +4 -1
  5. package/dist/src/sub/DynamicLayout/pagesPreviewMock.d.ts +36 -1134
  6. package/dist/src/sub/DynamicLayout/pagesPreviewMock.js +53 -2907
  7. package/dist/src/sub/DynamicLayout/sections/CustomSection/components/ComponentBlock/componentBlocks/Button/Button.js +7 -3
  8. package/dist/src/sub/DynamicLayout/sections/CustomSection/components/ComponentBlock/componentBlocks/Divider/Divider.js +5 -1
  9. package/dist/src/sub/DynamicLayout/sections/CustomSection/components/ComponentBlock/componentBlocks/Image/Image.js +28 -12
  10. package/dist/src/sub/DynamicLayout/sections/CustomSection/components/ComponentBlock/componentBlocks/RichText/RichText.js +4 -1
  11. package/dist/src/sub/DynamicLayout/sections/CustomSection/components/ComponentBlock/componentBlocks/Text/Text.js +7 -3
  12. package/dist/src/sub/DynamicLayout/sections/CustomSection/components/ComponentBlock/componentBlocks/Twitter/Twitter.js +6 -1
  13. package/dist/src/sub/DynamicLayout/sections/CustomSection/components/ComponentBlock/componentBlocks/Youtube/Youtube.js +6 -3
  14. package/dist/src/sub/DynamicLayout/sections/CustomSection/components/ComponentBlock/componentBlocks/components/S_CB_AnimationObserverBox.d.ts +2 -1
  15. package/dist/src/sub/DynamicLayout/sections/CustomSection/components/ComponentBlock/componentBlocks/components/S_CB_AnimationObserverBox.js +14 -3
  16. package/dist/src/sub/DynamicLayout/sections/CustomSection/components/ComponentBlock/componentBlocks/hooks/useCLINK.d.ts +1 -0
  17. package/dist/src/sub/DynamicLayout/sections/CustomSection/components/ComponentBlock/componentBlocks/hooks/useCLINK.js +14 -4
  18. package/dist/src/sub/DynamicLayout/sections/CustomSection/components/ComponentBlock/componentBlocks/types.d.ts +1 -0
  19. package/package.json +1 -1
@@ -28,11 +28,12 @@ var S_HiddenCover_1 = require("../components/S_HiddenCover");
28
28
  var useCLINK_1 = __importDefault(require("../hooks/useCLINK"));
29
29
  function Button(props) {
30
30
  var _a = (0, react_1.useContext)(DynamicLayout_1.dynamicLayoutContext), device = _a.device, mode = _a.mode;
31
- var CB_STYLE_PROP_BTNCOLOR = props.CB_STYLE_PROP_BTNCOLOR, _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_STYLE_PROP_SHADOW = props.CB_STYLE_PROP_SHADOW;
31
+ var CB_STYLE_PROP_BTNCOLOR = props.CB_STYLE_PROP_BTNCOLOR, _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;
32
32
  var _c = (0, useCLINK_1.default)({
33
33
  src: CB_CONTENT_PROP_CLINK_SPEC_SRC,
34
34
  type: CB_CONTENT_PROP_CLINK_SPEC_TYPE,
35
- openNewTab: CB_CONTENT_PROP_CLINK_SPEC_NEWTAB
35
+ openNewTab: CB_CONTENT_PROP_CLINK_SPEC_NEWTAB,
36
+ internalSrc: String(CB_CONTENT_PROP_CLINK_SPEC_INTERNALSRC)
36
37
  }), onClickCLINK = _c.onClickCLINK, CLINKCursor = _c.CLINKCursor;
37
38
  var _d = getBTNStyles(props.CB_STYLE_PROP_BTNTEXT, device), btnTextStyle = _d.style, btnTextHoverStyle = _d.hoverStyle;
38
39
  var _e = getBTNColorStyles(CB_STYLE_PROP_BTNCOLOR, device), btnColorStyle = _e.style, btnColorHoverStyle = _e.hoverStyle;
@@ -45,7 +46,10 @@ function Button(props) {
45
46
  var entry = (0, hooks_1.useIntersectionObserver)(cbRef, { threshold: 0.2, freezeOnceVisible: false });
46
47
  var isVisible = !!(entry === null || entry === void 0 ? void 0 : entry.isIntersecting);
47
48
  var effectCssProperties = isVisible ? effect : {};
48
- 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: cbRef, isVisible: isVisible }, { children: (0, jsx_runtime_1.jsx)(S_CB_BoxWithShadow_1.S_CB_BoxWithShadow, __assign({ className: "cb-layout-box", normalStyle: __assign(__assign(__assign(__assign(__assign(__assign({}, btnTextStyle), propsStyle), layoutStyle), effectCssProperties), btnColorStyle), { whiteSpace: 'pre-wrap', wordBreak: 'break-word', cursor: CLINKCursor }), hoverStyle: __assign(__assign(__assign(__assign({}, btnTextHoverStyle), propsHoverStyle), btnColorHoverStyle), { whiteSpace: 'pre-wrap', wordBreak: 'break-word' }), cbStylePropsShadowSpecs: CB_STYLE_PROP_SHADOW, device: device, onClick: onClickCLINK }, { children: props.CB_CONTENT_PROP_TEXT.CB_CONTENT_PROP_TEXT_SPEC_TEXT }), void 0) }), void 0)] }, void 0));
49
+ var hasEffect = props.CB_EFFECT_PROP_ENTANIM.CB_EFFECT_PROP_ENTANIM_SPEC_TYPE !== 'NONE' &&
50
+ props.CB_EFFECT_PROP_ENTANIM['CB_EFFECT_PROP_ENTANIM_SPEC_TYPE:MOBILE'] !== 'NONE';
51
+ var effectVisibleStyle = hasEffect ? { opacity: isVisible ? 1 : 0 } : {};
52
+ 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_CB_BoxWithShadow_1.S_CB_BoxWithShadow, __assign({ className: "cb-layout-box", normalStyle: __assign(__assign(__assign(__assign(__assign(__assign({}, btnTextStyle), propsStyle), layoutStyle), effectCssProperties), btnColorStyle), { whiteSpace: 'pre-wrap', wordBreak: 'break-word', cursor: CLINKCursor }), hoverStyle: __assign(__assign(__assign(__assign({}, btnTextHoverStyle), propsHoverStyle), btnColorHoverStyle), { whiteSpace: 'pre-wrap', wordBreak: 'break-word' }), cbStylePropsShadowSpecs: CB_STYLE_PROP_SHADOW, device: device, onClick: onClickCLINK }, { children: props.CB_CONTENT_PROP_TEXT.CB_CONTENT_PROP_TEXT_SPEC_TEXT }), void 0) }), void 0)] }, void 0));
49
53
  }
50
54
  function getBTNStyles(props, device) {
51
55
  var availableSpecCodes = [
@@ -45,6 +45,7 @@ var S_CB_Box_1 = require("../components/S_CB_Box");
45
45
  var S_HiddenCover_1 = require("../components/S_HiddenCover");
46
46
  function Divider(props) {
47
47
  var _a = (0, react_1.useContext)(DynamicLayout_1.dynamicLayoutContext), device = _a.device, mode = _a.mode;
48
+ var CB_EFFECT_PROP_ENTANIM = props.CB_EFFECT_PROP_ENTANIM;
48
49
  var _b = (0, util_1.parseProperties)(props, device), propsStyle = _b.style, propsHoverStyle = _b.hoverStyle, layoutStyle = _b.layout, effect = _b.effect;
49
50
  var isEditModeAndHidden = propsStyle.visibility === 'hidden' && mode === 'EDIT';
50
51
  if (mode === 'EDIT') {
@@ -54,7 +55,10 @@ function Divider(props) {
54
55
  var entry = (0, hooks_1.useIntersectionObserver)(cbRef, { threshold: 0.2, freezeOnceVisible: false });
55
56
  var isVisible = !!(entry === null || entry === void 0 ? void 0 : entry.isIntersecting);
56
57
  var effectCssProperties = isVisible ? effect : {};
57
- 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: cbRef, isVisible: isVisible }, { children: (0, jsx_runtime_1.jsx)(S_CB_Box_1.S_CB_Box, __assign({ className: "cb-layout-box", normalStyle: layoutStyle, hoverStyle: {} }, { children: (0, jsx_runtime_1.jsx)(S_DIVIDER, { className: "cb-divider", normalStyle: __assign(__assign({}, propsStyle), effectCssProperties), hoverStyle: __assign({}, propsHoverStyle) }, void 0) }), void 0) }), void 0)] }, void 0));
58
+ var hasEffect = CB_EFFECT_PROP_ENTANIM.CB_EFFECT_PROP_ENTANIM_SPEC_TYPE !== 'NONE' &&
59
+ CB_EFFECT_PROP_ENTANIM['CB_EFFECT_PROP_ENTANIM_SPEC_TYPE:MOBILE'] !== 'NONE';
60
+ var effectVisibleStyle = hasEffect ? { opacity: isVisible ? 1 : 0 } : {};
61
+ 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_CB_Box_1.S_CB_Box, __assign({ className: "cb-layout-box", normalStyle: layoutStyle, hoverStyle: {} }, { children: (0, jsx_runtime_1.jsx)(S_DIVIDER, { className: "cb-divider", normalStyle: __assign(__assign({}, propsStyle), effectCssProperties), hoverStyle: __assign({}, propsHoverStyle) }, void 0) }), void 0) }), void 0)] }, void 0));
58
62
  }
59
63
  var S_DIVIDER = styled_components_1.default.div(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n width: 100%;\n\n ", ";\n\n &:hover {\n ", ";\n }\n"], ["\n width: 100%;\n\n ", ";\n\n &:hover {\n ", ";\n }\n"])), function (_a) {
60
64
  var normalStyle = _a.normalStyle;
@@ -48,34 +48,50 @@ var S_CB_BoxWithShadow_1 = require("../components/S_CB_BoxWithShadow");
48
48
  var useCLINK_1 = __importDefault(require("../hooks/useCLINK"));
49
49
  function Image(props) {
50
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_STYLE_PROP_SHADOW = props.CB_STYLE_PROP_SHADOW;
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
52
  var _b = (0, useCLINK_1.default)({
53
53
  src: CB_CONTENT_PROP_CLINK_SPEC_SRC,
54
54
  type: CB_CONTENT_PROP_CLINK_SPEC_TYPE,
55
- openNewTab: CB_CONTENT_PROP_CLINK_SPEC_NEWTAB
55
+ openNewTab: CB_CONTENT_PROP_CLINK_SPEC_NEWTAB,
56
+ internalSrc: String(CB_CONTENT_PROP_CLINK_SPEC_INTERNALSRC)
56
57
  }), onClickCLINK = _b.onClickCLINK, CLINKCursor = _b.CLINKCursor;
57
58
  var _c = (0, util_1.parseProperties)(props, device), style = _c.style, hoverStyle = _c.hoverStyle, layout = _c.layout, effect = _c.effect;
58
59
  var cbRef = (0, react_1.useRef)(null);
59
60
  var entry = (0, hooks_1.useIntersectionObserver)(cbRef, { threshold: 0.2, freezeOnceVisible: false });
60
61
  var isVisible = !!(entry === null || entry === void 0 ? void 0 : entry.isIntersecting);
61
62
  var effectCssProperties = isVisible ? effect : {};
62
- return ((0, jsx_runtime_1.jsx)(S_CB_AnimationObserverBox_1.S_CB_AnimationObserverBox, __assign({ ref: cbRef, isVisible: isVisible }, { 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), style), { cursor: CLINKCursor }), hoverStyle: hoverStyle, cbStylePropsShadowSpecs: CB_STYLE_PROP_SHADOW, device: device, onClick: onClickCLINK }, { children: (0, jsx_runtime_1.jsx)(S_Image, __assign({ src: CB_CONTENT_PROP_IMAGE.CB_CONTENT_PROP_IMAGE_SPEC_SELECTOR, normalStyle: style, hoverStyle: hoverStyle }, { 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));
63
+ var hasEffect = CB_EFFECT_PROP_ENTANIM.CB_EFFECT_PROP_ENTANIM_SPEC_TYPE !== 'NONE' &&
64
+ CB_EFFECT_PROP_ENTANIM['CB_EFFECT_PROP_ENTANIM_SPEC_TYPE:MOBILE'] !== 'NONE';
65
+ var effectVisibleStyle = hasEffect ? { opacity: isVisible ? 1 : 0 } : {};
66
+ 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), style), { cursor: CLINKCursor }), hoverStyle: hoverStyle, 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: {
67
+ borderBottomRightRadius: style.borderBottomRightRadius,
68
+ borderBottomLeftRadius: style.borderBottomRightRadius,
69
+ borderColor: style.borderColor,
70
+ borderStyle: style.borderStyle,
71
+ borderTopLeftRadius: style.borderTopLeftRadius,
72
+ borderTopRightRadius: style.borderTopRightRadius,
73
+ backgroundPosition: style.backgroundPosition,
74
+ backgroundSize: style.backgroundSize
75
+ }, hoverStyle: {
76
+ borderBottomRightRadius: hoverStyle.borderBottomRightRadius,
77
+ borderBottomLeftRadius: hoverStyle.borderBottomLeftRadius,
78
+ borderColor: hoverStyle.borderColor,
79
+ borderStyle: hoverStyle.borderStyle,
80
+ borderTopLeftRadius: hoverStyle.borderTopLeftRadius,
81
+ borderTopRightRadius: hoverStyle.borderTopRightRadius,
82
+ backgroundPosition: hoverStyle.backgroundPosition,
83
+ backgroundSize: hoverStyle.backgroundSize
84
+ } }, { 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));
63
85
  }
64
86
  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) {
65
87
  var src = _a.src;
66
88
  return "url(" + src + ")";
67
89
  }, function (_a) {
68
90
  var normalStyle = _a.normalStyle;
69
- var isContain = normalStyle.backgroundSize === 'contain';
70
- return (0, styled_components_1.css)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n ", "\n "], ["\n ", "\n "])), __assign(__assign({}, normalStyle), { backgroundPosition: isContain ? 'center' : normalStyle.backgroundPosition }));
91
+ return (0, styled_components_1.css)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n ", "\n "], ["\n ", "\n "])), __assign(__assign({}, normalStyle), { backgroundPosition: normalStyle.backgroundPosition }));
71
92
  }, function (_a) {
72
- var hoverStyle = _a.hoverStyle, normalStyle = _a.normalStyle;
73
- var isContain = hoverStyle.backgroundSize
74
- ? hoverStyle.backgroundSize === 'contain'
75
- : normalStyle.backgroundSize === 'contain';
76
- return (0, styled_components_1.css)(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n ", "\n "], ["\n ", "\n "])), __assign(__assign({}, hoverStyle), { backgroundPosition: isContain
77
- ? 'center'
78
- : hoverStyle.backgroundPosition || normalStyle.backgroundPosition }));
93
+ var hoverStyle = _a.hoverStyle;
94
+ return (0, styled_components_1.css)(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n ", "\n "], ["\n ", "\n "])), __assign(__assign({}, hoverStyle), { backgroundPosition: hoverStyle.backgroundPosition }));
79
95
  }, function (_a) {
80
96
  var normalStyle = _a.normalStyle;
81
97
  var isContain = normalStyle.backgroundSize === 'contain';
@@ -43,7 +43,10 @@ function RichText(props) {
43
43
  var entry = (0, hooks_1.useIntersectionObserver)(cbRef, { threshold: 0.2, freezeOnceVisible: false });
44
44
  var isVisible = !!(entry === null || entry === void 0 ? void 0 : entry.isIntersecting);
45
45
  var effectCssProperties = isVisible ? effect : {};
46
- 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: cbRef, isVisible: isVisible }, { children: (0, jsx_runtime_1.jsx)(S_CB_BoxWithShadow_1.S_CB_BoxWithShadow, __assign({ className: "cb-layout-box", normalStyle: __assign(__assign(__assign(__assign({}, propsStyle), layoutStyle), effectCssProperties), bgColorStyle), hoverStyle: __assign(__assign({}, propsHoverStyle), bgColorHoverStyle), cbStylePropsShadowSpecs: CB_STYLE_PROP_SHADOW, device: device }, { children: (0, jsx_runtime_1.jsx)(S_RichTextWrapper, { children: (0, jsx_runtime_1.jsx)(RichText_1.RichText, { text: props.CB_CONTENT_PROP_TEXTEDIT.CB_CONTENT_PROP_TEXTEDIT_SPEC_EDITOR }, void 0) }, void 0) }), void 0) }), void 0)] }, void 0));
46
+ var hasEffect = props.CB_EFFECT_PROP_ENTANIM.CB_EFFECT_PROP_ENTANIM_SPEC_TYPE !== 'NONE' &&
47
+ props.CB_EFFECT_PROP_ENTANIM['CB_EFFECT_PROP_ENTANIM_SPEC_TYPE:MOBILE'] !== 'NONE';
48
+ var effectVisibleStyle = hasEffect ? { opacity: isVisible ? 1 : 0 } : {};
49
+ 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_CB_BoxWithShadow_1.S_CB_BoxWithShadow, __assign({ className: "cb-layout-box", normalStyle: __assign(__assign(__assign(__assign({}, propsStyle), layoutStyle), effectCssProperties), bgColorStyle), hoverStyle: __assign(__assign({}, propsHoverStyle), bgColorHoverStyle), cbStylePropsShadowSpecs: CB_STYLE_PROP_SHADOW, device: device }, { children: (0, jsx_runtime_1.jsx)(S_RichTextWrapper, { children: (0, jsx_runtime_1.jsx)(RichText_1.RichText, { text: props.CB_CONTENT_PROP_TEXTEDIT.CB_CONTENT_PROP_TEXTEDIT_SPEC_EDITOR }, void 0) }, void 0) }), void 0) }), void 0)] }, void 0));
47
50
  }
48
51
  function getBGColorStyles(props, device) {
49
52
  var availableSpecCodes = [
@@ -27,11 +27,12 @@ var S_HiddenCover_1 = require("../components/S_HiddenCover");
27
27
  var useCLINK_1 = __importDefault(require("../hooks/useCLINK"));
28
28
  function Text(props) {
29
29
  var _a = (0, react_1.useContext)(DynamicLayout_1.dynamicLayoutContext), device = _a.device, mode = _a.mode;
30
- var _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;
30
+ var _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;
31
31
  var _c = (0, useCLINK_1.default)({
32
32
  src: CB_CONTENT_PROP_CLINK_SPEC_SRC,
33
33
  type: CB_CONTENT_PROP_CLINK_SPEC_TYPE,
34
- openNewTab: CB_CONTENT_PROP_CLINK_SPEC_NEWTAB
34
+ openNewTab: CB_CONTENT_PROP_CLINK_SPEC_NEWTAB,
35
+ internalSrc: String(CB_CONTENT_PROP_CLINK_SPEC_INTERNALSRC)
35
36
  }), CLINKCursor = _c.CLINKCursor, onClickCLINK = _c.onClickCLINK;
36
37
  var _d = getTextStyles(props.CB_STYLE_PROP_TEXT, device), textStyle = _d.style, textHoverStyle = _d.hoverStyle;
37
38
  var _e = (0, util_1.parseProperties)(props, device), propsStyle = _e.style, propsHoverStyle = _e.hoverStyle, layoutStyle = _e.layout, effect = _e.effect;
@@ -43,7 +44,10 @@ function Text(props) {
43
44
  var entry = (0, hooks_1.useIntersectionObserver)(cbRef, { threshold: 0.2, freezeOnceVisible: false });
44
45
  var isVisible = !!(entry === null || entry === void 0 ? void 0 : entry.isIntersecting);
45
46
  var effectCssProperties = isVisible ? effect : {};
46
- 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: cbRef, isVisible: isVisible }, { children: (0, jsx_runtime_1.jsx)(S_CB_Box_1.S_CB_Box, __assign({ className: "cb-layout-box", normalStyle: __assign(__assign(__assign(__assign(__assign({}, textStyle), propsStyle), layoutStyle), effectCssProperties), { whiteSpace: 'pre-wrap', wordBreak: 'break-word', cursor: CLINKCursor }), hoverStyle: __assign(__assign(__assign({}, textHoverStyle), propsHoverStyle), { whiteSpace: 'pre-wrap', wordBreak: 'break-word' }), onClick: onClickCLINK }, { children: props.CB_CONTENT_PROP_TEXT.CB_CONTENT_PROP_TEXT_SPEC_TEXT }), void 0) }), void 0)] }, void 0));
47
+ var hasEffect = props.CB_EFFECT_PROP_ENTANIM.CB_EFFECT_PROP_ENTANIM_SPEC_TYPE !== 'NONE' &&
48
+ props.CB_EFFECT_PROP_ENTANIM['CB_EFFECT_PROP_ENTANIM_SPEC_TYPE:MOBILE'] !== 'NONE';
49
+ var effectVisibleStyle = hasEffect ? { opacity: isVisible ? 1 : 0 } : {};
50
+ 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_CB_Box_1.S_CB_Box, __assign({ className: "cb-layout-box", normalStyle: __assign(__assign(__assign(__assign(__assign({}, textStyle), propsStyle), layoutStyle), effectCssProperties), { whiteSpace: 'pre-wrap', wordBreak: 'break-word', cursor: CLINKCursor }), hoverStyle: __assign(__assign(__assign({}, textHoverStyle), propsHoverStyle), { whiteSpace: 'pre-wrap', wordBreak: 'break-word' }), onClick: onClickCLINK }, { children: props.CB_CONTENT_PROP_TEXT.CB_CONTENT_PROP_TEXT_SPEC_TEXT }), void 0) }), void 0)] }, void 0));
47
51
  }
48
52
  function getTextStyles(props, device) {
49
53
  var availableSpecCodes = [
@@ -22,6 +22,7 @@ var S_CB_BoxWithShadow_1 = require("../components/S_CB_BoxWithShadow");
22
22
  function Twitter(props) {
23
23
  // eslint-disable-next-line @typescript-eslint/no-unused-vars
24
24
  var _a = (0, react_1.useContext)(DynamicLayout_1.dynamicLayoutContext), device = _a.device, mode = _a.mode;
25
+ var CB_EFFECT_PROP_ENTANIM = props.CB_EFFECT_PROP_ENTANIM;
25
26
  var CB_CONTENT_PROP_TWITTER_SPEC_SRC = props.CB_CONTENT_PROP_TWITTER.CB_CONTENT_PROP_TWITTER_SPEC_SRC, CB_STYLE_PROP_TWITTER_SPEC_THEME = props.CB_STYLE_PROP_TWITTER.CB_STYLE_PROP_TWITTER_SPEC_THEME, CB_STYLE_PROP_SHADOW = props.CB_STYLE_PROP_SHADOW;
26
27
  var _b = (0, util_1.parseProperties)(props, device), style = _b.style, hoverStyle = _b.hoverStyle, layout = _b.layout, effect = _b.effect;
27
28
  var userId = CB_CONTENT_PROP_TWITTER_SPEC_SRC.replace('https://twitter.com/', '');
@@ -40,6 +41,10 @@ function Twitter(props) {
40
41
  var isVisible = !!(entry === null || entry === void 0 ? void 0 : entry.isIntersecting);
41
42
  var effectCssProperties = isVisible ? effect : {};
42
43
  var editModeStyle = mode === 'EDIT' ? { pointerEvents: 'none' } : {};
43
- return ((0, jsx_runtime_1.jsx)(S_CB_AnimationObserverBox_1.S_CB_AnimationObserverBox, __assign({ ref: cbRef, isVisible: isVisible }, { children: (0, jsx_runtime_1.jsx)(S_CB_BoxWithShadow_1.S_CB_BoxWithShadow, __assign({ className: "cb-layout-box", normalStyle: __assign(__assign(__assign(__assign(__assign({}, style), layout), effectCssProperties), { overflowY: 'auto' }), editModeStyle), hoverStyle: hoverStyle, cbStylePropsShadowSpecs: CB_STYLE_PROP_SHADOW, device: device }, { children: (0, jsx_runtime_1.jsx)(ComponentBlocks_1.TwitterTimeline, { userId: userId, theme: theme }, void 0) }), void 0) }), void 0));
44
+ var twitterTimelineKey = userId + "-" + theme;
45
+ var hasEffect = CB_EFFECT_PROP_ENTANIM.CB_EFFECT_PROP_ENTANIM_SPEC_TYPE !== 'NONE' &&
46
+ CB_EFFECT_PROP_ENTANIM['CB_EFFECT_PROP_ENTANIM_SPEC_TYPE:MOBILE'] !== 'NONE';
47
+ var effectVisibleStyle = hasEffect ? { opacity: isVisible ? 1 : 0 } : {};
48
+ 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(__assign({}, style), layout), effectCssProperties), { overflowY: 'auto' }), editModeStyle), hoverStyle: hoverStyle, cbStylePropsShadowSpecs: CB_STYLE_PROP_SHADOW, device: device }, { children: (0, jsx_runtime_1.jsx)(ComponentBlocks_1.TwitterTimeline, { userId: userId, theme: theme }, twitterTimelineKey) }), void 0) }), void 0));
44
49
  }
45
50
  exports.default = Twitter;
@@ -31,7 +31,7 @@ var S_HiddenCover_1 = require("../components/S_HiddenCover");
31
31
  var parseYoutubeContentProp_1 = __importDefault(require("./parseYoutubeContentProp"));
32
32
  function Youtube(props) {
33
33
  var _a = (0, react_1.useContext)(DynamicLayout_1.dynamicLayoutContext), device = _a.device, mode = _a.mode;
34
- var CB_CONTENT_PROP_YOUTUBE = props.CB_CONTENT_PROP_YOUTUBE, CB_STYLE_PROP_BGCOLOR = props.CB_STYLE_PROP_BGCOLOR, CB_STYLE_PROP_SHADOW = props.CB_STYLE_PROP_SHADOW;
34
+ var CB_CONTENT_PROP_YOUTUBE = props.CB_CONTENT_PROP_YOUTUBE, CB_STYLE_PROP_BGCOLOR = props.CB_STYLE_PROP_BGCOLOR, CB_STYLE_PROP_SHADOW = props.CB_STYLE_PROP_SHADOW, CB_EFFECT_PROP_ENTANIM = props.CB_EFFECT_PROP_ENTANIM;
35
35
  var _b = (0, parseYoutubeContentProp_1.default)(CB_CONTENT_PROP_YOUTUBE), youtubeSrc = _b.youtubeSrc, thumbnailSrc = _b.thumbnailSrc, id = _b.id;
36
36
  var isEditMode = mode === 'EDIT';
37
37
  var _c = getBGColorStyles(CB_STYLE_PROP_BGCOLOR, device), bgColorStyle = _c.style, bgColorHoverStyle = _c.hoverStyle;
@@ -44,7 +44,10 @@ function Youtube(props) {
44
44
  var entry = (0, hooks_1.useIntersectionObserver)(cbRef, { threshold: 0.2, freezeOnceVisible: false });
45
45
  var isVisible = !!(entry === null || entry === void 0 ? void 0 : entry.isIntersecting);
46
46
  var effectCssProperties = isVisible ? effect : {};
47
- 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: cbRef, isVisible: isVisible }, { children: (0, jsx_runtime_1.jsx)(S_CB_BoxWithShadow_1.S_CB_BoxWithShadow, __assign({ className: "cb-layout-box", normalStyle: __assign(__assign(__assign(__assign({}, propsStyle), layoutStyle), effectCssProperties), bgColorStyle), hoverStyle: __assign(__assign({}, propsHoverStyle), bgColorHoverStyle), cbStylePropsShadowSpecs: CB_STYLE_PROP_SHADOW, device: device }, { children: isEditMode ? ((0, jsx_runtime_1.jsxs)(S_ThumbnailBox, { children: [(0, jsx_runtime_1.jsx)(YoutubeButton, {}, void 0), (0, jsx_runtime_1.jsx)(S_Thumbnail, { src: thumbnailSrc }, void 0)] }, void 0)) : ((0, jsx_runtime_1.jsx)(S_Iframe, { title: id, src: youtubeSrc, allow: "accelerometer; encrypted-media; gyroscope; picture-in-picture" }, void 0)) }), void 0) }), void 0)] }, void 0));
47
+ var hasEffect = CB_EFFECT_PROP_ENTANIM.CB_EFFECT_PROP_ENTANIM_SPEC_TYPE !== 'NONE' &&
48
+ CB_EFFECT_PROP_ENTANIM['CB_EFFECT_PROP_ENTANIM_SPEC_TYPE:MOBILE'] !== 'NONE';
49
+ var effectVisibleStyle = hasEffect ? { opacity: isVisible ? 1 : 0 } : {};
50
+ 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_CB_BoxWithShadow_1.S_CB_BoxWithShadow, __assign({ className: "cb-layout-box", normalStyle: __assign(__assign(__assign(__assign({}, propsStyle), layoutStyle), effectCssProperties), bgColorStyle), hoverStyle: __assign(__assign({}, propsHoverStyle), bgColorHoverStyle), cbStylePropsShadowSpecs: CB_STYLE_PROP_SHADOW, device: device }, { children: isEditMode ? ((0, jsx_runtime_1.jsxs)(S_ThumbnailBox, { children: [(0, jsx_runtime_1.jsx)(YoutubeButton, {}, void 0), (0, jsx_runtime_1.jsx)(S_Thumbnail, { src: thumbnailSrc }, void 0)] }, void 0)) : ((0, jsx_runtime_1.jsx)(S_Iframe, { title: id, src: youtubeSrc, allow: "accelerometer; encrypted-media; gyroscope; picture-in-picture" }, void 0)) }), void 0) }), void 0)] }, void 0));
48
51
  }
49
52
  function getBGColorStyles(props, device) {
50
53
  var availableSpecCodes = [
@@ -59,7 +62,7 @@ function getBGColorStyles(props, device) {
59
62
  ];
60
63
  return (0, colorUtil_1.parseStyleColorToCSSProp)({ availableSpecCodes: availableSpecCodes, props: props, propKey: 'BGCOLOR', device: device });
61
64
  }
62
- var S_ThumbnailBox = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n align-items: center;\n display: flex;\n height: 100%;\n justify-content: center;\n position: relative;\n width: 100%;\n"], ["\n align-items: center;\n display: flex;\n height: 100%;\n justify-content: center;\n position: relative;\n width: 100%;\n"])));
65
+ var S_ThumbnailBox = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n align-items: center;\n display: flex;\n height: 100%;\n justify-content: center;\n width: 100%;\n"], ["\n align-items: center;\n display: flex;\n height: 100%;\n justify-content: center;\n width: 100%;\n"])));
63
66
  var S_Thumbnail = styled_components_1.default.img(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n height: 100%;\n object-fit: cover;\n width: 100%;\n"], ["\n height: 100%;\n object-fit: cover;\n width: 100%;\n"])));
64
67
  var S_Iframe = styled_components_1.default.iframe(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n border: none;\n height: 100%;\n width: 100%;\n"], ["\n border: none;\n height: 100%;\n width: 100%;\n"])));
65
68
  var S_YoutubeButton = styled_components_1.default.div(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n height: 48px;\n margin: auto;\n position: absolute;\n width: 68px;\n"], ["\n height: 48px;\n margin: auto;\n position: absolute;\n width: 68px;\n"])));
@@ -1,5 +1,6 @@
1
+ /// <reference types="react" />
1
2
  declare type Props = {
2
- isVisible: boolean;
3
+ effectVisibleStyle: React.CSSProperties;
3
4
  };
4
5
  export declare const S_CB_AnimationObserverBox: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, Props, never>;
5
6
  export {};
@@ -3,14 +3,25 @@ var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cook
3
3
  if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
4
4
  return cooked;
5
5
  };
6
+ var __assign = (this && this.__assign) || function () {
7
+ __assign = Object.assign || function(t) {
8
+ for (var s, i = 1, n = arguments.length; i < n; i++) {
9
+ s = arguments[i];
10
+ for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
11
+ t[p] = s[p];
12
+ }
13
+ return t;
14
+ };
15
+ return __assign.apply(this, arguments);
16
+ };
6
17
  var __importDefault = (this && this.__importDefault) || function (mod) {
7
18
  return (mod && mod.__esModule) ? mod : { "default": mod };
8
19
  };
9
20
  Object.defineProperty(exports, "__esModule", { value: true });
10
21
  exports.S_CB_AnimationObserverBox = void 0;
11
22
  var styled_components_1 = __importDefault(require("styled-components"));
12
- exports.S_CB_AnimationObserverBox = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n height: 100%;\n opacity: ", ";\n width: 100%;\n"], ["\n height: 100%;\n opacity: ", ";\n width: 100%;\n"])), function (_a) {
13
- var isVisible = _a.isVisible;
14
- return (isVisible ? 1 : 0);
23
+ exports.S_CB_AnimationObserverBox = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n height: 100%;\n width: 100%;\n\n ", ";\n"], ["\n height: 100%;\n width: 100%;\n\n ", ";\n"])), function (_a) {
24
+ var effectVisibleStyle = _a.effectVisibleStyle;
25
+ return effectVisibleStyle && __assign({}, effectVisibleStyle);
15
26
  });
16
27
  var templateObject_1;
@@ -3,6 +3,7 @@ declare type Props = {
3
3
  src: string;
4
4
  openNewTab: boolean;
5
5
  type: CB_CONTENT_PROP_CLINK['CB_CONTENT_PROP_CLINK_SPEC_TYPE'];
6
+ internalSrc: string;
6
7
  };
7
8
  export default function useCLINK(props: Props): {
8
9
  CLINKCursor: string;
@@ -4,17 +4,27 @@ var react_1 = require("react");
4
4
  var dynamicLayoutContext_1 = require("../../../../../../../DynamicLayout/dynamicLayoutContext");
5
5
  // NOTE: link기능은 탄력적일 필요가 없음.
6
6
  function useCLINK(props) {
7
- var src = props.src, openNewTab = props.openNewTab, type = props.type;
7
+ var src = props.src, openNewTab = props.openNewTab, type = props.type, internalSrc = props.internalSrc;
8
8
  var _a = (0, react_1.useContext)(dynamicLayoutContext_1.dynamicLayoutContext), navigationHandler = _a.navigationHandler, mode = _a.mode;
9
9
  var navType = type === 'INTERNAL' ? 'INTERNAL_LINK' : 'WEB_LINK';
10
10
  var CLINKCursor = mode === 'EDIT' || type === 'DISABLED' ? 'auto' : 'pointer';
11
11
  function onClickCLINK() {
12
- if (!src || type === 'DISABLED' || mode === 'EDIT') {
12
+ if (type === 'DISABLED' || mode === 'EDIT') {
13
13
  return;
14
14
  }
15
15
  if (typeof navigationHandler === 'function') {
16
- navigationHandler(navType, src, { openNewTab: openNewTab });
17
- return;
16
+ switch (type) {
17
+ case 'INTERNAL':
18
+ if (internalSrc) {
19
+ navigationHandler(navType, internalSrc, { openNewTab: openNewTab });
20
+ }
21
+ return;
22
+ case 'EXTERNAL':
23
+ if (src) {
24
+ navigationHandler(navType, src, { openNewTab: openNewTab });
25
+ }
26
+ return;
27
+ }
18
28
  }
19
29
  }
20
30
  return {
@@ -10,6 +10,7 @@ export declare type CB_CONTENT_PROP_TEXT = {
10
10
  export declare type CB_CONTENT_PROP_CLINK = {
11
11
  CB_CONTENT_PROP_CLINK_SPEC_TYPE: 'INTERNAL' | 'EXTERNAL' | 'DISABLED';
12
12
  CB_CONTENT_PROP_CLINK_SPEC_SRC: STRING_PLAIN;
13
+ CB_CONTENT_PROP_CLINK_SPEC_INTERNALSRC: STRING_PLAIN;
13
14
  CB_CONTENT_PROP_CLINK_SPEC_NEWTAB: boolean;
14
15
  };
15
16
  export declare type CB_CONTENT_PROP_IMAGE = {
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "pds-dev-kit-web-test",
3
- "version": "0.2.21",
3
+ "version": "0.2.23",
4
4
  "license": "MIT",
5
5
  "private": false,
6
6
  "main": "dist/index.js",