@vendorflow/components 2.0.36 → 2.0.40
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,17 +77,24 @@ 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 _d = __read((0, react_2.useState)(false), 2), isScrollInit = _d[0], setScrollInit = _d[1];
|
|
83
85
|
var hasScrollbar = (0, react_2.useMemo)(function () {
|
|
84
86
|
if (scrollParent.current && scrollBody.current) {
|
|
85
87
|
return scrollBody.current.clientHeight > scrollParent.current.clientHeight;
|
|
86
88
|
}
|
|
87
89
|
return false;
|
|
88
|
-
}, [scrollParent, scrollBody]);
|
|
90
|
+
}, [(_b = scrollParent.current) === null || _b === void 0 ? void 0 : _b.clientHeight, (_c = scrollBody.current) === null || _c === void 0 ? void 0 : _c.clientHeight]);
|
|
89
91
|
(0, react_2.useEffect)(function () {
|
|
92
|
+
var _a, _b;
|
|
90
93
|
if (!isLoading && hasScrollbar) {
|
|
94
|
+
console.log('scrolling to start!');
|
|
95
|
+
console.log('scroll parent height: ', (_a = scrollParent.current) === null || _a === void 0 ? void 0 : _a.clientHeight);
|
|
96
|
+
console.log('scroll body height: ', (_b = scrollBody.current) === null || _b === void 0 ? void 0 : _b.clientHeight);
|
|
97
|
+
prevPosition.current = null;
|
|
91
98
|
scrollToStart();
|
|
92
99
|
}
|
|
93
100
|
}, [isLoading, hasScrollbar]);
|
|
@@ -96,6 +103,7 @@ function useInfiniteScroll(_a) {
|
|
|
96
103
|
var scrollHeight = (scrollBody.current || { scrollHeight: 0 }).scrollHeight;
|
|
97
104
|
var scrollToValue = isReverse ? scrollHeight : 0;
|
|
98
105
|
(_a = scrollParent.current) === null || _a === void 0 ? void 0 : _a.scrollTo(0, scrollToValue);
|
|
106
|
+
setScrollInit(true);
|
|
99
107
|
}
|
|
100
108
|
// this callback is used and fired based on the state of the element it is attached to
|
|
101
109
|
return (0, react_2.useCallback)(function (node) {
|
|
@@ -107,9 +115,10 @@ function useInfiniteScroll(_a) {
|
|
|
107
115
|
}
|
|
108
116
|
observer.current = new IntersectionObserver(function (entries) {
|
|
109
117
|
if (entries[0].isIntersecting && hasNextPage && fetchNextPage) {
|
|
110
|
-
if (scrollBody.current && isReverse) {
|
|
118
|
+
if (scrollBody.current && isReverse && isScrollInit) {
|
|
111
119
|
// save the last element, so that we can scroll to it after the new data loads in
|
|
112
120
|
prevPosition.current = scrollBody.current.clientHeight;
|
|
121
|
+
console.log('saving prev position: ', prevPosition.current);
|
|
113
122
|
}
|
|
114
123
|
// load the next page
|
|
115
124
|
fetchNextPage();
|
|
@@ -120,12 +129,13 @@ function useInfiniteScroll(_a) {
|
|
|
120
129
|
});
|
|
121
130
|
if (node) {
|
|
122
131
|
if (isReverse && scrollParent.current && prevPosition.current != null) {
|
|
132
|
+
console.log('scrolling to prev position: ', prevPosition.current);
|
|
123
133
|
// If we had a prev position, then we want to scroll to it
|
|
124
134
|
scrollParent.current.scrollTo(0, scrollBody.current.clientHeight - prevPosition.current);
|
|
125
135
|
prevPosition.current = null;
|
|
126
136
|
}
|
|
127
137
|
observer.current.observe(node);
|
|
128
138
|
}
|
|
129
|
-
}, [isLoading, isFetching, isReverse, hasNextPage, fetchNextPage, scrollParent, scrollBody]);
|
|
139
|
+
}, [isLoading, isFetching, isReverse, hasNextPage, fetchNextPage, scrollParent, scrollBody, isScrollInit]);
|
|
130
140
|
}
|
|
131
141
|
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
|
+
}, 100);
|
|
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;
|