@mpxjs/webpack-plugin 2.10.5-beta.1 → 2.10.6

package/lib/runtime/components/react/dist/mpx-web-view.jsx

@@ -1,4 +1,4 @@
-import { forwardRef, useRef, useContext, useMemo, useState } from 'react';
+import { forwardRef, useRef, useContext, useMemo, useState, useEffect } from 'react';
 import { warn, isFunction } from '@mpxjs/utils';
 import Portal from './mpx-portal/index';
 import { getCustomEvent } from './getInnerListeners';
@@ -74,17 +74,17 @@ const _WebView = forwardRef((props, ref) => {
         isNavigateBack.current = false;
     };
     const navigation = useNavigation();
-    // useEffect(() => {
-    //   let beforeRemoveSubscription:any
-    //   if (__mpx_mode__ !== 'ios') {
-    //     beforeRemoveSubscription = navigation?.addListener?.('beforeRemove', beforeRemoveHandle)
-    //   }
-    //   return () => {
-    //     if (isFunction(beforeRemoveSubscription)) {
-    //       beforeRemoveSubscription()
-    //     }
-    //   }
-    // }, [])
+    useEffect(() => {
+        let beforeRemoveSubscription;
+        if (__mpx_mode__ !== 'ios') {
+            beforeRemoveSubscription = navigation?.addListener?.('beforeRemove', beforeRemoveHandle);
+        }
+        return () => {
+            if (isFunction(beforeRemoveSubscription)) {
+                beforeRemoveSubscription();
+            }
+        };
+    }, []);
     useNodesRef(props, ref, webViewRef, {
         style: defaultWebViewStyle
     });
@@ -160,7 +160,7 @@ const _WebView = forwardRef((props, ref) => {
                 { // case下不允许直接声明，包个块解决该问题
                     const title = postData._documentTitle?.trim();
                     if (title !== undefined) {
-                        navigation && navigation.setPageConfig({ navigationBarTitleText: title });
+                        navigation && navigation.setOptions({ title });
                     }
                 }
                 break;

package/lib/runtime/components/react/dist/utils.jsx

@@ -441,18 +441,7 @@ export const useLayout = ({ props, hasSelfPercent, setWidth, setHeight, onLayout
             if (enableOffset) {
                 nodeRef.current?.measure((x, y, width, height, offsetLeft, offsetTop) => {
                     const { y: navigationY = 0 } = navigation?.layout || {};
-                    layoutRef.current = {
-                        x,
-                        y: y - navigationY,
-                        width,
-                        height,
-                        offsetLeft,
-                        offsetTop: offsetTop - navigationY,
-                        _x: x,
-                        _y: y,
-                        _offsetLeft: offsetLeft,
-                        _offsetTop: offsetTop
-                    };
+                    layoutRef.current = { x, y: y - navigationY, width, height, offsetLeft, offsetTop: offsetTop - navigationY };
                 });
             }
             onLayout && onLayout(e);

package/lib/runtime/components/react/mpx-button.tsx

@@ -42,8 +42,7 @@ import {
   TextStyle,
   Animated,
   Easing,
-  NativeSyntheticEvent,
-  useAnimatedValue
+  NativeSyntheticEvent
 } from 'react-native'
 import { warn } from '@mpxjs/utils'
 import { GestureDetector, PanGesture } from 'react-native-gesture-handler'
@@ -158,7 +157,7 @@ const timer = (data: any, time = 3000) => new Promise((resolve) => {
 })
 
 const Loading = ({ alone = false }: { alone: boolean }): JSX.Element => {
-  const image = useAnimatedValue(0)
+  const image = useRef(new Animated.Value(0)).current
 
   const rotate = image.interpolate({
     inputRange: [0, 1],

package/lib/runtime/components/react/mpx-scroll-view.tsx

@@ -32,7 +32,7 @@
  * ✔ bindscroll
  */
 import { ScrollView, RefreshControl, Gesture, GestureDetector } from 'react-native-gesture-handler'
-import { View, NativeSyntheticEvent, NativeScrollEvent, LayoutChangeEvent, ViewStyle, Animated as RNAnimated } from 'react-native'
+import { View, NativeSyntheticEvent, NativeScrollEvent, LayoutChangeEvent, ViewStyle } from 'react-native'
 import { isValidElement, Children, JSX, ReactNode, RefObject, useRef, useState, useEffect, forwardRef, useContext, useMemo, createElement } from 'react'
 import Animated, { useAnimatedRef, useSharedValue, withTiming, useAnimatedStyle, runOnJS } from 'react-native-reanimated'
 import { warn, hasOwn } from '@mpxjs/utils'
@@ -43,48 +43,48 @@ import { IntersectionObserverContext, ScrollViewContext } from './context'
 import Portal from './mpx-portal'
 
 interface ScrollViewProps {
-  children?: ReactNode;
-  enhanced?: boolean;
-  bounces?: boolean;
-  style?: ViewStyle;
-  'scroll-x'?: boolean;
-  'scroll-y'?: boolean;
-  'enable-back-to-top'?: boolean;
-  'show-scrollbar'?: boolean;
-  'paging-enabled'?: boolean;
-  'upper-threshold'?: number;
-  'lower-threshold'?: number;
-  'scroll-with-animation'?: boolean;
-  'refresher-triggered'?: boolean;
-  'refresher-enabled'?: boolean;
-  'refresher-default-style'?: 'black' | 'white' | 'none';
-  'refresher-background'?: string;
-  'refresher-threshold'?: number;
-  'scroll-top'?: number;
-  'scroll-left'?: number;
-  'enable-offset'?: boolean;
-  'scroll-into-view'?: string;
-  'enable-trigger-intersection-observer'?: boolean;
-  'enable-var'?: boolean;
-  'external-var-context'?: Record<string, any>;
-  'parent-font-size'?: number;
-  'parent-width'?: number;
-  'parent-height'?: number;
-  'enable-sticky'?: boolean;
-  'wait-for'?: Array<GestureHandler>;
-  'simultaneous-handlers'?: Array<GestureHandler>;
-  'scroll-event-throttle'?:number;
-  bindscrolltoupper?: (event: NativeSyntheticEvent<NativeScrollEvent>) => void;
-  bindscrolltolower?: (event: NativeSyntheticEvent<NativeScrollEvent>) => void;
-  bindscroll?: (event: NativeSyntheticEvent<NativeScrollEvent>) => void;
-  bindrefresherrefresh?: (event: NativeSyntheticEvent<unknown>) => void;
-  binddragstart?: (event: NativeSyntheticEvent<DragEvent>) => void;
-  binddragging?: (event: NativeSyntheticEvent<DragEvent>) => void;
-  binddragend?: (event: NativeSyntheticEvent<DragEvent>) => void;
-  bindtouchstart?: (event: NativeSyntheticEvent<TouchEvent>) => void;
-  bindtouchmove?: (event: NativeSyntheticEvent<TouchEvent>) => void;
-  bindtouchend?: (event: NativeSyntheticEvent<TouchEvent>) => void;
-  bindscrollend?: (event: NativeSyntheticEvent<TouchEvent>) => void;
+  children?: ReactNode
+  enhanced?: boolean
+  bounces?: boolean
+  style?: ViewStyle
+  scrollEventThrottle?: number
+  'scroll-x'?: boolean
+  'scroll-y'?: boolean
+  'enable-back-to-top'?: boolean
+  'show-scrollbar'?: boolean
+  'paging-enabled'?: boolean
+  'upper-threshold'?: number
+  'lower-threshold'?: number
+  'scroll-with-animation'?: boolean
+  'refresher-triggered'?: boolean
+  'refresher-enabled'?: boolean
+  'refresher-default-style'?: 'black' | 'white' | 'none'
+  'refresher-background'?: string
+  'refresher-threshold'?: number
+  'scroll-top'?: number
+  'scroll-left'?: number
+  'enable-offset'?: boolean
+  'scroll-into-view'?: string
+  'enable-trigger-intersection-observer'?: boolean
+  'enable-var'?: boolean
+  'external-var-context'?: Record<string, any>
+  'parent-font-size'?: number
+  'parent-width'?: number
+  'parent-height'?: number
+  'wait-for'?: Array<GestureHandler>
+  'simultaneous-handlers'?: Array<GestureHandler>
+  'scroll-event-throttle'?: number
+  bindscrolltoupper?: (event: NativeSyntheticEvent<NativeScrollEvent>) => void
+  bindscrolltolower?: (event: NativeSyntheticEvent<NativeScrollEvent>) => void
+  bindscroll?: (event: NativeSyntheticEvent<NativeScrollEvent>) => void
+  bindrefresherrefresh?: (event: NativeSyntheticEvent<unknown>) => void
+  binddragstart?: (event: NativeSyntheticEvent<DragEvent>) => void
+  binddragging?: (event: NativeSyntheticEvent<DragEvent>) => void
+  binddragend?: (event: NativeSyntheticEvent<DragEvent>) => void
+  bindtouchstart?: (event: NativeSyntheticEvent<TouchEvent>) => void
+  bindtouchmove?: (event: NativeSyntheticEvent<TouchEvent>) => void
+  bindtouchend?: (event: NativeSyntheticEvent<TouchEvent>) => void
+  bindscrollend?: (event: NativeSyntheticEvent<TouchEvent>) => void
   __selectRef?: (selector: string, nodeType: 'node' | 'component', all?: boolean) => HandlerRef<any, any>
 }
 type ScrollAdditionalProps = {
@@ -109,8 +109,6 @@ type ScrollAdditionalProps = {
   onMomentumScrollEnd?: (event: NativeSyntheticEvent<NativeScrollEvent>) => void
 }
 
-const AnimatedScrollView = RNAnimated.createAnimatedComponent(ScrollView) as React.ComponentType<any>
-
 const _ScrollView = forwardRef<HandlerRef<ScrollView & View, ScrollViewProps>, ScrollViewProps>((scrollViewProps: ScrollViewProps = {}, ref): JSX.Element => {
   const { textProps, innerProps: props = {} } = splitProps(scrollViewProps)
   const {
@@ -147,13 +145,10 @@ const _ScrollView = forwardRef<HandlerRef<ScrollView & View, ScrollViewProps>, S
     'parent-height': parentHeight,
     'simultaneous-handlers': originSimultaneousHandlers,
     'wait-for': waitFor,
-    'enable-sticky': enableSticky,
     'scroll-event-throttle': scrollEventThrottle = 0,
     __selectRef
   } = props
 
-  const scrollOffset = useRef(new RNAnimated.Value(0)).current
-
   const simultaneousHandlers = flatGesture(originSimultaneousHandlers)
   const waitForHandlers = flatGesture(waitFor)
 
@@ -223,15 +218,14 @@ const _ScrollView = forwardRef<HandlerRef<ScrollView & View, ScrollViewProps>, S
     gestureRef: scrollViewRef
   })
 
-  const { layoutRef, layoutStyle, layoutProps } = useLayout({ props, hasSelfPercent, setWidth, setHeight, nodeRef: scrollViewRef, onLayout })
-
   const contextValue = useMemo(() => {
     return {
-      gestureRef: scrollViewRef,
-      scrollOffset
+      gestureRef: scrollViewRef
     }
   }, [])
 
+  const { layoutRef, layoutStyle, layoutProps } = useLayout({ props, hasSelfPercent, setWidth, setHeight, nodeRef: scrollViewRef, onLayout })
+
   const hasRefresherLayoutRef = useRef(false)
 
   // layout 完成前先隐藏，避免安卓闪烁问题
@@ -493,16 +487,6 @@ const _ScrollView = forwardRef<HandlerRef<ScrollView & View, ScrollViewProps>, S
     updateIntersection()
   }
 
-  const scrollHandler = RNAnimated.event(
-    [{ nativeEvent: { contentOffset: { y: scrollOffset } } }],
-    {
-      useNativeDriver: true,
-      listener: (event: NativeSyntheticEvent<NativeScrollEvent>) => {
-        onScroll(event)
-      }
-    }
-  )
-
   function onScrollDragStart (e: NativeSyntheticEvent<NativeScrollEvent>) {
     hasCallScrollToLower.current = false
     hasCallScrollToUpper.current = false
@@ -677,7 +661,7 @@ const _ScrollView = forwardRef<HandlerRef<ScrollView & View, ScrollViewProps>, S
       scrollEnabled: !enableScroll ? false : !!(scrollX || scrollY),
       bounces: false,
       ref: scrollViewRef,
-      onScroll: enableSticky ? scrollHandler : onScroll,
+      onScroll: onScroll,
       onContentSizeChange: onContentSizeChange,
       bindtouchstart: ((enhanced && binddragstart) || bindtouchstart) && onScrollTouchStart,
       bindtouchmove: ((enhanced && binddragging) || bindtouchmove) && onScrollTouchMove,
@@ -732,13 +716,11 @@ const _ScrollView = forwardRef<HandlerRef<ScrollView & View, ScrollViewProps>, S
       'bindrefresherrefresh'
     ], { layoutRef })
 
-  const ScrollViewComponent = enableSticky ? AnimatedScrollView : ScrollView
-
   const withRefresherScrollView = createElement(
     GestureDetector,
     { gesture: panGesture },
     createElement(
-      ScrollViewComponent,
+      ScrollView,
       innerProps,
       createElement(
         Animated.View,
@@ -766,8 +748,8 @@ const _ScrollView = forwardRef<HandlerRef<ScrollView & View, ScrollViewProps>, S
   )
 
   const commonScrollView = createElement(
-    ScrollViewComponent,
-    extendObject({}, innerProps, {
+    ScrollView,
+    extendObject(innerProps, {
       refreshControl: refresherEnabled
         ? createElement(RefreshControl, extendObject({
           progressBackgroundColor: refresherBackground,

package/lib/runtime/components/react/mpx-web-view.tsx

@@ -122,17 +122,17 @@ const _WebView = forwardRef<HandlerRef<WebView, WebViewProps>, WebViewProps>((pr
 
   const navigation = useNavigation()
 
-  // useEffect(() => {
-  //   let beforeRemoveSubscription:any
-  //   if (__mpx_mode__ !== 'ios') {
-  //     beforeRemoveSubscription = navigation?.addListener?.('beforeRemove', beforeRemoveHandle)
-  //   }
-  //   return () => {
-  //     if (isFunction(beforeRemoveSubscription)) {
-  //       beforeRemoveSubscription()
-  //     }
-  //   }
-  // }, [])
+  useEffect(() => {
+    let beforeRemoveSubscription:any
+    if (__mpx_mode__ !== 'ios') {
+      beforeRemoveSubscription = navigation?.addListener?.('beforeRemove', beforeRemoveHandle)
+    }
+    return () => {
+      if (isFunction(beforeRemoveSubscription)) {
+        beforeRemoveSubscription()
+      }
+    }
+  }, [])
 
   useNodesRef<WebView, WebViewProps>(props, ref, webViewRef, {
     style: defaultWebViewStyle
@@ -212,7 +212,7 @@ const _WebView = forwardRef<HandlerRef<WebView, WebViewProps>, WebViewProps>((pr
         { // case下不允许直接声明，包个块解决该问题
           const title = postData._documentTitle?.trim()
           if (title !== undefined) {
-            navigation && navigation.setPageConfig({ navigationBarTitleText: title })
+            navigation && navigation.setOptions({ title })
           }
         }
         break

package/lib/runtime/components/react/utils.tsx

@@ -526,18 +526,7 @@ export const useLayout = ({ props, hasSelfPercent, setWidth, setHeight, onLayout
       if (enableOffset) {
         nodeRef.current?.measure((x: number, y: number, width: number, height: number, offsetLeft: number, offsetTop: number) => {
           const { y: navigationY = 0 } = navigation?.layout || {}
-          layoutRef.current = {
-            x,
-            y: y - navigationY,
-            width,
-            height,
-            offsetLeft,
-            offsetTop: offsetTop - navigationY,
-            _x: x,
-            _y: y,
-            _offsetLeft: offsetLeft,
-            _offsetTop: offsetTop
-          }
+          layoutRef.current = { x, y: y - navigationY, width, height, offsetLeft, offsetTop: offsetTop - navigationY }
         })
       }
       onLayout && onLayout(e)

package/lib/runtime/components/web/mpx-scroll-view.vue

@@ -44,7 +44,6 @@
       enhanced: Boolean,
       refresherEnabled: Boolean,
       refresherTriggered: Boolean,
-      enableSticky: Boolean,
       refresherThreshold: {
         type: Number,
         default: 45
@@ -58,16 +57,6 @@
         default: ''
       }
     },
-    provide () {
-      return {
-        scrollOffset: {
-          get: () => this.lastY
-        },
-        refreshVersion: {
-          get: () => this.refreshVersion
-        }
-      }
-    },
     data () {
       return {
         isLoading: false,
@@ -79,8 +68,7 @@
         lastContentWidth: 0,
         lastContentHeight: 0,
         lastWrapperWidth: 0,
-        lastWrapperHeight: 0,
-        refreshVersion: 0
+        lastWrapperHeight: 0
       }
     },
     computed: {
@@ -234,9 +222,6 @@
             stop: 56
           }
         }
-        if(this.enableSticky) {
-          originBsOptions.useTransition = false
-        }
         const bsOptions = Object.assign({}, originBsOptions, this.scrollOptions, { observeDOM: false })
         this.bs = new BScroll(this.$refs.wrapper, bsOptions)
         this.lastX = -this.currentX
@@ -266,7 +251,7 @@
           }
           this.lastX = x
           this.lastY = y
-        }, this.enableSticky ? 0 : 30, {
+        }, 30, {
           leading: true,
           trailing: true
         }))
@@ -342,7 +327,6 @@
         const scrollWrapperHeight = wrapper?.clientHeight || 0
         if (wrapper) {
           const computedStyle = getComputedStyle(wrapper)
-          this.refreshVersion = this.refreshVersion + 1
           // 考虑子元素样式可能会设置100%，如果直接继承 scrollContent 的样式可能会有问题
           // 所以使用 wrapper 作为 innerWrapper 的宽高参考依据
           this.$refs.innerWrapper.style.width = `${scrollWrapperWidth - parseInt(computedStyle.paddingLeft) - parseInt(computedStyle.paddingRight)}px`
@@ -474,8 +458,7 @@
       }
 
       const innerWrapper = createElement('div', {
-        ref: 'innerWrapper',
-        class: 'mpx-inner-wrapper'
+        ref: 'innerWrapper'
       }, this.$slots.default)
 
       const pullDownContent = this.refresherDefaultStyle !== 'none' ? createElement('div', {
@@ -585,4 +568,4 @@
               background: rgba(255, 255, 255, .7)
             100%
               background: rgba(255, 255, 255, .3)
-</style>
+</style>

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mpxjs/webpack-plugin",
-  "version": "2.10.5-beta.1",
+  "version": "2.10.6",
   "description": "mpx compile core",
   "keywords": [
     "mpx"
@@ -28,7 +28,7 @@
     "@better-scroll/wheel": "^2.5.1",
     "@better-scroll/zoom": "^2.5.1",
     "@mpxjs/template-engine": "^2.8.7",
-    "@mpxjs/utils": "^2.10.4",
+    "@mpxjs/utils": "^2.10.6",
     "acorn": "^8.11.3",
     "acorn-walk": "^7.2.0",
     "async": "^2.6.0",
@@ -83,7 +83,7 @@
   },
   "devDependencies": {
     "@d11/react-native-fast-image": "^8.6.12",
-    "@mpxjs/api-proxy": "^2.10.5 | ^2.10.5-beta.1",
+    "@mpxjs/api-proxy": "^2.10.6",
     "@types/babel-traverse": "^6.25.4",
     "@types/babel-types": "^7.0.4",
     "@types/react": "^18.2.79",
@@ -100,5 +100,5 @@
   "engines": {
     "node": ">=14.14.0"
   },
-  "gitHead": "2d37697869b9bdda3efab92dda8c910b68fd05c0"
+  "gitHead": "e28605bc2d8ab33f4dccf13ea98d9ca996f43ed6"
 }

package/lib/platform/template/wx/component-config/sticky-header.js

@@ -1,23 +0,0 @@
-const TAG_NAME = 'sticky-header'
-
-module.exports = function ({ print }) {
-  return {
-    test: TAG_NAME,
-    android (tag, { el }) {
-      el.isBuiltIn = true
-      return 'mpx-sticky-header'
-    },
-    ios (tag, { el }) {
-      el.isBuiltIn = true
-      return 'mpx-sticky-header'
-    },
-    harmony (tag, { el }) {
-      el.isBuiltIn = true
-      return 'mpx-sticky-header'
-    },
-    web (tag, { el }) {
-      el.isBuiltIn = true
-      return 'mpx-sticky-header'
-    }
-  }
-}

package/lib/platform/template/wx/component-config/sticky-section.js

@@ -1,23 +0,0 @@
-const TAG_NAME = 'sticky-section'
-
-module.exports = function ({ print }) {
-  return {
-    test: TAG_NAME,
-    android (tag, { el }) {
-      el.isBuiltIn = true
-      return 'mpx-sticky-section'
-    },
-    ios (tag, { el }) {
-      el.isBuiltIn = true
-      return 'mpx-sticky-section'
-    },
-    harmony (tag, { el }) {
-      el.isBuiltIn = true
-      return 'mpx-sticky-section'
-    },
-    web (tag, { el }) {
-      el.isBuiltIn = true
-      return 'mpx-sticky-section'
-    }
-  }
-}

package/lib/runtime/components/react/dist/mpx-sticky-header.jsx

@@ -1,115 +0,0 @@
-import { useEffect, useRef, useContext, forwardRef, useMemo, createElement, useId } from 'react';
-import { Animated, StyleSheet, useAnimatedValue } from 'react-native';
-import { ScrollViewContext, StickyContext } from './context';
-import useNodesRef from './useNodesRef';
-import { splitProps, splitStyle, useTransformStyle, wrapChildren, useLayout, extendObject } from './utils';
-import { error } from '@mpxjs/utils';
-import useInnerProps, { getCustomEvent } from './getInnerListeners';
-const _StickyHeader = forwardRef((stickyHeaderProps = {}, ref) => {
-    const { textProps, innerProps: props = {} } = splitProps(stickyHeaderProps);
-    const { style, bindstickontopchange, padding = [0, 0, 0, 0], 'offset-top': offsetTop = 0, 'enable-var': enableVar, 'external-var-context': externalVarContext, 'parent-font-size': parentFontSize, 'parent-width': parentWidth, 'parent-height': parentHeight } = props;
-    const scrollViewContext = useContext(ScrollViewContext);
-    const stickyContext = useContext(StickyContext);
-    const { scrollOffset } = scrollViewContext;
-    const { registerStickyHeader, unregisterStickyHeader } = stickyContext;
-    const headerRef = useRef(null);
-    const isStickOnTopRef = useRef(false);
-    const id = useId();
-    const { normalStyle, hasVarDec, varContextRef, hasSelfPercent, setWidth, setHeight } = useTransformStyle(style, { enableVar, externalVarContext, parentFontSize, parentWidth, parentHeight });
-    const { layoutRef, layoutProps } = useLayout({ props, hasSelfPercent, setWidth, setHeight, nodeRef: headerRef, onLayout });
-    const { textStyle, innerStyle = {} } = splitStyle(normalStyle);
-    const headerTopAnimated = useAnimatedValue(0);
-    // harmony animatedValue 不支持通过 _value 访问
-    const headerTopRef = useRef(0);
-    useEffect(() => {
-        registerStickyHeader({ key: id, updatePosition });
-        return () => {
-            unregisterStickyHeader(id);
-        };
-    }, []);
-    function updatePosition() {
-        if (headerRef.current) {
-            const scrollViewRef = scrollViewContext.gestureRef;
-            if (scrollViewRef && scrollViewRef.current) {
-                headerRef.current.measureLayout(scrollViewRef.current, (left, top) => {
-                    Animated.timing(headerTopAnimated, {
-                        toValue: top,
-                        duration: 0,
-                        useNativeDriver: true
-                    }).start();
-                    headerTopRef.current = top;
-                });
-            }
-            else {
-                error('StickyHeader measureLayout error: scrollViewRef is not a valid native component reference');
-            }
-        }
-    }
-    function onLayout(e) {
-        updatePosition();
-    }
-    useNodesRef(props, ref, headerRef, {
-        style: normalStyle
-    });
-    useEffect(() => {
-        if (!bindstickontopchange)
-            return;
-        const listener = scrollOffset.addListener((state) => {
-            const currentScrollValue = state.value;
-            const newIsStickOnTop = currentScrollValue > headerTopRef.current;
-            if (newIsStickOnTop !== isStickOnTopRef.current) {
-                isStickOnTopRef.current = newIsStickOnTop;
-                bindstickontopchange(getCustomEvent('stickontopchange', {}, {
-                    detail: {
-                        isStickOnTop: newIsStickOnTop
-                    },
-                    layoutRef
-                }, props));
-            }
-        });
-        return () => {
-            scrollOffset.removeListener(listener);
-        };
-    }, []);
-    const animatedStyle = useMemo(() => {
-        const translateY = Animated.subtract(scrollOffset, headerTopAnimated).interpolate({
-            inputRange: [0, 1],
-            outputRange: [0, 1],
-            extrapolateLeft: 'clamp',
-            extrapolateRight: 'extend'
-        });
-        const finalTranslateY = offsetTop === 0
-            ? translateY
-            : Animated.add(translateY, Animated.subtract(scrollOffset, headerTopAnimated).interpolate({
-                inputRange: [0, 1],
-                outputRange: [0, offsetTop],
-                extrapolate: 'clamp'
-            }));
-        return {
-            transform: [{ translateY: finalTranslateY }]
-        };
-    }, [scrollOffset, headerTopAnimated, offsetTop]);
-    const innerProps = useInnerProps(extendObject({}, props, {
-        ref: headerRef,
-        style: extendObject({}, styles.content, innerStyle, animatedStyle, {
-            paddingTop: padding[0] || 0,
-            paddingRight: padding[1] || 0,
-            paddingBottom: padding[2] || 0,
-            paddingLeft: padding[3] || 0
-        })
-    }, layoutProps), [], { layoutRef });
-    return (createElement(Animated.View, innerProps, wrapChildren(props, {
-        hasVarDec,
-        varContext: varContextRef.current,
-        textStyle,
-        textProps
-    })));
-});
-const styles = StyleSheet.create({
-    content: {
-        width: '100%',
-        zIndex: 10
-    }
-});
-_StickyHeader.displayName = 'MpxStickyHeader';
-export default _StickyHeader;

package/lib/runtime/components/react/dist/mpx-sticky-section.jsx

@@ -1,45 +0,0 @@
-import { useRef, forwardRef, createElement, useCallback, useMemo } from 'react';
-import { View } from 'react-native';
-import useNodesRef from './useNodesRef';
-import { splitProps, splitStyle, useTransformStyle, wrapChildren, useLayout, extendObject } from './utils';
-import { StickyContext } from './context';
-import useInnerProps from './getInnerListeners';
-const _StickySection = forwardRef((stickySectionProps = {}, ref) => {
-    const { textProps, innerProps: props = {} } = splitProps(stickySectionProps);
-    const { style, 'enable-var': enableVar, 'external-var-context': externalVarContext, 'parent-font-size': parentFontSize, 'parent-width': parentWidth, 'parent-height': parentHeight } = props;
-    const sectionRef = useRef(null);
-    const { normalStyle, hasVarDec, varContextRef, hasSelfPercent, setWidth, setHeight } = useTransformStyle(style, { enableVar, externalVarContext, parentFontSize, parentWidth, parentHeight });
-    const { layoutRef, layoutProps, layoutStyle } = useLayout({ props, hasSelfPercent, setWidth, setHeight, nodeRef: sectionRef, onLayout });
-    const { textStyle, innerStyle = {} } = splitStyle(normalStyle);
-    const stickyHeaders = useRef(new Map());
-    const registerStickyHeader = useCallback((item) => {
-        stickyHeaders.current.set(item.id, item);
-    }, []);
-    const unregisterStickyHeader = useCallback((id) => {
-        stickyHeaders.current.delete(id);
-    }, []);
-    const contextValue = useMemo(() => ({
-        registerStickyHeader,
-        unregisterStickyHeader
-    }), []);
-    useNodesRef(props, ref, sectionRef, {
-        style: normalStyle
-    });
-    function onLayout() {
-        stickyHeaders.current.forEach(item => {
-            item.updatePosition();
-        });
-    }
-    const innerProps = useInnerProps(extendObject({}, props, {
-        style: extendObject(innerStyle, layoutStyle),
-        ref: sectionRef
-    }, layoutProps), [], { layoutRef });
-    return (createElement(View, innerProps, createElement(StickyContext.Provider, { value: contextValue }, wrapChildren(props, {
-        hasVarDec,
-        varContext: varContextRef.current,
-        textStyle,
-        textProps
-    }))));
-});
-_StickySection.displayName = 'MpxStickySection';
-export default _StickySection;