pds-dev-kit-web-test 2.4.19 → 2.4.21

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 (14) hide show
  1. package/dist/src/desktop/components/UserDesktopTabBar/UserDesktopTabBar.d.ts +1 -1
  2. package/dist/src/desktop/components/UserDesktopTabBar/UserDesktopTabBar.js +24 -4
  3. package/dist/src/sub/DynamicLayout/DynamicLayout.js +14 -1
  4. package/dist/src/sub/DynamicLayout/pagesPreviewMock.js +117 -0
  5. package/dist/src/sub/DynamicLayout/sectionActionTypes.d.ts +0 -8
  6. package/dist/src/sub/DynamicLayout/sections/CustomSection/CustomSection.js +71 -67
  7. package/dist/src/sub/DynamicLayout/sections/CustomSection/components/ComponentBlock/ComponentBlockMatcher.js +39 -2
  8. package/dist/src/sub/DynamicLayout/sections/CustomSection/components/ComponentBlock/componentBlocks/ScrollAnimation.d.ts +3 -0
  9. package/dist/src/sub/DynamicLayout/sections/CustomSection/components/ComponentBlock/componentBlocks/ScrollAnimation.js +223 -0
  10. package/dist/src/sub/DynamicLayout/sections/CustomSection/util/types.d.ts +0 -2
  11. package/package.json +1 -1
  12. package/release-note.md +2 -2
  13. package/dist/src/sub/DynamicLayout/sections/CustomSection/util/getClassName.d.ts +0 -3
  14. package/dist/src/sub/DynamicLayout/sections/CustomSection/util/getClassName.js +0 -26
package/dist/src/desktop/components/UserDesktopTabBar/UserDesktopTabBar.d.ts CHANGED
@@ -6,7 +6,7 @@ type TextObj = {
6
6
  };
7
7
  type UserDesktopTabBarProps = {
8
8
  itemArray?: PDSTabItemOption[];
9
- styleTheme?: 'main';
9
+ styleTheme?: 'main' | 'content';
10
10
  /** @deprecated v1.5 해당 필드 대신 itemArray를 사용하세요. */
11
11
  textArray?: TextObj[];
12
12
  };
package/dist/src/desktop/components/UserDesktopTabBar/UserDesktopTabBar.js CHANGED
@@ -52,7 +52,12 @@ function UserDesktopTabBar(_a) {
52
52
  item.onClick(e);
53
53
  }
54
54
  };
55
- return ((0, jsx_runtime_1.jsx)(S_TabBar, __assign({ "x-pds-name": "UserDesktopTabBar", "x-pds-element-type": "component", "x-pds-device-type": "desktop" }, { children: itemArray.map(function (item, index) { return ((0, jsx_runtime_1.jsx)(S_TabWrapper, __assign({ isActive: item.isActive, styleTheme: styleTheme, text: item.title, onClick: function (e) { return handleClickTabItem_1(item, e); } }, { children: (0, jsx_runtime_1.jsx)(TextLabel_1.TextLabel, { text: item.title, textAlign: "center", styleTheme: item.isActive ? 'body2Bold' : 'body2Regular', colorTheme: item.isActive ? 'usrTextBrandPrimary' : 'sysTextSecondary', singleLineMode: "use" }) }), index)); }) })));
55
+ return ((0, jsx_runtime_1.jsx)(S_TabBar, __assign({ "x-pds-name": "UserDesktopTabBar", "x-pds-element-type": "component", "x-pds-device-type": "desktop" }, { children: itemArray.map(function (item, index) {
56
+ if (styleTheme === 'content') {
57
+ return ((0, jsx_runtime_1.jsx)(S_TabWrapper, __assign({ isActive: item.isActive, styleTheme: "content", text: item.title, onClick: function (e) { return handleClickTabItem_1(item, e); } }, { children: (0, jsx_runtime_1.jsx)(TextLabel_1.TextLabel, { text: item.title, textAlign: "center", styleTheme: "headingBold", colorTheme: item.isActive ? 'sysTextPrimary' : 'sysTextSecondary', singleLineMode: "use" }) }), index));
58
+ }
59
+ return ((0, jsx_runtime_1.jsx)(S_TabWrapper, __assign({ isActive: item.isActive, styleTheme: styleTheme, text: item.title, onClick: function (e) { return handleClickTabItem_1(item, e); } }, { children: (0, jsx_runtime_1.jsx)(TextLabel_1.TextLabel, { text: item.title, textAlign: "center", styleTheme: item.isActive ? 'body2Bold' : 'body2Regular', colorTheme: item.isActive ? 'usrTextBrandPrimary' : 'sysTextSecondary', singleLineMode: "use" }) }), index));
60
+ }) })));
56
61
  }
57
62
  if (textArray) {
58
63
  var handleClick_1 = function (value) {
@@ -75,7 +80,9 @@ var S_TabWrapper = styled_components_1.default.div(templateObject_2 || (template
75
80
  var styleTheme = _a.styleTheme;
76
81
  switch (styleTheme) {
77
82
  case 'main':
78
- return mainStyle; // TODO : 추후 styleTheme 의 enum 값이 추가되면 수정
83
+ return mainStyle;
84
+ case 'content':
85
+ return contentStyle;
79
86
  default:
80
87
  return mainStyle;
81
88
  }
@@ -99,7 +106,20 @@ var mainStyle = (0, styled_components_1.css)(templateObject_3 || (templateObject
99
106
  var isActive = _a.isActive;
100
107
  return !isActive && "display: none;";
101
108
  });
102
- var S_TabBar = styled_components_1.default.div(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n background-color: ", ";\n border-bottom: 1px solid ", ";\n box-sizing: border-box;\n display: flex;\n flex-direction: row;\n height: 48px;\n justify-content: center;\n"], ["\n background-color: ", ";\n border-bottom: 1px solid ", ";\n box-sizing: border-box;\n display: flex;\n flex-direction: row;\n height: 48px;\n justify-content: center;\n"])), function (_a) {
109
+ var contentStyle = (0, styled_components_1.css)(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n align-items: center;\n background-color: ", ";\n cursor: pointer;\n display: flex;\n margin-right: ", ";\n position: relative;\n\n &:last-child {\n margin-right: 0;\n }\n\n &::after {\n background-color: ", ";\n bottom: -1px;\n content: '';\n height: 2px;\n position: absolute;\n width: 100%;\n ", ";\n }\n"], ["\n align-items: center;\n background-color: ", ";\n cursor: pointer;\n display: flex;\n margin-right: ", ";\n position: relative;\n\n &:last-child {\n margin-right: 0;\n }\n\n &::after {\n background-color: ", ";\n bottom: -1px;\n content: '';\n height: 2px;\n position: absolute;\n width: 100%;\n ", ";\n }\n"])), function (_a) {
110
+ var isActive = _a.isActive, theme = _a.theme;
111
+ return isActive && theme.ui_cpnt_tabbar_base_area;
112
+ }, function (_a) {
113
+ var theme = _a.theme;
114
+ return theme.spacing.spacingF;
115
+ }, function (_a) {
116
+ var theme = _a.theme;
117
+ return theme.ui_19;
118
+ }, function (_a) {
119
+ var isActive = _a.isActive;
120
+ return !isActive && "display: none;";
121
+ });
122
+ var S_TabBar = styled_components_1.default.div(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n background-color: ", ";\n border-bottom: 1px solid ", ";\n box-sizing: border-box;\n display: flex;\n flex-direction: row;\n height: 48px;\n justify-content: center;\n"], ["\n background-color: ", ";\n border-bottom: 1px solid ", ";\n box-sizing: border-box;\n display: flex;\n flex-direction: row;\n height: 48px;\n justify-content: center;\n"])), function (_a) {
103
123
  var theme = _a.theme;
104
124
  return theme.ui_cpnt_tabbar_base_area;
105
125
  }, function (_a) {
@@ -107,4 +127,4 @@ var S_TabBar = styled_components_1.default.div(templateObject_4 || (templateObje
107
127
  return theme.ui_cpnt_divider;
108
128
  });
109
129
  exports.default = UserDesktopTabBar;
110
- var templateObject_1, templateObject_2, templateObject_3, templateObject_4;
130
+ var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5;
package/dist/src/sub/DynamicLayout/DynamicLayout.js CHANGED
@@ -26,7 +26,20 @@ var SectionMatcher_1 = require("./components/SectionMatcher");
26
26
  var dynamicLayoutContext_1 = require("./dynamicLayoutContext");
27
27
  function DynamicLayout(_a) {
28
28
  var device = _a.device, _b = _a.mode, mode = _b === void 0 ? 'NORMAL' : _b, isPreview = _a.isPreview, sections = _a.sections, scrollDownTargetSectionId = _a.scrollDownTargetSectionId, editingSectionId = _a.editingSectionId, navigationHandler = _a.navigationHandler, sectionActionHandler = _a.sectionActionHandler, onClickEditSection = _a.onClickEditSection, programmedSectionComponents = _a.programmedSectionComponents, shortcutKeyMode = _a.shortcutKeyMode, dynamicLayoutRef = _a.dynamicLayoutRef;
29
- var filteredSortedSection = __spreadArray([], sections, true).filter(function (section) { return section.display; })
29
+ var filteredSortedSection = __spreadArray([], sections, true).filter(function (section) {
30
+ var _a;
31
+ if (!section.display) {
32
+ return false;
33
+ }
34
+ if (section.type === 'CUSTOM' && mode !== 'EDIT') {
35
+ var deviceKey = device === 'DESKTOP'
36
+ ? 'CB_CONTENT_PROP_VISIBILITY_SPEC_DESKTOP'
37
+ : 'CB_CONTENT_PROP_VISIBILITY_SPEC_MOBILEWEB';
38
+ var isVisible = (_a = section.jsonProperties) === null || _a === void 0 ? void 0 : _a.data.CB_CONTENT_PROP_VISIBILITY[deviceKey];
39
+ return isVisible;
40
+ }
41
+ return true;
42
+ })
30
43
  .sort(function (a, b) { return a.order - b.order; });
31
44
  var iframeSection = filteredSortedSection.find(function (section) { return section.manifest.schema === 'EXP_IFRAME' && section.display; });
32
45
  return ((0, jsx_runtime_1.jsxs)(dynamicLayoutContext_1.dynamicLayoutContext.Provider, __assign({ value: {
package/dist/src/sub/DynamicLayout/pagesPreviewMock.js CHANGED
@@ -137,6 +137,123 @@ exports.sampleCustomsection1 = {
137
137
  queryableTapSrc: 'N/A',
138
138
  updatedAt: '2023-08-06T13:30:49'
139
139
  },
140
+ {
141
+ availablePlugins: [],
142
+ componentBlockCode: 'CB_TEXT',
143
+ componentBlockType: 'GENERAL',
144
+ dynamicLayoutSectionId: 18661,
145
+ id: 3599,
146
+ insertedAt: '2023-08-06T13:30:47',
147
+ jsonProperties: {
148
+ currentVersion: '2023-08-03',
149
+ data: {
150
+ CB_CONTENT_PROP_CLINK: {
151
+ CB_CONTENT_PROP_CLINK_SPEC_INTERNALSRC: 'https://publ.co',
152
+ CB_CONTENT_PROP_CLINK_SPEC_NEWTAB: true,
153
+ CB_CONTENT_PROP_CLINK_SPEC_SRC: 'https://publ.co',
154
+ CB_CONTENT_PROP_CLINK_SPEC_TYPE: 'DISABLED'
155
+ },
156
+ CB_CONTENT_PROP_HOVER: {
157
+ CB_CONTENT_PROP_HOVER_SPEC_MUSE: true
158
+ },
159
+ CB_CONTENT_PROP_TEXT: {
160
+ CB_CONTENT_PROP_TEXT_SPEC_TEXT: '{"scrollId": "airpods", "totalImages": 64, "baseURL": "https://www.apple.com/105/media/us/airpods-pro/2022/d2deeb8e-83eb-48ea-9721-f567cf0fffa8/anim/hero/medium", "type": "png", "startShowingImages": 0,"endShowingImages": 1000}'
161
+ },
162
+ CB_CONTENT_PROP_VISIBILITY: {
163
+ CB_CONTENT_PROP_VISIBILITY_SPEC_DESKTOP: true,
164
+ CB_CONTENT_PROP_VISIBILITY_SPEC_MOBILEWEB: true
165
+ },
166
+ CB_EFFECT_PROP_ENTANIM: {
167
+ CB_EFFECT_PROP_ENTANIM_SPEC_TYPE: 'SLIDEINLEFT',
168
+ 'CB_EFFECT_PROP_ENTANIM_SPEC_TYPE:MOBILE': 'HEARTBEAT',
169
+ CB_EFFECT_PROP_ENTANIM_SPEC_DURATION: 1,
170
+ 'CB_EFFECT_PROP_ENTANIM_SPEC_DURATION:MOBILE': null,
171
+ CB_EFFECT_PROP_ENTANIM_SPEC_REPEAT: 1,
172
+ 'CB_EFFECT_PROP_ENTANIM_SPEC_REPEAT:MOBILE': null,
173
+ CB_EFFECT_PROP_ENTANIM_SPEC_TFUNC: 'EASEINOUT',
174
+ 'CB_EFFECT_PROP_ENTANIM_SPEC_TFUNC:MOBILE': null
175
+ },
176
+ CB_EFFECT_PROP_HOVERANIM: {
177
+ CB_EFFECT_PROP_HOVERANIM_SPEC_DURATION: 0.7,
178
+ 'CB_EFFECT_PROP_HOVERANIM_SPEC_DURATION:MOBILE': null,
179
+ CB_EFFECT_PROP_HOVERANIM_SPEC_REPEAT: 1,
180
+ 'CB_EFFECT_PROP_HOVERANIM_SPEC_REPEAT:MOBILE': null,
181
+ CB_EFFECT_PROP_HOVERANIM_SPEC_TFUNC: 'EASEINOUT',
182
+ 'CB_EFFECT_PROP_HOVERANIM_SPEC_TFUNC:MOBILE': null,
183
+ CB_EFFECT_PROP_HOVERANIM_SPEC_TYPE: 'NONE',
184
+ 'CB_EFFECT_PROP_HOVERANIM_SPEC_TYPE:MOBILE': null
185
+ },
186
+ CB_LAYOUT_PROP_PADDING: {
187
+ CB_LAYOUT_PROP_PADDING_SPEC_FIX: true,
188
+ 'CB_LAYOUT_PROP_PADDING_SPEC_FIX:MOBILE': null,
189
+ CB_LAYOUT_PROP_PADDING_SPEC_PADDING: {
190
+ bottom: 0,
191
+ left: 0,
192
+ right: 0,
193
+ top: 0
194
+ },
195
+ 'CB_LAYOUT_PROP_PADDING_SPEC_PADDING:MOBILE': null
196
+ },
197
+ CB_PLACEMENT_PROP_PLACEMENT: {
198
+ CB_PLACEMENT_PROP_PLACEMENT_SPEC_COLS: 5,
199
+ 'CB_PLACEMENT_PROP_PLACEMENT_SPEC_COLS:MOBILE': 8,
200
+ CB_PLACEMENT_PROP_PLACEMENT_SPEC_ROWS: 3,
201
+ 'CB_PLACEMENT_PROP_PLACEMENT_SPEC_ROWS:MOBILE': 4,
202
+ CB_PLACEMENT_PROP_PLACEMENT_SPEC_STARTX: 1,
203
+ 'CB_PLACEMENT_PROP_PLACEMENT_SPEC_STARTX:MOBILE': 1,
204
+ CB_PLACEMENT_PROP_PLACEMENT_SPEC_STARTY: 0,
205
+ 'CB_PLACEMENT_PROP_PLACEMENT_SPEC_STARTY:MOBILE': 1,
206
+ CB_PLACEMENT_PROP_PLACEMENT_SPEC_ZINDEX: 9999,
207
+ 'CB_PLACEMENT_PROP_PLACEMENT_SPEC_ZINDEX:MOBILE': 9999
208
+ },
209
+ CB_STYLE_PROP_OPACITY: {
210
+ CB_STYLE_PROP_OPACITY_SPEC_OPACITY: 100,
211
+ 'CB_STYLE_PROP_OPACITY_SPEC_OPACITY:HOVER': null,
212
+ 'CB_STYLE_PROP_OPACITY_SPEC_OPACITY:MOBILE': null,
213
+ 'CB_STYLE_PROP_OPACITY_SPEC_OPACITY:MOBILE:HOVER': null
214
+ },
215
+ CB_STYLE_PROP_TEXT: {
216
+ CB_STYLE_PROP_TEXT_SPEC_COLOR: '#333333FF',
217
+ 'CB_STYLE_PROP_TEXT_SPEC_COLOR:HOVER': null,
218
+ 'CB_STYLE_PROP_TEXT_SPEC_COLOR:MOBILE': null,
219
+ 'CB_STYLE_PROP_TEXT_SPEC_COLOR:MOBILE:HOVER': null,
220
+ CB_STYLE_PROP_TEXT_SPEC_HORIZONTAL: 'CENTER',
221
+ 'CB_STYLE_PROP_TEXT_SPEC_HORIZONTAL:HOVER': null,
222
+ 'CB_STYLE_PROP_TEXT_SPEC_HORIZONTAL:MOBILE': null,
223
+ 'CB_STYLE_PROP_TEXT_SPEC_HORIZONTAL:MOBILE:HOVER': null,
224
+ CB_STYLE_PROP_TEXT_SPEC_LETTERSPACING: 0,
225
+ 'CB_STYLE_PROP_TEXT_SPEC_LETTERSPACING:HOVER': null,
226
+ 'CB_STYLE_PROP_TEXT_SPEC_LETTERSPACING:MOBILE': null,
227
+ 'CB_STYLE_PROP_TEXT_SPEC_LETTERSPACING:MOBILE:HOVER': null,
228
+ CB_STYLE_PROP_TEXT_SPEC_LINEHEIGHT: 130,
229
+ 'CB_STYLE_PROP_TEXT_SPEC_LINEHEIGHT:HOVER': null,
230
+ 'CB_STYLE_PROP_TEXT_SPEC_LINEHEIGHT:MOBILE': null,
231
+ 'CB_STYLE_PROP_TEXT_SPEC_LINEHEIGHT:MOBILE:HOVER': null,
232
+ CB_STYLE_PROP_TEXT_SPEC_SIZE: 36,
233
+ 'CB_STYLE_PROP_TEXT_SPEC_SIZE:HOVER': null,
234
+ 'CB_STYLE_PROP_TEXT_SPEC_SIZE:MOBILE': null,
235
+ 'CB_STYLE_PROP_TEXT_SPEC_SIZE:MOBILE:HOVER': null,
236
+ CB_STYLE_PROP_TEXT_SPEC_TYPEFACE: 'GOOGLE:Source Serif 4',
237
+ 'CB_STYLE_PROP_TEXT_SPEC_TYPEFACE:HOVER': 'GOOGLE:Lobster',
238
+ 'CB_STYLE_PROP_TEXT_SPEC_TYPEFACE:MOBILE': null,
239
+ 'CB_STYLE_PROP_TEXT_SPEC_TYPEFACE:MOBILE:HOVER': null,
240
+ CB_STYLE_PROP_TEXT_SPEC_VERTICAL: 'MIDDLE',
241
+ 'CB_STYLE_PROP_TEXT_SPEC_VERTICAL:HOVER': null,
242
+ 'CB_STYLE_PROP_TEXT_SPEC_VERTICAL:MOBILE': null,
243
+ 'CB_STYLE_PROP_TEXT_SPEC_VERTICAL:MOBILE:HOVER': null,
244
+ CB_STYLE_PROP_TEXT_SPEC_WEIGHT: 700,
245
+ 'CB_STYLE_PROP_TEXT_SPEC_WEIGHT:HOVER': null,
246
+ 'CB_STYLE_PROP_TEXT_SPEC_WEIGHT:MOBILE': null,
247
+ 'CB_STYLE_PROP_TEXT_SPEC_WEIGHT:MOBILE:HOVER': null
248
+ }
249
+ },
250
+ minVersion: '2023-08-03',
251
+ version: '2023-08-03'
252
+ },
253
+ queryableDefinitionPreset: 'N/A',
254
+ queryableTapSrc: 'N/A',
255
+ updatedAt: '2023-08-06T13:30:49'
256
+ },
140
257
  {
141
258
  availablePlugins: [],
142
259
  componentBlockCode: 'CB_BTN',
package/dist/src/sub/DynamicLayout/sectionActionTypes.d.ts CHANGED
@@ -8,14 +8,6 @@ type ActionHandlerPayload = {
8
8
  event: React.SyntheticEvent<HTMLIFrameElement, Event>;
9
9
  multiPurposeUrl: string;
10
10
  };
11
- '@CUSTOMSECTION/CB_DRAG_START': {
12
- layout: Layout;
13
- prev?: LayoutItem;
14
- item?: LayoutItem;
15
- placeholder?: LayoutItem;
16
- e?: ResizeEventType;
17
- node?: HTMLElement;
18
- };
19
11
  '@CUSTOMSECTION/CB_DRAG_STOP': {
20
12
  layout: Layout;
21
13
  prev?: LayoutItem;