pds-dev-kit-web 1.5.9 → 1.5.10
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/desktop/components/BasicListItem/BasicListItem.d.ts +1 -0
- package/dist/src/desktop/components/BasicListItem/BasicListItem.js +8 -4
- 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 +5 -14
|
@@ -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"])));
|
|
@@ -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,8 @@
|
|
|
1
1
|
# PDS-DEV-KIT-WEB Release Notes
|
|
2
|
-
## [v1.5.
|
|
2
|
+
## [v1.5.10]
|
|
3
3
|
|
|
4
4
|
### Component
|
|
5
|
-
*
|
|
6
|
-
*
|
|
7
|
-
*
|
|
8
|
-
*
|
|
9
|
-
* UploadIconButton
|
|
10
|
-
* 직전에 올린 파일도 다시 올릴 수 있도록 수정
|
|
11
|
-
* UploadMainButton
|
|
12
|
-
* 직전에 올린 파일도 다시 올릴 수 있도록 수정
|
|
13
|
-
* UploadTextButton
|
|
14
|
-
* 직전에 올린 파일도 다시 올릴 수 있도록 수정
|
|
15
|
-
|
|
16
|
-
### Color
|
|
17
|
-
* 컬러 키 값 22.11.08 12시 10분 기준 싱크
|
|
5
|
+
* BasicListItem
|
|
6
|
+
* captionText의 textAlign을 right에서 left로 변경
|
|
7
|
+
* descText의 textAlign을 left에서 right로 변경
|
|
8
|
+
* displayType가 'none'일 때는 text 들이 전체를 차지할 수 있도록 수정
|