pds-dev-kit-web 1.6.13 → 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 +11 -10
  2. package/dist/src/mobile/components/BasicChatListItem/BasicChatListItem.js +11 -10
  3. package/package.json +1 -1
  4. package/release-note.md +2 -2
package/dist/src/desktop/components/BasicChatListItem/BasicChatListItem.js CHANGED
@@ -47,12 +47,10 @@ var backgroundColorTheme = {
47
47
  subscriber_transparent: 'ui_cpnt_list_base_area_transparent'
48
48
  };
49
49
  function BasicChatListItem(_a) {
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];
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];
53
52
  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
+ var _g = (0, react_1.useState)(0), contentWidth = _g[0], setContentWidth = _g[1];
56
54
  var chatBody = document.querySelector('#chatMessageBox');
57
55
  var chatBodyRect = chatBody === null || chatBody === void 0 ? void 0 : chatBody.getBoundingClientRect();
58
56
  /**
@@ -77,13 +75,16 @@ function BasicChatListItem(_a) {
77
75
  }
78
76
  setIsContextMenuOpen(false);
79
77
  };
78
+ function getContentTextWidth(ref) {
79
+ setContentWidth(ref.getBoundingClientRect().width);
80
+ }
80
81
  return (react_1.default.createElement(react_1.default.Fragment, null,
81
82
  react_1.default.createElement(S_BasicChatListItem, { colorTheme: colorTheme },
82
83
  leftImageMode === 'use' && (react_1.default.createElement(S_ImageViewWrapper, null,
83
84
  react_1.default.createElement(hybrid_1.ImageView, { shapeType: "circular", ratio: "1_1", scaleType: "cover", src: imageSrc, width: "responsive" }))),
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 },
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); } },
87
88
  react_1.default.createElement(TextLabel_1.TextLabel, { text: contentText, styleTheme: "caption1Regular", colorTheme: colorTheme === 'subscriber_transparent' ? 'sysTextWhite' : 'sysTextPrimary', wordBreak: "break_all" })),
88
89
  hoverMode === 'use' && (react_1.default.createElement(S_SeeMoreButton, { isContextMenuOpen: isContextMenuOpen, hoverMode: hoverMode, ref: contextMenuRef },
89
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 }))),
@@ -111,7 +112,7 @@ var S_ImageViewWrapper = styled_components_1.default.div(templateObject_2 || (te
111
112
  var theme = _a.theme;
112
113
  return theme.spacing.spacingB;
113
114
  });
114
- 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) {
115
116
  var theme = _a.theme;
116
117
  return theme.spacing.spacingC;
117
118
  });
@@ -125,7 +126,7 @@ var S_SeeMoreButton = styled_components_1.default.div(templateObject_4 || (templ
125
126
  var hoverMode = _a.hoverMode;
126
127
  return hoverMode === 'use' && '1';
127
128
  });
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 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) {
129
130
  var targetWidth = _a.targetWidth;
130
131
  return targetWidth && targetWidth / 3 + "px";
131
132
  });
package/dist/src/mobile/components/BasicChatListItem/BasicChatListItem.js CHANGED
@@ -47,12 +47,10 @@ var backgroundColorTheme = {
47
47
  subscriber_transparent: 'ui_cpnt_list_base_area_transparent'
48
48
  };
49
49
  function BasicChatListItem(_a) {
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];
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];
53
52
  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
+ var _g = (0, react_1.useState)(0), contentWidth = _g[0], setContentWidth = _g[1];
56
54
  var chatBody = document.querySelector('#chatMessageBox');
57
55
  var chatBodyRect = chatBody === null || chatBody === void 0 ? void 0 : chatBody.getBoundingClientRect();
58
56
  /**
@@ -77,13 +75,16 @@ function BasicChatListItem(_a) {
77
75
  }
78
76
  setIsContextMenuOpen(false);
79
77
  };
78
+ function getContentTextWidth(ref) {
79
+ setContentWidth(ref.getBoundingClientRect().width);
80
+ }
80
81
  return (react_1.default.createElement(react_1.default.Fragment, null,
81
82
  react_1.default.createElement(S_BasicChatListItem, { colorTheme: colorTheme },
82
83
  leftImageMode === 'use' && (react_1.default.createElement(S_ImageViewWrapper, null,
83
84
  react_1.default.createElement(hybrid_1.ImageView, { shapeType: "circular", ratio: "1_1", scaleType: "cover", src: imageSrc, width: "responsive" }))),
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 },
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); } },
87
88
  react_1.default.createElement(TextLabel_1.TextLabel, { text: contentText, styleTheme: "caption1Regular", colorTheme: colorTheme === 'subscriber_transparent' ? 'sysTextWhite' : 'sysTextPrimary', wordBreak: "break_all" })),
88
89
  hoverMode === 'use' && (react_1.default.createElement(S_SeeMoreButton, { isContextMenuOpen: isContextMenuOpen, hoverMode: hoverMode, ref: contextMenuRef },
89
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 }))),
@@ -111,7 +112,7 @@ var S_ImageViewWrapper = styled_components_1.default.div(templateObject_2 || (te
111
112
  var theme = _a.theme;
112
113
  return theme.spacing.spacingB;
113
114
  });
114
- 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) {
115
116
  var theme = _a.theme;
116
117
  return theme.spacing.spacingC;
117
118
  });
@@ -125,7 +126,7 @@ var S_SeeMoreButton = styled_components_1.default.div(templateObject_4 || (templ
125
126
  var hoverMode = _a.hoverMode;
126
127
  return hoverMode === 'use' && '1';
127
128
  });
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 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) {
129
130
  var targetWidth = _a.targetWidth;
130
131
  return targetWidth && targetWidth / 3 + "px";
131
132
  });
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "pds-dev-kit-web",
3
- "version": "1.6.13",
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.13]
2
+ ## [v1.6.14]
3
3
  ### Component
4
4
  * BasicChatListItem
5
- * titleText와 contentText의 최대 크기를 지정
5
+ * BasicChatListItem 비율 조절 및 수정