pds-dev-kit-web 2.2.309 → 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.
- package/dist/src/desktop/components/ChatBubbleListItem/ChatBubbleListItem.d.ts +5 -3
- package/dist/src/desktop/components/ChatBubbleListItem/ChatBubbleListItem.js +15 -19
- package/dist/src/desktop/components/ChatBubbleListItem/components/ReactionRow.d.ts +2 -4
- package/dist/src/desktop/components/ChatBubbleListItem/components/ReactionRow.js +24 -44
- package/dist/src/mobile/components/ChatBubbleListItem/ChatBubbleListItem.d.ts +5 -3
- package/dist/src/mobile/components/ChatBubbleListItem/ChatBubbleListItem.js +15 -19
- package/dist/src/mobile/components/ChatBubbleListItem/components/ReactionRow.d.ts +2 -4
- package/dist/src/mobile/components/ChatBubbleListItem/components/ReactionRow.js +33 -46
- package/package.json +1 -1
- package/release-note.md +2 -2
- package/.idea/codeStyles/Project.xml +0 -59
- package/.idea/codeStyles/codeStyleConfig.xml +0 -5
- package/.idea/inspectionProfiles/Project_Default.xml +0 -7
- package/.idea/modules.xml +0 -8
- package/.idea/pds-dev-kit.iml +0 -12
- package/.idea/prettier.xml +0 -7
- package/.idea/vcs.xml +0 -6
|
@@ -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,
|
|
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;
|
|
@@ -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.
|
|
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.
|
|
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
|
|
166
|
-
|
|
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)(
|
|
181
|
-
var S_ChatBubbleWrapper = styled_components_1.default.div(
|
|
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(
|
|
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(
|
|
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(
|
|
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;
|
|
@@ -7,12 +7,10 @@ type ReactionValueOption = {
|
|
|
7
7
|
type ReactionArrayType = ReactionValueOption[];
|
|
8
8
|
type Props = {
|
|
9
9
|
isMe: boolean;
|
|
10
|
-
|
|
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,
|
|
15
|
+
declare function ReactionRow({ isMe, isReactionButtonShow, reactionArray, reactionBubblePosition, onClickReactionBtn }: Props): JSX.Element;
|
|
18
16
|
export default ReactionRow;
|
|
@@ -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
|
|
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,
|
|
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)(
|
|
69
|
-
|
|
70
|
-
|
|
71
|
-
|
|
72
|
-
|
|
73
|
-
|
|
74
|
-
|
|
75
|
-
|
|
76
|
-
|
|
77
|
-
|
|
78
|
-
|
|
79
|
-
|
|
80
|
-
|
|
81
|
-
|
|
82
|
-
|
|
83
|
-
|
|
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
|
|
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
|
|
91
|
-
|
|
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(
|
|
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(
|
|
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
|
|
113
|
+
var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5;
|
|
@@ -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,
|
|
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;
|
|
@@ -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.
|
|
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.
|
|
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
|
|
168
|
-
|
|
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)(
|
|
183
|
-
var S_ChatBubbleWrapper = styled_components_1.default.div(
|
|
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(
|
|
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(
|
|
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(
|
|
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;
|
|
@@ -7,12 +7,10 @@ type ReactionValueOption = {
|
|
|
7
7
|
type ReactionArrayType = ReactionValueOption[];
|
|
8
8
|
type Props = {
|
|
9
9
|
isMe: boolean;
|
|
10
|
-
|
|
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,
|
|
15
|
+
declare function ReactionRow({ isMe, isReactionButtonShow, reactionArray, reactionBubblePosition, onClickReactionBtn }: Props): JSX.Element;
|
|
18
16
|
export default ReactionRow;
|
|
@@ -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
|
|
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,
|
|
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
|
|
59
|
-
|
|
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)(
|
|
62
|
-
|
|
63
|
-
|
|
64
|
-
|
|
65
|
-
|
|
66
|
-
|
|
67
|
-
|
|
68
|
-
|
|
69
|
-
|
|
70
|
-
|
|
71
|
-
|
|
72
|
-
|
|
73
|
-
|
|
74
|
-
|
|
75
|
-
|
|
76
|
-
|
|
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
|
|
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(
|
|
94
|
-
var
|
|
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(
|
|
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(
|
|
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
|
|
113
|
+
var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5;
|
package/package.json
CHANGED
package/release-note.md
CHANGED
|
@@ -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>
|
|
@@ -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