pds-dev-kit-web 1.5.9 → 1.5.11
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/styles/colorSet/UIColor.json +2 -1
- package/dist/src/common/styles/colorSet/index.d.ts +3 -2
- package/dist/src/common/styles/colorSet/index.js +4 -4
- package/dist/src/common/styles/colorSet/ui-type.d.ts +1 -0
- package/dist/src/desktop/components/BasicListItem/BasicListItem.d.ts +1 -0
- package/dist/src/desktop/components/BasicListItem/BasicListItem.js +8 -4
- package/dist/src/desktop/components/DynamicDesktopNavBar/blocks/PrimaryMenu.js +1 -1
- package/dist/src/mobile/components/BasicListItem/BasicListItem.d.ts +1 -0
- package/dist/src/mobile/components/BasicListItem/BasicListItem.js +8 -4
- package/package.json +1 -1
- package/release-note.md +4 -12
|
@@ -581,5 +581,6 @@
|
|
|
581
581
|
"ui_loading_skeleton_02": "sys_loading_skeleton_02",
|
|
582
582
|
"ui_loading_linear_bar": "sys_loading_linear_bar",
|
|
583
583
|
"ui_loading_linear_base": "sys_loading_linear_base",
|
|
584
|
-
"ui_loading_three_bar": "sys_loading_three_bar"
|
|
584
|
+
"ui_loading_three_bar": "sys_loading_three_bar",
|
|
585
|
+
"ui_menu_button_base": "usr_menu_background"
|
|
585
586
|
}
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
declare const colorSet: {
|
|
2
|
-
readonly
|
|
2
|
+
readonly PaletteColor_light: {
|
|
3
3
|
sys_container_background_01: string;
|
|
4
4
|
sys_container_background_02: string;
|
|
5
5
|
sys_container_background_03: string;
|
|
@@ -275,7 +275,7 @@ declare const colorSet: {
|
|
|
275
275
|
green30: string;
|
|
276
276
|
darkgreen30: string;
|
|
277
277
|
};
|
|
278
|
-
readonly
|
|
278
|
+
readonly PaletteColor_Dark: {
|
|
279
279
|
sys_container_background_01: string;
|
|
280
280
|
sys_container_background_02: string;
|
|
281
281
|
sys_container_background_03: string;
|
|
@@ -1063,6 +1063,7 @@ declare const colorSet: {
|
|
|
1063
1063
|
ui_loading_linear_bar: string;
|
|
1064
1064
|
ui_loading_linear_base: string;
|
|
1065
1065
|
ui_loading_three_bar: string;
|
|
1066
|
+
ui_menu_button_base: string;
|
|
1066
1067
|
};
|
|
1067
1068
|
};
|
|
1068
1069
|
export default colorSet;
|
|
@@ -4,14 +4,14 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
|
|
|
4
4
|
};
|
|
5
5
|
Object.defineProperty(exports, "__esModule", { value: true });
|
|
6
6
|
/* eslint-disable import/order */
|
|
7
|
-
var PaletteColor_Dark_json_1 = __importDefault(require("./PaletteColor_Dark.json"));
|
|
8
|
-
var SemanticColor_json_1 = __importDefault(require("./SemanticColor.json"));
|
|
9
7
|
var PaletteColor_light_json_1 = __importDefault(require("./PaletteColor_light.json"));
|
|
8
|
+
var SemanticColor_json_1 = __importDefault(require("./SemanticColor.json"));
|
|
9
|
+
var PaletteColor_Dark_json_1 = __importDefault(require("./PaletteColor_Dark.json"));
|
|
10
10
|
var UIColor_json_1 = __importDefault(require("./UIColor.json"));
|
|
11
11
|
var colorSet = {
|
|
12
|
-
PaletteColor_Dark: PaletteColor_Dark_json_1.default,
|
|
13
|
-
SemanticColor: SemanticColor_json_1.default,
|
|
14
12
|
PaletteColor_light: PaletteColor_light_json_1.default,
|
|
13
|
+
SemanticColor: SemanticColor_json_1.default,
|
|
14
|
+
PaletteColor_Dark: PaletteColor_Dark_json_1.default,
|
|
15
15
|
UIColor: UIColor_json_1.default
|
|
16
16
|
};
|
|
17
17
|
exports.default = colorSet;
|
|
@@ -45,6 +45,7 @@ export declare type StyleProps = {
|
|
|
45
45
|
displayType?: 'none' | 'text' | 'ibtn_text' | 'ibtn_amount1' | 'ibtn_amount2' | 'mbtn' | 'switch';
|
|
46
46
|
hasOnClick?: boolean;
|
|
47
47
|
spacingMode?: 'none' | 'use';
|
|
48
|
+
onlyLeftArea?: boolean;
|
|
48
49
|
};
|
|
49
50
|
declare function BasicListItem({ selectionMode, titleText, titleTextColorTheme, descText, badgeMode, badgeStatus, imageIconMode, imageShapeType, imageSrc, iconName, iconFillType, displayType, captionText, iBtn1IconName, iBtn1IconFillType, iBtn2IconName, iBtn2IconFillType, mBtnFillType, mBtnText, dividerType, titleFontWeight, checkboxId, radioId, radioValue, switchName, switchState, switchStatus, spacingMode, onClick, onClickIBtn1, onClickIBtn2, onClickMBtn, onClickRadio, onClickSwitch }: BasicListItemProps): JSX.Element;
|
|
50
51
|
export default BasicListItem;
|
|
@@ -20,6 +20,7 @@ function BasicListItem(_a) {
|
|
|
20
20
|
var _b = _a.selectionMode, selectionMode = _b === void 0 ? 'none' : _b, titleText = _a.titleText, _c = _a.titleTextColorTheme, titleTextColorTheme = _c === void 0 ? 'none' : _c, descText = _a.descText, _d = _a.badgeMode, badgeMode = _d === void 0 ? 'none' : _d, _e = _a.badgeStatus, badgeStatus = _e === void 0 ? 'inactive' : _e, _f = _a.imageIconMode, imageIconMode = _f === void 0 ? 'none' : _f, _g = _a.imageShapeType, imageShapeType = _g === void 0 ? 'round' : _g, imageSrc = _a.imageSrc, iconName = _a.iconName, _h = _a.iconFillType, iconFillType = _h === void 0 ? 'line' : _h, _j = _a.displayType, displayType = _j === void 0 ? 'none' : _j, captionText = _a.captionText, iBtn1IconName = _a.iBtn1IconName, _k = _a.iBtn1IconFillType, iBtn1IconFillType = _k === void 0 ? 'line' : _k, iBtn2IconName = _a.iBtn2IconName, _l = _a.iBtn2IconFillType, iBtn2IconFillType = _l === void 0 ? 'line' : _l, _m = _a.mBtnFillType, mBtnFillType = _m === void 0 ? 'fill' : _m, mBtnText = _a.mBtnText, _o = _a.dividerType, dividerType = _o === void 0 ? 'none' : _o, _p = _a.titleFontWeight, titleFontWeight = _p === void 0 ? 'regular' : _p, checkboxId = _a.checkboxId, radioId = _a.radioId, radioValue = _a.radioValue, switchName = _a.switchName, _q = _a.switchState, switchState = _q === void 0 ? 'normal' : _q, _r = _a.switchStatus, switchStatus = _r === void 0 ? 'off' : _r, _s = _a.spacingMode, spacingMode = _s === void 0 ? 'use' : _s, onClick = _a.onClick, onClickIBtn1 = _a.onClickIBtn1, onClickIBtn2 = _a.onClickIBtn2, onClickMBtn = _a.onClickMBtn, onClickRadio = _a.onClickRadio, onClickSwitch = _a.onClickSwitch;
|
|
21
21
|
var methods = (0, react_hook_form_1.useFormContext)();
|
|
22
22
|
var isSelected = methods === null || methods === void 0 ? void 0 : methods.watch((checkboxId === null || checkboxId === void 0 ? void 0 : checkboxId.toString()) || '');
|
|
23
|
+
var onlyLeftArea = displayType === 'none';
|
|
23
24
|
var handleCheckBoxClick = function (e) {
|
|
24
25
|
e.preventDefault();
|
|
25
26
|
if (!checkboxId) {
|
|
@@ -115,7 +116,7 @@ function BasicListItem(_a) {
|
|
|
115
116
|
};
|
|
116
117
|
return (react_1.default.createElement(S_BasicListItem, { displayType: displayType, selectionMode: selectionMode, isSelected: isSelected, onClick: handleClick, hasOnClick: !!onClick, spacingMode: spacingMode },
|
|
117
118
|
react_1.default.createElement(S_BasicListItemBox, { imageIconMode: imageIconMode, captionText: captionText, spacingMode: spacingMode },
|
|
118
|
-
react_1.default.createElement(S_LeftBox,
|
|
119
|
+
react_1.default.createElement(S_LeftBox, { onlyLeftArea: onlyLeftArea },
|
|
119
120
|
selectionMode !== 'none' && (react_1.default.createElement(S_SelectionBoxWrapper, { selectionMode: selectionMode },
|
|
120
121
|
selectionMode === 'check' && checkboxId && (react_1.default.createElement(Checkbox_1.Checkbox, { name: checkboxId.toString(), state: "normal", onChange: handleCheckBoxClick })),
|
|
121
122
|
selectionMode === 'radio' && radioValue && radioId && (react_1.default.createElement(Radio_1.Radio, { name: radioId, value: radioValue, onChange: handleRadioClick, checked: radioId === radioValue })))),
|
|
@@ -136,10 +137,10 @@ function BasicListItem(_a) {
|
|
|
136
137
|
captionText && (react_1.default.createElement(react_1.default.Fragment, null,
|
|
137
138
|
react_1.default.createElement(hybrid_1.Spacing, { size: "spacing_a" }),
|
|
138
139
|
react_1.default.createElement(S_TextWrapper, null,
|
|
139
|
-
react_1.default.createElement(TextLabel_1.TextLabel, { text: captionText, colorTheme: "sysTextTertiary", styleTheme: "caption1Regular", textAlign: "
|
|
140
|
+
react_1.default.createElement(TextLabel_1.TextLabel, { text: captionText, colorTheme: "sysTextTertiary", styleTheme: "caption1Regular", textAlign: "left", singleLineMode: "use", ellipsisMode: "use", lineLimit: 1 })))))),
|
|
140
141
|
react_1.default.createElement(S_RightBox, { displayType: displayType },
|
|
141
142
|
(displayType === 'text' || displayType === 'ibtn_text') && (react_1.default.createElement(react_1.default.Fragment, null,
|
|
142
|
-
react_1.default.createElement(TextLabel_1.TextLabel, { text: descText, colorTheme: "sysTextSecondary", styleTheme: "caption1Regular", singleLineMode: "use", ellipsisMode: "use", lineLimit: 1 }),
|
|
143
|
+
react_1.default.createElement(TextLabel_1.TextLabel, { text: descText, colorTheme: "sysTextSecondary", styleTheme: "caption1Regular", textAlign: "right", singleLineMode: "use", ellipsisMode: "use", lineLimit: 1 }),
|
|
143
144
|
isRightSpacingChecker('none') && react_1.default.createElement(hybrid_1.Spacing, { size: "spacing_c", spacingType: "width" }))),
|
|
144
145
|
(displayType === 'ibtn_amount1' ||
|
|
145
146
|
displayType === 'ibtn_amount2' ||
|
|
@@ -179,7 +180,10 @@ var S_BasicListItemBox = styled_components_1.default.div(templateObject_2 || (te
|
|
|
179
180
|
var spacingMode = _a.spacingMode, theme = _a.theme;
|
|
180
181
|
return spacingMode === 'use' && "0 " + theme.spacing.spacingC;
|
|
181
182
|
});
|
|
182
|
-
var S_LeftBox = styled_components_1.default.div(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n align-items: center;\n display: flex;\n flex:
|
|
183
|
+
var S_LeftBox = styled_components_1.default.div(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n align-items: center;\n display: flex;\n flex: ", ";\n width: 100%;\n"], ["\n align-items: center;\n display: flex;\n flex: ", ";\n width: 100%;\n"])), function (_a) {
|
|
184
|
+
var onlyLeftArea = _a.onlyLeftArea;
|
|
185
|
+
return (onlyLeftArea ? 'auto' : 7);
|
|
186
|
+
});
|
|
183
187
|
var S_SelectionBoxWrapper = styled_components_1.default.div(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n align-items: center;\n display: flex;\n height: 40px;\n justify-content: center;\n width: 40px;\n"], ["\n align-items: center;\n display: flex;\n height: 40px;\n justify-content: center;\n width: 40px;\n"])));
|
|
184
188
|
var S_IconWrapper = styled_components_1.default.div(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n align-items: center;\n display: flex;\n justify-content: center;\n"], ["\n align-items: center;\n display: flex;\n justify-content: center;\n"])));
|
|
185
189
|
var S_TextBox = styled_components_1.default.div(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n align-items: flex-start;\n display: flex;\n flex-direction: column;\n justify-content: center;\n width: 100%;\n"], ["\n align-items: flex-start;\n display: flex;\n flex-direction: column;\n justify-content: center;\n width: 100%;\n"])));
|
|
@@ -100,7 +100,7 @@ var S_ButtonWrapper = styled_components_1.default.div(templateObject_5 || (templ
|
|
|
100
100
|
return theme.ui_menu_background;
|
|
101
101
|
}, function (_a) {
|
|
102
102
|
var theme = _a.theme;
|
|
103
|
-
return theme.
|
|
103
|
+
return theme.ui_menu_button_base;
|
|
104
104
|
}, function (_a) {
|
|
105
105
|
var theme = _a.theme;
|
|
106
106
|
return theme.ui_temp_grey_02;
|
|
@@ -44,6 +44,7 @@ export declare type StyleProps = {
|
|
|
44
44
|
imageIconMode?: 'none' | 'image' | 'icon';
|
|
45
45
|
displayType?: 'none' | 'text' | 'ibtn_text' | 'ibtn_amount1' | 'ibtn_amount2' | 'mbtn' | 'switch';
|
|
46
46
|
spacingMode?: 'none' | 'use';
|
|
47
|
+
onlyLeftArea?: boolean;
|
|
47
48
|
};
|
|
48
49
|
declare function BasicListItem({ selectionMode, titleText, titleTextColorTheme, descText, badgeMode, badgeStatus, imageIconMode, imageShapeType, imageSrc, iconName, iconFillType, displayType, captionText, iBtn1IconName, iBtn1IconFillType, iBtn2IconName, iBtn2IconFillType, mBtnFillType, mBtnText, dividerType, titleFontWeight, checkboxId, radioId, radioValue, switchName, switchState, switchStatus, spacingMode, onClick, onClickRadio, onClickSwitch, onClickIBtn1, onClickIBtn2, onClickMBtn }: BasicListItemProps): JSX.Element;
|
|
49
50
|
export default BasicListItem;
|
|
@@ -20,6 +20,7 @@ function BasicListItem(_a) {
|
|
|
20
20
|
var _b = _a.selectionMode, selectionMode = _b === void 0 ? 'none' : _b, titleText = _a.titleText, _c = _a.titleTextColorTheme, titleTextColorTheme = _c === void 0 ? 'none' : _c, descText = _a.descText, _d = _a.badgeMode, badgeMode = _d === void 0 ? 'none' : _d, _e = _a.badgeStatus, badgeStatus = _e === void 0 ? 'inactive' : _e, _f = _a.imageIconMode, imageIconMode = _f === void 0 ? 'none' : _f, _g = _a.imageShapeType, imageShapeType = _g === void 0 ? 'round' : _g, imageSrc = _a.imageSrc, iconName = _a.iconName, _h = _a.iconFillType, iconFillType = _h === void 0 ? 'line' : _h, _j = _a.displayType, displayType = _j === void 0 ? 'none' : _j, captionText = _a.captionText, iBtn1IconName = _a.iBtn1IconName, _k = _a.iBtn1IconFillType, iBtn1IconFillType = _k === void 0 ? 'line' : _k, iBtn2IconName = _a.iBtn2IconName, _l = _a.iBtn2IconFillType, iBtn2IconFillType = _l === void 0 ? 'line' : _l, _m = _a.mBtnFillType, mBtnFillType = _m === void 0 ? 'fill' : _m, mBtnText = _a.mBtnText, _o = _a.dividerType, dividerType = _o === void 0 ? 'none' : _o, _p = _a.titleFontWeight, titleFontWeight = _p === void 0 ? 'regular' : _p, checkboxId = _a.checkboxId, radioId = _a.radioId, radioValue = _a.radioValue, switchName = _a.switchName, _q = _a.switchState, switchState = _q === void 0 ? 'normal' : _q, _r = _a.switchStatus, switchStatus = _r === void 0 ? 'off' : _r, _s = _a.spacingMode, spacingMode = _s === void 0 ? 'use' : _s, onClick = _a.onClick, onClickRadio = _a.onClickRadio, onClickSwitch = _a.onClickSwitch, onClickIBtn1 = _a.onClickIBtn1, onClickIBtn2 = _a.onClickIBtn2, onClickMBtn = _a.onClickMBtn;
|
|
21
21
|
var methods = (0, react_hook_form_1.useFormContext)();
|
|
22
22
|
var isSelected = methods === null || methods === void 0 ? void 0 : methods.watch((checkboxId === null || checkboxId === void 0 ? void 0 : checkboxId.toString()) || '');
|
|
23
|
+
var onlyLeftArea = displayType === 'none';
|
|
23
24
|
var handleCheckBoxClick = function (e) {
|
|
24
25
|
e.preventDefault();
|
|
25
26
|
if (!checkboxId) {
|
|
@@ -115,7 +116,7 @@ function BasicListItem(_a) {
|
|
|
115
116
|
};
|
|
116
117
|
return (react_1.default.createElement(S_BasicListItem, { isSelected: isSelected, onClick: handleClick, spacingMode: spacingMode },
|
|
117
118
|
react_1.default.createElement(S_BasicListItemBox, { imageIconMode: imageIconMode, captionText: captionText, spacingMode: spacingMode },
|
|
118
|
-
react_1.default.createElement(S_LeftBox,
|
|
119
|
+
react_1.default.createElement(S_LeftBox, { onlyLeftArea: onlyLeftArea },
|
|
119
120
|
selectionMode !== 'none' && (react_1.default.createElement(S_SelectionBoxWrapper, { selectionMode: selectionMode },
|
|
120
121
|
selectionMode === 'check' && checkboxId && (react_1.default.createElement(Checkbox_1.Checkbox, { name: checkboxId.toString(), state: "normal", onChange: handleCheckBoxClick })),
|
|
121
122
|
selectionMode === 'radio' && radioValue && radioId && (react_1.default.createElement(Radio_1.Radio, { name: radioId, value: radioValue, onChange: handleRadioClick, checked: radioId === radioValue })))),
|
|
@@ -136,10 +137,10 @@ function BasicListItem(_a) {
|
|
|
136
137
|
captionText && (react_1.default.createElement(react_1.default.Fragment, null,
|
|
137
138
|
react_1.default.createElement(hybrid_1.Spacing, { size: "spacing_a" }),
|
|
138
139
|
react_1.default.createElement(S_TextWrapper, null,
|
|
139
|
-
react_1.default.createElement(TextLabel_1.TextLabel, { text: captionText, colorTheme: "sysTextTertiary", styleTheme: "caption1Regular", textAlign: "
|
|
140
|
+
react_1.default.createElement(TextLabel_1.TextLabel, { text: captionText, colorTheme: "sysTextTertiary", styleTheme: "caption1Regular", textAlign: "left", singleLineMode: "use", ellipsisMode: "use", lineLimit: 1 })))))),
|
|
140
141
|
react_1.default.createElement(S_RightBox, { displayType: displayType },
|
|
141
142
|
(displayType === 'text' || displayType === 'ibtn_text') && (react_1.default.createElement(react_1.default.Fragment, null,
|
|
142
|
-
react_1.default.createElement(TextLabel_1.TextLabel, { text: descText, colorTheme: "sysTextSecondary", styleTheme: "caption1Regular", singleLineMode: "use", ellipsisMode: "use", lineLimit: 1 }),
|
|
143
|
+
react_1.default.createElement(TextLabel_1.TextLabel, { text: descText, colorTheme: "sysTextSecondary", styleTheme: "caption1Regular", textAlign: "right", singleLineMode: "use", ellipsisMode: "use", lineLimit: 1 }),
|
|
143
144
|
isRightSpacingChecker('none') && react_1.default.createElement(hybrid_1.Spacing, { size: "spacing_c", spacingType: "width" }))),
|
|
144
145
|
(displayType === 'ibtn_amount1' ||
|
|
145
146
|
displayType === 'ibtn_amount2' ||
|
|
@@ -168,7 +169,10 @@ var S_BasicListItemBox = styled_components_1.default.div(templateObject_2 || (te
|
|
|
168
169
|
var spacingMode = _a.spacingMode, theme = _a.theme;
|
|
169
170
|
return spacingMode === 'use' && "0 " + theme.spacing.spacingC;
|
|
170
171
|
});
|
|
171
|
-
var S_LeftBox = styled_components_1.default.div(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n align-items: center;\n display: flex;\n flex:
|
|
172
|
+
var S_LeftBox = styled_components_1.default.div(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n align-items: center;\n display: flex;\n flex: ", ";\n width: 100%;\n"], ["\n align-items: center;\n display: flex;\n flex: ", ";\n width: 100%;\n"])), function (_a) {
|
|
173
|
+
var onlyLeftArea = _a.onlyLeftArea;
|
|
174
|
+
return (onlyLeftArea ? 'auto' : 7);
|
|
175
|
+
});
|
|
172
176
|
var S_SelectionBoxWrapper = styled_components_1.default.div(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n align-items: center;\n display: flex;\n height: 40px;\n justify-content: center;\n width: 40px;\n"], ["\n align-items: center;\n display: flex;\n height: 40px;\n justify-content: center;\n width: 40px;\n"])));
|
|
173
177
|
var S_IconWrapper = styled_components_1.default.div(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n align-items: center;\n display: flex;\n justify-content: center;\n"], ["\n align-items: center;\n display: flex;\n justify-content: center;\n"])));
|
|
174
178
|
var S_TextBox = styled_components_1.default.div(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n align-items: flex-start;\n display: flex;\n flex-direction: column;\n justify-content: center;\n width: 100%;\n"], ["\n align-items: flex-start;\n display: flex;\n flex-direction: column;\n justify-content: center;\n width: 100%;\n"])));
|
package/package.json
CHANGED
package/release-note.md
CHANGED
|
@@ -1,17 +1,9 @@
|
|
|
1
1
|
# PDS-DEV-KIT-WEB Release Notes
|
|
2
|
-
## [v1.5.
|
|
2
|
+
## [v1.5.11]
|
|
3
3
|
|
|
4
4
|
### Component
|
|
5
|
-
*
|
|
6
|
-
*
|
|
7
|
-
* Icon
|
|
8
|
-
* 잘못된 iconName이 부여되었을때 ic_unavailable로 표시되도록 수정
|
|
9
|
-
* UploadIconButton
|
|
10
|
-
* 직전에 올린 파일도 다시 올릴 수 있도록 수정
|
|
11
|
-
* UploadMainButton
|
|
12
|
-
* 직전에 올린 파일도 다시 올릴 수 있도록 수정
|
|
13
|
-
* UploadTextButton
|
|
14
|
-
* 직전에 올린 파일도 다시 올릴 수 있도록 수정
|
|
5
|
+
* DynamicDesktopNavBar
|
|
6
|
+
* PrimaryMenu들을 좌우로 스크롤 해주는 버튼의 배경 컬러키 변경
|
|
15
7
|
|
|
16
8
|
### Color
|
|
17
|
-
* 컬러 키 값 22.11.
|
|
9
|
+
* 컬러 키 값 22.11.10 12시 40분 기준 싱크
|