pds-dev-kit-web 1.3.10 → 1.3.13

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

@@ -28,12 +28,12 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 Object.defineProperty(exports, "__esModule", { value: true });
 var react_1 = __importStar(require("react"));
 var react_dom_1 = __importDefault(require("react-dom"));
-var styled_components_1 = __importDefault(require("styled-components"));
+var styled_components_1 = __importStar(require("styled-components"));
 var IconButton_1 = require("../IconButton");
 var MainButton_1 = require("../MainButton");
 var TextLabel_1 = require("../TextLabel");
 function MobileBasicModal(_a) {
-    var titleText = _a.titleText, contentText = _a.contentText, mBtnText = _a.mBtnText, onClickMBtn = _a.onClickMBtn, onClickXMarkIcon = _a.onClickXMarkIcon, children = _a.children;
+    var titleText = _a.titleText, _b = _a.bodySpacingMode, bodySpacingMode = _b === void 0 ? 'use' : _b, contentText = _a.contentText, mBtnText = _a.mBtnText, onClickMBtn = _a.onClickMBtn, onClickXMarkIcon = _a.onClickXMarkIcon, children = _a.children;
     var container = (0, react_1.useState)(function () {
         var modalRoot = document.createElement('div');
         modalRoot.setAttribute('id', 'MobileBasicModal');
@@ -56,7 +56,7 @@ function MobileBasicModal(_a) {
                 react_1.default.createElement(S_TitleWrapper, null,
                     react_1.default.createElement(TextLabel_1.TextLabel, { text: titleText, colorTheme: "sysTextPrimary", styleTheme: "headingBold" })),
                 react_1.default.createElement(IconButton_1.IconButton, { fillType: "fill", baseSize: "large", baseColorKey: "ui_cpnt_button_fill_base_transparent", iconSize: 24, shapeType: "rectangle", iconName: "ic_xmark", iconColorKey: "ui_cpnt_modal_header_icon_02", iconFillType: "line", onClick: onClickXMarkIcon })),
-            react_1.default.createElement(S_Body, null,
+            react_1.default.createElement(S_Body, { bodySpacingMode: bodySpacingMode },
                 contentText && (react_1.default.createElement(TextLabel_1.TextLabel, { text: contentText, colorTheme: "sysTextSecondary", styleTheme: "subTitleRegular" })),
                 children && children),
             react_1.default.createElement(S_Footer, null, mBtnText && react_1.default.createElement(MainButton_1.MainButton, { text: mBtnText, size: "rlarge", onClick: onClickMBtn })))), container);
@@ -65,7 +65,7 @@ var S_ModalOverlay = styled_components_1.default.div(templateObject_1 || (templa
     var theme = _a.theme;
     return theme.ui_cpnt_modal_dimmed;
 });
-var S_ModalWrapper = styled_components_1.default.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  background-color: ", ";\n  border: 1px solid ", ";\n  border-radius: 8px;\n  box-shadow: ", ";\n  position: fixed;\n  left: 50%;\n  top: 50%;\n  transform: translate(-50%, -50%);\n\n  max-height: 720px;\n  width: calc(100% - 48px);\n  max-width: 560px;\n"], ["\n  background-color: ", ";\n  border: 1px solid ", ";\n  border-radius: 8px;\n  box-shadow: ", ";\n  position: fixed;\n  left: 50%;\n  top: 50%;\n  transform: translate(-50%, -50%);\n\n  max-height: 720px;\n  width: calc(100% - 48px);\n  max-width: 560px;\n"])), function (_a) {
+var S_ModalWrapper = styled_components_1.default.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  background-color: ", ";\n  border: 1px solid ", ";\n  border-radius: 8px;\n  box-shadow: ", ";\n  left: 50%;\n  max-height: 720px;\n  max-width: 560px;\n  position: fixed;\n  top: 50%;\n  transform: translate(-50%, -50%);\n  width: calc(100% - 48px);\n"], ["\n  background-color: ", ";\n  border: 1px solid ", ";\n  border-radius: 8px;\n  box-shadow: ", ";\n  left: 50%;\n  max-height: 720px;\n  max-width: 560px;\n  position: fixed;\n  top: 50%;\n  transform: translate(-50%, -50%);\n  width: calc(100% - 48px);\n"])), function (_a) {
     var theme = _a.theme;
     return theme.ui_cpnt_modal_base;
 }, function (_a) {
@@ -75,13 +75,13 @@ var S_ModalWrapper = styled_components_1.default.div(templateObject_2 || (templa
     var theme = _a.theme;
     return theme.boxShadow.elevation4;
 });
-var S_Header = styled_components_1.default.div(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  padding-bottom: ", ";\n  display: flex;\n  justify-content: space-between;\n"], ["\n  padding-bottom: ", ";\n  display: flex;\n  justify-content: space-between;\n"])), function (_a) {
+var S_Header = styled_components_1.default.div(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  display: flex;\n  justify-content: space-between;\n  padding-bottom: ", ";\n"], ["\n  display: flex;\n  justify-content: space-between;\n  padding-bottom: ", ";\n"])), function (_a) {
     var theme = _a.theme;
     return theme.spacing.spacingC;
 });
-var S_Body = styled_components_1.default.div(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n  padding-top: ", ";\n  margin-right: ", ";\n  margin-left: ", ";\n  margin-bottom: ", ";\n  overflow-y: scroll;\n  max-height: 480px;\n"], ["\n  padding-top: ", ";\n  margin-right: ", ";\n  margin-left: ", ";\n  margin-bottom: ", ";\n  overflow-y: scroll;\n  max-height: 480px;\n"])), function (_a) {
+var S_Body = styled_components_1.default.div(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n  margin-bottom: ", ";\n  margin-left: ", ";\n  margin-right: ", ";\n  max-height: 480px;\n  overflow-y: scroll;\n  padding-top: ", ";\n\n  ", "\n"], ["\n  margin-bottom: ", ";\n  margin-left: ", ";\n  margin-right: ", ";\n  max-height: 480px;\n  overflow-y: scroll;\n  padding-top: ", ";\n\n  ", "\n"])), function (_a) {
     var theme = _a.theme;
-    return theme.spacing.spacingC;
+    return theme.spacing.spacingE;
 }, function (_a) {
     var theme = _a.theme;
     return theme.spacing.spacingE;
@@ -90,11 +90,14 @@ var S_Body = styled_components_1.default.div(templateObject_4 || (templateObject
     return theme.spacing.spacingE;
 }, function (_a) {
     var theme = _a.theme;
-    return theme.spacing.spacingE;
+    return theme.spacing.spacingC;
+}, function (_a) {
+    var bodySpacingMode = _a.bodySpacingMode;
+    return bodySpacingMode === 'none' && (0, styled_components_1.css)(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n      margin-bottom: 0;\n      margin-left: 0;\n      margin-right: 0;\n    "], ["\n      margin-bottom: 0;\n      margin-left: 0;\n      margin-right: 0;\n    "])));
 });
-var S_Footer = styled_components_1.default.div(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n  display: flex;\n  justify-content: space-between;\n  padding-top: ", ";\n  margin-right: ", ";\n  margin-left: ", ";\n  margin-bottom: ", ";\n"], ["\n  display: flex;\n  justify-content: space-between;\n  padding-top: ", ";\n  margin-right: ", ";\n  margin-left: ", ";\n  margin-bottom: ", ";\n"])), function (_a) {
+var S_Footer = styled_components_1.default.div(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n  display: flex;\n  justify-content: space-between;\n  margin-bottom: ", ";\n  margin-left: ", ";\n  margin-right: ", ";\n  padding-top: ", ";\n"], ["\n  display: flex;\n  justify-content: space-between;\n  margin-bottom: ", ";\n  margin-left: ", ";\n  margin-right: ", ";\n  padding-top: ", ";\n"])), function (_a) {
     var theme = _a.theme;
-    return theme.spacing.spacingD;
+    return theme.spacing.spacingE;
 }, function (_a) {
     var theme = _a.theme;
     return theme.spacing.spacingE;
@@ -103,17 +106,17 @@ var S_Footer = styled_components_1.default.div(templateObject_5 || (templateObje
     return theme.spacing.spacingE;
 }, function (_a) {
     var theme = _a.theme;
-    return theme.spacing.spacingE;
+    return theme.spacing.spacingD;
 });
-var S_TitleWrapper = styled_components_1.default.div(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n  margin-right: ", ";\n  margin-top: ", ";\n  margin-left: ", ";\n"], ["\n  margin-right: ", ";\n  margin-top: ", ";\n  margin-left: ", ";\n"])), function (_a) {
+var S_TitleWrapper = styled_components_1.default.div(templateObject_7 || (templateObject_7 = __makeTemplateObject(["\n  margin-left: ", ";\n  margin-right: ", ";\n  margin-top: ", ";\n"], ["\n  margin-left: ", ";\n  margin-right: ", ";\n  margin-top: ", ";\n"])), function (_a) {
     var theme = _a.theme;
-    return theme.spacing.spacingB;
+    return theme.spacing.spacingE;
 }, function (_a) {
     var theme = _a.theme;
-    return theme.spacing.spacingE;
+    return theme.spacing.spacingB;
 }, function (_a) {
     var theme = _a.theme;
     return theme.spacing.spacingE;
 });
 exports.default = MobileBasicModal;
-var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6;
+var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6, templateObject_7;

package/dist/src/mobile/components/MobileTabBar/MobileTabBar.d.ts

@@ -1,11 +1,13 @@
 /// <reference types="react" />
-import { PDSTextType } from '../../../common';
+import { PDSTabItemOption, PDSTextType } from '../../../common/types';
 declare type TextObj = {
     path: string;
     title: PDSTextType;
 };
-export declare type MobileTabBarProps = {
-    textArray: TextObj[];
+declare type MobileTabBarProps = {
+    itemArray?: PDSTabItemOption[];
+    /** @deprecated v1.5 해당 필드 대신 itemArray를 사용하세요. */
+    textArray?: TextObj[];
 };
-declare function MobileTabBar({ textArray }: MobileTabBarProps): JSX.Element;
+declare function MobileTabBar({ itemArray, textArray }: MobileTabBarProps): JSX.Element;
 export default MobileTabBar;

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

@@ -12,19 +12,28 @@ var react_router_dom_1 = require("react-router-dom");
 var styled_components_1 = __importDefault(require("styled-components"));
 var TextLabel_1 = require("../TextLabel");
 function MobileTabBar(_a) {
-    var textArray = _a.textArray;
+    var itemArray = _a.itemArray, textArray = _a.textArray;
     var history = (0, react_router_dom_1.useHistory)();
-    var pathname = window.location.pathname;
-    var handleClick = function (value) {
-        if (value) {
-            history.push(value.path);
-        }
-    };
-    return (react_1.default.createElement(react_1.default.Fragment, null,
-        react_1.default.createElement(S_TabBar, null, textArray.map(function (value) { return (react_1.default.createElement(S_TabWrapper, { key: value.path, isActive: pathname === value.path, onClick: function () {
-                handleClick(value);
-            } },
-            react_1.default.createElement(TextLabel_1.TextLabel, { text: value.title, styleTheme: "body2Bold", colorTheme: pathname === value.path ? 'usrTextBrandPrimary' : 'sysTextTertiary', singleLineMode: "use" }))); }))));
+    var pathname = (0, react_router_dom_1.useLocation)().pathname;
+    if (itemArray) {
+        var handleClickTabItem_1 = function (item) {
+            if (item.onClick) {
+                item.onClick();
+            }
+        };
+        return (react_1.default.createElement(S_TabBar, null, itemArray.map(function (item, index) { return (react_1.default.createElement(S_TabWrapper, { key: index, isActive: item.isActive, onClick: function () { return handleClickTabItem_1(item); } },
+            react_1.default.createElement(TextLabel_1.TextLabel, { text: item.title, textAlign: "center", styleTheme: "body2Bold", colorTheme: item.isActive ? 'usrTextBrandPrimary' : 'sysTextTertiary', singleLineMode: "use" }))); })));
+    }
+    if (textArray) {
+        var handleClick_1 = function (value) {
+            if (value) {
+                history.push(value.path);
+            }
+        };
+        return (react_1.default.createElement(S_TabBar, null, textArray.map(function (value) { return (react_1.default.createElement(S_TabWrapper, { key: value.path, isActive: pathname === value.path, onClick: function () { return handleClick_1(value); } },
+            react_1.default.createElement(TextLabel_1.TextLabel, { text: value.title, textAlign: "center", styleTheme: "body2Bold", colorTheme: pathname === value.path ? 'usrTextBrandPrimary' : 'sysTextTertiary', singleLineMode: "use" }))); })));
+    }
+    return react_1.default.createElement(react_1.default.Fragment, null);
 }
 var S_TabWrapper = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  align-items: center;\n  justify-content: center;\n  cursor: pointer;\n  display: flex;\n  position: relative;\n  background-color: ", ";\n  padding: 0 ", ";\n  flex: 1;\n\n  &:last-child {\n    margin-right: 0;\n  }\n\n  &::after {\n    background-color: ", ";\n    bottom: -1px;\n    content: '';\n    height: 2px;\n    position: absolute;\n    width: 100%;\n    ", ";\n  }\n"], ["\n  align-items: center;\n  justify-content: center;\n  cursor: pointer;\n  display: flex;\n  position: relative;\n  background-color: ", ";\n  padding: 0 ", ";\n  flex: 1;\n\n  &:last-child {\n    margin-right: 0;\n  }\n\n  &::after {\n    background-color: ", ";\n    bottom: -1px;\n    content: '';\n    height: 2px;\n    position: absolute;\n    width: 100%;\n    ", ";\n  }\n"])), function (_a) {
     var isActive = _a.isActive, theme = _a.theme;

package/dist/src/mobile/components/TextLabel/TextLabel.d.ts

@@ -12,6 +12,7 @@ export declare type TextLabelProps = {
     userSelectMode?: 'none' | 'use';
     customFontSize?: string;
     customFontWeight?: 'bold' | 'regular';
+    textDecorationType?: 'none' | 'line_through';
 };
 export declare type TextStyleProps = {
     textAlign?: 'left' | 'center' | 'right';
@@ -24,6 +25,7 @@ export declare type TextStyleProps = {
     userSelectMode?: 'none' | 'use';
     customFontSize?: string;
     customFontWeight?: 'bold' | 'regular';
+    textDecorationType?: 'none' | 'line_through';
 };
-declare function TextLabel({ text, textAlign, styleTheme, colorOverride, colorTheme, singleLineMode, ellipsisMode, lineLimit, userSelectMode, customFontSize, customFontWeight }: TextLabelProps): JSX.Element;
+declare function TextLabel({ text, textAlign, styleTheme, colorOverride, colorTheme, singleLineMode, ellipsisMode, lineLimit, userSelectMode, customFontSize, customFontWeight, textDecorationType }: TextLabelProps): JSX.Element;
 export default TextLabel;

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

@@ -30,8 +30,8 @@ var react_1 = __importDefault(require("react"));
 var styled_components_1 = __importStar(require("styled-components"));
 var common_1 = require("../../../common");
 function TextLabel(_a) {
-    var text = _a.text, _b = _a.textAlign, textAlign = _b === void 0 ? 'left' : _b, _c = _a.styleTheme, styleTheme = _c === void 0 ? 'body2Bold' : _c, colorOverride = _a.colorOverride, _d = _a.colorTheme, colorTheme = _d === void 0 ? 'sysTextPrimary' : _d, _e = _a.singleLineMode, singleLineMode = _e === void 0 ? 'none' : _e, _f = _a.ellipsisMode, ellipsisMode = _f === void 0 ? 'none' : _f, lineLimit = _a.lineLimit, _g = _a.userSelectMode, userSelectMode = _g === void 0 ? 'none' : _g, customFontSize = _a.customFontSize, customFontWeight = _a.customFontWeight;
-    return (react_1.default.createElement(S_TextLabel, { textAlign: textAlign, styleTheme: styleTheme, colorOverride: colorOverride, colorTheme: colorTheme, singleLineMode: singleLineMode, ellipsisMode: ellipsisMode, lineLimit: lineLimit, userSelectMode: userSelectMode, customFontSize: customFontSize, customFontWeight: customFontWeight }, text));
+    var text = _a.text, _b = _a.textAlign, textAlign = _b === void 0 ? 'left' : _b, _c = _a.styleTheme, styleTheme = _c === void 0 ? 'body2Bold' : _c, colorOverride = _a.colorOverride, _d = _a.colorTheme, colorTheme = _d === void 0 ? 'sysTextPrimary' : _d, _e = _a.singleLineMode, singleLineMode = _e === void 0 ? 'none' : _e, _f = _a.ellipsisMode, ellipsisMode = _f === void 0 ? 'none' : _f, lineLimit = _a.lineLimit, _g = _a.userSelectMode, userSelectMode = _g === void 0 ? 'none' : _g, customFontSize = _a.customFontSize, customFontWeight = _a.customFontWeight, _h = _a.textDecorationType, textDecorationType = _h === void 0 ? 'none' : _h;
+    return (react_1.default.createElement(S_TextLabel, { textAlign: textAlign, styleTheme: styleTheme, colorOverride: colorOverride, colorTheme: colorTheme, singleLineMode: singleLineMode, ellipsisMode: ellipsisMode, lineLimit: lineLimit, userSelectMode: userSelectMode, customFontSize: customFontSize, customFontWeight: customFontWeight, textDecorationType: textDecorationType }, text));
 }
 var displayBold = (0, styled_components_1.css)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  font-size: ", ";\n  line-height: ", ";\n  font-weight: ", ";\n"], ["\n  font-size: ", ";\n  line-height: ", ";\n  font-weight: ", ";\n"])), function (_a) {
     var theme = _a.theme;
@@ -259,7 +259,7 @@ var ellipsisStyle = (0, styled_components_1.css)(templateObject_30 || (templateO
     return lineLimit;
 });
 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"])));
-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) {
+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  ", ";\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\n  ", ";\n"])), function (_a) {
     var textAlign = _a.textAlign;
     return textAlign;
 }, function (_a) {
@@ -316,6 +316,13 @@ var S_TextLabel = styled_components_1.default.div(templateObject_32 || (template
 }, function (_a) {
     var userSelectMode = _a.userSelectMode;
     return userSelectMode === 'none' && userSelectModeStyle;
+}, function (_a) {
+    var textDecorationType = _a.textDecorationType;
+    return textDecorationType &&
+        {
+            none: '',
+            line_through: 'text-decoration: line-through;'
+        }[textDecorationType];
 });
 exports.default = TextLabel;
 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, templateObject_16, templateObject_17, templateObject_18, templateObject_19, templateObject_20, templateObject_21, templateObject_22, templateObject_23, templateObject_24, templateObject_25, templateObject_26, templateObject_27, templateObject_28, templateObject_29, templateObject_30, templateObject_31, templateObject_32;

package/package.json

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

package/release-note.md

@@ -1,10 +1,12 @@
 # PDS-DEV-KIT-WEB Release Notes
-## [v1.3.10]
+## [v1.3.13]
 
+### Layout
+* WS
+  * LayoutWS의 우측부분이 너비를 제대로 잡을 수 있도록 수정 (width: 100%; -> flex: 1; overflow: hidden;)
 ### Component
-* AdminList
-  * 벌크액션바 정상 작동 위해 maintinIds를 디펜던시에 추가
-
-### Color
-* 커스텀 컬러 작동을 위해 palette를 받을 수 있도록 수정
-* 컬러 키 값 22.05.02 22시 15분 기준 싱크
+* D_AdminListItem
+  * 각 컬럼에 overflow: auto; 추가 (내용의 길이가 길어지면 타 칼럼을 침범하는 경우가 있음)
+  * rowSize가 high일때 깨지는 부분 해결
+* D_ TextLabel
+  * tooltipText 사용시 뜨는 아이콘의 fillType과 color 수정