feat(conversation-list): loading more in conversation list

Added loadingMore an onYReachEnd properties to ConversationList.
chatscope · Feb 14, 2021 · e106ccb · e106ccb
1 parent 2c8c9be
commit e106ccb
Show file tree

Hide file tree

Showing 3 changed files with 34 additions and 16 deletions.
diff --git a/package.json b/package.json
@@ -74,7 +74,7 @@
     "watch": "chokidar 'src/**/*.*' -c 'yarn run build:esm'"
   },
   "dependencies": {
-    "@chatscope/chat-ui-kit-styles": "^1.0.2",
+    "@chatscope/chat-ui-kit-styles": "^1.1.0",
     "@fortawesome/fontawesome-free": "^5.12.1",
     "@fortawesome/fontawesome-svg-core": "^1.2.26",
     "@fortawesome/free-solid-svg-icons": "^5.12.0",

diff --git a/src/components/ConversationList/ConversationList.jsx b/src/components/ConversationList/ConversationList.jsx
@@ -12,19 +12,21 @@ export const ConversationList = ({
   children,
   scrollable,
   loading,
+  loadingMore,
+  onYReachEnd,
   className,
   ...props
 }) => {
   const cName = `${prefix}-conversation-list`;
 
   // Memoize, to avoid re-render each time when props (children) changed
   const Tag = useMemo(
-    () => ({ children, className, ...rest }) => {
+    () => ({ children }) => {
       // PerfectScrollbar for now cant be disabled, so render div instead of disabling it
       // https://github.com/goldenyz/react-perfect-scrollbar/issues/107
       if (scrollable === false || (scrollable === true && loading === true)) {
         return (
-          <div className={className} {...rest}>
+          <div>
             {loading && (
               <Overlay>
                 <Loader />
@@ -36,8 +38,7 @@ export const ConversationList = ({
       } else {
         return (
           <PerfectScrollbar
-            className={className}
-            {...rest}
+            onYReachEnd={onYReachEnd}
             options={{ suppressScrollX: true }}
           >
             {children}
@@ -49,15 +50,22 @@ export const ConversationList = ({
   );
 
   return (
-    <Tag className={classNames(cName, className)} {...props}>
-      {React.Children.count(children) > 0 && (
-        <ul>
-          {React.Children.map(children, (item) => (
-            <li>{item}</li>
-          ))}
-        </ul>
+    <div className={classNames(cName, className)} {...props}>
+      <Tag>
+        {React.Children.count(children) > 0 && (
+          <ul>
+            {React.Children.map(children, (item) => (
+              <li>{item}</li>
+            ))}
+          </ul>
+        )}
+      </Tag>
+      {loadingMore && (
+        <div className={`${cName}__loading-more`}>
+          <Loader />
+        </div>
       )}
-    </Tag>
+    </div>
   );
 };
 
@@ -77,6 +85,15 @@ ConversationList.propTypes = {
   /** Loading flag. */
   loading: PropTypes.bool,
 
+  /** Loading more flag for infinity scroll. */
+  loadingMore: PropTypes.bool,
+
+  /**
+   * This is fired when the scrollbar reaches the end on the y axis.<br/>
+   * It can be used to load next conversations using the infinite scroll.
+   */
+  onYReachEnd: PropTypes.func,
+
   /** Additional classes. */
   className: PropTypes.string,
 };
@@ -85,6 +102,7 @@ ConversationList.defaultProps = {
   children: [],
   scrollable: true,
   loading: false,
+  loadingMore: false,
   className: "",
 };
 

diff --git a/src/components/MessageList/MessageList.jsx b/src/components/MessageList/MessageList.jsx
@@ -330,12 +330,12 @@ MessageList.propTypes = {
   /** Loading flag. */
   loading: PropTypes.bool,
 
-  /** Loading more flag gor infinity scroll. */
+  /** Loading more flag for infinity scroll. */
   loadingMore: PropTypes.bool,
 
   /**
-   * It is fired when the scrollbar reaches the beginning on the x axis.<br/>
-   * This can be used to load previous messages using the infinite scroll.
+   * This is fired when the scrollbar reaches the beginning on the x axis.<br/>
+   * It can be used to load previous messages using the infinite scroll.
    */
   onYReachStart: PropTypes.func,