pds-dev-kit-web 1.4.42 → 1.4.45
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/BasicChatListItem/BasicChatListItem.js +15 -15
- package/dist/src/desktop/components/ChatBubbleListItem/ChatBubbleListItem.js +26 -26
- package/dist/src/desktop/components/ChatList/Body.d.ts +4 -4
- package/dist/src/desktop/components/ChatList/Body.js +21 -12
- package/dist/src/desktop/components/ChatList/ChatList.d.ts +1 -1
- package/dist/src/desktop/components/ChatList/ChatList.js +17 -5
- package/dist/src/desktop/components/ChatList/useAutoScrollToBottom.js +7 -2
- package/dist/src/desktop/components/Dropdown/Dropdown.d.ts +1 -1
- package/dist/src/desktop/components/Dropdown/Dropdown.js +22 -7
- package/dist/src/desktop/components/FilterBar/FilterBar.js +1 -1
- package/dist/src/desktop/components/UserDesktopNavBar/UserDesktopNavBar.js +4 -1
- package/dist/src/mobile/components/BasicChatListItem/BasicChatListItem.js +15 -15
- package/dist/src/mobile/components/ChatBubbleListItem/ChatBubbleListItem.js +26 -26
- package/dist/src/mobile/components/ChatList/Body.d.ts +4 -4
- package/dist/src/mobile/components/ChatList/Body.js +30 -25
- package/dist/src/mobile/components/ChatList/ChatList.d.ts +1 -1
- package/dist/src/mobile/components/ChatList/ChatList.js +17 -5
- package/dist/src/mobile/components/ChatList/useAutoScrollToBottom.js +7 -2
- package/dist/src/mobile/components/Dropdown/Dropdown.d.ts +1 -1
- package/dist/src/mobile/components/Dropdown/Dropdown.js +22 -7
- package/package.json +1 -1
- package/release-note.md +6 -6
- package/dist/src/mobile/components/ChatList/useTimeout.d.ts +0 -6
- package/dist/src/mobile/components/ChatList/useTimeout.js +0 -11
|
@@ -71,26 +71,19 @@ function BasicChatListItem(_a) {
|
|
|
71
71
|
setIsContextMenuOpen(false);
|
|
72
72
|
};
|
|
73
73
|
return (react_1.default.createElement(react_1.default.Fragment, null,
|
|
74
|
-
react_1.default.createElement(S_BasicChatListItem, { colorTheme: colorTheme
|
|
74
|
+
react_1.default.createElement(S_BasicChatListItem, { colorTheme: colorTheme },
|
|
75
75
|
leftImageMode === 'use' && (react_1.default.createElement(S_ImageViewWrapper, null,
|
|
76
76
|
react_1.default.createElement(hybrid_1.ImageView, { shapeType: "circular", ratio: "1_1", scaleType: "cover", src: imageSrc, width: "responsive" }))),
|
|
77
77
|
react_1.default.createElement(TextLabel_1.TextLabel, { text: titleText, styleTheme: "caption1Bold", colorTheme: titleTextColors[colorTheme] }),
|
|
78
78
|
react_1.default.createElement(S_ContentTextWrapper, null,
|
|
79
79
|
react_1.default.createElement(TextLabel_1.TextLabel, { text: contentText, styleTheme: "caption1Regular", colorTheme: "sysTextPrimary", wordBreak: "break_all" })),
|
|
80
|
-
hoverMode === 'use' && (react_1.default.createElement(S_SeeMoreButton, { isContextMenuOpen: isContextMenuOpen, ref: contextMenuRef },
|
|
80
|
+
hoverMode === 'use' && (react_1.default.createElement(S_SeeMoreButton, { isContextMenuOpen: isContextMenuOpen, hoverMode: hoverMode, ref: contextMenuRef },
|
|
81
81
|
react_1.default.createElement(IconButton_1.IconButton, { fillType: "fill", baseSize: "xsmall", iconFillType: "fill", iconSize: 20, iconName: "ic_more", baseColorKey: "ui_cpnt_button_fill_base_transparent", iconColorKey: "ui_cpnt_button_icon_enabled", onClick: handleMoreButtonClick }))),
|
|
82
82
|
react_1.default.createElement(Popup_1.PopupProvider, null,
|
|
83
83
|
react_1.default.createElement(Popup_1.Popup, { targetRef: contextMenuRef, isOpen: isContextMenuOpen, placement: "v-auto", wrapperHeight: rect === null || rect === void 0 ? void 0 : rect.height, onClickOutside: function () { return setIsContextMenuOpen(false); } },
|
|
84
84
|
react_1.default.createElement(ContextMenu_1.ContextMenu, null, contextMenuOptionArray === null || contextMenuOptionArray === void 0 ? void 0 : contextMenuOptionArray.map(function (el) { return (react_1.default.createElement(ContextMenuItem_1.ContextMenuItem, { key: el.value, option: el, onClick: handleContextMenuItemClick, state: contextMenuState })); })))))));
|
|
85
85
|
}
|
|
86
|
-
var
|
|
87
|
-
var theme = _a.theme;
|
|
88
|
-
return theme.spacing.spacingA;
|
|
89
|
-
}, function (_a) {
|
|
90
|
-
var isContextMenuOpen = _a.isContextMenuOpen;
|
|
91
|
-
return (isContextMenuOpen ? 'visible' : 'hidden');
|
|
92
|
-
});
|
|
93
|
-
var S_BasicChatListItem = styled_components_1.default.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n background-color: ", ";\n display: flex;\n height: fit-content;\n max-width: 100%;\n min-height: 24px;\n padding-bottom: ", ";\n padding-left: ", ";\n padding-right: ", ";\n padding-top: ", ";\n\n :hover {\n ", " {\n visibility: ", ";\n }\n }\n"], ["\n background-color: ", ";\n display: flex;\n height: fit-content;\n max-width: 100%;\n min-height: 24px;\n padding-bottom: ", ";\n padding-left: ", ";\n padding-right: ", ";\n padding-top: ", ";\n\n :hover {\n ", " {\n visibility: ", ";\n }\n }\n"])), function (_a) {
|
|
86
|
+
var S_BasicChatListItem = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n background-color: ", ";\n display: flex;\n height: fit-content;\n max-width: 100%;\n min-height: 24px;\n padding-bottom: ", ";\n padding-left: ", ";\n padding-right: ", ";\n padding-top: ", ";\n"], ["\n background-color: ", ";\n display: flex;\n height: fit-content;\n max-width: 100%;\n min-height: 24px;\n padding-bottom: ", ";\n padding-left: ", ";\n padding-right: ", ";\n padding-top: ", ";\n"])), function (_a) {
|
|
94
87
|
var colorTheme = _a.colorTheme, theme = _a.theme;
|
|
95
88
|
return colorTheme && theme[backgroundColorTheme[colorTheme]];
|
|
96
89
|
}, function (_a) {
|
|
@@ -105,17 +98,24 @@ var S_BasicChatListItem = styled_components_1.default.div(templateObject_2 || (t
|
|
|
105
98
|
}, function (_a) {
|
|
106
99
|
var theme = _a.theme;
|
|
107
100
|
return theme.spacing.spacingA;
|
|
108
|
-
}, S_SeeMoreButton, function (_a) {
|
|
109
|
-
var hoverMode = _a.hoverMode;
|
|
110
|
-
return hoverMode === 'use' && 'visible';
|
|
111
101
|
});
|
|
112
|
-
var S_ImageViewWrapper = styled_components_1.default.div(
|
|
102
|
+
var S_ImageViewWrapper = styled_components_1.default.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n height: 24px;\n margin-right: ", ";\n min-width: 24px;\n width: 24px;\n"], ["\n height: 24px;\n margin-right: ", ";\n min-width: 24px;\n width: 24px;\n"])), function (_a) {
|
|
113
103
|
var theme = _a.theme;
|
|
114
104
|
return theme.spacing.spacingB;
|
|
115
105
|
});
|
|
116
|
-
var S_ContentTextWrapper = styled_components_1.default.div(
|
|
106
|
+
var S_ContentTextWrapper = styled_components_1.default.div(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n flex: 1;\n margin-left: ", ";\n"], ["\n flex: 1;\n margin-left: ", ";\n"])), function (_a) {
|
|
117
107
|
var theme = _a.theme;
|
|
118
108
|
return theme.spacing.spacingC;
|
|
119
109
|
});
|
|
110
|
+
var S_SeeMoreButton = styled_components_1.default.div(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n margin-left: ", ";\n position: relative;\n opacity: ", ";\n\n ", ":hover & {\n opacity: ", ";\n }\n"], ["\n margin-left: ", ";\n position: relative;\n opacity: ", ";\n\n ", ":hover & {\n opacity: ", ";\n }\n"])), function (_a) {
|
|
111
|
+
var theme = _a.theme;
|
|
112
|
+
return theme.spacing.spacingA;
|
|
113
|
+
}, function (_a) {
|
|
114
|
+
var isContextMenuOpen = _a.isContextMenuOpen;
|
|
115
|
+
return (isContextMenuOpen ? '1' : '0');
|
|
116
|
+
}, S_BasicChatListItem, function (_a) {
|
|
117
|
+
var hoverMode = _a.hoverMode;
|
|
118
|
+
return hoverMode === 'use' && '1';
|
|
119
|
+
});
|
|
120
120
|
exports.default = BasicChatListItem;
|
|
121
121
|
var templateObject_1, templateObject_2, templateObject_3, templateObject_4;
|
|
@@ -83,7 +83,7 @@ function ChatBubbleListItem(_a) {
|
|
|
83
83
|
setIsContextMenuOpen(false);
|
|
84
84
|
};
|
|
85
85
|
return (react_1.default.createElement(react_1.default.Fragment, null,
|
|
86
|
-
react_1.default.createElement(S_ChatBubbleListItem, {
|
|
86
|
+
react_1.default.createElement(S_ChatBubbleListItem, { isMy: isMy, imageMode: imageMode },
|
|
87
87
|
imageMode === 'use' && (react_1.default.createElement(react_1.default.Fragment, null, isTail && !isMy ? (react_1.default.createElement(S_ImageViewWrapper, { isSeller: isSeller },
|
|
88
88
|
react_1.default.createElement(hybrid_1.ImageView, { shapeType: "circular", ratio: "1_1", scaleType: "cover", src: imageSrc, width: 40 }))) : (react_1.default.createElement(hybrid_1.Spacing, { size: "spacing_g", spacingType: "width" })))),
|
|
89
89
|
react_1.default.createElement(S_RightBox, null,
|
|
@@ -99,62 +99,62 @@ function ChatBubbleListItem(_a) {
|
|
|
99
99
|
timeMode === 'use' && timeText && !isMy && (react_1.default.createElement(S_TimeWrapper, null,
|
|
100
100
|
react_1.default.createElement(hybrid_1.Spacing, { size: "spacing_a", spacingType: "width" }),
|
|
101
101
|
react_1.default.createElement(TextLabel_1.TextLabel, { text: timeText, styleTheme: "caption2Regular", colorTheme: "sysTextTertiary", singleLineMode: "use" })))),
|
|
102
|
-
hoverMode === 'use' && !isMy && (react_1.default.createElement(S_SeeMoreButton, { isContextMenuOpen: isContextMenuOpen, ref: contextMenuRef },
|
|
102
|
+
hoverMode === 'use' && !isMy && (react_1.default.createElement(S_SeeMoreButton, { isContextMenuOpen: isContextMenuOpen, hoverMode: hoverMode, ref: contextMenuRef },
|
|
103
103
|
react_1.default.createElement(IconButton_1.IconButton, { fillType: "fill", baseSize: "xsmall", iconFillType: "fill", iconSize: 20, iconName: "ic_more", baseColorKey: "ui_cpnt_button_fill_base_transparent", iconColorKey: "ui_cpnt_button_icon_enabled", onClick: handleMoreButtonClick }))))),
|
|
104
104
|
react_1.default.createElement(Popup_1.PopupProvider, null,
|
|
105
105
|
react_1.default.createElement(Popup_1.Popup, { targetRef: contextMenuRef, isOpen: isContextMenuOpen, placement: "v-auto", wrapperHeight: rect === null || rect === void 0 ? void 0 : rect.height, onClickOutside: function () { return setIsContextMenuOpen(false); } },
|
|
106
106
|
react_1.default.createElement(ContextMenu_1.ContextMenu, null, contextMenuOptionArray === null || contextMenuOptionArray === void 0 ? void 0 : contextMenuOptionArray.map(function (el) { return (react_1.default.createElement(ContextMenuItem_1.ContextMenuItem, { key: el.value, option: el, onClick: handleContextMenuItemClick, state: contextMenuState })); })))))));
|
|
107
107
|
}
|
|
108
|
-
var
|
|
109
|
-
var theme = _a.theme;
|
|
110
|
-
return theme.spacing.spacingB;
|
|
111
|
-
}, function (_a) {
|
|
112
|
-
var theme = _a.theme;
|
|
113
|
-
return theme.spacing.spacingB;
|
|
114
|
-
}, function (_a) {
|
|
115
|
-
var isContextMenuOpen = _a.isContextMenuOpen;
|
|
116
|
-
return (isContextMenuOpen ? 'visible' : 'hidden');
|
|
117
|
-
});
|
|
118
|
-
var MyChatBubbleListItem = (0, styled_components_1.css)(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n margin-right: ", ";\n"], ["\n margin-right: ", ";\n"])), function (_a) {
|
|
108
|
+
var MyChatBubbleListItem = (0, styled_components_1.css)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n margin-right: ", ";\n"], ["\n margin-right: ", ";\n"])), function (_a) {
|
|
119
109
|
var theme = _a.theme;
|
|
120
110
|
return theme.spacing.spacingA;
|
|
121
111
|
});
|
|
122
|
-
var NoImageChatBubbleListItem = (0, styled_components_1.css)(
|
|
112
|
+
var NoImageChatBubbleListItem = (0, styled_components_1.css)(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n margin-left: ", ";\n"], ["\n margin-left: ", ";\n"])), function (_a) {
|
|
123
113
|
var theme = _a.theme;
|
|
124
114
|
return theme.spacing.spacingA;
|
|
125
115
|
});
|
|
126
|
-
var S_ChatBubbleListItem = styled_components_1.default.div(
|
|
127
|
-
var hoverMode = _a.hoverMode;
|
|
128
|
-
return hoverMode === 'use' && 'visible';
|
|
129
|
-
}, function (_a) {
|
|
116
|
+
var S_ChatBubbleListItem = styled_components_1.default.div(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n display: flex;\n height: fit-content;\n max-width: 100%;\n\n ", ";\n ", ";\n"], ["\n display: flex;\n height: fit-content;\n max-width: 100%;\n\n ", ";\n ", ";\n"])), function (_a) {
|
|
130
117
|
var isMy = _a.isMy;
|
|
131
118
|
return isMy && MyChatBubbleListItem;
|
|
132
119
|
}, function (_a) {
|
|
133
120
|
var imageMode = _a.imageMode;
|
|
134
121
|
return imageMode === 'none' && NoImageChatBubbleListItem;
|
|
135
122
|
});
|
|
136
|
-
var ImageViewSeller = (0, styled_components_1.css)(
|
|
123
|
+
var ImageViewSeller = (0, styled_components_1.css)(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n box-shadow: 0 0 0 2px ", " inset;\n"], ["\n box-shadow: 0 0 0 2px ", " inset;\n"])), function (_a) {
|
|
137
124
|
var theme = _a.theme;
|
|
138
125
|
return theme.ui_profile_image_border_brandprimary;
|
|
139
126
|
});
|
|
140
|
-
var ImageViewDefault = (0, styled_components_1.css)(
|
|
127
|
+
var ImageViewDefault = (0, styled_components_1.css)(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n box-shadow: 0 0 0 1px ", " inset;\n"], ["\n box-shadow: 0 0 0 1px ", " inset;\n"])), function (_a) {
|
|
141
128
|
var theme = _a.theme;
|
|
142
129
|
return theme.ui_profile_image_border;
|
|
143
130
|
});
|
|
144
|
-
var S_ImageViewWrapper = styled_components_1.default.div(
|
|
131
|
+
var S_ImageViewWrapper = styled_components_1.default.div(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n border-radius: 50%;\n height: fit-content;\n min-width: fit-content;\n width: fit-content;\n margin-right: ", ";\n position: relative;\n\n &::after {\n content: '';\n box-sizing: border-box;\n border-radius: 50%;\n height: 100%;\n position: absolute;\n top: 0;\n left: 0;\n width: 100%;\n ", ";\n }\n"], ["\n border-radius: 50%;\n height: fit-content;\n min-width: fit-content;\n width: fit-content;\n margin-right: ", ";\n position: relative;\n\n &::after {\n content: '';\n box-sizing: border-box;\n border-radius: 50%;\n height: 100%;\n position: absolute;\n top: 0;\n left: 0;\n width: 100%;\n ", ";\n }\n"])), function (_a) {
|
|
145
132
|
var theme = _a.theme;
|
|
146
133
|
return theme.spacing.spacingB;
|
|
147
134
|
}, function (_a) {
|
|
148
135
|
var isSeller = _a.isSeller;
|
|
149
136
|
return (isSeller ? ImageViewSeller : ImageViewDefault);
|
|
150
137
|
});
|
|
151
|
-
var S_RightBox = styled_components_1.default.div(
|
|
152
|
-
var S_ChatBubbleBox = styled_components_1.default.div(
|
|
153
|
-
var MyChatBubble = (0, styled_components_1.css)(
|
|
154
|
-
var S_ChatBubbleWrapper = styled_components_1.default.div(
|
|
138
|
+
var S_RightBox = styled_components_1.default.div(templateObject_7 || (templateObject_7 = __makeTemplateObject(["\n flex: 1;\n"], ["\n flex: 1;\n"])));
|
|
139
|
+
var S_ChatBubbleBox = styled_components_1.default.div(templateObject_8 || (templateObject_8 = __makeTemplateObject(["\n display: flex;\n justify-content: space-between;\n"], ["\n display: flex;\n justify-content: space-between;\n"])));
|
|
140
|
+
var MyChatBubble = (0, styled_components_1.css)(templateObject_9 || (templateObject_9 = __makeTemplateObject(["\n justify-content: flex-end;\n"], ["\n justify-content: flex-end;\n"])));
|
|
141
|
+
var S_ChatBubbleWrapper = styled_components_1.default.div(templateObject_10 || (templateObject_10 = __makeTemplateObject(["\n flex: 1;\n display: flex;\n\n ", ";\n"], ["\n flex: 1;\n display: flex;\n\n ", ";\n"])), function (_a) {
|
|
155
142
|
var isMy = _a.isMy;
|
|
156
143
|
return isMy && MyChatBubble;
|
|
157
144
|
});
|
|
158
|
-
var S_TimeWrapper = styled_components_1.default.div(
|
|
145
|
+
var S_TimeWrapper = styled_components_1.default.div(templateObject_11 || (templateObject_11 = __makeTemplateObject(["\n align-self: flex-end;\n display: flex;\n"], ["\n align-self: flex-end;\n display: flex;\n"])));
|
|
146
|
+
var S_SeeMoreButton = styled_components_1.default.div(templateObject_12 || (templateObject_12 = __makeTemplateObject(["\n box-sizing: border-box;\n display: flex;\n width: 48px;\n height: 24px;\n min-width: 48px;\n padding-right: ", ";\n margin-top: ", ";\n position: relative;\n opacity: ", ";\n justify-content: right;\n\n ", ":hover & {\n opacity: ", ";\n }\n"], ["\n box-sizing: border-box;\n display: flex;\n width: 48px;\n height: 24px;\n min-width: 48px;\n padding-right: ", ";\n margin-top: ", ";\n position: relative;\n opacity: ", ";\n justify-content: right;\n\n ", ":hover & {\n opacity: ", ";\n }\n"])), function (_a) {
|
|
147
|
+
var theme = _a.theme;
|
|
148
|
+
return theme.spacing.spacingB;
|
|
149
|
+
}, function (_a) {
|
|
150
|
+
var theme = _a.theme;
|
|
151
|
+
return theme.spacing.spacingB;
|
|
152
|
+
}, function (_a) {
|
|
153
|
+
var isContextMenuOpen = _a.isContextMenuOpen;
|
|
154
|
+
return (isContextMenuOpen ? '1' : '0');
|
|
155
|
+
}, S_ChatBubbleListItem, function (_a) {
|
|
156
|
+
var hoverMode = _a.hoverMode;
|
|
157
|
+
return hoverMode === 'use' && '1';
|
|
158
|
+
});
|
|
159
159
|
exports.default = ChatBubbleListItem;
|
|
160
160
|
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;
|
|
@@ -1,7 +1,7 @@
|
|
|
1
|
-
|
|
1
|
+
import React from 'react';
|
|
2
2
|
import type { Props as ChatListProps } from './ChatList';
|
|
3
|
-
declare
|
|
3
|
+
declare const Body: React.ForwardRefExoticComponent<Pick<ChatListProps, "children" | "scrollVisibleType" | "bodyMBtnText" | "bodySpacingMode"> & {
|
|
4
4
|
isSubmitted: boolean;
|
|
5
|
-
|
|
6
|
-
|
|
5
|
+
callBackAfterScrollToBottom: () => void;
|
|
6
|
+
} & React.RefAttributes<HTMLDivElement>>;
|
|
7
7
|
export default Body;
|
|
@@ -30,26 +30,34 @@ var react_1 = __importStar(require("react"));
|
|
|
30
30
|
var styled_components_1 = __importStar(require("styled-components"));
|
|
31
31
|
var MainButton_1 = require("../MainButton");
|
|
32
32
|
var useAutoScrollToBottom_1 = __importDefault(require("./useAutoScrollToBottom"));
|
|
33
|
-
|
|
34
|
-
var scrollVisibleType = _a.scrollVisibleType, children = _a.children, isSubmitted = _a.isSubmitted, bodyMBtnText = _a.bodyMBtnText, bodySpacingMode = _a.bodySpacingMode;
|
|
33
|
+
var Body = react_1.default.forwardRef(function (_a, ref) {
|
|
34
|
+
var scrollVisibleType = _a.scrollVisibleType, children = _a.children, isSubmitted = _a.isSubmitted, bodyMBtnText = _a.bodyMBtnText, bodySpacingMode = _a.bodySpacingMode, callBackAfterScrollToBottom = _a.callBackAfterScrollToBottom;
|
|
35
35
|
var _b = (0, react_1.useState)(false), isButtonShow = _b[0], setIsButtonShow = _b[1];
|
|
36
36
|
var _c = (0, useAutoScrollToBottom_1.default)(), triggerScrollToBottom = _c.triggerScrollToBottom, EndOfList = _c.EndOfList;
|
|
37
|
-
var scrollRef = (0, react_1.useRef)(null);
|
|
38
|
-
var childrenLength = react_1.default.Children.count(children);
|
|
39
37
|
/**
|
|
40
|
-
* @when
|
|
38
|
+
* @when 페이지 진입 시
|
|
41
39
|
* @expected 채팅 리스트의 맨 밑으로 스크롤 내린다.
|
|
42
40
|
* @clear -
|
|
43
41
|
*/
|
|
44
42
|
(0, react_1.useEffect)(function () {
|
|
45
|
-
if (isButtonShow) {
|
|
43
|
+
if (!isButtonShow) {
|
|
44
|
+
triggerScrollToBottom();
|
|
45
|
+
}
|
|
46
|
+
}, [children, isButtonShow, triggerScrollToBottom]);
|
|
47
|
+
/**
|
|
48
|
+
* @when 스크롤을 하고 있지 않은 상황에서 chatMessages가 업데이트 될 때마다
|
|
49
|
+
* @expected 채팅 리스트의 맨 밑으로 스크롤 내린다.
|
|
50
|
+
* @clear -
|
|
51
|
+
*/
|
|
52
|
+
(0, react_1.useEffect)(function () {
|
|
53
|
+
var handleTriggerScroll = function () {
|
|
46
54
|
if (isSubmitted) {
|
|
55
|
+
callBackAfterScrollToBottom();
|
|
47
56
|
triggerScrollToBottom();
|
|
48
57
|
}
|
|
49
|
-
|
|
50
|
-
}
|
|
51
|
-
|
|
52
|
-
}, [childrenLength, isButtonShow, isSubmitted]);
|
|
58
|
+
};
|
|
59
|
+
setTimeout(function () { return handleTriggerScroll(); }, 0);
|
|
60
|
+
}, [children, isButtonShow, isSubmitted, callBackAfterScrollToBottom]);
|
|
53
61
|
var handleClickMBtn = function () {
|
|
54
62
|
triggerScrollToBottom();
|
|
55
63
|
};
|
|
@@ -62,12 +70,12 @@ function Body(_a) {
|
|
|
62
70
|
setIsButtonShow(true);
|
|
63
71
|
};
|
|
64
72
|
return (react_1.default.createElement(S_Body, { bodySpacingMode: bodySpacingMode },
|
|
65
|
-
react_1.default.createElement(S_ChatMessageBox, { id: "chatMessageBox", onScroll: handleScroll,
|
|
73
|
+
react_1.default.createElement(S_ChatMessageBox, { id: "chatMessageBox", onScroll: handleScroll, scrollVisibleType: scrollVisibleType, ref: ref },
|
|
66
74
|
children,
|
|
67
75
|
react_1.default.createElement(EndOfList, null)),
|
|
68
76
|
isButtonShow && (react_1.default.createElement(S_BottomButtonWrapper, null,
|
|
69
77
|
react_1.default.createElement(MainButton_1.MainButton, { text: bodyMBtnText, size: "small", onClick: handleClickMBtn })))));
|
|
70
|
-
}
|
|
78
|
+
});
|
|
71
79
|
var bodySpacing = (0, styled_components_1.css)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n box-sizing: border-box;\n padding-right: ", ";\n padding-left: ", ";\n"], ["\n box-sizing: border-box;\n padding-right: ", ";\n padding-left: ", ";\n"])), function (_a) {
|
|
72
80
|
var theme = _a.theme;
|
|
73
81
|
return theme.spacing.spacingE;
|
|
@@ -96,4 +104,5 @@ var S_BottomButtonWrapper = styled_components_1.default.div(templateObject_6 ||
|
|
|
96
104
|
return theme.spacing.spacingC;
|
|
97
105
|
});
|
|
98
106
|
exports.default = Body;
|
|
107
|
+
Body.displayName = 'Body';
|
|
99
108
|
var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6;
|
|
@@ -41,5 +41,5 @@ export declare type Props = {
|
|
|
41
41
|
onSubmit: (value: string) => void;
|
|
42
42
|
onClickHeaderIBtn1?: () => void;
|
|
43
43
|
};
|
|
44
|
-
declare
|
|
44
|
+
declare const ChatList: React.ForwardRefExoticComponent<Props & React.RefAttributes<HTMLDivElement>>;
|
|
45
45
|
export default ChatList;
|
|
@@ -49,7 +49,7 @@ var baseBackgroundColors = {
|
|
|
49
49
|
translucent: 'ui_cpnt_list_base_area_translucent',
|
|
50
50
|
transparent: 'ui_cpnt_list_base_area_translucent'
|
|
51
51
|
};
|
|
52
|
-
|
|
52
|
+
var ChatList = react_1.default.forwardRef(function (_a, ref) {
|
|
53
53
|
var _b = _a.styleTheme, styleTheme = _b === void 0 ? 'solid' : _b, _c = _a.headerMode, headerMode = _c === void 0 ? 'use' : _c, titleText = _a.titleText, descText = _a.descText, captionText = _a.captionText, _d = _a.titleStyleTheme, titleStyleTheme = _d === void 0 ? 'subTitleBold' : _d, _e = _a.headerDisplayType, headerDisplayType = _e === void 0 ? 'none' : _e, _f = _a.headerIBtn1IconName, headerIBtn1IconName = _f === void 0 ? 'ic_xmark' : _f, _g = _a.headerIBtn1IconFillType, headerIBtn1IconFillType = _g === void 0 ? 'line' : _g, children = _a.children, _h = _a.textFieldState, textFieldState = _h === void 0 ? 'normal' : _h, textFieldHintText = _a.textFieldHintText, textFieldDefaultText = _a.textFieldDefaultText, textFieldMaxLength = _a.textFieldMaxLength, _j = _a.scrollVisibleType, scrollVisibleType = _j === void 0 ? 'moving' : _j, footerChildren = _a.footerChildren, _k = _a.submitIBtnState, submitIBtnState = _k === void 0 ? 'normal' : _k, bodyMBtnText = _a.bodyMBtnText, _l = _a.bodySpacingMode, bodySpacingMode = _l === void 0 ? 'none' : _l, onSubmit = _a.onSubmit, onClickHeaderIBtn1 = _a.onClickHeaderIBtn1, submitIBtnIconName = _a.submitIBtnIconName, submitIBtnIconFillType = _a.submitIBtnIconFillType, _m = _a.footerIBtn1State, footerIBtn1State = _m === void 0 ? 'normal' : _m, footerIBtn1IconName = _a.footerIBtn1IconName, footerIBtn1IconFillType = _a.footerIBtn1IconFillType, _o = _a.footerIBtn1Type, footerIBtn1Type = _o === void 0 ? 'button' : _o, onClickFooterIBtn1 = _a.onClickFooterIBtn1, _p = _a.footerIBtn2State, footerIBtn2State = _p === void 0 ? 'normal' : _p, footerIBtn2IconName = _a.footerIBtn2IconName, footerIBtn2IconFillType = _a.footerIBtn2IconFillType, _q = _a.footerIBtn2Type, footerIBtn2Type = _q === void 0 ? 'button' : _q, onClickFooterIBtn2 = _a.onClickFooterIBtn2, _r = _a.footerIBtn3State, footerIBtn3State = _r === void 0 ? 'normal' : _r, footerIBtn3IconName = _a.footerIBtn3IconName, footerIBtn3IconFillType = _a.footerIBtn3IconFillType, _s = _a.footerIBtn3Type, footerIBtn3Type = _s === void 0 ? 'button' : _s, footerIBtn3Accept = _a.footerIBtn3Accept, onClickFooterIBtn3 = _a.onClickFooterIBtn3;
|
|
54
54
|
var methods = (0, react_hook_form_1.useForm)({
|
|
55
55
|
mode: 'onChange',
|
|
@@ -57,7 +57,17 @@ function ChatList(_a) {
|
|
|
57
57
|
chat: ''
|
|
58
58
|
}
|
|
59
59
|
});
|
|
60
|
-
var reset = methods.reset, handleSubmit = methods.handleSubmit, control = methods.control, _t = methods.formState,
|
|
60
|
+
var reset = methods.reset, handleSubmit = methods.handleSubmit, control = methods.control, _t = methods.formState, isDirty = _t.isDirty, isValid = _t.isValid, isSubmitSuccessful = _t.isSubmitSuccessful;
|
|
61
|
+
/**
|
|
62
|
+
* @when 폼 submit이 성공적으로 완료 되었을 때
|
|
63
|
+
* @expected 폼을 초기화합니다.
|
|
64
|
+
* @clear -
|
|
65
|
+
*/
|
|
66
|
+
(0, react_1.useEffect)(function () {
|
|
67
|
+
if (isSubmitSuccessful) {
|
|
68
|
+
reset();
|
|
69
|
+
}
|
|
70
|
+
}, [isSubmitSuccessful]);
|
|
61
71
|
var inputValue = (0, react_hook_form_1.useWatch)({ name: 'chat', control: control });
|
|
62
72
|
var isSubmitButtonActive = (0, react_1.useMemo)(function () {
|
|
63
73
|
if (!submitIBtnState) {
|
|
@@ -71,20 +81,22 @@ function ChatList(_a) {
|
|
|
71
81
|
return;
|
|
72
82
|
}
|
|
73
83
|
onSubmit(chat);
|
|
74
|
-
|
|
84
|
+
};
|
|
85
|
+
var callBackAfterScrollToBottom = function () {
|
|
86
|
+
reset();
|
|
75
87
|
};
|
|
76
88
|
return (react_1.default.createElement(S_ChatList, { backgroundColor: baseBackgroundColors[styleTheme], id: "chatList" },
|
|
77
89
|
headerMode === 'use' && (react_1.default.createElement(react_1.default.Fragment, null,
|
|
78
90
|
react_1.default.createElement(Header_1.default, { styleTheme: styleTheme, titleText: titleText, descText: descText, captionText: captionText, titleStyleTheme: titleStyleTheme, headerDisplayType: headerDisplayType, headerIBtn1IconName: headerIBtn1IconName, headerIBtn1IconFillType: headerIBtn1IconFillType, onClickHeaderIBtn1: onClickHeaderIBtn1 }),
|
|
79
91
|
react_1.default.createElement(hybrid_1.Divider, null))),
|
|
80
|
-
react_1.default.createElement(Body_1.default, { scrollVisibleType: scrollVisibleType, isSubmitted:
|
|
92
|
+
react_1.default.createElement(Body_1.default, { scrollVisibleType: scrollVisibleType, isSubmitted: isSubmitSuccessful, bodyMBtnText: bodyMBtnText, bodySpacingMode: bodySpacingMode, callBackAfterScrollToBottom: callBackAfterScrollToBottom, ref: ref }, children),
|
|
81
93
|
react_1.default.createElement(hybrid_1.Divider, null),
|
|
82
94
|
react_1.default.createElement(hybrid_1.Spacing, { size: "spacing_d" }),
|
|
83
95
|
react_1.default.createElement(react_hook_form_1.FormProvider, __assign({}, methods),
|
|
84
96
|
react_1.default.createElement("form", { onSubmit: handleSubmit(handleSubmitChat) },
|
|
85
97
|
react_1.default.createElement(Footer_1.default, { textFieldDefaultText: textFieldDefaultText, textFieldHintText: textFieldHintText, textFieldState: textFieldState, textFieldMaxLength: textFieldMaxLength, footerChildren: footerChildren, isSubmitBtnActive: isSubmitButtonActive, submitIBtnIconName: submitIBtnIconName, submitIBtnIconFillType: submitIBtnIconFillType, footerIBtn1State: footerIBtn1State, footerIBtn1IconName: footerIBtn1IconName, footerIBtn1IconFillType: footerIBtn1IconFillType, footerIBtn1Type: footerIBtn1Type, onClickFooterIBtn1: onClickFooterIBtn1, footerIBtn2State: footerIBtn2State, footerIBtn2IconName: footerIBtn2IconName, footerIBtn2IconFillType: footerIBtn2IconFillType, footerIBtn2Type: footerIBtn2Type, onClickFooterIBtn2: onClickFooterIBtn2, footerIBtn3State: footerIBtn3State, footerIBtn3IconName: footerIBtn3IconName, footerIBtn3IconFillType: footerIBtn3IconFillType, footerIBtn3Type: footerIBtn3Type, footerIBtn3Accept: footerIBtn3Accept, onClickFooterIBtn3: onClickFooterIBtn3 }))),
|
|
86
98
|
react_1.default.createElement(hybrid_1.Spacing, { size: "spacing_d" })));
|
|
87
|
-
}
|
|
99
|
+
});
|
|
88
100
|
var S_ChatList = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n background-color: ", ";\n display: flex;\n flex-direction: column;\n height: 100%;\n"], ["\n background-color: ", ";\n display: flex;\n flex-direction: column;\n height: 100%;\n"])), function (_a) {
|
|
89
101
|
var backgroundColor = _a.backgroundColor, theme = _a.theme;
|
|
90
102
|
return theme[backgroundColor];
|
|
@@ -32,11 +32,16 @@ function useAutoScrollToBottom(_a) {
|
|
|
32
32
|
(0, react_1.useEffect)(function () {
|
|
33
33
|
if (scrollRef.current) {
|
|
34
34
|
scrollRef.current.scrollIntoView({ behavior: behavior });
|
|
35
|
+
// NOTE: 스크롤을 빠르게 하는 중에 scrollIntoView시 스크롤 영역만큼 렌더가 안되는 이슈에 대한 임시조치
|
|
36
|
+
setTimeout(function () {
|
|
37
|
+
var _a;
|
|
38
|
+
(_a = scrollRef === null || scrollRef === void 0 ? void 0 : scrollRef.current) === null || _a === void 0 ? void 0 : _a.scrollIntoView({ behavior: behavior });
|
|
39
|
+
}, 100);
|
|
35
40
|
}
|
|
36
41
|
}, [scrollTrigger]);
|
|
37
|
-
|
|
42
|
+
var triggerScrollToBottom = (0, react_1.useCallback)(function () {
|
|
38
43
|
setScrollTrigger(function (prev) { return !prev; });
|
|
39
|
-
}
|
|
44
|
+
}, []);
|
|
40
45
|
function EndOfList() {
|
|
41
46
|
return react_1.default.createElement("li", { style: { listStyle: 'none', height: heightOfEndOfList + "px" }, ref: scrollRef });
|
|
42
47
|
}
|
|
@@ -9,7 +9,7 @@ declare type Props = {
|
|
|
9
9
|
hintText?: TFunctionResult;
|
|
10
10
|
maxHeightItemNumber?: number;
|
|
11
11
|
defaultValue?: PDSValueOption;
|
|
12
|
-
value?: PDSValueOption;
|
|
12
|
+
value?: PDSValueOption | null;
|
|
13
13
|
responsiveMode?: 'none' | 'use';
|
|
14
14
|
size?: 'large' | 'small';
|
|
15
15
|
state?: 'normal' | 'read_only' | 'disabled';
|
|
@@ -37,17 +37,32 @@ function Dropdown(_a) {
|
|
|
37
37
|
// selectionMode = 'single',
|
|
38
38
|
size = _e === void 0 ? 'large' : _e, _f = _a.state, state = _f === void 0 ? 'normal' : _f, valueArray = _a.valueArray, customWidth = _a.customWidth, onChange = _a.onChange;
|
|
39
39
|
var _g = (0, react_1.useState)(false), isFocused = _g[0], setIsFocused = _g[1];
|
|
40
|
-
var _h = (0, react_1.useState)(
|
|
40
|
+
var _h = (0, react_1.useState)(null), selectedValue = _h[0], setSelectedValue = _h[1];
|
|
41
|
+
/**
|
|
42
|
+
* @when value 프롭의 값에 따라
|
|
43
|
+
* @expected 값이 null일 때 드롭다운을 초기화하고, 값이 있다면 해당 값으로 설정해줍니다.
|
|
44
|
+
* @clear -
|
|
45
|
+
*/
|
|
41
46
|
(0, react_1.useEffect)(function () {
|
|
42
|
-
if (
|
|
43
|
-
setSelectedValue(
|
|
47
|
+
if (value === null) {
|
|
48
|
+
setSelectedValue(null);
|
|
49
|
+
return;
|
|
44
50
|
}
|
|
45
|
-
|
|
46
|
-
(0, react_1.useEffect)(function () {
|
|
47
|
-
if (value) {
|
|
51
|
+
if (value !== undefined) {
|
|
48
52
|
setSelectedValue(value);
|
|
49
53
|
}
|
|
50
54
|
}, [value]);
|
|
55
|
+
/**
|
|
56
|
+
* @when defaultValue 프롭에 값이 있을 시
|
|
57
|
+
* @expected Dropdown의 초기값을 설정해줍니다.
|
|
58
|
+
* @clear -
|
|
59
|
+
*/
|
|
60
|
+
(0, react_1.useEffect)(function () {
|
|
61
|
+
if (!defaultValue) {
|
|
62
|
+
return;
|
|
63
|
+
}
|
|
64
|
+
setSelectedValue(defaultValue);
|
|
65
|
+
}, [defaultValue]);
|
|
51
66
|
var handleClick = function () {
|
|
52
67
|
if (state === 'disabled' || state === 'read_only') {
|
|
53
68
|
return;
|
|
@@ -61,7 +76,7 @@ function Dropdown(_a) {
|
|
|
61
76
|
};
|
|
62
77
|
var handleClickOption = function (option) {
|
|
63
78
|
setIsFocused(false);
|
|
64
|
-
if (
|
|
79
|
+
if (value === undefined) {
|
|
65
80
|
setSelectedValue(option);
|
|
66
81
|
}
|
|
67
82
|
if (onChange) {
|
|
@@ -18,7 +18,7 @@ function FilterBar(_a) {
|
|
|
18
18
|
return textArray.map(function (option) {
|
|
19
19
|
var _a;
|
|
20
20
|
return (react_1.default.createElement(S_ChipWrapper, { key: option.value },
|
|
21
|
-
react_1.default.createElement(Chip_1.Chip, { displayType: "filter_single", text: option.text, value:
|
|
21
|
+
react_1.default.createElement(Chip_1.Chip, { displayType: "filter_single", text: option.text, value: value === null || value === void 0 ? void 0 : value.value, id: option.value, onClickChip: function () { return onClickChip && onClickChip(option); }, activeChipId: activeChipId, chipId: (_a = option.value) === null || _a === void 0 ? void 0 : _a.toString() })));
|
|
22
22
|
});
|
|
23
23
|
}
|
|
24
24
|
};
|
|
@@ -108,6 +108,9 @@ var S_VisiblePAppWrapper = styled_components_1.default.div(templateObject_10 ||
|
|
|
108
108
|
var theme = _a.theme;
|
|
109
109
|
return theme.spacing.spacingE;
|
|
110
110
|
});
|
|
111
|
-
var S_ImageViewWrapper = styled_components_1.default.div(templateObject_11 || (templateObject_11 = __makeTemplateObject(["\n height: 32px;\n"], ["\n height: 32px;\n"])))
|
|
111
|
+
var S_ImageViewWrapper = styled_components_1.default.div(templateObject_11 || (templateObject_11 = __makeTemplateObject(["\n border-radius: 50%;\n cursor: ", ";\n height: 32px;\n"], ["\n border-radius: 50%;\n cursor: ", ";\n height: 32px;\n"])), function (_a) {
|
|
112
|
+
var onClick = _a.onClick;
|
|
113
|
+
return (onClick ? 'pointer' : 'default');
|
|
114
|
+
});
|
|
112
115
|
exports.default = UserDesktopNavBar;
|
|
113
116
|
var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6, templateObject_7, templateObject_8, templateObject_9, templateObject_10, templateObject_11;
|
|
@@ -71,26 +71,19 @@ function BasicChatListItem(_a) {
|
|
|
71
71
|
setIsContextMenuOpen(false);
|
|
72
72
|
};
|
|
73
73
|
return (react_1.default.createElement(react_1.default.Fragment, null,
|
|
74
|
-
react_1.default.createElement(S_BasicChatListItem, { colorTheme: colorTheme
|
|
74
|
+
react_1.default.createElement(S_BasicChatListItem, { colorTheme: colorTheme },
|
|
75
75
|
leftImageMode === 'use' && (react_1.default.createElement(S_ImageViewWrapper, null,
|
|
76
76
|
react_1.default.createElement(hybrid_1.ImageView, { shapeType: "circular", ratio: "1_1", scaleType: "cover", src: imageSrc, width: "responsive" }))),
|
|
77
77
|
react_1.default.createElement(TextLabel_1.TextLabel, { text: titleText, styleTheme: "caption1Bold", colorTheme: titleTextColors[colorTheme] }),
|
|
78
78
|
react_1.default.createElement(S_ContentTextWrapper, null,
|
|
79
79
|
react_1.default.createElement(TextLabel_1.TextLabel, { text: contentText, styleTheme: "caption1Regular", colorTheme: "sysTextPrimary", wordBreak: "break_all" })),
|
|
80
|
-
hoverMode === 'use' && (react_1.default.createElement(S_SeeMoreButton, { isContextMenuOpen: isContextMenuOpen, ref: contextMenuRef },
|
|
80
|
+
hoverMode === 'use' && (react_1.default.createElement(S_SeeMoreButton, { isContextMenuOpen: isContextMenuOpen, hoverMode: hoverMode, ref: contextMenuRef },
|
|
81
81
|
react_1.default.createElement(IconButton_1.IconButton, { fillType: "fill", baseSize: "xsmall", iconFillType: "fill", iconSize: 20, iconName: "ic_more", baseColorKey: "ui_cpnt_button_fill_base_transparent", iconColorKey: "ui_cpnt_button_icon_enabled", onClick: handleMoreButtonClick }))),
|
|
82
82
|
react_1.default.createElement(Popup_1.PopupProvider, null,
|
|
83
83
|
react_1.default.createElement(Popup_1.Popup, { targetRef: contextMenuRef, isOpen: isContextMenuOpen, placement: "v-auto", wrapperHeight: rect === null || rect === void 0 ? void 0 : rect.height, onClickOutside: function () { return setIsContextMenuOpen(false); } },
|
|
84
84
|
react_1.default.createElement(ContextMenu_1.ContextMenu, null, contextMenuOptionArray === null || contextMenuOptionArray === void 0 ? void 0 : contextMenuOptionArray.map(function (el) { return (react_1.default.createElement(ContextMenuItem_1.ContextMenuItem, { key: el.value, option: el, onClick: handleContextMenuItemClick, state: contextMenuState })); })))))));
|
|
85
85
|
}
|
|
86
|
-
var
|
|
87
|
-
var theme = _a.theme;
|
|
88
|
-
return theme.spacing.spacingA;
|
|
89
|
-
}, function (_a) {
|
|
90
|
-
var isContextMenuOpen = _a.isContextMenuOpen;
|
|
91
|
-
return (isContextMenuOpen ? 'visible' : 'hidden');
|
|
92
|
-
});
|
|
93
|
-
var S_BasicChatListItem = styled_components_1.default.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n background-color: ", ";\n display: flex;\n height: fit-content;\n max-width: 100%;\n min-height: 24px;\n padding-bottom: ", ";\n padding-left: ", ";\n padding-right: ", ";\n padding-top: ", ";\n\n :hover {\n ", " {\n visibility: ", ";\n }\n }\n"], ["\n background-color: ", ";\n display: flex;\n height: fit-content;\n max-width: 100%;\n min-height: 24px;\n padding-bottom: ", ";\n padding-left: ", ";\n padding-right: ", ";\n padding-top: ", ";\n\n :hover {\n ", " {\n visibility: ", ";\n }\n }\n"])), function (_a) {
|
|
86
|
+
var S_BasicChatListItem = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n background-color: ", ";\n display: flex;\n height: fit-content;\n max-width: 100%;\n min-height: 24px;\n padding-bottom: ", ";\n padding-left: ", ";\n padding-right: ", ";\n padding-top: ", ";\n"], ["\n background-color: ", ";\n display: flex;\n height: fit-content;\n max-width: 100%;\n min-height: 24px;\n padding-bottom: ", ";\n padding-left: ", ";\n padding-right: ", ";\n padding-top: ", ";\n"])), function (_a) {
|
|
94
87
|
var colorTheme = _a.colorTheme, theme = _a.theme;
|
|
95
88
|
return colorTheme && theme[backgroundColorTheme[colorTheme]];
|
|
96
89
|
}, function (_a) {
|
|
@@ -105,17 +98,24 @@ var S_BasicChatListItem = styled_components_1.default.div(templateObject_2 || (t
|
|
|
105
98
|
}, function (_a) {
|
|
106
99
|
var theme = _a.theme;
|
|
107
100
|
return theme.spacing.spacingA;
|
|
108
|
-
}, S_SeeMoreButton, function (_a) {
|
|
109
|
-
var hoverMode = _a.hoverMode;
|
|
110
|
-
return hoverMode === 'use' && 'visible';
|
|
111
101
|
});
|
|
112
|
-
var S_ImageViewWrapper = styled_components_1.default.div(
|
|
102
|
+
var S_ImageViewWrapper = styled_components_1.default.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n height: 24px;\n margin-right: ", ";\n min-width: 24px;\n width: 24px;\n"], ["\n height: 24px;\n margin-right: ", ";\n min-width: 24px;\n width: 24px;\n"])), function (_a) {
|
|
113
103
|
var theme = _a.theme;
|
|
114
104
|
return theme.spacing.spacingB;
|
|
115
105
|
});
|
|
116
|
-
var S_ContentTextWrapper = styled_components_1.default.div(
|
|
106
|
+
var S_ContentTextWrapper = styled_components_1.default.div(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n flex: 1;\n margin-left: ", ";\n"], ["\n flex: 1;\n margin-left: ", ";\n"])), function (_a) {
|
|
117
107
|
var theme = _a.theme;
|
|
118
108
|
return theme.spacing.spacingC;
|
|
119
109
|
});
|
|
110
|
+
var S_SeeMoreButton = styled_components_1.default.div(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n margin-left: ", ";\n position: relative;\n opacity: ", ";\n\n ", ":hover & {\n opacity: ", ";\n }\n"], ["\n margin-left: ", ";\n position: relative;\n opacity: ", ";\n\n ", ":hover & {\n opacity: ", ";\n }\n"])), function (_a) {
|
|
111
|
+
var theme = _a.theme;
|
|
112
|
+
return theme.spacing.spacingA;
|
|
113
|
+
}, function (_a) {
|
|
114
|
+
var isContextMenuOpen = _a.isContextMenuOpen;
|
|
115
|
+
return (isContextMenuOpen ? '1' : '0');
|
|
116
|
+
}, S_BasicChatListItem, function (_a) {
|
|
117
|
+
var hoverMode = _a.hoverMode;
|
|
118
|
+
return hoverMode === 'use' && '1';
|
|
119
|
+
});
|
|
120
120
|
exports.default = BasicChatListItem;
|
|
121
121
|
var templateObject_1, templateObject_2, templateObject_3, templateObject_4;
|
|
@@ -83,7 +83,7 @@ function ChatBubbleListItem(_a) {
|
|
|
83
83
|
setIsContextMenuOpen(false);
|
|
84
84
|
};
|
|
85
85
|
return (react_1.default.createElement(react_1.default.Fragment, null,
|
|
86
|
-
react_1.default.createElement(S_ChatBubbleListItem, {
|
|
86
|
+
react_1.default.createElement(S_ChatBubbleListItem, { isMy: isMy, imageMode: imageMode },
|
|
87
87
|
imageMode === 'use' && (react_1.default.createElement(react_1.default.Fragment, null, isTail && !isMy ? (react_1.default.createElement(S_ImageViewWrapper, { isSeller: isSeller },
|
|
88
88
|
react_1.default.createElement(hybrid_1.ImageView, { shapeType: "circular", ratio: "1_1", scaleType: "cover", src: imageSrc, width: 40 }))) : (react_1.default.createElement(hybrid_1.Spacing, { size: "spacing_g", spacingType: "width" })))),
|
|
89
89
|
react_1.default.createElement(S_RightBox, null,
|
|
@@ -99,62 +99,62 @@ function ChatBubbleListItem(_a) {
|
|
|
99
99
|
timeMode === 'use' && timeText && !isMy && (react_1.default.createElement(S_TimeWrapper, null,
|
|
100
100
|
react_1.default.createElement(hybrid_1.Spacing, { size: "spacing_a", spacingType: "width" }),
|
|
101
101
|
react_1.default.createElement(TextLabel_1.TextLabel, { text: timeText, styleTheme: "caption2Regular", colorTheme: "sysTextTertiary", singleLineMode: "use" })))),
|
|
102
|
-
hoverMode === 'use' && !isMy && (react_1.default.createElement(S_SeeMoreButton, { isContextMenuOpen: isContextMenuOpen, ref: contextMenuRef },
|
|
102
|
+
hoverMode === 'use' && !isMy && (react_1.default.createElement(S_SeeMoreButton, { isContextMenuOpen: isContextMenuOpen, hoverMode: hoverMode, ref: contextMenuRef },
|
|
103
103
|
react_1.default.createElement(IconButton_1.IconButton, { fillType: "fill", baseSize: "xsmall", iconFillType: "fill", iconSize: 20, iconName: "ic_more", baseColorKey: "ui_cpnt_button_fill_base_transparent", iconColorKey: "ui_cpnt_button_icon_enabled", onClick: handleMoreButtonClick }))))),
|
|
104
104
|
react_1.default.createElement(Popup_1.PopupProvider, null,
|
|
105
105
|
react_1.default.createElement(Popup_1.Popup, { targetRef: contextMenuRef, isOpen: isContextMenuOpen, placement: "v-auto", wrapperHeight: rect === null || rect === void 0 ? void 0 : rect.height, onClickOutside: function () { return setIsContextMenuOpen(false); } },
|
|
106
106
|
react_1.default.createElement(ContextMenu_1.ContextMenu, null, contextMenuOptionArray === null || contextMenuOptionArray === void 0 ? void 0 : contextMenuOptionArray.map(function (el) { return (react_1.default.createElement(ContextMenuItem_1.ContextMenuItem, { key: el.value, option: el, onClick: handleContextMenuItemClick, state: contextMenuState })); })))))));
|
|
107
107
|
}
|
|
108
|
-
var
|
|
109
|
-
var theme = _a.theme;
|
|
110
|
-
return theme.spacing.spacingB;
|
|
111
|
-
}, function (_a) {
|
|
112
|
-
var theme = _a.theme;
|
|
113
|
-
return theme.spacing.spacingB;
|
|
114
|
-
}, function (_a) {
|
|
115
|
-
var isContextMenuOpen = _a.isContextMenuOpen;
|
|
116
|
-
return (isContextMenuOpen ? 'visible' : 'hidden');
|
|
117
|
-
});
|
|
118
|
-
var MyChatBubbleListItem = (0, styled_components_1.css)(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n margin-right: ", ";\n"], ["\n margin-right: ", ";\n"])), function (_a) {
|
|
108
|
+
var MyChatBubbleListItem = (0, styled_components_1.css)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n margin-right: ", ";\n"], ["\n margin-right: ", ";\n"])), function (_a) {
|
|
119
109
|
var theme = _a.theme;
|
|
120
110
|
return theme.spacing.spacingA;
|
|
121
111
|
});
|
|
122
|
-
var NoImageChatBubbleListItem = (0, styled_components_1.css)(
|
|
112
|
+
var NoImageChatBubbleListItem = (0, styled_components_1.css)(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n margin-left: ", ";\n"], ["\n margin-left: ", ";\n"])), function (_a) {
|
|
123
113
|
var theme = _a.theme;
|
|
124
114
|
return theme.spacing.spacingA;
|
|
125
115
|
});
|
|
126
|
-
var S_ChatBubbleListItem = styled_components_1.default.div(
|
|
127
|
-
var hoverMode = _a.hoverMode;
|
|
128
|
-
return hoverMode === 'use' && 'visible';
|
|
129
|
-
}, function (_a) {
|
|
116
|
+
var S_ChatBubbleListItem = styled_components_1.default.div(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n display: flex;\n height: fit-content;\n max-width: 100%;\n\n ", ";\n ", ";\n"], ["\n display: flex;\n height: fit-content;\n max-width: 100%;\n\n ", ";\n ", ";\n"])), function (_a) {
|
|
130
117
|
var isMy = _a.isMy;
|
|
131
118
|
return isMy && MyChatBubbleListItem;
|
|
132
119
|
}, function (_a) {
|
|
133
120
|
var imageMode = _a.imageMode;
|
|
134
121
|
return imageMode === 'none' && NoImageChatBubbleListItem;
|
|
135
122
|
});
|
|
136
|
-
var ImageViewSeller = (0, styled_components_1.css)(
|
|
123
|
+
var ImageViewSeller = (0, styled_components_1.css)(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n box-shadow: 0 0 0 2px ", " inset;\n"], ["\n box-shadow: 0 0 0 2px ", " inset;\n"])), function (_a) {
|
|
137
124
|
var theme = _a.theme;
|
|
138
125
|
return theme.ui_profile_image_border_brandprimary;
|
|
139
126
|
});
|
|
140
|
-
var ImageViewDefault = (0, styled_components_1.css)(
|
|
127
|
+
var ImageViewDefault = (0, styled_components_1.css)(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n box-shadow: 0 0 0 1px ", " inset;\n"], ["\n box-shadow: 0 0 0 1px ", " inset;\n"])), function (_a) {
|
|
141
128
|
var theme = _a.theme;
|
|
142
129
|
return theme.ui_profile_image_border;
|
|
143
130
|
});
|
|
144
|
-
var S_ImageViewWrapper = styled_components_1.default.div(
|
|
131
|
+
var S_ImageViewWrapper = styled_components_1.default.div(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n border-radius: 50%;\n height: fit-content;\n min-width: fit-content;\n width: fit-content;\n margin-right: ", ";\n position: relative;\n\n &::after {\n content: '';\n box-sizing: border-box;\n border-radius: 50%;\n height: 100%;\n position: absolute;\n top: 0;\n left: 0;\n width: 100%;\n ", ";\n }\n"], ["\n border-radius: 50%;\n height: fit-content;\n min-width: fit-content;\n width: fit-content;\n margin-right: ", ";\n position: relative;\n\n &::after {\n content: '';\n box-sizing: border-box;\n border-radius: 50%;\n height: 100%;\n position: absolute;\n top: 0;\n left: 0;\n width: 100%;\n ", ";\n }\n"])), function (_a) {
|
|
145
132
|
var theme = _a.theme;
|
|
146
133
|
return theme.spacing.spacingB;
|
|
147
134
|
}, function (_a) {
|
|
148
135
|
var isSeller = _a.isSeller;
|
|
149
136
|
return (isSeller ? ImageViewSeller : ImageViewDefault);
|
|
150
137
|
});
|
|
151
|
-
var S_RightBox = styled_components_1.default.div(
|
|
152
|
-
var S_ChatBubbleBox = styled_components_1.default.div(
|
|
153
|
-
var MyChatBubble = (0, styled_components_1.css)(
|
|
154
|
-
var S_ChatBubbleWrapper = styled_components_1.default.div(
|
|
138
|
+
var S_RightBox = styled_components_1.default.div(templateObject_7 || (templateObject_7 = __makeTemplateObject(["\n flex: 1;\n"], ["\n flex: 1;\n"])));
|
|
139
|
+
var S_ChatBubbleBox = styled_components_1.default.div(templateObject_8 || (templateObject_8 = __makeTemplateObject(["\n display: flex;\n justify-content: space-between;\n"], ["\n display: flex;\n justify-content: space-between;\n"])));
|
|
140
|
+
var MyChatBubble = (0, styled_components_1.css)(templateObject_9 || (templateObject_9 = __makeTemplateObject(["\n justify-content: flex-end;\n"], ["\n justify-content: flex-end;\n"])));
|
|
141
|
+
var S_ChatBubbleWrapper = styled_components_1.default.div(templateObject_10 || (templateObject_10 = __makeTemplateObject(["\n flex: 1;\n display: flex;\n\n ", ";\n"], ["\n flex: 1;\n display: flex;\n\n ", ";\n"])), function (_a) {
|
|
155
142
|
var isMy = _a.isMy;
|
|
156
143
|
return isMy && MyChatBubble;
|
|
157
144
|
});
|
|
158
|
-
var S_TimeWrapper = styled_components_1.default.div(
|
|
145
|
+
var S_TimeWrapper = styled_components_1.default.div(templateObject_11 || (templateObject_11 = __makeTemplateObject(["\n align-self: flex-end;\n display: flex;\n"], ["\n align-self: flex-end;\n display: flex;\n"])));
|
|
146
|
+
var S_SeeMoreButton = styled_components_1.default.div(templateObject_12 || (templateObject_12 = __makeTemplateObject(["\n box-sizing: border-box;\n display: flex;\n width: 48px;\n height: 24px;\n min-width: 48px;\n padding-right: ", ";\n margin-top: ", ";\n position: relative;\n opacity: ", ";\n justify-content: right;\n\n ", ":hover & {\n opacity: ", ";\n }\n"], ["\n box-sizing: border-box;\n display: flex;\n width: 48px;\n height: 24px;\n min-width: 48px;\n padding-right: ", ";\n margin-top: ", ";\n position: relative;\n opacity: ", ";\n justify-content: right;\n\n ", ":hover & {\n opacity: ", ";\n }\n"])), function (_a) {
|
|
147
|
+
var theme = _a.theme;
|
|
148
|
+
return theme.spacing.spacingB;
|
|
149
|
+
}, function (_a) {
|
|
150
|
+
var theme = _a.theme;
|
|
151
|
+
return theme.spacing.spacingB;
|
|
152
|
+
}, function (_a) {
|
|
153
|
+
var isContextMenuOpen = _a.isContextMenuOpen;
|
|
154
|
+
return (isContextMenuOpen ? '1' : '0');
|
|
155
|
+
}, S_ChatBubbleListItem, function (_a) {
|
|
156
|
+
var hoverMode = _a.hoverMode;
|
|
157
|
+
return hoverMode === 'use' && '1';
|
|
158
|
+
});
|
|
159
159
|
exports.default = ChatBubbleListItem;
|
|
160
160
|
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;
|
|
@@ -1,7 +1,7 @@
|
|
|
1
|
-
|
|
1
|
+
import React from 'react';
|
|
2
2
|
import type { Props as ChatListProps } from './ChatList';
|
|
3
|
-
declare
|
|
3
|
+
declare const Body: React.ForwardRefExoticComponent<Pick<ChatListProps, "children" | "scrollVisibleType" | "bodyMBtnText" | "bodySpacingMode"> & {
|
|
4
4
|
isSubmitted: boolean;
|
|
5
|
-
|
|
6
|
-
|
|
5
|
+
callBackAfterScrollToBottom: () => void;
|
|
6
|
+
} & React.RefAttributes<HTMLDivElement>>;
|
|
7
7
|
export default Body;
|
|
@@ -30,49 +30,53 @@ var react_1 = __importStar(require("react"));
|
|
|
30
30
|
var styled_components_1 = __importStar(require("styled-components"));
|
|
31
31
|
var MainButton_1 = require("../MainButton");
|
|
32
32
|
var useAutoScrollToBottom_1 = __importDefault(require("./useAutoScrollToBottom"));
|
|
33
|
-
var
|
|
34
|
-
|
|
35
|
-
var scrollVisibleType = _a.scrollVisibleType, children = _a.children, isSubmitted = _a.isSubmitted, bodyMBtnText = _a.bodyMBtnText, bodySpacingMode = _a.bodySpacingMode;
|
|
33
|
+
var Body = react_1.default.forwardRef(function (_a, ref) {
|
|
34
|
+
var scrollVisibleType = _a.scrollVisibleType, children = _a.children, isSubmitted = _a.isSubmitted, bodyMBtnText = _a.bodyMBtnText, bodySpacingMode = _a.bodySpacingMode, callBackAfterScrollToBottom = _a.callBackAfterScrollToBottom;
|
|
36
35
|
var _b = (0, react_1.useState)(false), isButtonShow = _b[0], setIsButtonShow = _b[1];
|
|
37
36
|
var _c = (0, useAutoScrollToBottom_1.default)(), triggerScrollToBottom = _c.triggerScrollToBottom, EndOfList = _c.EndOfList;
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
|
|
37
|
+
/**
|
|
38
|
+
* @when 페이지 진입 시
|
|
39
|
+
* @expected 채팅 리스트의 맨 밑으로 스크롤 내린다.
|
|
40
|
+
* @clear -
|
|
41
|
+
*/
|
|
42
|
+
(0, react_1.useEffect)(function () {
|
|
43
|
+
if (!isButtonShow) {
|
|
44
|
+
triggerScrollToBottom();
|
|
46
45
|
}
|
|
47
|
-
|
|
48
|
-
};
|
|
46
|
+
}, [children, isButtonShow, triggerScrollToBottom]);
|
|
49
47
|
/**
|
|
50
48
|
* @when 스크롤을 하고 있지 않은 상황에서 chatMessages가 업데이트 될 때마다
|
|
51
49
|
* @expected 채팅 리스트의 맨 밑으로 스크롤 내린다.
|
|
52
50
|
* @clear -
|
|
53
51
|
*/
|
|
54
|
-
(0,
|
|
52
|
+
(0, react_1.useEffect)(function () {
|
|
53
|
+
var handleTriggerScroll = function () {
|
|
54
|
+
if (isSubmitted) {
|
|
55
|
+
callBackAfterScrollToBottom();
|
|
56
|
+
triggerScrollToBottom();
|
|
57
|
+
}
|
|
58
|
+
};
|
|
59
|
+
setTimeout(function () { return handleTriggerScroll(); }, 0);
|
|
60
|
+
}, [children, isButtonShow, isSubmitted, callBackAfterScrollToBottom]);
|
|
55
61
|
var handleClickMBtn = function () {
|
|
56
62
|
triggerScrollToBottom();
|
|
57
63
|
};
|
|
58
|
-
var handleScroll = function () {
|
|
59
|
-
|
|
60
|
-
|
|
61
|
-
|
|
62
|
-
|
|
63
|
-
|
|
64
|
-
return;
|
|
65
|
-
}
|
|
66
|
-
setIsButtonShow(true);
|
|
64
|
+
var handleScroll = function (e) {
|
|
65
|
+
var _a = e.currentTarget, scrollTop = _a.scrollTop, scrollHeight = _a.scrollHeight, clientHeight = _a.clientHeight;
|
|
66
|
+
var BUTTON_SHOW_UP_HEIGHT = 100;
|
|
67
|
+
if (Math.ceil(scrollTop) + clientHeight + BUTTON_SHOW_UP_HEIGHT > scrollHeight) {
|
|
68
|
+
setIsButtonShow(false);
|
|
69
|
+
return;
|
|
67
70
|
}
|
|
71
|
+
setIsButtonShow(true);
|
|
68
72
|
};
|
|
69
73
|
return (react_1.default.createElement(S_Body, { bodySpacingMode: bodySpacingMode },
|
|
70
|
-
react_1.default.createElement(S_ChatMessageBox, { onScroll: handleScroll, ref:
|
|
74
|
+
react_1.default.createElement(S_ChatMessageBox, { onScroll: handleScroll, ref: ref, scrollVisibleType: scrollVisibleType },
|
|
71
75
|
children,
|
|
72
76
|
react_1.default.createElement(EndOfList, null)),
|
|
73
77
|
isButtonShow && (react_1.default.createElement(S_BottomButtonWrapper, null,
|
|
74
78
|
react_1.default.createElement(MainButton_1.MainButton, { text: bodyMBtnText, size: "small", onClick: handleClickMBtn })))));
|
|
75
|
-
}
|
|
79
|
+
});
|
|
76
80
|
var bodySpacing = (0, styled_components_1.css)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n box-sizing: border-box;\n padding-right: ", ";\n padding-left: ", ";\n"], ["\n box-sizing: border-box;\n padding-right: ", ";\n padding-left: ", ";\n"])), function (_a) {
|
|
77
81
|
var theme = _a.theme;
|
|
78
82
|
return theme.spacing.spacingE;
|
|
@@ -101,4 +105,5 @@ var S_BottomButtonWrapper = styled_components_1.default.div(templateObject_6 ||
|
|
|
101
105
|
return theme.spacing.spacingC;
|
|
102
106
|
});
|
|
103
107
|
exports.default = Body;
|
|
108
|
+
Body.displayName = 'Body';
|
|
104
109
|
var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6;
|
|
@@ -41,5 +41,5 @@ export declare type Props = {
|
|
|
41
41
|
onSubmit: (value: string) => void;
|
|
42
42
|
onClickHeaderIBtn1?: () => void;
|
|
43
43
|
};
|
|
44
|
-
declare
|
|
44
|
+
declare const ChatList: React.ForwardRefExoticComponent<Props & React.RefAttributes<HTMLDivElement>>;
|
|
45
45
|
export default ChatList;
|
|
@@ -49,7 +49,7 @@ var baseBackgroundColors = {
|
|
|
49
49
|
translucent: 'ui_cpnt_list_base_area_translucent',
|
|
50
50
|
transparent: 'ui_cpnt_list_base_area_translucent'
|
|
51
51
|
};
|
|
52
|
-
|
|
52
|
+
var ChatList = react_1.default.forwardRef(function (_a, ref) {
|
|
53
53
|
var _b = _a.styleTheme, styleTheme = _b === void 0 ? 'solid' : _b, _c = _a.headerMode, headerMode = _c === void 0 ? 'use' : _c, titleText = _a.titleText, descText = _a.descText, captionText = _a.captionText, _d = _a.titleStyleTheme, titleStyleTheme = _d === void 0 ? 'subTitleBold' : _d, _e = _a.headerDisplayType, headerDisplayType = _e === void 0 ? 'none' : _e, _f = _a.headerIBtn1IconName, headerIBtn1IconName = _f === void 0 ? 'ic_xmark' : _f, _g = _a.headerIBtn1IconFillType, headerIBtn1IconFillType = _g === void 0 ? 'line' : _g, children = _a.children, _h = _a.textFieldState, textFieldState = _h === void 0 ? 'normal' : _h, textFieldHintText = _a.textFieldHintText, textFieldDefaultText = _a.textFieldDefaultText, textFieldMaxLength = _a.textFieldMaxLength, _j = _a.scrollVisibleType, scrollVisibleType = _j === void 0 ? 'moving' : _j, footerChildren = _a.footerChildren, _k = _a.submitIBtnState, submitIBtnState = _k === void 0 ? 'normal' : _k, bodyMBtnText = _a.bodyMBtnText, _l = _a.bodySpacingMode, bodySpacingMode = _l === void 0 ? 'none' : _l, onSubmit = _a.onSubmit, onClickHeaderIBtn1 = _a.onClickHeaderIBtn1, submitIBtnIconName = _a.submitIBtnIconName, submitIBtnIconFillType = _a.submitIBtnIconFillType, _m = _a.footerIBtn1State, footerIBtn1State = _m === void 0 ? 'normal' : _m, footerIBtn1IconName = _a.footerIBtn1IconName, footerIBtn1IconFillType = _a.footerIBtn1IconFillType, _o = _a.footerIBtn1Type, footerIBtn1Type = _o === void 0 ? 'button' : _o, onClickFooterIBtn1 = _a.onClickFooterIBtn1, _p = _a.footerIBtn2State, footerIBtn2State = _p === void 0 ? 'normal' : _p, footerIBtn2IconName = _a.footerIBtn2IconName, footerIBtn2IconFillType = _a.footerIBtn2IconFillType, _q = _a.footerIBtn2Type, footerIBtn2Type = _q === void 0 ? 'button' : _q, onClickFooterIBtn2 = _a.onClickFooterIBtn2, _r = _a.footerIBtn3State, footerIBtn3State = _r === void 0 ? 'normal' : _r, footerIBtn3IconName = _a.footerIBtn3IconName, footerIBtn3IconFillType = _a.footerIBtn3IconFillType, _s = _a.footerIBtn3Type, footerIBtn3Type = _s === void 0 ? 'button' : _s, footerIBtn3Accept = _a.footerIBtn3Accept, onClickFooterIBtn3 = _a.onClickFooterIBtn3;
|
|
54
54
|
var methods = (0, react_hook_form_1.useForm)({
|
|
55
55
|
mode: 'onChange',
|
|
@@ -57,7 +57,17 @@ function ChatList(_a) {
|
|
|
57
57
|
chat: ''
|
|
58
58
|
}
|
|
59
59
|
});
|
|
60
|
-
var reset = methods.reset, handleSubmit = methods.handleSubmit, control = methods.control, _t = methods.formState,
|
|
60
|
+
var reset = methods.reset, handleSubmit = methods.handleSubmit, control = methods.control, _t = methods.formState, isValid = _t.isValid, isDirty = _t.isDirty, isSubmitSuccessful = _t.isSubmitSuccessful;
|
|
61
|
+
/**
|
|
62
|
+
* @when 폼 제출에 성공했을 시
|
|
63
|
+
* @expected 폼을 초기화합니다.
|
|
64
|
+
* @clear -
|
|
65
|
+
*/
|
|
66
|
+
(0, react_1.useEffect)(function () {
|
|
67
|
+
if (isSubmitSuccessful) {
|
|
68
|
+
reset();
|
|
69
|
+
}
|
|
70
|
+
}, [isSubmitSuccessful]);
|
|
61
71
|
var inputValue = (0, react_hook_form_1.useWatch)({ name: 'chat', control: control });
|
|
62
72
|
var isSubmitButtonActive = (0, react_1.useMemo)(function () {
|
|
63
73
|
if (!submitIBtnState) {
|
|
@@ -71,20 +81,22 @@ function ChatList(_a) {
|
|
|
71
81
|
return;
|
|
72
82
|
}
|
|
73
83
|
onSubmit(chat);
|
|
74
|
-
|
|
84
|
+
};
|
|
85
|
+
var callBackAfterScrollToBottom = function () {
|
|
86
|
+
reset();
|
|
75
87
|
};
|
|
76
88
|
return (react_1.default.createElement(S_ChatList, { backgroundColor: baseBackgroundColors[styleTheme], id: "chatList" },
|
|
77
89
|
headerMode === 'use' && (react_1.default.createElement(react_1.default.Fragment, null,
|
|
78
90
|
react_1.default.createElement(Header_1.default, { styleTheme: styleTheme, titleText: titleText, descText: descText, captionText: captionText, titleStyleTheme: titleStyleTheme, headerDisplayType: headerDisplayType, headerIBtn1IconName: headerIBtn1IconName, headerIBtn1IconFillType: headerIBtn1IconFillType, onClickHeaderIBtn1: onClickHeaderIBtn1 }),
|
|
79
91
|
react_1.default.createElement(hybrid_1.Divider, null))),
|
|
80
|
-
react_1.default.createElement(Body_1.default, { scrollVisibleType: scrollVisibleType, isSubmitted:
|
|
92
|
+
react_1.default.createElement(Body_1.default, { scrollVisibleType: scrollVisibleType, isSubmitted: isSubmitSuccessful, bodyMBtnText: bodyMBtnText, bodySpacingMode: bodySpacingMode, callBackAfterScrollToBottom: callBackAfterScrollToBottom, ref: ref }, children),
|
|
81
93
|
react_1.default.createElement(hybrid_1.Divider, null),
|
|
82
94
|
react_1.default.createElement(hybrid_1.Spacing, { size: "spacing_d" }),
|
|
83
95
|
react_1.default.createElement(react_hook_form_1.FormProvider, __assign({}, methods),
|
|
84
96
|
react_1.default.createElement("form", { onSubmit: handleSubmit(handleSubmitChat) },
|
|
85
97
|
react_1.default.createElement(Footer_1.default, { textFieldDefaultText: textFieldDefaultText, textFieldHintText: textFieldHintText, textFieldState: textFieldState, textFieldMaxLength: textFieldMaxLength, footerChildren: footerChildren, isSubmitBtnActive: isSubmitButtonActive, submitIBtnIconName: submitIBtnIconName, submitIBtnIconFillType: submitIBtnIconFillType, footerIBtn1State: footerIBtn1State, footerIBtn1IconName: footerIBtn1IconName, footerIBtn1IconFillType: footerIBtn1IconFillType, footerIBtn1Type: footerIBtn1Type, onClickFooterIBtn1: onClickFooterIBtn1, footerIBtn2State: footerIBtn2State, footerIBtn2IconName: footerIBtn2IconName, footerIBtn2IconFillType: footerIBtn2IconFillType, footerIBtn2Type: footerIBtn2Type, onClickFooterIBtn2: onClickFooterIBtn2, footerIBtn3State: footerIBtn3State, footerIBtn3IconName: footerIBtn3IconName, footerIBtn3IconFillType: footerIBtn3IconFillType, footerIBtn3Type: footerIBtn3Type, footerIBtn3Accept: footerIBtn3Accept, onClickFooterIBtn3: onClickFooterIBtn3 }))),
|
|
86
98
|
react_1.default.createElement(hybrid_1.Spacing, { size: "spacing_d" })));
|
|
87
|
-
}
|
|
99
|
+
});
|
|
88
100
|
var S_ChatList = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n background-color: ", ";\n display: flex;\n flex-direction: column;\n height: 100%;\n"], ["\n background-color: ", ";\n display: flex;\n flex-direction: column;\n height: 100%;\n"])), function (_a) {
|
|
89
101
|
var backgroundColor = _a.backgroundColor, theme = _a.theme;
|
|
90
102
|
return theme[backgroundColor];
|
|
@@ -32,11 +32,16 @@ function useAutoScrollToBottom(_a) {
|
|
|
32
32
|
(0, react_1.useEffect)(function () {
|
|
33
33
|
if (scrollRef.current) {
|
|
34
34
|
scrollRef.current.scrollIntoView({ behavior: behavior });
|
|
35
|
+
// NOTE: 스크롤을 빠르게 하는 중에 scrollIntoView시 스크롤 영역만큼 렌더가 안되는 이슈에 대한 임시조치
|
|
36
|
+
setTimeout(function () {
|
|
37
|
+
var _a;
|
|
38
|
+
(_a = scrollRef === null || scrollRef === void 0 ? void 0 : scrollRef.current) === null || _a === void 0 ? void 0 : _a.scrollIntoView({ behavior: behavior });
|
|
39
|
+
}, 100);
|
|
35
40
|
}
|
|
36
41
|
}, [scrollTrigger]);
|
|
37
|
-
|
|
42
|
+
var triggerScrollToBottom = (0, react_1.useCallback)(function () {
|
|
38
43
|
setScrollTrigger(function (prev) { return !prev; });
|
|
39
|
-
}
|
|
44
|
+
}, []);
|
|
40
45
|
function EndOfList() {
|
|
41
46
|
return react_1.default.createElement("li", { style: { listStyle: 'none', height: heightOfEndOfList + "px" }, ref: scrollRef });
|
|
42
47
|
}
|
|
@@ -7,7 +7,7 @@ declare type DropDownValues = PDSValueOption & {
|
|
|
7
7
|
declare type Props = {
|
|
8
8
|
colorTheme?: 'none' | 'dark' | 'white';
|
|
9
9
|
defaultValue?: PDSValueOption;
|
|
10
|
-
value?: PDSValueOption;
|
|
10
|
+
value?: PDSValueOption | null;
|
|
11
11
|
hintText?: TFunctionResult;
|
|
12
12
|
maxHeightItemNumber?: number;
|
|
13
13
|
responsiveMode?: 'none' | 'use';
|
|
@@ -37,17 +37,32 @@ function Dropdown(_a) {
|
|
|
37
37
|
// selectionMode = 'single',
|
|
38
38
|
size = _e === void 0 ? 'large' : _e, _f = _a.state, state = _f === void 0 ? 'normal' : _f, valueArray = _a.valueArray, customWidth = _a.customWidth, onChange = _a.onChange;
|
|
39
39
|
var _g = (0, react_1.useState)(false), isFocused = _g[0], setIsFocused = _g[1];
|
|
40
|
-
var _h = (0, react_1.useState)(
|
|
40
|
+
var _h = (0, react_1.useState)(null), selectedValue = _h[0], setSelectedValue = _h[1];
|
|
41
|
+
/**
|
|
42
|
+
* @when value 프롭의 값에 따라
|
|
43
|
+
* @expected 값이 null일 때 드롭다운을 초기화하고, 값이 있다면 해당 값으로 설정해줍니다.
|
|
44
|
+
* @clear -
|
|
45
|
+
*/
|
|
41
46
|
(0, react_1.useEffect)(function () {
|
|
42
|
-
if (
|
|
43
|
-
setSelectedValue(
|
|
47
|
+
if (value === null) {
|
|
48
|
+
setSelectedValue(null);
|
|
49
|
+
return;
|
|
44
50
|
}
|
|
45
|
-
|
|
46
|
-
(0, react_1.useEffect)(function () {
|
|
47
|
-
if (value) {
|
|
51
|
+
if (value !== undefined) {
|
|
48
52
|
setSelectedValue(value);
|
|
49
53
|
}
|
|
50
54
|
}, [value]);
|
|
55
|
+
/**
|
|
56
|
+
* @when defaultValue 프롭에 값이 있을 시
|
|
57
|
+
* @expected Dropdown의 초기값을 설정해줍니다.
|
|
58
|
+
* @clear -
|
|
59
|
+
*/
|
|
60
|
+
(0, react_1.useEffect)(function () {
|
|
61
|
+
if (!defaultValue) {
|
|
62
|
+
return;
|
|
63
|
+
}
|
|
64
|
+
setSelectedValue(defaultValue);
|
|
65
|
+
}, [defaultValue]);
|
|
51
66
|
var handleClick = function () {
|
|
52
67
|
if (state === 'disabled' || state === 'read_only') {
|
|
53
68
|
return;
|
|
@@ -61,7 +76,7 @@ function Dropdown(_a) {
|
|
|
61
76
|
};
|
|
62
77
|
var handleClickOption = function (option) {
|
|
63
78
|
setIsFocused(false);
|
|
64
|
-
if (
|
|
79
|
+
if (value === undefined) {
|
|
65
80
|
setSelectedValue(option);
|
|
66
81
|
}
|
|
67
82
|
if (onChange) {
|
package/package.json
CHANGED
package/release-note.md
CHANGED
|
@@ -1,8 +1,8 @@
|
|
|
1
1
|
# PDS-DEV-KIT-WEB Release Notes
|
|
2
|
-
## [v1.4.
|
|
2
|
+
## [v1.4.45]
|
|
3
3
|
|
|
4
|
-
###
|
|
5
|
-
*
|
|
6
|
-
*
|
|
7
|
-
*
|
|
8
|
-
*
|
|
4
|
+
### Component
|
|
5
|
+
* Dropdown
|
|
6
|
+
* value값이 undefined일 때와 null일 때를 구분할 수 있도록 수정
|
|
7
|
+
* FilterBar
|
|
8
|
+
* chip의 value값이 false나 null일때도 잘 넘겨줄 수 있도록 수정
|
|
@@ -1,11 +0,0 @@
|
|
|
1
|
-
"use strict";
|
|
2
|
-
Object.defineProperty(exports, "__esModule", { value: true });
|
|
3
|
-
var react_1 = require("react");
|
|
4
|
-
function useTimeout(_a, delay) {
|
|
5
|
-
var callback = _a.callback, target = _a.target;
|
|
6
|
-
(0, react_1.useEffect)(function () {
|
|
7
|
-
var timeout = setTimeout(function () { return callback(); }, delay);
|
|
8
|
-
return function () { return clearTimeout(timeout); };
|
|
9
|
-
}, [target]);
|
|
10
|
-
}
|
|
11
|
-
exports.default = useTimeout;
|