dce-reactkit 3.5.6 → 3.5.8

package/dist/cjs/index.js

@@ -40733,35 +40733,31 @@ const idify = (str) => {
 /**
  * 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
  */
 /*------------------------------------------------------------------------*/
 /* -------------------------------- Style ------------------------------- */
 /*------------------------------------------------------------------------*/
 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;
@@ -40778,7 +40774,7 @@ const style = `
     text-align: center;
   }
 
-  .ScrollLockToBottom-item-container {
+  .AutoscrollToBottomContainer-item-container {
     /* Normal Height */
     position: relative;
     z-index: 1;
@@ -40789,7 +40785,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 -------------------------- */
 /*------------------------------------------------------------------------*/
@@ -40810,8 +40806,6 @@ var ActionType;
 (function (ActionType) {
     // Identify that the user is now scrolled to the bottom
     ActionType["NowScrolledToBottom"] = "NowScrolledToBottom";
-    // Identify that the user scrolled away from the bottom
-    ActionType["NowScrolledAwayFromBottom"] = "NowScrolledAwayFromBottom";
     // Identify that new content appeared at the bottom but is not visible
     ActionType["NewContentAtBottom"] = "NewContentAtBottom";
 })(ActionType || (ActionType = {}));
@@ -40825,20 +40819,11 @@ const reducer = (state, action) => {
     switch (action.type) {
         case ActionType.NowScrolledToBottom: {
             return Object.assign(Object.assign({}, state), { 
-                // Store the event
-                wasScrolledToBottom: true, 
                 // Hide the "jump to bottom" button
                 jumpToBottomButtonVisible: false });
         }
-        case ActionType.NowScrolledAwayFromBottom: {
-            return Object.assign(Object.assign({}, state), { 
-                // Store the event
-                wasScrolledToBottom: false });
-        }
         case ActionType.NewContentAtBottom: {
             return Object.assign(Object.assign({}, state), { 
-                // Store the event
-                wasScrolledToBottom: false, 
                 // Show the "jump to bottom" button
                 jumpToBottomButtonVisible: true });
         }
@@ -40850,7 +40835,7 @@ const reducer = (state, action) => {
 /*------------------------------------------------------------------------*/
 /* ------------------------------ Component ----------------------------- */
 /*------------------------------------------------------------------------*/
-const ScrollLockToBottom = (props) => {
+const AutoscrollToBottomContainer = (props) => {
     /*------------------------------------------------------------------------*/
     /* -------------------------------- Setup ------------------------------- */
     /*------------------------------------------------------------------------*/
@@ -40860,17 +40845,17 @@ const ScrollLockToBottom = (props) => {
     /* -------------- State ------------- */
     // Initial state
     const initialState = {
-        wasScrolledToBottom: true,
         jumpToBottomButtonVisible: false,
     };
     // Initialize state
     const [state, dispatch] = React.useReducer(reducer, initialState);
     // Destructure common state
-    const { wasScrolledToBottom, jumpToBottomButtonVisible, } = state;
+    const { jumpToBottomButtonVisible, } = state;
     /* -------------- Refs -------------- */
     // Initialize refs
     const lastItemIds = React.useRef([]);
     const container = React.useRef(null);
+    const wasScrolledToBottomBeforeItemsUpdate = React.useRef(true);
     /*------------------------------------------------------------------------*/
     /* ------------------------- Component Functions ------------------------ */
     /*------------------------------------------------------------------------*/
@@ -40931,11 +40916,6 @@ const ScrollLockToBottom = (props) => {
                 type: ActionType.NowScrolledToBottom,
             });
         }
-        else {
-            dispatch({
-                type: ActionType.NowScrolledAwayFromBottom,
-            });
-        }
     };
     /*------------------------------------------------------------------------*/
     /* ------------------------- Lifecycle Functions ------------------------ */
@@ -40949,7 +40929,7 @@ const ScrollLockToBottom = (props) => {
         scrollToBottom();
     }, []);
     /**
-     * Update (also called on mount)
+     * Update (also called on mount): autoscroll
      * @author Gabe Abrams
      */
     React.useEffect(() => {
@@ -40964,7 +40944,7 @@ const ScrollLockToBottom = (props) => {
             return;
         }
         // Check if used to be scrolled to the bottom
-        if (wasScrolledToBottom) {
+        if (wasScrolledToBottomBeforeItemsUpdate.current) {
             // Was scrolled to the bottom! Autoscroll.
             scrollToBottom();
         }
@@ -40976,6 +40956,10 @@ const ScrollLockToBottom = (props) => {
         }
         // Update last item ids
         lastItemIds.current = currentItemIds;
+        // Remember if we were scrolled to the bottom before the update
+        return () => {
+            wasScrolledToBottomBeforeItemsUpdate.current = isScrolledToBottom();
+        };
     }, [items]);
     /*------------------------------------------------------------------------*/
     /* ------------------------------- Render ------------------------------- */
@@ -40986,25 +40970,21 @@ const ScrollLockToBottom = (props) => {
     // Jump to Bottom button
     let jumpToBottomButton;
     if (jumpToBottomButtonVisible) {
-        jumpToBottomButton = (React__default["default"].createElement("div", { className: `ScrollLockToBottom-jump-to-bottom-container ScrollLockToBottom-for-${idify(itemsName !== null && itemsName !== void 0 ? itemsName : 'items')}` },
-            React__default["default"].createElement("button", { type: "button", className: `ScrollLockToBottom-jump-to-bottom-button ScrollLockToBottom-jump-to-bottom-button-for-${idify(itemsName !== null && itemsName !== void 0 ? itemsName : 'items')} btn btn-sm btn-${jumpToBottomButtonVariant} pt-0 pb-0`, onClick: scrollToBottom, "aria-label": "scroll back to bottom and show new content" },
+        jumpToBottomButton = (React__default["default"].createElement("div", { className: `AutoscrollToBottomContainer-jump-to-bottom-container AutoscrollToBottomContainer-for-${idify(itemsName !== null && itemsName !== void 0 ? itemsName : 'items')}` },
+            React__default["default"].createElement("button", { type: "button", className: `AutoscrollToBottomContainer-jump-to-bottom-button AutoscrollToBottomContainer-jump-to-bottom-button-for-${idify(itemsName !== null && itemsName !== void 0 ? itemsName : 'items')} btn btn-sm btn-${jumpToBottomButtonVariant} pt-0 pb-0`, onClick: scrollToBottom, "aria-label": "scroll back to bottom and show new content" },
                 "New",
                 ' ', itemsName !== null && itemsName !== void 0 ? itemsName : 'Content',
                 React__default["default"].createElement(reactFontawesome.FontAwesomeIcon, { icon: freeSolidSvgIcons.faChevronDown, className: "ms-1" }))));
     }
     // Main UI
-    return (React__default["default"].createElement("div", { className: "ScrollLockToBottom-outer-container bg-warning" },
+    return (React__default["default"].createElement("div", { className: "AutoscrollToBottomContainer-outer-container" },
         React__default["default"].createElement("style", null, style),
         jumpToBottomButton,
-        React__default["default"].createElement("div", { className: "ScrollLockToBottom-scrollable-container", onScroll: () => {
-                handleScroll();
-            }, ref: container }, items
+        React__default["default"].createElement("div", { className: "AutoscrollToBottomContainer-scrollable-container", onScroll: handleScroll, ref: container }, items
             // Render each item with a key
             .map((item) => {
-            return (React__default["default"].createElement("div", { className: "ScrollLockToBottom-item-container", key: item.id }, item.item));
-        })
-            // Reverse order because flex column is reverse
-            .reverse())));
+            return (React__default["default"].createElement("div", { className: "AutoscrollToBottomContainer-item-container", key: item.id }, item.item));
+        }))));
 };
 
 /**
@@ -42887,6 +42867,7 @@ var DayOfWeek;
 var DayOfWeek$1 = DayOfWeek;
 
 exports.AppWrapper = AppWrapper;
+exports.AutoscrollToBottomContainer = AutoscrollToBottomContainer;
 exports.ButtonInputGroup = ButtonInputGroup;
 exports.CSVDownloadButton = CSVDownloadButton;
 exports.CheckboxButton = CheckboxButton;
@@ -42919,7 +42900,6 @@ exports.PopPendingMark = PopPendingMark;
 exports.PopSuccessMark = PopSuccessMark;
 exports.RadioButton = RadioButton;
 exports.ReactKitErrorCode = ReactKitErrorCode$1;
-exports.ScrollLockToBottom = ScrollLockToBottom;
 exports.SimpleDateChooser = SimpleDateChooser;
 exports.TabBox = TabBox;
 exports.ToggleSwitch = ToggleSwitch;