pds-dev-kit-web 1.6.11 → 1.6.13

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 (5) hide show
  1. package/dist/src/desktop/components/BasicChatListItem/BasicChatListItem.js +15 -7
  2. package/dist/src/desktop/components/UserDesktopNavBar/UserDesktopNavBar.js +10 -7
  3. package/dist/src/mobile/components/BasicChatListItem/BasicChatListItem.js +15 -7
  4. package/package.json +1 -1
  5. package/release-note.md +3 -6
package/dist/src/desktop/components/BasicChatListItem/BasicChatListItem.js CHANGED
@@ -47,11 +47,14 @@ var backgroundColorTheme = {
47
47
  subscriber_transparent: 'ui_cpnt_list_base_area_transparent'
48
48
  };
49
49
  function BasicChatListItem(_a) {
50
- var titleText = _a.titleText, contentText = _a.contentText, _b = _a.leftImageMode, leftImageMode = _b === void 0 ? 'none' : _b, imageSrc = _a.imageSrc, _c = _a.hoverMode, hoverMode = _c === void 0 ? 'use' : _c, contextMenuOptionArray = _a.contextMenuOptionArray, onClickContextMenuItem = _a.onClickContextMenuItem, _d = _a.contextMenuState, contextMenuState = _d === void 0 ? 'normal' : _d, _e = _a.colorTheme, colorTheme = _e === void 0 ? 'subscriber' : _e;
51
- var _f = (0, react_1.useState)(false), isContextMenuOpen = _f[0], setIsContextMenuOpen = _f[1];
50
+ var _b;
51
+ var titleText = _a.titleText, contentText = _a.contentText, _c = _a.leftImageMode, leftImageMode = _c === void 0 ? 'none' : _c, imageSrc = _a.imageSrc, _d = _a.hoverMode, hoverMode = _d === void 0 ? 'use' : _d, contextMenuOptionArray = _a.contextMenuOptionArray, onClickContextMenuItem = _a.onClickContextMenuItem, _e = _a.contextMenuState, contextMenuState = _e === void 0 ? 'normal' : _e, _f = _a.colorTheme, colorTheme = _f === void 0 ? 'subscriber' : _f;
52
+ var _g = (0, react_1.useState)(false), isContextMenuOpen = _g[0], setIsContextMenuOpen = _g[1];
52
53
  var contextMenuRef = (0, react_1.useRef)(null);
54
+ var contentRef = (0, react_1.useRef)(null);
55
+ var contentRect = (_b = contentRef.current) === null || _b === void 0 ? void 0 : _b.getBoundingClientRect();
53
56
  var chatBody = document.querySelector('#chatMessageBox');
54
- var rect = chatBody === null || chatBody === void 0 ? void 0 : chatBody.getBoundingClientRect();
57
+ var chatBodyRect = chatBody === null || chatBody === void 0 ? void 0 : chatBody.getBoundingClientRect();
55
58
  /**
56
59
  * @when contextMenu가 열려 있을 때
57
60
  * @expected ChatList body의 스크롤을 숨기고, contextMenu의 외부를 클릭하면 contextMenu가 닫히도록 합니다.
@@ -78,13 +81,14 @@ function BasicChatListItem(_a) {
78
81
  react_1.default.createElement(S_BasicChatListItem, { colorTheme: colorTheme },
79
82
  leftImageMode === 'use' && (react_1.default.createElement(S_ImageViewWrapper, null,
80
83
  react_1.default.createElement(hybrid_1.ImageView, { shapeType: "circular", ratio: "1_1", scaleType: "cover", src: imageSrc, width: "responsive" }))),
81
- react_1.default.createElement(TextLabel_1.TextLabel, { text: titleText, styleTheme: "caption1Bold", colorTheme: titleTextColors[colorTheme] }),
82
- react_1.default.createElement(S_ContentTextWrapper, null,
84
+ react_1.default.createElement(S_TitleTextWrapper, { targetWidth: contentRect === null || contentRect === void 0 ? void 0 : contentRect.width },
85
+ react_1.default.createElement(TextLabel_1.TextLabel, { text: titleText, styleTheme: "caption1Bold", wordBreak: "break_word", colorTheme: titleTextColors[colorTheme] })),
86
+ react_1.default.createElement(S_ContentTextWrapper, { ref: contentRef },
83
87
  react_1.default.createElement(TextLabel_1.TextLabel, { text: contentText, styleTheme: "caption1Regular", colorTheme: colorTheme === 'subscriber_transparent' ? 'sysTextWhite' : 'sysTextPrimary', wordBreak: "break_all" })),
84
88
  hoverMode === 'use' && (react_1.default.createElement(S_SeeMoreButton, { isContextMenuOpen: isContextMenuOpen, hoverMode: hoverMode, ref: contextMenuRef },
85
89
  react_1.default.createElement(IconButton_1.IconButton, { fillType: "fill", baseSize: "xsmall", iconFillType: "fill", iconSize: 20, iconName: "ic_more", baseColorKey: "ui_cpnt_button_fill_base_transparent", iconColorKey: "ui_cpnt_button_icon_enabled", onClick: handleMoreButtonClick }))),
86
90
  react_1.default.createElement(Popup_1.PopupProvider, null,
87
- react_1.default.createElement(Popup_1.Popup, { targetRef: contextMenuRef, isOpen: isContextMenuOpen, placement: "v-auto", wrapperHeight: rect === null || rect === void 0 ? void 0 : rect.height, onClickOutside: function () { return setIsContextMenuOpen(false); } },
91
+ react_1.default.createElement(Popup_1.Popup, { targetRef: contextMenuRef, isOpen: isContextMenuOpen, placement: "v-auto", wrapperHeight: chatBodyRect === null || chatBodyRect === void 0 ? void 0 : chatBodyRect.height, onClickOutside: function () { return setIsContextMenuOpen(false); } },
88
92
  react_1.default.createElement(ContextMenu_1.ContextMenu, null, contextMenuOptionArray === null || contextMenuOptionArray === void 0 ? void 0 : contextMenuOptionArray.map(function (el) { return (react_1.default.createElement(ContextMenuItem_1.ContextMenuItem, { key: el.value, option: el, onClick: handleContextMenuItemClick, state: contextMenuState })); })))))));
89
93
  }
90
94
  var S_BasicChatListItem = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n background-color: ", ";\n display: flex;\n height: fit-content;\n max-width: 100%;\n min-height: 24px;\n padding-bottom: ", ";\n padding-left: ", ";\n padding-right: ", ";\n padding-top: ", ";\n"], ["\n background-color: ", ";\n display: flex;\n height: fit-content;\n max-width: 100%;\n min-height: 24px;\n padding-bottom: ", ";\n padding-left: ", ";\n padding-right: ", ";\n padding-top: ", ";\n"])), function (_a) {
@@ -121,5 +125,9 @@ var S_SeeMoreButton = styled_components_1.default.div(templateObject_4 || (templ
121
125
  var hoverMode = _a.hoverMode;
122
126
  return hoverMode === 'use' && '1';
123
127
  });
128
+ var S_TitleTextWrapper = styled_components_1.default.div(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n max-width: ", ";\n"], ["\n max-width: ", ";\n"])), function (_a) {
129
+ var targetWidth = _a.targetWidth;
130
+ return targetWidth && targetWidth / 3 + "px";
131
+ });
124
132
  exports.default = BasicChatListItem;
125
- var templateObject_1, templateObject_2, templateObject_3, templateObject_4;
133
+ var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5;
package/dist/src/desktop/components/UserDesktopNavBar/UserDesktopNavBar.js CHANGED
@@ -72,7 +72,7 @@ function UserDesktopNavBar(_a) {
72
72
  };
73
73
  return (react_1.default.createElement(S_UserDesktopNavBar, null,
74
74
  react_1.default.createElement(S_NavBar, null,
75
- logoImageSrc ? (react_1.default.createElement(S_Logo, { src: logoImageSrc, onClick: handleClickLogo })) : (react_1.default.createElement(S_TextWrapper, { onClick: handleClickLogo },
75
+ logoImageSrc ? (react_1.default.createElement(S_Logo, { src: logoImageSrc, onClick: handleClickLogo, cursor: onClickLogo ? 'pointer' : 'default' })) : (react_1.default.createElement(S_TextWrapper, { onClick: handleClickLogo, cursor: onClickLogo ? 'pointer' : 'default' },
76
76
  react_1.default.createElement(TextLabel_1.TextLabel, { text: titleText, singleLineMode: "use", styleTheme: "headingBold", colorTheme: "sysTextPrimary", ellipsisMode: "use", lineLimit: 1 }))),
77
77
  menuMode === 'center_text' && (react_1.default.createElement(S_pApps, null,
78
78
  visibleTexts.map(function (option) { return (react_1.default.createElement(S_VisiblePAppWrapper, { key: option.value, onClick: function () { return handleClick(option); } }, currentPathName.includes(option.value) ? (react_1.default.createElement(TextLabel_1.TextLabel, { text: option.text, styleTheme: "body1Bold", colorTheme: "sysTextPrimary", singleLineMode: "use" })) : (react_1.default.createElement(TextLabel_1.TextLabel, { text: option.text, styleTheme: "body1Regular", colorTheme: "sysTextSecondary", singleLineMode: "use" })))); }),
@@ -81,7 +81,7 @@ function UserDesktopNavBar(_a) {
81
81
  react_1.default.createElement(IconButton_1.IconButton, { fillType: "fill", baseSize: "medium", baseColorKey: "ui_cpnt_button_fill_base_transparent", iconSize: 24, iconName: "ic_more", iconColorKey: "ui_cpnt_button_icon_default", shapeType: "rectangle", iconFillType: "fill" })),
82
82
  react_1.default.createElement(S_ContextMenuWrapper, null, isContextMenuOpen && (react_1.default.createElement(ContextMenu_1.ContextMenu, null, hiddenTexts.map(function (option) { return (react_1.default.createElement(ContextMenuItem_1.ContextMenuItem, { key: option.value, size: "medium", option: option, onClick: handleClick })); })))))))),
83
83
  react_1.default.createElement(S_ProfileWrapper, null,
84
- loginInfoMode === 'profile' && (react_1.default.createElement(S_ImageViewWrapper, { onClick: handleClickLoginInfo },
84
+ loginInfoMode === 'profile' && (react_1.default.createElement(S_ImageViewWrapper, { onClick: handleClickLoginInfo, cursor: onClickLoginInfo ? 'pointer' : 'default' },
85
85
  react_1.default.createElement(hybrid_1.ImageView, { src: userImageSrc, shapeType: "circular", width: 32, ratio: "1_1", scaleType: "cover", borderMode: "use" }))),
86
86
  loginInfoMode === 'button' && (react_1.default.createElement(MainButton_1.MainButton, { size: "small", styleTheme: "secondary", text: mBtnText, onClick: handleClickLoginInfo })))),
87
87
  dividerType === 'solid' && react_1.default.createElement(hybrid_1.Divider, null)));
@@ -93,10 +93,13 @@ var S_UserDesktopNavBar = styled_components_1.default.div(templateObject_1 || (t
93
93
  var S_MorePApps = styled_components_1.default.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n position: relative;\n"], ["\n position: relative;\n"])));
94
94
  var S_ProfileWrapper = styled_components_1.default.div(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n align-items: center;\n display: flex;\n height: 48px;\n justify-content: flex-end;\n margin-left: 24px;\n width: 200px;\n"], ["\n align-items: center;\n display: flex;\n height: 48px;\n justify-content: flex-end;\n margin-left: 24px;\n width: 200px;\n"])));
95
95
  var S_TextWrapper = styled_components_1.default.div(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n cursor: ", ";\n margin-right: 24px;\n width: 200px;\n & > div {\n word-break: break-all;\n }\n"], ["\n cursor: ", ";\n margin-right: 24px;\n width: 200px;\n & > div {\n word-break: break-all;\n }\n"])), function (_a) {
96
- var onClick = _a.onClick;
97
- return (onClick ? 'pointer' : 'default');
96
+ var cursor = _a.cursor;
97
+ return cursor;
98
98
  });
99
- var S_Logo = styled_components_1.default.img(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n height: 48px;\n margin-right: ", ";\n object-fit: contain;\n object-position: left;\n width: 180px;\n"], ["\n height: 48px;\n margin-right: ", ";\n object-fit: contain;\n object-position: left;\n width: 180px;\n"])), function (_a) {
99
+ var S_Logo = styled_components_1.default.img(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n cursor: ", ";\n height: 48px;\n margin-right: ", ";\n object-fit: contain;\n object-position: left;\n width: 180px;\n"], ["\n cursor: ", ";\n height: 48px;\n margin-right: ", ";\n object-fit: contain;\n object-position: left;\n width: 180px;\n"])), function (_a) {
100
+ var cursor = _a.cursor;
101
+ return cursor;
102
+ }, function (_a) {
100
103
  var theme = _a.theme;
101
104
  return theme.spacing.spacingE;
102
105
  });
@@ -109,8 +112,8 @@ var S_VisiblePAppWrapper = styled_components_1.default.div(templateObject_10 ||
109
112
  return theme.spacing.spacingE;
110
113
  });
111
114
  var S_ImageViewWrapper = styled_components_1.default.div(templateObject_11 || (templateObject_11 = __makeTemplateObject(["\n border-radius: 50%;\n cursor: ", ";\n height: 32px;\n"], ["\n border-radius: 50%;\n cursor: ", ";\n height: 32px;\n"])), function (_a) {
112
- var onClick = _a.onClick;
113
- return (onClick ? 'pointer' : 'default');
115
+ var cursor = _a.cursor;
116
+ return cursor;
114
117
  });
115
118
  exports.default = UserDesktopNavBar;
116
119
  var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6, templateObject_7, templateObject_8, templateObject_9, templateObject_10, templateObject_11;
package/dist/src/mobile/components/BasicChatListItem/BasicChatListItem.js CHANGED
@@ -47,11 +47,14 @@ var backgroundColorTheme = {
47
47
  subscriber_transparent: 'ui_cpnt_list_base_area_transparent'
48
48
  };
49
49
  function BasicChatListItem(_a) {
50
- var titleText = _a.titleText, contentText = _a.contentText, _b = _a.leftImageMode, leftImageMode = _b === void 0 ? 'none' : _b, imageSrc = _a.imageSrc, _c = _a.hoverMode, hoverMode = _c === void 0 ? 'use' : _c, contextMenuOptionArray = _a.contextMenuOptionArray, onClickContextMenuItem = _a.onClickContextMenuItem, _d = _a.contextMenuState, contextMenuState = _d === void 0 ? 'normal' : _d, _e = _a.colorTheme, colorTheme = _e === void 0 ? 'subscriber' : _e;
51
- var _f = (0, react_1.useState)(false), isContextMenuOpen = _f[0], setIsContextMenuOpen = _f[1];
50
+ var _b;
51
+ var titleText = _a.titleText, contentText = _a.contentText, _c = _a.leftImageMode, leftImageMode = _c === void 0 ? 'none' : _c, imageSrc = _a.imageSrc, _d = _a.hoverMode, hoverMode = _d === void 0 ? 'use' : _d, contextMenuOptionArray = _a.contextMenuOptionArray, onClickContextMenuItem = _a.onClickContextMenuItem, _e = _a.contextMenuState, contextMenuState = _e === void 0 ? 'normal' : _e, _f = _a.colorTheme, colorTheme = _f === void 0 ? 'subscriber' : _f;
52
+ var _g = (0, react_1.useState)(false), isContextMenuOpen = _g[0], setIsContextMenuOpen = _g[1];
52
53
  var contextMenuRef = (0, react_1.useRef)(null);
54
+ var contentRef = (0, react_1.useRef)(null);
55
+ var contentRect = (_b = contentRef.current) === null || _b === void 0 ? void 0 : _b.getBoundingClientRect();
53
56
  var chatBody = document.querySelector('#chatMessageBox');
54
- var rect = chatBody === null || chatBody === void 0 ? void 0 : chatBody.getBoundingClientRect();
57
+ var chatBodyRect = chatBody === null || chatBody === void 0 ? void 0 : chatBody.getBoundingClientRect();
55
58
  /**
56
59
  * @when contextMenu가 열려 있을 때
57
60
  * @expected ChatList body의 스크롤을 숨기고, contextMenu의 외부를 클릭하면 contextMenu가 닫히도록 합니다.
@@ -78,13 +81,14 @@ function BasicChatListItem(_a) {
78
81
  react_1.default.createElement(S_BasicChatListItem, { colorTheme: colorTheme },
79
82
  leftImageMode === 'use' && (react_1.default.createElement(S_ImageViewWrapper, null,
80
83
  react_1.default.createElement(hybrid_1.ImageView, { shapeType: "circular", ratio: "1_1", scaleType: "cover", src: imageSrc, width: "responsive" }))),
81
- react_1.default.createElement(TextLabel_1.TextLabel, { text: titleText, styleTheme: "caption1Bold", colorTheme: titleTextColors[colorTheme] }),
82
- react_1.default.createElement(S_ContentTextWrapper, null,
84
+ react_1.default.createElement(S_TitleTextWrapper, { targetWidth: contentRect === null || contentRect === void 0 ? void 0 : contentRect.width },
85
+ react_1.default.createElement(TextLabel_1.TextLabel, { text: titleText, styleTheme: "caption1Bold", wordBreak: "break_word", colorTheme: titleTextColors[colorTheme] })),
86
+ react_1.default.createElement(S_ContentTextWrapper, { ref: contentRef },
83
87
  react_1.default.createElement(TextLabel_1.TextLabel, { text: contentText, styleTheme: "caption1Regular", colorTheme: colorTheme === 'subscriber_transparent' ? 'sysTextWhite' : 'sysTextPrimary', wordBreak: "break_all" })),
84
88
  hoverMode === 'use' && (react_1.default.createElement(S_SeeMoreButton, { isContextMenuOpen: isContextMenuOpen, hoverMode: hoverMode, ref: contextMenuRef },
85
89
  react_1.default.createElement(IconButton_1.IconButton, { fillType: "fill", baseSize: "xsmall", iconFillType: "fill", iconSize: 20, iconName: "ic_more", baseColorKey: "ui_cpnt_button_fill_base_transparent", iconColorKey: "ui_cpnt_button_icon_enabled", onClick: handleMoreButtonClick }))),
86
90
  react_1.default.createElement(Popup_1.PopupProvider, null,
87
- react_1.default.createElement(Popup_1.Popup, { targetRef: contextMenuRef, isOpen: isContextMenuOpen, placement: "v-auto", wrapperHeight: rect === null || rect === void 0 ? void 0 : rect.height, onClickOutside: function () { return setIsContextMenuOpen(false); } },
91
+ react_1.default.createElement(Popup_1.Popup, { targetRef: contextMenuRef, isOpen: isContextMenuOpen, placement: "v-auto", wrapperHeight: chatBodyRect === null || chatBodyRect === void 0 ? void 0 : chatBodyRect.height, onClickOutside: function () { return setIsContextMenuOpen(false); } },
88
92
  react_1.default.createElement(ContextMenu_1.ContextMenu, null, contextMenuOptionArray === null || contextMenuOptionArray === void 0 ? void 0 : contextMenuOptionArray.map(function (el) { return (react_1.default.createElement(ContextMenuItem_1.ContextMenuItem, { key: el.value, option: el, onClick: handleContextMenuItemClick, state: contextMenuState })); })))))));
89
93
  }
90
94
  var S_BasicChatListItem = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n background-color: ", ";\n display: flex;\n height: fit-content;\n max-width: 100%;\n min-height: 24px;\n padding-bottom: ", ";\n padding-left: ", ";\n padding-right: ", ";\n padding-top: ", ";\n"], ["\n background-color: ", ";\n display: flex;\n height: fit-content;\n max-width: 100%;\n min-height: 24px;\n padding-bottom: ", ";\n padding-left: ", ";\n padding-right: ", ";\n padding-top: ", ";\n"])), function (_a) {
@@ -121,5 +125,9 @@ var S_SeeMoreButton = styled_components_1.default.div(templateObject_4 || (templ
121
125
  var hoverMode = _a.hoverMode;
122
126
  return hoverMode === 'use' && '1';
123
127
  });
128
+ var S_TitleTextWrapper = styled_components_1.default.div(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n max-width: ", ";\n"], ["\n max-width: ", ";\n"])), function (_a) {
129
+ var targetWidth = _a.targetWidth;
130
+ return targetWidth && targetWidth / 3 + "px";
131
+ });
124
132
  exports.default = BasicChatListItem;
125
- var templateObject_1, templateObject_2, templateObject_3, templateObject_4;
133
+ var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5;
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "pds-dev-kit-web",
3
- "version": "1.6.11",
3
+ "version": "1.6.13",
4
4
  "license": "MIT",
5
5
  "private": false,
6
6
  "main": "dist/index.js",
package/release-note.md CHANGED
@@ -1,8 +1,5 @@
1
1
  # PDS-DEV-KIT-WEB Release Notes
2
- ## [v1.6.11]
2
+ ## [v1.6.13]
3
3
  ### Component
4
- * LottieReactionButton
5
- * 내부에서 text와 actionText 관리 방법 변경
6
- * 기본 배경 색상의 컬러키 변경
7
- ### Color
8
- * 컬러 키 값 22.12.02 15시 00분 기준 싱크
4
+ * BasicChatListItem
5
+ * titleText와 contentText의 최대 크기를 지정