dce-reactkit 3.5.9 → 3.5.11

package/dist/esm/types/components/AutoscrollToBottomContainer.d.ts

@@ -12,6 +12,8 @@ type Props = {
     itemsName?: string;
     items: AutoScrollItem[];
     jumpToBottomButtonVariant?: Variant;
+    messageBeforeItems?: React.ReactNode;
+    messageAfterItems?: React.ReactNode;
 };
 type AutoScrollItem = {
     id: string | number;

package/dist/index.d.ts

@@ -619,6 +619,8 @@ type Props = {
     itemsName?: string;
     items: AutoScrollItem[];
     jumpToBottomButtonVariant?: Variant;
+    messageBeforeItems?: React.ReactNode;
+    messageAfterItems?: React.ReactNode;
 };
 type AutoScrollItem = {
     id: string | number;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "dce-reactkit",
-  "version": "3.5.9",
+  "version": "3.5.11",
   "description": "Shared components for Harvard DCE apps",
   "main": "dist/cjs/index.js",
   "module": "dist/esm/index.js",

package/src/components/AutoscrollToBottomContainer.tsx

@@ -35,6 +35,10 @@ type Props = {
   items: AutoScrollItem[],
   // Custom variant for the "Jump to Bottom" button
   jumpToBottomButtonVariant?: Variant,
+  // Optional element to display before last item (but within the scrollpane)
+  messageBeforeItems?: React.ReactNode,
+  // Optional element to display after the last item (but within the scrollpane)
+  messageAfterItems?: React.ReactNode,
 };
 
 // AutoScrollItem definition
@@ -187,6 +191,8 @@ const AutoscrollToBottomContainer: React.FC<Props> = (props) => {
     itemsName,
     items,
     jumpToBottomButtonVariant = Variant.Danger,
+    messageBeforeItems,
+    messageAfterItems,
   } = props;
 
   /* -------------- State ------------- */
@@ -209,7 +215,7 @@ const AutoscrollToBottomContainer: React.FC<Props> = (props) => {
   // Initialize refs
   const lastItemIds = useRef<(string | number)[]>([]);
   const container = useRef<HTMLDivElement | null>(null);
-  const wasScrolledToBottomBeforeItemsUpdate = useRef<boolean>(true);
+  const wasLastScrolledToBottom = useRef<boolean>(true);
 
   /*------------------------------------------------------------------------*/
   /* ------------------------- Component Functions ------------------------ */
@@ -247,7 +253,12 @@ const AutoscrollToBottomContainer: React.FC<Props> = (props) => {
     );
 
     // Figure out if we're scrolled to the bottom
-    return (distanceToBottomRems < SCROLLED_TO_BOTTOM_THRESHOLD_REMS);
+    const atBottom = (distanceToBottomRems < SCROLLED_TO_BOTTOM_THRESHOLD_REMS);
+
+    // Remember if we scrolled to the bottom
+    wasLastScrolledToBottom.current = atBottom;
+
+    return atBottom;
   };
 
   /**
@@ -266,7 +277,13 @@ const AutoscrollToBottomContainer: React.FC<Props> = (props) => {
     });
 
     // Scroll to bottom
-    container.current.scrollTop = container.current.scrollHeight;
+    container.current.scrollTop = (
+      container.current.scrollHeight
+      - container.current.clientHeight
+    );
+
+    // Remember that we scrolled to the bottom
+    wasLastScrolledToBottom.current = true;
   };
 
   /*----------------------------------------*/
@@ -283,8 +300,9 @@ const AutoscrollToBottomContainer: React.FC<Props> = (props) => {
       return;
     }
 
-    // If scrolled to bottom, hide the button
+    // If scrolled to bottom, hide the button and remember position
     if (isScrolledToBottom()) {
+      // Hide button
       dispatch({
         type: ActionType.HideJumpToBottomButton,
       });
@@ -318,20 +336,24 @@ const AutoscrollToBottomContainer: React.FC<Props> = (props) => {
 
       // Check if new content appeared at bottom
       const newContentAppeared = (
+        // There are items
         currentItemIds.length > 0
-        && (
-          currentItemIds[currentItemIds.length - 1]
-          !== lastItemIds.current[lastItemIds.current.length - 1]
+        // The last item is new
+        && !lastItemIds.current.includes(
+          currentItemIds[currentItemIds.length - 1],
         )
       );
 
+      // Update last item ids
+      lastItemIds.current = currentItemIds;
+
       // Do nothing if no new content
       if (!newContentAppeared) {
         return;
       }
 
       // Check if used to be scrolled to the bottom
-      if (wasScrolledToBottomBeforeItemsUpdate.current) {
+      if (wasLastScrolledToBottom.current) {
         // Was scrolled to the bottom! Autoscroll.
         scrollToBottom();
       } else {
@@ -340,14 +362,6 @@ const AutoscrollToBottomContainer: React.FC<Props> = (props) => {
           type: ActionType.ShowJumpToBottomButton,
         });
       }
-
-      // Update last item ids
-      lastItemIds.current = currentItemIds;
-
-      // Remember if we were scrolled to the bottom before the update
-      return () => {
-        wasScrolledToBottomBeforeItemsUpdate.current = isScrolledToBottom();
-      };
     },
     [items],
   );
@@ -400,6 +414,9 @@ const AutoscrollToBottomContainer: React.FC<Props> = (props) => {
         onScroll={handleScroll}
         ref={container}
       >
+        {/* Message before items */}
+        {messageBeforeItems}
+
         {/* Items */}
         {
           items
@@ -415,6 +432,9 @@ const AutoscrollToBottomContainer: React.FC<Props> = (props) => {
               );
             })
         }
+
+        {/* Message after items */}
+        {messageAfterItems}
       </div>
     </div>
   );