pds-dev-kit-web 1.6.12 → 1.6.14

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 -6
  2. package/dist/src/mobile/components/BasicChatListItem/BasicChatListItem.js +15 -6
  3. package/package.json +1 -1
  4. package/release-note.md +3 -3
package/dist/src/desktop/components/BasicChatListItem/BasicChatListItem.js CHANGED
@@ -50,8 +50,9 @@ function BasicChatListItem(_a) {
50
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
51
  var _f = (0, react_1.useState)(false), isContextMenuOpen = _f[0], setIsContextMenuOpen = _f[1];
52
52
  var contextMenuRef = (0, react_1.useRef)(null);
53
+ var _g = (0, react_1.useState)(0), contentWidth = _g[0], setContentWidth = _g[1];
53
54
  var chatBody = document.querySelector('#chatMessageBox');
54
- var rect = chatBody === null || chatBody === void 0 ? void 0 : chatBody.getBoundingClientRect();
55
+ var chatBodyRect = chatBody === null || chatBody === void 0 ? void 0 : chatBody.getBoundingClientRect();
55
56
  /**
56
57
  * @when contextMenu가 열려 있을 때
57
58
  * @expected ChatList body의 스크롤을 숨기고, contextMenu의 외부를 클릭하면 contextMenu가 닫히도록 합니다.
@@ -74,17 +75,21 @@ function BasicChatListItem(_a) {
74
75
  }
75
76
  setIsContextMenuOpen(false);
76
77
  };
78
+ function getContentTextWidth(ref) {
79
+ setContentWidth(ref.getBoundingClientRect().width);
80
+ }
77
81
  return (react_1.default.createElement(react_1.default.Fragment, null,
78
82
  react_1.default.createElement(S_BasicChatListItem, { colorTheme: colorTheme },
79
83
  leftImageMode === 'use' && (react_1.default.createElement(S_ImageViewWrapper, null,
80
84
  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,
85
+ react_1.default.createElement(S_TitleTextWrapper, { targetWidth: contentWidth },
86
+ react_1.default.createElement(TextLabel_1.TextLabel, { text: titleText, styleTheme: "caption1Bold", wordBreak: "break_all", colorTheme: titleTextColors[colorTheme] })),
87
+ react_1.default.createElement(S_ContentTextWrapper, { ref: function (ref) { return ref && getContentTextWidth(ref); } },
83
88
  react_1.default.createElement(TextLabel_1.TextLabel, { text: contentText, styleTheme: "caption1Regular", colorTheme: colorTheme === 'subscriber_transparent' ? 'sysTextWhite' : 'sysTextPrimary', wordBreak: "break_all" })),
84
89
  hoverMode === 'use' && (react_1.default.createElement(S_SeeMoreButton, { isContextMenuOpen: isContextMenuOpen, hoverMode: hoverMode, ref: contextMenuRef },
85
90
  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
91
  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); } },
92
+ 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
93
  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
94
  }
90
95
  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) {
@@ -107,7 +112,7 @@ var S_ImageViewWrapper = styled_components_1.default.div(templateObject_2 || (te
107
112
  var theme = _a.theme;
108
113
  return theme.spacing.spacingB;
109
114
  });
110
- var S_ContentTextWrapper = styled_components_1.default.div(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n flex: 1;\n margin-left: ", ";\n"], ["\n flex: 1;\n margin-left: ", ";\n"])), function (_a) {
115
+ var S_ContentTextWrapper = styled_components_1.default.div(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n flex: 3;\n margin-left: ", ";\n"], ["\n flex: 3;\n margin-left: ", ";\n"])), function (_a) {
111
116
  var theme = _a.theme;
112
117
  return theme.spacing.spacingC;
113
118
  });
@@ -121,5 +126,9 @@ var S_SeeMoreButton = styled_components_1.default.div(templateObject_4 || (templ
121
126
  var hoverMode = _a.hoverMode;
122
127
  return hoverMode === 'use' && '1';
123
128
  });
129
+ var S_TitleTextWrapper = styled_components_1.default.div(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n flex: 1;\n max-width: ", ";\n"], ["\n flex: 1;\n max-width: ", ";\n"])), function (_a) {
130
+ var targetWidth = _a.targetWidth;
131
+ return targetWidth && targetWidth / 3 + "px";
132
+ });
124
133
  exports.default = BasicChatListItem;
125
- var templateObject_1, templateObject_2, templateObject_3, templateObject_4;
134
+ var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5;
package/dist/src/mobile/components/BasicChatListItem/BasicChatListItem.js CHANGED
@@ -50,8 +50,9 @@ function BasicChatListItem(_a) {
50
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
51
  var _f = (0, react_1.useState)(false), isContextMenuOpen = _f[0], setIsContextMenuOpen = _f[1];
52
52
  var contextMenuRef = (0, react_1.useRef)(null);
53
+ var _g = (0, react_1.useState)(0), contentWidth = _g[0], setContentWidth = _g[1];
53
54
  var chatBody = document.querySelector('#chatMessageBox');
54
- var rect = chatBody === null || chatBody === void 0 ? void 0 : chatBody.getBoundingClientRect();
55
+ var chatBodyRect = chatBody === null || chatBody === void 0 ? void 0 : chatBody.getBoundingClientRect();
55
56
  /**
56
57
  * @when contextMenu가 열려 있을 때
57
58
  * @expected ChatList body의 스크롤을 숨기고, contextMenu의 외부를 클릭하면 contextMenu가 닫히도록 합니다.
@@ -74,17 +75,21 @@ function BasicChatListItem(_a) {
74
75
  }
75
76
  setIsContextMenuOpen(false);
76
77
  };
78
+ function getContentTextWidth(ref) {
79
+ setContentWidth(ref.getBoundingClientRect().width);
80
+ }
77
81
  return (react_1.default.createElement(react_1.default.Fragment, null,
78
82
  react_1.default.createElement(S_BasicChatListItem, { colorTheme: colorTheme },
79
83
  leftImageMode === 'use' && (react_1.default.createElement(S_ImageViewWrapper, null,
80
84
  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,
85
+ react_1.default.createElement(S_TitleTextWrapper, { targetWidth: contentWidth },
86
+ react_1.default.createElement(TextLabel_1.TextLabel, { text: titleText, styleTheme: "caption1Bold", wordBreak: "break_all", colorTheme: titleTextColors[colorTheme] })),
87
+ react_1.default.createElement(S_ContentTextWrapper, { ref: function (ref) { return ref && getContentTextWidth(ref); } },
83
88
  react_1.default.createElement(TextLabel_1.TextLabel, { text: contentText, styleTheme: "caption1Regular", colorTheme: colorTheme === 'subscriber_transparent' ? 'sysTextWhite' : 'sysTextPrimary', wordBreak: "break_all" })),
84
89
  hoverMode === 'use' && (react_1.default.createElement(S_SeeMoreButton, { isContextMenuOpen: isContextMenuOpen, hoverMode: hoverMode, ref: contextMenuRef },
85
90
  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
91
  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); } },
92
+ 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
93
  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
94
  }
90
95
  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) {
@@ -107,7 +112,7 @@ var S_ImageViewWrapper = styled_components_1.default.div(templateObject_2 || (te
107
112
  var theme = _a.theme;
108
113
  return theme.spacing.spacingB;
109
114
  });
110
- var S_ContentTextWrapper = styled_components_1.default.div(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n flex: 1;\n margin-left: ", ";\n"], ["\n flex: 1;\n margin-left: ", ";\n"])), function (_a) {
115
+ var S_ContentTextWrapper = styled_components_1.default.div(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n flex: 3;\n margin-left: ", ";\n"], ["\n flex: 3;\n margin-left: ", ";\n"])), function (_a) {
111
116
  var theme = _a.theme;
112
117
  return theme.spacing.spacingC;
113
118
  });
@@ -121,5 +126,9 @@ var S_SeeMoreButton = styled_components_1.default.div(templateObject_4 || (templ
121
126
  var hoverMode = _a.hoverMode;
122
127
  return hoverMode === 'use' && '1';
123
128
  });
129
+ var S_TitleTextWrapper = styled_components_1.default.div(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n flex: 1;\n max-width: ", ";\n"], ["\n flex: 1;\n max-width: ", ";\n"])), function (_a) {
130
+ var targetWidth = _a.targetWidth;
131
+ return targetWidth && targetWidth / 3 + "px";
132
+ });
124
133
  exports.default = BasicChatListItem;
125
- var templateObject_1, templateObject_2, templateObject_3, templateObject_4;
134
+ 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.14",
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.14]
3
3
  ### Component
4
- * UserDesktopNavBar
5
- * onClickLogo 값이 있을 때 cursor가 pointer로 보이도록 변경
4
+ * BasicChatListItem
5
+ * BasicChatListItem 비율 조절 및 수정