pds-dev-kit-web-test 0.3.0 → 0.3.1

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 (17) hide show
  1. package/dist/src/sub/DynamicLayout/sections/CustomSection/CustomSection.js +3 -1
  2. package/dist/src/sub/DynamicLayout/sections/CustomSection/components/ComponentBlock/ComponentBlockCommonWrapper.d.ts +3 -0
  3. package/dist/src/sub/DynamicLayout/sections/CustomSection/components/ComponentBlock/ComponentBlockCommonWrapper.js +8 -0
  4. package/dist/src/sub/DynamicLayout/sections/CustomSection/components/ComponentBlock/componentBlocks/Button/Button.js +4 -2
  5. package/dist/src/sub/DynamicLayout/sections/CustomSection/components/ComponentBlock/componentBlocks/Divider/Divider.js +7 -2
  6. package/dist/src/sub/DynamicLayout/sections/CustomSection/components/ComponentBlock/componentBlocks/Image/Image.js +4 -2
  7. package/dist/src/sub/DynamicLayout/sections/CustomSection/components/ComponentBlock/componentBlocks/RichText/RichText.js +4 -2
  8. package/dist/src/sub/DynamicLayout/sections/CustomSection/components/ComponentBlock/componentBlocks/Text/Text.js +4 -2
  9. package/dist/src/sub/DynamicLayout/sections/CustomSection/components/ComponentBlock/componentBlocks/Twitter/Twitter.js +7 -2
  10. package/dist/src/sub/DynamicLayout/sections/CustomSection/components/ComponentBlock/componentBlocks/Youtube/Youtube.js +4 -2
  11. package/dist/src/sub/DynamicLayout/sections/CustomSection/components/ComponentBlock/componentBlocks/components/AnimationObserverBox.d.ts +8 -0
  12. package/dist/src/sub/DynamicLayout/sections/CustomSection/components/ComponentBlock/componentBlocks/components/AnimationObserverBox.js +34 -0
  13. package/dist/src/sub/DynamicLayout/sections/CustomSection/hooks/useIntersectionObserver.js +4 -1
  14. package/package.json +1 -1
  15. package/release-note.md +2 -2
  16. package/dist/src/sub/DynamicLayout/sections/CustomSection/components/ComponentBlock/componentBlocks/components/S_CB_AnimationObserverBox.d.ts +0 -6
  17. package/dist/src/sub/DynamicLayout/sections/CustomSection/components/ComponentBlock/componentBlocks/components/S_CB_AnimationObserverBox.js +0 -27
package/dist/src/sub/DynamicLayout/sections/CustomSection/CustomSection.js CHANGED
@@ -42,6 +42,7 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
42
42
  };
43
43
  Object.defineProperty(exports, "__esModule", { value: true });
44
44
  var jsx_runtime_1 = require("react/jsx-runtime");
45
+ /* eslint-disable no-console */
45
46
  /* eslint-disable react/destructuring-assignment */
46
47
  var publ_echo_1 = require("publ-echo");
47
48
  var react_1 = __importStar(require("react"));
@@ -75,6 +76,7 @@ function CustomSection(props) {
75
76
  sm: sm
76
77
  };
77
78
  }), layouts = _f[0], setLayouts = _f[1];
79
+ console.log(layouts);
78
80
  (0, react_1.useEffect)(function () {
79
81
  var _a = (0, util_1.parsePlacement)(componentBlocks !== null && componentBlocks !== void 0 ? componentBlocks : []), lg = _a.lg, sm = _a.sm;
80
82
  setLayouts({ lg: lg, sm: sm });
@@ -206,7 +208,7 @@ function CustomSection(props) {
206
208
  width: customSectionStyles.width,
207
209
  minWidth: isMobile ? GLE_MIN_WIDTH_MOBILE_PX : GLE_MIN_WIDTH_DESKTOP_PX,
208
210
  fontSize: "".concat(baseFontSize, "px")
209
- }, onLayoutChange: onLayoutChange, onDragStop: onDragStop, onResizeStop: onResizeStop, onWidthChange: onWidthChange, minNbRow: rows, isDraggable: isEditMode, isResizable: isEditMode }, { children: (componentBlocks === null || componentBlocks === void 0 ? void 0 : componentBlocks.length) ? (componentBlocks.map(function (each) { return ((0, jsx_runtime_1.jsx)("div", __assign({ className: selectedCB === each.id ? 'react-grid-item-selected' : '' }, { children: (0, jsx_runtime_1.jsx)("div", __assign({ "x-dlayout-component-block-id": each.id, style: {
211
+ }, onLayoutChange: onLayoutChange, onDragStop: onDragStop, onResizeStop: onResizeStop, onWidthChange: onWidthChange, minNbRow: rows, isDraggable: isEditMode, isResizable: isEditMode }, { children: (componentBlocks === null || componentBlocks === void 0 ? void 0 : componentBlocks.length) ? (componentBlocks.map(function (each) { return ((0, jsx_runtime_1.jsx)("div", __assign({ className: selectedCB === each.id ? 'react-grid-item-selected' : '' }, { children: (0, jsx_runtime_1.jsx)("div", __assign({ style: {
210
212
  width: '100%',
211
213
  height: '100%'
212
214
  }, onClick: function (e) {
package/dist/src/sub/DynamicLayout/sections/CustomSection/components/ComponentBlock/ComponentBlockCommonWrapper.d.ts ADDED
@@ -0,0 +1,3 @@
1
+ /// <reference types="react" />
2
+ declare function ComponentBlockCommonWrapper(): JSX.Element;
3
+ export default ComponentBlockCommonWrapper;
package/dist/src/sub/DynamicLayout/sections/CustomSection/components/ComponentBlock/ComponentBlockCommonWrapper.js ADDED
@@ -0,0 +1,8 @@
1
+ "use strict";
2
+ Object.defineProperty(exports, "__esModule", { value: true });
3
+ var jsx_runtime_1 = require("react/jsx-runtime");
4
+ require("react");
5
+ function ComponentBlockCommonWrapper() {
6
+ return (0, jsx_runtime_1.jsx)("div", { children: "ComponentBlockCommonWrapper" });
7
+ }
8
+ exports.default = ComponentBlockCommonWrapper;
package/dist/src/sub/DynamicLayout/sections/CustomSection/components/ComponentBlock/componentBlocks/Button/Button.js CHANGED
@@ -26,6 +26,7 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
26
26
  };
27
27
  Object.defineProperty(exports, "__esModule", { value: true });
28
28
  var jsx_runtime_1 = require("react/jsx-runtime");
29
+ /* eslint-disable no-console */
29
30
  /* eslint-disable react/destructuring-assignment */
30
31
  var react_1 = require("react");
31
32
  var DynamicLayout_1 = require("../../../../../../../DynamicLayout");
@@ -34,7 +35,7 @@ var useGoogleFonts_1 = require("../../../../../../../DynamicLayout/sections/Cust
34
35
  var newUtils_1 = require("../../../../../../../DynamicLayout/sections/CustomSection/newUtils");
35
36
  var colorUtil_1 = require("../../../../../../../DynamicLayout/sections/CustomSection/newUtils/colorUtil");
36
37
  var util_1 = require("../../../../../../../DynamicLayout/sections/CustomSection/util");
37
- var S_CB_AnimationObserverBox_1 = require("../components/S_CB_AnimationObserverBox");
38
+ var AnimationObserverBox_1 = __importDefault(require("../components/AnimationObserverBox"));
38
39
  var S_CB_BoxWithShadow_1 = require("../components/S_CB_BoxWithShadow");
39
40
  var S_HiddenCover_1 = require("../components/S_HiddenCover");
40
41
  var useCLINK_1 = __importDefault(require("../hooks/useCLINK"));
@@ -65,7 +66,8 @@ function Button(props) {
65
66
  : CB_EFFECT_PROP_ENTANIM['CB_EFFECT_PROP_ENTANIM_SPEC_TYPE:MOBILE'] === 'NONE';
66
67
  var hasEffect = !isNoneEffectType;
67
68
  var effectVisibleStyle = hasEffect ? { opacity: isVisible ? 1 : 0 } : {};
68
- return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [isEditModeAndHidden && (0, jsx_runtime_1.jsx)(S_HiddenCover_1.S_HiddenCover, {}), (0, jsx_runtime_1.jsx)(S_CB_AnimationObserverBox_1.S_CB_AnimationObserverBox, __assign({ ref: hasEffect ? cbRef : null, effectVisibleStyle: effectVisibleStyle, style: {
69
+ console.log('hasEffect: ', hasEffect, cbRef, isVisible);
70
+ return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [isEditModeAndHidden && (0, jsx_runtime_1.jsx)(S_HiddenCover_1.S_HiddenCover, {}), (0, jsx_runtime_1.jsx)(AnimationObserverBox_1.default, __assign({ ref: hasEffect ? cbRef : null, effectVisibleStyle: effectVisibleStyle, style: {
69
71
  paddingLeft: paddingLeft,
70
72
  paddingRight: paddingRight,
71
73
  paddingBottom: paddingBottom,
package/dist/src/sub/DynamicLayout/sections/CustomSection/components/ComponentBlock/componentBlocks/Divider/Divider.js CHANGED
@@ -37,14 +37,18 @@ var __importStar = (this && this.__importStar) || function (mod) {
37
37
  __setModuleDefault(result, mod);
38
38
  return result;
39
39
  };
40
+ var __importDefault = (this && this.__importDefault) || function (mod) {
41
+ return (mod && mod.__esModule) ? mod : { "default": mod };
42
+ };
40
43
  Object.defineProperty(exports, "__esModule", { value: true });
41
44
  var jsx_runtime_1 = require("react/jsx-runtime");
45
+ /* eslint-disable no-console */
42
46
  var react_1 = require("react");
43
47
  var DynamicLayout_1 = require("../../../../../../../DynamicLayout");
44
48
  var styled_components_1 = __importStar(require("styled-components"));
45
49
  var hooks_1 = require("../../../../hooks");
46
50
  var util_1 = require("../../../../util");
47
- var S_CB_AnimationObserverBox_1 = require("../components/S_CB_AnimationObserverBox");
51
+ var AnimationObserverBox_1 = __importDefault(require("../components/AnimationObserverBox"));
48
52
  var S_CB_Box_1 = require("../components/S_CB_Box");
49
53
  var S_HiddenCover_1 = require("../components/S_HiddenCover");
50
54
  function Divider(props) {
@@ -64,7 +68,8 @@ function Divider(props) {
64
68
  : CB_EFFECT_PROP_ENTANIM['CB_EFFECT_PROP_ENTANIM_SPEC_TYPE:MOBILE'] === 'NONE';
65
69
  var hasEffect = !isNoneEffectType;
66
70
  var effectVisibleStyle = hasEffect ? { opacity: isVisible ? 1 : 0 } : {};
67
- return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [isEditModeAndHidden && (0, jsx_runtime_1.jsx)(S_HiddenCover_1.S_HiddenCover, {}), (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) }) })) }))] }));
71
+ console.log('hasEffect: ', hasEffect, cbRef, isVisible);
72
+ return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [isEditModeAndHidden && (0, jsx_runtime_1.jsx)(S_HiddenCover_1.S_HiddenCover, {}), (0, jsx_runtime_1.jsx)(AnimationObserverBox_1.default, __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) }) })) }))] }));
68
73
  }
69
74
  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) {
70
75
  var normalStyle = _a.normalStyle;
package/dist/src/sub/DynamicLayout/sections/CustomSection/components/ComponentBlock/componentBlocks/Image/Image.js CHANGED
@@ -42,12 +42,13 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
42
42
  };
43
43
  Object.defineProperty(exports, "__esModule", { value: true });
44
44
  var jsx_runtime_1 = require("react/jsx-runtime");
45
+ /* eslint-disable no-console */
45
46
  var react_1 = require("react");
46
47
  var DynamicLayout_1 = require("../../../../../../../DynamicLayout");
47
48
  var styled_components_1 = __importStar(require("styled-components"));
48
49
  var hooks_1 = require("../../../../hooks");
49
50
  var util_1 = require("../../../../util");
50
- var S_CB_AnimationObserverBox_1 = require("../components/S_CB_AnimationObserverBox");
51
+ var AnimationObserverBox_1 = __importDefault(require("../components/AnimationObserverBox"));
51
52
  var S_CB_BoxWithShadow_1 = require("../components/S_CB_BoxWithShadow");
52
53
  var S_HiddenCover_1 = require("../components/S_HiddenCover");
53
54
  var useCLINK_1 = __importDefault(require("../hooks/useCLINK"));
@@ -72,7 +73,8 @@ function Image(props) {
72
73
  : CB_EFFECT_PROP_ENTANIM['CB_EFFECT_PROP_ENTANIM_SPEC_TYPE:MOBILE'] === 'NONE';
73
74
  var hasEffect = !isNoneEffectType;
74
75
  var effectVisibleStyle = hasEffect ? { opacity: isVisible ? 1 : 0 } : {};
75
- return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [isEditModeAndHidden && (0, jsx_runtime_1.jsx)(S_HiddenCover_1.S_HiddenCover, {}), (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, 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%' } }) })) })) })) }))] }));
76
+ console.log('hasEffect: ', hasEffect, cbRef, isVisible);
77
+ return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [isEditModeAndHidden && (0, jsx_runtime_1.jsx)(S_HiddenCover_1.S_HiddenCover, {}), (0, jsx_runtime_1.jsx)(AnimationObserverBox_1.default, __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, 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%' } }) })) })) })) }))] }));
76
78
  }
77
79
  function parseImageCBStyle(style, hoverStyle, mode) {
78
80
  var boxStyle = {
package/dist/src/sub/DynamicLayout/sections/CustomSection/components/ComponentBlock/componentBlocks/RichText/RichText.js CHANGED
@@ -19,6 +19,7 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
19
19
  };
20
20
  Object.defineProperty(exports, "__esModule", { value: true });
21
21
  var jsx_runtime_1 = require("react/jsx-runtime");
22
+ /* eslint-disable no-console */
22
23
  /* eslint-disable react/destructuring-assignment */
23
24
  var react_1 = require("react");
24
25
  var DynamicLayout_1 = require("../../../../../../../DynamicLayout");
@@ -27,7 +28,7 @@ var hooks_1 = require("../../../../../../../DynamicLayout/sections/CustomSection
27
28
  var colorUtil_1 = require("../../../../../../../DynamicLayout/sections/CustomSection/newUtils/colorUtil");
28
29
  var util_1 = require("../../../../../../../DynamicLayout/sections/CustomSection/util");
29
30
  var styled_components_1 = __importDefault(require("styled-components"));
30
- var S_CB_AnimationObserverBox_1 = require("../components/S_CB_AnimationObserverBox");
31
+ var AnimationObserverBox_1 = __importDefault(require("../components/AnimationObserverBox"));
31
32
  var S_CB_BoxWithShadow_1 = require("../components/S_CB_BoxWithShadow");
32
33
  var S_HiddenCover_1 = require("../components/S_HiddenCover");
33
34
  function RichText(props) {
@@ -48,7 +49,8 @@ function RichText(props) {
48
49
  : CB_EFFECT_PROP_ENTANIM['CB_EFFECT_PROP_ENTANIM_SPEC_TYPE:MOBILE'] === 'NONE';
49
50
  var hasEffect = !isNoneEffectType;
50
51
  var effectVisibleStyle = hasEffect ? { opacity: isVisible ? 1 : 0 } : {};
51
- return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [isEditModeAndHidden && (0, jsx_runtime_1.jsx)(S_HiddenCover_1.S_HiddenCover, {}), (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 }) }) })) }))] }));
52
+ console.log('hasEffect: ', hasEffect, cbRef, isVisible);
53
+ return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [isEditModeAndHidden && (0, jsx_runtime_1.jsx)(S_HiddenCover_1.S_HiddenCover, {}), (0, jsx_runtime_1.jsx)(AnimationObserverBox_1.default, __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 }) }) })) }))] }));
52
54
  }
53
55
  function getBGColorStyles(props, device) {
54
56
  var availableSpecCodes = [
package/dist/src/sub/DynamicLayout/sections/CustomSection/components/ComponentBlock/componentBlocks/Text/Text.js CHANGED
@@ -15,6 +15,7 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
15
15
  };
16
16
  Object.defineProperty(exports, "__esModule", { value: true });
17
17
  var jsx_runtime_1 = require("react/jsx-runtime");
18
+ /* eslint-disable no-console */
18
19
  /* eslint-disable react/destructuring-assignment */
19
20
  var react_1 = require("react");
20
21
  var DynamicLayout_1 = require("../../../../../../../DynamicLayout");
@@ -23,7 +24,7 @@ var getGoogleFonts_1 = require("../../../../hooks/useGoogleFonts/getGoogleFonts"
23
24
  var useGoogleFonts_1 = __importDefault(require("../../../../hooks/useGoogleFonts/useGoogleFonts"));
24
25
  var textUtil_1 = require("../../../../newUtils/textUtil");
25
26
  var util_1 = require("../../../../util");
26
- var S_CB_AnimationObserverBox_1 = require("../components/S_CB_AnimationObserverBox");
27
+ var AnimationObserverBox_1 = __importDefault(require("../components/AnimationObserverBox"));
27
28
  var S_CB_Box_1 = require("../components/S_CB_Box");
28
29
  var S_HiddenCover_1 = require("../components/S_HiddenCover");
29
30
  var useCLINK_1 = __importDefault(require("../hooks/useCLINK"));
@@ -53,7 +54,8 @@ function Text(props) {
53
54
  : CB_EFFECT_PROP_ENTANIM['CB_EFFECT_PROP_ENTANIM_SPEC_TYPE:MOBILE'] === 'NONE';
54
55
  var hasEffect = !isNoneEffectType;
55
56
  var effectVisibleStyle = hasEffect ? { opacity: isVisible ? 1 : 0 } : {};
56
- return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [isEditModeAndHidden && (0, jsx_runtime_1.jsx)(S_HiddenCover_1.S_HiddenCover, {}), (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 })) }))] }));
57
+ console.log('hasEffect: ', hasEffect, cbRef, isVisible);
58
+ return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [isEditModeAndHidden && (0, jsx_runtime_1.jsx)(S_HiddenCover_1.S_HiddenCover, {}), (0, jsx_runtime_1.jsx)(AnimationObserverBox_1.default, __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 })) }))] }));
57
59
  }
58
60
  function getTextStyles(props, device) {
59
61
  var availableSpecCodes = [
package/dist/src/sub/DynamicLayout/sections/CustomSection/components/ComponentBlock/componentBlocks/Twitter/Twitter.js CHANGED
@@ -10,14 +10,18 @@ var __assign = (this && this.__assign) || function () {
10
10
  };
11
11
  return __assign.apply(this, arguments);
12
12
  };
13
+ var __importDefault = (this && this.__importDefault) || function (mod) {
14
+ return (mod && mod.__esModule) ? mod : { "default": mod };
15
+ };
13
16
  Object.defineProperty(exports, "__esModule", { value: true });
14
17
  var jsx_runtime_1 = require("react/jsx-runtime");
18
+ /* eslint-disable no-console */
15
19
  var react_1 = require("react");
16
20
  var DynamicLayout_1 = require("../../../../../../../DynamicLayout");
17
21
  var ComponentBlocks_1 = require("../../../../../../../DynamicLayout/components/ComponentBlocks");
18
22
  var hooks_1 = require("../../../../hooks");
19
23
  var util_1 = require("../../../../util");
20
- var S_CB_AnimationObserverBox_1 = require("../components/S_CB_AnimationObserverBox");
24
+ var AnimationObserverBox_1 = __importDefault(require("../components/AnimationObserverBox"));
21
25
  var S_CB_BoxWithShadow_1 = require("../components/S_CB_BoxWithShadow");
22
26
  function Twitter(props) {
23
27
  // eslint-disable-next-line @typescript-eslint/no-unused-vars
@@ -47,6 +51,7 @@ function Twitter(props) {
47
51
  : CB_EFFECT_PROP_ENTANIM['CB_EFFECT_PROP_ENTANIM_SPEC_TYPE:MOBILE'] === 'NONE';
48
52
  var hasEffect = !isNoneEffectType;
49
53
  var effectVisibleStyle = hasEffect ? { opacity: isVisible ? 1 : 0 } : {};
50
- 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) })) })));
54
+ console.log('hasEffect: ', hasEffect, cbRef, isVisible);
55
+ return ((0, jsx_runtime_1.jsx)(AnimationObserverBox_1.default, __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) })) })));
51
56
  }
52
57
  exports.default = Twitter;
package/dist/src/sub/DynamicLayout/sections/CustomSection/components/ComponentBlock/componentBlocks/Youtube/Youtube.js CHANGED
@@ -19,13 +19,14 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
19
19
  };
20
20
  Object.defineProperty(exports, "__esModule", { value: true });
21
21
  var jsx_runtime_1 = require("react/jsx-runtime");
22
+ /* eslint-disable no-console */
22
23
  var react_1 = require("react");
23
24
  var DynamicLayout_1 = require("../../../../../../../DynamicLayout");
24
25
  var hooks_1 = require("../../../../../../../DynamicLayout/sections/CustomSection/hooks");
25
26
  var colorUtil_1 = require("../../../../../../../DynamicLayout/sections/CustomSection/newUtils/colorUtil");
26
27
  var util_1 = require("../../../../../../../DynamicLayout/sections/CustomSection/util");
27
28
  var styled_components_1 = __importDefault(require("styled-components"));
28
- var S_CB_AnimationObserverBox_1 = require("../components/S_CB_AnimationObserverBox");
29
+ var AnimationObserverBox_1 = __importDefault(require("../components/AnimationObserverBox"));
29
30
  var S_CB_BoxWithShadow_1 = require("../components/S_CB_BoxWithShadow");
30
31
  var S_HiddenCover_1 = require("../components/S_HiddenCover");
31
32
  var parseYoutubeContentProp_1 = __importDefault(require("./parseYoutubeContentProp"));
@@ -49,7 +50,8 @@ function Youtube(props) {
49
50
  : CB_EFFECT_PROP_ENTANIM['CB_EFFECT_PROP_ENTANIM_SPEC_TYPE:MOBILE'] === 'NONE';
50
51
  var hasEffect = !isNoneEffectType;
51
52
  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, {}), (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, {}), (0, jsx_runtime_1.jsx)(S_Thumbnail, { src: thumbnailSrc })] })) : ((0, jsx_runtime_1.jsx)(S_Iframe, { title: id, src: youtubeSrc, allow: "accelerometer; encrypted-media; gyroscope; picture-in-picture" })) })) }))] }));
53
+ console.log('hasEffect: ', hasEffect, cbRef, isVisible);
54
+ return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [isEditModeAndHidden && (0, jsx_runtime_1.jsx)(S_HiddenCover_1.S_HiddenCover, {}), (0, jsx_runtime_1.jsx)(AnimationObserverBox_1.default, __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, {}), (0, jsx_runtime_1.jsx)(S_Thumbnail, { src: thumbnailSrc })] })) : ((0, jsx_runtime_1.jsx)(S_Iframe, { title: id, src: youtubeSrc, allow: "accelerometer; encrypted-media; gyroscope; picture-in-picture" })) })) }))] }));
53
55
  }
54
56
  function getBGColorStyles(props, device) {
55
57
  var availableSpecCodes = [
package/dist/src/sub/DynamicLayout/sections/CustomSection/components/ComponentBlock/componentBlocks/components/AnimationObserverBox.d.ts ADDED
@@ -0,0 +1,8 @@
1
+ import type React from 'react';
2
+ type Props = {
3
+ children: any;
4
+ effectVisibleStyle: React.CSSProperties;
5
+ style?: React.CSSProperties;
6
+ };
7
+ declare const _default: React.ForwardRefExoticComponent<Props & React.RefAttributes<HTMLDivElement>>;
8
+ export default _default;
package/dist/src/sub/DynamicLayout/sections/CustomSection/components/ComponentBlock/componentBlocks/components/AnimationObserverBox.js ADDED
@@ -0,0 +1,34 @@
1
+ "use strict";
2
+ var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
3
+ if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
4
+ return cooked;
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
+ };
17
+ var __importDefault = (this && this.__importDefault) || function (mod) {
18
+ return (mod && mod.__esModule) ? mod : { "default": mod };
19
+ };
20
+ Object.defineProperty(exports, "__esModule", { value: true });
21
+ var jsx_runtime_1 = require("react/jsx-runtime");
22
+ var react_1 = require("react");
23
+ var styled_components_1 = __importDefault(require("styled-components"));
24
+ function AnimationObserverBox(_a, ref) {
25
+ var children = _a.children, effectVisibleStyle = _a.effectVisibleStyle, style = _a.style;
26
+ return ((0, jsx_runtime_1.jsx)(S_Wrapper, __assign({ ref: ref, className: "animation-obserber-box" }, { children: (0, jsx_runtime_1.jsx)(S_CB_AnimationObserverBox, __assign({ style: style, effectVisibleStyle: effectVisibleStyle }, { children: children })) })));
27
+ }
28
+ var S_Wrapper = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n height: 100%;\n width: 100%;\n"], ["\n height: 100%;\n width: 100%;\n"])));
29
+ exports.default = (0, react_1.forwardRef)(AnimationObserverBox);
30
+ var S_CB_AnimationObserverBox = styled_components_1.default.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n height: 100%;\n width: 100%;\n\n ", ";\n"], ["\n height: 100%;\n width: 100%;\n\n ", ";\n"])), function (_a) {
31
+ var effectVisibleStyle = _a.effectVisibleStyle;
32
+ return effectVisibleStyle && __assign({}, effectVisibleStyle);
33
+ });
34
+ var templateObject_1, templateObject_2;
package/dist/src/sub/DynamicLayout/sections/CustomSection/hooks/useIntersectionObserver.js CHANGED
@@ -1,6 +1,7 @@
1
1
  "use strict";
2
2
  Object.defineProperty(exports, "__esModule", { value: true });
3
3
  exports.useIntersectionObserver = void 0;
4
+ /* eslint-disable no-console */
4
5
  var react_1 = require("react");
5
6
  function useIntersectionObserver(elementRef, _a) {
6
7
  var _b = _a.threshold, threshold = _b === void 0 ? 0 : _b, _c = _a.root, root = _c === void 0 ? null : _c, _d = _a.rootMargin, rootMargin = _d === void 0 ? '0%' : _d, _e = _a.freezeOnceVisible, freezeOnceVisible = _e === void 0 ? false : _e;
@@ -13,8 +14,10 @@ function useIntersectionObserver(elementRef, _a) {
13
14
  (0, react_1.useEffect)(function () {
14
15
  var node = elementRef === null || elementRef === void 0 ? void 0 : elementRef.current; // DOM Ref
15
16
  var hasIOSupport = !!window.IntersectionObserver;
16
- if (!hasIOSupport || frozen || !node)
17
+ if (!hasIOSupport || frozen || !node) {
18
+ console.log('no node or support', elementRef === null || elementRef === void 0 ? void 0 : elementRef.current);
17
19
  return;
20
+ }
18
21
  var observerParams = { threshold: threshold, root: root, rootMargin: rootMargin };
19
22
  var observer = new IntersectionObserver(updateEntry, observerParams);
20
23
  observer.observe(node);
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "pds-dev-kit-web-test",
3
- "version": "0.3.0",
3
+ "version": "0.3.1",
4
4
  "license": "MIT",
5
5
  "private": false,
6
6
  "main": "dist/index.js",
package/release-note.md CHANGED
@@ -1,6 +1,6 @@
1
1
  # pds-dev-kit-web-test Release Notes
2
- ## [v0.3.0]
2
+ ## [v0.3.1]
3
3
  ## 기준 pds-dev-kit-web 버전 @2.2.22
4
4
  ### sub
5
5
  * DynamicLayout
6
- * custom section의 CB에 x-dlayout-component-block-id 추가
6
+ * 애니메이션이 적용된 CB가 항상 잘 보이도록 수정
package/dist/src/sub/DynamicLayout/sections/CustomSection/components/ComponentBlock/componentBlocks/components/S_CB_AnimationObserverBox.d.ts DELETED
@@ -1,6 +0,0 @@
1
- /// <reference types="react" />
2
- type Props = {
3
- effectVisibleStyle: React.CSSProperties;
4
- };
5
- export declare const S_CB_AnimationObserverBox: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, Props, never>;
6
- export {};
package/dist/src/sub/DynamicLayout/sections/CustomSection/components/ComponentBlock/componentBlocks/components/S_CB_AnimationObserverBox.js DELETED
@@ -1,27 +0,0 @@
1
- "use strict";
2
- var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
3
- if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
4
- return cooked;
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
- };
17
- var __importDefault = (this && this.__importDefault) || function (mod) {
18
- return (mod && mod.__esModule) ? mod : { "default": mod };
19
- };
20
- Object.defineProperty(exports, "__esModule", { value: true });
21
- exports.S_CB_AnimationObserverBox = void 0;
22
- var styled_components_1 = __importDefault(require("styled-components"));
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);
26
- });
27
- var templateObject_1;