@vendorflow/components 2.0.41 → 2.0.42
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.
|
@@ -77,23 +77,45 @@ var DefaultLoader = (0, react_2.forwardRef)(function (_a, ref) {
|
|
|
77
77
|
(0, react_1.jsx)(material_1.CircularProgress, { size: "1.5rem", disableShrink: true })));
|
|
78
78
|
});
|
|
79
79
|
function useInfiniteScroll(_a) {
|
|
80
|
-
var _b, _c;
|
|
80
|
+
var _b, _c, _d, _e;
|
|
81
81
|
var scrollParent = _a.scrollParent, scrollBody = _a.scrollBody, isLoading = _a.isLoading, isFetching = _a.isFetching, isReverse = _a.isReverse, hasNextPage = _a.hasNextPage, fetchNextPage = _a.fetchNextPage;
|
|
82
82
|
var prevPosition = (0, react_2.useRef)();
|
|
83
83
|
var observer = (0, react_2.useRef)();
|
|
84
|
-
var
|
|
84
|
+
var _f = __read((0, react_2.useState)(false), 2), isScrollInit = _f[0], setScrollInit = _f[1];
|
|
85
|
+
var _g = __read((0, react_2.useState)(false), 2), isScrollLoad = _g[0], setScrollLoad = _g[1];
|
|
85
86
|
var hasScrollbar = (0, react_2.useMemo)(function () {
|
|
86
87
|
if (scrollParent.current && scrollBody.current) {
|
|
87
88
|
return scrollBody.current.clientHeight > scrollParent.current.clientHeight;
|
|
88
89
|
}
|
|
89
90
|
return false;
|
|
90
91
|
}, [(_b = scrollParent.current) === null || _b === void 0 ? void 0 : _b.clientHeight, (_c = scrollBody.current) === null || _c === void 0 ? void 0 : _c.clientHeight]);
|
|
92
|
+
// Ensures that when the chat initializes, it will scroll to the bottom
|
|
91
93
|
(0, react_2.useEffect)(function () {
|
|
92
94
|
if (!isLoading && hasScrollbar) {
|
|
93
95
|
prevPosition.current = null;
|
|
96
|
+
setScrollLoad(false);
|
|
94
97
|
scrollToStart();
|
|
95
98
|
}
|
|
96
99
|
}, [isLoading, hasScrollbar]);
|
|
100
|
+
// If a fetch happens that was not started by a scroll action (aka fetchNextPage),
|
|
101
|
+
// then this will track the prevPosition
|
|
102
|
+
(0, react_2.useEffect)(function () {
|
|
103
|
+
if (!isScrollLoad && scrollBody.current && isFetching) {
|
|
104
|
+
prevPosition.current = scrollBody.current.clientHeight;
|
|
105
|
+
}
|
|
106
|
+
}, [isFetching, isScrollLoad, (_d = scrollBody.current) === null || _d === void 0 ? void 0 : _d.clientHeight]);
|
|
107
|
+
// This will potentially scroll the page to the start when the page loads new data that did not
|
|
108
|
+
// originate from a fetchNextPage action
|
|
109
|
+
(0, react_2.useEffect)(function () {
|
|
110
|
+
if (!isScrollLoad &&
|
|
111
|
+
isReverse &&
|
|
112
|
+
scrollBody.current &&
|
|
113
|
+
prevPosition.current != null &&
|
|
114
|
+
scrollBody.current.clientHeight - prevPosition.current <= 200) {
|
|
115
|
+
prevPosition.current = null;
|
|
116
|
+
scrollToStart();
|
|
117
|
+
}
|
|
118
|
+
}, [isScrollLoad, (_e = scrollBody.current) === null || _e === void 0 ? void 0 : _e.clientHeight]);
|
|
97
119
|
function scrollToStart() {
|
|
98
120
|
var _a;
|
|
99
121
|
var scrollHeight = (scrollBody.current || { scrollHeight: 0 }).scrollHeight;
|
|
@@ -117,19 +139,21 @@ function useInfiniteScroll(_a) {
|
|
|
117
139
|
}
|
|
118
140
|
// load the next page
|
|
119
141
|
fetchNextPage();
|
|
142
|
+
setScrollLoad(true);
|
|
120
143
|
}
|
|
121
144
|
}, {
|
|
122
145
|
root: (scrollParent === null || scrollParent === void 0 ? void 0 : scrollParent.current) || null,
|
|
123
146
|
threshold: 1.0,
|
|
124
147
|
});
|
|
125
148
|
if (node) {
|
|
126
|
-
if (isReverse && scrollParent.current && prevPosition.current != null) {
|
|
149
|
+
if (isReverse && scrollParent.current && prevPosition.current != null && isScrollLoad) {
|
|
127
150
|
// If we had a prev position, then we want to scroll to it
|
|
128
151
|
scrollParent.current.scrollTo(0, scrollBody.current.clientHeight - prevPosition.current);
|
|
129
152
|
prevPosition.current = null;
|
|
153
|
+
setScrollLoad(false);
|
|
130
154
|
}
|
|
131
155
|
observer.current.observe(node);
|
|
132
156
|
}
|
|
133
|
-
}, [isLoading, isFetching, isReverse, hasNextPage, fetchNextPage, scrollParent, scrollBody, isScrollInit]);
|
|
157
|
+
}, [isLoading, isFetching, isReverse, hasNextPage, fetchNextPage, scrollParent, scrollBody, isScrollInit, isScrollLoad]);
|
|
134
158
|
}
|
|
135
159
|
var templateObject_1, templateObject_2, templateObject_3, templateObject_4;
|
|
@@ -89,8 +89,11 @@ function ChatInterface() {
|
|
|
89
89
|
}
|
|
90
90
|
function handleSend(message) {
|
|
91
91
|
setSubmitting(true);
|
|
92
|
+
setFetching(true);
|
|
92
93
|
return new Promise(function (resolve) {
|
|
93
94
|
setTimeout(function () {
|
|
95
|
+
setSubmitting(false);
|
|
96
|
+
setFetching(false);
|
|
94
97
|
setMessages(__spreadArray([
|
|
95
98
|
{
|
|
96
99
|
id: generateId(),
|
|
@@ -100,12 +103,11 @@ function ChatInterface() {
|
|
|
100
103
|
content: message,
|
|
101
104
|
}
|
|
102
105
|
], __read(messages), false));
|
|
103
|
-
setSubmitting(false);
|
|
104
106
|
resolve(true);
|
|
105
107
|
}, 500);
|
|
106
108
|
});
|
|
107
109
|
}
|
|
108
|
-
return ((0, react_1.jsx)("div", { css: (0, react_1.css)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n border: 1px solid #ededed;\n height:
|
|
110
|
+
return ((0, react_1.jsx)("div", { css: (0, react_1.css)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n border: 1px solid #ededed;\n height: 30rem;\n "], ["\n border: 1px solid #ededed;\n height: 30rem;\n "]))) },
|
|
109
111
|
(0, react_1.jsx)(ChatInterface_1.default, { userId: "user1", messages: messages, handleSend: handleSend, fetchNextPage: loadMore, hasNextPage: hasMore, isLoading: isLoading, isFetching: isFetching, isSubmitting: isSubmitting })));
|
|
110
112
|
}
|
|
111
113
|
exports.ChatInterface = ChatInterface;
|