@vendorflow/components 2.0.32 → 2.0.36

package/lib/components/InfiniteScroll/InfiniteScroll.d.ts

@@ -6,10 +6,11 @@ interface Props {
     children: ReactElement[];
     scrollParent: MutableRefObject<HTMLDivElement | null>;
     isLoading?: boolean;
+    isFetching?: boolean;
     isReverse?: boolean;
-    hasMore?: boolean;
-    loadMore?: () => Promise<void> | void;
+    hasNextPage?: boolean;
+    fetchNextPage?: () => Promise<any> | any;
     Loader?: ReactElement;
 }
-export default function InfiniteScroll({ children, scrollParent, isLoading, isReverse, hasMore, loadMore, Loader, }: Props): jsx.JSX.Element;
+export default function InfiniteScroll({ children, scrollParent, isLoading, isFetching, isReverse, hasNextPage, fetchNextPage, Loader, }: Props): jsx.JSX.Element;
 export {};

package/lib/components/InfiniteScroll/InfiniteScroll.js

@@ -3,6 +3,22 @@ var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cook
     if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
     return cooked;
 };
+var __read = (this && this.__read) || function (o, n) {
+    var m = typeof Symbol === "function" && o[Symbol.iterator];
+    if (!m) return o;
+    var i = m.call(o), r, ar = [], e;
+    try {
+        while ((n === void 0 || n-- > 0) && !(r = i.next()).done) ar.push(r.value);
+    }
+    catch (error) { e = { error: error }; }
+    finally {
+        try {
+            if (r && !r.done && (m = i["return"])) m.call(i);
+        }
+        finally { if (e) throw e.error; }
+    }
+    return ar;
+};
 Object.defineProperty(exports, "__esModule", { value: true });
 /** @jsxRuntime classic */
 /** @jsx jsx */
@@ -10,18 +26,31 @@ var react_1 = require("@emotion/react");
 var react_2 = require("react");
 var material_1 = require("@mui/material");
 function InfiniteScroll(_a) {
-    var children = _a.children, scrollParent = _a.scrollParent, isLoading = _a.isLoading, isReverse = _a.isReverse, hasMore = _a.hasMore, loadMore = _a.loadMore, Loader = _a.Loader;
+    var children = _a.children, scrollParent = _a.scrollParent, isLoading = _a.isLoading, isFetching = _a.isFetching, isReverse = _a.isReverse, hasNextPage = _a.hasNextPage, fetchNextPage = _a.fetchNextPage, Loader = _a.Loader;
+    var _b = __read((0, react_2.useState)(false), 2), isLoadMoreFetch = _b[0], setLoadMoreFetch = _b[1];
     var scrollBody = (0, react_2.useRef)(null);
     var loadMoreRef = useInfiniteScroll({
         scrollParent: scrollParent,
         scrollBody: scrollBody,
         isReverse: isReverse,
         isLoading: isLoading,
-        hasMore: hasMore,
-        loadMore: loadMore,
+        isFetching: isFetching,
+        hasNextPage: hasNextPage,
+        fetchNextPage: fetchNextPageAndSetFlag,
     });
+    (0, react_2.useEffect)(function () {
+        if (!isFetching) {
+            setLoadMoreFetch(false);
+        }
+    }, [isFetching]);
+    function fetchNextPageAndSetFlag() {
+        if (fetchNextPage) {
+            fetchNextPage();
+            setLoadMoreFetch(true);
+        }
+    }
     function renderLoader() {
-        if (!hasMore) {
+        if (!hasNextPage) {
             return null;
         }
         if (Loader) {
@@ -29,12 +58,12 @@ function InfiniteScroll(_a) {
                 var css = _a.css;
                 return (0, react_2.cloneElement)(Loader, {
                     ref: loadMoreRef,
-                    className: css(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n                && {\n                  visibility: ", ";\n                }\n              "], ["\n                && {\n                  visibility: ", ";\n                }\n              "])), isLoading ? 'visible' : 'hidden'),
+                    className: css(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n                && {\n                  visibility: ", ";\n                }\n              "], ["\n                && {\n                  visibility: ", ";\n                }\n              "])), isFetching && isLoadMoreFetch ? 'visible' : 'hidden'),
                 });
             }));
         }
         else {
-            return ((0, react_1.jsx)(DefaultLoader, { css: (0, react_1.css)(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n            && {\n              visibility: ", ";\n            }\n          "], ["\n            && {\n              visibility: ", ";\n            }\n          "])), isLoading ? 'visible' : 'hidden'), ref: loadMoreRef }));
+            return ((0, react_1.jsx)(DefaultLoader, { css: (0, react_1.css)(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n            && {\n              visibility: ", ";\n            }\n          "], ["\n            && {\n              visibility: ", ";\n            }\n          "])), isFetching && isLoadMoreFetch ? 'visible' : 'hidden'), ref: loadMoreRef }));
         }
     }
     return ((0, react_1.jsx)("div", { css: (0, react_1.css)(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n        display: flex;\n        flex-direction: ", ";\n        justify-content: flex-start;\n        align-items: flex-start;\n      "], ["\n        display: flex;\n        flex-direction: ", ";\n        justify-content: flex-start;\n        align-items: flex-start;\n      "])), isReverse ? 'column-reverse' : 'column'), ref: scrollBody },
@@ -48,50 +77,55 @@ var DefaultLoader = (0, react_2.forwardRef)(function (_a, ref) {
         (0, react_1.jsx)(material_1.CircularProgress, { size: "1.5rem", disableShrink: true })));
 });
 function useInfiniteScroll(_a) {
-    var scrollParent = _a.scrollParent, scrollBody = _a.scrollBody, isLoading = _a.isLoading, isReverse = _a.isReverse, hasMore = _a.hasMore, loadMore = _a.loadMore;
-    var prevTarget = (0, react_2.useRef)();
+    var scrollParent = _a.scrollParent, scrollBody = _a.scrollBody, isLoading = _a.isLoading, isFetching = _a.isFetching, isReverse = _a.isReverse, hasNextPage = _a.hasNextPage, fetchNextPage = _a.fetchNextPage;
+    var prevPosition = (0, react_2.useRef)();
     var observer = (0, react_2.useRef)();
-    return (0, react_2.useCallback)(function (node) {
-        var _a;
-        function scrollToStart() {
-            var _a;
-            var scrollHeight = (scrollBody.current || { scrollHeight: 0 }).scrollHeight;
-            var scrollToValue = isReverse ? scrollHeight : 0;
-            (_a = scrollParent.current) === null || _a === void 0 ? void 0 : _a.scrollTo(0, scrollToValue);
+    var hasScrollbar = (0, react_2.useMemo)(function () {
+        if (scrollParent.current && scrollBody.current) {
+            return scrollBody.current.clientHeight > scrollParent.current.clientHeight;
+        }
+        return false;
+    }, [scrollParent, scrollBody]);
+    (0, react_2.useEffect)(function () {
+        if (!isLoading && hasScrollbar) {
+            scrollToStart();
         }
-        if (isLoading) {
+    }, [isLoading, hasScrollbar]);
+    function scrollToStart() {
+        var _a;
+        var scrollHeight = (scrollBody.current || { scrollHeight: 0 }).scrollHeight;
+        var scrollToValue = isReverse ? scrollHeight : 0;
+        (_a = scrollParent.current) === null || _a === void 0 ? void 0 : _a.scrollTo(0, scrollToValue);
+    }
+    // this callback is used and fired based on the state of the element it is attached to
+    return (0, react_2.useCallback)(function (node) {
+        if (isLoading || isFetching) {
             return;
         }
         if (observer.current) {
             observer.current.disconnect();
         }
         observer.current = new IntersectionObserver(function (entries) {
-            if (entries[0].isIntersecting && hasMore && loadMore) {
-                if (scrollParent.current) {
+            if (entries[0].isIntersecting && hasNextPage && fetchNextPage) {
+                if (scrollBody.current && isReverse) {
                     // save the last element, so that we can scroll to it after the new data loads in
-                    prevTarget.current = entries[0].target;
+                    prevPosition.current = scrollBody.current.clientHeight;
                 }
                 // load the next page
-                loadMore();
+                fetchNextPage();
             }
         }, {
             root: (scrollParent === null || scrollParent === void 0 ? void 0 : scrollParent.current) || null,
             threshold: 1.0,
         });
         if (node) {
-            if (scrollParent.current) {
-                // If we had a prev target, then we want to scroll to its position
-                if (prevTarget.current) {
-                    (_a = prevTarget.current) === null || _a === void 0 ? void 0 : _a.scrollIntoView({ behavior: 'auto', block: 'center' });
-                    prevTarget.current = undefined;
-                }
-                else {
-                    // else we will just scroll to the start of the list
-                    scrollToStart();
-                }
+            if (isReverse && scrollParent.current && prevPosition.current != null) {
+                // If we had a prev position, then we want to scroll to it
+                scrollParent.current.scrollTo(0, scrollBody.current.clientHeight - prevPosition.current);
+                prevPosition.current = null;
             }
             observer.current.observe(node);
         }
-    }, [isLoading, isReverse, hasMore, loadMore, scrollParent, scrollBody]);
+    }, [isLoading, isFetching, isReverse, hasNextPage, fetchNextPage, scrollParent, scrollBody]);
 }
 var templateObject_1, templateObject_2, templateObject_3, templateObject_4;

package/lib/components/material-ui/ChatInterface/ChatInterface.d.ts

@@ -14,9 +14,12 @@ export interface ChatInterfaceProps {
     style?: any;
     submitting: boolean;
     placeholder?: string;
-    hasMore?: boolean;
-    loadMore?: () => Promise<void> | void;
+    hasNextPage?: boolean;
+    fetchNextPage?: () => Promise<any> | any;
+    /** Determines if the initial load is happening */
     isLoading: boolean;
+    /** Determines if a data fetch is happening */
+    isFetching: boolean;
     colors?: {
         user: string;
         others: string;
@@ -24,4 +27,4 @@ export interface ChatInterfaceProps {
     /** Needs to take a ref that is used to determine the height of the input component */
     renderInputComponent?: (ref: Ref<HTMLDivElement>) => ReactNode;
 }
-export default function ChatInterface({ userId, messages, loadMore, handleSend, hasMore, className, style, submitting, placeholder, isLoading, colors, renderInputComponent, }: ChatInterfaceProps): JSX.Element;
+export default function ChatInterface({ userId, messages, fetchNextPage, handleSend, hasNextPage, className, style, submitting, placeholder, isLoading, isFetching, colors, renderInputComponent, }: ChatInterfaceProps): JSX.Element;

package/lib/components/material-ui/ChatInterface/ChatInterface.js

@@ -67,7 +67,7 @@ var react_measure_1 = __importDefault(require("react-measure"));
 var MessageInput_1 = __importDefault(require("./MessageInput"));
 var MessageThread_1 = __importDefault(require("./MessageThread"));
 function ChatInterface(_a) {
-    var userId = _a.userId, messages = _a.messages, loadMore = _a.loadMore, handleSend = _a.handleSend, hasMore = _a.hasMore, className = _a.className, style = _a.style, submitting = _a.submitting, placeholder = _a.placeholder, isLoading = _a.isLoading, colors = _a.colors, renderInputComponent = _a.renderInputComponent;
+    var userId = _a.userId, messages = _a.messages, fetchNextPage = _a.fetchNextPage, handleSend = _a.handleSend, hasNextPage = _a.hasNextPage, className = _a.className, style = _a.style, submitting = _a.submitting, placeholder = _a.placeholder, isLoading = _a.isLoading, isFetching = _a.isFetching, colors = _a.colors, renderInputComponent = _a.renderInputComponent;
     var _b = __read((0, react_2.useState)(''), 2), message = _b[0], setMessage = _b[1];
     var _c = __read((0, react_2.useState)(-1), 2), inputHeight = _c[0], setInputHeight = _c[1];
     function handleClickSend() {
@@ -101,7 +101,7 @@ function ChatInterface(_a) {
             } }, function (_a) {
             var measureRef = _a.measureRef;
             return ((0, react_1.jsx)(react_2.Fragment, null,
-                (0, react_1.jsx)(MessageThread_1.default, { userId: userId, messages: messages, inputHeight: inputHeight, hasMore: hasMore, loadMore: loadMore, isLoading: isLoading, colors: colors }),
+                (0, react_1.jsx)(MessageThread_1.default, { userId: userId, messages: messages, inputHeight: inputHeight, hasNextPage: hasNextPage, fetchNextPage: fetchNextPage, isLoading: isLoading, isFetching: isFetching, colors: colors }),
                 renderInputComponent ? (renderInputComponent(measureRef)) : ((0, react_1.jsx)(MessageInput_1.default, { ref: measureRef, handleClickSend: handleClickSend, message: message, setMessage: setMessage, submitting: submitting, placeholder: placeholder }))));
         })));
 }

package/lib/components/material-ui/ChatInterface/ChatInterface.story.js

@@ -37,14 +37,16 @@ exports.ChatInterface = void 0;
 /** @jsx jsx */
 var react_1 = require("@emotion/react");
 var react_2 = require("react");
+var faker_1 = __importDefault(require("faker"));
 var short_uuid_1 = __importDefault(require("short-uuid"));
 var ChatInterface_1 = __importDefault(require("./ChatInterface"));
 // tslint:disable-next-line:no-console
 function ChatInterface() {
     var _a = __read((0, react_2.useState)(true), 2), isLoading = _a[0], setLoading = _a[1];
-    var _b = __read((0, react_2.useState)(false), 2), submitting = _b[0], setSubmitting = _b[1];
-    var _c = __read((0, react_2.useState)([]), 2), messages = _c[0], setMessages = _c[1];
-    var _d = __read((0, react_2.useState)(true), 2), hasMore = _d[0], setHasMore = _d[1];
+    var _b = __read((0, react_2.useState)(true), 2), isFetching = _b[0], setFetching = _b[1];
+    var _c = __read((0, react_2.useState)(false), 2), submitting = _c[0], setSubmitting = _c[1];
+    var _d = __read((0, react_2.useState)([]), 2), messages = _d[0], setMessages = _d[1];
+    var _e = __read((0, react_2.useState)(true), 2), hasMore = _e[0], setHasMore = _e[1];
     (0, react_2.useEffect)(function () {
         setMessages([
             {
@@ -98,6 +100,7 @@ function ChatInterface() {
             },
         ]);
         setLoading(false);
+        setFetching(false);
     }, []);
     function generateTimestamp() {
         return new Date().toISOString();
@@ -105,34 +108,32 @@ function ChatInterface() {
     function generateId() {
         return short_uuid_1.default.generate();
     }
-    function loadMore() {
-        setLoading(true);
-        setTimeout(function () {
-            setMessages(__spreadArray(__spreadArray([], __read(messages), false), [
+    function generateMessagePage() {
+        return new Array(10).fill(null).map(function () {
+            var user = faker_1.default.random.arrayElement([
                 {
-                    id: generateId(),
-                    userId: 'user1',
-                    username: 'Socorro Aguilar',
-                    timestamp: generateTimestamp(),
-                    content: 'Great!',
+                    id: 'user1',
+                    name: 'Socorro Aguilar',
                 },
                 {
-                    id: generateId(),
-                    userId: 'user2',
-                    username: 'Greg Bujak',
-                    timestamp: generateTimestamp(),
-                    content: 'how are you?',
+                    id: 'user2',
+                    name: 'Greg Bujak',
                 },
-                {
-                    id: generateId(),
-                    userId: 'user1',
-                    username: 'Socorro Aguilar',
-                    timestamp: generateTimestamp(),
-                    content: 'hello',
-                },
-            ], false));
-            setHasMore(false);
-            setLoading(false);
+            ]);
+            return {
+                id: generateId(),
+                userId: user.id,
+                username: user.name,
+                timestamp: generateTimestamp(),
+                content: faker_1.default.lorem.sentence(5, 2),
+            };
+        });
+    }
+    function loadMore() {
+        setFetching(true);
+        setTimeout(function () {
+            setMessages(__spreadArray(__spreadArray([], __read(messages), false), __read(generateMessagePage()), false));
+            setFetching(false);
         }, 1000);
     }
     function handleSend(message) {
@@ -153,8 +154,8 @@ function ChatInterface() {
             }, 500);
         });
     }
-    return ((0, react_1.jsx)("div", { css: (0, react_1.css)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n        border: 1px solid #ededed;\n        height: 20rem;\n      "], ["\n        border: 1px solid #ededed;\n        height: 20rem;\n      "]))) },
-        (0, react_1.jsx)(ChatInterface_1.default, { userId: "user1", messages: messages, handleSend: handleSend, submitting: submitting, loadMore: loadMore, hasMore: hasMore, isLoading: isLoading })));
+    return ((0, react_1.jsx)("div", { css: (0, react_1.css)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n        border: 1px solid #ededed;\n        height: 40rem;\n      "], ["\n        border: 1px solid #ededed;\n        height: 40rem;\n      "]))) },
+        (0, react_1.jsx)(ChatInterface_1.default, { userId: "user1", messages: messages, handleSend: handleSend, submitting: submitting, fetchNextPage: loadMore, hasNextPage: hasMore, isLoading: isLoading, isFetching: isFetching })));
 }
 exports.ChatInterface = ChatInterface;
 var templateObject_1;

package/lib/components/material-ui/ChatInterface/MessageThread.d.ts

@@ -1,6 +1,6 @@
 import { ChatInterfaceProps } from './ChatInterface';
-interface Props extends Pick<ChatInterfaceProps, 'userId' | 'messages' | 'hasMore' | 'loadMore' | 'isLoading' | 'colors'> {
+interface Props extends Pick<ChatInterfaceProps, 'userId' | 'messages' | 'hasNextPage' | 'fetchNextPage' | 'isLoading' | 'isFetching' | 'colors'> {
     inputHeight: number;
 }
-export default function MessageThread({ userId, messages, inputHeight, hasMore, loadMore, isLoading, colors, }: Props): JSX.Element;
+export default function MessageThread({ userId, messages, inputHeight, hasNextPage, fetchNextPage, isLoading, isFetching, colors, }: Props): JSX.Element;
 export {};

package/lib/components/material-ui/ChatInterface/MessageThread.js

@@ -14,10 +14,10 @@ var react_2 = require("react");
 var MessageItem_1 = __importDefault(require("./MessageItem"));
 var InfiniteScroll_1 = __importDefault(require("../../InfiniteScroll/InfiniteScroll"));
 function MessageThread(_a) {
-    var userId = _a.userId, messages = _a.messages, inputHeight = _a.inputHeight, hasMore = _a.hasMore, loadMore = _a.loadMore, isLoading = _a.isLoading, colors = _a.colors;
+    var userId = _a.userId, messages = _a.messages, inputHeight = _a.inputHeight, hasNextPage = _a.hasNextPage, fetchNextPage = _a.fetchNextPage, isLoading = _a.isLoading, isFetching = _a.isFetching, colors = _a.colors;
     var scrollParent = (0, react_2.useRef)(null);
     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) },
-        (0, react_1.jsx)(InfiniteScroll_1.default, { scrollParent: scrollParent, isReverse: true, isLoading: isLoading, hasMore: hasMore, loadMore: loadMore }, messages.map(function (message) { return ((0, react_1.jsx)(MessageItem_1.default, { key: "" + message.id, message: message, userId: userId, colors: colors })); }))));
+        (0, react_1.jsx)(InfiniteScroll_1.default, { scrollParent: scrollParent, isReverse: true, isLoading: isLoading, isFetching: isFetching, hasNextPage: hasNextPage, fetchNextPage: fetchNextPage }, messages.map(function (message) { return ((0, react_1.jsx)(MessageItem_1.default, { key: "" + message.id, message: message, userId: userId, colors: colors })); }))));
 }
 exports.default = MessageThread;
 var templateObject_1;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vendorflow/components",
-  "version": "2.0.32",
+  "version": "2.0.36",
   "description": "React components for vendorflow",
   "main": "lib/index.js",
   "types": "lib/index.d.ts",