@vendorflow/components 2.0.42 → 2.0.43
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/lib/components/index.d.ts +0 -1
- package/lib/components/index.js +1 -3
- package/lib/components/material-ui/ChatInterface/ChatInterface.js +1 -1
- package/lib/components/material-ui/ChatInterface/ChatInterface.story.js +3 -3
- package/lib/components/material-ui/ChatInterface/MessageThread.d.ts +2 -2
- package/lib/components/material-ui/ChatInterface/MessageThread.js +88 -4
- package/package.json +1 -1
|
@@ -10,5 +10,4 @@ export { default as InputCheckboxGroup } from './material-ui/InputCheckboxGroup'
|
|
|
10
10
|
export { default as InputRadioGroup } from './material-ui/InputRadioGroup';
|
|
11
11
|
export { default as InputSearchDropdown } from './material-ui/InputSearchDropdown';
|
|
12
12
|
export { default as InputTime } from './material-ui/InputTime';
|
|
13
|
-
export { default as InfiniteScroll } from './InfiniteScroll';
|
|
14
13
|
export { default as Modal } from './material-ui/Modal';
|
package/lib/components/index.js
CHANGED
|
@@ -3,7 +3,7 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
|
|
|
3
3
|
return (mod && mod.__esModule) ? mod : { "default": mod };
|
|
4
4
|
};
|
|
5
5
|
Object.defineProperty(exports, "__esModule", { value: true });
|
|
6
|
-
exports.Modal = exports.
|
|
6
|
+
exports.Modal = exports.InputTime = exports.InputSearchDropdown = exports.InputRadioGroup = exports.InputCheckboxGroup = exports.InputGroup = exports.InputDateTime = exports.InputDate = exports.DataTable = exports.ColorPicker = exports.ChatInterface = exports.ButtonMenu = exports.Button = void 0;
|
|
7
7
|
var Button_1 = require("./material-ui/Button");
|
|
8
8
|
Object.defineProperty(exports, "Button", { enumerable: true, get: function () { return __importDefault(Button_1).default; } });
|
|
9
9
|
var ButtonMenu_1 = require("./material-ui/ButtonMenu");
|
|
@@ -28,7 +28,5 @@ var InputSearchDropdown_1 = require("./material-ui/InputSearchDropdown");
|
|
|
28
28
|
Object.defineProperty(exports, "InputSearchDropdown", { enumerable: true, get: function () { return __importDefault(InputSearchDropdown_1).default; } });
|
|
29
29
|
var InputTime_1 = require("./material-ui/InputTime");
|
|
30
30
|
Object.defineProperty(exports, "InputTime", { enumerable: true, get: function () { return __importDefault(InputTime_1).default; } });
|
|
31
|
-
var InfiniteScroll_1 = require("./InfiniteScroll");
|
|
32
|
-
Object.defineProperty(exports, "InfiniteScroll", { enumerable: true, get: function () { return __importDefault(InfiniteScroll_1).default; } });
|
|
33
31
|
var Modal_1 = require("./material-ui/Modal");
|
|
34
32
|
Object.defineProperty(exports, "Modal", { enumerable: true, get: function () { return __importDefault(Modal_1).default; } });
|
|
@@ -101,7 +101,7 @@ function ChatInterface(_a) {
|
|
|
101
101
|
} }, function (_a) {
|
|
102
102
|
var measureRef = _a.measureRef;
|
|
103
103
|
return ((0, react_1.jsx)(react_2.Fragment, null,
|
|
104
|
-
(0, react_1.jsx)(MessageThread_1.default, { userId: userId, messages: messages, inputHeight: inputHeight, hasNextPage: hasNextPage, fetchNextPage: fetchNextPage, isLoading: isLoading, isFetching: isFetching, colors: colors }),
|
|
104
|
+
(0, react_1.jsx)(MessageThread_1.default, { userId: userId, messages: messages, inputHeight: inputHeight, hasNextPage: hasNextPage, fetchNextPage: fetchNextPage, isLoading: isLoading, isFetching: isFetching, isSubmitting: isSubmitting, colors: colors }),
|
|
105
105
|
renderInputComponent ? (renderInputComponent(measureRef)) : ((0, react_1.jsx)(MessageInput_1.default, { ref: measureRef, handleClickSend: handleClickSend, message: message, setMessage: setMessage, isSubmitting: isSubmitting, placeholder: placeholder }))));
|
|
106
106
|
})));
|
|
107
107
|
}
|
|
@@ -80,13 +80,13 @@ function ChatInterface() {
|
|
|
80
80
|
function generateMessagePage() {
|
|
81
81
|
return new Array(10).fill(null).map(generateMessage);
|
|
82
82
|
}
|
|
83
|
-
function
|
|
83
|
+
var fetchNextPage = (0, react_2.useCallback)(function () {
|
|
84
84
|
setFetching(true);
|
|
85
85
|
setTimeout(function () {
|
|
86
86
|
setMessages(__spreadArray(__spreadArray([], __read(messages), false), __read(generateMessagePage()), false));
|
|
87
87
|
setFetching(false);
|
|
88
88
|
}, 100);
|
|
89
|
-
}
|
|
89
|
+
}, [messages, generateMessagePage, setMessages]);
|
|
90
90
|
function handleSend(message) {
|
|
91
91
|
setSubmitting(true);
|
|
92
92
|
setFetching(true);
|
|
@@ -108,7 +108,7 @@ function ChatInterface() {
|
|
|
108
108
|
});
|
|
109
109
|
}
|
|
110
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 "]))) },
|
|
111
|
-
(0, react_1.jsx)(ChatInterface_1.default, { userId: "user1", messages: messages, handleSend: handleSend, fetchNextPage:
|
|
111
|
+
(0, react_1.jsx)(ChatInterface_1.default, { userId: "user1", messages: messages, handleSend: handleSend, fetchNextPage: fetchNextPage, hasNextPage: hasMore, isLoading: isLoading, isFetching: isFetching, isSubmitting: isSubmitting })));
|
|
112
112
|
}
|
|
113
113
|
exports.ChatInterface = ChatInterface;
|
|
114
114
|
var templateObject_1;
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import { ChatInterfaceProps } from './ChatInterface';
|
|
2
|
-
interface Props extends Pick<ChatInterfaceProps, 'userId' | 'messages' | 'hasNextPage' | 'fetchNextPage' | 'isLoading' | 'isFetching' | 'colors'> {
|
|
2
|
+
interface Props extends Pick<ChatInterfaceProps, 'userId' | 'messages' | 'hasNextPage' | 'fetchNextPage' | 'isLoading' | 'isFetching' | 'isSubmitting' | 'colors'> {
|
|
3
3
|
inputHeight: number;
|
|
4
4
|
}
|
|
5
|
-
export default function MessageThread({ userId, messages, inputHeight, hasNextPage, fetchNextPage, isLoading, isFetching, colors, }: Props): JSX.Element;
|
|
5
|
+
export default function MessageThread({ userId, messages, inputHeight, hasNextPage, fetchNextPage, isLoading, isFetching, isSubmitting, colors, }: Props): JSX.Element;
|
|
6
6
|
export {};
|
|
@@ -12,12 +12,96 @@ Object.defineProperty(exports, "__esModule", { value: true });
|
|
|
12
12
|
var react_1 = require("@emotion/react");
|
|
13
13
|
var react_2 = require("react");
|
|
14
14
|
var MessageItem_1 = __importDefault(require("./MessageItem"));
|
|
15
|
-
var
|
|
15
|
+
var lodash_1 = require("lodash");
|
|
16
|
+
var material_1 = require("@mui/material");
|
|
16
17
|
function MessageThread(_a) {
|
|
17
|
-
var
|
|
18
|
+
var _b;
|
|
19
|
+
var userId = _a.userId, messages = _a.messages, inputHeight = _a.inputHeight, hasNextPage = _a.hasNextPage, fetchNextPage = _a.fetchNextPage, isLoading = _a.isLoading, isFetching = _a.isFetching, isSubmitting = _a.isSubmitting, colors = _a.colors;
|
|
20
|
+
var isInitialized = (0, react_2.useRef)(false);
|
|
21
|
+
var isScrollLoad = (0, react_2.useRef)(false);
|
|
22
|
+
var prevScrollTop = (0, react_2.useRef)(null);
|
|
23
|
+
var prevScrollHeight = (0, react_2.useRef)(null);
|
|
24
|
+
var shouldScrollToPrevPosition = (0, react_2.useRef)(false);
|
|
18
25
|
var scrollParent = (0, react_2.useRef)(null);
|
|
26
|
+
var handleScrollEvent = (0, react_2.useCallback)((0, lodash_1.debounce)(function (evt) {
|
|
27
|
+
var parent = evt.target;
|
|
28
|
+
if (parent.scrollTop === 0 && hasNextPage && fetchNextPage && !isLoading && !isFetching) {
|
|
29
|
+
isScrollLoad.current = true;
|
|
30
|
+
prevScrollHeight.current = parent.scrollHeight;
|
|
31
|
+
fetchNextPage();
|
|
32
|
+
}
|
|
33
|
+
}, 300), [hasNextPage, fetchNextPage, isLoading, isFetching]);
|
|
34
|
+
// This will handle the initial loading of messages, then scroll to bottom
|
|
35
|
+
(0, react_2.useEffect)(function () {
|
|
36
|
+
if (!isInitialized.current && !isLoading && scrollParent.current) {
|
|
37
|
+
var _a = scrollParent.current, clientHeight = _a.clientHeight, scrollHeight = _a.scrollHeight;
|
|
38
|
+
if (clientHeight >= scrollHeight && hasNextPage && fetchNextPage) {
|
|
39
|
+
fetchNextPage();
|
|
40
|
+
return;
|
|
41
|
+
}
|
|
42
|
+
isInitialized.current = true;
|
|
43
|
+
scrollParent.current.scrollTo(0, scrollHeight - clientHeight);
|
|
44
|
+
}
|
|
45
|
+
}, [isLoading, isInitialized.current, hasNextPage, fetchNextPage]);
|
|
46
|
+
// Sets up the scroll event listener
|
|
47
|
+
(0, react_2.useEffect)(function () {
|
|
48
|
+
if (scrollParent.current) {
|
|
49
|
+
scrollParent.current.addEventListener('scroll', handleScrollEvent);
|
|
50
|
+
}
|
|
51
|
+
return function () {
|
|
52
|
+
if (scrollParent.current) {
|
|
53
|
+
scrollParent.current.removeEventListener('scroll', handleScrollEvent);
|
|
54
|
+
}
|
|
55
|
+
};
|
|
56
|
+
}, [scrollParent.current, hasNextPage, fetchNextPage, isLoading, isFetching]);
|
|
57
|
+
// Handles the scroll position adjustment after fetching the next page
|
|
58
|
+
(0, react_2.useEffect)(function () {
|
|
59
|
+
if (!isFetching &&
|
|
60
|
+
isInitialized.current &&
|
|
61
|
+
scrollParent.current &&
|
|
62
|
+
isScrollLoad.current &&
|
|
63
|
+
prevScrollHeight.current &&
|
|
64
|
+
scrollParent.current.scrollHeight !== prevScrollHeight.current) {
|
|
65
|
+
var delta = scrollParent.current.scrollHeight - prevScrollHeight.current;
|
|
66
|
+
scrollParent.current.scrollTo(0, delta);
|
|
67
|
+
isScrollLoad.current = false;
|
|
68
|
+
prevScrollHeight.current = 0;
|
|
69
|
+
}
|
|
70
|
+
}, [isFetching, prevScrollHeight.current]);
|
|
71
|
+
// Manages scroll position for data changes that are triggered from anything other than the scroll event
|
|
72
|
+
(0, react_2.useEffect)(function () {
|
|
73
|
+
if (scrollParent.current && !isScrollLoad.current && isInitialized.current) {
|
|
74
|
+
var _a = scrollParent.current, scrollHeight = _a.scrollHeight, scrollTop = _a.scrollTop, clientHeight = _a.clientHeight;
|
|
75
|
+
if (isFetching) {
|
|
76
|
+
// track the current position
|
|
77
|
+
prevScrollHeight.current = scrollHeight;
|
|
78
|
+
prevScrollTop.current = scrollTop;
|
|
79
|
+
var distanceFromBottom = scrollHeight - scrollTop - clientHeight;
|
|
80
|
+
if (!isSubmitting && distanceFromBottom > 200) {
|
|
81
|
+
shouldScrollToPrevPosition.current = true;
|
|
82
|
+
}
|
|
83
|
+
}
|
|
84
|
+
else if (!isFetching &&
|
|
85
|
+
prevScrollHeight.current !== null &&
|
|
86
|
+
prevScrollTop.current !== null &&
|
|
87
|
+
scrollHeight > prevScrollHeight.current) {
|
|
88
|
+
// init to scroll to bottom delta
|
|
89
|
+
var delta = scrollHeight - clientHeight;
|
|
90
|
+
if (shouldScrollToPrevPosition.current) {
|
|
91
|
+
delta = prevScrollTop.current;
|
|
92
|
+
}
|
|
93
|
+
scrollParent.current.scrollTo(0, delta);
|
|
94
|
+
prevScrollHeight.current = null;
|
|
95
|
+
prevScrollTop.current = null;
|
|
96
|
+
shouldScrollToPrevPosition.current = false;
|
|
97
|
+
}
|
|
98
|
+
}
|
|
99
|
+
}, [isFetching, (_b = scrollParent.current) === null || _b === void 0 ? void 0 : _b.scrollHeight]);
|
|
19
100
|
return ((0, react_1.jsx)("div", { ref: scrollParent, css: (0, react_1.css)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n box-sizing: border-box;\n height: calc(100% - ", "px);\n width: 100%;\n padding: 0.5rem 1rem;\n overflow-y: auto;\n "], ["\n box-sizing: border-box;\n height: calc(100% - ", "px);\n width: 100%;\n padding: 0.5rem 1rem;\n overflow-y: auto;\n "])), inputHeight) },
|
|
20
|
-
(0, react_1.jsx)(
|
|
101
|
+
(0, react_1.jsx)("div", { css: (0, react_1.css)(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n display: flex;\n flex-direction: column-reverse;\n justify-content: flex-start;\n align-items: flex-start;\n "], ["\n display: flex;\n flex-direction: column-reverse;\n justify-content: flex-start;\n align-items: flex-start;\n "]))) },
|
|
102
|
+
messages.map(function (message) { return ((0, react_1.jsx)(MessageItem_1.default, { key: "" + message.id, message: message, userId: userId, colors: colors })); }),
|
|
103
|
+
hasNextPage && ((0, react_1.jsx)("div", { key: "loader", css: (0, react_1.css)(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n width: 100%;\n margin: 0.5rem 0;\n height: auto;\n display: flex;\n justify-content: center;\n align-items: center;\n\n && {\n visibility: ", ";\n }\n "], ["\n width: 100%;\n margin: 0.5rem 0;\n height: auto;\n display: flex;\n justify-content: center;\n align-items: center;\n\n && {\n visibility: ", ";\n }\n "])), isFetching && isScrollLoad ? 'visible' : 'hidden') },
|
|
104
|
+
(0, react_1.jsx)(material_1.CircularProgress, { size: "1.5rem", disableShrink: true }))))));
|
|
21
105
|
}
|
|
22
106
|
exports.default = MessageThread;
|
|
23
|
-
var templateObject_1;
|
|
107
|
+
var templateObject_1, templateObject_2, templateObject_3;
|