feat(ScrollWrapper): add signals for button press at top and bottom o…

…f content (#533)

* fix(ScrollWrapper): add signals for button press at top and bottom of content

* fix(ScrollWrapper): remove extra code from story

* fix: update ts definitions

packages/@lightningjs/ui-components/src/components/ScrollWrapper/ScrollWrapper.d.ts

@@ -75,6 +75,22 @@ declare namespace ScrollWrapper {
      */
     showScrollBar?: boolean;
   }
+
+  export interface TypeConfig extends lng.Component.TypeConfig {
+    SignalMapType: SignalMap;
+  }
+
+  export type SignalMap = {
+    /**
+     * emitted when user is at the top of the content and presses up again
+     */
+    onUpAtTop(): void;
+
+    /**
+     * emitted when user is at the bottom of the content and presses bottom again
+     */
+    onDownAtBottom(): void;
+  };
 }
 
 declare class ScrollWrapper<

packages/@lightningjs/ui-components/src/components/ScrollWrapper/ScrollWrapper.js

@@ -247,6 +247,8 @@ export default class ScrollWrapper extends Base {
         this.fireAncestors('$scrollChanged', 'endDown', this);
         this._updateFadeContainer();
       }
+    } else {
+      this.signal('onDownAtBottom');
     }
   }
 
@@ -278,6 +280,8 @@ export default class ScrollWrapper extends Base {
         this._isEndContentVisible = false;
         this._updateFadeContainer();
       }
+    } else {
+      this.signal('onUpAtTop');
     }
   }
 

packages/@lightningjs/ui-components/src/components/ScrollWrapper/ScrollWrapper.mdx

@@ -136,3 +136,13 @@ Resets the `y` value of both the content and the scroll bar.
 #### $scrollChanged('endUp'|'endDown', this)
 
 Event fired via `fireAncestors`, is triggered when scroll reaches the top or bottom of the scroll boundaries.
+
+### Signals
+
+#### onUpAtTop
+
+Fired when user is at the top of the content within the ScrollWrapper and presses up again.
+
+#### onDownAtBottom
+
+Fired when user is at the bottom of the content within the ScrollWrapper and presses down again.

packages/@lightningjs/ui-components/src/components/ScrollWrapper/ScrollWrapper.test.js

@@ -252,6 +252,27 @@ describe('ScrollWrapper', () => {
     );
   });
 
+  it('should fire a signal when pressing Up when already at the top of the scroll container', () => {
+    jest.spyOn(scrollWrapper, 'signal');
+    expect(scrollWrapper.signal).not.toHaveBeenCalled();
+
+    testRenderer.keyPress('Up');
+    testRenderer.update();
+    expect(scrollWrapper.signal).toHaveBeenCalledWith('onUpAtTop');
+  });
+
+  it('should fire a signal when pressing Down when already at the bottom of the scroll container', () => {
+    jest.spyOn(scrollWrapper, 'signal');
+    expect(scrollWrapper.signal).not.toHaveBeenCalled();
+
+    // Simulate scrolling to the bottom and then some
+    for (let i = 0; i < 50; i++) {
+      testRenderer.keyPress('Down');
+      testRenderer.update();
+    }
+    expect(scrollWrapper.signal).toHaveBeenCalledWith('onDownAtBottom');
+  });
+
   it('should scroll up by the scroll step', () => {
     scrollWrapper.scrollStep = 100;
     testRenderer.keyPress('Down');