dce-reactkit 3.5.8 → 3.5.10

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.8",
+  "version": "3.5.10",
   "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
@@ -128,10 +132,10 @@ type State = {
 
 // Types of actions
 enum ActionType {
-  // Identify that the user is now scrolled to the bottom
-  NowScrolledToBottom = 'NowScrolledToBottom',
-  // Identify that new content appeared at the bottom but is not visible
-  NewContentAtBottom = 'NewContentAtBottom',
+  // Hide the "jump to bottom" button
+  HideJumpToBottomButton = 'HideJumpToBottomButton',
+  // Show the "jump to bottom" button
+  ShowJumpToBottomButton = 'ShowJumpToBottomButton',
 }
 
 // Action definitions
@@ -139,8 +143,8 @@ type Action = (
   | {
     // Action type
     type: (
-      | ActionType.NowScrolledToBottom
-      | ActionType.NewContentAtBottom
+      | ActionType.HideJumpToBottomButton
+      | ActionType.ShowJumpToBottomButton
     ),
   }
 );
@@ -153,17 +157,15 @@ type Action = (
  */
 const reducer = (state: State, action: Action): State => {
   switch (action.type) {
-    case ActionType.NowScrolledToBottom: {
+    case ActionType.HideJumpToBottomButton: {
       return {
         ...state,
-        // Hide the "jump to bottom" button
         jumpToBottomButtonVisible: false,
       };
     }
-    case ActionType.NewContentAtBottom: {
+    case ActionType.ShowJumpToBottomButton: {
       return {
         ...state,
-        // Show the "jump to bottom" button
         jumpToBottomButtonVisible: true,
       };
     }
@@ -189,6 +191,8 @@ const AutoscrollToBottomContainer: React.FC<Props> = (props) => {
     itemsName,
     items,
     jumpToBottomButtonVariant = Variant.Danger,
+    messageBeforeItems,
+    messageAfterItems,
   } = props;
 
   /* -------------- State ------------- */
@@ -235,6 +239,8 @@ const AutoscrollToBottomContainer: React.FC<Props> = (props) => {
     // Get info about container
     const {
       scrollTop,
+      scrollHeight,
+      clientHeight,
     } = container.current;
 
     // Distance to bottom
@@ -242,7 +248,9 @@ const AutoscrollToBottomContainer: React.FC<Props> = (props) => {
       getComputedStyle(document.documentElement).fontSize,
       10,
     );
-    const distanceToBottomRems = Math.abs(scrollTop / rootFontSizePx);
+    const distanceToBottomRems = Math.abs(
+      (scrollTop + clientHeight - scrollHeight) / rootFontSizePx,
+    );
 
     // Figure out if we're scrolled to the bottom
     return (distanceToBottomRems < SCROLLED_TO_BOTTOM_THRESHOLD_REMS);
@@ -260,11 +268,11 @@ const AutoscrollToBottomContainer: React.FC<Props> = (props) => {
 
     // Update state
     dispatch({
-      type: ActionType.NowScrolledToBottom,
+      type: ActionType.HideJumpToBottomButton,
     });
 
     // Scroll to bottom
-    container.current.scrollTop = 0;
+    container.current.scrollTop = container.current.scrollHeight;
   };
 
   /*----------------------------------------*/
@@ -281,13 +289,10 @@ const AutoscrollToBottomContainer: React.FC<Props> = (props) => {
       return;
     }
 
-    // Check if now scrolled to bottom
-    const nowScrolledToBottom = isScrolledToBottom();
-
-    // Remember if now no longer scrolled to bottom
-    if (nowScrolledToBottom) {
+    // If scrolled to bottom, hide the button
+    if (isScrolledToBottom()) {
       dispatch({
-        type: ActionType.NowScrolledToBottom,
+        type: ActionType.HideJumpToBottomButton,
       });
     }
   };
@@ -318,8 +323,10 @@ const AutoscrollToBottomContainer: React.FC<Props> = (props) => {
       const currentItemIds = getItemIds(items);
 
       // Check if new content appeared at bottom
-      const newContentAtBottom = (
+      const newContentAppeared = (
         currentItemIds.length > 0
+        && lastItemIds.current
+        && lastItemIds.current.length > 0
         && (
           currentItemIds[currentItemIds.length - 1]
           !== lastItemIds.current[lastItemIds.current.length - 1]
@@ -327,7 +334,7 @@ const AutoscrollToBottomContainer: React.FC<Props> = (props) => {
       );
 
       // Do nothing if no new content
-      if (!newContentAtBottom) {
+      if (!newContentAppeared) {
         return;
       }
 
@@ -338,7 +345,7 @@ const AutoscrollToBottomContainer: React.FC<Props> = (props) => {
       } else {
         // Not scrolled to bottom. Show "jump to bottom" button.
         dispatch({
-          type: ActionType.NewContentAtBottom,
+          type: ActionType.ShowJumpToBottomButton,
         });
       }
 
@@ -401,6 +408,9 @@ const AutoscrollToBottomContainer: React.FC<Props> = (props) => {
         onScroll={handleScroll}
         ref={container}
       >
+        {/* Message before items */}
+        {messageBeforeItems}
+
         {/* Items */}
         {
           items
@@ -416,6 +426,9 @@ const AutoscrollToBottomContainer: React.FC<Props> = (props) => {
               );
             })
         }
+
+        {/* Message after items */}
+        {messageAfterItems}
       </div>
     </div>
   );