@mpxjs/webpack-plugin 2.10.6 → 2.10.7-beta.10

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

@@ -237,6 +237,95 @@ function transformPosition(styleObj, meta) {
         meta.hasPositionFixed = true;
     }
 }
+// 多value解析
+function 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)'
+function 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 transform
+function transformTransform(style) {
+    if (!style.transform || Array.isArray(style.transform))
+        return;
+    style.transform = parseTransform(style.transform);
+}
+function transformBoxShadow(styleObj) {
+    if (!styleObj.boxShadow)
+        return;
+    styleObj.boxShadow = parseValues(styleObj.boxShadow).reduce((res, i, idx) => {
+        return `${res}${idx === 0 ? '' : ' '}${global.__formatValue(i)}`;
+    }, '');
+}
 export function useTransformStyle(styleObj = {}, { enableVar, externalVarContext, parentFontSize, parentWidth, parentHeight }) {
     const varStyle = {};
     const unoVarStyle = {};
@@ -365,6 +454,10 @@ export function useTransformStyle(styleObj = {}, { enableVar, externalVarContext
     transformPosition(normalStyle, positionMeta);
     // transform number enum stringify
     transformStringify(normalStyle);
+    // transform rpx to px
+    transformBoxShadow(normalStyle);
+    // transform 字符串格式转化数组格式
+    transformTransform(normalStyle);
     return {
         hasVarDec,
         varContextRef,
@@ -440,7 +533,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 || {};
+                    const { top: navigationY = 0 } = navigation?.layout || {};
                     layoutRef.current = { x, y: y - navigationY, width, height, offsetLeft, offsetTop: offsetTop - navigationY };
                 });
             }

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

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

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

@@ -218,7 +218,7 @@ const Input = forwardRef<HandlerRef<TextInput, FinalInputProps>, FinalInputProps
   const { layoutRef, layoutStyle, layoutProps } = useLayout({ props, hasSelfPercent, setWidth, setHeight, nodeRef })
 
   useEffect(() => {
-    if (inputValue !== value) {
+    if (value !== tmpValue.current) {
       const parsed = parseValue(value)
       tmpValue.current = parsed
       setInputValue(parsed)

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(
@@ -54,8 +120,8 @@ const _MovableArea = forwardRef<HandlerRef<View, MovableAreaProps>, MovableAreaP
       props,
       layoutProps,
       {
-        style: extendObject({ height: contextValue.height, width: contextValue.width, overflow: 'hidden' }, normalStyle, layoutStyle),
-        ref: movableViewRef
+        style: extendObject({ height: contextValue.height, width: contextValue.width }, normalStyle, layoutStyle),
+        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
 })