@vendorflow/components 2.0.35 → 2.0.39
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,14 +77,26 @@ 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
81
|
var scrollParent = _a.scrollParent, scrollBody = _a.scrollBody, isLoading = _a.isLoading, isFetching = _a.isFetching, isReverse = _a.isReverse, hasNextPage = _a.hasNextPage, fetchNextPage = _a.fetchNextPage;
|
|
81
82
|
var prevPosition = (0, react_2.useRef)();
|
|
82
83
|
var observer = (0, react_2.useRef)();
|
|
84
|
+
var hasScrollbar = (0, react_2.useMemo)(function () {
|
|
85
|
+
if (scrollParent.current && scrollBody.current) {
|
|
86
|
+
return scrollBody.current.clientHeight > scrollParent.current.clientHeight;
|
|
87
|
+
}
|
|
88
|
+
return false;
|
|
89
|
+
}, [(_b = scrollParent.current) === null || _b === void 0 ? void 0 : _b.clientHeight, (_c = scrollBody.current) === null || _c === void 0 ? void 0 : _c.clientHeight]);
|
|
83
90
|
(0, react_2.useEffect)(function () {
|
|
84
|
-
|
|
91
|
+
var _a, _b;
|
|
92
|
+
if (!isLoading && hasScrollbar) {
|
|
93
|
+
console.log('scrolling to start!');
|
|
94
|
+
console.log('scroll parent height: ', (_a = scrollParent.current) === null || _a === void 0 ? void 0 : _a.clientHeight);
|
|
95
|
+
console.log('scroll body height: ', (_b = scrollBody.current) === null || _b === void 0 ? void 0 : _b.clientHeight);
|
|
96
|
+
prevPosition.current = null;
|
|
85
97
|
scrollToStart();
|
|
86
98
|
}
|
|
87
|
-
}, [isLoading]);
|
|
99
|
+
}, [isLoading, hasScrollbar]);
|
|
88
100
|
function scrollToStart() {
|
|
89
101
|
var _a;
|
|
90
102
|
var scrollHeight = (scrollBody.current || { scrollHeight: 0 }).scrollHeight;
|
|
@@ -101,9 +113,10 @@ function useInfiniteScroll(_a) {
|
|
|
101
113
|
}
|
|
102
114
|
observer.current = new IntersectionObserver(function (entries) {
|
|
103
115
|
if (entries[0].isIntersecting && hasNextPage && fetchNextPage) {
|
|
104
|
-
if (scrollBody.current && isReverse) {
|
|
116
|
+
if (scrollBody.current && isReverse && hasScrollbar) {
|
|
105
117
|
// save the last element, so that we can scroll to it after the new data loads in
|
|
106
118
|
prevPosition.current = scrollBody.current.clientHeight;
|
|
119
|
+
console.log('saving prev position: ', prevPosition.current);
|
|
107
120
|
}
|
|
108
121
|
// load the next page
|
|
109
122
|
fetchNextPage();
|
|
@@ -114,12 +127,13 @@ function useInfiniteScroll(_a) {
|
|
|
114
127
|
});
|
|
115
128
|
if (node) {
|
|
116
129
|
if (isReverse && scrollParent.current && prevPosition.current != null) {
|
|
130
|
+
console.log('scrolling to prev position: ', prevPosition.current);
|
|
117
131
|
// If we had a prev position, then we want to scroll to it
|
|
118
132
|
scrollParent.current.scrollTo(0, scrollBody.current.clientHeight - prevPosition.current);
|
|
119
133
|
prevPosition.current = null;
|
|
120
134
|
}
|
|
121
135
|
observer.current.observe(node);
|
|
122
136
|
}
|
|
123
|
-
}, [isLoading, isFetching, isReverse, hasNextPage, fetchNextPage, scrollParent, scrollBody]);
|
|
137
|
+
}, [isLoading, isFetching, isReverse, hasNextPage, fetchNextPage, scrollParent, scrollBody, hasScrollbar]);
|
|
124
138
|
}
|
|
125
139
|
var templateObject_1, templateObject_2, templateObject_3, templateObject_4;
|
|
@@ -48,57 +48,7 @@ function ChatInterface() {
|
|
|
48
48
|
var _d = __read((0, react_2.useState)([]), 2), messages = _d[0], setMessages = _d[1];
|
|
49
49
|
var _e = __read((0, react_2.useState)(true), 2), hasMore = _e[0], setHasMore = _e[1];
|
|
50
50
|
(0, react_2.useEffect)(function () {
|
|
51
|
-
setMessages(
|
|
52
|
-
{
|
|
53
|
-
id: generateId(),
|
|
54
|
-
userId: 'user1',
|
|
55
|
-
username: 'Socorro Aguilar',
|
|
56
|
-
timestamp: generateTimestamp(),
|
|
57
|
-
content: 'Thanks!',
|
|
58
|
-
},
|
|
59
|
-
{
|
|
60
|
-
id: generateId(),
|
|
61
|
-
userId: 'user1',
|
|
62
|
-
username: 'Socorro Aguilar',
|
|
63
|
-
timestamp: generateTimestamp(),
|
|
64
|
-
content: 'Yeah, that date works perfectly!',
|
|
65
|
-
},
|
|
66
|
-
{
|
|
67
|
-
id: generateId(),
|
|
68
|
-
userId: 'user2',
|
|
69
|
-
username: 'Greg Bujak',
|
|
70
|
-
timestamp: generateTimestamp(),
|
|
71
|
-
content: "If that doesn't work, then just let me know which days you need loads for.",
|
|
72
|
-
},
|
|
73
|
-
{
|
|
74
|
-
id: generateId(),
|
|
75
|
-
userId: 'user2',
|
|
76
|
-
username: 'Greg Bujak',
|
|
77
|
-
timestamp: generateTimestamp(),
|
|
78
|
-
content: 'Friday the 13th.',
|
|
79
|
-
},
|
|
80
|
-
{
|
|
81
|
-
id: generateId(),
|
|
82
|
-
userId: 'user1',
|
|
83
|
-
username: 'Socorro Aguilar',
|
|
84
|
-
timestamp: generateTimestamp(),
|
|
85
|
-
content: 'Possibly, what day?',
|
|
86
|
-
},
|
|
87
|
-
{
|
|
88
|
-
id: generateId(),
|
|
89
|
-
userId: 'user2',
|
|
90
|
-
username: 'Greg Bujak',
|
|
91
|
-
timestamp: generateTimestamp(),
|
|
92
|
-
content: 'Yeah, are you interested in a load going from Long Beach, CA to Modesto, CA?',
|
|
93
|
-
},
|
|
94
|
-
{
|
|
95
|
-
id: generateId(),
|
|
96
|
-
userId: 'user1',
|
|
97
|
-
username: 'Socorro Aguilar',
|
|
98
|
-
timestamp: generateTimestamp(),
|
|
99
|
-
content: 'Do you have a load for me?',
|
|
100
|
-
},
|
|
101
|
-
]);
|
|
51
|
+
setMessages(new Array(5).fill(null).map(generateMessage));
|
|
102
52
|
setLoading(false);
|
|
103
53
|
setFetching(false);
|
|
104
54
|
}, []);
|
|
@@ -108,33 +58,34 @@ function ChatInterface() {
|
|
|
108
58
|
function generateId() {
|
|
109
59
|
return short_uuid_1.default.generate();
|
|
110
60
|
}
|
|
61
|
+
function generateMessage() {
|
|
62
|
+
var user = faker_1.default.random.arrayElement([
|
|
63
|
+
{
|
|
64
|
+
id: 'user1',
|
|
65
|
+
name: 'Socorro Aguilar',
|
|
66
|
+
},
|
|
67
|
+
{
|
|
68
|
+
id: 'user2',
|
|
69
|
+
name: 'Greg Bujak',
|
|
70
|
+
},
|
|
71
|
+
]);
|
|
72
|
+
return {
|
|
73
|
+
id: generateId(),
|
|
74
|
+
userId: user.id,
|
|
75
|
+
username: user.name,
|
|
76
|
+
timestamp: generateTimestamp(),
|
|
77
|
+
content: faker_1.default.lorem.sentence(5, 2),
|
|
78
|
+
};
|
|
79
|
+
}
|
|
111
80
|
function generateMessagePage() {
|
|
112
|
-
return new Array(10).fill(null).map(
|
|
113
|
-
var user = faker_1.default.random.arrayElement([
|
|
114
|
-
{
|
|
115
|
-
id: 'user1',
|
|
116
|
-
name: 'Socorro Aguilar',
|
|
117
|
-
},
|
|
118
|
-
{
|
|
119
|
-
id: 'user2',
|
|
120
|
-
name: 'Greg Bujak',
|
|
121
|
-
},
|
|
122
|
-
]);
|
|
123
|
-
return {
|
|
124
|
-
id: generateId(),
|
|
125
|
-
userId: user.id,
|
|
126
|
-
username: user.name,
|
|
127
|
-
timestamp: generateTimestamp(),
|
|
128
|
-
content: faker_1.default.lorem.sentence(5, 2),
|
|
129
|
-
};
|
|
130
|
-
});
|
|
81
|
+
return new Array(10).fill(null).map(generateMessage);
|
|
131
82
|
}
|
|
132
83
|
function loadMore() {
|
|
133
84
|
setFetching(true);
|
|
134
85
|
setTimeout(function () {
|
|
135
86
|
setMessages(__spreadArray(__spreadArray([], __read(messages), false), __read(generateMessagePage()), false));
|
|
136
87
|
setFetching(false);
|
|
137
|
-
},
|
|
88
|
+
}, 1000);
|
|
138
89
|
}
|
|
139
90
|
function handleSend(message) {
|
|
140
91
|
setSubmitting(true);
|
|
@@ -154,7 +105,7 @@ function ChatInterface() {
|
|
|
154
105
|
}, 500);
|
|
155
106
|
});
|
|
156
107
|
}
|
|
157
|
-
return ((0, react_1.jsx)("div", { css: (0, react_1.css)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n border: 1px solid #ededed;\n height:
|
|
108
|
+
return ((0, react_1.jsx)("div", { css: (0, react_1.css)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n border: 1px solid #ededed;\n height: 50rem;\n "], ["\n border: 1px solid #ededed;\n height: 50rem;\n "]))) },
|
|
158
109
|
(0, react_1.jsx)(ChatInterface_1.default, { userId: "user1", messages: messages, handleSend: handleSend, submitting: submitting, fetchNextPage: loadMore, hasNextPage: hasMore, isLoading: isLoading, isFetching: isFetching })));
|
|
159
110
|
}
|
|
160
111
|
exports.ChatInterface = ChatInterface;
|