pds-dev-kit-web-test 2.7.489 → 2.7.491
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.
- package/dist/src/common/assets/icons/fill/Plugin.d.ts +4 -0
- package/dist/src/common/assets/icons/fill/Plugin.js +30 -0
- package/dist/src/common/assets/icons/fill/index.d.ts +1 -0
- package/dist/src/common/assets/icons/fill/index.js +2 -0
- package/dist/src/common/assets/icons/line/Plugin.d.ts +4 -0
- package/dist/src/common/assets/icons/line/Plugin.js +30 -0
- package/dist/src/common/assets/icons/line/index.d.ts +1 -0
- package/dist/src/common/assets/icons/line/index.js +2 -0
- package/dist/src/common/styles/colorSet/UIColor.json +3 -1
- package/dist/src/common/styles/colorSet/index.d.ts +925 -923
- package/dist/src/common/styles/colorSet/index.js +3 -3
- package/dist/src/common/styles/colorSet/ui-type.d.ts +2 -0
- package/dist/src/desktop/components/BoxItem/BoxItem.d.ts +1 -1
- package/dist/src/desktop/components/BoxItem/BoxItem.js +23 -11
- package/dist/src/desktop/components/ReactionButton/ReactionButton.js +1 -1
- package/dist/src/desktop/components/UserDesktopTabBar/UserDesktopTabBar.d.ts +1 -1
- package/dist/src/desktop/components/UserDesktopTabBar/UserDesktopTabBar.js +13 -3
- package/dist/src/mobile/components/BoxItem/BoxItem.d.ts +1 -1
- package/dist/src/mobile/components/BoxItem/BoxItem.js +23 -11
- package/dist/src/mobile/components/ReactionButton/ReactionButton.js +1 -1
- package/dist/src/sub/DynamicLayout/CompositionRenderer/Composition.js +0 -1
- package/dist/src/sub/DynamicLayout/CompositionRenderer/createCompositions.js +6 -8
- package/dist/src/sub/DynamicLayout/sections/CustomSection/components/ComponentBlock/componentBlocks/ContentsCarousel/ContentsCarousel.js +5 -7
- package/dist/src/sub/DynamicLayout/sections/CustomSection/components/ComponentBlock/componentBlocks/ContentsList/ContentsList.js +13 -15
- package/dist/src/sub/DynamicLayout/sections/CustomSection/components/ComponentBlock/componentBlocks/SlideBanner/SlideBanner.js +5 -10
- package/dist/src/sub/DynamicLayout/sections/CustomSection/util/parsePlacement.js +2 -1
- package/package.json +1 -1
- package/release-note.md +2 -2
|
@@ -5,13 +5,13 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
|
|
|
5
5
|
Object.defineProperty(exports, "__esModule", { value: true });
|
|
6
6
|
/* eslint-disable import/order */
|
|
7
7
|
var SemanticColor_json_1 = __importDefault(require("./SemanticColor.json"));
|
|
8
|
+
var PaletteColor_Dark_json_1 = __importDefault(require("./PaletteColor_Dark.json"));
|
|
8
9
|
var PaletteColor_light_json_1 = __importDefault(require("./PaletteColor_light.json"));
|
|
9
10
|
var UIColor_json_1 = __importDefault(require("./UIColor.json"));
|
|
10
|
-
var PaletteColor_Dark_json_1 = __importDefault(require("./PaletteColor_Dark.json"));
|
|
11
11
|
var colorSet = {
|
|
12
12
|
SemanticColor: SemanticColor_json_1.default,
|
|
13
|
+
PaletteColor_Dark: PaletteColor_Dark_json_1.default,
|
|
13
14
|
PaletteColor_light: PaletteColor_light_json_1.default,
|
|
14
|
-
UIColor: UIColor_json_1.default
|
|
15
|
-
PaletteColor_Dark: PaletteColor_Dark_json_1.default
|
|
15
|
+
UIColor: UIColor_json_1.default
|
|
16
16
|
};
|
|
17
17
|
exports.default = colorSet;
|
|
@@ -3,7 +3,7 @@ import type { PDSIconType, PDSTextType, UiColors } from '../../../common/types';
|
|
|
3
3
|
type PaddingSpacingType = 'none' | keyof typeof paddingSpacing;
|
|
4
4
|
export type BoxItemProps = {
|
|
5
5
|
selectionMode?: 'none' | 'use';
|
|
6
|
-
state?: 'normal' | 'disabled';
|
|
6
|
+
state?: 'normal' | 'disabled' | 'read_only';
|
|
7
7
|
checkboxMode?: 'none' | 'use';
|
|
8
8
|
checkboxState?: 'checked' | 'unchecked' | 'indeterminate';
|
|
9
9
|
indicatorMode?: 'none' | 'use';
|
|
@@ -44,7 +44,7 @@ var paddingSpacing = {
|
|
|
44
44
|
function BoxItem(_a) {
|
|
45
45
|
var _b = _a.selectionMode, selectionMode = _b === void 0 ? 'none' : _b, _c = _a.checkboxMode, checkboxMode = _c === void 0 ? 'none' : _c, _d = _a.checkboxState, checkboxState = _d === void 0 ? 'unchecked' : _d, _e = _a.indicatorMode, indicatorMode = _e === void 0 ? 'none' : _e, _f = _a.state, state = _f === void 0 ? 'normal' : _f, _g = _a.selectState, selectState = _g === void 0 ? 'unselected' : _g, titleText = _a.titleText, titleFontSize = _a.titleFontSize, _h = _a.titleTextLineLimit, titleTextLineLimit = _h === void 0 ? 2 : _h, _j = _a.titleTextColorKey, titleTextColorKey = _j === void 0 ? 'ui_cpnt_textlabel_sys_primary' : _j, _k = _a.titleTextWordBreak, titleTextWordBreak = _k === void 0 ? 'normal' : _k, descText = _a.descText, _l = _a.descTextColorKey, descTextColorKey = _l === void 0 ? 'ui_cpnt_textlabel_sys_secondary' : _l, _m = _a.descTextWordBreak, descTextWordBreak = _m === void 0 ? 'normal' : _m, _o = _a.descLineLimit, descLineLimit = _o === void 0 ? 2 : _o, _p = _a.imageMode, imageMode = _p === void 0 ? 'none' : _p, _q = _a.imageShapeType, imageShapeType = _q === void 0 ? 'round' : _q, imageSrc = _a.imageSrc, imageWidth = _a.imageWidth, _r = _a.imageRatio, imageRatio = _r === void 0 ? '1_1' : _r, _s = _a.imageScaleType, imageScaleType = _s === void 0 ? 'cover' : _s, _t = _a.chipMode, chipMode = _t === void 0 ? 'none' : _t, chipText = _a.chipText, chipOverrideTextColorKey = _a.chipOverrideTextColorKey, chipOverrideBackgroundColorKey = _a.chipOverrideBackgroundColorKey, _u = _a.displayType, displayType = _u === void 0 ? 'none' : _u, iBtn1IconName = _a.iBtn1IconName, _v = _a.iBtn1IconFillType, iBtn1IconFillType = _v === void 0 ? 'line' : _v, iBtn1IconColorKey = _a.iBtn1IconColorKey, iBtn2IconName = _a.iBtn2IconName, _w = _a.iBtn2IconFillType, iBtn2IconFillType = _w === void 0 ? 'line' : _w, iBtn2IconColorKey = _a.iBtn2IconColorKey, iBtn3IconName = _a.iBtn3IconName, _x = _a.iBtn3IconFillType, iBtn3IconFillType = _x === void 0 ? 'line' : _x, iBtn3IconColorKey = _a.iBtn3IconColorKey, overrideBorderColorKey = _a.overrideBorderColorKey, _y = _a.paddingTop, paddingTop = _y === void 0 ? 'spacing_d' : _y, _z = _a.paddingRight, paddingRight = _z === void 0 ? 'spacing_d' : _z, _0 = _a.paddingBottom, paddingBottom = _0 === void 0 ? 'spacing_d' : _0, _1 = _a.paddingLeft, paddingLeft = _1 === void 0 ? 'spacing_d' : _1, id = _a.id, onClick = _a.onClick, onClickIBtn1 = _a.onClickIBtn1, onClickIBtn2 = _a.onClickIBtn2, onClickIBtn3 = _a.onClickIBtn3;
|
|
46
46
|
var handleClick = function () {
|
|
47
|
-
if (state === 'disabled') {
|
|
47
|
+
if (state === 'disabled' || state === 'read_only') {
|
|
48
48
|
return;
|
|
49
49
|
}
|
|
50
50
|
if (onClick) {
|
|
@@ -53,7 +53,7 @@ function BoxItem(_a) {
|
|
|
53
53
|
};
|
|
54
54
|
var handleIBtn1Click = function (e) {
|
|
55
55
|
e.stopPropagation();
|
|
56
|
-
if (state === 'disabled') {
|
|
56
|
+
if (state === 'disabled' || state === 'read_only') {
|
|
57
57
|
return;
|
|
58
58
|
}
|
|
59
59
|
if (onClickIBtn1) {
|
|
@@ -62,7 +62,7 @@ function BoxItem(_a) {
|
|
|
62
62
|
};
|
|
63
63
|
var handleIBtn2Click = function (e) {
|
|
64
64
|
e.stopPropagation();
|
|
65
|
-
if (state === 'disabled') {
|
|
65
|
+
if (state === 'disabled' || state === 'read_only') {
|
|
66
66
|
return;
|
|
67
67
|
}
|
|
68
68
|
if (onClickIBtn2) {
|
|
@@ -71,28 +71,40 @@ function BoxItem(_a) {
|
|
|
71
71
|
};
|
|
72
72
|
var handleIBtn3Click = function (e) {
|
|
73
73
|
e.stopPropagation();
|
|
74
|
-
if (state === 'disabled') {
|
|
74
|
+
if (state === 'disabled' || state === 'read_only') {
|
|
75
75
|
return;
|
|
76
76
|
}
|
|
77
77
|
if (onClickIBtn3) {
|
|
78
78
|
onClickIBtn3(id);
|
|
79
79
|
}
|
|
80
80
|
};
|
|
81
|
-
return ((0, jsx_runtime_1.jsx)(S_BoxItem, __assign({ "x-pds-name": "BoxItem", "x-pds-element-type": "component", "x-pds-device-type": "desktop", onClick: handleClick }, { children: (0, jsx_runtime_1.jsxs)(panels_1.ContentSheet, __assign({ shapeType: "round", radius: 16, width: "100%", height: "responsive", paddingTop: paddingTop, paddingRight: paddingRight, paddingBottom: paddingBottom, paddingLeft: paddingLeft, borderMode: "use", borderColorTheme: state === 'disabled'
|
|
81
|
+
return ((0, jsx_runtime_1.jsx)(S_BoxItem, __assign({ "x-pds-name": "BoxItem", "x-pds-element-type": "component", "x-pds-device-type": "desktop", onClick: handleClick }, { children: (0, jsx_runtime_1.jsxs)(panels_1.ContentSheet, __assign({ shapeType: "round", radius: 16, width: "100%", height: "responsive", paddingTop: paddingTop, paddingRight: paddingRight, paddingBottom: paddingBottom, paddingLeft: paddingLeft, borderMode: "use", borderColorTheme: state === 'disabled' || state === 'read_only'
|
|
82
|
+
? undefined
|
|
83
|
+
: selectState === 'selected'
|
|
84
|
+
? 'blue'
|
|
85
|
+
: undefined, overrideBorderColorKey: state === 'disabled'
|
|
82
86
|
? 'ui_cpnt_sheet_base'
|
|
83
87
|
: selectState === 'selected'
|
|
84
|
-
?
|
|
85
|
-
?
|
|
86
|
-
:
|
|
88
|
+
? state === 'read_only'
|
|
89
|
+
? 'ui_cpnt_sheet_border_04'
|
|
90
|
+
: overrideBorderColorKey
|
|
91
|
+
? overrideBorderColorKey
|
|
92
|
+
: undefined
|
|
87
93
|
: 'ui_cpnt_sheet_base', borderWidth: selectionMode === 'use' ? 2 : undefined, overrideCSS: {
|
|
88
94
|
display: 'flex',
|
|
89
95
|
flexDirection: 'row',
|
|
90
96
|
alignItems: 'center',
|
|
91
97
|
justifyContent: 'space-between',
|
|
92
98
|
maxWidth: '100%',
|
|
93
|
-
cursor: state === 'disabled'
|
|
94
|
-
|
|
95
|
-
|
|
99
|
+
cursor: state === 'disabled' || state === 'read_only'
|
|
100
|
+
? 'default'
|
|
101
|
+
: selectionMode === 'use'
|
|
102
|
+
? 'pointer'
|
|
103
|
+
: 'default'
|
|
104
|
+
} }, { children: [(0, jsx_runtime_1.jsxs)(LeftBox_1.LeftBox, __assign({ hasRightBox: displayType !== 'none' || chipMode === 'use' }, { children: [checkboxMode !== 'none' && ((0, jsx_runtime_1.jsx)(LeftBox_1.LeftBox.Checkbox, { checked: checkboxState === 'checked', isIndeterminate: checkboxState === 'indeterminate' })), imageMode === 'use' && ((0, jsx_runtime_1.jsx)(LeftBox_1.LeftBox.Image, { shape: imageShapeType, src: imageSrc, width: imageWidth, ratio: imageRatio, scaleType: imageScaleType })), (0, jsx_runtime_1.jsxs)(S_TextGroup, { children: [titleText && ((0, jsx_runtime_1.jsx)(index_1.D_TextLabel, { text: titleText, colorOverride: state === 'disabled' || state === 'read_only' ? undefined : titleTextColorKey, colorTheme: state === 'disabled' || state === 'read_only' ? 'sysTextTertiary' : undefined, styleTheme: titleFontSize, lineLimit: titleTextLineLimit, ellipsisMode: "use", wordBreak: titleTextWordBreak })), descText && ((0, jsx_runtime_1.jsx)(index_1.D_TextLabel, { text: descText, colorOverride: state === 'disabled' || state === 'read_only'
|
|
105
|
+
? 'ui_cpnt_textlabel_sys_secondary'
|
|
106
|
+
: descTextColorKey, lineLimit: descLineLimit, ellipsisMode: "use", styleTheme: "caption1Regular", wordBreak: descTextWordBreak }))] })] })), (0, jsx_runtime_1.jsxs)(S_RightBox, { children: [displayType !== 'none' ||
|
|
107
|
+
(chipMode === 'use' && (0, jsx_runtime_1.jsx)(components_1.Spacing, { size: "spacing_b", spacingType: "width" })), chipMode === 'use' && ((0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: (0, jsx_runtime_1.jsx)(Chip_1.Chip, { text: chipText, overrideBackgroundColorKey: chipOverrideBackgroundColorKey, displayType: "information", overrideTextColorKey: chipOverrideTextColorKey }) })), (0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [displayType === 'ibtn_amount1' && ((0, jsx_runtime_1.jsx)(index_1.D_IconButton, { iconName: iBtn1IconName || 'ic_arrow_right', baseSize: "medium", fillType: "fill", iconFillType: iBtn1IconFillType, iconColorKey: iBtn1IconColorKey, onClick: handleIBtn1Click, iconSize: 20, state: state === 'normal' ? 'normal' : 'disabled', baseColorKey: "ui_cpnt_button_fill_base_transparent", borderColorKey: "ui_cpnt_button_fill_base_transparent", shapeType: "rectangle" })), displayType === 'ibtn_amount2' && ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(index_1.D_IconButton, { iconName: iBtn2IconName || 'ic_arrow_right', fillType: "fill", iconFillType: iBtn2IconFillType, iconColorKey: iBtn2IconColorKey, state: state === 'normal' ? 'normal' : 'disabled', onClick: handleIBtn2Click, iconSize: 20, baseColorKey: "ui_cpnt_button_fill_base_transparent", borderColorKey: "ui_cpnt_button_fill_base_transparent", baseSize: "medium", shapeType: "rectangle" }), (0, jsx_runtime_1.jsx)(index_1.D_IconButton, { iconName: iBtn1IconName || 'ic_arrow_right', fillType: "fill", iconFillType: iBtn1IconFillType, iconColorKey: iBtn1IconColorKey, onClick: handleIBtn1Click, state: state === 'normal' ? 'normal' : 'disabled', iconSize: 20, baseColorKey: "ui_cpnt_button_fill_base_transparent", borderColorKey: "ui_cpnt_button_fill_base_transparent", baseSize: "medium", shapeType: "rectangle" })] })), displayType === 'ibtn_amount3' && ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(index_1.D_IconButton, { iconName: iBtn3IconName || 'ic_arrow_right', fillType: "fill", iconFillType: iBtn3IconFillType, iconColorKey: iBtn3IconColorKey, state: state === 'normal' ? 'normal' : 'disabled', onClick: handleIBtn3Click, iconSize: 20, baseColorKey: "ui_cpnt_button_fill_base_transparent", borderColorKey: "ui_cpnt_button_fill_base_transparent", baseSize: "medium", shapeType: "rectangle" }), (0, jsx_runtime_1.jsx)(index_1.D_IconButton, { iconName: iBtn2IconName || 'ic_arrow_right', fillType: "fill", iconFillType: iBtn2IconFillType, iconColorKey: iBtn2IconColorKey, state: state === 'normal' ? 'normal' : 'disabled', onClick: handleIBtn2Click, iconSize: 20, baseColorKey: "ui_cpnt_button_fill_base_transparent", borderColorKey: "ui_cpnt_button_fill_base_transparent", baseSize: "medium", shapeType: "rectangle" }), (0, jsx_runtime_1.jsx)(index_1.D_IconButton, { iconName: iBtn1IconName || 'ic_arrow_right', fillType: "fill", iconFillType: iBtn1IconFillType, iconColorKey: iBtn1IconColorKey, state: state === 'normal' ? 'normal' : 'disabled', onClick: handleIBtn1Click, iconSize: 20, baseColorKey: "ui_cpnt_button_fill_base_transparent", borderColorKey: "ui_cpnt_button_fill_base_transparent", baseSize: "medium", shapeType: "rectangle" })] }))] }), indicatorMode === 'use' && ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(components_1.Spacing, { size: "spacing_b", spacingType: "width" }), (0, jsx_runtime_1.jsx)(components_1.Icon, { iconName: "ic_arrow_right", fillType: "line", size: 20, colorKey: "ui_cpnt_icon_sys_grey_01" })] }))] })] })) })));
|
|
96
108
|
}
|
|
97
109
|
var S_BoxItem = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n align-items: center;\n display: flex;\n flex-direction: row;\n gap: ", ";\n width: 100%;\n"], ["\n align-items: center;\n display: flex;\n flex-direction: row;\n gap: ", ";\n width: 100%;\n"])), function (_a) {
|
|
98
110
|
var theme = _a.theme;
|
|
@@ -98,7 +98,7 @@ function ReactionButton(_a) {
|
|
|
98
98
|
return value;
|
|
99
99
|
return (0, numberHelper_1.formatCompactNumber)(value);
|
|
100
100
|
};
|
|
101
|
-
return ((0, jsx_runtime_1.jsxs)(S_ReactionButton, __assign({ "x-pds-name": "ReactionButton", "x-pds-element-type": "component", "x-pds-device-type": "desktop", onClick: handleClick, onMouseDown: handleMouseDown }, { children: [(0, jsx_runtime_1.jsx)(hybrid_1.Spacing, { size: "spacing_b", spacingType: "width" }), (0, jsx_runtime_1.jsx)(hybrid_1.Icon, { size: 20, fillType: "fill", iconName: iconName, colorKey: colorTheme === 'none' ? IconColorByStatus() : IconColorByColorByTheme() }), displayType === 'icon_text' && ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(hybrid_1.Spacing, { size: "spacing_b", spacingType: "width" }), (0, jsx_runtime_1.jsx)(TextLabel_1.TextLabel, { text: convertTextFormatHelper(text), styleTheme: "body2Bold", singleLineMode: "use", colorTheme: TextLabelColorBySelect(), colorOverride: TextLabelColorByByColorTheme() })] })), (0, jsx_runtime_1.jsx)(hybrid_1.Spacing, { size: "spacing_b", spacingType: "width" })] })));
|
|
101
|
+
return ((0, jsx_runtime_1.jsxs)(S_ReactionButton, __assign({ "x-pds-name": "ReactionButton", "x-pds-element-type": "component", "x-pds-device-type": "desktop", type: "button", onClick: handleClick, onMouseDown: handleMouseDown }, { children: [(0, jsx_runtime_1.jsx)(hybrid_1.Spacing, { size: "spacing_b", spacingType: "width" }), (0, jsx_runtime_1.jsx)(hybrid_1.Icon, { size: 20, fillType: "fill", iconName: iconName, colorKey: colorTheme === 'none' ? IconColorByStatus() : IconColorByColorByTheme() }), displayType === 'icon_text' && ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(hybrid_1.Spacing, { size: "spacing_b", spacingType: "width" }), (0, jsx_runtime_1.jsx)(TextLabel_1.TextLabel, { text: convertTextFormatHelper(text), styleTheme: "body2Bold", singleLineMode: "use", colorTheme: TextLabelColorBySelect(), colorOverride: TextLabelColorByByColorTheme() })] })), (0, jsx_runtime_1.jsx)(hybrid_1.Spacing, { size: "spacing_b", spacingType: "width" })] })));
|
|
102
102
|
}
|
|
103
103
|
var ReactionButtonStyle = (0, styled_components_1.css)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n align-items: center;\n background-color: transparent;\n border: none;\n border-radius: 8px;\n box-sizing: border-box;\n cursor: pointer;\n display: flex;\n height: 32px;\n justify-content: center;\n padding: 0;\n\n ", "\n\n &:hover:enabled {\n background-color: ", ";\n }\n\n &:active:enabled {\n background-color: ", ";\n }\n"], ["\n align-items: center;\n background-color: transparent;\n border: none;\n border-radius: 8px;\n box-sizing: border-box;\n cursor: pointer;\n display: flex;\n height: 32px;\n justify-content: center;\n padding: 0;\n\n ", "\n\n &:hover:enabled {\n background-color: ", ";\n }\n\n &:active:enabled {\n background-color: ", ";\n }\n"])), transitionStyle_1.ButtonTransition, function (_a) {
|
|
104
104
|
var theme = _a.theme;
|
|
@@ -4,7 +4,7 @@ type TextObj = {
|
|
|
4
4
|
path: string;
|
|
5
5
|
title: PDSTextType;
|
|
6
6
|
};
|
|
7
|
-
type StyleTheme = 'main' | 'content' | 'content2';
|
|
7
|
+
type StyleTheme = 'main' | 'content' | 'content2' | 'content3';
|
|
8
8
|
type UserDesktopTabBarProps = {
|
|
9
9
|
itemArray?: PDSTabItemOption[];
|
|
10
10
|
styleTheme?: StyleTheme;
|
|
@@ -59,6 +59,9 @@ function UserDesktopTabBar(_a) {
|
|
|
59
59
|
if (styleTheme === 'content2') {
|
|
60
60
|
return ((0, jsx_runtime_1.jsx)(S_TabWrapper, __assign({ isActive: item.isActive, styleTheme: "content2", 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: "leadParaBold", colorTheme: item.isActive ? 'usrTextBrandPrimary' : 'sysTextTertiary', singleLineMode: "use" }) }), index));
|
|
61
61
|
}
|
|
62
|
+
if (styleTheme === 'content3') {
|
|
63
|
+
return ((0, jsx_runtime_1.jsx)(S_TabWrapper, __assign({ isActive: item.isActive, styleTheme: "content3", 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' : 'sysTextTertiary', singleLineMode: "use" }) }), index));
|
|
64
|
+
}
|
|
62
65
|
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));
|
|
63
66
|
}) })));
|
|
64
67
|
}
|
|
@@ -88,6 +91,8 @@ var S_TabWrapper = styled_components_1.default.div(templateObject_2 || (template
|
|
|
88
91
|
return contentStyle;
|
|
89
92
|
case 'content2':
|
|
90
93
|
return content2Style;
|
|
94
|
+
case 'content3':
|
|
95
|
+
return content3Style;
|
|
91
96
|
default:
|
|
92
97
|
return mainStyle;
|
|
93
98
|
}
|
|
@@ -137,7 +142,11 @@ var content2Style = (0, styled_components_1.css)(templateObject_5 || (templateOb
|
|
|
137
142
|
var isActive = _a.isActive;
|
|
138
143
|
return isActive && "border-radius: 24px;";
|
|
139
144
|
});
|
|
140
|
-
var
|
|
145
|
+
var content3Style = (0, styled_components_1.css)(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n align-items: center;\n cursor: pointer;\n display: flex;\n height: 48px;\n margin-right: ", ";\n position: relative;\n\n &:last-child {\n margin-right: 0;\n }\n"], ["\n align-items: center;\n cursor: pointer;\n display: flex;\n height: 48px;\n margin-right: ", ";\n position: relative;\n\n &:last-child {\n margin-right: 0;\n }\n"])), function (_a) {
|
|
146
|
+
var theme = _a.theme;
|
|
147
|
+
return theme.spacing.spacingE;
|
|
148
|
+
});
|
|
149
|
+
var S_TabBar = styled_components_1.default.div(templateObject_7 || (templateObject_7 = __makeTemplateObject(["\n align-items: ", ";\n background-color: ", ";\n border-bottom: ", ";\n box-sizing: border-box;\n display: flex;\n flex-direction: row;\n height: ", ";\n justify-content: center;\n"], ["\n align-items: ", ";\n background-color: ", ";\n border-bottom: ", ";\n box-sizing: border-box;\n display: flex;\n flex-direction: row;\n height: ", ";\n justify-content: center;\n"])), function (_a) {
|
|
141
150
|
var styleTheme = _a.styleTheme;
|
|
142
151
|
return styleTheme === 'content2' && 'center';
|
|
143
152
|
}, function (_a) {
|
|
@@ -145,7 +154,7 @@ var S_TabBar = styled_components_1.default.div(templateObject_6 || (templateObje
|
|
|
145
154
|
return theme.ui_cpnt_tabbar_base_area;
|
|
146
155
|
}, function (_a) {
|
|
147
156
|
var styleTheme = _a.styleTheme, theme = _a.theme;
|
|
148
|
-
return
|
|
157
|
+
return !['content2', 'content3'].includes(styleTheme) && "1px solid ".concat(theme.ui_cpnt_divider);
|
|
149
158
|
}, function (_a) {
|
|
150
159
|
var styleTheme = _a.styleTheme;
|
|
151
160
|
switch (styleTheme) {
|
|
@@ -153,9 +162,10 @@ var S_TabBar = styled_components_1.default.div(templateObject_6 || (templateObje
|
|
|
153
162
|
return '64px';
|
|
154
163
|
case 'content2':
|
|
155
164
|
return '96px';
|
|
165
|
+
case 'content3':
|
|
156
166
|
default:
|
|
157
167
|
return '48px';
|
|
158
168
|
}
|
|
159
169
|
});
|
|
160
170
|
exports.default = UserDesktopTabBar;
|
|
161
|
-
var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6;
|
|
171
|
+
var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6, templateObject_7;
|
|
@@ -3,7 +3,7 @@ import type { PDSIconType, PDSTextType, UiColors } from '../../../common/types';
|
|
|
3
3
|
type PaddingSpacingType = 'none' | keyof typeof paddingSpacing;
|
|
4
4
|
export type BoxItemProps = {
|
|
5
5
|
selectionMode?: 'none' | 'use';
|
|
6
|
-
state?: 'normal' | 'disabled';
|
|
6
|
+
state?: 'normal' | 'disabled' | 'read_only';
|
|
7
7
|
checkboxMode?: 'none' | 'use';
|
|
8
8
|
checkboxState?: 'checked' | 'unchecked' | 'indeterminate';
|
|
9
9
|
indicatorMode?: 'none' | 'use';
|
|
@@ -44,7 +44,7 @@ var paddingSpacing = {
|
|
|
44
44
|
function BoxItem(_a) {
|
|
45
45
|
var _b = _a.selectionMode, selectionMode = _b === void 0 ? 'none' : _b, _c = _a.checkboxMode, checkboxMode = _c === void 0 ? 'none' : _c, _d = _a.checkboxState, checkboxState = _d === void 0 ? 'unchecked' : _d, _e = _a.indicatorMode, indicatorMode = _e === void 0 ? 'none' : _e, _f = _a.state, state = _f === void 0 ? 'normal' : _f, _g = _a.selectState, selectState = _g === void 0 ? 'unselected' : _g, titleText = _a.titleText, titleFontSize = _a.titleFontSize, _h = _a.titleTextLineLimit, titleTextLineLimit = _h === void 0 ? 2 : _h, _j = _a.titleTextColorKey, titleTextColorKey = _j === void 0 ? 'ui_cpnt_textlabel_sys_primary' : _j, _k = _a.titleTextWordBreak, titleTextWordBreak = _k === void 0 ? 'normal' : _k, descText = _a.descText, _l = _a.descTextColorKey, descTextColorKey = _l === void 0 ? 'ui_cpnt_textlabel_sys_secondary' : _l, _m = _a.descLineLimit, descLineLimit = _m === void 0 ? 2 : _m, _o = _a.descTextWordBreak, descTextWordBreak = _o === void 0 ? 'normal' : _o, _p = _a.imageMode, imageMode = _p === void 0 ? 'none' : _p, _q = _a.imageShapeType, imageShapeType = _q === void 0 ? 'round' : _q, imageSrc = _a.imageSrc, imageWidth = _a.imageWidth, _r = _a.imageRatio, imageRatio = _r === void 0 ? '1_1' : _r, _s = _a.imageScaleType, imageScaleType = _s === void 0 ? 'cover' : _s, _t = _a.chipMode, chipMode = _t === void 0 ? 'none' : _t, chipText = _a.chipText, chipOverrideTextColorKey = _a.chipOverrideTextColorKey, chipOverrideBackgroundColorKey = _a.chipOverrideBackgroundColorKey, _u = _a.displayType, displayType = _u === void 0 ? 'none' : _u, iBtn1IconName = _a.iBtn1IconName, _v = _a.iBtn1IconFillType, iBtn1IconFillType = _v === void 0 ? 'line' : _v, iBtn1IconColorKey = _a.iBtn1IconColorKey, iBtn2IconName = _a.iBtn2IconName, _w = _a.iBtn2IconFillType, iBtn2IconFillType = _w === void 0 ? 'line' : _w, iBtn2IconColorKey = _a.iBtn2IconColorKey, iBtn3IconName = _a.iBtn3IconName, overrideBorderColorKey = _a.overrideBorderColorKey, _x = _a.iBtn3IconFillType, iBtn3IconFillType = _x === void 0 ? 'line' : _x, iBtn3IconColorKey = _a.iBtn3IconColorKey, _y = _a.paddingTop, paddingTop = _y === void 0 ? 'spacing_d' : _y, _z = _a.paddingRight, paddingRight = _z === void 0 ? 'spacing_d' : _z, _0 = _a.paddingBottom, paddingBottom = _0 === void 0 ? 'spacing_d' : _0, _1 = _a.paddingLeft, paddingLeft = _1 === void 0 ? 'spacing_d' : _1, id = _a.id, onClick = _a.onClick, onClickIBtn1 = _a.onClickIBtn1, onClickIBtn2 = _a.onClickIBtn2, onClickIBtn3 = _a.onClickIBtn3;
|
|
46
46
|
var handleClick = function () {
|
|
47
|
-
if (state === 'disabled') {
|
|
47
|
+
if (state === 'disabled' || state === 'read_only') {
|
|
48
48
|
return;
|
|
49
49
|
}
|
|
50
50
|
if (onClick) {
|
|
@@ -53,7 +53,7 @@ function BoxItem(_a) {
|
|
|
53
53
|
};
|
|
54
54
|
var handleIBtn1Click = function (e) {
|
|
55
55
|
e.stopPropagation();
|
|
56
|
-
if (state === 'disabled') {
|
|
56
|
+
if (state === 'disabled' || state === 'read_only') {
|
|
57
57
|
return;
|
|
58
58
|
}
|
|
59
59
|
if (onClickIBtn1) {
|
|
@@ -62,7 +62,7 @@ function BoxItem(_a) {
|
|
|
62
62
|
};
|
|
63
63
|
var handleIBtn2Click = function (e) {
|
|
64
64
|
e.stopPropagation();
|
|
65
|
-
if (state === 'disabled') {
|
|
65
|
+
if (state === 'disabled' || state === 'read_only') {
|
|
66
66
|
return;
|
|
67
67
|
}
|
|
68
68
|
if (onClickIBtn2) {
|
|
@@ -71,27 +71,39 @@ function BoxItem(_a) {
|
|
|
71
71
|
};
|
|
72
72
|
var handleIBtn3Click = function (e) {
|
|
73
73
|
e.stopPropagation();
|
|
74
|
-
if (state === 'disabled') {
|
|
74
|
+
if (state === 'disabled' || state === 'read_only') {
|
|
75
75
|
return;
|
|
76
76
|
}
|
|
77
77
|
if (onClickIBtn3) {
|
|
78
78
|
onClickIBtn3(id);
|
|
79
79
|
}
|
|
80
80
|
};
|
|
81
|
-
return ((0, jsx_runtime_1.jsx)(S_BoxItem, __assign({ "x-pds-name": "BoxItem", "x-pds-element-type": "component", "x-pds-device-type": "mobile", onClick: handleClick }, { children: (0, jsx_runtime_1.jsxs)(panels_1.ContentSheet, __assign({ shapeType: "round", radius: 16, width: "100%", height: "responsive", paddingTop: paddingTop, paddingRight: paddingRight, paddingBottom: paddingBottom, paddingLeft: paddingLeft, borderMode: "use", borderColorTheme: state === 'disabled'
|
|
81
|
+
return ((0, jsx_runtime_1.jsx)(S_BoxItem, __assign({ "x-pds-name": "BoxItem", "x-pds-element-type": "component", "x-pds-device-type": "mobile", onClick: handleClick }, { children: (0, jsx_runtime_1.jsxs)(panels_1.ContentSheet, __assign({ shapeType: "round", radius: 16, width: "100%", height: "responsive", paddingTop: paddingTop, paddingRight: paddingRight, paddingBottom: paddingBottom, paddingLeft: paddingLeft, borderMode: "use", borderColorTheme: state === 'disabled' || state === 'read_only'
|
|
82
|
+
? undefined
|
|
83
|
+
: selectState === 'selected'
|
|
84
|
+
? 'blue'
|
|
85
|
+
: undefined, overrideBorderColorKey: state === 'disabled'
|
|
82
86
|
? 'ui_cpnt_sheet_base'
|
|
83
87
|
: selectState === 'selected'
|
|
84
|
-
?
|
|
85
|
-
?
|
|
86
|
-
:
|
|
88
|
+
? state === 'read_only'
|
|
89
|
+
? 'ui_cpnt_sheet_border_04'
|
|
90
|
+
: overrideBorderColorKey
|
|
91
|
+
? overrideBorderColorKey
|
|
92
|
+
: undefined
|
|
87
93
|
: 'ui_cpnt_sheet_base', borderWidth: selectionMode === 'use' ? 2 : undefined, overrideCSS: {
|
|
88
94
|
display: 'flex',
|
|
89
95
|
flexDirection: 'row',
|
|
90
96
|
alignItems: 'center',
|
|
91
97
|
justifyContent: 'space-between',
|
|
92
|
-
cursor: state === 'disabled'
|
|
93
|
-
|
|
94
|
-
|
|
98
|
+
cursor: state === 'disabled' || state === 'read_only'
|
|
99
|
+
? 'default'
|
|
100
|
+
: selectionMode === 'use'
|
|
101
|
+
? 'pointer'
|
|
102
|
+
: 'default'
|
|
103
|
+
} }, { children: [(0, jsx_runtime_1.jsxs)(LeftBox_1.LeftBox, __assign({ hasRightBox: displayType !== 'none' || chipMode === 'use' }, { children: [checkboxMode !== 'none' && ((0, jsx_runtime_1.jsx)(LeftBox_1.LeftBox.Checkbox, { checked: checkboxState === 'checked', isIndeterminate: checkboxState === 'indeterminate' })), imageMode === 'use' && ((0, jsx_runtime_1.jsx)(LeftBox_1.LeftBox.Image, { shape: imageShapeType, src: imageSrc, width: imageWidth, ratio: imageRatio, scaleType: imageScaleType })), (0, jsx_runtime_1.jsxs)(S_TextGroup, { children: [titleText && ((0, jsx_runtime_1.jsx)(index_1.M_TextLabel, { text: titleText, colorOverride: state === 'disabled' || state === 'read_only' ? undefined : titleTextColorKey, colorTheme: state === 'disabled' || state === 'read_only' ? 'sysTextTertiary' : undefined, styleTheme: titleFontSize, lineLimit: titleTextLineLimit, wordBreak: titleTextWordBreak, ellipsisMode: "use" })), descText && ((0, jsx_runtime_1.jsx)(index_1.M_TextLabel, { text: descText, colorOverride: state === 'disabled' || state === 'read_only'
|
|
104
|
+
? 'ui_cpnt_textlabel_sys_secondary'
|
|
105
|
+
: descTextColorKey, lineLimit: descLineLimit, wordBreak: descTextWordBreak, ellipsisMode: "use", styleTheme: "caption1Regular" }))] })] })), (0, jsx_runtime_1.jsxs)(S_RightBox, { children: [displayType !== 'none' ||
|
|
106
|
+
(chipMode === 'use' && (0, jsx_runtime_1.jsx)(components_1.Spacing, { size: "spacing_b", spacingType: "width" })), chipMode === 'use' && ((0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: (0, jsx_runtime_1.jsx)(Chip_1.Chip, { text: chipText, overrideBackgroundColorKey: chipOverrideBackgroundColorKey, displayType: "information", overrideTextColorKey: chipOverrideTextColorKey }) })), (0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [displayType === 'ibtn_amount1' && ((0, jsx_runtime_1.jsx)(index_1.M_IconButton, { iconName: iBtn1IconName || 'ic_arrow_right', baseSize: "medium", fillType: "fill", iconFillType: iBtn1IconFillType, iconColorKey: iBtn1IconColorKey, onClick: handleIBtn1Click, state: state === 'normal' ? 'normal' : 'disabled', iconSize: 20, baseColorKey: "ui_cpnt_button_fill_base_transparent", borderColorKey: "ui_cpnt_button_fill_base_transparent", shapeType: "rectangle" })), displayType === 'ibtn_amount2' && ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(index_1.M_IconButton, { iconName: iBtn2IconName || 'ic_arrow_right', fillType: "fill", iconFillType: iBtn2IconFillType, iconColorKey: iBtn2IconColorKey, onClick: handleIBtn2Click, state: state === 'normal' ? 'normal' : 'disabled', iconSize: 20, baseColorKey: "ui_cpnt_button_fill_base_transparent", borderColorKey: "ui_cpnt_button_fill_base_transparent", baseSize: "medium", shapeType: "rectangle" }), (0, jsx_runtime_1.jsx)(index_1.M_IconButton, { iconName: iBtn1IconName || 'ic_arrow_right', fillType: "fill", iconFillType: iBtn1IconFillType, iconColorKey: iBtn1IconColorKey, onClick: handleIBtn1Click, state: state === 'normal' ? 'normal' : 'disabled', iconSize: 20, baseColorKey: "ui_cpnt_button_fill_base_transparent", borderColorKey: "ui_cpnt_button_fill_base_transparent", baseSize: "medium", shapeType: "rectangle" })] })), displayType === 'ibtn_amount3' && ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(index_1.M_IconButton, { iconName: iBtn3IconName || 'ic_arrow_right', fillType: "fill", iconFillType: iBtn3IconFillType, iconColorKey: iBtn3IconColorKey, onClick: handleIBtn3Click, state: state === 'normal' ? 'normal' : 'disabled', iconSize: 20, baseColorKey: "ui_cpnt_button_fill_base_transparent", borderColorKey: "ui_cpnt_button_fill_base_transparent", baseSize: "medium", shapeType: "rectangle" }), (0, jsx_runtime_1.jsx)(index_1.M_IconButton, { iconName: iBtn2IconName || 'ic_arrow_right', fillType: "fill", iconFillType: iBtn2IconFillType, iconColorKey: iBtn2IconColorKey, onClick: handleIBtn2Click, state: state === 'normal' ? 'normal' : 'disabled', iconSize: 20, baseColorKey: "ui_cpnt_button_fill_base_transparent", borderColorKey: "ui_cpnt_button_fill_base_transparent", baseSize: "medium", shapeType: "rectangle" }), (0, jsx_runtime_1.jsx)(index_1.M_IconButton, { iconName: iBtn1IconName || 'ic_arrow_right', fillType: "fill", iconFillType: iBtn1IconFillType, iconColorKey: iBtn1IconColorKey, onClick: handleIBtn1Click, state: state === 'normal' ? 'normal' : 'disabled', iconSize: 20, baseColorKey: "ui_cpnt_button_fill_base_transparent", borderColorKey: "ui_cpnt_button_fill_base_transparent", baseSize: "medium", shapeType: "rectangle" })] }))] }), indicatorMode === 'use' && ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(components_1.Spacing, { size: "spacing_b", spacingType: "width" }), (0, jsx_runtime_1.jsx)(components_1.Icon, { iconName: "ic_arrow_right", fillType: "line", size: 20, colorKey: "ui_cpnt_icon_sys_grey_01" })] }))] })] })) })));
|
|
95
107
|
}
|
|
96
108
|
var S_BoxItem = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n align-items: center;\n display: flex;\n flex-direction: row;\n gap: ", ";\n width: 100%;\n"], ["\n align-items: center;\n display: flex;\n flex-direction: row;\n gap: ", ";\n width: 100%;\n"])), function (_a) {
|
|
97
109
|
var theme = _a.theme;
|
|
@@ -97,7 +97,7 @@ function ReactionButton(_a) {
|
|
|
97
97
|
return value;
|
|
98
98
|
return (0, numberHelper_1.formatCompactNumber)(value);
|
|
99
99
|
};
|
|
100
|
-
return ((0, jsx_runtime_1.jsxs)(S_ReactionButton, __assign({ "x-pds-name": "ReactionButton", "x-pds-element-type": "component", "x-pds-device-type": "mobile", onClick: handleClick, onMouseDown: handleMouseDown }, { children: [(0, jsx_runtime_1.jsx)(hybrid_1.Spacing, { size: "spacing_b", spacingType: "width" }), (0, jsx_runtime_1.jsx)(hybrid_1.Icon, { size: 20, fillType: "fill", iconName: iconName, colorKey: colorTheme === 'none' ? IconColorByStatus() : IconColorByColorByTheme() }), displayType === 'icon_text' && ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(hybrid_1.Spacing, { size: "spacing_b", spacingType: "width" }), (0, jsx_runtime_1.jsx)(TextLabel_1.TextLabel, { text: convertTextFormatHelper(text), styleTheme: "body2Bold", singleLineMode: "use", colorTheme: TextLabelColorBySelect(), colorOverride: TextLabelColorByByColorTheme() })] })), (0, jsx_runtime_1.jsx)(hybrid_1.Spacing, { size: "spacing_b", spacingType: "width" })] })));
|
|
100
|
+
return ((0, jsx_runtime_1.jsxs)(S_ReactionButton, __assign({ "x-pds-name": "ReactionButton", "x-pds-element-type": "component", "x-pds-device-type": "mobile", type: "button", onClick: handleClick, onMouseDown: handleMouseDown }, { children: [(0, jsx_runtime_1.jsx)(hybrid_1.Spacing, { size: "spacing_b", spacingType: "width" }), (0, jsx_runtime_1.jsx)(hybrid_1.Icon, { size: 20, fillType: "fill", iconName: iconName, colorKey: colorTheme === 'none' ? IconColorByStatus() : IconColorByColorByTheme() }), displayType === 'icon_text' && ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(hybrid_1.Spacing, { size: "spacing_b", spacingType: "width" }), (0, jsx_runtime_1.jsx)(TextLabel_1.TextLabel, { text: convertTextFormatHelper(text), styleTheme: "body2Bold", singleLineMode: "use", colorTheme: TextLabelColorBySelect(), colorOverride: TextLabelColorByByColorTheme() })] })), (0, jsx_runtime_1.jsx)(hybrid_1.Spacing, { size: "spacing_b", spacingType: "width" })] })));
|
|
101
101
|
}
|
|
102
102
|
var ReactionButtonStyle = (0, styled_components_1.css)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n align-items: center;\n background-color: transparent;\n border: none;\n border-radius: 8px;\n box-sizing: border-box;\n display: flex;\n height: 32px;\n justify-content: center;\n padding: 0;\n"], ["\n align-items: center;\n background-color: transparent;\n border: none;\n border-radius: 8px;\n box-sizing: border-box;\n display: flex;\n height: 32px;\n justify-content: center;\n padding: 0;\n"])));
|
|
103
103
|
var S_ReactionButton = styled_components_1.default.button(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n ", "\n"], ["\n ", "\n"])), ReactionButtonStyle);
|
|
@@ -60,7 +60,6 @@ var Composition = (0, react_1.forwardRef)(function CustomSection(props) {
|
|
|
60
60
|
var _e = (0, react_1.useContext)(dynamicLayoutContext_1.dynamicLayoutContext), device = _e.device, editingSectionId = _e.editingSectionId, mode = _e.mode, shortcutKeyMode = _e.shortcutKeyMode, sectionActionHandler = _e.sectionActionHandler, navigationHandler = _e.navigationHandler;
|
|
61
61
|
var componentBlocks = props.componentBlocks, jsonProperties = props.jsonProperties, ccbCode = props.ccbCode;
|
|
62
62
|
var pedigree = jsonProperties === null || jsonProperties === void 0 ? void 0 : jsonProperties.pedigree;
|
|
63
|
-
console.log('composition: ', props);
|
|
64
63
|
var _f = jsonProperties, _g = _f.data, CB_PLACEMENT_PROP_COMPOSITION = _g.CB_PLACEMENT_PROP_COMPOSITION, CB_LAYOUT_PROP_PADDING = _g.CB_LAYOUT_PROP_PADDING, zOrders = _f.zOrders;
|
|
65
64
|
var layouts = (0, util_1.parsePlacement)(componentBlocks !== null && componentBlocks !== void 0 ? componentBlocks : [], zOrders);
|
|
66
65
|
var isMobile = device === 'MOBILE';
|
|
@@ -27,7 +27,6 @@ var compositionQueryContext_1 = require("../compositionQueryContext");
|
|
|
27
27
|
var Composition_1 = __importDefault(require("./Composition"));
|
|
28
28
|
function createCompositions(_a) {
|
|
29
29
|
var valueType = _a.valueType, queryPath = _a.queryPath, queryData = _a.queryData, compositions = _a.compositions, limit = _a.limit, componentBlockCode = _a.componentBlockCode;
|
|
30
|
-
console.log('slidebanner createCompositions', queryPath, queryData, compositions);
|
|
31
30
|
var isQueryDataConnected = valueType === 'DATA' || valueType === 'DELEGATEDDATA';
|
|
32
31
|
// 직접 입력 유형인 경우
|
|
33
32
|
if (!isQueryDataConnected) {
|
|
@@ -45,9 +44,8 @@ function createCompositions(_a) {
|
|
|
45
44
|
if (queryPath === 'NONE' || !queryPath || !queryData) {
|
|
46
45
|
return [(0, jsx_runtime_1.jsx)(S_EmptyLayer, { children: "\uC544\uC9C1 \uC5F0\uACB0\uB41C \uCFFC\uB9AC\uAC00 \uC5C6\uC2B5\uB2C8\uB2E4." }, "no-query")];
|
|
47
46
|
}
|
|
48
|
-
|
|
49
|
-
var queryDataValue = queryData[
|
|
50
|
-
console.log('queryDataValue createCOmposition', queryDataValue);
|
|
47
|
+
var parsedQueryPath = removeFirstSegment(queryPath);
|
|
48
|
+
var queryDataValue = queryData[parsedQueryPath];
|
|
51
49
|
var queryComposition = compositions.find(function (composition) { return composition.isDefault; });
|
|
52
50
|
// 쿼리 데이터와 키가 있으나, 쿼리 데이터에 해당 키가 없는 경우
|
|
53
51
|
if (!queryDataValue) {
|
|
@@ -60,10 +58,10 @@ function createCompositions(_a) {
|
|
|
60
58
|
return queryDataValue.slice(0, limit).map(function (query, index) { return ((0, jsx_runtime_1.jsx)(compositionQueryContext_1.CCBQueryPathContext.Provider, __assign({ value: { queryData: query } }, { children: (0, jsx_runtime_1.jsx)(Composition_1.default, __assign({}, queryComposition, { ccbCode: componentBlockCode })) }), index)); });
|
|
61
59
|
}
|
|
62
60
|
exports.createCompositions = createCompositions;
|
|
63
|
-
|
|
64
|
-
|
|
65
|
-
|
|
66
|
-
|
|
61
|
+
function removeFirstSegment(path) {
|
|
62
|
+
var segments = path.split('/');
|
|
63
|
+
return segments.slice(1).join('/');
|
|
64
|
+
}
|
|
67
65
|
function EmptyString() {
|
|
68
66
|
var t = (0, react_i18next_1.useTranslation)('translation').t;
|
|
69
67
|
return (0, jsx_runtime_1.jsx)(S_EmptyLayer, { children: t('str_9806') });
|
|
@@ -93,13 +93,11 @@ function ContentsCarousel(props) {
|
|
|
93
93
|
}), customProgressbarNormalStyle = _h.normalStyle, customProgressbarHoverStyle = _h.hoverStyle;
|
|
94
94
|
var _j = (0, useSwiper_1.useSwiper)(), swiperRef = _j.swiperRef, progressRef = _j.progressRef, leftTimeMsRef = _j.leftTimeMsRef, isBeginning = _j.isBeginning, isEnd = _j.isEnd, onSwiper = _j.onSwiper, onSlideChangeTransitionEnd = _j.onSlideChangeTransitionEnd, onAutoplayTimeLeft = _j.onAutoplayTimeLeft, onClickPrevBtn = _j.onClickPrevBtn, onClickNextBtn = _j.onClickNextBtn;
|
|
95
95
|
var _k = (0, react_1.useState)(false), isHovered = _k[0], setIsHovered = _k[1];
|
|
96
|
-
var orderedCompositions =
|
|
97
|
-
|
|
98
|
-
|
|
99
|
-
|
|
100
|
-
|
|
101
|
-
})
|
|
102
|
-
: compositions.filter(function (comp) { return comp.isDefault; });
|
|
96
|
+
var orderedCompositions = __spreadArray([], CB_CONTENT_PROP_CONTENTSCAROUSEL_SPEC_MANUALITEMS, true).filter(function (item) { return compositions.find(function (comp) { return comp.ccbManualItemUuid === item.uuid; }); })
|
|
97
|
+
.sort(function (a, b) { return a.order - b.order; })
|
|
98
|
+
.map(function (item) {
|
|
99
|
+
return compositions.find(function (comp) { return comp.ccbManualItemUuid === item.uuid; });
|
|
100
|
+
});
|
|
103
101
|
var loop = contentsCarouselNormalStyle.loop && orderedCompositions.length >= displayCounts;
|
|
104
102
|
// NOTE: edit모드에서는 그리드의 이벤트만 작동하도록 CB의 포인터 이벤트는 막습니다.
|
|
105
103
|
var editModeStyle = mode === 'EDIT' ? { pointerEvents: 'none' } : {};
|
|
@@ -73,8 +73,8 @@ function ContentsList(props) {
|
|
|
73
73
|
CB_CONTENT_PROP_CONTENTSLIST_SPEC_DISPLAYCOUNTS = CB_CONTENT_PROP_CONTENTSLIST.CB_CONTENT_PROP_CONTENTSLIST_SPEC_DISPLAYCOUNTS, CB_CONTENT_PROP_CONTENTSLIST_SPEC_MDISPLAYCOUNTS = CB_CONTENT_PROP_CONTENTSLIST.CB_CONTENT_PROP_CONTENTSLIST_SPEC_MDISPLAYCOUNTS, CB_CONTENT_PROP_CONTENTSLIST_SPEC_VALUETYPE = CB_CONTENT_PROP_CONTENTSLIST.CB_CONTENT_PROP_CONTENTSLIST_SPEC_VALUETYPE, CB_CONTENT_PROP_CONTENTSLIST_SPEC_CONNECTDATA = CB_CONTENT_PROP_CONTENTSLIST.CB_CONTENT_PROP_CONTENTSLIST_SPEC_CONNECTDATA, CB_CONTENT_PROP_CONTENTSLIST_SPEC_COLUMNS = CB_CONTENT_PROP_CONTENTSLIST.CB_CONTENT_PROP_CONTENTSLIST_SPEC_COLUMNS, CB_CONTENT_PROP_CONTENTSLIST_SPEC_MANUALITEMS = CB_CONTENT_PROP_CONTENTSLIST.CB_CONTENT_PROP_CONTENTSLIST_SPEC_MANUALITEMS, CB_CONTENT_PROP_CONTENTSLIST_SPEC_MCOLUMNS = CB_CONTENT_PROP_CONTENTSLIST.CB_CONTENT_PROP_CONTENTSLIST_SPEC_MCOLUMNS;
|
|
74
74
|
var _h = (0, react_1.useState)(false), isHovered = _h[0], setIsHovered = _h[1];
|
|
75
75
|
var _j = (0, react_1.useState)(1), currentPage = _j[0], setCurrentPage = _j[1];
|
|
76
|
-
|
|
77
|
-
var queryDataValue = queryData === null || queryData === void 0 ? void 0 : queryData[
|
|
76
|
+
var parsedQueryPath = removeFirstSegment(CB_CONTENT_PROP_CONTENTSLIST_SPEC_CONNECTDATA);
|
|
77
|
+
var queryDataValue = queryData === null || queryData === void 0 ? void 0 : queryData[parsedQueryPath];
|
|
78
78
|
// list의 minheight / minwidth를 계산
|
|
79
79
|
var numberOfColumns = device === 'DESKTOP'
|
|
80
80
|
? CB_CONTENT_PROP_CONTENTSLIST_SPEC_COLUMNS
|
|
@@ -135,8 +135,8 @@ function ContentsList(props) {
|
|
|
135
135
|
CB_LAYOUT_PROP_PADDING.CB_LAYOUT_PROP_PADDING_SPEC_PADDING.right;
|
|
136
136
|
var paddingTB = CB_LAYOUT_PROP_PADDING.CB_LAYOUT_PROP_PADDING_SPEC_PADDING.top +
|
|
137
137
|
CB_LAYOUT_PROP_PADDING.CB_LAYOUT_PROP_PADDING_SPEC_PADDING.bottom;
|
|
138
|
-
|
|
139
|
-
var queryLength = (_f = (_e = queryData === null || queryData === void 0 ? void 0 : queryData[
|
|
138
|
+
var queryPath = removeFirstSegment(CB_CONTENT_PROP_CONTENTSLIST_SPEC_CONNECTDATA);
|
|
139
|
+
var queryLength = (_f = (_e = queryData === null || queryData === void 0 ? void 0 : queryData[queryPath]) === null || _e === void 0 ? void 0 : _e.length) !== null && _f !== void 0 ? _f : 0;
|
|
140
140
|
// const displayedItemLength = Math.max(0, Math.min(endIndex, queryLength) - startIndex);
|
|
141
141
|
var numberOfRows = Math.ceil(displayCounts / numberOfColumns);
|
|
142
142
|
var listMinWidth = oneCompositionMinWidth * numberOfColumns + (numberOfColumns - 1) * columnGap + paddingLR;
|
|
@@ -169,13 +169,11 @@ function ContentsList(props) {
|
|
|
169
169
|
var isMobile = device === 'MOBILE';
|
|
170
170
|
var isBgMedia = getIsBgMedia(isMobile, CB_STYLE_PROP_BGMEDIA);
|
|
171
171
|
var mediaType = getMediaType(isMobile, CB_STYLE_PROP_BGMEDIA);
|
|
172
|
-
var orderedCompositions =
|
|
173
|
-
|
|
174
|
-
|
|
175
|
-
|
|
176
|
-
|
|
177
|
-
})
|
|
178
|
-
: compositions.filter(function (comp) { return comp.isDefault; });
|
|
172
|
+
var orderedCompositions = __spreadArray([], CB_CONTENT_PROP_CONTENTSLIST_SPEC_MANUALITEMS, true).filter(function (item) { return compositions.find(function (comp) { return comp.ccbManualItemUuid === item.uuid; }); })
|
|
173
|
+
.sort(function (a, b) { return a.order - b.order; })
|
|
174
|
+
.map(function (item) {
|
|
175
|
+
return compositions.find(function (comp) { return comp.ccbManualItemUuid === item.uuid; });
|
|
176
|
+
});
|
|
179
177
|
var heightFitContentByDevice = device === 'DESKTOP'
|
|
180
178
|
? CB_LAYOUT_PROP_HEIGHTADJUSTMENT === null || CB_LAYOUT_PROP_HEIGHTADJUSTMENT === void 0 ? void 0 : CB_LAYOUT_PROP_HEIGHTADJUSTMENT.CB_LAYOUT_PROP_HEIGHTADJUSTMENT_SPEC_HEIGHTFITCONTENT
|
|
181
179
|
: CB_LAYOUT_PROP_HEIGHTADJUSTMENT === null || CB_LAYOUT_PROP_HEIGHTADJUSTMENT === void 0 ? void 0 : CB_LAYOUT_PROP_HEIGHTADJUSTMENT['CB_LAYOUT_PROP_HEIGHTADJUSTMENT_SPEC_HEIGHTFITCONTENT:MOBILE'];
|
|
@@ -253,10 +251,10 @@ var S_ContentsListWrapper = styled_components_1.default.div(templateObject_4 ||
|
|
|
253
251
|
var ccbInset = _a.ccbInset;
|
|
254
252
|
return ccbInset.top;
|
|
255
253
|
});
|
|
256
|
-
|
|
257
|
-
|
|
258
|
-
|
|
259
|
-
|
|
254
|
+
function removeFirstSegment(path) {
|
|
255
|
+
var segments = path.split('/');
|
|
256
|
+
return segments.slice(1).join('/');
|
|
257
|
+
}
|
|
260
258
|
function getStandardComposition(compositions, valueType) {
|
|
261
259
|
if (valueType === 'DATA') {
|
|
262
260
|
return compositions.find(function (composition) { return composition.isDefault; });
|
|
@@ -72,7 +72,6 @@ size) {
|
|
|
72
72
|
function SlideBanner(props) {
|
|
73
73
|
var _a;
|
|
74
74
|
var _b = (0, react_1.useContext)(dynamicLayoutContext_1.dynamicLayoutContext), device = _b.device, mode = _b.mode, queryData = _b.queryData;
|
|
75
|
-
console.log('SLIDEBANNER QUERYDATA', queryData);
|
|
76
75
|
var index = props.index, _c = props.CB_CONTENT_PROP_SLIDEBANNER, CB_CONTENT_PROP_SLIDEBANNER_SPEC_ITEMCOUNTS = _c.CB_CONTENT_PROP_SLIDEBANNER_SPEC_ITEMCOUNTS, CB_CONTENT_PROP_SLIDEBANNER_SPEC_VALUETYPE = _c.CB_CONTENT_PROP_SLIDEBANNER_SPEC_VALUETYPE, CB_CONTENT_PROP_SLIDEBANNER_SPEC_CONNECTDATA = _c.CB_CONTENT_PROP_SLIDEBANNER_SPEC_CONNECTDATA, CB_CONTENT_PROP_SLIDEBANNER_SPEC_MANUALITEMS = _c.CB_CONTENT_PROP_SLIDEBANNER_SPEC_MANUALITEMS, CB_STYLE_PROP_SLIDEBANNERDESIGN = props.CB_STYLE_PROP_SLIDEBANNERDESIGN, CB_STYLE_PROP_SLIDEBANNERPAGINATION = props.CB_STYLE_PROP_SLIDEBANNERPAGINATION, CB_STYLE_PROP_SLIDEBANNERBUTTON = props.CB_STYLE_PROP_SLIDEBANNERBUTTON, CB_STYLE_PROP_SLIDEBANNERPLAYBACKMETHOD = props.CB_STYLE_PROP_SLIDEBANNERPLAYBACKMETHOD, CB_STYLE_PROP_SLIDEBANNERPROGRESSBAR = props.CB_STYLE_PROP_SLIDEBANNERPROGRESSBAR, CB_STYLE_PROP_SHADOW = props.CB_STYLE_PROP_SHADOW, CB_EFFECT_PROP_ENTANIM = props.CB_EFFECT_PROP_ENTANIM, CB_STYLE_PROP_BGMEDIA = props.CB_STYLE_PROP_BGMEDIA, CB_EFFECT_PROP_SLIDEBANNER_SPEC_TRANSITIONTYPE = props.CB_EFFECT_PROP_SLIDEBANNER.CB_EFFECT_PROP_SLIDEBANNER_SPEC_TRANSITIONTYPE;
|
|
77
76
|
var compositions = props.compositions;
|
|
78
77
|
var CB_STYLE_PROP_SLIDEBANNER = __assign(__assign(__assign(__assign(__assign({}, CB_STYLE_PROP_SLIDEBANNERDESIGN), CB_STYLE_PROP_SLIDEBANNERPAGINATION), CB_STYLE_PROP_SLIDEBANNERBUTTON), CB_STYLE_PROP_SLIDEBANNERPLAYBACKMETHOD), CB_STYLE_PROP_SLIDEBANNERPROGRESSBAR);
|
|
@@ -147,19 +146,15 @@ function SlideBanner(props) {
|
|
|
147
146
|
var isMobile = device === 'MOBILE';
|
|
148
147
|
var isBgMedia = getIsBgMedia(isMobile, CB_STYLE_PROP_BGMEDIA);
|
|
149
148
|
var mediaType = getMediaType(isMobile, CB_STYLE_PROP_BGMEDIA);
|
|
150
|
-
var orderedCompositions =
|
|
151
|
-
|
|
152
|
-
|
|
153
|
-
|
|
154
|
-
|
|
155
|
-
})
|
|
156
|
-
: compositions.filter(function (comp) { return comp.isDefault; });
|
|
157
|
-
console.log('🥺', CB_CONTENT_PROP_SLIDEBANNER_SPEC_VALUETYPE, CB_CONTENT_PROP_SLIDEBANNER_SPEC_MANUALITEMS, orderedCompositions);
|
|
149
|
+
var orderedCompositions = __spreadArray([], CB_CONTENT_PROP_SLIDEBANNER_SPEC_MANUALITEMS, true).filter(function (item) { return compositions.find(function (comp) { return comp.ccbManualItemUuid === item.uuid; }); })
|
|
150
|
+
.sort(function (a, b) { return a.order - b.order; })
|
|
151
|
+
.map(function (item) {
|
|
152
|
+
return compositions.find(function (comp) { return comp.ccbManualItemUuid === item.uuid; });
|
|
153
|
+
});
|
|
158
154
|
var isEditModeAndHidden = style.visibility === 'hidden' && mode === 'EDIT';
|
|
159
155
|
if (mode === 'EDIT') {
|
|
160
156
|
style.visibility = 'visible';
|
|
161
157
|
}
|
|
162
|
-
console.log('slidebanner comonentGroup', componentGroups);
|
|
163
158
|
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.jsxs)(S_CB_AnimationObserverBox_1.S_CB_AnimationObserverBox, __assign({ ref: hasEffect ? cbRef : null, effectVisibleStyle: effectVisibleStyle, onMouseEnter: function () { return setIsHovered(true); }, onMouseLeave: function () { return setIsHovered(false); } }, { children: [Object.entries(componentGroups).map(function (_a) {
|
|
164
159
|
var position = _a[0], groupComponents = _a[1];
|
|
165
160
|
return ((0, jsx_runtime_1.jsx)("div", __assign({ className: "cb-slidebanner-button-group ccb-elements ".concat(position), ref: function (el) {
|
|
@@ -86,7 +86,8 @@ function parsePropPlacement(props, id, cbCode, zOrders, heightFitContent, cbRest
|
|
|
86
86
|
var AUTO_RESIZE_CODES = ['none'];
|
|
87
87
|
function getResizeHandles(heightFitContent) {
|
|
88
88
|
if (heightFitContent) {
|
|
89
|
-
return ['e', 'w'];
|
|
89
|
+
// return ['e', 'w'];
|
|
90
|
+
return ['nw', 'e', 'n', 'ne', 's', 'se', 'sw', 'w'];
|
|
90
91
|
}
|
|
91
92
|
return ['nw', 'e', 'n', 'ne', 's', 'se', 'sw', 'w'];
|
|
92
93
|
}
|
package/package.json
CHANGED