@mpxjs/webpack-plugin 2.10.7-beta.8 → 2.10.7-beta.9

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

@@ -44,7 +44,7 @@ import Portal from './mpx-portal';
 const AnimatedScrollView = RNAnimated.createAnimatedComponent(ScrollView);
 const _ScrollView = forwardRef((scrollViewProps = {}, ref) => {
     const { textProps, innerProps: props = {} } = splitProps(scrollViewProps);
-    const { enhanced = false, bounces = true, style = {}, binddragstart, binddragging, binddragend, bindtouchstart, bindtouchmove, bindtouchend, 'scroll-x': scrollX = false, 'scroll-y': scrollY = false, 'enable-back-to-top': enableBackToTop = false, 'enable-trigger-intersection-observer': enableTriggerIntersectionObserver = false, 'paging-enabled': pagingEnabled = false, 'upper-threshold': upperThreshold = 50, 'lower-threshold': lowerThreshold = 50, 'scroll-with-animation': scrollWithAnimation = false, 'refresher-enabled': refresherEnabled, 'refresher-default-style': refresherDefaultStyle, 'refresher-background': refresherBackground, 'refresher-threshold': refresherThreshold = 45, 'show-scrollbar': showScrollbar = true, 'scroll-into-view': scrollIntoView = '', 'scroll-top': scrollTop = 0, 'scroll-left': scrollLeft = 0, 'refresher-triggered': refresherTriggered, 'enable-var': enableVar, 'external-var-context': externalVarContext, 'parent-font-size': parentFontSize, 'parent-width': parentWidth, 'parent-height': parentHeight, 'simultaneous-handlers': originSimultaneousHandlers, 'wait-for': waitFor, 'enable-sticky': enableSticky, 'scroll-event-throttle': scrollEventThrottle = 0, __selectRef } = props;
+    const { enhanced = false, bounces = true, style = {}, binddragstart, binddragging, binddragend, bindtouchstart, bindtouchmove, bindtouchend, 'scroll-x': scrollX = false, 'scroll-y': scrollY = false, 'enable-back-to-top': enableBackToTop = false, 'enable-trigger-intersection-observer': enableTriggerIntersectionObserver = false, 'paging-enabled': pagingEnabled = false, 'upper-threshold': upperThreshold = 50, 'lower-threshold': lowerThreshold = 50, 'scroll-with-animation': scrollWithAnimation = false, 'refresher-enabled': refresherEnabled, 'refresher-default-style': refresherDefaultStyle, 'refresher-background': refresherBackground, 'refresher-threshold': refresherThreshold = 45, 'show-scrollbar': showScrollbar = true, 'scroll-into-view': scrollIntoView = '', 'scroll-top': scrollTop = 0, 'scroll-left': scrollLeft = 0, 'refresher-triggered': refresherTriggered, 'enable-var': enableVar, 'external-var-context': externalVarContext, 'parent-font-size': parentFontSize, 'parent-width': parentWidth, 'parent-height': parentHeight, 'simultaneous-handlers': originSimultaneousHandlers, 'wait-for': waitFor, 'enable-sticky': enableSticky, 'scroll-event-throttle': scrollEventThrottle = 0, 'scroll-into-view-offset': scrollIntoViewOffset = 0, __selectRef } = props;
     const scrollOffset = useRef(new RNAnimated.Value(0)).current;
     const simultaneousHandlers = flatGesture(originSimultaneousHandlers);
     const waitForHandlers = flatGesture(waitFor);
@@ -69,7 +69,7 @@ const _ScrollView = forwardRef((scrollViewProps = {}, ref) => {
     const hasCallScrollToLower = useRef(false);
     const initialTimeout = useRef(null);
     const intersectionObservers = useContext(IntersectionObserverContext);
-    const firstScrollIntoViewChange = useRef(false);
+    const firstScrollIntoViewChange = useRef(true);
     const refreshColor = {
         black: ['#000'],
         white: ['#fff']
@@ -89,7 +89,8 @@ const _ScrollView = forwardRef((scrollViewProps = {}, ref) => {
             pagingEnabled,
             fastDeceleration: false,
             decelerationDisabled: false,
-            scrollTo
+            scrollTo,
+            scrollIntoView: handleScrollIntoView
         },
         gestureRef: scrollViewRef
     });
@@ -119,14 +120,16 @@ const _ScrollView = forwardRef((scrollViewProps = {}, ref) => {
     }, [scrollTop, scrollLeft]);
     useEffect(() => {
         if (scrollIntoView && __selectRef) {
-            if (!firstScrollIntoViewChange.current) {
-                setTimeout(handleScrollIntoView);
+            if (firstScrollIntoViewChange.current) {
+                setTimeout(() => {
+                    handleScrollIntoView(scrollIntoView, { offset: scrollIntoViewOffset, animated: scrollWithAnimation });
+                });
             }
             else {
-                handleScrollIntoView();
+                handleScrollIntoView(scrollIntoView, { offset: scrollIntoViewOffset, animated: scrollWithAnimation });
             }
         }
-        firstScrollIntoViewChange.current = true;
+        firstScrollIntoViewChange.current = false;
     }, [scrollIntoView]);
     useEffect(() => {
         if (refresherEnabled) {
@@ -146,13 +149,15 @@ const _ScrollView = forwardRef((scrollViewProps = {}, ref) => {
     function scrollTo({ top = 0, left = 0, animated = false }) {
         scrollToOffset(left, top, animated);
     }
-    function handleScrollIntoView() {
-        const refs = __selectRef(`#${scrollIntoView}`, 'node');
+    function handleScrollIntoView(selector = '', { offset = 0, animated = true } = {}) {
+        const refs = __selectRef(`#${selector}`, 'node');
         if (!refs)
             return;
         const { nodeRef } = refs.getNodeInstance();
         nodeRef.current?.measureLayout(scrollViewRef.current, (left, top) => {
-            scrollToOffset(left, top);
+            const adjustedLeft = scrollX ? left + offset : left;
+            const adjustedTop = scrollY ? top + offset : top;
+            scrollToOffset(adjustedLeft, adjustedTop, animated);
         });
     }
     function selectLength(size) {

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

@@ -108,7 +108,9 @@ const _StickyHeader = forwardRef((stickyHeaderProps = {}, ref) => {
 const styles = StyleSheet.create({
     content: {
         width: '100%',
-        zIndex: 10
+        zIndex: 10,
+        // harmony 需要手动设置 relative， zIndex 才生效
+        position: 'relative'
     }
 });
 _StickyHeader.displayName = 'MpxStickyHeader';

package/lib/runtime/components/react/mpx-movable-area.tsx

@@ -1,12 +1,14 @@
 /**
- * ✘ scale-area
+ * ✔ scale-area
  */
 
 import { View } from 'react-native'
-import { JSX, forwardRef, ReactNode, useRef, useMemo, createElement } from 'react'
+import { JSX, forwardRef, ReactNode, useRef, useMemo, useCallback, createElement } from 'react'
+import { GestureDetector, Gesture } from 'react-native-gesture-handler'
+import { useSharedValue } from 'react-native-reanimated'
 import useNodesRef, { HandlerRef } from './useNodesRef'
 import useInnerProps from './getInnerListeners'
-import { MovableAreaContext } from './context'
+import { MovableAreaContext, MovableAreaContextValue } from './context'
 import { useTransformStyle, wrapChildren, useLayout, extendObject } from './utils'
 import Portal from './mpx-portal'
 
@@ -15,6 +17,7 @@ interface MovableAreaProps {
   children: ReactNode
   width?: number
   height?: number
+  'scale-area'?: boolean
   'enable-offset'?: boolean
   'enable-var'?: boolean
   'external-var-context'?: Record<string, any>
@@ -23,8 +26,21 @@ interface MovableAreaProps {
   'parent-height'?: number
 }
 
+interface MovableViewCallbacks {
+   onScale: (scaleInfo: {scale: number}) => void
+   onScaleEnd?: () => void
+}
+
 const _MovableArea = forwardRef<HandlerRef<View, MovableAreaProps>, MovableAreaProps>((props: MovableAreaProps, ref): JSX.Element => {
-  const { style = {}, 'enable-var': enableVar, 'external-var-context': externalVarContext, 'parent-font-size': parentFontSize, 'parent-width': parentWidth, 'parent-height': parentHeight } = props
+  const {
+    style = {},
+    'scale-area': scaleArea = false,
+    'enable-var': enableVar,
+    'external-var-context': externalVarContext,
+    'parent-font-size': parentFontSize,
+    'parent-width': parentWidth,
+    'parent-height': parentHeight
+  } = props
 
   const {
     hasSelfPercent,
@@ -36,17 +52,67 @@ const _MovableArea = forwardRef<HandlerRef<View, MovableAreaProps>, MovableAreaP
     setHeight
   } = useTransformStyle(style, { enableVar, externalVarContext, parentFontSize, parentWidth, parentHeight })
 
-  const movableViewRef = useRef(null)
-  useNodesRef(props, ref, movableViewRef, {
+  const movableAreaRef = useRef(null)
+  const movableViewsValue = useSharedValue<Record<string, MovableViewCallbacks>>({})
+  useNodesRef(props, ref, movableAreaRef, {
     style: normalStyle
   })
 
-  const contextValue = useMemo(() => ({
+  // 注册/注销 MovableView 的回调
+  const registerMovableView = useCallback((id: string, callbacks: { onScale?: (scaleInfo: { scale: number }) => void; onScaleEnd?: () => void }) => {
+    movableViewsValue.value = extendObject(movableViewsValue.value, { [id]: callbacks })
+  }, [])
+
+  const unregisterMovableView = useCallback((id: string) => {
+    delete movableViewsValue.value[id]
+  }, [])
+
+  // 处理区域缩放手势
+  const handleAreaScale = useCallback((scaleInfo: { scale: number }) => {
+    'worklet'
+    if (scaleArea) {
+      // 将缩放信息广播给所有注册的 MovableView
+      Object.values(movableViewsValue.value).forEach((callbacks) => {
+        callbacks.onScale && callbacks.onScale(scaleInfo)
+      })
+    }
+  }, [scaleArea])
+
+  // 处理区域缩放结束
+  const handleAreaScaleEnd = useCallback(() => {
+    'worklet'
+    if (scaleArea) {
+      // 通知所有注册的 MovableView 缩放结束
+      Object.values(movableViewsValue.value).forEach((callbacks) => {
+        callbacks.onScaleEnd && callbacks.onScaleEnd()
+      })
+    }
+  }, [scaleArea])
+
+  const contextValue: MovableAreaContextValue = useMemo(() => ({
     height: normalStyle.height || 10,
-    width: normalStyle.width || 10
-  }), [normalStyle.width, normalStyle.height])
+    width: normalStyle.width || 10,
+    scaleArea,
+    registerMovableView,
+    unregisterMovableView
+  }), [normalStyle.width, normalStyle.height, scaleArea])
 
-  const { layoutRef, layoutStyle, layoutProps } = useLayout({ props, hasSelfPercent, setWidth, setHeight, nodeRef: movableViewRef })
+  const { layoutRef, layoutStyle, layoutProps } = useLayout({ props, hasSelfPercent, setWidth, setHeight, nodeRef: movableAreaRef })
+
+  // 创建缩放手势
+  const scaleGesture = useMemo(() => {
+    if (!scaleArea) return null
+
+    return Gesture.Pinch()
+      .onUpdate((e) => {
+        'worklet'
+        handleAreaScale(e)
+      })
+      .onEnd(() => {
+        'worklet'
+        handleAreaScaleEnd()
+      })
+  }, [scaleArea])
 
   const innerProps = useInnerProps(
     extendObject(
@@ -55,7 +121,7 @@ const _MovableArea = forwardRef<HandlerRef<View, MovableAreaProps>, MovableAreaP
       layoutProps,
       {
         style: extendObject({ height: contextValue.height, width: contextValue.width }, normalStyle, layoutStyle),
-        ref: movableViewRef
+        ref: movableAreaRef
       }
     ),
     [],
@@ -73,9 +139,30 @@ const _MovableArea = forwardRef<HandlerRef<View, MovableAreaProps>, MovableAreaP
       }
     )
   ))
+
+  // 如果启用了 scale-area，包装一个 GestureDetector
+  if (scaleArea && scaleGesture) {
+    movableComponent = createElement(MovableAreaContext.Provider, { value: contextValue }, createElement(
+      GestureDetector,
+      { gesture: scaleGesture },
+      createElement(
+        View,
+        innerProps,
+        wrapChildren(
+          props,
+          {
+            hasVarDec,
+            varContext: varContextRef.current
+          }
+        )
+      )
+    ))
+  }
+
   if (hasPositionFixed) {
     movableComponent = createElement(Portal, null, movableComponent)
   }
+
   return movableComponent
 })