dce-reactkit 3.5.9 → 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.9",
+  "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
@@ -187,6 +191,8 @@ const AutoscrollToBottomContainer: React.FC<Props> = (props) => {
     itemsName,
     items,
     jumpToBottomButtonVariant = Variant.Danger,
+    messageBeforeItems,
+    messageAfterItems,
   } = props;
 
   /* -------------- State ------------- */
@@ -319,6 +325,8 @@ const AutoscrollToBottomContainer: React.FC<Props> = (props) => {
       // Check if new content appeared at bottom
       const newContentAppeared = (
         currentItemIds.length > 0
+        && lastItemIds.current
+        && lastItemIds.current.length > 0
         && (
           currentItemIds[currentItemIds.length - 1]
           !== lastItemIds.current[lastItemIds.current.length - 1]
@@ -400,6 +408,9 @@ const AutoscrollToBottomContainer: React.FC<Props> = (props) => {
         onScroll={handleScroll}
         ref={container}
       >
+        {/* Message before items */}
+        {messageBeforeItems}
+
         {/* Items */}
         {
           items
@@ -415,6 +426,9 @@ const AutoscrollToBottomContainer: React.FC<Props> = (props) => {
               );
             })
         }
+
+        {/* Message after items */}
+        {messageAfterItems}
       </div>
     </div>
   );