pds-dev-kit-web 1.5.0 → 1.5.1
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
|
@@ -1,12 +1,14 @@
|
|
|
1
1
|
/// <reference types="react" />
|
|
2
|
-
import { FillIconNameKeys, LineIconNameKeys, PDSTextType, PDSValueOption } from '../../../common';
|
|
2
|
+
import { FillIconNameKeys, LineIconNameKeys, PDSTextType, PDSValueOption, UiColors } from '../../../common';
|
|
3
3
|
declare type DisplayType = 'category_choice' | 'filter_single' | 'filter_multi' | 'removable' | 'label' | 'time' | 'information';
|
|
4
4
|
export declare type ChipProps = {
|
|
5
5
|
displayType?: DisplayType;
|
|
6
|
+
text?: PDSTextType;
|
|
6
7
|
filterIconMode?: 'none' | 'left';
|
|
7
8
|
iconFillType?: 'line' | 'fill';
|
|
8
9
|
iconName?: FillIconNameKeys | LineIconNameKeys;
|
|
9
|
-
|
|
10
|
+
overrideTextColorKey?: UiColors;
|
|
11
|
+
overrideBackgroundColorKey?: UiColors;
|
|
10
12
|
value?: PDSValueOption['value'];
|
|
11
13
|
id?: PDSValueOption['value'];
|
|
12
14
|
onClickChip?: () => void;
|
|
@@ -16,5 +18,5 @@ export declare type ChipProps = {
|
|
|
16
18
|
/** @deprecated id 필드를 대신 사용하세요. */
|
|
17
19
|
chipId?: string | number;
|
|
18
20
|
};
|
|
19
|
-
export default function Chip({ displayType, filterIconMode, iconFillType, iconName,
|
|
21
|
+
export default function Chip({ displayType, text, filterIconMode, iconFillType, iconName, overrideTextColorKey, overrideBackgroundColorKey, value, id, activeChipId, chipId, onClickChip, onClickXMarkIcon }: ChipProps): JSX.Element;
|
|
20
22
|
export {};
|
|
@@ -32,7 +32,7 @@ var hybrid_1 = require("../../../hybrid");
|
|
|
32
32
|
var Icon_1 = require("../../../hybrid/components/Icon");
|
|
33
33
|
var TextLabel_1 = require("../TextLabel");
|
|
34
34
|
function Chip(_a) {
|
|
35
|
-
var _b = _a.displayType, displayType = _b === void 0 ? 'filter_single' : _b, _c = _a.filterIconMode, filterIconMode = _c === void 0 ? 'none' : _c, _d = _a.iconFillType, iconFillType = _d === void 0 ? 'line' : _d, iconName = _a.iconName,
|
|
35
|
+
var _b = _a.displayType, displayType = _b === void 0 ? 'filter_single' : _b, text = _a.text, _c = _a.filterIconMode, filterIconMode = _c === void 0 ? 'none' : _c, _d = _a.iconFillType, iconFillType = _d === void 0 ? 'line' : _d, iconName = _a.iconName, overrideTextColorKey = _a.overrideTextColorKey, overrideBackgroundColorKey = _a.overrideBackgroundColorKey, value = _a.value, id = _a.id, activeChipId = _a.activeChipId, chipId = _a.chipId, onClickChip = _a.onClickChip, onClickXMarkIcon = _a.onClickXMarkIcon;
|
|
36
36
|
var isActive = (0, react_1.useMemo)(function () {
|
|
37
37
|
if (activeChipId !== undefined && chipId !== undefined) {
|
|
38
38
|
return activeChipId === chipId;
|
|
@@ -65,8 +65,8 @@ function Chip(_a) {
|
|
|
65
65
|
react_1.default.createElement(hybrid_1.Spacing, { size: "spacing_a", spacingType: "width" }),
|
|
66
66
|
react_1.default.createElement(Icon_1.Icon, { size: 12, fillType: "line", iconName: "ic_xmark", colorKey: "ui_cpnt_chip_fill_icon_active_01" })))));
|
|
67
67
|
case 'information':
|
|
68
|
-
return (react_1.default.createElement(S_InfoChip, { onClick: handleClickChip },
|
|
69
|
-
react_1.default.createElement(TextLabel_1.TextLabel, { text: text, styleTheme: "caption2Regular", singleLineMode: "use", colorTheme: "sysTextPrimary", ellipsisMode: "use", lineLimit: 1, wordBreak: "break_all" })));
|
|
68
|
+
return (react_1.default.createElement(S_InfoChip, { onClick: handleClickChip, overrideBackgroundColorKey: overrideBackgroundColorKey },
|
|
69
|
+
react_1.default.createElement(TextLabel_1.TextLabel, { text: text, styleTheme: "caption2Regular", singleLineMode: "use", colorTheme: "sysTextPrimary", colorOverride: overrideTextColorKey, ellipsisMode: "use", lineLimit: 1, wordBreak: "break_all" })));
|
|
70
70
|
case 'label':
|
|
71
71
|
return (react_1.default.createElement(S_LabelChip, { onClick: handleClickChip },
|
|
72
72
|
react_1.default.createElement(TextLabel_1.TextLabel, { text: text, styleTheme: "caption2Bold", singleLineMode: "use", colorTheme: "sysTextTertiary", ellipsisMode: "use", lineLimit: 1, wordBreak: "break_all" })));
|
|
@@ -105,8 +105,10 @@ var S_CategoryChoiceChip = styled_components_1.default.div(templateObject_1 || (
|
|
|
105
105
|
return isActive ? '' : "border: 1px solid " + theme.ui_cpnt_chip_line_border_01;
|
|
106
106
|
});
|
|
107
107
|
var S_InfoChip = styled_components_1.default.span(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n align-items: center;\n background-color: ", ";\n border-radius: 12px;\n box-sizing: border-box;\n display: flex;\n height: 24px;\n padding-left: ", ";\n padding-right: ", ";\n\n & > div {\n height: 24px;\n line-height: 24px;\n }\n"], ["\n align-items: center;\n background-color: ", ";\n border-radius: 12px;\n box-sizing: border-box;\n display: flex;\n height: 24px;\n padding-left: ", ";\n padding-right: ", ";\n\n & > div {\n height: 24px;\n line-height: 24px;\n }\n"])), function (_a) {
|
|
108
|
-
var theme = _a.theme;
|
|
109
|
-
return
|
|
108
|
+
var theme = _a.theme, overrideBackgroundColorKey = _a.overrideBackgroundColorKey;
|
|
109
|
+
return overrideBackgroundColorKey
|
|
110
|
+
? theme[overrideBackgroundColorKey]
|
|
111
|
+
: theme.ui_cpnt_chip_fill_base_inactive;
|
|
110
112
|
}, function (_a) {
|
|
111
113
|
var theme = _a.theme;
|
|
112
114
|
return theme.spacing.spacingC;
|
|
@@ -1,12 +1,14 @@
|
|
|
1
1
|
/// <reference types="react" />
|
|
2
|
-
import { FillIconNameKeys, LineIconNameKeys, PDSTextType, PDSValueOption } from '../../../common';
|
|
2
|
+
import { FillIconNameKeys, LineIconNameKeys, PDSTextType, PDSValueOption, UiColors } from '../../../common';
|
|
3
3
|
declare type DisplayType = 'category_choice' | 'filter_single' | 'filter_multi' | 'removable' | 'label' | 'time' | 'information';
|
|
4
4
|
export declare type ChipProps = {
|
|
5
5
|
displayType?: DisplayType;
|
|
6
|
+
text?: PDSTextType;
|
|
6
7
|
filterIconMode?: 'none' | 'left';
|
|
7
8
|
iconFillType?: 'line' | 'fill';
|
|
8
9
|
iconName?: FillIconNameKeys | LineIconNameKeys;
|
|
9
|
-
|
|
10
|
+
overrideTextColorKey?: UiColors;
|
|
11
|
+
overrideBackgroundColorKey?: UiColors;
|
|
10
12
|
value?: PDSValueOption['value'];
|
|
11
13
|
id?: PDSValueOption['value'];
|
|
12
14
|
onClickChip?: () => void;
|
|
@@ -16,5 +18,5 @@ export declare type ChipProps = {
|
|
|
16
18
|
/** @deprecated id 필드를 대신 사용하세요. */
|
|
17
19
|
chipId?: string | number;
|
|
18
20
|
};
|
|
19
|
-
export default function Chip({ displayType, filterIconMode, iconFillType, iconName,
|
|
21
|
+
export default function Chip({ displayType, text, filterIconMode, iconFillType, iconName, overrideTextColorKey, overrideBackgroundColorKey, value, id, onClickChip, onClickXMarkIcon, activeChipId, chipId }: ChipProps): JSX.Element;
|
|
20
22
|
export {};
|
|
@@ -32,7 +32,7 @@ var hybrid_1 = require("../../../hybrid");
|
|
|
32
32
|
var Icon_1 = require("../../../hybrid/components/Icon");
|
|
33
33
|
var TextLabel_1 = require("../TextLabel");
|
|
34
34
|
function Chip(_a) {
|
|
35
|
-
var _b = _a.displayType, displayType = _b === void 0 ? 'filter_single' : _b, _c = _a.filterIconMode, filterIconMode = _c === void 0 ? 'none' : _c, _d = _a.iconFillType, iconFillType = _d === void 0 ? 'line' : _d, iconName = _a.iconName,
|
|
35
|
+
var _b = _a.displayType, displayType = _b === void 0 ? 'filter_single' : _b, text = _a.text, _c = _a.filterIconMode, filterIconMode = _c === void 0 ? 'none' : _c, _d = _a.iconFillType, iconFillType = _d === void 0 ? 'line' : _d, iconName = _a.iconName, overrideTextColorKey = _a.overrideTextColorKey, overrideBackgroundColorKey = _a.overrideBackgroundColorKey, value = _a.value, id = _a.id, onClickChip = _a.onClickChip, onClickXMarkIcon = _a.onClickXMarkIcon, activeChipId = _a.activeChipId, chipId = _a.chipId;
|
|
36
36
|
var isActive = (0, react_1.useMemo)(function () {
|
|
37
37
|
if (activeChipId !== undefined && chipId !== undefined) {
|
|
38
38
|
return activeChipId === chipId;
|
|
@@ -65,8 +65,8 @@ function Chip(_a) {
|
|
|
65
65
|
react_1.default.createElement(hybrid_1.Spacing, { size: "spacing_a", spacingType: "width" }),
|
|
66
66
|
react_1.default.createElement(Icon_1.Icon, { size: 12, fillType: "line", iconName: "ic_xmark", colorKey: "ui_cpnt_chip_fill_icon_active_01" })))));
|
|
67
67
|
case 'information':
|
|
68
|
-
return (react_1.default.createElement(S_InfoChip, { onClick: handleClickChip },
|
|
69
|
-
react_1.default.createElement(TextLabel_1.TextLabel, { text: text, styleTheme: "caption2Regular", singleLineMode: "use", colorTheme: "sysTextPrimary", ellipsisMode: "use", lineLimit: 1, wordBreak: "break_all" })));
|
|
68
|
+
return (react_1.default.createElement(S_InfoChip, { onClick: handleClickChip, overrideBackgroundColorKey: overrideBackgroundColorKey },
|
|
69
|
+
react_1.default.createElement(TextLabel_1.TextLabel, { text: text, styleTheme: "caption2Regular", singleLineMode: "use", colorTheme: "sysTextPrimary", colorOverride: overrideTextColorKey, ellipsisMode: "use", lineLimit: 1, wordBreak: "break_all" })));
|
|
70
70
|
case 'label':
|
|
71
71
|
return (react_1.default.createElement(S_LabelChip, { onClick: handleClickChip },
|
|
72
72
|
react_1.default.createElement(TextLabel_1.TextLabel, { text: text, styleTheme: "caption2Bold", singleLineMode: "use", colorTheme: "sysTextTertiary", ellipsisMode: "use", lineLimit: 1, wordBreak: "break_all" })));
|
|
@@ -102,8 +102,10 @@ var S_CategoryChoiceChip = styled_components_1.default.div(templateObject_1 || (
|
|
|
102
102
|
return isActive ? '' : "border: 1px solid " + theme.ui_cpnt_chip_line_border_01;
|
|
103
103
|
});
|
|
104
104
|
var S_InfoChip = styled_components_1.default.span(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n align-items: center;\n background-color: ", ";\n border-radius: 12px;\n box-sizing: border-box;\n display: flex;\n height: 24px;\n padding-left: ", ";\n padding-right: ", ";\n\n & > div {\n height: 24px;\n line-height: 24px;\n }\n"], ["\n align-items: center;\n background-color: ", ";\n border-radius: 12px;\n box-sizing: border-box;\n display: flex;\n height: 24px;\n padding-left: ", ";\n padding-right: ", ";\n\n & > div {\n height: 24px;\n line-height: 24px;\n }\n"])), function (_a) {
|
|
105
|
-
var theme = _a.theme;
|
|
106
|
-
return
|
|
105
|
+
var theme = _a.theme, overrideBackgroundColorKey = _a.overrideBackgroundColorKey;
|
|
106
|
+
return overrideBackgroundColorKey
|
|
107
|
+
? theme[overrideBackgroundColorKey]
|
|
108
|
+
: theme.ui_cpnt_chip_fill_base_inactive;
|
|
107
109
|
}, function (_a) {
|
|
108
110
|
var theme = _a.theme;
|
|
109
111
|
return theme.spacing.spacingC;
|
package/package.json
CHANGED
package/release-note.md
CHANGED
|
@@ -1,11 +1,9 @@
|
|
|
1
1
|
# PDS-DEV-KIT-WEB Release Notes
|
|
2
|
-
## [v1.5.
|
|
2
|
+
## [v1.5.1]
|
|
3
3
|
|
|
4
|
+
### Package
|
|
5
|
+
* publ 도메인에서 asset 쓰는 부분 삭제
|
|
4
6
|
### Component
|
|
5
|
-
*
|
|
6
|
-
*
|
|
7
|
-
|
|
8
|
-
### Panel
|
|
9
|
-
* ContentSheet 신규 출시
|
|
10
|
-
* AnnotationSheet 신규 출시
|
|
11
|
-
* SectionSheet 신규 출시
|
|
7
|
+
* Chip
|
|
8
|
+
* overrideTextColorKey prop 추가
|
|
9
|
+
* overrideBackgroundColorKey prop 추가
|