@mpxjs/webpack-plugin 2.10.7-beta.1 → 2.10.7-beta.11

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

@@ -1,7 +1,6 @@
 import { forwardRef, useRef, useContext, useMemo, useState } from 'react';
 import { warn, isFunction } from '@mpxjs/utils';
 import Portal from './mpx-portal/index';
-import { usePreventRemove } from '@react-navigation/native';
 import { getCustomEvent } from './getInnerListeners';
 import { promisify, redirectTo, navigateTo, navigateBack, reLaunch, switchTab } from '@mpxjs/api-proxy';
 import { WebView } from 'react-native-webview';
@@ -56,8 +55,8 @@ const _WebView = forwardRef((props, ref) => {
     const webViewRef = useRef(null);
     const fristLoaded = useRef(false);
     const isLoadError = useRef(false);
-    const isNavigateBack = useRef(false);
     const statusCode = useRef('');
+    const [isLoaded, setIsLoaded] = useState(true);
     const defaultWebViewStyle = {
         position: 'absolute',
         left: 0,
@@ -65,18 +64,27 @@ const _WebView = forwardRef((props, ref) => {
         top: 0,
         bottom: 0
     };
-    const navigation = useNavigation();
-    const [isIntercept, setIsIntercept] = useState(false);
-    usePreventRemove(isIntercept, (event) => {
-        const { data } = event;
-        if (isNavigateBack.current) {
-            navigation?.dispatch(data.action);
-        }
-        else {
+    const canGoBack = useRef(false);
+    const isNavigateBack = useRef(false);
+    const beforeRemoveHandle = (e) => {
+        if (canGoBack.current && !isNavigateBack.current) {
             webViewRef.current?.goBack();
+            e.preventDefault();
         }
         isNavigateBack.current = false;
-    });
+    };
+    const navigation = useNavigation();
+    // useEffect(() => {
+    //   let beforeRemoveSubscription:any
+    //   if (__mpx_mode__ !== 'ios') {
+    //     beforeRemoveSubscription = navigation?.addListener?.('beforeRemove', beforeRemoveHandle)
+    //   }
+    //   return () => {
+    //     if (isFunction(beforeRemoveSubscription)) {
+    //       beforeRemoveSubscription()
+    //     }
+    //   }
+    // }, [])
     useNodesRef(props, ref, webViewRef, {
         style: defaultWebViewStyle
     });
@@ -123,13 +131,13 @@ const _WebView = forwardRef((props, ref) => {
     };
     const _changeUrl = function (navState) {
         if (navState.navigationType) { // navigationType这个事件在页面开始加载时和页面加载完成时都会被触发所以判断这个避免其他无效触发执行该逻辑
+            canGoBack.current = navState.canGoBack;
             currentPage.__webViewUrl = navState.url;
-            setIsIntercept(navState.canGoBack);
         }
     };
     const _onLoadProgress = function (event) {
         if (__mpx_mode__ !== 'ios') {
-            setIsIntercept(event.nativeEvent.canGoBack);
+            canGoBack.current = event.nativeEvent.canGoBack;
         }
     };
     const _message = function (res) {
@@ -219,6 +227,7 @@ const _WebView = forwardRef((props, ref) => {
     };
     const onLoadEndHandle = function (res) {
         fristLoaded.current = true;
+        setIsLoaded(true);
         const src = res.nativeEvent?.url;
         if (isLoadError.current) {
             isLoadError.current = false;
@@ -266,13 +275,18 @@ const _WebView = forwardRef((props, ref) => {
             setPageLoadErr(true);
         }
     };
+    const onLoadStart = function () {
+        if (!fristLoaded.current) {
+            setIsLoaded(false);
+        }
+    };
     return (<Portal>
         {pageLoadErr
             ? (<View style={[styles.loadErrorContext, defaultWebViewStyle]}>
               <View style={styles.loadErrorText}><Text style={{ fontSize: 14, color: '#999999' }}>{currentErrorText.text}</Text></View>
               <View style={styles.loadErrorButton} onTouchEnd={_reload}><Text style={{ fontSize: 12, color: '#666666' }}>{currentErrorText.button}</Text></View>
             </View>)
-            : (<WebView style={defaultWebViewStyle} source={{ uri: src }} ref={webViewRef} javaScriptEnabled={true} onNavigationStateChange={_changeUrl} onMessage={_message} injectedJavaScript={injectedJavaScript} onLoadProgress={_onLoadProgress} onLoadEnd={onLoadEnd} onHttpError={onHttpError} onError={onError} allowsBackForwardNavigationGestures={true}></WebView>)}
+            : (<WebView style={defaultWebViewStyle} pointerEvents={isLoaded ? 'auto' : 'none'} source={{ uri: src }} ref={webViewRef} javaScriptEnabled={true} onNavigationStateChange={_changeUrl} onMessage={_message} injectedJavaScript={injectedJavaScript} onLoadProgress={_onLoadProgress} onLoadEnd={onLoadEnd} onHttpError={onHttpError} onError={onError} onLoadStart={onLoadStart} allowsBackForwardNavigationGestures={true}></WebView>)}
       </Portal>);
 });
 _WebView.displayName = 'MpxWebview';

package/lib/runtime/components/react/dist/useAnimationHooks.js

@@ -48,6 +48,90 @@ const InitialValue = Object.assign({
 const TransformOrigin = 'transformOrigin';
 // transform
 const isTransform = (key) => Object.keys(TransformInitial).includes(key);
+// 多value解析
+const parseValues = (str, char = ' ') => {
+    let stack = 0;
+    let temp = '';
+    const result = [];
+    for (let i = 0; i < str.length; i++) {
+        if (str[i] === '(') {
+            stack++;
+        }
+        else if (str[i] === ')') {
+            stack--;
+        }
+        // 非括号内 或者 非分隔字符且非空
+        if (stack !== 0 || (str[i] !== char && str[i] !== ' ')) {
+            temp += str[i];
+        }
+        if ((stack === 0 && str[i] === char) || i === str.length - 1) {
+            result.push(temp);
+            temp = '';
+        }
+    }
+    return result;
+};
+// parse string transform, eg: transform: 'rotateX(45deg) rotateZ(0.785398rad)'
+const parseTransform = (transformStr) => {
+    const values = parseValues(transformStr);
+    const transform = [];
+    values.forEach(item => {
+        const match = item.match(/([/\w]+)\((.+)\)/);
+        if (match && match.length >= 3) {
+            let key = match[1];
+            const val = match[2];
+            switch (key) {
+                case 'translateX':
+                case 'translateY':
+                case 'scaleX':
+                case 'scaleY':
+                case 'rotateX':
+                case 'rotateY':
+                case 'rotateZ':
+                case 'rotate':
+                case 'skewX':
+                case 'skewY':
+                case 'perspective':
+                    // rotate 处理成 rotateZ
+                    key = key === 'rotate' ? 'rotateZ' : key;
+                    // 单个值处理
+                    transform.push({ [key]: global.__formatValue(val) });
+                    break;
+                case 'matrix':
+                    transform.push({ [key]: parseValues(val, ',').map(val => +val) });
+                    break;
+                case 'translate':
+                case 'scale':
+                case 'skew':
+                case 'translate3d': // x y 支持 z不支持
+                case 'scale3d': // x y 支持 z不支持
+                    {
+                        // 2 个以上的值处理
+                        key = key.replace('3d', '');
+                        const vals = parseValues(val, ',').splice(0, 3);
+                        // scale(.5) === scaleX(.5) scaleY(.5)
+                        if (vals.length === 1 && key === 'scale') {
+                            vals.push(vals[0]);
+                        }
+                        const xyz = ['X', 'Y', 'Z'];
+                        transform.push(...vals.map((v, index) => {
+                            return { [`${key}${xyz[index] || ''}`]: global.__formatValue(v.trim()) };
+                        }));
+                        break;
+                    }
+            }
+        }
+    });
+    return transform;
+};
+// format style
+const formatStyle = (style) => {
+    if (!style.transform || Array.isArray(style.transform))
+        return style;
+    return Object.assign({}, style, {
+        transform: parseTransform(style.transform)
+    });
+};
 // transform 数组转对象
 function getTransformObj(transforms) {
     'worklet';
@@ -56,7 +140,7 @@ function getTransformObj(transforms) {
     }, {});
 }
 export default function useAnimationHooks(props) {
-    const { style: originalStyle = {}, animation, enableAnimation, transitionend, layoutRef } = props;
+    const { style = {}, animation, enableAnimation, transitionend, layoutRef } = props;
     const enableStyleAnimation = enableAnimation || !!animation;
     const enableAnimationRef = useRef(enableStyleAnimation);
     if (enableAnimationRef.current !== enableStyleAnimation) {
@@ -64,6 +148,7 @@ export default function useAnimationHooks(props) {
     }
     if (!enableAnimationRef.current)
         return { enableStyleAnimation: false };
+    const originalStyle = formatStyle(style);
     // id 标识
     const id = animation?.id || -1;
     // 有动画样式的 style key
@@ -92,7 +177,7 @@ export default function useAnimationHooks(props) {
     useEffect(() => {
         // style 更新后同步更新 lastStyleRef & shareValMap
         updateStyleVal();
-    }, [originalStyle]);
+    }, [style]);
     // ** 获取动画样式prop & 驱动动画
     // eslint-disable-next-line react-hooks/rules-of-hooks
     useEffect(() => {

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

@@ -533,19 +533,8 @@ 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
-                    };
+                    const { top: navigationY = 0 } = navigation?.layout || {};
+                    layoutRef.current = { x, y: y - navigationY, width, height, offsetLeft, offsetTop: offsetTop - navigationY };
                 });
             }
             onLayout && onLayout(e);

package/lib/runtime/components/react/getInnerListeners.ts

@@ -24,7 +24,7 @@ const getTouchEvent = (
 ) => {
   const { navigation, propsRef, layoutRef } = config
   const props = propsRef.current
-  const { top: navigationY = 0 } = navigation?.layout || {}
+  const { y: navigationY = 0 } = navigation?.layout || {}
   const nativeEvent = event.nativeEvent
   const { timestamp, pageX, pageY, touches, changedTouches } = nativeEvent
   const { id } = props

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
 })