dce-reactkit 3.5.7 → 3.5.9

package/package.json

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

package/src/components/AutoscrollToBottomContainer.tsx

@@ -58,17 +58,11 @@ const style = `
 
   .AutoscrollToBottomContainer-scrollable-container {
     /* Take up max 100% height, don't take it up if not needed */
-    /* (so column-reverse layout doesn't start at the bottom) */
     max-height: 100%;
     overflow-y: auto;
 
     /* Allow children to position */
     position: relative;
-
-    /* Reverse order of children so scroll starts at bottom */
-    /* (but children will have to be rendered in reverse order) */
-    display: flex;
-    flex-direction: column-reverse;
   }
 
   .AutoscrollToBottomContainer-jump-to-bottom-container {
@@ -101,7 +95,7 @@ const style = `
 
 // Scrolled to bottom threshold
 // (how close you have to be to the bottom for it to count as the bottom)
-const SCROLLED_TO_BOTTOM_THRESHOLD_REMS = 2;
+const SCROLLED_TO_BOTTOM_THRESHOLD_REMS = 1.5;
 
 /*------------------------------------------------------------------------*/
 /* -------------------------- Static Functions -------------------------- */
@@ -126,8 +120,6 @@ const getItemIds = (items: AutoScrollItem[]): (string | number)[] => {
 /* -------- State Definition -------- */
 
 type State = {
-  // If true, the user was scrolled to the bottom after last update
-  wasScrolledToBottom: boolean,
   // If true, the "jump to bottom" button is visible
   jumpToBottomButtonVisible: boolean,
 };
@@ -136,12 +128,10 @@ type State = {
 
 // Types of actions
 enum ActionType {
-  // Identify that the user is now scrolled to the bottom
-  NowScrolledToBottom = 'NowScrolledToBottom',
-  // Identify that the user scrolled away from the bottom
-  NowScrolledAwayFromBottom = 'NowScrolledAwayFromBottom',
-  // 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
@@ -149,9 +139,8 @@ type Action = (
   | {
     // Action type
     type: (
-      | ActionType.NowScrolledToBottom
-      | ActionType.NowScrolledAwayFromBottom
-      | ActionType.NewContentAtBottom
+      | ActionType.HideJumpToBottomButton
+      | ActionType.ShowJumpToBottomButton
     ),
   }
 );
@@ -164,28 +153,15 @@ type Action = (
  */
 const reducer = (state: State, action: Action): State => {
   switch (action.type) {
-    case ActionType.NowScrolledToBottom: {
+    case ActionType.HideJumpToBottomButton: {
       return {
         ...state,
-        // Store the event
-        wasScrolledToBottom: true,
-        // Hide the "jump to bottom" button
         jumpToBottomButtonVisible: false,
       };
     }
-    case ActionType.NowScrolledAwayFromBottom: {
-      return {
-        ...state,
-        // Store the event
-        wasScrolledToBottom: false,
-      };
-    }
-    case ActionType.NewContentAtBottom: {
+    case ActionType.ShowJumpToBottomButton: {
       return {
         ...state,
-        // Store the event
-        wasScrolledToBottom: false,
-        // Show the "jump to bottom" button
         jumpToBottomButtonVisible: true,
       };
     }
@@ -217,7 +193,6 @@ const AutoscrollToBottomContainer: React.FC<Props> = (props) => {
 
   // Initial state
   const initialState: State = {
-    wasScrolledToBottom: true,
     jumpToBottomButtonVisible: false,
   };
 
@@ -226,7 +201,6 @@ const AutoscrollToBottomContainer: React.FC<Props> = (props) => {
 
   // Destructure common state
   const {
-    wasScrolledToBottom,
     jumpToBottomButtonVisible,
   } = state;
 
@@ -235,6 +209,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);
 
   /*------------------------------------------------------------------------*/
   /* ------------------------- Component Functions ------------------------ */
@@ -258,6 +233,8 @@ const AutoscrollToBottomContainer: React.FC<Props> = (props) => {
     // Get info about container
     const {
       scrollTop,
+      scrollHeight,
+      clientHeight,
     } = container.current;
 
     // Distance to bottom
@@ -265,7 +242,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);
@@ -283,11 +262,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;
   };
 
   /*----------------------------------------*/
@@ -304,17 +283,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) {
-      dispatch({
-        type: ActionType.NowScrolledToBottom,
-      });
-    } else {
+    // If scrolled to bottom, hide the button
+    if (isScrolledToBottom()) {
       dispatch({
-        type: ActionType.NowScrolledAwayFromBottom,
+        type: ActionType.HideJumpToBottomButton,
       });
     }
   };
@@ -336,7 +308,7 @@ const AutoscrollToBottomContainer: React.FC<Props> = (props) => {
   );
 
   /**
-   * Update (also called on mount)
+   * Update (also called on mount): autoscroll
    * @author Gabe Abrams
    */
   useEffect(
@@ -345,7 +317,7 @@ const AutoscrollToBottomContainer: React.FC<Props> = (props) => {
       const currentItemIds = getItemIds(items);
 
       // Check if new content appeared at bottom
-      const newContentAtBottom = (
+      const newContentAppeared = (
         currentItemIds.length > 0
         && (
           currentItemIds[currentItemIds.length - 1]
@@ -354,23 +326,28 @@ const AutoscrollToBottomContainer: React.FC<Props> = (props) => {
       );
 
       // Do nothing if no new content
-      if (!newContentAtBottom) {
+      if (!newContentAppeared) {
         return;
       }
 
       // Check if used to be scrolled to the bottom
-      if (wasScrolledToBottom) {
+      if (wasScrolledToBottomBeforeItemsUpdate.current) {
         // Was scrolled to the bottom! Autoscroll.
         scrollToBottom();
       } else {
         // Not scrolled to bottom. Show "jump to bottom" button.
         dispatch({
-          type: ActionType.NewContentAtBottom,
+          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],
   );
@@ -420,9 +397,7 @@ const AutoscrollToBottomContainer: React.FC<Props> = (props) => {
       {/* Scrollable Item Container */}
       <div
         className="AutoscrollToBottomContainer-scrollable-container"
-        onScroll={() => {
-          handleScroll();
-        }}
+        onScroll={handleScroll}
         ref={container}
       >
         {/* Items */}
@@ -439,8 +414,6 @@ const AutoscrollToBottomContainer: React.FC<Props> = (props) => {
                 </div>
               );
             })
-            // Reverse order because flex column is reverse
-            .reverse()
         }
       </div>
     </div>