pds-dev-kit-web 1.3.2 → 1.3.5
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/line/MinusCircle.d.ts +4 -0
- package/dist/src/common/assets/icons/line/MinusCircle.js +36 -0
- package/dist/src/common/assets/icons/line/PappType.d.ts +4 -0
- package/dist/src/common/assets/icons/line/PappType.js +37 -0
- package/dist/src/common/assets/icons/line/index.d.ts +2 -0
- package/dist/src/common/assets/icons/line/index.js +4 -0
- package/dist/src/common/index.d.ts +2 -2
- package/dist/src/common/styles/colorSet/PaletteColor_Dark.json +2 -1
- package/dist/src/common/styles/colorSet/PaletteColor_light.json +2 -1
- package/dist/src/common/styles/colorSet/UIColor.json +2 -1
- package/dist/src/common/styles/colorSet/index.d.ts +60 -57
- package/dist/src/common/styles/colorSet/index.js +3 -3
- package/dist/src/common/styles/colorSet/ui-type.d.ts +1 -0
- package/dist/src/common/types/comopnents.d.ts +5 -0
- package/dist/src/common/types/comopnents.js +2 -0
- package/dist/src/common/types/index.d.ts +1 -0
- package/dist/src/common/types/index.js +1 -0
- package/dist/src/desktop/components/AdminList/AdminList.d.ts +12 -12
- package/dist/src/desktop/components/AdminList/AdminList.js +14 -57
- package/dist/src/desktop/components/AdminList/BulkActionBar.d.ts +10 -10
- package/dist/src/desktop/components/AdminList/BulkActionBar.js +6 -6
- package/dist/src/desktop/components/AdminList/HeaderRow.js +5 -9
- package/dist/src/desktop/components/AdminListHeader/AdminListHeader.d.ts +3 -3
- package/dist/src/desktop/components/AdminListHeader/AdminListHeader.js +19 -5
- package/dist/src/desktop/components/AdminListHeader/HeaderBar.d.ts +3 -3
- package/dist/src/desktop/components/AdminListHeader/HeaderBar.js +1 -1
- package/dist/src/desktop/components/AdminListItem/AdminListItem.js +28 -23
- package/dist/src/desktop/components/Chip/Chip.d.ts +9 -5
- package/dist/src/desktop/components/Chip/Chip.js +45 -18
- package/dist/src/desktop/components/ContextMenuItem/ContextMenuItem.d.ts +8 -5
- package/dist/src/desktop/components/ContextMenuItem/ContextMenuItem.js +8 -3
- package/dist/src/desktop/components/Dropdown/Dropdown.d.ts +4 -7
- package/dist/src/desktop/components/Dropdown/Dropdown.js +9 -4
- package/dist/src/desktop/components/FilterBar/FilterBar.d.ts +8 -10
- package/dist/src/desktop/components/FilterBar/FilterBar.js +7 -15
- package/dist/src/desktop/components/TextLabel/TextLabel.js +1 -1
- package/dist/src/desktop/components/UserDesktopNavBar/UserDesktopNavBar.d.ts +2 -7
- package/dist/src/desktop/components/UserDesktopNavBar/UserDesktopNavBar.js +4 -4
- package/dist/src/mobile/components/Chip/Chip.d.ts +9 -5
- package/dist/src/mobile/components/Chip/Chip.js +52 -28
- package/dist/src/mobile/components/ContextMenuItem/ContextMenuItem.d.ts +8 -5
- package/dist/src/mobile/components/ContextMenuItem/ContextMenuItem.js +8 -3
- package/dist/src/mobile/components/Dropdown/Dropdown.d.ts +6 -8
- package/dist/src/mobile/components/Dropdown/Dropdown.js +9 -4
- package/dist/src/mobile/components/TextLabel/TextLabel.js +1 -1
- package/package.json +1 -1
- package/release-note.md +47 -3
|
@@ -1,16 +1,20 @@
|
|
|
1
1
|
/// <reference types="react" />
|
|
2
|
-
import { FillIconNameKeys, LineIconNameKeys, PDSTextType } from '../../../common';
|
|
2
|
+
import { FillIconNameKeys, LineIconNameKeys, PDSTextType, PDSValueOption } 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;
|
|
7
6
|
filterIconMode?: 'none' | 'left';
|
|
8
7
|
iconFillType?: 'line' | 'fill';
|
|
9
8
|
iconName?: FillIconNameKeys | LineIconNameKeys;
|
|
10
|
-
|
|
11
|
-
|
|
9
|
+
text?: PDSTextType;
|
|
10
|
+
value?: PDSValueOption['value'];
|
|
11
|
+
id?: PDSValueOption['value'];
|
|
12
12
|
onClickChip?: () => void;
|
|
13
13
|
onClickXMarkIcon?: () => void;
|
|
14
|
+
/** @deprecated value 필드를 대신 사용하세요. */
|
|
15
|
+
activeChipId?: string | number;
|
|
16
|
+
/** @deprecated id 필드를 대신 사용하세요. */
|
|
17
|
+
chipId?: string | number;
|
|
14
18
|
};
|
|
15
|
-
export default function Chip({ displayType,
|
|
19
|
+
export default function Chip({ displayType, filterIconMode, iconFillType, iconName, text, value, id, onClickChip, onClickXMarkIcon, activeChipId, chipId }: ChipProps): JSX.Element;
|
|
16
20
|
export {};
|
|
@@ -3,22 +3,51 @@ var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cook
|
|
|
3
3
|
if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
|
|
4
4
|
return cooked;
|
|
5
5
|
};
|
|
6
|
+
var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
|
|
7
|
+
if (k2 === undefined) k2 = k;
|
|
8
|
+
Object.defineProperty(o, k2, { enumerable: true, get: function() { return m[k]; } });
|
|
9
|
+
}) : (function(o, m, k, k2) {
|
|
10
|
+
if (k2 === undefined) k2 = k;
|
|
11
|
+
o[k2] = m[k];
|
|
12
|
+
}));
|
|
13
|
+
var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
|
|
14
|
+
Object.defineProperty(o, "default", { enumerable: true, value: v });
|
|
15
|
+
}) : function(o, v) {
|
|
16
|
+
o["default"] = v;
|
|
17
|
+
});
|
|
18
|
+
var __importStar = (this && this.__importStar) || function (mod) {
|
|
19
|
+
if (mod && mod.__esModule) return mod;
|
|
20
|
+
var result = {};
|
|
21
|
+
if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
|
|
22
|
+
__setModuleDefault(result, mod);
|
|
23
|
+
return result;
|
|
24
|
+
};
|
|
6
25
|
var __importDefault = (this && this.__importDefault) || function (mod) {
|
|
7
26
|
return (mod && mod.__esModule) ? mod : { "default": mod };
|
|
8
27
|
};
|
|
9
28
|
Object.defineProperty(exports, "__esModule", { value: true });
|
|
10
|
-
var react_1 =
|
|
29
|
+
var react_1 = __importStar(require("react"));
|
|
11
30
|
var styled_components_1 = __importDefault(require("styled-components"));
|
|
12
|
-
var
|
|
31
|
+
var Icon_1 = require("../../../hybrid/components/Icon");
|
|
13
32
|
var TextLabel_1 = require("../TextLabel");
|
|
14
33
|
function Chip(_a) {
|
|
15
|
-
var _b = _a.displayType, displayType = _b === void 0 ? 'filter_single' : _b,
|
|
16
|
-
var
|
|
34
|
+
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, text = _a.text, value = _a.value, id = _a.id, onClickChip = _a.onClickChip, onClickXMarkIcon = _a.onClickXMarkIcon, activeChipId = _a.activeChipId, chipId = _a.chipId;
|
|
35
|
+
var isActive = (0, react_1.useMemo)(function () {
|
|
36
|
+
if (activeChipId !== undefined && chipId !== undefined) {
|
|
37
|
+
return activeChipId === chipId;
|
|
38
|
+
}
|
|
39
|
+
if (value !== undefined && id !== undefined) {
|
|
40
|
+
return value === id;
|
|
41
|
+
}
|
|
42
|
+
return false;
|
|
43
|
+
}, [activeChipId, chipId, value, id]);
|
|
44
|
+
var handleClickChip = function () {
|
|
17
45
|
if (onClickChip) {
|
|
18
46
|
onClickChip();
|
|
19
47
|
}
|
|
20
48
|
};
|
|
21
|
-
var handleClickXMarkIcon = function () {
|
|
49
|
+
var handleClickXMarkIcon = function (e) {
|
|
50
|
+
e.stopPropagation();
|
|
22
51
|
if (onClickXMarkIcon) {
|
|
23
52
|
onClickXMarkIcon();
|
|
24
53
|
}
|
|
@@ -26,39 +55,37 @@ function Chip(_a) {
|
|
|
26
55
|
var chipType = function () {
|
|
27
56
|
switch (displayType) {
|
|
28
57
|
case 'category_choice':
|
|
29
|
-
return (react_1.default.createElement(S_CategoryChoiceChip, { isActive:
|
|
30
|
-
|
|
31
|
-
react_1.default.createElement(
|
|
32
|
-
react_1.default.createElement(TextLabel_1.TextLabel, { text: text, styleTheme: "caption1Regular", singleLineMode: "use", colorTheme:
|
|
33
|
-
|
|
34
|
-
react_1.default.createElement(
|
|
58
|
+
return (react_1.default.createElement(S_CategoryChoiceChip, { isActive: isActive, onClick: handleClickChip },
|
|
59
|
+
id !== value && (react_1.default.createElement(S_CategoryIconWrapper, { isActive: isActive },
|
|
60
|
+
react_1.default.createElement(Icon_1.Icon, { size: 16, fillType: "line", iconName: "ic_filter", colorKey: "ui_cpnt_chip_line_icon_01" }))),
|
|
61
|
+
react_1.default.createElement(TextLabel_1.TextLabel, { text: text, styleTheme: "caption1Regular", singleLineMode: "use", colorTheme: isActive ? 'usrTextBrandOnPrimary' : 'sysTextPrimary' }),
|
|
62
|
+
isActive && (react_1.default.createElement(S_CategoryIconWrapper, { isActive: isActive },
|
|
63
|
+
react_1.default.createElement(Icon_1.Icon, { size: 12, fillType: "line", iconName: "ic_xmark", colorKey: "ui_cpnt_chip_fill_icon_active_01" })))));
|
|
35
64
|
case 'information':
|
|
36
|
-
return (react_1.default.createElement(S_InfoChip, { onClick:
|
|
65
|
+
return (react_1.default.createElement(S_InfoChip, { onClick: handleClickChip },
|
|
37
66
|
react_1.default.createElement(TextLabel_1.TextLabel, { text: text, styleTheme: "caption2Regular", singleLineMode: "use", colorTheme: "sysTextPrimary" })));
|
|
38
67
|
case 'label':
|
|
39
|
-
return (react_1.default.createElement(S_LabelChip, { onClick:
|
|
68
|
+
return (react_1.default.createElement(S_LabelChip, { onClick: handleClickChip },
|
|
40
69
|
react_1.default.createElement(TextLabel_1.TextLabel, { text: text, styleTheme: "caption2Bold", singleLineMode: "use", colorTheme: "sysTextTertiary" })));
|
|
41
70
|
case 'time':
|
|
42
|
-
return (react_1.default.createElement(S_TimeChip, { onClick:
|
|
71
|
+
return (react_1.default.createElement(S_TimeChip, { onClick: handleClickChip },
|
|
43
72
|
react_1.default.createElement(TextLabel_1.TextLabel, { text: text, styleTheme: "caption2Bold", singleLineMode: "use", colorTheme: "sysTextWhite" })));
|
|
44
73
|
case 'removable':
|
|
45
|
-
return (react_1.default.createElement(S_RemovableChip, { onClick:
|
|
74
|
+
return (react_1.default.createElement(S_RemovableChip, { onClick: handleClickChip },
|
|
46
75
|
react_1.default.createElement(TextLabel_1.TextLabel, { text: text, styleTheme: "caption1Regular", singleLineMode: "use", colorTheme: "sysTextSecondary" }),
|
|
47
76
|
react_1.default.createElement(S_XIconWrapper, { onClick: handleClickXMarkIcon },
|
|
48
|
-
react_1.default.createElement(
|
|
77
|
+
react_1.default.createElement(Icon_1.Icon, { size: 12, iconName: "ic_xmark", fillType: "line", colorKey: "ui_cpnt_chip_fill_icon_inactive" }))));
|
|
49
78
|
default:
|
|
50
|
-
return (react_1.default.createElement(S_FilterSingleChip, { isActive:
|
|
79
|
+
return (react_1.default.createElement(S_FilterSingleChip, { isActive: isActive, onClick: handleClickChip },
|
|
51
80
|
filterIconMode === 'left' && (react_1.default.createElement(S_FilterIconWrapper, null,
|
|
52
|
-
react_1.default.createElement(
|
|
53
|
-
|
|
54
|
-
: 'ui_cpnt_chip_line_icon_02' }))),
|
|
55
|
-
react_1.default.createElement(TextLabel_1.TextLabel, { text: text, styleTheme: "caption1Regular", singleLineMode: "use", colorTheme: chipId === activeChipId ? 'usrTextBrandOnPrimary' : 'sysTextSecondary' })));
|
|
81
|
+
react_1.default.createElement(Icon_1.Icon, { fillType: iconFillType, iconName: iconName, size: 16, colorKey: isActive ? 'ui_cpnt_chip_fill_icon_active_01' : 'ui_cpnt_chip_line_icon_02' }))),
|
|
82
|
+
react_1.default.createElement(TextLabel_1.TextLabel, { text: text, styleTheme: "caption1Regular", singleLineMode: "use", colorTheme: isActive ? 'usrTextBrandOnPrimary' : 'sysTextSecondary' })));
|
|
56
83
|
}
|
|
57
84
|
};
|
|
58
85
|
return react_1.default.createElement(S_ChipWrapper, null, chipType());
|
|
59
86
|
}
|
|
60
87
|
exports.default = Chip;
|
|
61
|
-
var S_CategoryChoiceChip = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n border-radius: 16px;\n box-sizing: border-box;\n background-color: ", ";\n display: flex;\n align-items: center;\n justify-content: center;\n height: 32px;\n padding-left: ", ";\n padding-right: ", ";\n
|
|
88
|
+
var S_CategoryChoiceChip = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n border-radius: 16px;\n box-sizing: border-box;\n background-color: ", ";\n display: flex;\n align-items: center;\n justify-content: center;\n height: 32px;\n padding-left: ", ";\n padding-right: ", ";\n gap: 4px;\n ", ";\n"], ["\n border-radius: 16px;\n box-sizing: border-box;\n background-color: ", ";\n display: flex;\n align-items: center;\n justify-content: center;\n height: 32px;\n padding-left: ", ";\n padding-right: ", ";\n gap: 4px;\n ", ";\n"])), function (_a) {
|
|
62
89
|
var theme = _a.theme, isActive = _a.isActive;
|
|
63
90
|
return isActive ? theme.ui_cpnt_chip_fill_base_active_01 : '';
|
|
64
91
|
}, function (_a) {
|
|
@@ -67,9 +94,6 @@ var S_CategoryChoiceChip = styled_components_1.default.div(templateObject_1 || (
|
|
|
67
94
|
}, function (_a) {
|
|
68
95
|
var theme = _a.theme;
|
|
69
96
|
return theme.spacing.spacingC;
|
|
70
|
-
}, function (_a) {
|
|
71
|
-
var theme = _a.theme, isActive = _a.isActive;
|
|
72
|
-
return isActive ? '' : theme.ui_cpnt_chip_fill_base_inactive;
|
|
73
97
|
}, function (_a) {
|
|
74
98
|
var theme = _a.theme, isActive = _a.isActive;
|
|
75
99
|
return isActive ? '' : "border: 1px solid " + theme.ui_cpnt_chip_line_border_01;
|
|
@@ -90,7 +114,7 @@ var S_InfoChip = styled_components_1.default.span(templateObject_3 || (templateO
|
|
|
90
114
|
var theme = _a.theme;
|
|
91
115
|
return theme.spacing.spacingC;
|
|
92
116
|
});
|
|
93
|
-
var S_RemovableChip = styled_components_1.default.div(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n background-color: ", ";\n border-radius: 16px;\n height: 32px;\n display: flex;\n align-items: center;\n justify-content: center;\n padding-left: ", ";\n padding-right: ", ";\n
|
|
117
|
+
var S_RemovableChip = styled_components_1.default.div(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n background-color: ", ";\n border-radius: 16px;\n height: 32px;\n display: flex;\n align-items: center;\n justify-content: center;\n padding-left: ", ";\n padding-right: ", ";\n"], ["\n background-color: ", ";\n border-radius: 16px;\n height: 32px;\n display: flex;\n align-items: center;\n justify-content: center;\n padding-left: ", ";\n padding-right: ", ";\n"])), function (_a) {
|
|
94
118
|
var theme = _a.theme;
|
|
95
119
|
return theme.ui_cpnt_chip_fill_base_inactive;
|
|
96
120
|
}, function (_a) {
|
|
@@ -100,11 +124,11 @@ var S_RemovableChip = styled_components_1.default.div(templateObject_4 || (templ
|
|
|
100
124
|
var theme = _a.theme;
|
|
101
125
|
return theme.spacing.spacingC;
|
|
102
126
|
});
|
|
103
|
-
var S_XIconWrapper = styled_components_1.default.div(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n
|
|
127
|
+
var S_XIconWrapper = styled_components_1.default.div(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n margin-left: ", ";\n"], ["\n margin-left: ", ";\n"])), function (_a) {
|
|
104
128
|
var theme = _a.theme;
|
|
105
129
|
return theme.spacing.spacingB;
|
|
106
130
|
});
|
|
107
|
-
var S_FilterSingleChip = styled_components_1.default.div(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n border-radius: 16px;\n background-color: ", ";\n display: flex;\n align-items: center;\n justify-content: center;\n height: 32px;\n padding-left: ", ";\n padding-right: ", ";\n
|
|
131
|
+
var S_FilterSingleChip = styled_components_1.default.div(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n border-radius: 16px;\n background-color: ", ";\n display: flex;\n align-items: center;\n justify-content: center;\n height: 32px;\n padding-left: ", ";\n padding-right: ", ";\n"], ["\n border-radius: 16px;\n background-color: ", ";\n display: flex;\n align-items: center;\n justify-content: center;\n height: 32px;\n padding-left: ", ";\n padding-right: ", ";\n"])), function (_a) {
|
|
108
132
|
var theme = _a.theme, isActive = _a.isActive;
|
|
109
133
|
return isActive ? theme.ui_cpnt_chip_fill_base_active_01 : theme.ui_cpnt_chip_fill_base_inactive;
|
|
110
134
|
}, function (_a) {
|
|
@@ -1,11 +1,14 @@
|
|
|
1
1
|
/// <reference types="react" />
|
|
2
|
-
import { PDSTextType } from '../../../common';
|
|
2
|
+
import { PDSTextType, PDSValueOption } from '../../../common';
|
|
3
3
|
export declare type ContextMenuItemProps = {
|
|
4
|
-
|
|
4
|
+
option?: PDSValueOption;
|
|
5
5
|
size?: 'large' | 'medium' | 'small';
|
|
6
|
-
value: string | number | boolean;
|
|
7
6
|
isSelected?: boolean;
|
|
8
|
-
onClick
|
|
7
|
+
onClick?: (value: PDSValueOption | string | number | boolean) => void;
|
|
8
|
+
/** @deprecated option 필드를 대신 사용하세요. */
|
|
9
|
+
text?: PDSTextType;
|
|
10
|
+
/** @deprecated option 필드를 대신 사용하세요. */
|
|
11
|
+
value?: string | number | boolean;
|
|
9
12
|
};
|
|
10
|
-
declare function ContextMenuItem({
|
|
13
|
+
declare function ContextMenuItem({ option, size, isSelected, onClick, text, value }: ContextMenuItemProps): JSX.Element;
|
|
11
14
|
export default ContextMenuItem;
|
|
@@ -30,12 +30,17 @@ var react_1 = __importDefault(require("react"));
|
|
|
30
30
|
var styled_components_1 = __importStar(require("styled-components"));
|
|
31
31
|
var TextLabel_1 = require("../TextLabel");
|
|
32
32
|
function ContextMenuItem(_a) {
|
|
33
|
-
var
|
|
33
|
+
var option = _a.option, _b = _a.size, size = _b === void 0 ? 'small' : _b, _c = _a.isSelected, isSelected = _c === void 0 ? false : _c, onClick = _a.onClick, text = _a.text, value = _a.value;
|
|
34
34
|
var handleClick = function () {
|
|
35
|
-
onClick
|
|
35
|
+
if (onClick && option) {
|
|
36
|
+
onClick(option);
|
|
37
|
+
}
|
|
38
|
+
if (onClick && value) {
|
|
39
|
+
onClick(value);
|
|
40
|
+
}
|
|
36
41
|
};
|
|
37
42
|
return (react_1.default.createElement(S_ContextMenuItem, { size: size, onClick: handleClick, selected: isSelected },
|
|
38
|
-
react_1.default.createElement(TextLabel_1.TextLabel, { text: text, styleTheme: "form2Regular", singleLineMode: "use" })));
|
|
43
|
+
react_1.default.createElement(TextLabel_1.TextLabel, { text: (option === null || option === void 0 ? void 0 : option.text) || text, styleTheme: "form2Regular", singleLineMode: "use" })));
|
|
39
44
|
}
|
|
40
45
|
var large = (0, styled_components_1.css)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n height: 48px;\n padding: 0 ", ";\n"], ["\n height: 48px;\n padding: 0 ", ";\n"])), function (_a) {
|
|
41
46
|
var theme = _a.theme;
|
|
@@ -1,17 +1,15 @@
|
|
|
1
1
|
/// <reference types="react" />
|
|
2
|
-
|
|
3
|
-
|
|
4
|
-
value: string | number | boolean;
|
|
5
|
-
};
|
|
2
|
+
import { TFunctionResult } from 'i18next';
|
|
3
|
+
import { PDSValueOption } from '../../../common';
|
|
6
4
|
declare type Props = {
|
|
7
5
|
size?: 'large' | 'small';
|
|
8
|
-
hintText?:
|
|
9
|
-
defaultValue?:
|
|
10
|
-
valueArray:
|
|
6
|
+
hintText?: TFunctionResult;
|
|
7
|
+
defaultValue?: PDSValueOption;
|
|
8
|
+
valueArray: PDSValueOption[];
|
|
11
9
|
selectMode?: 'one' | 'multi';
|
|
12
10
|
state?: 'normal' | 'read_only' | 'disabled';
|
|
13
11
|
colorTheme?: 'none' | 'dark';
|
|
14
|
-
onChange?: (
|
|
12
|
+
onChange?: (option: PDSValueOption) => void;
|
|
15
13
|
};
|
|
16
14
|
declare function Dropdown({ size, hintText, defaultValue, valueArray, selectMode, state, colorTheme, onChange }: Props): JSX.Element;
|
|
17
15
|
export default Dropdown;
|
|
@@ -34,6 +34,11 @@ function Dropdown(_a) {
|
|
|
34
34
|
var _b = _a.size, size = _b === void 0 ? 'large' : _b, hintText = _a.hintText, defaultValue = _a.defaultValue, valueArray = _a.valueArray, _c = _a.selectMode, selectMode = _c === void 0 ? 'one' : _c, _d = _a.state, state = _d === void 0 ? 'normal' : _d, _e = _a.colorTheme, colorTheme = _e === void 0 ? 'none' : _e, onChange = _a.onChange;
|
|
35
35
|
var _f = (0, react_1.useState)(false), isFocused = _f[0], setIsFocused = _f[1];
|
|
36
36
|
var _g = (0, react_1.useState)(defaultValue), selectedOption = _g[0], setSelectedOption = _g[1];
|
|
37
|
+
(0, react_1.useEffect)(function () {
|
|
38
|
+
if (defaultValue) {
|
|
39
|
+
setSelectedOption(defaultValue);
|
|
40
|
+
}
|
|
41
|
+
}, [defaultValue]);
|
|
37
42
|
var handleClick = function () {
|
|
38
43
|
if (state === 'disabled' || state === 'read_only') {
|
|
39
44
|
return;
|
|
@@ -45,11 +50,11 @@ function Dropdown(_a) {
|
|
|
45
50
|
setIsFocused(false);
|
|
46
51
|
}
|
|
47
52
|
};
|
|
48
|
-
var handleClickOption = function (
|
|
49
|
-
setSelectedOption(
|
|
53
|
+
var handleClickOption = function (option) {
|
|
54
|
+
setSelectedOption(option);
|
|
50
55
|
setIsFocused(false);
|
|
51
56
|
if (onChange) {
|
|
52
|
-
onChange(
|
|
57
|
+
onChange(option);
|
|
53
58
|
}
|
|
54
59
|
};
|
|
55
60
|
var getIconColorKey = function () {
|
|
@@ -99,7 +104,7 @@ function Dropdown(_a) {
|
|
|
99
104
|
react_1.default.createElement(hybrid_1.Icon, { size: 16, fillType: "line", iconName: isFocused ? 'ic_arrow_up' : 'ic_arrow_down', colorKey: getIconColorKey() }),
|
|
100
105
|
react_1.default.createElement(hybrid_1.Spacing, { size: "spacing_d", spacingType: "width" })),
|
|
101
106
|
isFocused && (react_1.default.createElement(S_ContextMenuWrapper, null,
|
|
102
|
-
react_1.default.createElement(ContextMenu_1.ContextMenu, { autoWidthMode: "use" }, valueArray.map(function (el) { return (react_1.default.createElement(ContextMenuItem_1.ContextMenuItem, { key: el.value,
|
|
107
|
+
react_1.default.createElement(ContextMenu_1.ContextMenu, { autoWidthMode: "use" }, valueArray.map(function (el) { return (react_1.default.createElement(ContextMenuItem_1.ContextMenuItem, { key: el.value, option: el, size: size, isSelected: el.value === (selectedOption === null || selectedOption === void 0 ? void 0 : selectedOption.value), onClick: handleClickOption })); }))))));
|
|
103
108
|
}
|
|
104
109
|
var S_TextLabel = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n flex: 1;\n padding-left: ", ";\n padding-right: ", ";\n"], ["\n flex: 1;\n padding-left: ", ";\n padding-right: ", ";\n"])), function (_a) {
|
|
105
110
|
var theme = _a.theme;
|
|
@@ -259,7 +259,7 @@ var ellipsisStyle = (0, styled_components_1.css)(templateObject_30 || (templateO
|
|
|
259
259
|
return lineLimit;
|
|
260
260
|
});
|
|
261
261
|
var userSelectModeStyle = (0, styled_components_1.css)(templateObject_31 || (templateObject_31 = __makeTemplateObject(["\n -ms-user-select: none;\n -moz-user-select: -moz-none;\n -khtml-user-select: none;\n -webkit-user-select: none;\n user-select: none;\n"], ["\n -ms-user-select: none;\n -moz-user-select: -moz-none;\n -khtml-user-select: none;\n -webkit-user-select: none;\n user-select: none;\n"])));
|
|
262
|
-
var S_TextLabel = styled_components_1.default.div(templateObject_32 || (templateObject_32 = __makeTemplateObject(["\n box-sizing: border-box;\n text-align: ", ";\n white-space: pre-wrap;\n word-break:
|
|
262
|
+
var S_TextLabel = styled_components_1.default.div(templateObject_32 || (templateObject_32 = __makeTemplateObject(["\n box-sizing: border-box;\n text-align: ", ";\n white-space: pre-wrap;\n word-break: keep-all;\n overflow-wrap: break-word;\n hyphens: auto;\n\n ", ";\n\n ", ";\n\n ", ";\n\n ", ";\n\n ", ";\n\n ", ";\n\n ", ";\n"], ["\n box-sizing: border-box;\n text-align: ", ";\n white-space: pre-wrap;\n word-break: keep-all;\n overflow-wrap: break-word;\n hyphens: auto;\n\n ", ";\n\n ", ";\n\n ", ";\n\n ", ";\n\n ", ";\n\n ", ";\n\n ", ";\n"])), function (_a) {
|
|
263
263
|
var textAlign = _a.textAlign;
|
|
264
264
|
return textAlign;
|
|
265
265
|
}, function (_a) {
|
package/package.json
CHANGED
package/release-note.md
CHANGED
|
@@ -1,6 +1,50 @@
|
|
|
1
1
|
# PDS-DEV-KIT-WEB Release Notes
|
|
2
|
-
## [v1.3.
|
|
2
|
+
## [v1.3.5]
|
|
3
3
|
|
|
4
4
|
### Component
|
|
5
|
-
*
|
|
6
|
-
|
|
5
|
+
* PDSValueOption타입 추가 (텍스트와 id와 같은 고유값이 있는 형태의 컴포넌트는 모두 PDSValueOption 타입을 사용해 통일감있게 PDS 컴포넌트를 생성할 예정)(해당 타입은 ‘pds-dev-kit-web’에서 임포트 해서 사용할 수 있습니다.)
|
|
6
|
+
* AdminList
|
|
7
|
+
* BulkActionBar의 MainButton과 Dropdown에 colotTheme 적용
|
|
8
|
+
* HeaderRowHideMode 프롭 명칭을 HeaderRowMode로 변경 (default는 ‘use')
|
|
9
|
+
* selectionMode가 ‘none’일 시 왼쪽 여백이 너무 작은 이슈 수정
|
|
10
|
+
* BulkActionBar의 MainButton과 Dropdown 액션 이후에 AdminList의 상태를 초기화 하는 로직을 삭제 (-> 각 개발자가 각 상황에 알맞게 사용하는게 더 낫다고 판단)
|
|
11
|
+
* selectedIds, onSelect 프롭을 받지 않을 시 useEffect에서 발생하던 에러 픽스
|
|
12
|
+
* AdminListHeader
|
|
13
|
+
* TitleText, DescText, FilterBar, BulkActionBar 사이의 여백 조정
|
|
14
|
+
* AdminListItem
|
|
15
|
+
* column5Text 부터 TextStyle이 반영되지 않던 이슈 수정
|
|
16
|
+
* quickActionBtnMode가 ‘none’일 때 버튼 영역이 보이지 않도록 수정
|
|
17
|
+
* selectState가 ‘maintain’일 때 체크박스가 선택되어진 상태에서 유지되도록 변경
|
|
18
|
+
* selectionMode가 ‘none’일 시 왼쪽 여백이 너무 작은 이슈 수정
|
|
19
|
+
* Chip
|
|
20
|
+
* prop추가
|
|
21
|
+
* option
|
|
22
|
+
* prop deprecated표시 (1.5에서 삭제 예정)
|
|
23
|
+
* activeChipId
|
|
24
|
+
* chipId
|
|
25
|
+
* ContextMenuItem
|
|
26
|
+
* prop추가
|
|
27
|
+
* value
|
|
28
|
+
* id
|
|
29
|
+
* prop deprecated표시 (1.5에서 삭제 예정)
|
|
30
|
+
* text
|
|
31
|
+
* value
|
|
32
|
+
* prop type 변경
|
|
33
|
+
* onClick이 value로 PDSValueOption도 받을 수 있음
|
|
34
|
+
* Dropdown
|
|
35
|
+
* prop type 변경
|
|
36
|
+
* defaultValue
|
|
37
|
+
* valueArray
|
|
38
|
+
* onChange
|
|
39
|
+
* FilterBar
|
|
40
|
+
* prop추가
|
|
41
|
+
* value
|
|
42
|
+
* prop deprecated표시 (1.5에서 삭제 예정)
|
|
43
|
+
* activeChipId
|
|
44
|
+
* prop type 변경
|
|
45
|
+
* textArray
|
|
46
|
+
* name
|
|
47
|
+
* onClickChip
|
|
48
|
+
* UserDesktopNavBar
|
|
49
|
+
* prop type 변경
|
|
50
|
+
* textArray
|