feat(scrolling): monitor scroll position

src/components/hv-list/index.tsx

@@ -4,6 +4,7 @@ import * as Keyboard from 'hyperview/src/services/keyboard';
 import * as Logging from 'hyperview/src/services/logging';
 import * as Namespaces from 'hyperview/src/services/namespaces';
 import * as Render from 'hyperview/src/services/render';
+import * as ScrollObserver from 'hyperview/src/services/scroll-observer';
 import type {
   DOMString,
   HvComponentOnUpdate,
@@ -22,6 +23,9 @@ import type { ElementRef } from 'react';
 import { LOCAL_NAME } from 'hyperview/src/types';
 import { getAncestorByTagName } from 'hyperview/src/services';
 
+const FlatListWithScrollContext = ScrollObserver.withScrollableComponent(
+  FlatList,
+);
 export default class HvList extends PureComponent<HvComponentProps, State> {
   static namespaceURI = Namespaces.HYPERVIEW;
 
@@ -238,10 +242,11 @@ export default class HvList extends PureComponent<HvComponentProps, State> {
           const hasRefreshTrigger =
             this.props.element.getAttribute('trigger') === 'refresh';
           return (
-            <FlatList
+            <FlatListWithScrollContext
               ref={this.onRef}
               data={this.getItems()}
               horizontal={horizontal}
+              id={this.props.element.getAttribute('id')}
               keyboardDismissMode={Keyboard.getKeyboardDismissMode(
                 this.props.element,
               )}

src/components/hv-section-list/index.tsx

@@ -4,6 +4,7 @@ import * as Keyboard from 'hyperview/src/services/keyboard';
 import * as Logging from 'hyperview/src/services/logging';
 import * as Namespaces from 'hyperview/src/services/namespaces';
 import * as Render from 'hyperview/src/services/render';
+import * as ScrollObserver from 'hyperview/src/services/scroll-observer';
 import type {
   DOMString,
   HvComponentOnUpdate,
@@ -22,6 +23,10 @@ import { DOMParser } from '@instawork/xmldom';
 import type { ElementRef } from 'react';
 import { getAncestorByTagName } from 'hyperview/src/services';
 
+const SectionListWithScrollContext = ScrollObserver.withScrollableComponent(
+  SectionList,
+);
+
 const getSectionIndex = (
   sectionTitle: Element,
   sectionTitles: HTMLCollectionOf<Element>,
@@ -352,8 +357,9 @@ export default class HvSectionList extends PureComponent<
           const hasRefreshTrigger =
             this.props.element.getAttribute('trigger') === 'refresh';
           return (
-            <SectionList
+            <SectionListWithScrollContext
               ref={this.onRef}
+              id={this.props.element.getAttribute('id')}
               keyboardDismissMode={Keyboard.getKeyboardDismissMode(
                 this.props.element,
               )}

src/components/hv-view/index.tsx

@@ -2,6 +2,7 @@ import * as Keyboard from 'hyperview/src/services/keyboard';
 import * as Logging from 'hyperview/src/services/logging';
 import * as Namespaces from 'hyperview/src/services/namespaces';
 import * as Render from 'hyperview/src/services/render';
+import * as ScrollObserver from 'hyperview/src/services/scroll-observer';
 import type {
   Attributes,
   CommonProps,
@@ -27,6 +28,12 @@ import { LOCAL_NAME } from 'hyperview/src/types';
 import { addHref } from 'hyperview/src/core/hyper-ref';
 import { createStyleProp } from 'hyperview/src/services';
 
+const ScrollViewWithScrollContext = ScrollObserver.withScrollableComponent(
+  ScrollView,
+);
+const KeyboardAwareScrollViewWithScrollContext = ScrollObserver.withScrollableComponent(
+  KeyboardAwareScrollView,
+);
 export default class HvView extends PureComponent<HvComponentProps> {
   static namespaceURI = Namespaces.HYPERVIEW;
 
@@ -193,8 +200,9 @@ export default class HvView extends PureComponent<HvComponentProps> {
     if (scrollable) {
       if (hasInputFields) {
         return React.createElement(
-          KeyboardAwareScrollView,
+          KeyboardAwareScrollViewWithScrollContext,
           {
+            id: this.props.element.getAttribute('id'),
             ...this.getCommonProps(),
             ...this.getScrollViewProps(children),
             ...this.getKeyboardAwareScrollViewProps(inputFieldRefs),
@@ -203,8 +211,9 @@ export default class HvView extends PureComponent<HvComponentProps> {
         );
       }
       return React.createElement(
-        ScrollView,
+        ScrollViewWithScrollContext,
         {
+          id: this.props.element.getAttribute('id'),
           ...this.getCommonProps(),
           ...this.getScrollViewProps(children),
         },

src/core/hyper-ref/index.tsx

@@ -4,6 +4,7 @@ import * as Events from 'hyperview/src/services/events';
 import * as Logging from 'hyperview/src/services/logging';
 import * as Namespaces from 'hyperview/src/services/namespaces';
 import * as Render from 'hyperview/src/services/render';
+import * as ScrollObserver from 'hyperview/src/services/scroll-observer';
 import {
   BEHAVIOR_ATTRIBUTES,
   LOCAL_NAME,
@@ -33,6 +34,10 @@ import { XMLSerializer } from '@instawork/xmldom';
 import { X_RESPONSE_STALE_REASON } from 'hyperview/src/services/dom/types';
 import { createTestProps } from 'hyperview/src/services';
 
+const ScrollViewWithScrollContext = ScrollObserver.withScrollableComponent(
+  ScrollView,
+);
+
 /**
  * Wrapper to handle UI events
  * Stop propagation and prevent default client behavior
@@ -370,8 +375,9 @@ export default class HyperRef extends PureComponent<Props, State> {
       refreshing: this.state.refreshing,
     });
     return React.createElement(
-      ScrollView,
+      ScrollViewWithScrollContext,
       {
+        id: this.props.element.getAttribute('id'),
         refreshControl,
         showsVerticalScrollIndicator:
           this.props.element.getAttribute('shows-scroll-indicator') !== 'false',

src/services/scroll-observer/consumer.tsx

@@ -0,0 +1,45 @@
+import * as ScrollObserver from './context';
+import type {
+  ConsumerProps as Props,
+  ScrollEvent,
+  ScrollableComponentType,
+} from './types';
+import React, { PureComponent } from 'react';
+
+export const withScrollableComponent = (
+  ScrollableComponent: ScrollableComponentType,
+  eventThrottle: number = 16,
+) =>
+  class ScrollableComponentConsumer extends PureComponent<Props> {
+    static displayName = `${
+      ScrollableComponent.displayName ||
+      ScrollableComponent.name ||
+      'ScrollableComponent'
+    }Consumer`;
+
+    render(): React.ReactNode {
+      return (
+        <ScrollObserver.Context.Consumer>
+          {({ updateOffset }) => {
+            return (
+              <ScrollableComponent
+                onScroll={(event: ScrollEvent) => {
+                  if (this.props.id) {
+                    const offset = event.nativeEvent.contentOffset;
+                    requestAnimationFrame(() => {
+                      if (this.props.id) {
+                        updateOffset(this.props.id, offset);
+                      }
+                    });
+                  }
+                }}
+                scrollEventThrottle={eventThrottle}
+                // eslint-disable-next-line react/jsx-props-no-spreading
+                {...this.props}
+              />
+            );
+          }}
+        </ScrollObserver.Context.Consumer>
+      );
+    }
+  };

src/services/scroll-observer/context.tsx

@@ -0,0 +1,27 @@
+import type { Offsets, ScrollOffset } from './types';
+import React, { createContext, useState } from 'react';
+
+export const Context = createContext<{
+  offsets: Offsets;
+  updateOffset: (viewId: string, offset: ScrollOffset) => void | undefined;
+}>({
+  offsets: {},
+  updateOffset: () => undefined,
+});
+
+export const ScrollProvider = (props: { children: React.ReactNode }) => {
+  const [offsets, setOffsets] = useState<Offsets>({});
+
+  const updateOffset = (viewId: string, offset: ScrollOffset) => {
+    setOffsets({
+      ...offsets,
+      [viewId]: offset,
+    });
+  };
+
+  return (
+    <Context.Provider value={{ offsets, updateOffset }}>
+      {props.children}
+    </Context.Provider>
+  );
+};

src/services/scroll-observer/index.ts

@@ -0,0 +1,3 @@
+export * from './consumer';
+export { Context } from './context';
+export * from './provider';

src/services/scroll-observer/provider.tsx

@@ -0,0 +1,19 @@
+import React, { PureComponent } from 'react';
+import { ProviderComponentType } from './types';
+import { ScrollProvider } from './context';
+
+export const withProvider = (
+  Component: ProviderComponentType,
+): ProviderComponentType =>
+  class ComponentWithScrollContextProvider extends PureComponent {
+    render() {
+      return (
+        <ScrollProvider>
+          <Component
+            // eslint-disable-next-line react/jsx-props-no-spreading
+            {...this.props}
+          />
+        </ScrollProvider>
+      );
+    }
+  };

src/services/scroll-observer/types.ts

@@ -0,0 +1,28 @@
+import { NativeScrollEvent, NativeSyntheticEvent } from 'react-native';
+
+export type ScrollOffset = {
+  x: number;
+  y: number;
+};
+
+export type Offsets = { [key: string]: ScrollOffset };
+
+export type ScrollEvent = {
+  nativeEvent: {
+    contentOffset: ScrollOffset;
+  };
+};
+
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+export type ConsumerProps = any;
+
+export type ScrollableComponentType = {
+  id?: string;
+  onScroll?:
+    | ((event: NativeSyntheticEvent<NativeScrollEvent>) => void)
+    | undefined;
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+} & any;
+
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+export type ProviderComponentType = any;