pds-dev-kit-web 2.2.308 → 2.2.310

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 (19) hide show
  1. package/dist/src/desktop/components/ChatBubbleListItem/ChatBubbleListItem.d.ts +5 -3
  2. package/dist/src/desktop/components/ChatBubbleListItem/ChatBubbleListItem.js +15 -19
  3. package/dist/src/desktop/components/ChatBubbleListItem/components/ReactionRow.d.ts +2 -4
  4. package/dist/src/desktop/components/ChatBubbleListItem/components/ReactionRow.js +24 -44
  5. package/dist/src/mobile/components/ChatBubbleListItem/ChatBubbleListItem.d.ts +5 -3
  6. package/dist/src/mobile/components/ChatBubbleListItem/ChatBubbleListItem.js +15 -19
  7. package/dist/src/mobile/components/ChatBubbleListItem/components/ReactionRow.d.ts +2 -4
  8. package/dist/src/mobile/components/ChatBubbleListItem/components/ReactionRow.js +33 -46
  9. package/dist/src/sub/DynamicLayout/CompositionEditor/CompositionEditor.js +5 -7
  10. package/dist/src/sub/DynamicLayout/sections/CustomSection/CustomSection.js +5 -4
  11. package/package.json +1 -1
  12. package/release-note.md +2 -2
  13. package/.idea/codeStyles/Project.xml +0 -59
  14. package/.idea/codeStyles/codeStyleConfig.xml +0 -5
  15. package/.idea/inspectionProfiles/Project_Default.xml +0 -7
  16. package/.idea/modules.xml +0 -8
  17. package/.idea/pds-dev-kit.iml +0 -12
  18. package/.idea/prettier.xml +0 -7
  19. package/.idea/vcs.xml +0 -6
package/dist/src/desktop/components/ChatBubbleListItem/ChatBubbleListItem.d.ts CHANGED
@@ -6,7 +6,7 @@ type ReactionValueOption = {
6
6
  type: ReactionType;
7
7
  count: number;
8
8
  };
9
- type ReactionArrayType = ReactionValueOption[];
9
+ export type ReactionArrayType = ReactionValueOption[];
10
10
  export type ChatBubbleListItemProps = {
11
11
  titleText?: PDSTextType;
12
12
  imageSrc?: string;
@@ -21,12 +21,14 @@ export type ChatBubbleListItemProps = {
21
21
  children?: React.ReactNode;
22
22
  downloadIBtnMode?: 'use' | 'none';
23
23
  reactionBtnMode?: 'use' | 'none';
24
- reactionBtnText?: string;
25
24
  reactionArray?: ReactionArrayType;
26
25
  reactionBubblePosition?: 'top' | 'bottom';
26
+ translateIBtnMode?: 'use' | 'none';
27
+ translateState?: 'active' | 'deactive';
27
28
  onClickContextMenuItem?: (option: PDSValueOption) => void;
28
29
  onClickDownloadIBtn?: () => void;
29
30
  onClickReactionBtn?: (type: ReactionType) => void;
31
+ onClickTranslateIBtn?: () => void;
30
32
  };
31
- declare function ChatBubbleListItem({ titleText, imageSrc, hoverMode, styleTheme, colorTheme, timeMode, timeText, labelText, contextMenuOptionArray, contextMenuState, children, downloadIBtnMode, reactionBtnMode, reactionBtnText, reactionArray, reactionBubblePosition, onClickContextMenuItem, onClickDownloadIBtn, onClickReactionBtn }: ChatBubbleListItemProps): JSX.Element;
33
+ declare function ChatBubbleListItem({ titleText, imageSrc, hoverMode, styleTheme, colorTheme, timeMode, timeText, labelText, contextMenuOptionArray, contextMenuState, children, downloadIBtnMode, reactionBtnMode, reactionArray, reactionBubblePosition, translateIBtnMode, translateState, onClickContextMenuItem, onClickDownloadIBtn, onClickReactionBtn, onClickTranslateIBtn }: ChatBubbleListItemProps): JSX.Element;
32
34
  export default ChatBubbleListItem;
package/dist/src/desktop/components/ChatBubbleListItem/ChatBubbleListItem.js CHANGED
@@ -69,7 +69,7 @@ var profileImageBorderColorTheme = {
69
69
  transparent: 'ui_cpnt_list_chatbubble_base_transparent'
70
70
  };
71
71
  function ChatBubbleListItem(_a) {
72
- var titleText = _a.titleText, imageSrc = _a.imageSrc, _b = _a.hoverMode, hoverMode = _b === void 0 ? 'use' : _b, styleTheme = _a.styleTheme, _c = _a.colorTheme, colorTheme = _c === void 0 ? 'grey' : _c, _d = _a.timeMode, timeMode = _d === void 0 ? 'use' : _d, timeText = _a.timeText, labelText = _a.labelText, contextMenuOptionArray = _a.contextMenuOptionArray, _e = _a.contextMenuState, contextMenuState = _e === void 0 ? 'normal' : _e, children = _a.children, _f = _a.downloadIBtnMode, downloadIBtnMode = _f === void 0 ? 'none' : _f, _g = _a.reactionBtnMode, reactionBtnMode = _g === void 0 ? 'none' : _g, _h = _a.reactionBtnText, reactionBtnText = _h === void 0 ? '-' : _h, reactionArray = _a.reactionArray, _j = _a.reactionBubblePosition, reactionBubblePosition = _j === void 0 ? 'bottom' : _j, onClickContextMenuItem = _a.onClickContextMenuItem, onClickDownloadIBtn = _a.onClickDownloadIBtn, onClickReactionBtn = _a.onClickReactionBtn;
72
+ var titleText = _a.titleText, imageSrc = _a.imageSrc, _b = _a.hoverMode, hoverMode = _b === void 0 ? 'use' : _b, styleTheme = _a.styleTheme, _c = _a.colorTheme, colorTheme = _c === void 0 ? 'grey' : _c, _d = _a.timeMode, timeMode = _d === void 0 ? 'use' : _d, timeText = _a.timeText, labelText = _a.labelText, contextMenuOptionArray = _a.contextMenuOptionArray, _e = _a.contextMenuState, contextMenuState = _e === void 0 ? 'normal' : _e, children = _a.children, _f = _a.downloadIBtnMode, downloadIBtnMode = _f === void 0 ? 'none' : _f, _g = _a.reactionBtnMode, reactionBtnMode = _g === void 0 ? 'none' : _g, reactionArray = _a.reactionArray, _h = _a.reactionBubblePosition, reactionBubblePosition = _h === void 0 ? 'bottom' : _h, _j = _a.translateIBtnMode, translateIBtnMode = _j === void 0 ? 'none' : _j, translateState = _a.translateState, onClickContextMenuItem = _a.onClickContextMenuItem, onClickDownloadIBtn = _a.onClickDownloadIBtn, onClickReactionBtn = _a.onClickReactionBtn, onClickTranslateIBtn = _a.onClickTranslateIBtn;
73
73
  var _k = (0, react_1.useState)(false), isContextMenuOpen = _k[0], setIsContextMenuOpen = _k[1];
74
74
  var contextMenuRef = (0, react_1.useRef)(null);
75
75
  var chatBody = document.querySelector('#chatMessageBox');
@@ -136,7 +136,9 @@ function ChatBubbleListItem(_a) {
136
136
  }
137
137
  setIsContextMenuOpen(false);
138
138
  };
139
- return ((0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: (0, jsx_runtime_1.jsxs)(S_ChatBubbleListItem, __assign({ "x-pds-name": "ChatBubbleListItem", "x-pds-element-type": "component", "x-pds-device-type": "desktop", isMe: isMe }, { children: [hasLeftSpacing ? ((0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: isProfileImageShow ? ((0, jsx_runtime_1.jsx)(S_ImageViewWrapper, __assign({ isOtherAvatarImpact: styleTheme === 'other_avatar_impact', colorTheme: colorTheme }, { children: (0, jsx_runtime_1.jsx)(hybrid_1.ImageView, { shapeType: "circular", ratio: "1_1", scaleType: "cover", src: imageSrc, width: styleTheme === 'other_avatar_impact' ? 36 : 38 }) }))) : ((0, jsx_runtime_1.jsx)(hybrid_1.Spacing, { size: "spacing_g", spacingType: "width" })) })) : ((0, jsx_runtime_1.jsx)(hybrid_1.Spacing, { size: "spacing_a", spacingType: "width" })), (0, jsx_runtime_1.jsxs)(S_RightBox, { children: [isTitleTextShow && ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(TextLabel_1.TextLabel, { text: titleText, styleTheme: "caption1Bold", colorTheme: titleTextColorTheme }), (0, jsx_runtime_1.jsx)(hybrid_1.Spacing, { size: "spacing_b" })] })), (0, jsx_runtime_1.jsxs)(S_ChatBubbleBox, __assign({ isMe: isMe }, { children: [(0, jsx_runtime_1.jsxs)(S_ChatBubbleWrapper, __assign({ isMe: isMe }, { children: [(0, jsx_runtime_1.jsxs)(S_BubbleWrapper, { children: [isMe && ((0, jsx_runtime_1.jsxs)(S_Box, __assign({ hasBottomElement: !!labelText || !!timeMode }, { children: [(0, jsx_runtime_1.jsx)(S_DownloadIconWrapper, __assign({ isMe: isMe }, { children: downloadIBtnMode === 'use' && ((0, jsx_runtime_1.jsx)(IconButton_1.IconButton, { shapeType: "circular", iconFillType: "fill", baseColorKey: "ui_cpnt_list_chatbubble_download_button_base", iconColorKey: "ui_cpnt_button_icon_white", iconSize: 16, iconName: "ic_download", onClick: onClickDownloadIBtn })) })), (0, jsx_runtime_1.jsxs)(S_TimeWrapper, __assign({ isMe: isMe }, { children: [labelText && ((0, jsx_runtime_1.jsx)(TextLabel_1.TextLabel, { text: labelText, styleTheme: "caption2Bold", colorTheme: "sysTextTertiary" })), timeMode === 'use' && timeText && ((0, jsx_runtime_1.jsx)(TextLabel_1.TextLabel, { text: timeText, styleTheme: "caption2Regular", colorTheme: "sysTextTertiary", singleLineMode: "use" }))] }))] }))), (0, jsx_runtime_1.jsx)(ChatBubble_1.default, __assign({ colorTheme: colorTheme, tailType: chatBubbleTailType[styleTheme] }, { children: children })), !isMe && ((0, jsx_runtime_1.jsxs)(S_Box, __assign({ hasBottomElement: !!labelText || !!timeMode }, { children: [(0, jsx_runtime_1.jsx)(S_DownloadIconWrapper, __assign({ isMe: isMe }, { children: downloadIBtnMode === 'use' && ((0, jsx_runtime_1.jsx)(IconButton_1.IconButton, { shapeType: "circular", iconFillType: "fill", baseColorKey: "ui_cpnt_list_chatbubble_download_button_base", iconColorKey: "ui_cpnt_button_icon_white", iconSize: 16, iconName: "ic_download", onClick: onClickDownloadIBtn })) })), (0, jsx_runtime_1.jsxs)(S_TimeWrapper, __assign({ isMe: isMe }, { children: [labelText && ((0, jsx_runtime_1.jsx)(TextLabel_1.TextLabel, { text: labelText, styleTheme: "caption2Bold", colorTheme: "sysTextTertiary" })), timeMode === 'use' && timeText && ((0, jsx_runtime_1.jsx)(TextLabel_1.TextLabel, { text: timeText, styleTheme: "caption2Regular", colorTheme: "sysTextTertiary", singleLineMode: "use" }))] }))] })))] }), (0, jsx_runtime_1.jsx)(components_1.ReactionRow, { isMe: isMe, downloadIBtnMode: downloadIBtnMode, reactionBtnMode: reactionBtnMode, reactionArray: reactionArray, reactionBtnText: reactionBtnText, reactionBubblePosition: reactionBubblePosition, onClickReactionBtn: onClickReactionBtn })] })), hoverMode === 'use' && !isMe && ((0, jsx_runtime_1.jsx)(S_SeeMoreButton, __assign({ isContextMenuOpen: isContextMenuOpen, hoverMode: hoverMode, ref: contextMenuRef }, { children: (0, jsx_runtime_1.jsx)(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 }) })))] }))] }), (0, jsx_runtime_1.jsx)(Popup_1.PopupProvider, { children: (0, jsx_runtime_1.jsx)(Popup_1.Popup, __assign({ targetRef: contextMenuRef, isOpen: isContextMenuOpen, placement: "top-end", wrapperHeight: rect === null || rect === void 0 ? void 0 : rect.height, onClickOutside: function () { return setIsContextMenuOpen(false); } }, { children: (0, jsx_runtime_1.jsx)(ContextMenu_1.ContextMenu, { children: contextMenuOptionArray === null || contextMenuOptionArray === void 0 ? void 0 : contextMenuOptionArray.map(function (el) { return ((0, jsx_runtime_1.jsx)(ContextMenuItem_1.ContextMenuItem, { option: el, onClick: handleContextMenuItemClick, state: contextMenuState }, el.value)); }) }) })) })] })) }));
139
+ return ((0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: (0, jsx_runtime_1.jsxs)(S_ChatBubbleListItem, __assign({ "x-pds-name": "ChatBubbleListItem", "x-pds-element-type": "component", "x-pds-device-type": "desktop", isMe: isMe }, { children: [hasLeftSpacing ? ((0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: isProfileImageShow ? ((0, jsx_runtime_1.jsx)(S_ImageViewWrapper, __assign({ isOtherAvatarImpact: styleTheme === 'other_avatar_impact', colorTheme: colorTheme }, { children: (0, jsx_runtime_1.jsx)(hybrid_1.ImageView, { shapeType: "circular", ratio: "1_1", scaleType: "cover", src: imageSrc, width: styleTheme === 'other_avatar_impact' ? 36 : 38 }) }))) : ((0, jsx_runtime_1.jsx)(hybrid_1.Spacing, { size: "spacing_g", spacingType: "width" })) })) : ((0, jsx_runtime_1.jsx)(hybrid_1.Spacing, { size: "spacing_a", spacingType: "width" })), (0, jsx_runtime_1.jsxs)(S_RightBox, { children: [isTitleTextShow && ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(TextLabel_1.TextLabel, { text: titleText, styleTheme: "caption1Bold", colorTheme: titleTextColorTheme }), (0, jsx_runtime_1.jsx)(hybrid_1.Spacing, { size: "spacing_b" })] })), (0, jsx_runtime_1.jsxs)(S_ChatBubbleBox, __assign({ isMe: isMe }, { children: [(0, jsx_runtime_1.jsxs)(S_ChatBubbleWrapper, __assign({ isMe: isMe }, { children: [(0, jsx_runtime_1.jsxs)(S_BubbleWrapper, { children: [isMe && ((0, jsx_runtime_1.jsx)(S_Box, { children: (0, jsx_runtime_1.jsxs)(S_TimeWrapper, __assign({ isMe: isMe }, { children: [labelText && ((0, jsx_runtime_1.jsx)(TextLabel_1.TextLabel, { text: labelText, styleTheme: "caption2Regular", colorTheme: "sysTextTertiary" })), timeMode === 'use' && timeText && ((0, jsx_runtime_1.jsx)(TextLabel_1.TextLabel, { text: timeText, styleTheme: "caption2Regular", colorTheme: "sysTextTertiary", singleLineMode: "use" }))] })) })), (0, jsx_runtime_1.jsx)(ChatBubble_1.default, __assign({ colorTheme: colorTheme, tailType: chatBubbleTailType[styleTheme] }, { children: children })), !isMe && ((0, jsx_runtime_1.jsx)(S_Box, { children: (0, jsx_runtime_1.jsxs)(S_TimeWrapper, __assign({ isMe: isMe }, { children: [labelText && ((0, jsx_runtime_1.jsx)(TextLabel_1.TextLabel, { text: labelText, styleTheme: "caption2Regular", colorTheme: "sysTextTertiary" })), timeMode === 'use' && timeText && ((0, jsx_runtime_1.jsx)(TextLabel_1.TextLabel, { text: timeText, styleTheme: "caption2Regular", colorTheme: "sysTextTertiary", singleLineMode: "use" }))] })) }))] }), (0, jsx_runtime_1.jsxs)(S_BottomActionWrapper, { children: [!isMe && ((0, jsx_runtime_1.jsx)(components_1.ReactionRow, { isMe: false, isReactionButtonShow: reactionBtnMode === 'use', reactionArray: reactionArray, reactionBubblePosition: reactionBubblePosition, onClickReactionBtn: onClickReactionBtn })), translateIBtnMode === 'use' && ((0, jsx_runtime_1.jsx)(IconButton_1.IconButton, { shapeType: "circular", iconFillType: "line", baseColorKey: "ui_cpnt_sheet_base_02", iconColorKey: translateState === 'active'
140
+ ? 'ui_cpnt_list_chatbubble_base_brand_primary'
141
+ : 'ui_cpnt_icon_sys_grey_01', iconSize: 12, baseSize: "xsmall", iconName: "ic_translate", onClick: onClickTranslateIBtn })), downloadIBtnMode === 'use' && ((0, jsx_runtime_1.jsx)(IconButton_1.IconButton, { shapeType: "circular", iconFillType: "fill", baseColorKey: "ui_cpnt_sheet_base_02", iconColorKey: "ui_cpnt_icon_sys_grey_01", iconSize: 12, baseSize: "xsmall", iconName: "ic_download", onClick: onClickDownloadIBtn })), isMe && ((0, jsx_runtime_1.jsx)(components_1.ReactionRow, { isMe: true, isReactionButtonShow: reactionBtnMode === 'use', reactionArray: reactionArray, reactionBubblePosition: reactionBubblePosition, onClickReactionBtn: onClickReactionBtn }))] })] })), hoverMode === 'use' && !isMe && ((0, jsx_runtime_1.jsx)(S_SeeMoreButton, __assign({ isContextMenuOpen: isContextMenuOpen, hoverMode: hoverMode, ref: contextMenuRef }, { children: (0, jsx_runtime_1.jsx)(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 }) })))] }))] }), (0, jsx_runtime_1.jsx)(Popup_1.PopupProvider, { children: (0, jsx_runtime_1.jsx)(Popup_1.Popup, __assign({ targetRef: contextMenuRef, isOpen: isContextMenuOpen, placement: "top-end", wrapperHeight: rect === null || rect === void 0 ? void 0 : rect.height, onClickOutside: function () { return setIsContextMenuOpen(false); } }, { children: (0, jsx_runtime_1.jsx)(ContextMenu_1.ContextMenu, { children: contextMenuOptionArray === null || contextMenuOptionArray === void 0 ? void 0 : contextMenuOptionArray.map(function (el) { return ((0, jsx_runtime_1.jsx)(ContextMenuItem_1.ContextMenuItem, { option: el, onClick: handleContextMenuItemClick, state: contextMenuState }, el.value)); }) }) })) })] })) }));
140
142
  }
141
143
  var MyChatBubbleListItem = (0, styled_components_1.css)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n margin-right: ", ";\n"], ["\n margin-right: ", ";\n"])), function (_a) {
142
144
  var theme = _a.theme;
@@ -162,27 +164,17 @@ var S_ImageViewWrapper = styled_components_1.default.div(templateObject_5 || (te
162
164
  return (isOtherAvatarImpact ? ImageViewBrandPrimary : ImageViewDefault);
163
165
  });
164
166
  var S_RightBox = styled_components_1.default.div(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n flex: 1;\n"], ["\n flex: 1;\n"])));
165
- var S_DownloadIconWrapper = styled_components_1.default.div(templateObject_7 || (templateObject_7 = __makeTemplateObject(["\n align-items: center;\n display: flex;\n height: 100%;\n justify-content: center;\n margin-left: ", ";\n margin-right: ", ";\n"], ["\n align-items: center;\n display: flex;\n height: 100%;\n justify-content: center;\n margin-left: ", ";\n margin-right: ", ";\n"])), function (_a) {
166
- var isMe = _a.isMe, theme = _a.theme;
167
- return !isMe && theme.spacing.spacingB;
168
- }, function (_a) {
169
- var isMe = _a.isMe, theme = _a.theme;
170
- return isMe && theme.spacing.spacingB;
171
- });
172
- var S_Box = styled_components_1.default.div(templateObject_8 || (templateObject_8 = __makeTemplateObject(["\n display: flex;\n flex-direction: column;\n justify-content: ", ";\n"], ["\n display: flex;\n flex-direction: column;\n justify-content: ", ";\n"])), function (_a) {
173
- var hasBottomElement = _a.hasBottomElement;
174
- return (hasBottomElement ? 'space-between' : 'center');
175
- });
176
- var S_ChatBubbleBox = styled_components_1.default.div(templateObject_9 || (templateObject_9 = __makeTemplateObject(["\n display: flex;\n justify-content: space-between;\n\n ", ";\n"], ["\n display: flex;\n justify-content: space-between;\n\n ", ";\n"])), function (_a) {
167
+ var S_Box = styled_components_1.default.div(templateObject_7 || (templateObject_7 = __makeTemplateObject(["\n display: flex;\n flex-direction: column;\n justify-content: flex-end;\n"], ["\n display: flex;\n flex-direction: column;\n justify-content: flex-end;\n"])));
168
+ var S_ChatBubbleBox = styled_components_1.default.div(templateObject_8 || (templateObject_8 = __makeTemplateObject(["\n display: flex;\n justify-content: space-between;\n\n ", ";\n"], ["\n display: flex;\n justify-content: space-between;\n\n ", ";\n"])), function (_a) {
177
169
  var isMe = _a.isMe;
178
170
  return isMe && MyChatBubble;
179
171
  });
180
- var MyChatBubble = (0, styled_components_1.css)(templateObject_10 || (templateObject_10 = __makeTemplateObject(["\n justify-content: flex-end;\n"], ["\n justify-content: flex-end;\n"])));
181
- var S_ChatBubbleWrapper = styled_components_1.default.div(templateObject_11 || (templateObject_11 = __makeTemplateObject(["\n align-items: ", ";\n display: flex;\n flex: 1;\n flex-direction: column;\n max-width: fit-content;\n"], ["\n align-items: ", ";\n display: flex;\n flex: 1;\n flex-direction: column;\n max-width: fit-content;\n"])), function (_a) {
172
+ var MyChatBubble = (0, styled_components_1.css)(templateObject_9 || (templateObject_9 = __makeTemplateObject(["\n justify-content: flex-end;\n"], ["\n justify-content: flex-end;\n"])));
173
+ var S_ChatBubbleWrapper = styled_components_1.default.div(templateObject_10 || (templateObject_10 = __makeTemplateObject(["\n align-items: ", ";\n display: flex;\n flex: 1;\n flex-direction: column;\n max-width: fit-content;\n"], ["\n align-items: ", ";\n display: flex;\n flex: 1;\n flex-direction: column;\n max-width: fit-content;\n"])), function (_a) {
182
174
  var isMe = _a.isMe;
183
175
  return isMe && 'flex-end';
184
176
  });
185
- var S_TimeWrapper = styled_components_1.default.div(templateObject_12 || (templateObject_12 = __makeTemplateObject(["\n align-items: ", ";\n align-self: ", ";\n display: flex;\n flex-direction: column;\n padding-left: ", ";\n padding-right: ", ";\n padding-top: ", ";\n"], ["\n align-items: ", ";\n align-self: ", ";\n display: flex;\n flex-direction: column;\n padding-left: ", ";\n padding-right: ", ";\n padding-top: ", ";\n"])), function (_a) {
177
+ var S_TimeWrapper = styled_components_1.default.div(templateObject_11 || (templateObject_11 = __makeTemplateObject(["\n align-items: ", ";\n align-self: ", ";\n display: flex;\n flex-direction: column;\n padding-left: ", ";\n padding-right: ", ";\n padding-top: ", ";\n"], ["\n align-items: ", ";\n align-self: ", ";\n display: flex;\n flex-direction: column;\n padding-left: ", ";\n padding-right: ", ";\n padding-top: ", ";\n"])), function (_a) {
186
178
  var isMe = _a.isMe;
187
179
  return isMe && 'flex-end';
188
180
  }, function (_a) {
@@ -198,7 +190,7 @@ var S_TimeWrapper = styled_components_1.default.div(templateObject_12 || (templa
198
190
  var theme = _a.theme;
199
191
  return theme.spacing.spacingA;
200
192
  });
201
- var S_SeeMoreButton = styled_components_1.default.div(templateObject_13 || (templateObject_13 = __makeTemplateObject(["\n box-sizing: border-box;\n display: flex;\n height: 24px;\n justify-content: right;\n margin-top: ", ";\n min-width: 48px;\n opacity: ", ";\n padding-right: ", ";\n position: relative;\n width: 48px;\n\n ", ":hover & {\n opacity: ", ";\n }\n"], ["\n box-sizing: border-box;\n display: flex;\n height: 24px;\n justify-content: right;\n margin-top: ", ";\n min-width: 48px;\n opacity: ", ";\n padding-right: ", ";\n position: relative;\n width: 48px;\n\n ", ":hover & {\n opacity: ", ";\n }\n"])), function (_a) {
193
+ var S_SeeMoreButton = styled_components_1.default.div(templateObject_12 || (templateObject_12 = __makeTemplateObject(["\n box-sizing: border-box;\n display: flex;\n height: 24px;\n justify-content: right;\n margin-top: ", ";\n min-width: 48px;\n opacity: ", ";\n padding-right: ", ";\n position: relative;\n width: 48px;\n\n ", ":hover & {\n opacity: ", ";\n }\n"], ["\n box-sizing: border-box;\n display: flex;\n height: 24px;\n justify-content: right;\n margin-top: ", ";\n min-width: 48px;\n opacity: ", ";\n padding-right: ", ";\n position: relative;\n width: 48px;\n\n ", ":hover & {\n opacity: ", ";\n }\n"])), function (_a) {
202
194
  var theme = _a.theme;
203
195
  return theme.spacing.spacingB;
204
196
  }, function (_a) {
@@ -211,6 +203,10 @@ var S_SeeMoreButton = styled_components_1.default.div(templateObject_13 || (temp
211
203
  var hoverMode = _a.hoverMode;
212
204
  return hoverMode === 'use' && '1';
213
205
  });
214
- var S_BubbleWrapper = styled_components_1.default.div(templateObject_14 || (templateObject_14 = __makeTemplateObject(["\n display: flex;\n"], ["\n display: flex;\n"])));
206
+ var S_BubbleWrapper = styled_components_1.default.div(templateObject_13 || (templateObject_13 = __makeTemplateObject(["\n display: flex;\n"], ["\n display: flex;\n"])));
207
+ var S_BottomActionWrapper = styled_components_1.default.div(templateObject_14 || (templateObject_14 = __makeTemplateObject(["\n align-items: center;\n display: flex;\n gap: ", ";\n padding-top: 4px;\n position: relative;\n"], ["\n align-items: center;\n display: flex;\n gap: ", ";\n padding-top: 4px;\n position: relative;\n"])), function (_a) {
208
+ var theme = _a.theme;
209
+ return theme.spacing.spacingA;
210
+ });
215
211
  exports.default = ChatBubbleListItem;
216
212
  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;
package/dist/src/desktop/components/ChatBubbleListItem/components/ReactionRow.d.ts CHANGED
@@ -7,12 +7,10 @@ type ReactionValueOption = {
7
7
  type ReactionArrayType = ReactionValueOption[];
8
8
  type Props = {
9
9
  isMe: boolean;
10
- downloadIBtnMode: 'use' | 'none';
11
- reactionBtnMode: 'use' | 'none';
12
- reactionBtnText: string;
10
+ isReactionButtonShow: boolean;
13
11
  reactionArray?: ReactionArrayType;
14
12
  reactionBubblePosition: 'top' | 'bottom';
15
13
  onClickReactionBtn?: (type: ReactionType) => void;
16
14
  };
17
- declare function ReactionRow({ isMe, reactionBtnMode, downloadIBtnMode, reactionBtnText, reactionArray, reactionBubblePosition, onClickReactionBtn }: Props): JSX.Element;
15
+ declare function ReactionRow({ isMe, isReactionButtonShow, reactionArray, reactionBubblePosition, onClickReactionBtn }: Props): JSX.Element;
18
16
  export default ReactionRow;
package/dist/src/desktop/components/ChatBubbleListItem/components/ReactionRow.js CHANGED
@@ -20,12 +20,12 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
20
20
  Object.defineProperty(exports, "__esModule", { value: true });
21
21
  var jsx_runtime_1 = require("react/jsx-runtime");
22
22
  var react_1 = require("react");
23
- var TextLabel_1 = require("../../../components/TextLabel");
23
+ var IconButton_1 = require("../../../components/IconButton");
24
24
  var components_1 = require("../../../../hybrid/components");
25
25
  var styled_components_1 = __importDefault(require("styled-components"));
26
26
  var ReactionBubble_1 = __importDefault(require("./ReactionBubble"));
27
27
  function ReactionRow(_a) {
28
- var isMe = _a.isMe, reactionBtnMode = _a.reactionBtnMode, downloadIBtnMode = _a.downloadIBtnMode, reactionBtnText = _a.reactionBtnText, reactionArray = _a.reactionArray, reactionBubblePosition = _a.reactionBubblePosition, onClickReactionBtn = _a.onClickReactionBtn;
28
+ var isMe = _a.isMe, isReactionButtonShow = _a.isReactionButtonShow, reactionArray = _a.reactionArray, reactionBubblePosition = _a.reactionBubblePosition, onClickReactionBtn = _a.onClickReactionBtn;
29
29
  var _b = (0, react_1.useState)(false), isOpenReactionBubble = _b[0], setIsOpenReactionBubble = _b[1];
30
30
  var bubbleRef = (0, react_1.useRef)(null);
31
31
  var buttonRef = (0, react_1.useRef)(null);
@@ -65,54 +65,34 @@ function ReactionRow(_a) {
65
65
  return;
66
66
  }
67
67
  };
68
- return ((0, jsx_runtime_1.jsxs)(S_Wrapper, { children: [(0, jsx_runtime_1.jsxs)(S_ReactionWrapper, __assign({ isMe: isMe, downloadIBtnMode: downloadIBtnMode === 'use' }, { children: [(0, jsx_runtime_1.jsx)(S_ButtonWrapper, __assign({ ref: buttonRef }, { children: !isMe && reactionBtnMode === 'use' && ((0, jsx_runtime_1.jsxs)(S_ReactionButton, __assign({ onClick: handleOpenReactionBubble }, { children: [(0, jsx_runtime_1.jsx)(components_1.Icon, { iconName: "ic_plus_circle", size: 12 }), (0, jsx_runtime_1.jsx)(TextLabel_1.TextLabel, { text: reactionBtnText, singleLineMode: "use", styleTheme: "caption2Bold" })] }))) })), reactionArray && ((0, jsx_runtime_1.jsx)(S_ReactionBadgeWrapper, { children: reactionArray.map(function (reaction, index) {
69
- var iconName = function () {
70
- switch (reaction.type) {
71
- case 'heart':
72
- return 'ic_lottie_heart';
73
- case 'like':
74
- return 'ic_lottie_thumb_up';
75
- case 'confetti':
76
- return 'ic_lottie_confetti';
77
- }
78
- };
79
- return ((0, jsx_runtime_1.jsx)(S_ReactionBadge, __assign({ type: reaction.type }, { children: (0, jsx_runtime_1.jsx)(components_1.LottieIcon, { iconName: iconName(), size: 16, autoplayMode: "none", loopMode: "none" }) }), index));
80
- }) }))] })), (0, jsx_runtime_1.jsx)(S_ReactionBubbleWrapper, __assign({ ref: bubbleRef, reactionBubblePosition: reactionBubblePosition }, { children: isOpenReactionBubble && ((0, jsx_runtime_1.jsx)(ReactionBubble_1.default, __assign({ pointingPosition: reactionBubblePosition === 'bottom' ? 'start_top' : 'start_bottom' }, { children: (0, jsx_runtime_1.jsx)(S_ReactionBadgeWrapper, { children: defaultReactions.map(function (reaction, index) { return ((0, jsx_runtime_1.jsx)(S_ReactionBadge, __assign({ type: reaction.type, isButton: true, onClick: function () {
81
- onClickReactionBtn && onClickReactionBtn(reaction.type);
82
- setIsOpenReactionBubble(false);
83
- } }, { children: (0, jsx_runtime_1.jsx)(components_1.LottieIcon, { iconName: reaction.iconName, size: 16, autoplayMode: "none", loopMode: "none" }) }), index)); }) }) }))) }))] }));
68
+ return ((0, jsx_runtime_1.jsxs)(S_ReactionRowWrapper, { children: [reactionArray && ((0, jsx_runtime_1.jsx)(S_ReactionBadgeWrapper, { children: reactionArray.map(function (reaction, index) {
69
+ var iconName = function () {
70
+ switch (reaction.type) {
71
+ case 'heart':
72
+ return 'ic_lottie_heart';
73
+ case 'like':
74
+ return 'ic_lottie_thumb_up';
75
+ case 'confetti':
76
+ return 'ic_lottie_confetti';
77
+ }
78
+ };
79
+ return ((0, jsx_runtime_1.jsx)(S_ReactionBadge, __assign({ type: reaction.type }, { children: (0, jsx_runtime_1.jsx)(components_1.LottieIcon, { iconName: iconName(), size: 12, autoplayMode: "none", loopMode: "none" }) }), index));
80
+ }) })), isReactionButtonShow && ((0, jsx_runtime_1.jsxs)(S_ButtonWrapper, __assign({ ref: buttonRef }, { children: [!isMe && ((0, jsx_runtime_1.jsx)(IconButton_1.IconButton, { shapeType: "circular", iconFillType: "line", baseColorKey: "ui_cpnt_sheet_base_02", iconColorKey: "ui_cpnt_icon_sys_grey_01", iconSize: 12, baseSize: "xsmall", iconName: "ic_face", onClick: handleOpenReactionBubble })), (0, jsx_runtime_1.jsx)(S_ReactionBubbleWrapper, __assign({ ref: bubbleRef, reactionBubblePosition: reactionBubblePosition }, { children: isOpenReactionBubble && ((0, jsx_runtime_1.jsx)(ReactionBubble_1.default, __assign({ pointingPosition: reactionBubblePosition === 'bottom' ? 'start_top' : 'start_bottom' }, { children: (0, jsx_runtime_1.jsx)(S_ReactionBadgeWrapper, { children: defaultReactions.map(function (reaction, index) { return ((0, jsx_runtime_1.jsx)(S_ReactionBadge, __assign({ type: reaction.type, isButton: true, onClick: function () {
81
+ onClickReactionBtn && onClickReactionBtn(reaction.type);
82
+ setIsOpenReactionBubble(false);
83
+ } }, { children: (0, jsx_runtime_1.jsx)(components_1.LottieIcon, { iconName: reaction.iconName, size: 12, autoplayMode: "none", loopMode: "none" }) }), index)); }) }) }))) }))] })))] }));
84
84
  }
85
85
  exports.default = ReactionRow;
86
- var S_Wrapper = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n align-items: flex-start;\n display: flex;\n flex-direction: column;\n gap: ", ";\n position: relative;\n"], ["\n align-items: flex-start;\n display: flex;\n flex-direction: column;\n gap: ", ";\n position: relative;\n"])), function (_a) {
86
+ var S_ReactionRowWrapper = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n display: flex;\n gap: ", ";\n"], ["\n display: flex;\n gap: ", ";\n"])), function (_a) {
87
87
  var theme = _a.theme;
88
88
  return theme.spacing.spacingA;
89
89
  });
90
- var S_ReactionWrapper = styled_components_1.default.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n display: flex;\n gap: ", ";\n justify-content: space-between;\n max-width: -webkit-fill-available;\n padding-right: ", ";\n padding-top: ", ";\n width: 100%;\n"], ["\n display: flex;\n gap: ", ";\n justify-content: space-between;\n max-width: -webkit-fill-available;\n padding-right: ", ";\n padding-top: ", ";\n width: 100%;\n"])), function (_a) {
91
- var theme = _a.theme;
92
- return theme.spacing.spacingB;
93
- }, function (_a) {
94
- var isMe = _a.isMe, downloadIBtnMode = _a.downloadIBtnMode;
95
- return !isMe && (downloadIBtnMode ? '40px' : '34px');
96
- }, function (_a) {
97
- var theme = _a.theme;
98
- return theme.spacing.spacingA;
99
- });
100
- var S_ButtonWrapper = styled_components_1.default.div(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n display: flex;\n flex-direction: column;\n"], ["\n display: flex;\n flex-direction: column;\n"])));
101
- var S_ReactionButton = styled_components_1.default.div(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n align-items: center;\n background-color: ", ";\n border-radius: 8px;\n box-sizing: border-box;\n cursor: pointer;\n display: flex;\n gap: ", ";\n height: 24px;\n justify-content: center;\n max-width: fit-content;\n padding: 0 ", ";\n"], ["\n align-items: center;\n background-color: ", ";\n border-radius: 8px;\n box-sizing: border-box;\n cursor: pointer;\n display: flex;\n gap: ", ";\n height: 24px;\n justify-content: center;\n max-width: fit-content;\n padding: 0 ", ";\n"])), function (_a) {
102
- var theme = _a.theme;
103
- return theme.ui_cpnt_sheet_base_02;
104
- }, function (_a) {
105
- var theme = _a.theme;
106
- return theme.spacing.spacingA;
107
- }, function (_a) {
108
- var theme = _a.theme;
109
- return theme.spacing.spacingB;
110
- });
111
- var S_ReactionBadgeWrapper = styled_components_1.default.div(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n display: flex;\n gap: ", ";\n"], ["\n display: flex;\n gap: ", ";\n"])), function (_a) {
90
+ var S_ButtonWrapper = styled_components_1.default.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n display: flex;\n flex-direction: column;\n position: relative;\n"], ["\n display: flex;\n flex-direction: column;\n position: relative;\n"])));
91
+ var S_ReactionBadgeWrapper = styled_components_1.default.div(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n align-items: center;\n display: flex;\n gap: ", ";\n"], ["\n align-items: center;\n display: flex;\n gap: ", ";\n"])), function (_a) {
112
92
  var theme = _a.theme;
113
93
  return theme.spacing.spacingA;
114
94
  });
115
- var S_ReactionBadge = styled_components_1.default.div(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n align-items: center;\n background-color: ", ";\n border-radius: 100%;\n cursor: ", ";\n display: flex;\n height: 24px;\n justify-content: center;\n width: 24px;\n"], ["\n align-items: center;\n background-color: ", ";\n border-radius: 100%;\n cursor: ", ";\n display: flex;\n height: 24px;\n justify-content: center;\n width: 24px;\n"])), function (_a) {
95
+ var S_ReactionBadge = styled_components_1.default.div(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n align-items: center;\n background-color: ", ";\n border-radius: 100%;\n cursor: ", ";\n display: flex;\n height: 16px;\n justify-content: center;\n width: 16px;\n"], ["\n align-items: center;\n background-color: ", ";\n border-radius: 100%;\n cursor: ", ";\n display: flex;\n height: 16px;\n justify-content: center;\n width: 16px;\n"])), function (_a) {
116
96
  var theme = _a.theme, type = _a.type;
117
97
  switch (type) {
118
98
  case 'heart':
@@ -126,8 +106,8 @@ var S_ReactionBadge = styled_components_1.default.div(templateObject_6 || (templ
126
106
  var isButton = _a.isButton;
127
107
  return isButton && 'pointer';
128
108
  });
129
- var S_ReactionBubbleWrapper = styled_components_1.default.div(templateObject_7 || (templateObject_7 = __makeTemplateObject(["\n left: 0;\n position: absolute;\n ", "\n z-index: 10;\n"], ["\n left: 0;\n position: absolute;\n ", "\n z-index: 10;\n"])), function (_a) {
109
+ var S_ReactionBubbleWrapper = styled_components_1.default.div(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n left: -7.5px;\n position: absolute;\n ", "\n z-index: 10;\n"], ["\n left: -7.5px;\n position: absolute;\n ", "\n z-index: 10;\n"])), function (_a) {
130
110
  var reactionBubblePosition = _a.reactionBubblePosition;
131
111
  return reactionBubblePosition === 'bottom' ? 'top: 28px;' : 'bottom: 24px;';
132
112
  });
133
- var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6, templateObject_7;
113
+ var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5;
package/dist/src/mobile/components/ChatBubbleListItem/ChatBubbleListItem.d.ts CHANGED
@@ -6,7 +6,7 @@ type ReactionValueOption = {
6
6
  type: ReactionType;
7
7
  count: number;
8
8
  };
9
- type ReactionArrayType = ReactionValueOption[];
9
+ export type ReactionArrayType = ReactionValueOption[];
10
10
  export type ChatBubbleListItemProps = {
11
11
  titleText?: PDSTextType;
12
12
  imageSrc?: string;
@@ -21,12 +21,14 @@ export type ChatBubbleListItemProps = {
21
21
  children?: React.ReactNode;
22
22
  downloadIBtnMode?: 'use' | 'none';
23
23
  reactionBtnMode?: 'use' | 'none';
24
- reactionBtnText?: string;
25
24
  reactionArray?: ReactionArrayType;
26
25
  reactionBubblePosition?: 'top' | 'bottom';
26
+ translateIBtnMode?: 'use' | 'none';
27
+ translateState?: 'active' | 'deactive';
27
28
  onClickContextMenuItem?: (option: PDSValueOption) => void;
28
29
  onClickDownloadIBtn?: () => void;
29
30
  onClickReactionBtn?: (type: ReactionType) => void;
31
+ onClickTranslateIBtn?: () => void;
30
32
  };
31
- declare function ChatBubbleListItem({ titleText, imageSrc, hoverMode, styleTheme, colorTheme, timeMode, timeText, labelText, contextMenuOptionArray, contextMenuState, children, downloadIBtnMode, reactionBtnMode, reactionBtnText, reactionArray, reactionBubblePosition, onClickContextMenuItem, onClickDownloadIBtn, onClickReactionBtn }: ChatBubbleListItemProps): JSX.Element;
33
+ declare function ChatBubbleListItem({ titleText, imageSrc, hoverMode, styleTheme, colorTheme, timeMode, timeText, labelText, contextMenuOptionArray, contextMenuState, children, downloadIBtnMode, reactionBtnMode, reactionArray, reactionBubblePosition, translateIBtnMode, translateState, onClickContextMenuItem, onClickDownloadIBtn, onClickReactionBtn, onClickTranslateIBtn }: ChatBubbleListItemProps): JSX.Element;
32
34
  export default ChatBubbleListItem;
package/dist/src/mobile/components/ChatBubbleListItem/ChatBubbleListItem.js CHANGED
@@ -69,7 +69,7 @@ var profileImageBorderColorTheme = {
69
69
  transparent: 'ui_cpnt_list_chatbubble_base_transparent'
70
70
  };
71
71
  function ChatBubbleListItem(_a) {
72
- var titleText = _a.titleText, imageSrc = _a.imageSrc, _b = _a.hoverMode, hoverMode = _b === void 0 ? 'use' : _b, styleTheme = _a.styleTheme, _c = _a.colorTheme, colorTheme = _c === void 0 ? 'grey' : _c, _d = _a.timeMode, timeMode = _d === void 0 ? 'use' : _d, timeText = _a.timeText, labelText = _a.labelText, contextMenuOptionArray = _a.contextMenuOptionArray, _e = _a.contextMenuState, contextMenuState = _e === void 0 ? 'normal' : _e, children = _a.children, _f = _a.downloadIBtnMode, downloadIBtnMode = _f === void 0 ? 'none' : _f, _g = _a.reactionBtnMode, reactionBtnMode = _g === void 0 ? 'none' : _g, _h = _a.reactionBtnText, reactionBtnText = _h === void 0 ? '-' : _h, reactionArray = _a.reactionArray, _j = _a.reactionBubblePosition, reactionBubblePosition = _j === void 0 ? 'bottom' : _j, onClickContextMenuItem = _a.onClickContextMenuItem, onClickDownloadIBtn = _a.onClickDownloadIBtn, onClickReactionBtn = _a.onClickReactionBtn;
72
+ var titleText = _a.titleText, imageSrc = _a.imageSrc, _b = _a.hoverMode, hoverMode = _b === void 0 ? 'use' : _b, styleTheme = _a.styleTheme, _c = _a.colorTheme, colorTheme = _c === void 0 ? 'grey' : _c, _d = _a.timeMode, timeMode = _d === void 0 ? 'use' : _d, timeText = _a.timeText, labelText = _a.labelText, contextMenuOptionArray = _a.contextMenuOptionArray, _e = _a.contextMenuState, contextMenuState = _e === void 0 ? 'normal' : _e, children = _a.children, _f = _a.downloadIBtnMode, downloadIBtnMode = _f === void 0 ? 'none' : _f, _g = _a.reactionBtnMode, reactionBtnMode = _g === void 0 ? 'none' : _g, reactionArray = _a.reactionArray, _h = _a.reactionBubblePosition, reactionBubblePosition = _h === void 0 ? 'bottom' : _h, _j = _a.translateIBtnMode, translateIBtnMode = _j === void 0 ? 'none' : _j, translateState = _a.translateState, onClickContextMenuItem = _a.onClickContextMenuItem, onClickDownloadIBtn = _a.onClickDownloadIBtn, onClickReactionBtn = _a.onClickReactionBtn, onClickTranslateIBtn = _a.onClickTranslateIBtn;
73
73
  var _k = (0, react_1.useState)(false), isContextMenuOpen = _k[0], setIsContextMenuOpen = _k[1];
74
74
  var contextMenuRef = (0, react_1.useRef)(null);
75
75
  var chatBody = document.querySelector('#chatMessageBox');
@@ -138,7 +138,9 @@ function ChatBubbleListItem(_a) {
138
138
  }
139
139
  setIsContextMenuOpen(false);
140
140
  };
141
- return ((0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: (0, jsx_runtime_1.jsxs)(S_ChatBubbleListItem, __assign({ "x-pds-name": "ChatBubbleListItem", "x-pds-element-type": "component", "x-pds-device-type": "mobile", isMe: isMe }, { children: [hasLeftSpacing ? ((0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: isProfileImageShow ? ((0, jsx_runtime_1.jsx)(S_ImageViewWrapper, __assign({ isOtherAvatarImpact: styleTheme === 'other_avatar_impact', colorTheme: colorTheme }, { children: (0, jsx_runtime_1.jsx)(hybrid_1.ImageView, { shapeType: "circular", ratio: "1_1", scaleType: "cover", src: imageSrc, width: styleTheme === 'other_avatar_impact' ? 36 : 38 }) }))) : ((0, jsx_runtime_1.jsx)(hybrid_1.Spacing, { size: "spacing_g", spacingType: "width" })) })) : ((0, jsx_runtime_1.jsx)(hybrid_1.Spacing, { size: "spacing_a", spacingType: "width" })), (0, jsx_runtime_1.jsxs)(S_RightBox, { children: [isTitleTextShow && ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(TextLabel_1.TextLabel, { text: titleText, styleTheme: "caption1Bold", colorTheme: titleTextColorTheme }), (0, jsx_runtime_1.jsx)(hybrid_1.Spacing, { size: "spacing_b" })] })), (0, jsx_runtime_1.jsxs)(S_ChatBubbleBox, __assign({ isMe: isMe }, { children: [(0, jsx_runtime_1.jsxs)(S_ChatBubbleWrapper, __assign({ isMe: isMe }, { children: [(0, jsx_runtime_1.jsxs)(S_BubbleWrapper, { children: [isMe && ((0, jsx_runtime_1.jsxs)(S_Box, __assign({ hasBottomElement: !!labelText || !!timeMode }, { children: [(0, jsx_runtime_1.jsx)(S_DownloadIconWrapper, __assign({ isMe: isMe }, { children: downloadIBtnMode === 'use' && ((0, jsx_runtime_1.jsx)(IconButton_1.IconButton, { shapeType: "circular", iconFillType: "fill", baseColorKey: "ui_cpnt_list_chatbubble_download_button_base", iconColorKey: "ui_cpnt_button_icon_white", iconSize: 16, iconName: "ic_download", onClick: onClickDownloadIBtn })) })), (0, jsx_runtime_1.jsxs)(S_TimeWrapper, __assign({ isMe: isMe }, { children: [labelText && ((0, jsx_runtime_1.jsx)(TextLabel_1.TextLabel, { text: labelText, styleTheme: "caption2Bold", colorTheme: "sysTextTertiary" })), timeMode === 'use' && timeText && ((0, jsx_runtime_1.jsx)(TextLabel_1.TextLabel, { text: timeText, styleTheme: "caption2Regular", colorTheme: "sysTextTertiary", singleLineMode: "use" }))] }))] }))), (0, jsx_runtime_1.jsx)(ChatBubble_1.default, __assign({ colorTheme: colorTheme, tailType: chatBubbleTailType[styleTheme] }, { children: children })), !isMe && ((0, jsx_runtime_1.jsxs)(S_Box, __assign({ hasBottomElement: !!labelText || !!timeMode }, { children: [(0, jsx_runtime_1.jsx)(S_DownloadIconWrapper, __assign({ isMe: isMe }, { children: downloadIBtnMode === 'use' && ((0, jsx_runtime_1.jsx)(IconButton_1.IconButton, { shapeType: "circular", iconFillType: "fill", baseColorKey: "ui_cpnt_list_chatbubble_download_button_base", iconColorKey: "ui_cpnt_button_icon_white", iconSize: 16, iconName: "ic_download", onClick: onClickDownloadIBtn })) })), (0, jsx_runtime_1.jsxs)(S_TimeWrapper, __assign({ isMe: isMe }, { children: [labelText && ((0, jsx_runtime_1.jsx)(TextLabel_1.TextLabel, { text: labelText, styleTheme: "caption2Bold", colorTheme: "sysTextTertiary" })), timeMode === 'use' && timeText && ((0, jsx_runtime_1.jsx)(TextLabel_1.TextLabel, { text: timeText, styleTheme: "caption2Regular", colorTheme: "sysTextTertiary", singleLineMode: "use" }))] }))] })))] }), (0, jsx_runtime_1.jsx)(components_1.ReactionRow, { isMe: isMe, downloadIBtnMode: downloadIBtnMode, reactionBtnMode: reactionBtnMode, reactionBtnText: reactionBtnText, reactionArray: reactionArray, reactionBubblePosition: reactionBubblePosition, onClickReactionBtn: onClickReactionBtn })] })), hoverMode === 'use' && !isMe && ((0, jsx_runtime_1.jsx)(S_SeeMoreButton, __assign({ isContextMenuOpen: isContextMenuOpen, hoverMode: hoverMode, ref: contextMenuRef }, { children: (0, jsx_runtime_1.jsx)(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 }) })))] }))] }), (0, jsx_runtime_1.jsx)(Popup_1.PopupProvider, { children: (0, jsx_runtime_1.jsx)(Popup_1.Popup, __assign({ targetRef: contextMenuRef, isOpen: isContextMenuOpen, placement: "top-end", wrapperHeight: rect === null || rect === void 0 ? void 0 : rect.height, onClickOutside: function () { return setIsContextMenuOpen(false); } }, { children: (0, jsx_runtime_1.jsx)(ContextMenu_1.ContextMenu, { children: contextMenuOptionArray === null || contextMenuOptionArray === void 0 ? void 0 : contextMenuOptionArray.map(function (el) { return ((0, jsx_runtime_1.jsx)(ContextMenuItem_1.ContextMenuItem, { option: el, onClick: handleContextMenuItemClick, state: contextMenuState }, el.value)); }) }) })) })] })) }));
141
+ return ((0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: (0, jsx_runtime_1.jsxs)(S_ChatBubbleListItem, __assign({ "x-pds-name": "ChatBubbleListItem", "x-pds-element-type": "component", "x-pds-device-type": "mobile", isMe: isMe }, { children: [hasLeftSpacing ? ((0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: isProfileImageShow ? ((0, jsx_runtime_1.jsx)(S_ImageViewWrapper, __assign({ isOtherAvatarImpact: styleTheme === 'other_avatar_impact', colorTheme: colorTheme }, { children: (0, jsx_runtime_1.jsx)(hybrid_1.ImageView, { shapeType: "circular", ratio: "1_1", scaleType: "cover", src: imageSrc, width: styleTheme === 'other_avatar_impact' ? 36 : 38 }) }))) : ((0, jsx_runtime_1.jsx)(hybrid_1.Spacing, { size: "spacing_g", spacingType: "width" })) })) : ((0, jsx_runtime_1.jsx)(hybrid_1.Spacing, { size: "spacing_a", spacingType: "width" })), (0, jsx_runtime_1.jsxs)(S_RightBox, { children: [isTitleTextShow && ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(TextLabel_1.TextLabel, { text: titleText, styleTheme: "caption1Bold", colorTheme: titleTextColorTheme }), (0, jsx_runtime_1.jsx)(hybrid_1.Spacing, { size: "spacing_b" })] })), (0, jsx_runtime_1.jsxs)(S_ChatBubbleBox, __assign({ isMe: isMe }, { children: [(0, jsx_runtime_1.jsxs)(S_ChatBubbleWrapper, __assign({ isMe: isMe }, { children: [(0, jsx_runtime_1.jsxs)(S_BubbleWrapper, { children: [isMe && ((0, jsx_runtime_1.jsx)(S_Box, { children: (0, jsx_runtime_1.jsxs)(S_TimeWrapper, __assign({ isMe: isMe }, { children: [labelText && ((0, jsx_runtime_1.jsx)(TextLabel_1.TextLabel, { text: labelText, styleTheme: "caption2Regular", colorTheme: "sysTextTertiary" })), timeMode === 'use' && timeText && ((0, jsx_runtime_1.jsx)(TextLabel_1.TextLabel, { text: timeText, styleTheme: "caption2Regular", colorTheme: "sysTextTertiary", singleLineMode: "use" }))] })) })), (0, jsx_runtime_1.jsx)(ChatBubble_1.default, __assign({ colorTheme: colorTheme, tailType: chatBubbleTailType[styleTheme] }, { children: children })), !isMe && ((0, jsx_runtime_1.jsx)(S_Box, { children: (0, jsx_runtime_1.jsxs)(S_TimeWrapper, __assign({ isMe: isMe }, { children: [labelText && ((0, jsx_runtime_1.jsx)(TextLabel_1.TextLabel, { text: labelText, styleTheme: "caption2Regular", colorTheme: "sysTextTertiary" })), timeMode === 'use' && timeText && ((0, jsx_runtime_1.jsx)(TextLabel_1.TextLabel, { text: timeText, styleTheme: "caption2Regular", colorTheme: "sysTextTertiary", singleLineMode: "use" }))] })) }))] }), (0, jsx_runtime_1.jsxs)(S_BottomActionWrapper, { children: [!isMe && ((0, jsx_runtime_1.jsx)(components_1.ReactionRow, { isMe: false, isReactionButtonShow: reactionBtnMode === 'use', reactionArray: reactionArray, reactionBubblePosition: reactionBubblePosition, onClickReactionBtn: onClickReactionBtn })), translateIBtnMode === 'use' && ((0, jsx_runtime_1.jsx)(IconButton_1.IconButton, { shapeType: "circular", iconFillType: "line", baseColorKey: "ui_cpnt_sheet_base_02", iconColorKey: translateState === 'active'
142
+ ? 'ui_cpnt_list_chatbubble_base_brand_primary'
143
+ : 'ui_cpnt_icon_sys_grey_01', iconSize: 12, baseSize: "xsmall", iconName: "ic_translate", onClick: onClickTranslateIBtn })), downloadIBtnMode === 'use' && ((0, jsx_runtime_1.jsx)(IconButton_1.IconButton, { shapeType: "circular", iconFillType: "fill", baseColorKey: "ui_cpnt_sheet_base_02", iconColorKey: "ui_cpnt_icon_sys_grey_01", iconSize: 12, baseSize: "xsmall", iconName: "ic_download", onClick: onClickDownloadIBtn })), isMe && ((0, jsx_runtime_1.jsx)(components_1.ReactionRow, { isMe: true, isReactionButtonShow: reactionBtnMode === 'use', reactionArray: reactionArray, reactionBubblePosition: reactionBubblePosition, onClickReactionBtn: onClickReactionBtn }))] })] })), hoverMode === 'use' && !isMe && ((0, jsx_runtime_1.jsx)(S_SeeMoreButton, __assign({ isContextMenuOpen: isContextMenuOpen, hoverMode: hoverMode, ref: contextMenuRef }, { children: (0, jsx_runtime_1.jsx)(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 }) })))] }))] }), (0, jsx_runtime_1.jsx)(Popup_1.PopupProvider, { children: (0, jsx_runtime_1.jsx)(Popup_1.Popup, __assign({ targetRef: contextMenuRef, isOpen: isContextMenuOpen, placement: "top-end", wrapperHeight: rect === null || rect === void 0 ? void 0 : rect.height, onClickOutside: function () { return setIsContextMenuOpen(false); } }, { children: (0, jsx_runtime_1.jsx)(ContextMenu_1.ContextMenu, { children: contextMenuOptionArray === null || contextMenuOptionArray === void 0 ? void 0 : contextMenuOptionArray.map(function (el) { return ((0, jsx_runtime_1.jsx)(ContextMenuItem_1.ContextMenuItem, { option: el, onClick: handleContextMenuItemClick, state: contextMenuState }, el.value)); }) }) })) })] })) }));
142
144
  }
143
145
  var MyChatBubbleListItem = (0, styled_components_1.css)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n margin-right: ", ";\n"], ["\n margin-right: ", ";\n"])), function (_a) {
144
146
  var theme = _a.theme;
@@ -164,27 +166,17 @@ var S_ImageViewWrapper = styled_components_1.default.div(templateObject_5 || (te
164
166
  return (isOtherAvatarImpact ? ImageViewBrandPrimary : ImageViewDefault);
165
167
  });
166
168
  var S_RightBox = styled_components_1.default.div(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n flex: 1;\n"], ["\n flex: 1;\n"])));
167
- var S_DownloadIconWrapper = styled_components_1.default.div(templateObject_7 || (templateObject_7 = __makeTemplateObject(["\n align-items: center;\n display: flex;\n height: 100%;\n justify-content: center;\n margin-left: ", ";\n margin-right: ", ";\n"], ["\n align-items: center;\n display: flex;\n height: 100%;\n justify-content: center;\n margin-left: ", ";\n margin-right: ", ";\n"])), function (_a) {
168
- var isMe = _a.isMe, theme = _a.theme;
169
- return !isMe && theme.spacing.spacingB;
170
- }, function (_a) {
171
- var isMe = _a.isMe, theme = _a.theme;
172
- return isMe && theme.spacing.spacingB;
173
- });
174
- var S_Box = styled_components_1.default.div(templateObject_8 || (templateObject_8 = __makeTemplateObject(["\n display: flex;\n flex-direction: column;\n justify-content: ", ";\n"], ["\n display: flex;\n flex-direction: column;\n justify-content: ", ";\n"])), function (_a) {
175
- var hasBottomElement = _a.hasBottomElement;
176
- return (hasBottomElement ? 'space-between' : 'center');
177
- });
178
- var S_ChatBubbleBox = styled_components_1.default.div(templateObject_9 || (templateObject_9 = __makeTemplateObject(["\n display: flex;\n justify-content: space-between;\n\n ", ";\n"], ["\n display: flex;\n justify-content: space-between;\n\n ", ";\n"])), function (_a) {
169
+ var S_Box = styled_components_1.default.div(templateObject_7 || (templateObject_7 = __makeTemplateObject(["\n display: flex;\n flex-direction: column;\n justify-content: flex-end;\n"], ["\n display: flex;\n flex-direction: column;\n justify-content: flex-end;\n"])));
170
+ var S_ChatBubbleBox = styled_components_1.default.div(templateObject_8 || (templateObject_8 = __makeTemplateObject(["\n display: flex;\n justify-content: space-between;\n\n ", ";\n"], ["\n display: flex;\n justify-content: space-between;\n\n ", ";\n"])), function (_a) {
179
171
  var isMe = _a.isMe;
180
172
  return isMe && MyChatBubble;
181
173
  });
182
- var MyChatBubble = (0, styled_components_1.css)(templateObject_10 || (templateObject_10 = __makeTemplateObject(["\n justify-content: flex-end;\n"], ["\n justify-content: flex-end;\n"])));
183
- var S_ChatBubbleWrapper = styled_components_1.default.div(templateObject_11 || (templateObject_11 = __makeTemplateObject(["\n align-items: ", ";\n display: flex;\n flex: 1;\n flex-direction: column;\n max-width: fit-content;\n"], ["\n align-items: ", ";\n display: flex;\n flex: 1;\n flex-direction: column;\n max-width: fit-content;\n"])), function (_a) {
174
+ var MyChatBubble = (0, styled_components_1.css)(templateObject_9 || (templateObject_9 = __makeTemplateObject(["\n justify-content: flex-end;\n"], ["\n justify-content: flex-end;\n"])));
175
+ var S_ChatBubbleWrapper = styled_components_1.default.div(templateObject_10 || (templateObject_10 = __makeTemplateObject(["\n align-items: ", ";\n display: flex;\n flex: 1;\n flex-direction: column;\n max-width: fit-content;\n"], ["\n align-items: ", ";\n display: flex;\n flex: 1;\n flex-direction: column;\n max-width: fit-content;\n"])), function (_a) {
184
176
  var isMe = _a.isMe;
185
177
  return isMe && 'flex-end';
186
178
  });
187
- var S_TimeWrapper = styled_components_1.default.div(templateObject_12 || (templateObject_12 = __makeTemplateObject(["\n align-items: ", ";\n align-self: ", ";\n display: flex;\n flex-direction: column;\n padding-left: ", ";\n padding-right: ", ";\n padding-top: ", ";\n"], ["\n align-items: ", ";\n align-self: ", ";\n display: flex;\n flex-direction: column;\n padding-left: ", ";\n padding-right: ", ";\n padding-top: ", ";\n"])), function (_a) {
179
+ var S_TimeWrapper = styled_components_1.default.div(templateObject_11 || (templateObject_11 = __makeTemplateObject(["\n align-items: ", ";\n align-self: ", ";\n display: flex;\n flex-direction: column;\n padding-left: ", ";\n padding-right: ", ";\n padding-top: ", ";\n"], ["\n align-items: ", ";\n align-self: ", ";\n display: flex;\n flex-direction: column;\n padding-left: ", ";\n padding-right: ", ";\n padding-top: ", ";\n"])), function (_a) {
188
180
  var isMe = _a.isMe;
189
181
  return isMe && 'flex-end';
190
182
  }, function (_a) {
@@ -200,7 +192,7 @@ var S_TimeWrapper = styled_components_1.default.div(templateObject_12 || (templa
200
192
  var theme = _a.theme;
201
193
  return theme.spacing.spacingA;
202
194
  });
203
- var S_SeeMoreButton = styled_components_1.default.div(templateObject_13 || (templateObject_13 = __makeTemplateObject(["\n box-sizing: border-box;\n display: flex;\n height: 24px;\n justify-content: right;\n margin-top: ", ";\n min-width: 48px;\n opacity: ", ";\n padding-right: ", ";\n position: relative;\n width: 48px;\n\n ", ":hover & {\n opacity: ", ";\n }\n"], ["\n box-sizing: border-box;\n display: flex;\n height: 24px;\n justify-content: right;\n margin-top: ", ";\n min-width: 48px;\n opacity: ", ";\n padding-right: ", ";\n position: relative;\n width: 48px;\n\n ", ":hover & {\n opacity: ", ";\n }\n"])), function (_a) {
195
+ var S_SeeMoreButton = styled_components_1.default.div(templateObject_12 || (templateObject_12 = __makeTemplateObject(["\n box-sizing: border-box;\n display: flex;\n height: 24px;\n justify-content: right;\n margin-top: ", ";\n min-width: 48px;\n opacity: ", ";\n padding-right: ", ";\n position: relative;\n width: 48px;\n\n ", ":hover & {\n opacity: ", ";\n }\n"], ["\n box-sizing: border-box;\n display: flex;\n height: 24px;\n justify-content: right;\n margin-top: ", ";\n min-width: 48px;\n opacity: ", ";\n padding-right: ", ";\n position: relative;\n width: 48px;\n\n ", ":hover & {\n opacity: ", ";\n }\n"])), function (_a) {
204
196
  var theme = _a.theme;
205
197
  return theme.spacing.spacingB;
206
198
  }, function (_a) {
@@ -213,6 +205,10 @@ var S_SeeMoreButton = styled_components_1.default.div(templateObject_13 || (temp
213
205
  var hoverMode = _a.hoverMode;
214
206
  return hoverMode === 'use' && '1';
215
207
  });
216
- var S_BubbleWrapper = styled_components_1.default.div(templateObject_14 || (templateObject_14 = __makeTemplateObject(["\n display: flex;\n"], ["\n display: flex;\n"])));
208
+ var S_BubbleWrapper = styled_components_1.default.div(templateObject_13 || (templateObject_13 = __makeTemplateObject(["\n display: flex;\n"], ["\n display: flex;\n"])));
209
+ var S_BottomActionWrapper = styled_components_1.default.div(templateObject_14 || (templateObject_14 = __makeTemplateObject(["\n align-items: center;\n display: flex;\n gap: ", ";\n padding-top: 4px;\n position: relative;\n"], ["\n align-items: center;\n display: flex;\n gap: ", ";\n padding-top: 4px;\n position: relative;\n"])), function (_a) {
210
+ var theme = _a.theme;
211
+ return theme.spacing.spacingA;
212
+ });
217
213
  exports.default = ChatBubbleListItem;
218
214
  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;
package/dist/src/mobile/components/ChatBubbleListItem/components/ReactionRow.d.ts CHANGED
@@ -7,12 +7,10 @@ type ReactionValueOption = {
7
7
  type ReactionArrayType = ReactionValueOption[];
8
8
  type Props = {
9
9
  isMe: boolean;
10
- downloadIBtnMode: 'use' | 'none';
11
- reactionBtnMode: 'use' | 'none';
12
- reactionBtnText: string;
10
+ isReactionButtonShow: boolean;
13
11
  reactionArray?: ReactionArrayType;
14
12
  reactionBubblePosition: 'top' | 'bottom';
15
13
  onClickReactionBtn?: (type: ReactionType) => void;
16
14
  };
17
- declare function ReactionRow({ isMe, downloadIBtnMode, reactionBtnMode, reactionBtnText, reactionArray, reactionBubblePosition, onClickReactionBtn }: Props): JSX.Element;
15
+ declare function ReactionRow({ isMe, isReactionButtonShow, reactionArray, reactionBubblePosition, onClickReactionBtn }: Props): JSX.Element;
18
16
  export default ReactionRow;
package/dist/src/mobile/components/ChatBubbleListItem/components/ReactionRow.js CHANGED
@@ -21,11 +21,11 @@ Object.defineProperty(exports, "__esModule", { value: true });
21
21
  var jsx_runtime_1 = require("react/jsx-runtime");
22
22
  var react_1 = require("react");
23
23
  var components_1 = require("../../../../hybrid/components");
24
- var TextLabel_1 = require("../../../components/TextLabel");
24
+ var IconButton_1 = require("../../../components/IconButton");
25
25
  var styled_components_1 = __importDefault(require("styled-components"));
26
26
  var ReactionBubble_1 = __importDefault(require("./ReactionBubble"));
27
27
  function ReactionRow(_a) {
28
- var isMe = _a.isMe, downloadIBtnMode = _a.downloadIBtnMode, reactionBtnMode = _a.reactionBtnMode, reactionBtnText = _a.reactionBtnText, reactionArray = _a.reactionArray, reactionBubblePosition = _a.reactionBubblePosition, onClickReactionBtn = _a.onClickReactionBtn;
28
+ var isMe = _a.isMe, isReactionButtonShow = _a.isReactionButtonShow, reactionArray = _a.reactionArray, reactionBubblePosition = _a.reactionBubblePosition, onClickReactionBtn = _a.onClickReactionBtn;
29
29
  var _b = (0, react_1.useState)(false), isOpenReactionBubble = _b[0], setIsOpenReactionBubble = _b[1];
30
30
  var bubbleRef = (0, react_1.useRef)(null);
31
31
  var buttonRef = (0, react_1.useRef)(null);
@@ -55,57 +55,44 @@ function ReactionRow(_a) {
55
55
  { iconName: 'ic_lottie_thumb_up', type: 'like' },
56
56
  { iconName: 'ic_lottie_confetti', type: 'confetti' }
57
57
  ];
58
- var handleClickReactionButton = function () {
59
- isOpenReactionBubble ? setIsOpenReactionBubble(false) : setIsOpenReactionBubble(true);
58
+ var handleOpenReactionBubble = function () {
59
+ if (!isOpenReactionBubble) {
60
+ setIsOpenReactionBubble(true);
61
+ return;
62
+ }
63
+ if (isOpenReactionBubble) {
64
+ setIsOpenReactionBubble(false);
65
+ return;
66
+ }
60
67
  };
61
- return ((0, jsx_runtime_1.jsxs)(S_Wrapper, { children: [(0, jsx_runtime_1.jsxs)(S_ReactionWrapper, __assign({ isMe: isMe, downloadIBtnMode: downloadIBtnMode === 'use' }, { children: [(0, jsx_runtime_1.jsx)(S_ButtonWrapper, __assign({ ref: buttonRef }, { children: !isMe && reactionBtnMode === 'use' && ((0, jsx_runtime_1.jsxs)(S_ReactionButton, __assign({ onClick: handleClickReactionButton }, { children: [(0, jsx_runtime_1.jsx)(components_1.Icon, { iconName: "ic_plus_circle", size: 12 }), (0, jsx_runtime_1.jsx)(TextLabel_1.TextLabel, { text: reactionBtnText, singleLineMode: "use", styleTheme: "caption2Bold" })] }))) })), reactionArray && ((0, jsx_runtime_1.jsx)(S_ReactionBadgeWrapper, { children: reactionArray.map(function (reaction, index) {
62
- var iconName = function () {
63
- switch (reaction.type) {
64
- case 'heart':
65
- return 'ic_lottie_heart';
66
- case 'like':
67
- return 'ic_lottie_thumb_up';
68
- case 'confetti':
69
- return 'ic_lottie_confetti';
70
- }
71
- };
72
- return ((0, jsx_runtime_1.jsx)(S_ReactionBadge, __assign({ type: reaction.type }, { children: (0, jsx_runtime_1.jsx)(components_1.LottieIcon, { iconName: iconName(), size: 16, autoplayMode: "none", loopMode: "none" }) }), index));
73
- }) }))] })), (0, jsx_runtime_1.jsx)(S_ReactionBubbleWrapper, __assign({ ref: bubbleRef, reactionBubblePosition: reactionBubblePosition }, { children: isOpenReactionBubble && ((0, jsx_runtime_1.jsx)(ReactionBubble_1.default, __assign({ pointingPosition: reactionBubblePosition === 'bottom' ? 'start_top' : 'start_bottom' }, { children: (0, jsx_runtime_1.jsx)(S_ReactionBadgeWrapper, { children: defaultReactions.map(function (reaction, index) { return ((0, jsx_runtime_1.jsx)(S_ReactionBadge, __assign({ type: reaction.type, isButton: true, onClick: function () {
74
- onClickReactionBtn && onClickReactionBtn(reaction.type);
75
- setIsOpenReactionBubble(false);
76
- } }, { children: (0, jsx_runtime_1.jsx)(components_1.LottieIcon, { iconName: reaction.iconName, size: 16, autoplayMode: "none", loopMode: "none" }) }), index)); }) }) }))) }))] }));
68
+ return ((0, jsx_runtime_1.jsxs)(S_ReactionRowWrapper, { children: [reactionArray && ((0, jsx_runtime_1.jsx)(S_ReactionBadgeWrapper, { children: reactionArray.map(function (reaction, index) {
69
+ var iconName = function () {
70
+ switch (reaction.type) {
71
+ case 'heart':
72
+ return 'ic_lottie_heart';
73
+ case 'like':
74
+ return 'ic_lottie_thumb_up';
75
+ case 'confetti':
76
+ return 'ic_lottie_confetti';
77
+ }
78
+ };
79
+ return ((0, jsx_runtime_1.jsx)(S_ReactionBadge, __assign({ type: reaction.type }, { children: (0, jsx_runtime_1.jsx)(components_1.LottieIcon, { iconName: iconName(), size: 12, autoplayMode: "none", loopMode: "none" }) }), index));
80
+ }) })), isReactionButtonShow && ((0, jsx_runtime_1.jsxs)(S_ButtonWrapper, __assign({ ref: buttonRef }, { children: [!isMe && ((0, jsx_runtime_1.jsx)(IconButton_1.IconButton, { shapeType: "circular", iconFillType: "line", baseColorKey: "ui_cpnt_sheet_base_02", iconColorKey: "ui_cpnt_icon_sys_grey_01", iconSize: 12, baseSize: "xsmall", iconName: "ic_face", onClick: handleOpenReactionBubble })), (0, jsx_runtime_1.jsx)(S_ReactionBubbleWrapper, __assign({ ref: bubbleRef, reactionBubblePosition: reactionBubblePosition }, { children: isOpenReactionBubble && ((0, jsx_runtime_1.jsx)(ReactionBubble_1.default, __assign({ pointingPosition: reactionBubblePosition === 'bottom' ? 'start_top' : 'start_bottom' }, { children: (0, jsx_runtime_1.jsx)(S_ReactionBadgeWrapper, { children: defaultReactions.map(function (reaction, index) { return ((0, jsx_runtime_1.jsx)(S_ReactionBadge, __assign({ type: reaction.type, isButton: true, onClick: function () {
81
+ onClickReactionBtn && onClickReactionBtn(reaction.type);
82
+ setIsOpenReactionBubble(false);
83
+ } }, { children: (0, jsx_runtime_1.jsx)(components_1.LottieIcon, { iconName: reaction.iconName, size: 12, autoplayMode: "none", loopMode: "none" }) }), index)); }) }) }))) }))] })))] }));
77
84
  }
78
85
  exports.default = ReactionRow;
79
- var S_Wrapper = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n align-items: flex-start;\n display: flex;\n flex-direction: column;\n gap: ", ";\n position: relative;\n"], ["\n align-items: flex-start;\n display: flex;\n flex-direction: column;\n gap: ", ";\n position: relative;\n"])), function (_a) {
80
- var theme = _a.theme;
81
- return theme.spacing.spacingA;
82
- });
83
- var S_ReactionWrapper = styled_components_1.default.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n display: flex;\n gap: ", ";\n justify-content: space-between;\n max-width: -webkit-fill-available;\n padding-right: ", ";\n padding-top: ", ";\n width: 100%;\n"], ["\n display: flex;\n gap: ", ";\n justify-content: space-between;\n max-width: -webkit-fill-available;\n padding-right: ", ";\n padding-top: ", ";\n width: 100%;\n"])), function (_a) {
84
- var theme = _a.theme;
85
- return theme.spacing.spacingB;
86
- }, function (_a) {
87
- var isMe = _a.isMe, downloadIBtnMode = _a.downloadIBtnMode;
88
- return !isMe && (downloadIBtnMode ? '40px' : '34px');
89
- }, function (_a) {
86
+ var S_ReactionRowWrapper = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n display: flex;\n gap: ", ";\n"], ["\n display: flex;\n gap: ", ";\n"])), function (_a) {
90
87
  var theme = _a.theme;
91
88
  return theme.spacing.spacingA;
92
89
  });
93
- var S_ButtonWrapper = styled_components_1.default.div(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n display: flex;\n flex-direction: column;\n"], ["\n display: flex;\n flex-direction: column;\n"])));
94
- var S_ReactionButton = styled_components_1.default.div(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n align-items: center;\n background-color: ", ";\n border-radius: 8px;\n box-sizing: border-box;\n cursor: pointer;\n display: flex;\n gap: ", ";\n height: 24px;\n justify-content: center;\n padding: 0 ", ";\n"], ["\n align-items: center;\n background-color: ", ";\n border-radius: 8px;\n box-sizing: border-box;\n cursor: pointer;\n display: flex;\n gap: ", ";\n height: 24px;\n justify-content: center;\n padding: 0 ", ";\n"])), function (_a) {
95
- var theme = _a.theme;
96
- return theme.ui_cpnt_sheet_base_02;
97
- }, function (_a) {
98
- var theme = _a.theme;
99
- return theme.spacing.spacingA;
100
- }, function (_a) {
101
- var theme = _a.theme;
102
- return theme.spacing.spacingB;
103
- });
104
- var S_ReactionBadgeWrapper = styled_components_1.default.div(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n display: flex;\n gap: ", ";\n"], ["\n display: flex;\n gap: ", ";\n"])), function (_a) {
90
+ var S_ButtonWrapper = styled_components_1.default.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n display: flex;\n flex-direction: column;\n position: relative;\n"], ["\n display: flex;\n flex-direction: column;\n position: relative;\n"])));
91
+ var S_ReactionBadgeWrapper = styled_components_1.default.div(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n align-items: center;\n display: flex;\n gap: ", ";\n"], ["\n align-items: center;\n display: flex;\n gap: ", ";\n"])), function (_a) {
105
92
  var theme = _a.theme;
106
93
  return theme.spacing.spacingA;
107
94
  });
108
- var S_ReactionBadge = styled_components_1.default.div(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n align-items: center;\n background-color: ", ";\n border-radius: 100%;\n cursor: ", ";\n display: flex;\n height: 24px;\n justify-content: center;\n width: 24px;\n"], ["\n align-items: center;\n background-color: ", ";\n border-radius: 100%;\n cursor: ", ";\n display: flex;\n height: 24px;\n justify-content: center;\n width: 24px;\n"])), function (_a) {
95
+ var S_ReactionBadge = styled_components_1.default.div(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n align-items: center;\n background-color: ", ";\n border-radius: 100%;\n cursor: ", ";\n display: flex;\n height: 16px;\n justify-content: center;\n width: 16px;\n"], ["\n align-items: center;\n background-color: ", ";\n border-radius: 100%;\n cursor: ", ";\n display: flex;\n height: 16px;\n justify-content: center;\n width: 16px;\n"])), function (_a) {
109
96
  var theme = _a.theme, type = _a.type;
110
97
  switch (type) {
111
98
  case 'heart':
@@ -119,8 +106,8 @@ var S_ReactionBadge = styled_components_1.default.div(templateObject_6 || (templ
119
106
  var isButton = _a.isButton;
120
107
  return isButton && 'pointer';
121
108
  });
122
- var S_ReactionBubbleWrapper = styled_components_1.default.div(templateObject_7 || (templateObject_7 = __makeTemplateObject(["\n left: 0;\n position: absolute;\n ", "\n z-index: 10;\n"], ["\n left: 0;\n position: absolute;\n ", "\n z-index: 10;\n"])), function (_a) {
109
+ var S_ReactionBubbleWrapper = styled_components_1.default.div(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n left: 0;\n position: absolute;\n ", "\n z-index: 10;\n"], ["\n left: 0;\n position: absolute;\n ", "\n z-index: 10;\n"])), function (_a) {
123
110
  var reactionBubblePosition = _a.reactionBubblePosition;
124
111
  return reactionBubblePosition === 'bottom' ? 'top: 28px;' : 'bottom: 24px;';
125
112
  });
126
- var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6, templateObject_7;
113
+ var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5;
package/dist/src/sub/DynamicLayout/CompositionEditor/CompositionEditor.js CHANGED
@@ -134,6 +134,7 @@ var CompositionEditor = (0, react_1.forwardRef)(function CompositionEditorCanvas
134
134
  },
135
135
  selectCBInBulk: function (blockIds) {
136
136
  setBulkBlockIds(blockIds);
137
+ setSelectedBlockId('BULK');
137
138
  },
138
139
  selectGroup: function (groupBlockId) {
139
140
  setBulkBlockIds([]);
@@ -277,7 +278,7 @@ var CompositionEditor = (0, react_1.forwardRef)(function CompositionEditorCanvas
277
278
  var set = new Set(__spreadArray(__spreadArray([], prev, true), bulks_1, true));
278
279
  return Array.from(set);
279
280
  });
280
- setSelectedBlockId(null);
281
+ setSelectedBlockId('BULK');
281
282
  var newBulkCBIds = bulks_1
282
283
  .map(function (id) { return (0, group_1.formatBlockIdToCbId)(id); })
283
284
  .filter(function (each) { return each !== null; });
@@ -434,7 +435,7 @@ var CompositionEditor = (0, react_1.forwardRef)(function CompositionEditorCanvas
434
435
  var set = new Set(__spreadArray(__spreadArray([], prev, true), added, true));
435
436
  return Array.from(set);
436
437
  });
437
- setSelectedBlockId(null);
438
+ setSelectedBlockId('BULK');
438
439
  var newBulkBlockIds = Array.from(new Set(__spreadArray(__spreadArray([], bulkBlockIds, true), added, true)));
439
440
  var newBulkCBIds = newBulkBlockIds
440
441
  .map(function (id) { return (0, group_1.formatBlockIdToCbId)(id); })
@@ -487,7 +488,7 @@ var CompositionEditor = (0, react_1.forwardRef)(function CompositionEditorCanvas
487
488
  return;
488
489
  }
489
490
  setBulkBlockIds(newBulks);
490
- setSelectedBlockId(null);
491
+ setSelectedBlockId('BULK');
491
492
  var newBulkCBIds = newBulks
492
493
  .map(function (id) { return (0, group_1.formatBlockIdToCbId)(id); })
493
494
  .filter(function (each) { return each !== null; });
@@ -959,7 +960,7 @@ var CompositionEditor = (0, react_1.forwardRef)(function CompositionEditorCanvas
959
960
  .map(function (id) { return (0, group_1.formatBlockIdToCbId)(id); })
960
961
  .filter(function (each) { return each !== null; });
961
962
  setBulkBlockIds(newBulkBlockIds_2);
962
- setSelectedBlockId(null);
963
+ setSelectedBlockId('BULK');
963
964
  var childrenCBIds_2 = [];
964
965
  if (newBulkCBIds_2.length === 0) {
965
966
  var oneCB = (0, group_1.findOneComponentBlock)(newblock, newBulkBlockIds_2[0]);
@@ -1075,10 +1076,7 @@ var CompositionEditor = (0, react_1.forwardRef)(function CompositionEditorCanvas
1075
1076
  } }, { children: (0, jsx_runtime_1.jsx)(Responsive, __assign({ device: device, selectedBlockId: selectedBlockId, sectionId: props.compositionData.id.toString(), innerRef: innerRef, className: (0, clsx_1.clsx)({
1076
1077
  'selected-grid-layout': editingSectionId === props.compositionData.id
1077
1078
  }), allowOverlap: true, layouts: layouts, resizeHandles: ['nw', 'e', 'n', 'ne', 's', 'se', 'sw', 'w'], breakpoints: breakpoints, breakpoint: breakpoint, cols: { lg: colsDesktop, sm: colsMobile }, rowHeight: rowHeight, margin: [10, 10], style: {
1078
- // minWidth: customSectionStyles.minWidth,
1079
- // maxWidth: customSectionStyles.maxWidth,
1080
1079
  width: customSectionStyles.width,
1081
- // maxHeight: customSectionStyles.maxHeight,
1082
1080
  fontSize: "".concat(16, "px")
1083
1081
  }, onLayoutChange: onLayoutChange, onDragStart: onDragStart, onDragStop: onDragStop, onResizeStop: onResizeStop, onDragStopForGroup: onBulkDragStop, onFitToContent: onAutoFitContent, onWidthChange: onWidthChange, minNbRow: rows, isDraggable: isEditMode, isResizable: isEditMode, zoom: props.editorProps.zoomScale,
1084
1082
  // GROUP
package/dist/src/sub/DynamicLayout/sections/CustomSection/CustomSection.js CHANGED
@@ -127,6 +127,7 @@ var CustomSection = (0, react_1.forwardRef)(function CustomSection(props, ref) {
127
127
  },
128
128
  selectCBInBulk: function (blockIds) {
129
129
  setBulkBlockIds(blockIds);
130
+ setSelectedBlockId('BULK');
130
131
  },
131
132
  selectGroup: function (groupBlockId) {
132
133
  setBulkBlockIds([]);
@@ -270,7 +271,7 @@ var CustomSection = (0, react_1.forwardRef)(function CustomSection(props, ref) {
270
271
  var set = new Set(__spreadArray(__spreadArray([], prev, true), bulks_1, true));
271
272
  return Array.from(set);
272
273
  });
273
- setSelectedBlockId(null);
274
+ setSelectedBlockId('BULK');
274
275
  var newBulkIdsSet = new Set(__spreadArray(__spreadArray([], bulkBlockIds, true), bulks_1, true));
275
276
  var newBulkIdsArray = Array.from(newBulkIdsSet);
276
277
  var newBulkCBIds = newBulkIdsArray
@@ -421,7 +422,7 @@ var CustomSection = (0, react_1.forwardRef)(function CustomSection(props, ref) {
421
422
  var set = new Set(__spreadArray(__spreadArray([], prev, true), added, true));
422
423
  return Array.from(set);
423
424
  });
424
- setSelectedBlockId(null);
425
+ setSelectedBlockId('BULK');
425
426
  var newBulkBlockIds = Array.from(new Set(__spreadArray(__spreadArray([], bulkBlockIds, true), added, true)));
426
427
  var newBulkCBIds = newBulkBlockIds
427
428
  .map(function (id) { return (0, group_1.formatBlockIdToCbId)(id); })
@@ -474,7 +475,7 @@ var CustomSection = (0, react_1.forwardRef)(function CustomSection(props, ref) {
474
475
  return;
475
476
  }
476
477
  setBulkBlockIds(newBulks);
477
- setSelectedBlockId(null);
478
+ setSelectedBlockId('BULK');
478
479
  var newBulkCBIds = newBulks
479
480
  .map(function (id) { return (0, group_1.formatBlockIdToCbId)(id); })
480
481
  .filter(function (each) { return each !== null; });
@@ -935,7 +936,7 @@ var CustomSection = (0, react_1.forwardRef)(function CustomSection(props, ref) {
935
936
  .map(function (id) { return (0, group_1.formatBlockIdToCbId)(id); })
936
937
  .filter(function (each) { return each !== null; });
937
938
  setBulkBlockIds(newBulkBlockIds_2);
938
- setSelectedBlockId(null);
939
+ setSelectedBlockId('BULK');
939
940
  var childrenCBIds_2 = [];
940
941
  if (newBulkCBIds_2.length === 0) {
941
942
  var oneCB = (0, group_1.findOneComponentBlock)(newblock, newBulkBlockIds_2[0]);
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "pds-dev-kit-web",
3
- "version": "2.2.308",
3
+ "version": "2.2.310",
4
4
  "license": "MIT",
5
5
  "private": false,
6
6
  "main": "dist/index.js",
package/release-note.md CHANGED
@@ -1,6 +1,6 @@
1
1
  # PDS-DEV-KIT-WEB Release Notes
2
- ## [v2.2.307]
2
+ ## [v2.2.310]
3
3
  ## daily|https://design.storybook.publ.biz/
4
4
 
5
5
  ### 업데이트 사항
6
- * [PDS-1421] FIX bulk시 오버랩 블록데이터 안보임
6
+ * [PDS-1422] ChatBubbleListItem UI 개선
package/.idea/codeStyles/Project.xml DELETED
@@ -1,59 +0,0 @@
1
- <component name="ProjectCodeStyleConfiguration">
2
- <code_scheme name="Project" version="173">
3
- <HTMLCodeStyleSettings>
4
- <option name="HTML_SPACE_INSIDE_EMPTY_TAG" value="true" />
5
- </HTMLCodeStyleSettings>
6
- <JSCodeStyleSettings version="0">
7
- <option name="FORCE_SEMICOLON_STYLE" value="true" />
8
- <option name="SPACE_BEFORE_FUNCTION_LEFT_PARENTH" value="false" />
9
- <option name="USE_DOUBLE_QUOTES" value="false" />
10
- <option name="FORCE_QUOTE_STYlE" value="true" />
11
- <option name="ENFORCE_TRAILING_COMMA" value="Remove" />
12
- <option name="SPACES_WITHIN_OBJECT_LITERAL_BRACES" value="true" />
13
- <option name="SPACES_WITHIN_IMPORTS" value="true" />
14
- </JSCodeStyleSettings>
15
- <TypeScriptCodeStyleSettings version="0">
16
- <option name="FORCE_SEMICOLON_STYLE" value="true" />
17
- <option name="SPACE_BEFORE_FUNCTION_LEFT_PARENTH" value="false" />
18
- <option name="USE_DOUBLE_QUOTES" value="false" />
19
- <option name="FORCE_QUOTE_STYlE" value="true" />
20
- <option name="ENFORCE_TRAILING_COMMA" value="Remove" />
21
- <option name="SPACES_WITHIN_OBJECT_LITERAL_BRACES" value="true" />
22
- <option name="SPACES_WITHIN_IMPORTS" value="true" />
23
- </TypeScriptCodeStyleSettings>
24
- <VueCodeStyleSettings>
25
- <option name="INTERPOLATION_NEW_LINE_AFTER_START_DELIMITER" value="false" />
26
- <option name="INTERPOLATION_NEW_LINE_BEFORE_END_DELIMITER" value="false" />
27
- </VueCodeStyleSettings>
28
- <codeStyleSettings language="HTML">
29
- <option name="SOFT_MARGINS" value="100" />
30
- <indentOptions>
31
- <option name="INDENT_SIZE" value="2" />
32
- <option name="CONTINUATION_INDENT_SIZE" value="2" />
33
- <option name="TAB_SIZE" value="2" />
34
- </indentOptions>
35
- </codeStyleSettings>
36
- <codeStyleSettings language="JavaScript">
37
- <option name="SOFT_MARGINS" value="100" />
38
- <indentOptions>
39
- <option name="INDENT_SIZE" value="2" />
40
- <option name="CONTINUATION_INDENT_SIZE" value="2" />
41
- <option name="TAB_SIZE" value="2" />
42
- </indentOptions>
43
- </codeStyleSettings>
44
- <codeStyleSettings language="TypeScript">
45
- <option name="SOFT_MARGINS" value="100" />
46
- <indentOptions>
47
- <option name="INDENT_SIZE" value="2" />
48
- <option name="CONTINUATION_INDENT_SIZE" value="2" />
49
- <option name="TAB_SIZE" value="2" />
50
- </indentOptions>
51
- </codeStyleSettings>
52
- <codeStyleSettings language="Vue">
53
- <option name="SOFT_MARGINS" value="100" />
54
- <indentOptions>
55
- <option name="CONTINUATION_INDENT_SIZE" value="2" />
56
- </indentOptions>
57
- </codeStyleSettings>
58
- </code_scheme>
59
- </component>
package/.idea/codeStyles/codeStyleConfig.xml DELETED
@@ -1,5 +0,0 @@
1
- <component name="ProjectCodeStyleConfiguration">
2
- <state>
3
- <option name="USE_PER_PROJECT_SETTINGS" value="true" />
4
- </state>
5
- </component>
package/.idea/inspectionProfiles/Project_Default.xml DELETED
@@ -1,7 +0,0 @@
1
- <component name="InspectionProjectProfileManager">
2
- <profile version="1.0">
3
- <option name="myName" value="Project Default" />
4
- <inspection_tool class="Eslint" enabled="true" level="WARNING" enabled_by_default="true" />
5
- <inspection_tool class="Stylelint" enabled="true" level="ERROR" enabled_by_default="true" />
6
- </profile>
7
- </component>
package/.idea/modules.xml DELETED
@@ -1,8 +0,0 @@
1
- <?xml version="1.0" encoding="UTF-8"?>
2
- <project version="4">
3
- <component name="ProjectModuleManager">
4
- <modules>
5
- <module fileurl="file://$PROJECT_DIR$/.idea/pds-dev-kit.iml" filepath="$PROJECT_DIR$/.idea/pds-dev-kit.iml" />
6
- </modules>
7
- </component>
8
- </project>
package/.idea/pds-dev-kit.iml DELETED
@@ -1,12 +0,0 @@
1
- <?xml version="1.0" encoding="UTF-8"?>
2
- <module type="WEB_MODULE" version="4">
3
- <component name="NewModuleRootManager">
4
- <content url="file://$MODULE_DIR$">
5
- <excludeFolder url="file://$MODULE_DIR$/.tmp" />
6
- <excludeFolder url="file://$MODULE_DIR$/temp" />
7
- <excludeFolder url="file://$MODULE_DIR$/tmp" />
8
- </content>
9
- <orderEntry type="inheritedJdk" />
10
- <orderEntry type="sourceFolder" forTests="false" />
11
- </component>
12
- </module>
package/.idea/prettier.xml DELETED
@@ -1,7 +0,0 @@
1
- <?xml version="1.0" encoding="UTF-8"?>
2
- <project version="4">
3
- <component name="PrettierConfiguration">
4
- <option name="myConfigurationMode" value="AUTOMATIC" />
5
- <option name="myRunOnSave" value="true" />
6
- </component>
7
- </project>
package/.idea/vcs.xml DELETED
@@ -1,6 +0,0 @@
1
- <?xml version="1.0" encoding="UTF-8"?>
2
- <project version="4">
3
- <component name="VcsDirectoryMappings">
4
- <mapping directory="" vcs="Git" />
5
- </component>
6
- </project>