@vendorflow/components 2.0.34 → 2.0.38
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;
|
|
@@ -93,7 +105,7 @@ function useInfiniteScroll(_a) {
|
|
|
93
105
|
}
|
|
94
106
|
// this callback is used and fired based on the state of the element it is attached to
|
|
95
107
|
return (0, react_2.useCallback)(function (node) {
|
|
96
|
-
if (isFetching) {
|
|
108
|
+
if (isLoading || isFetching) {
|
|
97
109
|
return;
|
|
98
110
|
}
|
|
99
111
|
if (observer.current) {
|
|
@@ -120,6 +132,6 @@ function useInfiniteScroll(_a) {
|
|
|
120
132
|
}
|
|
121
133
|
observer.current.observe(node);
|
|
122
134
|
}
|
|
123
|
-
}, [isFetching, isReverse, hasNextPage, fetchNextPage, scrollParent, scrollBody]);
|
|
135
|
+
}, [isLoading, isFetching, isReverse, hasNextPage, fetchNextPage, scrollParent, scrollBody]);
|
|
124
136
|
}
|
|
125
137
|
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;
|