feat: add content

core/intersection-observer/src/common/intersection.ts

@@ -0,0 +1,26 @@
+import { IRectReadOnly } from '../types';
+
+export const computeIntersection = (
+  rect1: IRectReadOnly,
+  rect2: IRectReadOnly
+) => {
+  const top = Math.max(rect1.top, rect2.top);
+  const right = Math.min(rect1.right, rect2.right);
+  const bottom = Math.min(rect1.bottom, rect2.bottom);
+  const left = Math.max(rect1.left, rect2.left);
+
+  const width = right - left;
+  const height = bottom - top;
+
+  if (width >= 0 || height >= 0) {
+    return {
+      top,
+      right,
+      bottom,
+      left,
+      width,
+      height,
+    };
+  }
+  return null;
+};

core/intersection-observer/src/react-native/IntersectionObserver.ts

@@ -2,11 +2,9 @@ import { View, ScrollView, Platform } from 'react-native';
 import { ClientRect, IntersectionObserverProps } from './types';
 import {
   defaultViewabilityConfigCallbackPairs,
-  getEmptyRect,
   parseRootMargin,
   viewabilityConfig,
 } from './utils';
-import IntersectionObserverEntry from './IntersectionObserverEntry';
 import { ItemsDimensions } from '@infinite-list/items-dimensions';
 import Observer from './Observer';
 
@@ -51,17 +49,6 @@ class IntersectionObserver {
       dimensions: this.dimensions,
     });
     this.observerMap.set(el, observer);
-
-    // const entry = new IntersectionObserverEntry({
-    //   root: this.root,
-    //   target: el,
-    //   entryKey,
-    //   boundingClientRect: getEmptyRect(),
-    //   intersectionRect: getEmptyRect(),
-    //   rootBounds: null,
-    //   dimensions: this.dimensions,
-    // });
-    // this.entryMap.set(el, entry);
   }
 
   updateClientRect(el: View) {

core/intersection-observer/src/react-native/types/intersectionObserverEntry.ts

@@ -1,8 +1,8 @@
 import { View, ScrollView } from 'react-native';
 import { ItemsDimensions } from '@infinite-list/items-dimensions';
+import { IRectReadOnly } from '../../types';
 export type IntersectionObserverEntryProps = {
   root: ScrollView;
-  // time: number;
   target: View;
   entryKey?: string;
   boundingClientRect: IRectReadOnly;
@@ -11,20 +11,6 @@ export type IntersectionObserverEntryProps = {
   dimensions: ItemsDimensions;
 };
 
-/**
- * refer to DOMRectReadOnly
- */
-export interface IRectReadOnly {
-  readonly bottom: number;
-  readonly height: number;
-  readonly left: number;
-  readonly right: number;
-  readonly top: number;
-  readonly width: number;
-  readonly x: number;
-  readonly y: number;
-}
-
 /**
  * refer to DOM IntersectionObserverEntry
  */

core/intersection-observer/src/types/index.ts

@@ -0,0 +1 @@
+export * from './intersectionObserver';

core/intersection-observer/src/types/intersectionObserver.ts

@@ -0,0 +1,13 @@
+/**
+ * refer to DOMRectReadOnly
+ */
+export interface IRectReadOnly {
+  readonly bottom: number;
+  readonly height: number;
+  readonly left: number;
+  readonly right: number;
+  readonly top: number;
+  readonly width: number;
+  readonly x: number;
+  readonly y: number;
+}

ui/scroller/src/react-native/Marshal.ts

@@ -1,7 +1,7 @@
 import { MutableRefObject } from 'react';
 import { Animated } from 'react-native';
 import ScrollHelper from './ScrollHelper';
-import { SpectrumScrollViewRef } from './types';
+import { SpectrumScrollViewRef, MarshalProps } from './types';
 import { IntersectionObserver } from '@infinite-list/intersection-observer/react-native';
 import ScrollEventHelper from './ScrollEventHelper';
 
@@ -20,7 +20,7 @@ class Marshal {
 
   readonly _rootScrollHelper: ScrollHelper;
 
-  readonly _scrollEventHelper: ScrollEventHelper;
+  readonly scrollEventHelper: ScrollEventHelper;
 
   readonly intersectionObserver: IntersectionObserver;
 
@@ -38,46 +38,70 @@ class Marshal {
 
   private _scrollUpdating: boolean;
 
-  constructor(props: {
-    id: string;
-    animated?: boolean;
-    horizontal?: boolean;
-    parentMarshal: Marshal | null;
-    scrollUpdating?: boolean;
-    scrollHelper: ScrollHelper;
-    scrollEventHelper: ScrollEventHelper;
-    ref: SpectrumScrollViewRef;
-    intersectionObserver: IntersectionObserver;
-    animatedValueX: MutableRefObject<Animated.Value>;
-    animatedValueY: MutableRefObject<Animated.Value>;
-  }) {
+  constructor(props: MarshalProps) {
     const {
       id,
       ref,
-      scrollHelper,
       parentMarshal,
       animated = false,
       horizontal = false,
       scrollUpdating = true,
-      scrollEventHelper,
       animatedValueX,
       animatedValueY,
-      intersectionObserver,
+      // intersectionObserver,
+      ownerScrollHelper,
+
+      onScroll,
+      onScrollToTop,
+      onScrollEndDrag,
+      onScrollBeginDrag,
+      onContentSizeChange,
+      onMomentumScrollEnd,
+      onMomentumScrollBegin,
+
+      stickyMode,
     } = props;
     this._ref = ref;
     this._id = id;
-    this._scrollEventHelper = scrollEventHelper;
+
     this._animated = animated;
     this._animatedValueX = animatedValueX;
     this._animatedValueY = animatedValueY;
     this._horizontal = horizontal;
-    this.intersectionObserver = intersectionObserver;
+    // this.intersectionObserver = intersectionObserver;
 
-    this._parentMarshal = parentMarshal;
+    // this._parentMarshal = parentMarshal;
 
     this.register();
     this._scrollUpdating = scrollUpdating;
-    this._rootScrollHelper = scrollHelper;
+    // this._rootScrollHelper = scrollHelper;
+
+    this.scrollEventHelper = new ScrollEventHelper({
+      marshal: this,
+      onScroll,
+      onScrollToTop,
+      onScrollEndDrag,
+      onScrollBeginDrag,
+      onContentSizeChange,
+      onMomentumScrollEnd,
+      onMomentumScrollBegin,
+    });
+
+    if (
+      !ownerScrollHelper ||
+      (ownerScrollHelper && ownerScrollHelper.getHorizontal() !== horizontal)
+    ) {
+      this._rootScrollHelper = new ScrollHelper({
+        marshal: this,
+        id,
+        stickyMode,
+        horizontal,
+        ref,
+        ownerScrollHelper,
+      });
+    } else {
+      this._rootScrollHelper = ownerScrollHelper;
+    }
   }
 
   enableScrollUpdating() {
@@ -89,7 +113,7 @@ class Marshal {
   }
 
   getScrollEventHelper() {
-    return this._scrollEventHelper;
+    return this.scrollEventHelper;
   }
 
   getScrollHelper() {

ui/scroller/src/react-native/ScrollEventHelper.ts

@@ -8,7 +8,9 @@ import {
   SyntheticEventHandler,
   SyntheticEventHandlerEvent,
   InternalScrollEventHandlerSubscriptionKeys,
+  ScrollEventHelperProps,
 } from './types';
+import Marshal from './Marshal';
 
 /**
  * ScrollEventHelper is bound to ScrollView, Every ScrollView will has its own
@@ -17,7 +19,8 @@ import {
  */
 class ScrollEventHelper {
   private _disposer: Function;
-  private _scrollHelper: ScrollHelper;
+  // private _scrollHelper: ScrollHelper;
+  private _marshal: Marshal;
   private _onScroll: SyntheticEventHandler | undefined;
   private _onScrollEndDrag: SyntheticEventHandler | undefined;
   private _onScrollBeginDrag: SyntheticEventHandler | undefined;
@@ -27,19 +30,10 @@ class ScrollEventHelper {
   private _onScrollToTop: SyntheticEventHandler | undefined;
   private _subscriptions: ScrollEventHandlerSubscriptions;
 
-  constructor(props: {
-    scrollHelper: ScrollHelper;
-    onScroll?: SyntheticEventHandler;
-    onScrollEndDrag?: SyntheticEventHandler;
-    onScrollBeginDrag?: SyntheticEventHandler;
-    onContentSizeChange?: ContentSizeChangeHandler;
-    onMomentumScrollEnd?: SyntheticEventHandler;
-    onMomentumScrollBegin?: SyntheticEventHandler;
-    onScrollToTop?: SyntheticEventHandler;
-  }) {
+  constructor(props: ScrollEventHelperProps) {
     const {
+      marshal,
       onScroll,
-      scrollHelper,
       onScrollToTop,
       onScrollEndDrag,
       onScrollBeginDrag,
@@ -48,8 +42,9 @@ class ScrollEventHelper {
       onMomentumScrollBegin,
     } = props;
 
+    this._marshal = marshal;
     this._onScroll = onScroll;
-    this._scrollHelper = scrollHelper;
+    // this._scrollHelper = scrollHelper;
     this._onScrollBeginDrag = onScrollBeginDrag;
     this._onScrollEndDrag = onScrollEndDrag;
     this._onContentSizeChange = onContentSizeChange;
@@ -72,7 +67,9 @@ class ScrollEventHelper {
   }
 
   register() {
-    this._disposer = this._scrollHelper.registerScrollEventHelper(this);
+    this._disposer = this._marshal
+      .getScrollHelper()
+      .registerScrollEventHelper(this);
   }
 
   dispose() {

ui/scroller/src/react-native/ScrollHelper.ts

@@ -25,6 +25,7 @@ import { ScrollMetrics, ContentSize } from '@infinite-list/types';
 import {
   ScrollEventHandlerSubscriptionKeys,
   ScrollEventMetrics,
+  ScrollHelperProps,
   ScrollSize,
   SpectrumScrollViewRef,
   StickyMode,
@@ -78,8 +79,6 @@ class ScrollHelper {
 
   private _scrollEventHelpers: ScrollEventHelper[] = [];
 
-  private _scrollEventHelper: ScrollEventHelper;
-
   private _ref: SpectrumScrollViewRef;
 
   readonly _horizontal: boolean;
@@ -94,14 +93,10 @@ class ScrollHelper {
 
   private onRefreshListeners: Function[] = [];
 
-  constructor(props: {
-    id: string;
-    stickyMode?: StickyMode;
-    horizontal: boolean;
-    ownerScrollHelper: ScrollHelper | null | undefined;
-    ref: SpectrumScrollViewRef;
-  }) {
-    const { id, ref, stickyMode, horizontal, ownerScrollHelper } = props;
+  constructor(props: ScrollHelperProps) {
+    const { id, ref, stickyMode, horizontal, ownerScrollHelper, marshal } =
+      props;
+    this._marshal = marshal;
 
     this.id = id;
     this._ref = ref;
@@ -128,14 +123,16 @@ class ScrollHelper {
     eventName: ScrollEventHandlerSubscriptionKeys,
     handler: Function
   ) {
-    const marshal = this.getMarshal();
-    if (!this._scrollEventHelper && marshal) {
-      this._scrollEventHelper = new ScrollEventHelper({
-        scrollHelper: this,
-      });
-    }
+    // const marshal = this.getMarshal();
+    // if (!this._scrollEventHelper && marshal) {
+    //   this._scrollEventHelper = new ScrollEventHelper({
+    //     scrollHelper: this,
+    //   });
+    // }
 
-    return this._scrollEventHelper.subscribeEventHandler(eventName, handler);
+    return this._marshal
+      ?.getScrollEventHelper()
+      .subscribeEventHandler(eventName, handler);
   }
 
   addOnRefreshListener(fn: Function) {
@@ -292,7 +289,7 @@ class ScrollHelper {
 
   triggerScrollEventHelpers(
     handlerName: ScrollEventHandlerSubscriptionKeys,
-    ...rest
+    ...rest: any[]
   ) {
     this._scrollEventHelpers.forEach((helper) => {
       if (helper.marshal.scrollUpdateEnabled) {
@@ -363,7 +360,7 @@ class ScrollHelper {
         ...e.nativeEvent,
       },
     });
-    this._marshal?.dimensions.updateScrollMetrics(this._scrollMetrics);
+    // this._marshal?.dimensions.updateScrollMetrics(this._scrollMetrics);
   }
 
   onScrollBeginDrag(e: NativeSyntheticEvent<NativeScrollEvent>) {
@@ -394,16 +391,16 @@ class ScrollHelper {
     this.setScrollEventMetrics(e.nativeEvent);
     this.resolveScrollMetrics();
     this.triggerScrollEventHelpers('onMomentumScrollEnd', e);
-    this._marshal?.dimensions.updateScrollMetrics(this._scrollMetrics);
+    // this._marshal?.dimensions.updateScrollMetrics(this._scrollMetrics);
   }
 
   onContentSizeChange(width: number, height: number) {
     this._contentSize = { width, height };
     this.resolveScrollMetrics();
     this.triggerScrollEventHelpers('onContentSizeChange', width, height);
 
-    if (!this._horizontal)
-      this._marshal?.dimensions.updateScrollMetrics(this._scrollMetrics);
+    // if (!this._horizontal)
+    //   this._marshal?.dimensions.updateScrollMetrics(this._scrollMetrics);
   }
 
   onScrollToTop(e: NativeSyntheticEvent<NativeScrollEvent>) {