Feat intersection observer

packages/api-proxy/src/platform/api/create-intersection-observer/index.ali.js

@@ -1,6 +1,9 @@
 import { ENV_OBJ } from '../../../common/js'
 
 function createIntersectionObserver (component, options = {}) {
+  if (options.observeAll) {
+    options.selectAll = options.observeAll
+  }
   return ENV_OBJ.createIntersectionObserver(options)
 }
 

packages/api-proxy/src/platform/api/create-intersection-observer/index.ios.js

@@ -0,0 +1,9 @@
+import IntersectionObserver from './rnIntersectionObserver'
+
+function createIntersectionObserver (comp, opt, config) {
+  return new IntersectionObserver(comp, opt, config)
+}
+
+export {
+  createIntersectionObserver
+}

packages/api-proxy/src/platform/api/create-intersection-observer/rnIntersectionObserver.js

@@ -0,0 +1,202 @@
+import { isArray, noop } from "@mpxjs/utils"
+import throttle from 'lodash/throttle'
+import { Dimensions } from 'react-native'
+import { getFocusedNavigation } from '../../../common/js'
+
+
+class RNIntersectionObserver {
+  constructor (component, options, intersectionCtx) {
+    this.component = component
+    this.options = options
+    this.thresholds = options.thresholds.sort((a,b ) => a-b) || [0]
+    this.initialRatio = options.initialRatio || 0
+    this.observeAll = options.observeAll || false
+
+    // 组件上挂载对应的observers，用于在组件销毁的时候进行批量disconnect
+    this.component._intersectionObservers = this.component.__intersectionObservers || []
+    this.component._intersectionObservers.push(this)
+
+    this.observerRef = null
+    this.relativeRef = null
+    this.margins = {top: 0, bottom: 0, left: 0, right: 0}
+    this.callback = noop
+
+    this.throttleMeasure = this.getThrottleMeasure(options.throttleTime || 100)
+
+    // 记录上一次相交的比例
+    this.previousIntersectionRatio = []
+
+     // 添加实例添加到上下文中，滚动组件可以获取到上下文内的实例从而触发滚动
+     if (intersectionCtx && Array.isArray(intersectionCtx) && !intersectionCtx.includes(this)) {
+      intersectionCtx.push(this)
+      this.intersectionCtx = intersectionCtx
+    }
+
+    return this
+  }
+  relativeTo (selector, margins) {
+    const relativeRef = this.component.__selectRef(selector, 'node')
+    if (isArray(relativeRef)) {
+      this.relativeRef = relativeRef[0]
+    } else {
+      this.relativeRef = relativeRef
+    }
+    if (relativeRef) {
+      this.relativeRef = relativeRef
+      this.margins = margins || this.margins
+    }
+    return this
+  }
+  relativeToViewport(margins) {
+    this.relativeRef = null
+    this.margins = margins || this.margins
+    return this
+  }
+  observe (selector, callback) {
+    if (this.observerRef) {
+      console.error('"observe" call can be only called once in IntersectionObserver')
+      return
+    }
+    let targetRef = null
+    if (this.observeAll){
+      targetRef = this.component.__selectRef(selector, 'node', true)
+    } else {
+      targetRef = this.component.__selectRef(selector, 'node')
+    }
+    if (!targetRef || targetRef.length === 0) {
+      console.error('intersection observer target not found')
+      return
+    }
+    this.observerRef = isArray(targetRef) ? targetRef : [targetRef]
+    this.callback = callback
+    this._measureTarget(true)
+  }
+  _getWindowRect() {
+    if (this.windowRect) return this.windowRect
+    const navigation = getFocusedNavigation()
+    const screen =  Dimensions.get('screen')
+    const windowRect = {
+      top: navigation.isCustomHeader ? this.margins.top : navigation.headerHeight,
+      left: this.margins.left,
+      right: screen.width - this.margins.right,
+      bottom: navigation.layout.height + navigation.headerHeight - this.margins.bottom
+    }
+    this.windowRect = windowRect
+    return this.windowRect
+  }
+  _getReferenceRect(targetRef) {
+    if (!targetRef) {
+      return Promise.resolve([this._getWindowRect()])
+    } else {
+      if (!isArray(targetRef)) targetRef = [targetRef]
+      const targetPromiseQueue = []
+      targetRef.forEach((targetRefItem) => {
+        const target = targetRefItem.getNodeInstance().nodeRef.current
+        if (!target) console.error('intersection observer target ref not found')
+        if (target) targetPromiseQueue.push(new Promise((resolve) => {
+          target.measureInWindow(
+            (x, y, width, height) => {
+              const boundingClientRect = {
+                left: x,
+                top: y,
+                right: x + width,
+                bottom: y + height,
+                width: width,
+                height: height
+              };
+              resolve(boundingClientRect)
+            },
+          );
+        })) 
+      })
+      return Promise.all(targetPromiseQueue)
+    }
+  }
+  // 计算相交区域
+  _measureIntersection(targetRect, relativeRect) {
+    function restrictValueInRange(start = 0, end = 0, value = 0) {
+      return Math.min(Math.max(start, value), end);
+    }
+
+    const visibleRect = {
+      left: restrictValueInRange(relativeRect.left, relativeRect.right, targetRect.left),
+      top: restrictValueInRange(relativeRect.top, relativeRect.bottom, targetRect.top),
+      right: restrictValueInRange(relativeRect.left, relativeRect.right, targetRect.right),
+      bottom: restrictValueInRange(relativeRect.top, relativeRect.bottom, targetRect.bottom),
+    }
+
+    const targetArea =(targetRect.bottom - targetRect.top) * (targetRect.right - targetRect.left);
+    const visibleArea = (visibleRect.bottom - visibleRect.top) * (visibleRect.right - visibleRect.left);
+
+    return {
+      intersectionRatio: targetArea ? visibleArea / targetArea : 0,
+      intersectionRect: {
+        top: visibleRect.top,
+        bottom: relativeRect.bottom,
+        left: visibleRect.left,
+        right: relativeRect.right,
+      }
+    }
+  }
+  getThrottleMeasure(throttleTime) {
+    return throttle(() => {
+      this._measureTarget()
+    }, throttleTime)
+  }
+  // 计算节点的rect信息
+  _measureTarget(isInit = false) {
+    Promise.all([
+      this._getReferenceRect(this.observerRef),
+      this._getReferenceRect(this.relativeRef)
+    ]).then(([observeRects, relativeRects]) => {
+      observeRects.forEach((observeRect, index) => {
+        const { intersectionRatio, intersectionRect } = this._measureIntersection(observeRect, relativeRects[0])
+        const isCallback = isInit ? intersectionRatio >= this.initialRatio : this._isInsected(intersectionRatio, this.previousIntersectionRatio[index])
+        // 初次调用的
+        if (isCallback) {
+          this.callback({
+            index: index,
+            id: this.observerRef[index].getNodeInstance().props?.current?.id,
+            dataset: this.observerRef[index].getNodeInstance().props?.current?.dataset || {},
+            intersectionRatio: Math.round(intersectionRatio * 100) / 100, 
+            intersectionRect, 
+            boundingClientRect: observeRect,
+            relativeRect: relativeRects[0],
+            time: Date.now()
+          })
+        }
+        this.previousIntersectionRatio[index] = intersectionRatio
+      })
+    }).catch((e) => {
+      console.log('_measureTarget fail', e)
+    })
+  }
+
+  // 如果上一个与当前这个处于同一个thresholds区间的话，则不用触发
+  _isInsected = (intersectionRatio, previousIntersectionRatio) => {
+    // console.log('nowintersectionRatio, previousIntersectionRatio', [intersectionRatio, previousIntersectionRatio])
+    let nowIndex = -1
+    let previousIndex = -1
+    this.thresholds.forEach((item, index) => {
+      if (intersectionRatio >= item) {
+        nowIndex = index
+      }
+      if (previousIntersectionRatio >= item) {
+        previousIndex = index
+      }
+    })
+    return !(nowIndex === previousIndex)
+  };
+
+  relativeToViewport (margins) {
+    this._relativeInfo = { relativeRef: null, margins }
+    return this
+  }
+  disconnect () {
+    if (this.intersectionCtx && this.intersectionCtx.includes(this)) {
+      this.intersectionCtx.splice(this.intersectionCtx.indexOf(this, 1))
+    }
+  }
+}
+
+export default RNIntersectionObserver

packages/core/src/core/proxy.js

@@ -208,6 +208,7 @@ export default class MpxProxy {
     if (this.update) this.update.active = false
     this.callHook(UNMOUNTED)
     this.state = UNMOUNTED
+    this._intersectionObservers?.forEach(observer => observer.disconnect())
   }
 
   isUnmounted () {

packages/core/src/platform/export/index.js

@@ -1,4 +1,3 @@
-
 export {
   watchEffect,
   watchSyncEffect,
@@ -42,4 +41,4 @@ export {
 
 export {
   useI18n
-} from '../../platform/builtInMixins/i18nMixin'
+} from '../../platform/builtInMixins/i18nMixin'

packages/core/src/platform/patch/react/getDefaultOptions.ios.js

@@ -8,7 +8,8 @@ import MpxProxy from '../../../core/proxy'
 import { BEFOREUPDATE, ONLOAD, UPDATED, ONSHOW, ONHIDE, ONRESIZE, REACTHOOKSEXEC } from '../../../core/innerLifecycle'
 import mergeOptions from '../../../core/mergeOptions'
 import { queueJob } from '../../../observer/scheduler'
-import { createSelectorQuery } from '@mpxjs/api-proxy'
+import { createSelectorQuery, createIntersectionObserver } from '@mpxjs/api-proxy'
+import { IntersectionObserverContext } from '@mpxjs/webpack-plugin/lib/runtime/components/react/dist/context'
 
 function getSystemInfo () {
   const window = ReactNative.Dimensions.get('window')
@@ -63,7 +64,7 @@ function getRootProps (props) {
   return rootProps
 }
 
-function createInstance ({ propsRef, type, rawOptions, currentInject, validProps, components, pageId }) {
+function createInstance ({ propsRef, type, rawOptions, currentInject, validProps, components, pageId, intersectionCtx }) {
   const instance = Object.create({
     setData (data, callback) {
       return this.__mpxProxy.forceUpdate(data, { sync: true }, callback)
@@ -178,8 +179,8 @@ function createInstance ({ propsRef, type, rawOptions, currentInject, validProps
     createSelectorQuery () {
       return createSelectorQuery().in(this)
     },
-    createIntersectionObserver () {
-      error('createIntersectionObserver is not supported in react native, please use ref instead')
+    createIntersectionObserver (opt) {
+      return createIntersectionObserver(this, opt, intersectionCtx)
     },
     ...rawOptions.methods
   }, {
@@ -344,12 +345,13 @@ export function getDefaultOptions ({ type, rawOptions = {}, currentInject }) {
   const defaultOptions = memo(forwardRef((props, ref) => {
     const instanceRef = useRef(null)
     const propsRef = useRef(null)
+    const intersectionCtx = useContext(IntersectionObserverContext)
     const pageId = useContext(RouteContext)
     propsRef.current = props
     let isFirst = false
     if (!instanceRef.current) {
       isFirst = true
-      instanceRef.current = createInstance({ propsRef, type, rawOptions, currentInject, validProps, components, pageId })
+      instanceRef.current = createInstance({ propsRef, type, rawOptions, currentInject, validProps, components, pageId, intersectionCtx })
     }
     const instance = instanceRef.current
     useImperativeHandle(ref, () => {
@@ -409,10 +411,11 @@ export function getDefaultOptions ({ type, rawOptions = {}, currentInject }) {
   }))
 
   if (type === 'page') {
-    const { Provider, useSafeAreaInsets, GestureHandlerRootView } = global.__navigationHelper
+    const { Provider, useSafeAreaInsets, GestureHandlerRootView, useHeaderHeight } = global.__navigationHelper
     const pageConfig = Object.assign({}, global.__mpxPageConfig, currentInject.pageConfig)
     const Page = ({ navigation, route }) => {
       const currentPageId = useMemo(() => ++pageId, [])
+      const intersectionObservers = useRef([])
       usePageStatus(navigation, currentPageId)
 
       useLayoutEffect(() => {
@@ -427,6 +430,8 @@ export function getDefaultOptions ({ type, rawOptions = {}, currentInject }) {
       }, [])
 
       navigation.insets = useSafeAreaInsets()
+      navigation.headerHeight = useHeaderHeight()
+      navigation.isCustomHeader = pageConfig.navigationStyle === 'custom'
 
       return createElement(GestureHandlerRootView,
         {
@@ -445,19 +450,23 @@ export function getDefaultOptions ({ type, rawOptions = {}, currentInject }) {
             {
               value: currentPageId
             },
-            createElement(defaultOptions,
+            createElement(IntersectionObserverContext.Provider, 
               {
-                navigation,
-                route,
-                id: currentPageId
-              }
+                value: intersectionObservers.current
+              },
+              createElement(defaultOptions,
+                {
+                  navigation,
+                  route,
+                  id: currentPageId
+                }
+              )
             )
           )
         )
       )
     }
     return Page
   }
-
   return defaultOptions
 }

packages/webpack-plugin/lib/react/processScript.js

@@ -26,6 +26,7 @@ module.exports = function (script, {
 import { getComponent } from ${stringifyRequest(loaderContext, optionProcessorPath)}
 import { NavigationContainer, createNavigationContainerRef, StackActions } from '@react-navigation/native'
 import { createNativeStackNavigator } from '@react-navigation/native-stack'
+import { useHeaderHeight } from '@react-navigation/elements';
 import { Provider } from '@ant-design/react-native'
 import { SafeAreaProvider, useSafeAreaInsets } from 'react-native-safe-area-context'
 import { GestureHandlerRootView } from 'react-native-gesture-handler'
@@ -38,7 +39,8 @@ global.__navigationHelper = {
   GestureHandlerRootView: GestureHandlerRootView,
   Provider: Provider,
   SafeAreaProvider: SafeAreaProvider,
-  useSafeAreaInsets: useSafeAreaInsets
+  useSafeAreaInsets: useSafeAreaInsets,
+  useHeaderHeight: useHeaderHeight
 }\n`
     const { pagesMap, firstPage } = buildPagesMap({
       localPagesMap,

packages/webpack-plugin/lib/runtime/components/react/context.ts

@@ -25,6 +25,10 @@ export interface FormContextValue {
   reset: () => void
 }
 
+export interface IntersectionObserver {
+  throttleMeasure: () => void
+}
+
 export const MovableAreaContext = createContext({ width: 0, height: 0 })
 
 export const FormContext = createContext<FormContextValue | null>(null)
@@ -38,3 +42,5 @@ export const LabelContext = createContext<LabelContextValue | null>(null)
 export const PickerContext = createContext(null)
 
 export const VarContext = createContext({})
+
+export const IntersectionObserverContext = createContext<IntersectionObserver[] | null>(null)