pds-dev-kit-web 2.2.115 → 2.2.116
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 +5 -1
- package/dist/src/common/styles/colorSet/index.d.ts +4 -0
- package/dist/src/common/styles/colorSet/ui-type.d.ts +4 -0
- package/dist/src/desktop/components/Select/Select.d.ts +7 -2
- package/dist/src/desktop/components/Select/Select.js +90 -27
- package/dist/src/mobile/components/Select/Select.d.ts +7 -2
- package/dist/src/mobile/components/Select/Select.js +87 -20
- package/package.json +1 -1
- package/release-note.md +2 -2
|
@@ -872,5 +872,9 @@
|
|
|
872
872
|
"ui_cpnt_slider_thumb_normal_undefined": "sys_cpnt_slider_thumb_normal_undefined",
|
|
873
873
|
"ui_cpnt_editor_buttongroup_undefined": "sys_cpnt_editor_buttongroup_undefined",
|
|
874
874
|
"ui_cpnt_editor_thumbpreview_undefined": "sys_cpnt_editor_undefined",
|
|
875
|
-
"ui_cpnt_dropdown_text_darktheme_hinttext": "sys_text_grey_darktheme_02"
|
|
875
|
+
"ui_cpnt_dropdown_text_darktheme_hinttext": "sys_text_grey_darktheme_02",
|
|
876
|
+
"ui_cpnt_select_dropdown_border_error": "sys_border_line_04",
|
|
877
|
+
"ui_cpnt_select_dropdown_text_error": "sys_text_error_01",
|
|
878
|
+
"ui_cpnt_select_dropdown_text_darktheme_error": "sys_text_error_darktheme_01",
|
|
879
|
+
"ui_cpnt_select_dropdown_border_darktheme_error": "sys_border_line_darktheme_03"
|
|
876
880
|
}
|
|
@@ -1730,6 +1730,10 @@ declare const colorSet: {
|
|
|
1730
1730
|
ui_cpnt_editor_buttongroup_undefined: string;
|
|
1731
1731
|
ui_cpnt_editor_thumbpreview_undefined: string;
|
|
1732
1732
|
ui_cpnt_dropdown_text_darktheme_hinttext: string;
|
|
1733
|
+
ui_cpnt_select_dropdown_border_error: string;
|
|
1734
|
+
ui_cpnt_select_dropdown_text_error: string;
|
|
1735
|
+
ui_cpnt_select_dropdown_text_darktheme_error: string;
|
|
1736
|
+
ui_cpnt_select_dropdown_border_darktheme_error: string;
|
|
1733
1737
|
};
|
|
1734
1738
|
};
|
|
1735
1739
|
export default colorSet;
|
|
@@ -873,4 +873,8 @@ export interface UITheme {
|
|
|
873
873
|
ui_cpnt_editor_buttongroup_undefined: string;
|
|
874
874
|
ui_cpnt_editor_thumbpreview_undefined: string;
|
|
875
875
|
ui_cpnt_dropdown_text_darktheme_hinttext: string;
|
|
876
|
+
ui_cpnt_select_dropdown_border_error: string;
|
|
877
|
+
ui_cpnt_select_dropdown_text_error: string;
|
|
878
|
+
ui_cpnt_select_dropdown_text_darktheme_error: string;
|
|
879
|
+
ui_cpnt_select_dropdown_border_darktheme_error: string;
|
|
876
880
|
}
|
|
@@ -1,10 +1,12 @@
|
|
|
1
|
-
import
|
|
1
|
+
import { Path } from 'react-hook-form';
|
|
2
|
+
import type { IFormValues, PDSTextType } from '../../../common';
|
|
2
3
|
import type { SelectHTMLAttributes } from 'react';
|
|
3
4
|
type SelectOption = {
|
|
4
5
|
text: string;
|
|
5
6
|
value: SelectHTMLAttributes<HTMLSelectElement>['value'];
|
|
6
7
|
};
|
|
7
8
|
type SelectProps = {
|
|
9
|
+
name?: Path<IFormValues>;
|
|
8
10
|
hintText?: PDSTextType;
|
|
9
11
|
defaultValue?: SelectOption;
|
|
10
12
|
value?: SelectOption['value'];
|
|
@@ -14,7 +16,10 @@ type SelectProps = {
|
|
|
14
16
|
state?: 'normal' | 'read_only' | 'disabled';
|
|
15
17
|
colorTheme?: 'none' | 'dark';
|
|
16
18
|
customWidth?: string;
|
|
19
|
+
validation?: {
|
|
20
|
+
[key: string]: any;
|
|
21
|
+
};
|
|
17
22
|
onChange?: (e: React.ChangeEvent<HTMLSelectElement>) => void;
|
|
18
23
|
};
|
|
19
|
-
declare function Select({ hintText, defaultValue, value, valueArray, size, responsiveMode, state, colorTheme, customWidth, onChange }: SelectProps): JSX.Element;
|
|
24
|
+
declare function Select({ name, hintText, defaultValue, value, valueArray, size, responsiveMode, state, colorTheme, customWidth, validation, onChange }: SelectProps): JSX.Element;
|
|
20
25
|
export default Select;
|
|
@@ -39,16 +39,40 @@ var __importStar = (this && this.__importStar) || function (mod) {
|
|
|
39
39
|
};
|
|
40
40
|
Object.defineProperty(exports, "__esModule", { value: true });
|
|
41
41
|
var jsx_runtime_1 = require("react/jsx-runtime");
|
|
42
|
+
var react_hook_form_1 = require("react-hook-form");
|
|
43
|
+
var types_1 = require("../../../common/types");
|
|
42
44
|
var styled_components_1 = __importStar(require("styled-components"));
|
|
43
45
|
var transitionStyle_1 = require("../../../common/styles/movement/transitionStyle");
|
|
44
46
|
var hybrid_1 = require("../../../hybrid");
|
|
45
|
-
var HINT = 'HINT_VALUE';
|
|
46
47
|
function Select(_a) {
|
|
47
|
-
var _b;
|
|
48
|
-
var hintText = _a.hintText, defaultValue = _a.defaultValue, value = _a.value, valueArray = _a.valueArray,
|
|
48
|
+
var _b, _c;
|
|
49
|
+
var name = _a.name, hintText = _a.hintText, defaultValue = _a.defaultValue, value = _a.value, valueArray = _a.valueArray, _d = _a.size, size = _d === void 0 ? 'large' : _d, _e = _a.responsiveMode, responsiveMode = _e === void 0 ? 'none' : _e, _f = _a.state, state = _f === void 0 ? 'normal' : _f, _g = _a.colorTheme, colorTheme = _g === void 0 ? 'none' : _g, customWidth = _a.customWidth, validation = _a.validation, onChange = _a.onChange;
|
|
50
|
+
// validation을 확장하여 힌트 체크 추가
|
|
51
|
+
var extendedValidation = __assign(__assign({}, validation), { validate: function (value) {
|
|
52
|
+
var _a;
|
|
53
|
+
// 값이 없으면 required.message 노출
|
|
54
|
+
if (!value || value.length === 0) {
|
|
55
|
+
if (validation === null || validation === void 0 ? void 0 : validation.required) {
|
|
56
|
+
return ((_a = validation === null || validation === void 0 ? void 0 : validation.required) === null || _a === void 0 ? void 0 : _a.message) || false;
|
|
57
|
+
}
|
|
58
|
+
}
|
|
59
|
+
// 기존 validate 함수가 있다면 실행
|
|
60
|
+
if (validation === null || validation === void 0 ? void 0 : validation.validate) {
|
|
61
|
+
return validation.validate(value);
|
|
62
|
+
}
|
|
63
|
+
return true;
|
|
64
|
+
} });
|
|
65
|
+
var formContext = (0, react_hook_form_1.useFormContext)();
|
|
66
|
+
var register = name && formContext ? formContext.register(name, extendedValidation) : null;
|
|
67
|
+
var isError = name && formContext ? Boolean((0, types_1.getErrorByName)(formContext.formState.errors, name)) : false;
|
|
49
68
|
var handleChange = function (e) {
|
|
50
|
-
|
|
51
|
-
|
|
69
|
+
register === null || register === void 0 ? void 0 : register.onChange(e);
|
|
70
|
+
onChange === null || onChange === void 0 ? void 0 : onChange(e);
|
|
71
|
+
};
|
|
72
|
+
var handleBlur = function (e) {
|
|
73
|
+
if (register) {
|
|
74
|
+
register.onBlur(e);
|
|
75
|
+
formContext.trigger(name);
|
|
52
76
|
}
|
|
53
77
|
};
|
|
54
78
|
var getIconColorKey = function () {
|
|
@@ -56,28 +80,28 @@ function Select(_a) {
|
|
|
56
80
|
if (colorTheme === 'dark') {
|
|
57
81
|
return 'ui_cpnt_select_icon_darktheme_disabled';
|
|
58
82
|
}
|
|
59
|
-
|
|
60
|
-
return 'ui_cpnt_select_icon_02';
|
|
61
|
-
}
|
|
83
|
+
return 'ui_cpnt_select_icon_02';
|
|
62
84
|
}
|
|
63
85
|
if (colorTheme === 'dark') {
|
|
64
86
|
return 'ui_cpnt_select_icon_darktheme_default';
|
|
65
87
|
}
|
|
66
|
-
|
|
67
|
-
return 'ui_cpnt_select_icon_01';
|
|
68
|
-
}
|
|
88
|
+
return 'ui_cpnt_select_icon_01';
|
|
69
89
|
};
|
|
70
|
-
return ((0, jsx_runtime_1.jsxs)(S_Box, __assign({ "x-pds-name": "Select", "x-pds-element-type": "component", "x-pds-device-type": "desktop", "$size": size, responsiveMode: responsiveMode, tabIndex: 0, customWidth: customWidth }, { children: [(0, jsx_runtime_1.jsx)(S_Icon_Wrapper, __assign({ state: state }, { children: (0, jsx_runtime_1.jsx)(hybrid_1.Icon, { size: 16, fillType: "line", iconName: "ic_arrow_down", colorKey: getIconColorKey() }) })), (0, jsx_runtime_1.jsxs)(S_Select, __assign({ disabled: state === 'disabled' || state === 'read_only', state: state, "$size": size, colorTheme: colorTheme, onChange: handleChange, defaultValue: (_b = defaultValue === null || defaultValue === void 0 ? void 0 : defaultValue.value) !== null && _b !== void 0 ? _b :
|
|
90
|
+
return ((0, jsx_runtime_1.jsxs)(S_Box, __assign({ "x-pds-name": "Select", "x-pds-element-type": "component", "x-pds-device-type": "desktop", "$size": size, responsiveMode: responsiveMode, tabIndex: 0, customWidth: customWidth }, { children: [(0, jsx_runtime_1.jsxs)(S_SelectWrapper, { children: [(0, jsx_runtime_1.jsx)(S_Icon_Wrapper, __assign({ state: state }, { children: (0, jsx_runtime_1.jsx)(hybrid_1.Icon, { size: 16, fillType: "line", iconName: "ic_arrow_down", colorKey: getIconColorKey() }) })), (0, jsx_runtime_1.jsxs)(S_Select, __assign({}, register, { disabled: state === 'disabled' || state === 'read_only', state: state, isError: isError, "$size": size, colorTheme: colorTheme, onChange: handleChange, onBlur: handleBlur, defaultValue: (_b = defaultValue === null || defaultValue === void 0 ? void 0 : defaultValue.value) !== null && _b !== void 0 ? _b : '', value: value || undefined }, { children: [hintText && ((0, jsx_runtime_1.jsx)("option", __assign({ disabled: true, value: "" }, { children: hintText }))), valueArray.map(function (el) { return ((0, jsx_runtime_1.jsx)("option", __assign({ value: el.value }, { children: el.text }), el.value)); })] }))] }), name &&
|
|
91
|
+
((_c = (0, types_1.getErrorByName)(formContext.formState.errors, name)) === null || _c === void 0 ? void 0 : _c.message) &&
|
|
92
|
+
state === 'normal' && ((0, jsx_runtime_1.jsx)(S_Error, __assign({ colorTheme: colorTheme }, { children: (0, types_1.getErrorByName)(formContext.formState.errors, name).message })))] })));
|
|
71
93
|
}
|
|
72
94
|
var large = (0, styled_components_1.css)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n height: 48px;\n width: 432px;\n"], ["\n height: 48px;\n width: 432px;\n"])));
|
|
73
95
|
var medium = (0, styled_components_1.css)(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n height: 40px;\n width: 188px;\n"], ["\n height: 40px;\n width: 188px;\n"])));
|
|
74
96
|
var small = (0, styled_components_1.css)(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n height: 32px;\n width: 188px;\n"], ["\n height: 32px;\n width: 188px;\n"])));
|
|
75
97
|
var rlarge = (0, styled_components_1.css)(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n height: 48px;\n width: 100%;\n"], ["\n height: 48px;\n width: 100%;\n"])));
|
|
76
|
-
var dark = (0, styled_components_1.css)(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n background-color: ", ";\n border: 2px solid
|
|
98
|
+
var dark = (0, styled_components_1.css)(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n background-color: ", ";\n border: 2px solid\n ", ";\n color: ", ";\n\n :disabled {\n background-color: ", ";\n border: 2px solid ", ";\n color: ", ";\n }\n\n :focus {\n border: 2px solid\n ", " !important;\n color: ", ";\n }\n"], ["\n background-color: ", ";\n border: 2px solid\n ", ";\n color: ", ";\n\n :disabled {\n background-color: ", ";\n border: 2px solid ", ";\n color: ", ";\n }\n\n :focus {\n border: 2px solid\n ", " !important;\n color: ", ";\n }\n"])), function (_a) {
|
|
77
99
|
var theme = _a.theme;
|
|
78
100
|
return theme.ui_cpnt_select_base_darktheme_normal;
|
|
79
101
|
}, function (_a) {
|
|
80
|
-
var theme = _a.theme;
|
|
102
|
+
var theme = _a.theme, isError = _a.isError;
|
|
103
|
+
if (isError)
|
|
104
|
+
return theme.ui_cpnt_select_dropdown_border_darktheme_error;
|
|
81
105
|
return theme.ui_cpnt_select_border_darktheme_normal;
|
|
82
106
|
}, function (_a) {
|
|
83
107
|
var theme = _a.theme;
|
|
@@ -94,7 +118,9 @@ var dark = (0, styled_components_1.css)(templateObject_5 || (templateObject_5 =
|
|
|
94
118
|
? theme.ui_cpnt_select_text_darktheme_readonly
|
|
95
119
|
: theme.ui_cpnt_select_text_darktheme_disabled;
|
|
96
120
|
}, function (_a) {
|
|
97
|
-
var theme = _a.theme;
|
|
121
|
+
var theme = _a.theme, isError = _a.isError;
|
|
122
|
+
if (isError)
|
|
123
|
+
return theme.ui_cpnt_select_dropdown_border_darktheme_error;
|
|
98
124
|
return theme.ui_cpnt_select_border_darktheme_focus;
|
|
99
125
|
}, function (_a) {
|
|
100
126
|
var theme = _a.theme;
|
|
@@ -104,10 +130,10 @@ var S_Box = styled_components_1.default.div(templateObject_6 || (templateObject_
|
|
|
104
130
|
var $size = _a.$size;
|
|
105
131
|
return $size &&
|
|
106
132
|
{
|
|
107
|
-
|
|
108
|
-
medium:
|
|
109
|
-
|
|
110
|
-
rlarge:
|
|
133
|
+
small: 'width: 188px;',
|
|
134
|
+
medium: 'width: 188px;',
|
|
135
|
+
large: 'width: 432px;',
|
|
136
|
+
rlarge: 'width: 100%'
|
|
111
137
|
}[$size];
|
|
112
138
|
}, function (_a) {
|
|
113
139
|
var responsiveMode = _a.responsiveMode;
|
|
@@ -116,11 +142,12 @@ var S_Box = styled_components_1.default.div(templateObject_6 || (templateObject_
|
|
|
116
142
|
var customWidth = _a.customWidth;
|
|
117
143
|
return customWidth && "width: ".concat(customWidth, ";");
|
|
118
144
|
});
|
|
119
|
-
var
|
|
145
|
+
var S_SelectWrapper = styled_components_1.default.div(templateObject_7 || (templateObject_7 = __makeTemplateObject(["\n position: relative;\n width: 100%;\n"], ["\n position: relative;\n width: 100%;\n"])));
|
|
146
|
+
var S_Icon_Wrapper = styled_components_1.default.div(templateObject_8 || (templateObject_8 = __makeTemplateObject(["\n align-items: center;\n display: flex;\n height: 16px;\n pointer-events: none;\n position: absolute;\n right: ", ";\n top: 50%;\n transform: translateY(-50%);\n width: 16px;\n"], ["\n align-items: center;\n display: flex;\n height: 16px;\n pointer-events: none;\n position: absolute;\n right: ", ";\n top: 50%;\n transform: translateY(-50%);\n width: 16px;\n"])), function (_a) {
|
|
120
147
|
var theme = _a.theme;
|
|
121
148
|
return theme.spacing.spacingD;
|
|
122
149
|
});
|
|
123
|
-
var backgroundHoverColor = (0, styled_components_1.css)(
|
|
150
|
+
var backgroundHoverColor = (0, styled_components_1.css)(templateObject_9 || (templateObject_9 = __makeTemplateObject(["\n ", ";\n"], ["\n ", ";\n"])), function (_a) {
|
|
124
151
|
var colorTheme = _a.colorTheme, theme = _a.theme;
|
|
125
152
|
switch (colorTheme) {
|
|
126
153
|
case 'none':
|
|
@@ -131,7 +158,7 @@ var backgroundHoverColor = (0, styled_components_1.css)(templateObject_8 || (tem
|
|
|
131
158
|
return theme.ui_cpnt_textfield_base_hover;
|
|
132
159
|
}
|
|
133
160
|
});
|
|
134
|
-
var backgroundActiveColor = (0, styled_components_1.css)(
|
|
161
|
+
var backgroundActiveColor = (0, styled_components_1.css)(templateObject_10 || (templateObject_10 = __makeTemplateObject(["\n ", ";\n"], ["\n ", ";\n"])), function (_a) {
|
|
135
162
|
var colorTheme = _a.colorTheme, theme = _a.theme;
|
|
136
163
|
switch (colorTheme) {
|
|
137
164
|
case 'none':
|
|
@@ -142,12 +169,23 @@ var backgroundActiveColor = (0, styled_components_1.css)(templateObject_9 || (te
|
|
|
142
169
|
return theme.ui_cpnt_textfield_base_pressed;
|
|
143
170
|
}
|
|
144
171
|
});
|
|
145
|
-
var normalActionColor = (0, styled_components_1.css)(
|
|
146
|
-
var S_Select = styled_components_1.default.select(
|
|
172
|
+
var normalActionColor = (0, styled_components_1.css)(templateObject_11 || (templateObject_11 = __makeTemplateObject(["\n &:hover {\n background-color: ", ";\n }\n\n &:active {\n background-color: ", ";\n }\n"], ["\n &:hover {\n background-color: ", ";\n }\n\n &:active {\n background-color: ", ";\n }\n"])), backgroundHoverColor, backgroundActiveColor);
|
|
173
|
+
var S_Select = styled_components_1.default.select(templateObject_12 || (templateObject_12 = __makeTemplateObject(["\n -webkit-box-orient: vertical;\n -webkit-line-clamp: 1;\n appearance: none;\n background-color: ", ";\n ", ";\n border: 2px solid\n ", ";\n border-radius: ", ";\n box-sizing: border-box;\n color: ", ";\n cursor: pointer;\n display: -webkit-box;\n font-family: inherit;\n font-size: ", ";\n overflow: hidden;\n padding-left: ", ";\n padding-right: ", ";\n text-overflow: ellipsis;\n width: 100%;\n word-break: break-all;\n\n :disabled {\n background-color: ", ";\n border: 2px solid ", ";\n color: ", ";\n cursor: ", ";\n opacity: 1;\n }\n\n :focus {\n border: 2px solid\n ", " !important;\n color: ", ";\n outline: 0 !important;\n outline-offset: 0 !important;\n }\n\n ", "\n\n ", "\n\n ", "\n"], ["\n -webkit-box-orient: vertical;\n -webkit-line-clamp: 1;\n appearance: none;\n background-color: ", ";\n ", ";\n border: 2px solid\n ", ";\n border-radius: ", ";\n box-sizing: border-box;\n color: ", ";\n cursor: pointer;\n display: -webkit-box;\n font-family: inherit;\n font-size: ", ";\n overflow: hidden;\n padding-left: ", ";\n padding-right: ", ";\n text-overflow: ellipsis;\n width: 100%;\n word-break: break-all;\n\n :disabled {\n background-color: ", ";\n border: 2px solid ", ";\n color: ", ";\n cursor: ", ";\n opacity: 1;\n }\n\n :focus {\n border: 2px solid\n ", " !important;\n color: ", ";\n outline: 0 !important;\n outline-offset: 0 !important;\n }\n\n ", "\n\n ", "\n\n ", "\n"])), function (_a) {
|
|
147
174
|
var theme = _a.theme;
|
|
148
175
|
return theme.ui_cpnt_select_base_normal;
|
|
149
176
|
}, function (_a) {
|
|
150
|
-
var
|
|
177
|
+
var $size = _a.$size;
|
|
178
|
+
return $size &&
|
|
179
|
+
{
|
|
180
|
+
large: large,
|
|
181
|
+
medium: medium,
|
|
182
|
+
small: small,
|
|
183
|
+
rlarge: rlarge
|
|
184
|
+
}[$size];
|
|
185
|
+
}, function (_a) {
|
|
186
|
+
var theme = _a.theme, isError = _a.isError;
|
|
187
|
+
if (isError)
|
|
188
|
+
return theme.ui_cpnt_select_dropdown_border_error;
|
|
151
189
|
return theme.ui_cpnt_select_border_normal;
|
|
152
190
|
}, function (_a) {
|
|
153
191
|
var $size = _a.$size;
|
|
@@ -192,7 +230,9 @@ var S_Select = styled_components_1.default.select(templateObject_11 || (template
|
|
|
192
230
|
return 'pointer';
|
|
193
231
|
}
|
|
194
232
|
}, function (_a) {
|
|
195
|
-
var theme = _a.theme;
|
|
233
|
+
var theme = _a.theme, isError = _a.isError;
|
|
234
|
+
if (isError)
|
|
235
|
+
return theme.ui_cpnt_select_dropdown_border_error;
|
|
196
236
|
return theme.ui_cpnt_select_border_focus;
|
|
197
237
|
}, function (_a) {
|
|
198
238
|
var theme = _a.theme;
|
|
@@ -204,5 +244,28 @@ var S_Select = styled_components_1.default.select(templateObject_11 || (template
|
|
|
204
244
|
var state = _a.state;
|
|
205
245
|
return state === 'normal' && normalActionColor;
|
|
206
246
|
});
|
|
247
|
+
var S_Error = styled_components_1.default.div(templateObject_13 || (templateObject_13 = __makeTemplateObject(["\n color: ", ";\n font-size: ", ";\n font-weight: ", ";\n line-height: ", ";\n margin-top: ", ";\n text-align: left;\n white-space: pre-wrap;\n"], ["\n color: ", ";\n font-size: ", ";\n font-weight: ", ";\n line-height: ", ";\n margin-top: ", ";\n text-align: left;\n white-space: pre-wrap;\n"])), function (_a) {
|
|
248
|
+
var theme = _a.theme, colorTheme = _a.colorTheme;
|
|
249
|
+
switch (colorTheme) {
|
|
250
|
+
case 'none': {
|
|
251
|
+
return theme.ui_cpnt_select_dropdown_text_error;
|
|
252
|
+
}
|
|
253
|
+
case 'dark': {
|
|
254
|
+
return theme.ui_cpnt_select_dropdown_text_darktheme_error;
|
|
255
|
+
}
|
|
256
|
+
}
|
|
257
|
+
}, function (_a) {
|
|
258
|
+
var theme = _a.theme;
|
|
259
|
+
return theme.desktopFontSize.caption2;
|
|
260
|
+
}, function (_a) {
|
|
261
|
+
var theme = _a.theme;
|
|
262
|
+
return theme.fontWeight.normal;
|
|
263
|
+
}, function (_a) {
|
|
264
|
+
var theme = _a.theme;
|
|
265
|
+
return theme.desktopLineHeight.caption2;
|
|
266
|
+
}, function (_a) {
|
|
267
|
+
var theme = _a.theme;
|
|
268
|
+
return theme.spacing.spacingA;
|
|
269
|
+
});
|
|
207
270
|
exports.default = Select;
|
|
208
|
-
var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6, templateObject_7, templateObject_8, templateObject_9, templateObject_10, templateObject_11;
|
|
271
|
+
var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6, templateObject_7, templateObject_8, templateObject_9, templateObject_10, templateObject_11, templateObject_12, templateObject_13;
|
|
@@ -1,10 +1,12 @@
|
|
|
1
|
-
import
|
|
1
|
+
import { Path } from 'react-hook-form';
|
|
2
|
+
import type { IFormValues, PDSTextType } from '../../../common';
|
|
2
3
|
import type { SelectHTMLAttributes } from 'react';
|
|
3
4
|
type SelectOption = {
|
|
4
5
|
text: string;
|
|
5
6
|
value: SelectHTMLAttributes<HTMLSelectElement>['value'];
|
|
6
7
|
};
|
|
7
8
|
type SelectProps = {
|
|
9
|
+
name?: Path<IFormValues>;
|
|
8
10
|
hintText?: PDSTextType;
|
|
9
11
|
defaultValue?: SelectOption;
|
|
10
12
|
value?: SelectOption['value'];
|
|
@@ -14,7 +16,10 @@ type SelectProps = {
|
|
|
14
16
|
state?: 'normal' | 'read_only' | 'disabled';
|
|
15
17
|
colorTheme?: 'none' | 'dark';
|
|
16
18
|
customWidth?: string;
|
|
19
|
+
validation?: {
|
|
20
|
+
[key: string]: any;
|
|
21
|
+
};
|
|
17
22
|
onChange?: (e: React.ChangeEvent<HTMLSelectElement>) => void;
|
|
18
23
|
};
|
|
19
|
-
declare function Select({ hintText, defaultValue, value, valueArray, size, responsiveMode, state, colorTheme, customWidth, onChange }: SelectProps): JSX.Element;
|
|
24
|
+
declare function Select({ name, hintText, defaultValue, value, valueArray, size, responsiveMode, state, colorTheme, customWidth, validation, onChange }: SelectProps): JSX.Element;
|
|
20
25
|
export default Select;
|
|
@@ -39,16 +39,40 @@ var __importStar = (this && this.__importStar) || function (mod) {
|
|
|
39
39
|
};
|
|
40
40
|
Object.defineProperty(exports, "__esModule", { value: true });
|
|
41
41
|
var jsx_runtime_1 = require("react/jsx-runtime");
|
|
42
|
+
var react_hook_form_1 = require("react-hook-form");
|
|
43
|
+
var types_1 = require("../../../common/types");
|
|
42
44
|
var styled_components_1 = __importStar(require("styled-components"));
|
|
43
45
|
var transitionStyle_1 = require("../../../common/styles/movement/transitionStyle");
|
|
44
46
|
var hybrid_1 = require("../../../hybrid");
|
|
45
|
-
var HINT = 'HINT_VALUE';
|
|
46
47
|
function Select(_a) {
|
|
47
|
-
var _b;
|
|
48
|
-
var hintText = _a.hintText, defaultValue = _a.defaultValue, value = _a.value, valueArray = _a.valueArray,
|
|
48
|
+
var _b, _c;
|
|
49
|
+
var name = _a.name, hintText = _a.hintText, defaultValue = _a.defaultValue, value = _a.value, valueArray = _a.valueArray, _d = _a.size, size = _d === void 0 ? 'large' : _d, _e = _a.responsiveMode, responsiveMode = _e === void 0 ? 'none' : _e, _f = _a.state, state = _f === void 0 ? 'normal' : _f, _g = _a.colorTheme, colorTheme = _g === void 0 ? 'none' : _g, customWidth = _a.customWidth, validation = _a.validation, onChange = _a.onChange;
|
|
50
|
+
// validation을 확장하여 힌트 체크 추가
|
|
51
|
+
var extendedValidation = __assign(__assign({}, validation), { validate: function (value) {
|
|
52
|
+
var _a;
|
|
53
|
+
// 값이 없으면 required.message 노출
|
|
54
|
+
if (!value || value.length === 0) {
|
|
55
|
+
if (validation === null || validation === void 0 ? void 0 : validation.required) {
|
|
56
|
+
return ((_a = validation === null || validation === void 0 ? void 0 : validation.required) === null || _a === void 0 ? void 0 : _a.message) || false;
|
|
57
|
+
}
|
|
58
|
+
}
|
|
59
|
+
// 기존 validate 함수가 있다면 실행
|
|
60
|
+
if (validation === null || validation === void 0 ? void 0 : validation.validate) {
|
|
61
|
+
return validation.validate(value);
|
|
62
|
+
}
|
|
63
|
+
return true;
|
|
64
|
+
} });
|
|
65
|
+
var formContext = (0, react_hook_form_1.useFormContext)();
|
|
66
|
+
var register = name && formContext ? formContext.register(name, extendedValidation) : null;
|
|
67
|
+
var isError = name && formContext ? Boolean((0, types_1.getErrorByName)(formContext.formState.errors, name)) : false;
|
|
49
68
|
var handleChange = function (e) {
|
|
50
|
-
|
|
51
|
-
|
|
69
|
+
register === null || register === void 0 ? void 0 : register.onChange(e);
|
|
70
|
+
onChange === null || onChange === void 0 ? void 0 : onChange(e);
|
|
71
|
+
};
|
|
72
|
+
var handleBlur = function (e) {
|
|
73
|
+
if (register) {
|
|
74
|
+
register.onBlur(e);
|
|
75
|
+
formContext.trigger(name);
|
|
52
76
|
}
|
|
53
77
|
};
|
|
54
78
|
var getIconColorKey = function () {
|
|
@@ -63,17 +87,21 @@ function Select(_a) {
|
|
|
63
87
|
}
|
|
64
88
|
return 'ui_cpnt_select_icon_01';
|
|
65
89
|
};
|
|
66
|
-
return ((0, jsx_runtime_1.jsxs)(S_Box, __assign({ "x-pds-name": "Select", "x-pds-element-type": "component", "x-pds-device-type": "mobile", "$size": size, responsiveMode: responsiveMode, tabIndex: 0, customWidth: customWidth }, { children: [(0, jsx_runtime_1.jsx)(S_Icon_Wrapper, __assign({ state: state }, { children: (0, jsx_runtime_1.jsx)(hybrid_1.Icon, { size: 16, fillType: "line", iconName: "ic_arrow_down", colorKey: getIconColorKey() }) })), (0, jsx_runtime_1.jsxs)(S_Select, __assign({ disabled: state === 'disabled' || state === 'read_only', state: state, "$size": size, colorTheme: colorTheme, onChange: handleChange, defaultValue: (_b = defaultValue === null || defaultValue === void 0 ? void 0 : defaultValue.value) !== null && _b !== void 0 ? _b :
|
|
90
|
+
return ((0, jsx_runtime_1.jsxs)(S_Box, __assign({ "x-pds-name": "Select", "x-pds-element-type": "component", "x-pds-device-type": "mobile", "$size": size, responsiveMode: responsiveMode, tabIndex: 0, customWidth: customWidth }, { children: [(0, jsx_runtime_1.jsxs)(S_SelectWrapper, { children: [(0, jsx_runtime_1.jsx)(S_Icon_Wrapper, __assign({ state: state }, { children: (0, jsx_runtime_1.jsx)(hybrid_1.Icon, { size: 16, fillType: "line", iconName: "ic_arrow_down", colorKey: getIconColorKey() }) })), (0, jsx_runtime_1.jsxs)(S_Select, __assign({}, register, { disabled: state === 'disabled' || state === 'read_only', state: state, isError: isError, "$size": size, colorTheme: colorTheme, onChange: handleChange, onBlur: handleBlur, defaultValue: (_b = defaultValue === null || defaultValue === void 0 ? void 0 : defaultValue.value) !== null && _b !== void 0 ? _b : '', value: value || undefined }, { children: [hintText && ((0, jsx_runtime_1.jsx)("option", __assign({ disabled: true, value: "" }, { children: hintText }))), valueArray.map(function (el) { return ((0, jsx_runtime_1.jsx)("option", __assign({ value: el.value }, { children: el.text }), el.value)); })] }))] }), name &&
|
|
91
|
+
((_c = (0, types_1.getErrorByName)(formContext.formState.errors, name)) === null || _c === void 0 ? void 0 : _c.message) &&
|
|
92
|
+
state === 'normal' && ((0, jsx_runtime_1.jsx)(S_Error, __assign({ colorTheme: colorTheme }, { children: (0, types_1.getErrorByName)(formContext.formState.errors, name).message })))] })));
|
|
67
93
|
}
|
|
68
94
|
var large = (0, styled_components_1.css)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n height: 48px;\n width: 432px;\n"], ["\n height: 48px;\n width: 432px;\n"])));
|
|
69
95
|
var medium = (0, styled_components_1.css)(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n height: 40px;\n width: 188px;\n"], ["\n height: 40px;\n width: 188px;\n"])));
|
|
70
96
|
var small = (0, styled_components_1.css)(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n height: 32px;\n width: 188px;\n"], ["\n height: 32px;\n width: 188px;\n"])));
|
|
71
97
|
var rlarge = (0, styled_components_1.css)(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n height: 48px;\n width: 100%;\n"], ["\n height: 48px;\n width: 100%;\n"])));
|
|
72
|
-
var dark = (0, styled_components_1.css)(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n background-color: ", ";\n border: 2px solid
|
|
98
|
+
var dark = (0, styled_components_1.css)(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n background-color: ", ";\n border: 2px solid\n ", ";\n color: ", ";\n\n :disabled {\n background-color: ", ";\n border: 2px solid ", ";\n color: ", ";\n }\n\n :focus {\n border: 2px solid\n ", " !important;\n color: ", ";\n }\n"], ["\n background-color: ", ";\n border: 2px solid\n ", ";\n color: ", ";\n\n :disabled {\n background-color: ", ";\n border: 2px solid ", ";\n color: ", ";\n }\n\n :focus {\n border: 2px solid\n ", " !important;\n color: ", ";\n }\n"])), function (_a) {
|
|
73
99
|
var theme = _a.theme;
|
|
74
100
|
return theme.ui_cpnt_select_base_darktheme_normal;
|
|
75
101
|
}, function (_a) {
|
|
76
|
-
var theme = _a.theme;
|
|
102
|
+
var theme = _a.theme, isError = _a.isError;
|
|
103
|
+
if (isError)
|
|
104
|
+
return theme.ui_cpnt_select_dropdown_border_darktheme_error;
|
|
77
105
|
return theme.ui_cpnt_select_border_darktheme_normal;
|
|
78
106
|
}, function (_a) {
|
|
79
107
|
var theme = _a.theme;
|
|
@@ -90,7 +118,9 @@ var dark = (0, styled_components_1.css)(templateObject_5 || (templateObject_5 =
|
|
|
90
118
|
? theme.ui_cpnt_select_text_darktheme_readonly
|
|
91
119
|
: theme.ui_cpnt_select_text_darktheme_disabled;
|
|
92
120
|
}, function (_a) {
|
|
93
|
-
var theme = _a.theme;
|
|
121
|
+
var theme = _a.theme, isError = _a.isError;
|
|
122
|
+
if (isError)
|
|
123
|
+
return theme.ui_cpnt_select_dropdown_border_darktheme_error;
|
|
94
124
|
return theme.ui_cpnt_select_border_darktheme_focus;
|
|
95
125
|
}, function (_a) {
|
|
96
126
|
var theme = _a.theme;
|
|
@@ -100,10 +130,10 @@ var S_Box = styled_components_1.default.div(templateObject_6 || (templateObject_
|
|
|
100
130
|
var $size = _a.$size;
|
|
101
131
|
return $size &&
|
|
102
132
|
{
|
|
103
|
-
|
|
104
|
-
medium:
|
|
105
|
-
|
|
106
|
-
rlarge:
|
|
133
|
+
small: 'width: 188px;',
|
|
134
|
+
medium: 'width: 188px;',
|
|
135
|
+
large: 'width: 432px;',
|
|
136
|
+
rlarge: 'width: 100%'
|
|
107
137
|
}[$size];
|
|
108
138
|
}, function (_a) {
|
|
109
139
|
var responsiveMode = _a.responsiveMode;
|
|
@@ -112,11 +142,12 @@ var S_Box = styled_components_1.default.div(templateObject_6 || (templateObject_
|
|
|
112
142
|
var customWidth = _a.customWidth;
|
|
113
143
|
return customWidth && "width: ".concat(customWidth, ";");
|
|
114
144
|
});
|
|
115
|
-
var
|
|
145
|
+
var S_SelectWrapper = styled_components_1.default.div(templateObject_7 || (templateObject_7 = __makeTemplateObject(["\n position: relative;\n width: 100%;\n"], ["\n position: relative;\n width: 100%;\n"])));
|
|
146
|
+
var S_Icon_Wrapper = styled_components_1.default.div(templateObject_8 || (templateObject_8 = __makeTemplateObject(["\n align-items: center;\n display: flex;\n height: 16px;\n position: absolute;\n right: ", ";\n top: 50%;\n transform: translateY(-50%);\n width: 16px;\n"], ["\n align-items: center;\n display: flex;\n height: 16px;\n position: absolute;\n right: ", ";\n top: 50%;\n transform: translateY(-50%);\n width: 16px;\n"])), function (_a) {
|
|
116
147
|
var theme = _a.theme;
|
|
117
148
|
return theme.spacing.spacingD;
|
|
118
149
|
});
|
|
119
|
-
var backgroundActiveColor = (0, styled_components_1.css)(
|
|
150
|
+
var backgroundActiveColor = (0, styled_components_1.css)(templateObject_9 || (templateObject_9 = __makeTemplateObject(["\n ", ";\n"], ["\n ", ";\n"])), function (_a) {
|
|
120
151
|
var colorTheme = _a.colorTheme, theme = _a.theme;
|
|
121
152
|
switch (colorTheme) {
|
|
122
153
|
case 'none':
|
|
@@ -127,12 +158,23 @@ var backgroundActiveColor = (0, styled_components_1.css)(templateObject_8 || (te
|
|
|
127
158
|
return theme.ui_cpnt_textfield_base_pressed;
|
|
128
159
|
}
|
|
129
160
|
});
|
|
130
|
-
var normalActionColor = (0, styled_components_1.css)(
|
|
131
|
-
var S_Select = styled_components_1.default.select(
|
|
161
|
+
var normalActionColor = (0, styled_components_1.css)(templateObject_10 || (templateObject_10 = __makeTemplateObject(["\n &:active {\n background-color: ", ";\n }\n"], ["\n &:active {\n background-color: ", ";\n }\n"])), backgroundActiveColor);
|
|
162
|
+
var S_Select = styled_components_1.default.select(templateObject_11 || (templateObject_11 = __makeTemplateObject(["\n -webkit-box-orient: vertical;\n -webkit-line-clamp: 1;\n appearance: none;\n background-color: ", ";\n ", ";\n border: 2px solid\n ", ";\n border-radius: ", ";\n box-sizing: border-box;\n color: ", ";\n display: -webkit-box;\n font-family: inherit;\n font-size: ", ";\n overflow: hidden;\n padding-left: ", ";\n padding-right: ", ";\n text-overflow: ellipsis;\n width: 100%;\n word-break: break-all;\n\n :disabled {\n background-color: ", ";\n border: 2px solid ", ";\n color: ", ";\n opacity: 1;\n }\n\n :focus {\n border: 2px solid\n ", " !important;\n color: ", ";\n outline: 0 !important;\n outline-offset: 0 !important;\n }\n\n ", "\n\n ", "\n\n ", "\n"], ["\n -webkit-box-orient: vertical;\n -webkit-line-clamp: 1;\n appearance: none;\n background-color: ", ";\n ", ";\n border: 2px solid\n ", ";\n border-radius: ", ";\n box-sizing: border-box;\n color: ", ";\n display: -webkit-box;\n font-family: inherit;\n font-size: ", ";\n overflow: hidden;\n padding-left: ", ";\n padding-right: ", ";\n text-overflow: ellipsis;\n width: 100%;\n word-break: break-all;\n\n :disabled {\n background-color: ", ";\n border: 2px solid ", ";\n color: ", ";\n opacity: 1;\n }\n\n :focus {\n border: 2px solid\n ", " !important;\n color: ", ";\n outline: 0 !important;\n outline-offset: 0 !important;\n }\n\n ", "\n\n ", "\n\n ", "\n"])), function (_a) {
|
|
132
163
|
var theme = _a.theme;
|
|
133
164
|
return theme.ui_cpnt_select_base_normal;
|
|
134
165
|
}, function (_a) {
|
|
135
|
-
var
|
|
166
|
+
var $size = _a.$size;
|
|
167
|
+
return $size &&
|
|
168
|
+
{
|
|
169
|
+
large: large,
|
|
170
|
+
medium: medium,
|
|
171
|
+
small: small,
|
|
172
|
+
rlarge: rlarge
|
|
173
|
+
}[$size];
|
|
174
|
+
}, function (_a) {
|
|
175
|
+
var theme = _a.theme, isError = _a.isError;
|
|
176
|
+
if (isError)
|
|
177
|
+
return theme.ui_cpnt_select_dropdown_border_error;
|
|
136
178
|
return theme.ui_cpnt_select_border_normal;
|
|
137
179
|
}, function (_a) {
|
|
138
180
|
var $size = _a.$size;
|
|
@@ -167,7 +209,9 @@ var S_Select = styled_components_1.default.select(templateObject_10 || (template
|
|
|
167
209
|
? theme.ui_cpnt_select_text_readonly
|
|
168
210
|
: theme.ui_cpnt_select_text_disabled;
|
|
169
211
|
}, function (_a) {
|
|
170
|
-
var theme = _a.theme;
|
|
212
|
+
var theme = _a.theme, isError = _a.isError;
|
|
213
|
+
if (isError)
|
|
214
|
+
return theme.ui_cpnt_select_dropdown_border_error;
|
|
171
215
|
return theme.ui_cpnt_select_border_focus;
|
|
172
216
|
}, function (_a) {
|
|
173
217
|
var theme = _a.theme;
|
|
@@ -179,5 +223,28 @@ var S_Select = styled_components_1.default.select(templateObject_10 || (template
|
|
|
179
223
|
var state = _a.state;
|
|
180
224
|
return state === 'normal' && normalActionColor;
|
|
181
225
|
});
|
|
226
|
+
var S_Error = styled_components_1.default.div(templateObject_12 || (templateObject_12 = __makeTemplateObject(["\n color: ", ";\n font-size: ", ";\n font-weight: ", ";\n line-height: ", ";\n margin-top: ", ";\n text-align: left;\n white-space: pre-wrap;\n"], ["\n color: ", ";\n font-size: ", ";\n font-weight: ", ";\n line-height: ", ";\n margin-top: ", ";\n text-align: left;\n white-space: pre-wrap;\n"])), function (_a) {
|
|
227
|
+
var theme = _a.theme, colorTheme = _a.colorTheme;
|
|
228
|
+
switch (colorTheme) {
|
|
229
|
+
case 'none': {
|
|
230
|
+
return theme.ui_cpnt_select_dropdown_text_error;
|
|
231
|
+
}
|
|
232
|
+
case 'dark': {
|
|
233
|
+
return theme.ui_cpnt_select_dropdown_text_darktheme_error;
|
|
234
|
+
}
|
|
235
|
+
}
|
|
236
|
+
}, function (_a) {
|
|
237
|
+
var theme = _a.theme;
|
|
238
|
+
return theme.desktopFontSize.caption2;
|
|
239
|
+
}, function (_a) {
|
|
240
|
+
var theme = _a.theme;
|
|
241
|
+
return theme.fontWeight.normal;
|
|
242
|
+
}, function (_a) {
|
|
243
|
+
var theme = _a.theme;
|
|
244
|
+
return theme.desktopLineHeight.caption2;
|
|
245
|
+
}, function (_a) {
|
|
246
|
+
var theme = _a.theme;
|
|
247
|
+
return theme.spacing.spacingA;
|
|
248
|
+
});
|
|
182
249
|
exports.default = Select;
|
|
183
|
-
var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6, templateObject_7, templateObject_8, templateObject_9, templateObject_10;
|
|
250
|
+
var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6, templateObject_7, templateObject_8, templateObject_9, templateObject_10, templateObject_11, templateObject_12;
|
package/package.json
CHANGED
package/release-note.md
CHANGED