pds-dev-kit-web 1.6.12 → 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 (4) hide show
  1. package/dist/src/desktop/components/BasicChatListItem/BasicChatListItem.js +15 -7
  2. package/dist/src/mobile/components/BasicChatListItem/BasicChatListItem.js +15 -7
  3. package/package.json +1 -1
  4. package/release-note.md +3 -3
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/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.12",
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,5 +1,5 @@
1
1
  # PDS-DEV-KIT-WEB Release Notes
2
- ## [v1.6.12]
2
+ ## [v1.6.13]
3
3
  ### Component
4
- * UserDesktopNavBar
5
- * onClickLogo 값이 있을 때 cursor가 pointer로 보이도록 변경
4
+ * BasicChatListItem
5
+ * titleText와 contentText의 최대 크기를 지정