pds-dev-kit-web 0.6.11 → 0.6.12

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.
Files changed (4) hide show
  1. package/dist/src/desktop/components/Select/Select.js +9 -3
  2. package/dist/src/mobile/components/Select/Select.js +9 -3
  3. package/package.json +1 -1
  4. package/release-note.md +4 -5
package/dist/src/desktop/components/Select/Select.js CHANGED
@@ -29,7 +29,9 @@ var hybrid_1 = require("../../../hybrid");
29
29
  function Select(_a) {
30
30
  var hintText = _a.hintText, defaultValue = _a.defaultValue, valueArray = _a.valueArray, _b = _a.size, size = _b === void 0 ? 'large' : _b, _c = _a.responsiveMode, responsiveMode = _c === void 0 ? 'none' : _c, _d = _a.state, state = _d === void 0 ? 'normal' : _d, onChange = _a.onChange, _e = _a.colorTheme, colorTheme = _e === void 0 ? 'none' : _e;
31
31
  var _f = (0, react_1.useState)(false), isFocused = _f[0], setIsFocused = _f[1];
32
- var handleClick = function () { return setIsFocused(true); };
32
+ var handleClick = function () {
33
+ state === 'normal' && setIsFocused(true);
34
+ };
33
35
  var handleBlur = function () { return setIsFocused(false); };
34
36
  var handleChange = function (e) {
35
37
  setIsFocused(false);
@@ -54,7 +56,8 @@ function Select(_a) {
54
56
  }
55
57
  };
56
58
  return (react_1.default.createElement(S_Box, { size: size, responsiveMode: responsiveMode, onClick: handleClick, onBlur: handleBlur, tabIndex: 0 },
57
- react_1.default.createElement(S_Icon, { size: 16, fillType: "line", iconName: isFocused ? 'ic_arrow_up' : 'ic_arrow_down', colorKey: getIconColorKey() }),
59
+ react_1.default.createElement(S_Icon_Wrapper, { state: state },
60
+ react_1.default.createElement(hybrid_1.Icon, { size: 16, fillType: "line", iconName: isFocused ? 'ic_arrow_up' : 'ic_arrow_down', colorKey: getIconColorKey() })),
58
61
  react_1.default.createElement(S_Select, { disabled: state === 'disabled' || state === 'read_only', defaultValue: (defaultValue === null || defaultValue === void 0 ? void 0 : defaultValue.value) || '', state: state, colorTheme: colorTheme, onChange: handleChange },
59
62
  react_1.default.createElement("option", { disabled: true, value: (defaultValue === null || defaultValue === void 0 ? void 0 : defaultValue.value) || '' }, (defaultValue === null || defaultValue === void 0 ? void 0 : defaultValue.text) || hintText),
60
63
  valueArray.map(function (el) { return (react_1.default.createElement("option", { key: el.value, value: el.value }, el.text)); }))));
@@ -100,9 +103,12 @@ var S_Box = styled_components_1.default.div(templateObject_6 || (templateObject_
100
103
  var responsiveMode = _a.responsiveMode;
101
104
  return responsiveMode === 'use' && 'width: 100%';
102
105
  });
103
- var S_Icon = (0, styled_components_1.default)(hybrid_1.Icon)(templateObject_7 || (templateObject_7 = __makeTemplateObject(["\n position: absolute;\n right: ", ";\n top: 50%;\n transform: translateY(-50%);\n z-index: 2;\n"], ["\n position: absolute;\n right: ", ";\n top: 50%;\n transform: translateY(-50%);\n z-index: 2;\n"])), function (_a) {
106
+ var S_Icon_Wrapper = styled_components_1.default.div(templateObject_7 || (templateObject_7 = __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"], ["\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"])), function (_a) {
104
107
  var theme = _a.theme;
105
108
  return theme.spacing.spacingD;
109
+ }, function (_a) {
110
+ var state = _a.state;
111
+ return state === 'normal' && 'z-index: -1';
106
112
  });
107
113
  var S_Select = styled_components_1.default.select(templateObject_8 || (templateObject_8 = __makeTemplateObject(["\n appearance: none;\n background-color: ", ";\n border: 1px solid ", ";\n border-radius: 8px;\n color: ", ";\n font-family: inherit;\n font-size: ", ";\n height: 100%;\n padding-left: ", ";\n width: 100%;\n\n :disabled {\n background-color: ", ";\n color: ", ";\n cursor: not-allowed;\n }\n\n :focus {\n border: 0.5px solid ", " !important;\n color: ", ";\n outline: 0 !important;\n outline-offset: 0 !important;\n }\n\n ", "\n"], ["\n appearance: none;\n background-color: ", ";\n border: 1px solid ", ";\n border-radius: 8px;\n color: ", ";\n font-family: inherit;\n font-size: ", ";\n height: 100%;\n padding-left: ", ";\n width: 100%;\n\n :disabled {\n background-color: ", ";\n color: ", ";\n cursor: not-allowed;\n }\n\n :focus {\n border: 0.5px solid ", " !important;\n color: ", ";\n outline: 0 !important;\n outline-offset: 0 !important;\n }\n\n ", "\n"])), function (_a) {
108
114
  var theme = _a.theme;
package/dist/src/mobile/components/Select/Select.js CHANGED
@@ -29,7 +29,9 @@ var hybrid_1 = require("../../../hybrid");
29
29
  function Select(_a) {
30
30
  var hintText = _a.hintText, defaultValue = _a.defaultValue, valueArray = _a.valueArray, _b = _a.size, size = _b === void 0 ? 'large' : _b, _c = _a.responsiveMode, responsiveMode = _c === void 0 ? 'none' : _c, _d = _a.state, state = _d === void 0 ? 'normal' : _d, onChange = _a.onChange, _e = _a.colorTheme, colorTheme = _e === void 0 ? 'none' : _e;
31
31
  var _f = (0, react_1.useState)(false), isFocused = _f[0], setIsFocused = _f[1];
32
- var handleClick = function () { return setIsFocused(true); };
32
+ var handleClick = function () {
33
+ state === 'normal' && setIsFocused(true);
34
+ };
33
35
  var handleBlur = function () { return setIsFocused(false); };
34
36
  var handleChange = function (e) {
35
37
  setIsFocused(false);
@@ -50,7 +52,8 @@ function Select(_a) {
50
52
  return 'ui_cpnt_select_icon_01';
51
53
  };
52
54
  return (react_1.default.createElement(S_Box, { size: size, responsiveMode: responsiveMode, onClick: handleClick, onBlur: handleBlur, tabIndex: 0 },
53
- react_1.default.createElement(S_Icon, { size: 16, fillType: "line", iconName: isFocused ? 'ic_arrow_up' : 'ic_arrow_down', colorKey: getIconColorKey() }),
55
+ react_1.default.createElement(S_Icon_Wrapper, { state: state },
56
+ react_1.default.createElement(hybrid_1.Icon, { size: 16, fillType: "line", iconName: isFocused ? 'ic_arrow_up' : 'ic_arrow_down', colorKey: getIconColorKey() })),
54
57
  react_1.default.createElement(S_Select, { disabled: state === 'disabled' || state === 'read_only', defaultValue: (defaultValue === null || defaultValue === void 0 ? void 0 : defaultValue.value) || '', state: state, colorTheme: colorTheme, onChange: handleChange },
55
58
  react_1.default.createElement("option", { disabled: true, value: (defaultValue === null || defaultValue === void 0 ? void 0 : defaultValue.value) || '' }, (defaultValue === null || defaultValue === void 0 ? void 0 : defaultValue.text) || hintText),
56
59
  valueArray.map(function (el) { return (react_1.default.createElement("option", { key: el.value, value: el.value }, el.text)); }))));
@@ -96,9 +99,12 @@ var S_Box = styled_components_1.default.div(templateObject_6 || (templateObject_
96
99
  var responsiveMode = _a.responsiveMode;
97
100
  return responsiveMode === 'use' && 'width: 100%';
98
101
  });
99
- var S_Icon = (0, styled_components_1.default)(hybrid_1.Icon)(templateObject_7 || (templateObject_7 = __makeTemplateObject(["\n position: absolute;\n right: ", ";\n top: 50%;\n transform: translateY(-50%);\n z-index: 2;\n"], ["\n position: absolute;\n right: ", ";\n top: 50%;\n transform: translateY(-50%);\n z-index: 2;\n"])), function (_a) {
102
+ var S_Icon_Wrapper = styled_components_1.default.div(templateObject_7 || (templateObject_7 = __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"], ["\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"])), function (_a) {
100
103
  var theme = _a.theme;
101
104
  return theme.spacing.spacingD;
105
+ }, function (_a) {
106
+ var state = _a.state;
107
+ return state === 'normal' && 'z-index: -1';
102
108
  });
103
109
  var S_Select = styled_components_1.default.select(templateObject_8 || (templateObject_8 = __makeTemplateObject(["\n appearance: none;\n background-color: ", ";\n border: 1px solid ", ";\n border-radius: 8px;\n color: ", ";\n font-family: inherit;\n font-size: ", ";\n height: 100%;\n padding-left: ", ";\n width: 100%;\n\n :disabled {\n background-color: ", ";\n color: ", ";\n cursor: not-allowed;\n }\n\n :focus {\n border: 0.5px solid ", " !important;\n color: ", ";\n outline: 0 !important;\n outline-offset: 0 !important;\n }\n\n ", "\n"], ["\n appearance: none;\n background-color: ", ";\n border: 1px solid ", ";\n border-radius: 8px;\n color: ", ";\n font-family: inherit;\n font-size: ", ";\n height: 100%;\n padding-left: ", ";\n width: 100%;\n\n :disabled {\n background-color: ", ";\n color: ", ";\n cursor: not-allowed;\n }\n\n :focus {\n border: 0.5px solid ", " !important;\n color: ", ";\n outline: 0 !important;\n outline-offset: 0 !important;\n }\n\n ", "\n"])), function (_a) {
104
110
  var theme = _a.theme;
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "pds-dev-kit-web",
3
- "version": "0.6.11",
3
+ "version": "0.6.12",
4
4
  "license": "MIT",
5
5
  "private": false,
6
6
  "main": "dist/index.js",
package/release-note.md CHANGED
@@ -1,8 +1,7 @@
1
1
  # UW Release Notes
2
- ## [v0.6.11]
2
+ ## [v0.6.12]
3
3
 
4
4
  ### Component
5
- * FloatingActionButton
6
- * fontWeight의 default value를 bold로 부여 (기획서와 싱크 맞춤)
7
- * MobileHeaderBar
8
- * displayType이 ibtn_amount2일때, 좌측에 빈공간을 하나 더 추가 (MobileHeaderBar에서 우측에 버튼이 2개일때 title이 중앙에 위치하지 않고 좌측으로 치우치는 문제를 해결)
5
+ * Select
6
+ * 화살표 아이콘의 위치가 안 맞는 문제 수정
7
+ * read_only와 disabled일때 클릭이 되는 문제 수정