pds-dev-kit-web 2.2.21 → 2.2.22

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 (10) hide show
  1. package/dist/src/desktop/components/BasicChatListItem/BasicChatListItem.d.ts +1 -1
  2. package/dist/src/desktop/components/BasicChatListItem/BasicChatListItem.js +12 -3
  3. package/dist/src/desktop/components/ChatBubbleListItem/ChatBubbleListItem.d.ts +3 -1
  4. package/dist/src/desktop/components/ChatBubbleListItem/ChatBubbleListItem.js +42 -46
  5. package/dist/src/mobile/components/BasicChatListItem/BasicChatListItem.d.ts +1 -1
  6. package/dist/src/mobile/components/BasicChatListItem/BasicChatListItem.js +12 -3
  7. package/dist/src/mobile/components/ChatBubbleListItem/ChatBubbleListItem.d.ts +3 -1
  8. package/dist/src/mobile/components/ChatBubbleListItem/ChatBubbleListItem.js +42 -46
  9. package/package.json +1 -1
  10. package/release-note.md +12 -6
package/dist/src/desktop/components/BasicChatListItem/BasicChatListItem.d.ts CHANGED
@@ -8,7 +8,7 @@ type Props = {
8
8
  hoverMode?: 'none' | 'use';
9
9
  contextMenuOptionArray?: PDSValueOption[];
10
10
  contextMenuState?: 'normal' | 'disabled';
11
- colorTheme?: 'seller' | 'seller_transparent' | 'subscriber' | 'subscriber_transparent' | 'secondary_transparent_grey' | 'white_transparent_grey';
11
+ colorTheme?: 'seller' | 'seller_transparent' | 'subscriber' | 'subscriber_transparent' | 'secondary_transparent_grey' | 'white_transparent_grey' | 'brand_primary_solid' | 'brand_primary_translucent' | 'secondary_transparent' | 'white_transparent';
12
12
  onClickContextMenuItem?: (option: PDSValueOption) => void;
13
13
  };
14
14
  declare function BasicChatListItem({ titleText, contentText, leftImageMode, imageSrc, hoverMode, contextMenuOptionArray, onClickContextMenuItem, contextMenuState, colorTheme }: Props): JSX.Element;
package/dist/src/desktop/components/BasicChatListItem/BasicChatListItem.js CHANGED
@@ -33,7 +33,11 @@ var titleTextColors = {
33
33
  subscriber: 'sysTextSecondary',
34
34
  subscriber_transparent: 'sysTextWhite',
35
35
  secondary_transparent_grey: 'sysTextSecondary',
36
- white_transparent_grey: 'sysTextWhite'
36
+ white_transparent_grey: 'sysTextWhite',
37
+ brand_primary_solid: 'usrTextBrandPrimary',
38
+ brand_primary_translucent: 'usrTextBrandPrimary',
39
+ secondary_transparent: 'sysTextSecondary',
40
+ white_transparent: 'sysTextWhite'
37
41
  };
38
42
  var backgroundColorTheme = {
39
43
  seller: 'ui_cpnt_list_base_area_seller',
@@ -41,10 +45,14 @@ var backgroundColorTheme = {
41
45
  subscriber: 'ui_cpnt_list_base_area',
42
46
  subscriber_transparent: 'ui_cpnt_list_base_area_transparent',
43
47
  secondary_transparent_grey: 'ui_cpnt_list_base_area',
44
- white_transparent_grey: 'ui_cpnt_list_base_area_transparent'
48
+ white_transparent_grey: 'ui_cpnt_list_base_area_transparent',
49
+ brand_primary_solid: 'ui_cpnt_list_base_area_seller',
50
+ brand_primary_translucent: 'ui_cpnt_list_base_area_transparent_seller',
51
+ secondary_transparent: 'ui_cpnt_list_base_area',
52
+ white_transparent: 'ui_cpnt_list_base_area_transparent'
45
53
  };
46
54
  function BasicChatListItem(_a) {
47
- var titleText = _a.titleText, contentText = _a.contentText, _b = _a.leftImageMode, leftImageMode = _b === void 0 ? 'none' : _b, imageSrc = _a.imageSrc, _c = _a.hoverMode, hoverMode = _c === void 0 ? 'use' : _c, contextMenuOptionArray = _a.contextMenuOptionArray, onClickContextMenuItem = _a.onClickContextMenuItem, _d = _a.contextMenuState, contextMenuState = _d === void 0 ? 'normal' : _d, _e = _a.colorTheme, colorTheme = _e === void 0 ? 'subscriber' : _e;
55
+ var titleText = _a.titleText, contentText = _a.contentText, _b = _a.leftImageMode, leftImageMode = _b === void 0 ? 'none' : _b, imageSrc = _a.imageSrc, _c = _a.hoverMode, hoverMode = _c === void 0 ? 'use' : _c, contextMenuOptionArray = _a.contextMenuOptionArray, onClickContextMenuItem = _a.onClickContextMenuItem, _d = _a.contextMenuState, contextMenuState = _d === void 0 ? 'normal' : _d, _e = _a.colorTheme, colorTheme = _e === void 0 ? 'secondary_transparent' : _e;
48
56
  var _f = (0, react_1.useState)(false), isContextMenuOpen = _f[0], setIsContextMenuOpen = _f[1];
49
57
  var contextMenuRef = (0, react_1.useRef)(null);
50
58
  var chatBody = document.querySelector('#chatMessageBox');
@@ -79,6 +87,7 @@ function BasicChatListItem(_a) {
79
87
  var contentTextColorOverride;
80
88
  var iconColorKey;
81
89
  switch (colorTheme) {
90
+ case 'white_transparent':
82
91
  case 'subscriber_transparent': {
83
92
  contentTextColorTheme = 'sysTextWhite';
84
93
  iconColorKey = 'ui_cpnt_button_icon_white';
package/dist/src/desktop/components/ChatBubbleListItem/ChatBubbleListItem.d.ts CHANGED
@@ -9,10 +9,12 @@ export type ChatBubbleListItemProps = {
9
9
  colorTheme?: ColorThemeType;
10
10
  timeMode?: 'none' | 'use';
11
11
  timeText?: PDSTextType;
12
+ countMode?: 'none' | 'use';
13
+ countText?: PDSTextType;
12
14
  contextMenuOptionArray?: PDSValueOption[];
13
15
  contextMenuState?: 'normal' | 'disabled';
14
16
  children?: React.ReactNode;
15
17
  onClickContextMenuItem?: (option: PDSValueOption) => void;
16
18
  };
17
- declare function ChatBubbleListItem({ titleText, imageSrc, hoverMode, styleTheme, colorTheme, timeMode, timeText, contextMenuOptionArray, contextMenuState, children, onClickContextMenuItem }: ChatBubbleListItemProps): JSX.Element;
19
+ declare function ChatBubbleListItem({ titleText, imageSrc, hoverMode, styleTheme, colorTheme, timeMode, timeText, countMode, countText, contextMenuOptionArray, contextMenuState, children, onClickContextMenuItem }: ChatBubbleListItemProps): JSX.Element;
18
20
  export default ChatBubbleListItem;
package/dist/src/desktop/components/ChatBubbleListItem/ChatBubbleListItem.js CHANGED
@@ -67,12 +67,40 @@ var profileImageBorderColorTheme = {
67
67
  translucent_black: 'ui_avatar_border_translucent_black'
68
68
  };
69
69
  function ChatBubbleListItem(_a) {
70
- 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, contextMenuOptionArray = _a.contextMenuOptionArray, _e = _a.contextMenuState, contextMenuState = _e === void 0 ? 'normal' : _e, children = _a.children, onClickContextMenuItem = _a.onClickContextMenuItem;
71
- var isMe = styleTheme.includes('me');
72
- var _f = (0, react_1.useState)(false), isContextMenuOpen = _f[0], setIsContextMenuOpen = _f[1];
70
+ 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, _e = _a.countMode, countMode = _e === void 0 ? 'none' : _e, countText = _a.countText, contextMenuOptionArray = _a.contextMenuOptionArray, _f = _a.contextMenuState, contextMenuState = _f === void 0 ? 'normal' : _f, children = _a.children, onClickContextMenuItem = _a.onClickContextMenuItem;
71
+ var _g = (0, react_1.useState)(false), isContextMenuOpen = _g[0], setIsContextMenuOpen = _g[1];
73
72
  var contextMenuRef = (0, react_1.useRef)(null);
74
73
  var chatBody = document.querySelector('#chatMessageBox');
75
74
  var rect = chatBody === null || chatBody === void 0 ? void 0 : chatBody.getBoundingClientRect();
75
+ var isMe = styleTheme.includes('me');
76
+ var isProfileImageShow = styleTheme === 'other_avatar_impact' || styleTheme === 'other_avatar';
77
+ var isTitleTextShow = styleTheme === 'other_avatar_impact' || styleTheme === 'other_avatar' || styleTheme === 'other';
78
+ var hasLeftSpacing = styleTheme === 'other_avatar_impact' ||
79
+ styleTheme === 'other_avatar' ||
80
+ styleTheme === 'other_avatar_sub';
81
+ var titleTextColorTheme = 'sysTextPrimary';
82
+ var countTextColorTheme = 'sysTextBrandPrimary';
83
+ switch (colorTheme) {
84
+ case 'grey': {
85
+ titleTextColorTheme = 'sysTextPrimary';
86
+ countTextColorTheme = 'sysTextBrandPrimary';
87
+ break;
88
+ }
89
+ case 'brand_primary': {
90
+ titleTextColorTheme = 'usrTextBrandPrimary';
91
+ countTextColorTheme = 'sysTextBrandPrimary';
92
+ break;
93
+ }
94
+ case 'translucent_white': {
95
+ titleTextColorTheme = 'sysTextBlack';
96
+ countTextColorTheme = 'sysTextTertiary';
97
+ break;
98
+ }
99
+ case 'translucent_black': {
100
+ titleTextColorTheme = 'sysTextWhite';
101
+ countTextColorTheme = 'sysTextTertiary';
102
+ }
103
+ }
76
104
  /**
77
105
  * @when contextMenu가 열려 있을 때
78
106
  * @expected ChatList body의 스크롤을 숨기고, contextMenu의 외부를 클릭하면 contextMenu가 닫히도록 합니다.
@@ -111,48 +139,7 @@ function ChatBubbleListItem(_a) {
111
139
  }
112
140
  setIsContextMenuOpen(false);
113
141
  };
114
- var isShowProfileImage = function () {
115
- if (styleTheme === 'other_avatar_impact' || styleTheme === 'other_avatar') {
116
- return true;
117
- }
118
- return false;
119
- };
120
- var isShowTitleText = function () {
121
- if (styleTheme === 'other_avatar_impact' ||
122
- styleTheme === 'other_avatar' ||
123
- styleTheme === 'other') {
124
- return true;
125
- }
126
- return false;
127
- };
128
- var checkTextColorTheme = function () {
129
- switch (colorTheme) {
130
- case 'grey': {
131
- return 'sysTextPrimary';
132
- }
133
- case 'brand_primary': {
134
- return 'usrTextBrandPrimary';
135
- }
136
- case 'translucent_white': {
137
- return 'sysTextBlack';
138
- }
139
- case 'translucent_black': {
140
- return 'sysTextWhite';
141
- }
142
- default: {
143
- return 'sysTextPrimary';
144
- }
145
- }
146
- };
147
- var isLeftSpacingChecker = function () {
148
- if (styleTheme === 'other_avatar_impact' ||
149
- styleTheme === 'other_avatar' ||
150
- styleTheme === 'other_avatar_sub') {
151
- return true;
152
- }
153
- return false;
154
- };
155
- 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: [isLeftSpacingChecker() ? ((0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: isShowProfileImage() ? ((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: [isShowTitleText() && ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(TextLabel_1.TextLabel, { text: titleText, styleTheme: "caption1Bold", colorTheme: colorTheme && checkTextColorTheme() }), (0, jsx_runtime_1.jsx)(hybrid_1.Spacing, { size: "spacing_b" })] })), (0, jsx_runtime_1.jsxs)(S_ChatBubbleBox, { children: [(0, jsx_runtime_1.jsxs)(S_ChatBubbleWrapper, __assign({ isMe: isMe }, { children: [timeMode === 'use' && timeText && isMe && ((0, jsx_runtime_1.jsxs)(S_TimeWrapper, { children: [(0, jsx_runtime_1.jsx)(TextLabel_1.TextLabel, { text: timeText, styleTheme: "caption2Regular", colorTheme: "sysTextTertiary", singleLineMode: "use" }), (0, jsx_runtime_1.jsx)(hybrid_1.Spacing, { size: "spacing_a", spacingType: "width" })] })), (0, jsx_runtime_1.jsx)(ChatBubble_1.default, __assign({ colorTheme: colorTheme, tailType: chatBubbleTailType[styleTheme] }, { children: children })), timeMode === 'use' && timeText && !isMe && ((0, jsx_runtime_1.jsxs)(S_TimeWrapper, { children: [(0, jsx_runtime_1.jsx)(hybrid_1.Spacing, { size: "spacing_a", spacingType: "width" }), (0, jsx_runtime_1.jsx)(TextLabel_1.TextLabel, { text: timeText, styleTheme: "caption2Regular", colorTheme: "sysTextTertiary", singleLineMode: "use" })] }))] })), 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
+ 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, { children: [(0, jsx_runtime_1.jsxs)(S_ChatBubbleWrapper, __assign({ isMe: isMe }, { children: [isMe && ((0, jsx_runtime_1.jsxs)(S_TimeWrapper, __assign({ isMe: isMe }, { children: [countMode === 'use' && ((0, jsx_runtime_1.jsx)(TextLabel_1.TextLabel, { text: countText, styleTheme: "caption2Regular", colorTheme: countTextColorTheme })), timeMode === 'use' && timeText && ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(hybrid_1.Spacing, { size: "spacing_a" }), (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_TimeWrapper, __assign({ isMe: isMe }, { children: [countMode === 'use' && ((0, jsx_runtime_1.jsx)(TextLabel_1.TextLabel, { text: countText, styleTheme: "caption2Regular", colorTheme: countTextColorTheme })), timeMode === 'use' && timeText && ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(hybrid_1.Spacing, { size: "spacing_a" }), (0, jsx_runtime_1.jsx)(TextLabel_1.TextLabel, { text: timeText, styleTheme: "caption2Regular", colorTheme: "sysTextTertiary", singleLineMode: "use" })] }))] })))] })), 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)); }) }) })) })] })) }));
156
143
  }
157
144
  var MyChatBubbleListItem = (0, styled_components_1.css)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n margin-right: ", ";\n"], ["\n margin-right: ", ";\n"])), function (_a) {
158
145
  var theme = _a.theme;
@@ -184,7 +171,16 @@ var S_ChatBubbleWrapper = styled_components_1.default.div(templateObject_9 || (t
184
171
  var isMe = _a.isMe;
185
172
  return isMe && MyChatBubble;
186
173
  });
187
- var S_TimeWrapper = styled_components_1.default.div(templateObject_10 || (templateObject_10 = __makeTemplateObject(["\n align-self: flex-end;\n display: flex;\n"], ["\n align-self: flex-end;\n display: flex;\n"])));
174
+ var S_TimeWrapper = styled_components_1.default.div(templateObject_10 || (templateObject_10 = __makeTemplateObject(["\n align-items: ", ";\n align-self: flex-end;\n display: flex;\n flex-direction: column;\n padding-left: ", ";\n padding-right: ", ";\n"], ["\n align-items: ", ";\n align-self: flex-end;\n display: flex;\n flex-direction: column;\n padding-left: ", ";\n padding-right: ", ";\n"])), function (_a) {
175
+ var isMe = _a.isMe;
176
+ return isMe && 'flex-end';
177
+ }, function (_a) {
178
+ var isMe = _a.isMe, theme = _a.theme;
179
+ return !isMe && theme.spacing.spacingA;
180
+ }, function (_a) {
181
+ var isMe = _a.isMe, theme = _a.theme;
182
+ return isMe && theme.spacing.spacingA;
183
+ });
188
184
  var S_SeeMoreButton = styled_components_1.default.div(templateObject_11 || (templateObject_11 = __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) {
189
185
  var theme = _a.theme;
190
186
  return theme.spacing.spacingB;
package/dist/src/mobile/components/BasicChatListItem/BasicChatListItem.d.ts CHANGED
@@ -8,7 +8,7 @@ type Props = {
8
8
  hoverMode?: 'none' | 'use';
9
9
  contextMenuOptionArray?: PDSValueOption[];
10
10
  contextMenuState?: 'normal' | 'disabled';
11
- colorTheme?: 'seller' | 'seller_transparent' | 'subscriber' | 'subscriber_transparent' | 'secondary_transparent_grey' | 'white_transparent_grey';
11
+ colorTheme?: 'seller' | 'seller_transparent' | 'subscriber' | 'subscriber_transparent' | 'secondary_transparent_grey' | 'white_transparent_grey' | 'brand_primary_solid' | 'brand_primary_translucent' | 'secondary_transparent' | 'white_transparent';
12
12
  onClickContextMenuItem?: (option: PDSValueOption) => void;
13
13
  };
14
14
  declare function BasicChatListItem({ titleText, contentText, leftImageMode, imageSrc, hoverMode, contextMenuOptionArray, onClickContextMenuItem, contextMenuState, colorTheme }: Props): JSX.Element;
package/dist/src/mobile/components/BasicChatListItem/BasicChatListItem.js CHANGED
@@ -33,7 +33,11 @@ var titleTextColors = {
33
33
  subscriber: 'sysTextSecondary',
34
34
  subscriber_transparent: 'sysTextWhite',
35
35
  secondary_transparent_grey: 'sysTextSecondary',
36
- white_transparent_grey: 'sysTextWhite'
36
+ white_transparent_grey: 'sysTextWhite',
37
+ brand_primary_solid: 'usrTextBrandPrimary',
38
+ brand_primary_translucent: 'usrTextBrandPrimary',
39
+ secondary_transparent: 'sysTextSecondary',
40
+ white_transparent: 'sysTextWhite'
37
41
  };
38
42
  var backgroundColorTheme = {
39
43
  seller: 'ui_cpnt_list_base_area_seller',
@@ -41,10 +45,14 @@ var backgroundColorTheme = {
41
45
  subscriber: 'ui_cpnt_list_base_area',
42
46
  subscriber_transparent: 'ui_cpnt_list_base_area_transparent',
43
47
  secondary_transparent_grey: 'ui_cpnt_list_base_area',
44
- white_transparent_grey: 'ui_cpnt_list_base_area_transparent'
48
+ white_transparent_grey: 'ui_cpnt_list_base_area_transparent',
49
+ brand_primary_solid: 'ui_cpnt_list_base_area_seller',
50
+ brand_primary_translucent: 'ui_cpnt_list_base_area_transparent_seller',
51
+ secondary_transparent: 'ui_cpnt_list_base_area',
52
+ white_transparent: 'ui_cpnt_list_base_area_transparent'
45
53
  };
46
54
  function BasicChatListItem(_a) {
47
- var titleText = _a.titleText, contentText = _a.contentText, _b = _a.leftImageMode, leftImageMode = _b === void 0 ? 'none' : _b, imageSrc = _a.imageSrc, _c = _a.hoverMode, hoverMode = _c === void 0 ? 'use' : _c, contextMenuOptionArray = _a.contextMenuOptionArray, onClickContextMenuItem = _a.onClickContextMenuItem, _d = _a.contextMenuState, contextMenuState = _d === void 0 ? 'normal' : _d, _e = _a.colorTheme, colorTheme = _e === void 0 ? 'subscriber' : _e;
55
+ var titleText = _a.titleText, contentText = _a.contentText, _b = _a.leftImageMode, leftImageMode = _b === void 0 ? 'none' : _b, imageSrc = _a.imageSrc, _c = _a.hoverMode, hoverMode = _c === void 0 ? 'use' : _c, contextMenuOptionArray = _a.contextMenuOptionArray, onClickContextMenuItem = _a.onClickContextMenuItem, _d = _a.contextMenuState, contextMenuState = _d === void 0 ? 'normal' : _d, _e = _a.colorTheme, colorTheme = _e === void 0 ? 'secondary_transparent' : _e;
48
56
  var _f = (0, react_1.useState)(false), isContextMenuOpen = _f[0], setIsContextMenuOpen = _f[1];
49
57
  var contextMenuRef = (0, react_1.useRef)(null);
50
58
  var chatBody = document.querySelector('#chatMessageBox');
@@ -96,6 +104,7 @@ function BasicChatListItem(_a) {
96
104
  var contentTextColorOverride;
97
105
  var iconColorKey;
98
106
  switch (colorTheme) {
107
+ case 'white_transparent':
99
108
  case 'subscriber_transparent': {
100
109
  contentTextColorTheme = 'sysTextWhite';
101
110
  iconColorKey = 'ui_cpnt_button_icon_white';
package/dist/src/mobile/components/ChatBubbleListItem/ChatBubbleListItem.d.ts CHANGED
@@ -9,10 +9,12 @@ export type ChatBubbleListItemProps = {
9
9
  colorTheme?: ColorThemeType;
10
10
  timeMode?: 'none' | 'use';
11
11
  timeText?: PDSTextType;
12
+ countMode?: 'none' | 'use';
13
+ countText?: PDSTextType;
12
14
  contextMenuOptionArray?: PDSValueOption[];
13
15
  contextMenuState?: 'normal' | 'disabled';
14
16
  children?: React.ReactNode;
15
17
  onClickContextMenuItem?: (option: PDSValueOption) => void;
16
18
  };
17
- declare function ChatBubbleListItem({ titleText, imageSrc, hoverMode, styleTheme, colorTheme, timeMode, timeText, contextMenuOptionArray, contextMenuState, children, onClickContextMenuItem }: ChatBubbleListItemProps): JSX.Element;
19
+ declare function ChatBubbleListItem({ titleText, imageSrc, hoverMode, styleTheme, colorTheme, timeMode, timeText, countMode, countText, contextMenuOptionArray, contextMenuState, children, onClickContextMenuItem }: ChatBubbleListItemProps): JSX.Element;
18
20
  export default ChatBubbleListItem;
package/dist/src/mobile/components/ChatBubbleListItem/ChatBubbleListItem.js CHANGED
@@ -67,12 +67,40 @@ var profileImageBorderColorTheme = {
67
67
  translucent_black: 'ui_avatar_border_translucent_black'
68
68
  };
69
69
  function ChatBubbleListItem(_a) {
70
- 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, contextMenuOptionArray = _a.contextMenuOptionArray, _e = _a.contextMenuState, contextMenuState = _e === void 0 ? 'normal' : _e, children = _a.children, onClickContextMenuItem = _a.onClickContextMenuItem;
71
- var isMe = styleTheme.includes('me');
72
- var _f = (0, react_1.useState)(false), isContextMenuOpen = _f[0], setIsContextMenuOpen = _f[1];
70
+ 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, _e = _a.countMode, countMode = _e === void 0 ? 'none' : _e, countText = _a.countText, contextMenuOptionArray = _a.contextMenuOptionArray, _f = _a.contextMenuState, contextMenuState = _f === void 0 ? 'normal' : _f, children = _a.children, onClickContextMenuItem = _a.onClickContextMenuItem;
71
+ var _g = (0, react_1.useState)(false), isContextMenuOpen = _g[0], setIsContextMenuOpen = _g[1];
73
72
  var contextMenuRef = (0, react_1.useRef)(null);
74
73
  var chatBody = document.querySelector('#chatMessageBox');
75
74
  var rect = chatBody === null || chatBody === void 0 ? void 0 : chatBody.getBoundingClientRect();
75
+ var isMe = styleTheme.includes('me');
76
+ var isProfileImageShow = styleTheme === 'other_avatar_impact' || styleTheme === 'other_avatar';
77
+ var isTitleTextShow = styleTheme === 'other_avatar_impact' || styleTheme === 'other_avatar' || styleTheme === 'other';
78
+ var hasLeftSpacing = styleTheme === 'other_avatar_impact' ||
79
+ styleTheme === 'other_avatar' ||
80
+ styleTheme === 'other_avatar_sub';
81
+ var titleTextColorTheme = 'sysTextPrimary';
82
+ var countTextColorTheme = 'sysTextBrandPrimary';
83
+ switch (colorTheme) {
84
+ case 'grey': {
85
+ titleTextColorTheme = 'sysTextPrimary';
86
+ countTextColorTheme = 'sysTextBrandPrimary';
87
+ break;
88
+ }
89
+ case 'brand_primary': {
90
+ titleTextColorTheme = 'usrTextBrandPrimary';
91
+ countTextColorTheme = 'sysTextBrandPrimary';
92
+ break;
93
+ }
94
+ case 'translucent_white': {
95
+ titleTextColorTheme = 'sysTextBlack';
96
+ countTextColorTheme = 'sysTextTertiary';
97
+ break;
98
+ }
99
+ case 'translucent_black': {
100
+ titleTextColorTheme = 'sysTextWhite';
101
+ countTextColorTheme = 'sysTextTertiary';
102
+ }
103
+ }
76
104
  /**
77
105
  * @when contextMenu가 열려 있을 때
78
106
  * @expected ChatList body의 스크롤을 숨기고, contextMenu의 외부를 클릭하면 contextMenu가 닫히도록 합니다.
@@ -113,48 +141,7 @@ function ChatBubbleListItem(_a) {
113
141
  }
114
142
  setIsContextMenuOpen(false);
115
143
  };
116
- var isShowProfileImage = function () {
117
- if (styleTheme === 'other_avatar_impact' || styleTheme === 'other_avatar') {
118
- return true;
119
- }
120
- return false;
121
- };
122
- var isShowTitleText = function () {
123
- if (styleTheme === 'other_avatar_impact' ||
124
- styleTheme === 'other_avatar' ||
125
- styleTheme === 'other') {
126
- return true;
127
- }
128
- return false;
129
- };
130
- var checkTextColorTheme = function () {
131
- switch (colorTheme) {
132
- case 'grey': {
133
- return 'sysTextPrimary';
134
- }
135
- case 'brand_primary': {
136
- return 'usrTextBrandPrimary';
137
- }
138
- case 'translucent_white': {
139
- return 'sysTextBlack';
140
- }
141
- case 'translucent_black': {
142
- return 'sysTextWhite';
143
- }
144
- default: {
145
- return 'sysTextPrimary';
146
- }
147
- }
148
- };
149
- var isLeftSpacingChecker = function () {
150
- if (styleTheme === 'other_avatar_impact' ||
151
- styleTheme === 'other_avatar' ||
152
- styleTheme === 'other_avatar_sub') {
153
- return true;
154
- }
155
- return false;
156
- };
157
- 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: [isLeftSpacingChecker() ? ((0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: isShowProfileImage() ? ((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: [isShowTitleText() && ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(TextLabel_1.TextLabel, { text: titleText, styleTheme: "caption1Bold", colorTheme: colorTheme && checkTextColorTheme() }), (0, jsx_runtime_1.jsx)(hybrid_1.Spacing, { size: "spacing_b" })] })), (0, jsx_runtime_1.jsxs)(S_ChatBubbleBox, { children: [(0, jsx_runtime_1.jsxs)(S_ChatBubbleWrapper, __assign({ isMe: isMe }, { children: [timeMode === 'use' && timeText && isMe && ((0, jsx_runtime_1.jsxs)(S_TimeWrapper, { children: [(0, jsx_runtime_1.jsx)(TextLabel_1.TextLabel, { text: timeText, styleTheme: "caption2Regular", colorTheme: "sysTextTertiary", singleLineMode: "use" }), (0, jsx_runtime_1.jsx)(hybrid_1.Spacing, { size: "spacing_a", spacingType: "width" })] })), (0, jsx_runtime_1.jsx)(ChatBubble_1.default, __assign({ colorTheme: colorTheme, tailType: chatBubbleTailType[styleTheme] }, { children: children })), timeMode === 'use' && timeText && !isMe && ((0, jsx_runtime_1.jsxs)(S_TimeWrapper, { children: [(0, jsx_runtime_1.jsx)(hybrid_1.Spacing, { size: "spacing_a", spacingType: "width" }), (0, jsx_runtime_1.jsx)(TextLabel_1.TextLabel, { text: timeText, styleTheme: "caption2Regular", colorTheme: "sysTextTertiary", singleLineMode: "use" })] }))] })), 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)); }) }) })) })] })) }));
144
+ 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, { children: [(0, jsx_runtime_1.jsxs)(S_ChatBubbleWrapper, __assign({ isMe: isMe }, { children: [isMe && ((0, jsx_runtime_1.jsxs)(S_TimeWrapper, __assign({ isMe: isMe }, { children: [countMode === 'use' && ((0, jsx_runtime_1.jsx)(TextLabel_1.TextLabel, { text: countText, styleTheme: "caption2Regular", colorTheme: countTextColorTheme })), timeMode === 'use' && timeText && ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(hybrid_1.Spacing, { size: "spacing_a" }), (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_TimeWrapper, __assign({ isMe: isMe }, { children: [countMode === 'use' && ((0, jsx_runtime_1.jsx)(TextLabel_1.TextLabel, { text: countText, styleTheme: "caption2Regular", colorTheme: countTextColorTheme })), timeMode === 'use' && timeText && ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(hybrid_1.Spacing, { size: "spacing_a" }), (0, jsx_runtime_1.jsx)(TextLabel_1.TextLabel, { text: timeText, styleTheme: "caption2Regular", colorTheme: "sysTextTertiary", singleLineMode: "use" })] }))] })))] })), 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)); }) }) })) })] })) }));
158
145
  }
159
146
  var MyChatBubbleListItem = (0, styled_components_1.css)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n margin-right: ", ";\n"], ["\n margin-right: ", ";\n"])), function (_a) {
160
147
  var theme = _a.theme;
@@ -186,7 +173,16 @@ var S_ChatBubbleWrapper = styled_components_1.default.div(templateObject_9 || (t
186
173
  var isMe = _a.isMe;
187
174
  return isMe && MyChatBubble;
188
175
  });
189
- var S_TimeWrapper = styled_components_1.default.div(templateObject_10 || (templateObject_10 = __makeTemplateObject(["\n align-self: flex-end;\n display: flex;\n"], ["\n align-self: flex-end;\n display: flex;\n"])));
176
+ var S_TimeWrapper = styled_components_1.default.div(templateObject_10 || (templateObject_10 = __makeTemplateObject(["\n align-items: ", ";\n align-self: flex-end;\n display: flex;\n flex-direction: column;\n padding-left: ", ";\n padding-right: ", ";\n"], ["\n align-items: ", ";\n align-self: flex-end;\n display: flex;\n flex-direction: column;\n padding-left: ", ";\n padding-right: ", ";\n"])), function (_a) {
177
+ var isMe = _a.isMe;
178
+ return isMe && 'flex-end';
179
+ }, function (_a) {
180
+ var isMe = _a.isMe, theme = _a.theme;
181
+ return !isMe && theme.spacing.spacingA;
182
+ }, function (_a) {
183
+ var isMe = _a.isMe, theme = _a.theme;
184
+ return isMe && theme.spacing.spacingA;
185
+ });
190
186
  var S_SeeMoreButton = styled_components_1.default.div(templateObject_11 || (templateObject_11 = __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) {
191
187
  var theme = _a.theme;
192
188
  return theme.spacing.spacingB;
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "pds-dev-kit-web",
3
- "version": "2.2.21",
3
+ "version": "2.2.22",
4
4
  "license": "MIT",
5
5
  "private": false,
6
6
  "main": "dist/index.js",
package/release-note.md CHANGED
@@ -1,8 +1,14 @@
1
1
  # PDS-DEV-KIT-WEB Release Notes
2
- ## [v2.2.21]
3
- ## urgent|https://design.storybook.publ.biz/
2
+ ## [v2.2.22]
3
+ ## daily|https://design.storybook.publ.biz/
4
4
 
5
- ### sub
6
- * DynamicLayout
7
- * z-index: +500 처리
8
- * fontFamily: google font는 모두 따음표 추가
5
+ ### Component
6
+ * ChatBubbleListItem
7
+ * countMode prop 추가
8
+ * countText prop 추가
9
+ * BasicChatListItem
10
+ * colorTheme value deprecated 처리 및 대체 value 추가
11
+ * seller -> brand_primary_solid
12
+ * seller_transparent -> brand_primary_translucent
13
+ * subscriber -> secondary_transparent
14
+ * subscriber_transparent -> white_transparent