dce-reactkit 3.5.6 → 3.5.8

package/dist/esm/types/components/{ScrollLockToBottomContainer.d.ts → AutoscrollToBottomContainer.d.ts}

@@ -1,7 +1,9 @@
 /**
  * Container that automatically scrolls when new items are added,
  *   lets the user scroll up to see old items, but resumes
- *   autoscroll when the user scrolls back to the bottom
+ *   autoscroll when the user scrolls back to the bottom.
+ *   Note: takes up full height of parent, so parent should
+ *   have a determined height for the scroll to work.
  * @author Gabe Abrams
  */
 import React from 'react';
@@ -15,5 +17,5 @@ type AutoScrollItem = {
     id: string | number;
     item: React.ReactNode;
 };
-declare const ScrollLockToBottom: React.FC<Props>;
-export default ScrollLockToBottom;
+declare const AutoscrollToBottomContainer: React.FC<Props>;
+export default AutoscrollToBottomContainer;

package/dist/esm/types/index.d.ts

@@ -19,7 +19,7 @@ import CSVDownloadButton from './components/CSVDownloadButton';
 import DBEntryManagerPanel from './components/DBEntryManagerPanel';
 import Tooltip from './components/Tooltip';
 import ToggleSwitch from './components/ToggleSwitch';
-import ScrollLockToBottom from './components/ScrollLockToBottomContainer';
+import AutoscrollToBottomContainer from './components/AutoscrollToBottomContainer';
 import ErrorWithCode from './errors/ErrorWithCode';
 import MINUTE_IN_MS from './constants/MINUTE_IN_MS';
 import HOUR_IN_MS from './constants/HOUR_IN_MS';
@@ -83,4 +83,4 @@ import PickableItem from './components/ItemPicker/types/PickableItem';
 import DBEntry from './components/DBEntryManagerPanel/types/DBEntry';
 import DBEntryField from './components/DBEntryManagerPanel/types/DBEntryField';
 import DBEntryFieldType from './components/DBEntryManagerPanel/types/DBEntryFieldType';
-export { AppWrapper, LoadingSpinner, ErrorBox, Modal, TabBox, RadioButton, CheckboxButton, ButtonInputGroup, SimpleDateChooser, Drawer, PopSuccessMark, PopFailureMark, PopPendingMark, CopiableBox, ItemPicker, LogReviewer, IntelliTable, CSVDownloadButton, DBEntryManagerPanel, Tooltip, ToggleSwitch, ScrollLockToBottom, alert, confirm, showFatalError, ErrorWithCode, MINUTE_IN_MS, HOUR_IN_MS, DAY_IN_MS, DynamicWord, abbreviate, avg, ceilToNumDecimals, floorToNumDecimals, forceNumIntoBounds, padDecimalZeros, padZerosLeft, roundToNumDecimals, sum, waitMs, getOrdinal, getTimeInfoInET, stubServerEndpoint, startMinWait, getHumanReadableDate, getPartOfDay, stringsToHumanReadableList, onlyKeepLetters, parallelLimit, getMonthName, genCSV, canReviewLogs, isMobileOrTablet, extractProp, compareArraysByProp, genCommaList, validateEmail, validatePhoneNumber, validateString, getLocalTimeInfo, idify, initClient, visitServerEndpoint, logClientEvent, addFatalErrorHandler, initServer, genRouteHandler, handleError, handleSuccess, initLogCollection, addDBEditorEndpoints, ModalButtonType, ModalSize, ModalType, ReactKitErrorCode, Variant, DayOfWeek, Log, LogType, LogSource, LogAction, LogBuiltInMetadata, LogMetadataType, IntelliTableColumn, PickableItem, DBEntry, DBEntryField, DBEntryFieldType, ParamType, };
+export { AppWrapper, LoadingSpinner, ErrorBox, Modal, TabBox, RadioButton, CheckboxButton, ButtonInputGroup, SimpleDateChooser, Drawer, PopSuccessMark, PopFailureMark, PopPendingMark, CopiableBox, ItemPicker, LogReviewer, IntelliTable, CSVDownloadButton, DBEntryManagerPanel, Tooltip, ToggleSwitch, AutoscrollToBottomContainer, alert, confirm, showFatalError, ErrorWithCode, MINUTE_IN_MS, HOUR_IN_MS, DAY_IN_MS, DynamicWord, abbreviate, avg, ceilToNumDecimals, floorToNumDecimals, forceNumIntoBounds, padDecimalZeros, padZerosLeft, roundToNumDecimals, sum, waitMs, getOrdinal, getTimeInfoInET, stubServerEndpoint, startMinWait, getHumanReadableDate, getPartOfDay, stringsToHumanReadableList, onlyKeepLetters, parallelLimit, getMonthName, genCSV, canReviewLogs, isMobileOrTablet, extractProp, compareArraysByProp, genCommaList, validateEmail, validatePhoneNumber, validateString, getLocalTimeInfo, idify, initClient, visitServerEndpoint, logClientEvent, addFatalErrorHandler, initServer, genRouteHandler, handleError, handleSuccess, initLogCollection, addDBEditorEndpoints, ModalButtonType, ModalSize, ModalType, ReactKitErrorCode, Variant, DayOfWeek, Log, LogType, LogSource, LogAction, LogBuiltInMetadata, LogMetadataType, IntelliTableColumn, PickableItem, DBEntry, DBEntryField, DBEntryFieldType, ParamType, };

package/dist/index.d.ts

@@ -609,7 +609,9 @@ declare const ToggleSwitch: React.FC<Props$1>;
 /**
  * Container that automatically scrolls when new items are added,
  *   lets the user scroll up to see old items, but resumes
- *   autoscroll when the user scrolls back to the bottom
+ *   autoscroll when the user scrolls back to the bottom.
+ *   Note: takes up full height of parent, so parent should
+ *   have a determined height for the scroll to work.
  * @author Gabe Abrams
  */
 
@@ -622,7 +624,7 @@ type AutoScrollItem = {
     id: string | number;
     item: React.ReactNode;
 };
-declare const ScrollLockToBottom: React.FC<Props>;
+declare const AutoscrollToBottomContainer: React.FC<Props>;
 
 /**
  * An error with a code
@@ -1410,4 +1412,4 @@ declare const LogBuiltInMetadata: {
     };
 };
 
-export { AppWrapper, ButtonInputGroup, CSVDownloadButton, CheckboxButton, CopiableBox, DAY_IN_MS, DBEntry, DBEntryField, DBEntryFieldType, DBEntryManagerPanel, DayOfWeek, Drawer, DynamicWord, ErrorBox, ErrorWithCode, HOUR_IN_MS, IntelliTable, IntelliTableColumn, ItemPicker, LoadingSpinner, Log, LogAction, LogBuiltInMetadata, LogMetadataType, LogReviewer, LogSource, LogType, MINUTE_IN_MS, Modal, ModalButtonType, ModalSize, ModalType, ParamType, PickableItem, PopFailureMark, PopPendingMark, PopSuccessMark, RadioButton, ReactKitErrorCode, ScrollLockToBottom, SimpleDateChooser, TabBox, ToggleSwitch, Tooltip, Variant, abbreviate, addDBEditorEndpoints, addFatalErrorHandler, alert, avg, canReviewLogs, ceilToNumDecimals, compareArraysByProp, confirm, extractProp, floorToNumDecimals, forceNumIntoBounds, genCSV, genCommaList, genRouteHandler, getHumanReadableDate, getLocalTimeInfo, getMonthName, getOrdinal, getPartOfDay, getTimeInfoInET, handleError, handleSuccess, idify, initClient, initLogCollection, initServer, isMobileOrTablet, logClientEvent, onlyKeepLetters, padDecimalZeros, padZerosLeft, parallelLimit, roundToNumDecimals, showFatalError, startMinWait, stringsToHumanReadableList, stubServerEndpoint, sum, validateEmail, validatePhoneNumber, validateString, visitServerEndpoint, waitMs };
+export { AppWrapper, AutoscrollToBottomContainer, ButtonInputGroup, CSVDownloadButton, CheckboxButton, CopiableBox, DAY_IN_MS, DBEntry, DBEntryField, DBEntryFieldType, DBEntryManagerPanel, DayOfWeek, Drawer, DynamicWord, ErrorBox, ErrorWithCode, HOUR_IN_MS, IntelliTable, IntelliTableColumn, ItemPicker, LoadingSpinner, Log, LogAction, LogBuiltInMetadata, LogMetadataType, LogReviewer, LogSource, LogType, MINUTE_IN_MS, Modal, ModalButtonType, ModalSize, ModalType, ParamType, PickableItem, PopFailureMark, PopPendingMark, PopSuccessMark, RadioButton, ReactKitErrorCode, SimpleDateChooser, TabBox, ToggleSwitch, Tooltip, Variant, abbreviate, addDBEditorEndpoints, addFatalErrorHandler, alert, avg, canReviewLogs, ceilToNumDecimals, compareArraysByProp, confirm, extractProp, floorToNumDecimals, forceNumIntoBounds, genCSV, genCommaList, genRouteHandler, getHumanReadableDate, getLocalTimeInfo, getMonthName, getOrdinal, getPartOfDay, getTimeInfoInET, handleError, handleSuccess, idify, initClient, initLogCollection, initServer, isMobileOrTablet, logClientEvent, onlyKeepLetters, padDecimalZeros, padZerosLeft, parallelLimit, roundToNumDecimals, showFatalError, startMinWait, stringsToHumanReadableList, stubServerEndpoint, sum, validateEmail, validatePhoneNumber, validateString, visitServerEndpoint, waitMs };

package/package.json

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

package/src/components/{ScrollLockToBottomContainer.tsx → AutoscrollToBottomContainer.tsx}

@@ -1,7 +1,9 @@
 /**
  * Container that automatically scrolls when new items are added,
  *   lets the user scroll up to see old items, but resumes
- *   autoscroll when the user scrolls back to the bottom
+ *   autoscroll when the user scrolls back to the bottom.
+ *   Note: takes up full height of parent, so parent should
+ *   have a determined height for the scroll to work.
  * @author Gabe Abrams
  */
 
@@ -48,28 +50,22 @@ type AutoScrollItem = {
 /*------------------------------------------------------------------------*/
 
 const style = `
-  .ScrollLockToBottom-outer-container {
+  .AutoscrollToBottomContainer-outer-container {
     /* Take up all space */
     height: 100%;
     position: relative;
   }
 
-  .ScrollLockToBottom-scrollable-container {
+  .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;
   }
 
-  .ScrollLockToBottom-jump-to-bottom-container {
+  .AutoscrollToBottomContainer-jump-to-bottom-container {
     /* Don't take any space in parent */
     height: 0;
     overflow: visible;
@@ -86,7 +82,7 @@ const style = `
     text-align: center;
   }
 
-  .ScrollLockToBottom-item-container {
+  .AutoscrollToBottomContainer-item-container {
     /* Normal Height */
     position: relative;
     z-index: 1;
@@ -99,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 -------------------------- */
@@ -124,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,8 +130,6 @@ type State = {
 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',
 }
@@ -148,7 +140,6 @@ type Action = (
     // Action type
     type: (
       | ActionType.NowScrolledToBottom
-      | ActionType.NowScrolledAwayFromBottom
       | ActionType.NewContentAtBottom
     ),
   }
@@ -165,24 +156,13 @@ const reducer = (state: State, action: Action): State => {
     case ActionType.NowScrolledToBottom: {
       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: {
       return {
         ...state,
-        // Store the event
-        wasScrolledToBottom: false,
         // Show the "jump to bottom" button
         jumpToBottomButtonVisible: true,
       };
@@ -197,7 +177,7 @@ const reducer = (state: State, action: Action): State => {
 /* ------------------------------ Component ----------------------------- */
 /*------------------------------------------------------------------------*/
 
-const ScrollLockToBottom: React.FC<Props> = (props) => {
+const AutoscrollToBottomContainer: React.FC<Props> = (props) => {
   /*------------------------------------------------------------------------*/
   /* -------------------------------- Setup ------------------------------- */
   /*------------------------------------------------------------------------*/
@@ -215,7 +195,6 @@ const ScrollLockToBottom: React.FC<Props> = (props) => {
 
   // Initial state
   const initialState: State = {
-    wasScrolledToBottom: true,
     jumpToBottomButtonVisible: false,
   };
 
@@ -224,7 +203,6 @@ const ScrollLockToBottom: React.FC<Props> = (props) => {
 
   // Destructure common state
   const {
-    wasScrolledToBottom,
     jumpToBottomButtonVisible,
   } = state;
 
@@ -233,6 +211,7 @@ const ScrollLockToBottom: React.FC<Props> = (props) => {
   // Initialize refs
   const lastItemIds = useRef<(string | number)[]>([]);
   const container = useRef<HTMLDivElement | null>(null);
+  const wasScrolledToBottomBeforeItemsUpdate = useRef<boolean>(true);
 
   /*------------------------------------------------------------------------*/
   /* ------------------------- Component Functions ------------------------ */
@@ -310,10 +289,6 @@ const ScrollLockToBottom: React.FC<Props> = (props) => {
       dispatch({
         type: ActionType.NowScrolledToBottom,
       });
-    } else {
-      dispatch({
-        type: ActionType.NowScrolledAwayFromBottom,
-      });
     }
   };
 
@@ -334,7 +309,7 @@ const ScrollLockToBottom: React.FC<Props> = (props) => {
   );
 
   /**
-   * Update (also called on mount)
+   * Update (also called on mount): autoscroll
    * @author Gabe Abrams
    */
   useEffect(
@@ -357,7 +332,7 @@ const ScrollLockToBottom: React.FC<Props> = (props) => {
       }
 
       // Check if used to be scrolled to the bottom
-      if (wasScrolledToBottom) {
+      if (wasScrolledToBottomBeforeItemsUpdate.current) {
         // Was scrolled to the bottom! Autoscroll.
         scrollToBottom();
       } else {
@@ -369,6 +344,11 @@ const ScrollLockToBottom: React.FC<Props> = (props) => {
 
       // Update last item ids
       lastItemIds.current = currentItemIds;
+
+      // Remember if we were scrolled to the bottom before the update
+      return () => {
+        wasScrolledToBottomBeforeItemsUpdate.current = isScrolledToBottom();
+      };
     },
     [items],
   );
@@ -385,10 +365,10 @@ const ScrollLockToBottom: React.FC<Props> = (props) => {
   let jumpToBottomButton: React.ReactNode;
   if (jumpToBottomButtonVisible) {
     jumpToBottomButton = (
-      <div className={`ScrollLockToBottom-jump-to-bottom-container ScrollLockToBottom-for-${idify(itemsName ?? 'items')}`}>
+      <div className={`AutoscrollToBottomContainer-jump-to-bottom-container AutoscrollToBottomContainer-for-${idify(itemsName ?? 'items')}`}>
         <button
           type="button"
-          className={`ScrollLockToBottom-jump-to-bottom-button ScrollLockToBottom-jump-to-bottom-button-for-${idify(itemsName ?? 'items')} btn btn-sm btn-${jumpToBottomButtonVariant} pt-0 pb-0`}
+          className={`AutoscrollToBottomContainer-jump-to-bottom-button AutoscrollToBottomContainer-jump-to-bottom-button-for-${idify(itemsName ?? 'items')} btn btn-sm btn-${jumpToBottomButtonVariant} pt-0 pb-0`}
           onClick={scrollToBottom}
           aria-label="scroll back to bottom and show new content"
         >
@@ -406,7 +386,7 @@ const ScrollLockToBottom: React.FC<Props> = (props) => {
 
   // Main UI
   return (
-    <div className="ScrollLockToBottom-outer-container bg-warning">
+    <div className="AutoscrollToBottomContainer-outer-container">
       {/* Style */}
       <style>
         {style}
@@ -417,10 +397,8 @@ const ScrollLockToBottom: React.FC<Props> = (props) => {
 
       {/* Scrollable Item Container */}
       <div
-        className="ScrollLockToBottom-scrollable-container"
-        onScroll={() => {
-          handleScroll();
-        }}
+        className="AutoscrollToBottomContainer-scrollable-container"
+        onScroll={handleScroll}
         ref={container}
       >
         {/* Items */}
@@ -430,15 +408,13 @@ const ScrollLockToBottom: React.FC<Props> = (props) => {
             .map((item) => {
               return (
                 <div
-                  className="ScrollLockToBottom-item-container"
+                  className="AutoscrollToBottomContainer-item-container"
                   key={item.id}
                 >
                   {item.item}
                 </div>
               );
             })
-            // Reverse order because flex column is reverse
-            .reverse()
         }
       </div>
     </div>
@@ -450,4 +426,4 @@ const ScrollLockToBottom: React.FC<Props> = (props) => {
 /*------------------------------------------------------------------------*/
 
 // Export component
-export default ScrollLockToBottom;
+export default AutoscrollToBottomContainer;

package/src/index.ts

@@ -25,7 +25,7 @@ import CSVDownloadButton from './components/CSVDownloadButton';
 import DBEntryManagerPanel from './components/DBEntryManagerPanel';
 import Tooltip from './components/Tooltip';
 import ToggleSwitch from './components/ToggleSwitch';
-import ScrollLockToBottom from './components/ScrollLockToBottomContainer';
+import AutoscrollToBottomContainer from './components/AutoscrollToBottomContainer';
 
 // Import errors
 import ErrorWithCode from './errors/ErrorWithCode';
@@ -126,7 +126,7 @@ export {
   DBEntryManagerPanel,
   Tooltip,
   ToggleSwitch,
-  ScrollLockToBottom,
+  AutoscrollToBottomContainer,
   // Global functions
   alert,
   confirm,