pds-dev-kit-web 2.2.10 → 2.2.11

package/dist/src/mobile/components/Dropdown/Dropdown.js

@@ -37,9 +37,14 @@ var __importStar = (this && this.__importStar) || function (mod) {
     __setModuleDefault(result, mod);
     return result;
 };
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
 Object.defineProperty(exports, "__esModule", { value: true });
 var jsx_runtime_1 = require("react/jsx-runtime");
 var react_1 = require("react");
+var react_dom_1 = require("react-dom");
+var clickTypeSystemUICssGenerator_1 = __importDefault(require("../../../common/utils/SystemUIPositionGenerator/clickTypeSystemUICssGenerator"));
 var styled_components_1 = __importStar(require("styled-components"));
 var transitionStyle_1 = require("../../../common/styles/movement/transitionStyle");
 var hybrid_1 = require("../../../hybrid");
@@ -55,6 +60,10 @@ function Dropdown(_a) {
     size = _e === void 0 ? 'large' : _e, _f = _a.state, state = _f === void 0 ? 'normal' : _f, valueArray = _a.valueArray, customWidth = _a.customWidth, _g = _a.displayType, displayType = _g === void 0 ? 'text_only' : _g, _h = _a.fontWeight, fontWeight = _h === void 0 ? 'regular' : _h, onChange = _a.onChange;
     var _j = (0, react_1.useState)(false), isFocused = _j[0], setIsFocused = _j[1];
     var _k = (0, react_1.useState)(null), selectedValue = _k[0], setSelectedValue = _k[1];
+    var _l = (0, react_1.useState)(null), contextMenuSizeOffset = _l[0], setContextMenuSizeOffset = _l[1];
+    var _m = (0, react_1.useState)(null), dropdownPositionOffset = _m[0], setDropdownPositionOffset = _m[1];
+    var contextMenuRef = (0, react_1.useRef)(null);
+    var dropdownRef = (0, react_1.useRef)(null);
     /**
      * @when value 프롭의 값에 따라
      * @expected 값이 null일 때 드롭다운을 초기화하고, 값이 있다면 해당 값으로 설정해줍니다.
@@ -80,6 +89,36 @@ function Dropdown(_a) {
         }
         setSelectedValue(defaultValue);
     }, [defaultValue]);
+    /**
+     * @when : isFocused 변경되었을 때
+     * @expected : dropdownRef, contextMenuRef 의 위치를 업데이트합니다.
+     * @clear :
+     */
+    (0, react_1.useEffect)(function () {
+        if (dropdownRef.current) {
+            var _a = dropdownRef.current.getBoundingClientRect(), top_1 = _a.top, right = _a.right, left = _a.left, bottom = _a.bottom;
+            setDropdownPositionOffset({
+                top: top_1 + window.scrollY,
+                right: right + window.scrollX,
+                bottom: bottom + window.scrollY,
+                left: left + window.scrollX
+            });
+        }
+        if (!isFocused && contextMenuRef.current) {
+            setContextMenuSizeOffset(null);
+            return;
+        }
+        if (contextMenuRef.current) {
+            setContextMenuSizeOffset({
+                height: contextMenuRef.current.offsetHeight,
+                width: contextMenuRef.current.offsetWidth
+            });
+        }
+    }, [isFocused]);
+    var contextMenuPositionCss = (0, clickTypeSystemUICssGenerator_1.default)({
+        sizeOffset: contextMenuSizeOffset,
+        positionOffset: dropdownPositionOffset
+    });
     var handleClick = function () {
         if (state === 'disabled' || state === 'read_only') {
             return;
@@ -101,12 +140,14 @@ function Dropdown(_a) {
         }
     };
     var getCustomWidth = function () {
+        var _a;
         if (customWidth) {
             return customWidth;
         }
-        if (displayType === 'icon_only') {
-            return 'auto';
+        if ((_a = dropdownRef.current) === null || _a === void 0 ? void 0 : _a.offsetWidth) {
+            return "".concat(dropdownRef.current.offsetWidth, "px");
         }
+        return '';
     };
     var getIconColorKey = function () {
         if (state === 'disabled' || state === 'read_only') {
@@ -194,7 +235,8 @@ function Dropdown(_a) {
         var LARGE_HEIGHT = 48;
         return LARGE_HEIGHT * maxHeightItemNumber;
     }, [size, maxHeightItemNumber]);
-    return ((0, jsx_runtime_1.jsxs)(S_Dropdown, __assign({ "x-pds-name": "Dropdown", "x-pds-element-type": "component", "x-pds-device-type": "mobile", className: "container", size: size, tabIndex: 0, onBlur: handleBlur, responsiveMode: responsiveMode, customWidth: customWidth, displayType: displayType }, { children: [(0, jsx_runtime_1.jsxs)(S_Select, __assign({ size: size, onClick: handleClick, isFocused: isFocused, state: state, colorTheme: colorTheme, responsiveMode: responsiveMode, customWidth: customWidth, displayType: displayType }, { children: [(0, jsx_runtime_1.jsxs)(S_TextLabel, __assign({ size: size, responsiveMode: responsiveMode, displayType: displayType }, { children: [(displayType === 'icon_only' || displayType === 'icon_text') && (selectedValue === null || selectedValue === void 0 ? void 0 : selectedValue.iconName) && ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(hybrid_1.Icon, { size: size === 'small' ? 20 : 24, iconName: selectedValue.iconName, fillType: selectedValue.iconFillType, colorKey: getIconColorKey() }), displayType === 'icon_text' && (0, jsx_runtime_1.jsx)(hybrid_1.Spacing, { size: "spacing_b", spacingType: "width" })] })), (displayType === 'text_only' || displayType === 'icon_text') && ((0, jsx_runtime_1.jsx)(TextLabel_1.TextLabel, { text: (selectedValue === null || selectedValue === void 0 ? void 0 : selectedValue.text) || (value === null || value === void 0 ? void 0 : value.text) || (defaultValue === null || defaultValue === void 0 ? void 0 : defaultValue.text) || hintText, styleTheme: fontWeight === 'bold' ? 'form2Bold' : 'form2Regular', singleLineMode: "use", colorTheme: getTextColorTheme(), colorOverride: getTextColorOverride(), ellipsisMode: "use", lineLimit: 1, wordBreak: "break_all" }))] })), (0, jsx_runtime_1.jsx)(hybrid_1.Icon, { size: 16, fillType: "line", iconName: isFocused ? 'ic_arrow_up' : 'ic_arrow_down', colorKey: getArrowIconColorKey() })] })), isFocused && ((0, jsx_runtime_1.jsx)(S_ContextMenuWrapper, __assign({ displayType: displayType }, { children: (0, jsx_runtime_1.jsx)(ContextMenu_1.ContextMenu, __assign({ autoWidthMode: "use", maxHeight: maxHeight, customWidth: getCustomWidth() }, { children: valueArray.map(function (el) { return ((0, jsx_runtime_1.jsx)(react_1.Fragment, { children: (0, jsx_runtime_1.jsx)(ContextMenuItem_1.ContextMenuItem, { option: el, size: size, isSelected: (selectedValue === null || selectedValue === void 0 ? void 0 : selectedValue.value) === el.value, onClick: handleClickOption, state: el.state, displayType: displayType }) }, el.value)); }) })) })))] })));
+    return ((0, jsx_runtime_1.jsxs)(S_Dropdown, __assign({ "x-pds-name": "Dropdown", "x-pds-element-type": "component", "x-pds-device-type": "mobile", className: "container", ref: dropdownRef, size: size, tabIndex: 0, onBlur: handleBlur, responsiveMode: responsiveMode, customWidth: customWidth, displayType: displayType }, { children: [(0, jsx_runtime_1.jsxs)(S_Select, __assign({ size: size, onClick: handleClick, isFocused: isFocused, state: state, colorTheme: colorTheme, responsiveMode: responsiveMode, customWidth: customWidth, displayType: displayType }, { children: [(0, jsx_runtime_1.jsxs)(S_TextLabel, __assign({ size: size, responsiveMode: responsiveMode, displayType: displayType }, { children: [(displayType === 'icon_only' || displayType === 'icon_text') && (selectedValue === null || selectedValue === void 0 ? void 0 : selectedValue.iconName) && ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(hybrid_1.Icon, { size: size === 'small' ? 20 : 24, iconName: selectedValue.iconName, fillType: selectedValue.iconFillType, colorKey: getIconColorKey() }), displayType === 'icon_text' && (0, jsx_runtime_1.jsx)(hybrid_1.Spacing, { size: "spacing_b", spacingType: "width" })] })), (displayType === 'text_only' || displayType === 'icon_text') && ((0, jsx_runtime_1.jsx)(TextLabel_1.TextLabel, { text: (selectedValue === null || selectedValue === void 0 ? void 0 : selectedValue.text) || (value === null || value === void 0 ? void 0 : value.text) || (defaultValue === null || defaultValue === void 0 ? void 0 : defaultValue.text) || hintText, styleTheme: fontWeight === 'bold' ? 'form2Bold' : 'form2Regular', singleLineMode: "use", colorTheme: getTextColorTheme(), colorOverride: getTextColorOverride(), ellipsisMode: "use", lineLimit: 1, wordBreak: "break_all" }))] })), (0, jsx_runtime_1.jsx)(hybrid_1.Icon, { size: 16, fillType: "line", iconName: isFocused ? 'ic_arrow_up' : 'ic_arrow_down', colorKey: getArrowIconColorKey() })] })), isFocused &&
+                (0, react_dom_1.createPortal)((0, jsx_runtime_1.jsx)(S_ContextMenuWrapper, __assign({ ref: contextMenuRef, contextMenuPositionCss: contextMenuPositionCss }, { children: (0, jsx_runtime_1.jsx)(ContextMenu_1.ContextMenu, __assign({ autoWidthMode: "use", maxHeight: maxHeight, customWidth: getCustomWidth() }, { children: valueArray.map(function (el) { return ((0, jsx_runtime_1.jsx)("div", __assign({ onMouseDown: function () { return handleClickOption(el); } }, { children: (0, jsx_runtime_1.jsx)(ContextMenuItem_1.ContextMenuItem, { option: el, size: size, isSelected: (selectedValue === null || selectedValue === void 0 ? void 0 : selectedValue.value) === el.value, state: el.state, displayType: displayType }) }), el.value)); }) })) })), document.body)] })));
 }
 var S_TextLabel = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  align-items: center;\n  display: flex;\n  padding-right: ", ";\n\n  ", ";\n"], ["\n  align-items: center;\n  display: flex;\n  padding-right: ", ";\n\n  ", ";\n"])), function (_a) {
     var theme = _a.theme;
@@ -369,12 +411,9 @@ var S_Select = styled_components_1.default.div(templateObject_14 || (templateObj
     var state = _a.state;
     return state === 'normal' && normalActionColor;
 });
-var S_ContextMenuWrapper = styled_components_1.default.div(templateObject_15 || (templateObject_15 = __makeTemplateObject(["\n  display: block;\n  margin-top: ", ";\n  position: absolute;\n  width: inherit;\n  width: ", ";\n"], ["\n  display: block;\n  margin-top: ", ";\n  position: absolute;\n  width: inherit;\n  width: ", ";\n"])), function (_a) {
-    var theme = _a.theme;
-    return theme.spacing.spacingB;
-}, function (_a) {
-    var displayType = _a.displayType;
-    return (displayType === 'icon_only' ? '100%' : 'inherit');
+var S_ContextMenuWrapper = styled_components_1.default.div(templateObject_15 || (templateObject_15 = __makeTemplateObject(["\n  display: block;\n  position: absolute;\n\n  ", ";\n"], ["\n  display: block;\n  position: absolute;\n\n  ", ";\n"])), function (_a) {
+    var contextMenuPositionCss = _a.contextMenuPositionCss;
+    return contextMenuPositionCss;
 });
 exports.default = Dropdown;
 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, templateObject_14, templateObject_15;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "pds-dev-kit-web",
-  "version": "2.2.10",
+  "version": "2.2.11",
   "license": "MIT",
   "private": false,
   "main": "dist/index.js",

package/release-note.md

@@ -1,8 +1,12 @@
 # PDS-DEV-KIT-WEB Release Notes
-## [v2.2.10]
+## [v2.2.11]
 ## daily|https://design.storybook.publ.biz/
 
 ### Component
-* Icon
-  * ic_typeface_system(fill, line) 추가
-  * ic_logo_google(fill, line) 추가
+    * systemUI의 positioning을 모듈화
+        * TextLabel (tooltip)
+        * ContextMenu
+        * Dropdown
+        * IconButton/ButtonGroup (tooltip)
+### Color
+    * 컬러 키 값 23.10.20 18시 48분 기준 싱크