@mpxjs/webpack-plugin 2.10.4-beta.9 → 2.10.5-beta.1

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'
@@ -51,6 +52,7 @@ import useInnerProps, { getCustomEvent } from './getInnerListeners'
 import useNodesRef, { HandlerRef } from './useNodesRef'
 import { RouteContext, FormContext } from './context'
 import type { ExtendedViewStyle } from './types/common'
+import Portal from './mpx-portal'
 
 export type Type = 'default' | 'primary' | 'warn'
 
@@ -156,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],
@@ -290,6 +292,7 @@ const Button = forwardRef<HandlerRef<View, ButtonProps>, ButtonProps>((buttonPro
   )
 
   const {
+    hasPositionFixed,
     hasSelfPercent,
     normalStyle,
     hasVarDec,
@@ -412,9 +415,15 @@ const Button = forwardRef<HandlerRef<View, ButtonProps>, ButtonProps>((buttonPro
     )
   )
 
-  return enableHover
+  const finalComponent = enableHover
     ? createElement(GestureDetector, { gesture: gesture as PanGesture }, baseButton)
     : baseButton
+
+  if (hasPositionFixed) {
+    return createElement(Portal, null, finalComponent)
+  }
+
+  return finalComponent
 })
 
 Button.displayName = 'MpxButton'

package/lib/runtime/components/react/mpx-canvas/Image.ts

@@ -1,4 +1,5 @@
 import { WebviewMessage, WEBVIEW_TARGET, registerWebviewProperties, CanvasInstance } from './utils'
+import { extendObject } from '../utils'
 
 const PROPERTIES = {
   crossOrigin: undefined,
@@ -60,10 +61,9 @@ export class Image {
             this[key] = value
           }
         }
-        callbackFn({
-          ...message.payload,
-          target: this
-        })
+        callbackFn(
+          extendObject({}, message.payload, { target: this })
+        )
       }
     })
   }

package/lib/runtime/components/react/mpx-canvas/index.tsx

@@ -9,7 +9,7 @@
  * ✔ bindlongtap
  * ✔ binderror
  */
-import React, { createElement, useRef, useState, useCallback, useEffect, forwardRef, JSX, TouchEvent, MutableRefObject } from 'react'
+import { createElement, useRef, useState, useCallback, useEffect, forwardRef, JSX, TouchEvent, MutableRefObject } from 'react'
 import { View, Platform, StyleSheet, NativeSyntheticEvent } from 'react-native'
 import { WebView } from 'react-native-webview'
 import useNodesRef, { HandlerRef } from '../useNodesRef'
@@ -31,6 +31,7 @@ import './CanvasGradient'
 import { createImage as canvasCreateImage } from './Image'
 import { createImageData as canvasCreateImageData } from './ImageData'
 import { useConstructorsRegistry } from './constructorsRegistry'
+import Portal from '../mpx-portal'
 
 const stylesheet = StyleSheet.create({
   container: { overflow: 'hidden', flex: 0 },
@@ -71,6 +72,7 @@ const _Canvas = forwardRef<HandlerRef<CanvasProps & View, CanvasProps>, CanvasPr
   const {
     normalStyle,
     hasSelfPercent,
+    hasPositionFixed,
     setWidth,
     setHeight
   } = useTransformStyle(extendObject({}, style, stylesheet.container), {
@@ -166,10 +168,7 @@ const _Canvas = forwardRef<HandlerRef<CanvasProps & View, CanvasProps>, CanvasPr
 
   const postMessage = useCallback(async (message: WebviewMessage) => {
     if (!canvasRef.current?.bus) return
-    const { type, payload } = await canvasRef.current.bus.post({
-      id: ID(),
-      ...message
-    })
+    const { type, payload } = await canvasRef.current.bus.post(extendObject({ id: ID() }, message))
 
     switch (type) {
       case 'error': {
@@ -204,7 +203,7 @@ const _Canvas = forwardRef<HandlerRef<CanvasProps & View, CanvasProps>, CanvasPr
   }
 
   const onMessage = useCallback((e: { nativeEvent: { data: string } }) => {
-    let data = JSON.parse(e.nativeEvent.data)
+    const data = JSON.parse(e.nativeEvent.data)
     switch (data.type) {
       case 'error': {
         const { binderror } = props
@@ -220,27 +219,27 @@ const _Canvas = forwardRef<HandlerRef<CanvasProps & View, CanvasProps>, CanvasPr
         break
       }
       default: {
+        const newData: { payload?: unknown } = {}
+        // createLinearGradient 方法调用需要在 constructors 中需要注册 CanvasGradient
+        const constructor = constructors[data.meta.constructor]
         if (data.payload) {
-          // createLinearGradient 方法调用需要在 constructors 中需要注册 CanvasGradient
-          const constructor = constructors[data.meta.constructor]
           if (constructor) {
             const { args, payload } = data
             // RN 端同步生成一个 CanvasGradient 的实例
             const object = constructor.constructLocally(canvasRef.current, ...args)
-            Object.assign(object, payload, {
+            extendObject(object, payload, {
               [WEBVIEW_TARGET]: data.meta.target
             })
-            data = {
-              ...data,
+            extendObject(newData, data, {
               payload: object
-            }
+            })
           }
           for (const listener of canvasRef.current.listeners) {
-            listener(data.payload)
+            listener(constructor ? newData.payload : data.payload)
           }
         }
         if (canvasRef.current.bus) {
-          canvasRef.current.bus.handle(data)
+          canvasRef.current.bus.handle(constructor && data.payload ? newData : data)
         }
       }
     }
@@ -259,9 +258,11 @@ const _Canvas = forwardRef<HandlerRef<CanvasProps & View, CanvasProps>, CanvasPr
     context: context2D
   })
 
-  if (__mpx_mode__ !== 'ios') {
+  let canvasComponent
+
+  if (__mpx_mode__ === 'android') {
     const isAndroid9 = Platform.Version as number >= 28
-    return createElement(View, innerProps, createElement(
+    canvasComponent = createElement(View, innerProps, createElement(
       WebView,
       {
         ref: (element) => {
@@ -288,7 +289,7 @@ const _Canvas = forwardRef<HandlerRef<CanvasProps & View, CanvasProps>, CanvasPr
     )
   }
 
-  return createElement(View, innerProps, createElement(WebView, {
+  canvasComponent = createElement(View, innerProps, createElement(WebView, {
     ref: (element) => {
       if (canvasRef.current) {
         canvasRef.current.webview = element
@@ -301,6 +302,12 @@ const _Canvas = forwardRef<HandlerRef<CanvasProps & View, CanvasProps>, CanvasPr
     onLoad: onLoad,
     scrollEnabled: false
   }))
+
+  if (hasPositionFixed) {
+    canvasComponent = createElement(Portal, null, canvasComponent)
+  }
+
+  return canvasComponent
 })
 
 _Canvas.displayName = 'mpxCanvas'

package/lib/runtime/components/react/mpx-checkbox-group.tsx

@@ -21,6 +21,7 @@ import { FormContext, FormFieldValue, CheckboxGroupContext, GroupValue } from '.
 import useInnerProps, { getCustomEvent } from './getInnerListeners'
 import useNodesRef, { HandlerRef } from './useNodesRef'
 import { useLayout, useTransformStyle, wrapChildren, extendObject } from './utils'
+import Portal from './mpx-portal'
 
 export interface CheckboxGroupProps {
   name: string
@@ -68,6 +69,7 @@ const CheckboxGroup = forwardRef<
   const styleObj = extendObject({}, defaultStyle, style)
 
   const {
+    hasPositionFixed,
     hasSelfPercent,
     normalStyle,
     hasVarDec,
@@ -159,7 +161,7 @@ const CheckboxGroup = forwardRef<
     }
   }, [])
 
-  return createElement(
+  const finalComponent = createElement(
     View,
     innerProps,
     createElement(
@@ -174,6 +176,12 @@ const CheckboxGroup = forwardRef<
       )
     )
   )
+
+  if (hasPositionFixed) {
+    return createElement(Portal, null, finalComponent)
+  }
+
+  return finalComponent
 })
 
 CheckboxGroup.displayName = 'MpxCheckboxGroup'

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

@@ -28,6 +28,7 @@ import useNodesRef, { HandlerRef } from './useNodesRef'
 import Icon from './mpx-icon'
 import { splitProps, splitStyle, useLayout, useTransformStyle, wrapChildren, extendObject } from './utils'
 import { CheckboxGroupContext, LabelContext } from './context'
+import Portal from './mpx-portal'
 
 interface Selection {
   value?: string
@@ -128,6 +129,7 @@ const Checkbox = forwardRef<HandlerRef<View, CheckboxProps>, CheckboxProps>(
     }
 
     const {
+      hasPositionFixed,
       hasSelfPercent,
       normalStyle,
       hasVarDec,
@@ -206,7 +208,7 @@ const Checkbox = forwardRef<HandlerRef<View, CheckboxProps>, CheckboxProps>(
       }
     }, [checked])
 
-    return createElement(View, innerProps,
+    const finalComponent = createElement(View, innerProps,
       createElement(
         View,
         { style: defaultStyle },
@@ -227,6 +229,12 @@ const Checkbox = forwardRef<HandlerRef<View, CheckboxProps>, CheckboxProps>(
         }
       )
     )
+
+    if (hasPositionFixed) {
+      return createElement(Portal, null, finalComponent)
+    }
+
+    return finalComponent
   }
 )
 

package/lib/runtime/components/react/mpx-icon/index.tsx

@@ -17,6 +17,7 @@ import Cancel from './icons/cancel.png'
 import Download from './icons/download.png'
 import Search from './icons/search.png'
 import Clear from './icons/clear.png'
+import Portal from '../mpx-portal'
 
 export type IconType =
   | 'success'
@@ -75,6 +76,7 @@ const Icon = forwardRef<HandlerRef<Text, IconProps>, IconProps>(
     const styleObj = extendObject({}, defaultStyle, style)
 
     const {
+      hasPositionFixed,
       hasSelfPercent,
       normalStyle,
       setWidth,
@@ -103,7 +105,13 @@ const Icon = forwardRef<HandlerRef<Text, IconProps>, IconProps>(
       }
     )
 
-    return createElement(Image, innerProps)
+    const finalComponent = createElement(Image, innerProps)
+
+    if (hasPositionFixed) {
+      return createElement(Portal, null, finalComponent)
+    }
+
+    return finalComponent
   }
 )
 

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

@@ -27,6 +27,7 @@ import { SvgCssUri } from 'react-native-svg/css'
 import useInnerProps, { getCustomEvent } from './getInnerListeners'
 import useNodesRef, { HandlerRef } from './useNodesRef'
 import { SVG_REGEXP, useLayout, useTransformStyle, renderImage, extendObject } from './utils'
+import Portal from './mpx-portal'
 
 export type Mode =
   | 'scaleToFill'
@@ -159,7 +160,13 @@ const Image = forwardRef<HandlerRef<RNImage, ImageProps>, ImageProps>((props, re
     }
   }
 
-  const { normalStyle, hasSelfPercent, setWidth, setHeight } = useTransformStyle(styleObj, { enableVar, externalVarContext, parentFontSize, parentWidth, parentHeight })
+  const {
+    hasPositionFixed,
+    hasSelfPercent,
+    normalStyle,
+    setWidth,
+    setHeight
+  } = useTransformStyle(styleObj, { enableVar, externalVarContext, parentFontSize, parentWidth, parentHeight })
 
   const { layoutRef, layoutStyle, layoutProps } = useLayout({
     props,
@@ -356,25 +363,31 @@ const Image = forwardRef<HandlerRef<RNImage, ImageProps>, ImageProps>((props, re
 
   useEffect(() => {
     if (!isSvg && isLayoutMode) {
-      RNImage.getSize(src, (width: number, height: number) => {
-        state.current.imageWidth = width
-        state.current.imageHeight = height
-        state.current.ratio = !width ? 0 : height / width
-
-        if (isWidthFixMode
-          ? state.current.viewWidth
-          : isHeightFixMode
-            ? state.current.viewHeight
-            : state.current.viewWidth && state.current.viewHeight) {
-          state.current.viewWidth && setViewWidth(state.current.viewWidth)
-          state.current.viewHeight && setViewHeight(state.current.viewHeight)
-          setRatio(!width ? 0 : height / width)
-          setImageWidth(width)
-          setImageHeight(height)
-          state.current = {}
+      RNImage.getSize(
+        src,
+        (width: number, height: number) => {
+          state.current.imageWidth = width
+          state.current.imageHeight = height
+          state.current.ratio = !width ? 0 : height / width
+
+          if (isWidthFixMode
+            ? state.current.viewWidth
+            : isHeightFixMode
+              ? state.current.viewHeight
+              : state.current.viewWidth && state.current.viewHeight) {
+            state.current.viewWidth && setViewWidth(state.current.viewWidth)
+            state.current.viewHeight && setViewHeight(state.current.viewHeight)
+            setRatio(!width ? 0 : height / width)
+            setImageWidth(width)
+            setImageHeight(height)
+            state.current = {}
+            setLoaded(true)
+          }
+        },
+        () => {
           setLoaded(true)
         }
-      })
+      )
     }
   }, [src, isSvg, isLayoutMode])
 
@@ -441,7 +454,13 @@ const Image = forwardRef<HandlerRef<RNImage, ImageProps>, ImageProps>((props, re
 
   const LayoutImage = createElement(View, innerProps, loaded && BaseImage)
 
-  return isSvg ? SvgImage : isLayoutMode ? LayoutImage : BaseImage
+  const finalComponent = isSvg ? SvgImage : isLayoutMode ? LayoutImage : BaseImage
+
+  if (hasPositionFixed) {
+    return createElement(Portal, null, finalComponent)
+  }
+
+  return finalComponent
 })
 
 Image.displayName = 'mpx-image'

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

@@ -58,6 +58,7 @@ import { useUpdateEffect, useTransformStyle, useLayout, extendObject, isIOS } fr
 import useInnerProps, { getCustomEvent } from './getInnerListeners'
 import useNodesRef, { HandlerRef } from './useNodesRef'
 import { FormContext, FormFieldValue, KeyboardAvoidContext } from './context'
+import Portal from './mpx-portal'
 
 type InputStyle = Omit<
   TextStyle & ViewStyle & Pick<FlexStyle, 'minHeight'>,
@@ -202,6 +203,7 @@ const Input = forwardRef<HandlerRef<TextInput, FinalInputProps>, FinalInputProps
   )
 
   const {
+    hasPositionFixed,
     hasSelfPercent,
     normalStyle,
     setWidth,
@@ -481,7 +483,14 @@ const Input = forwardRef<HandlerRef<TextInput, FinalInputProps>, FinalInputProps
       layoutRef
     }
   )
-  return createElement(TextInput, innerProps)
+
+  const finalComponent = createElement(TextInput, innerProps)
+
+  if (hasPositionFixed) {
+    return createElement(Portal, null, finalComponent)
+  }
+
+  return finalComponent
 })
 
 Input.displayName = 'MpxInput'

package/lib/runtime/components/react/mpx-keyboard-avoiding-view.tsx

@@ -48,7 +48,7 @@ const KeyboardAvoidingView = ({ children, style, contentContainerStyle }: Keyboa
           const { ref, cursorSpacing = 0 } = keyboardAvoid.current
           setTimeout(() => {
             ref?.current?.measure((x: number, y: number, width: number, height: number, pageX: number, pageY: number) => {
-              const aboveOffset = pageY + height - endCoordinates.screenY
+              const aboveOffset = offset.value + pageY + height - endCoordinates.screenY
               const aboveValue = -aboveOffset >= cursorSpacing ? 0 : aboveOffset + cursorSpacing
               const belowValue = Math.min(endCoordinates.height, aboveOffset + cursorSpacing)
               const value = aboveOffset > 0 ? belowValue : aboveValue

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

@@ -8,6 +8,7 @@ import useInnerProps, { getCustomEvent } from './getInnerListeners'
 import useNodesRef, { HandlerRef } from './useNodesRef'
 import { splitProps, splitStyle, useLayout, useTransformStyle, wrapChildren, extendObject } from './utils'
 import { LabelContext, LabelContextValue } from './context'
+import Portal from './mpx-portal'
 
 export interface LabelProps {
   for?: string
@@ -45,6 +46,7 @@ const Label = forwardRef<HandlerRef<View, LabelProps>, LabelProps>(
     const styleObj = extendObject({}, defaultStyle, style)
 
     const {
+      hasPositionFixed,
       hasSelfPercent,
       normalStyle,
       hasVarDec,
@@ -91,7 +93,7 @@ const Label = forwardRef<HandlerRef<View, LabelProps>, LabelProps>(
       }
     )
 
-    return createElement(View, innerProps, createElement(
+    const finalComponent = createElement(View, innerProps, createElement(
       LabelContext.Provider,
       { value: contextRef },
       wrapChildren(
@@ -104,6 +106,12 @@ const Label = forwardRef<HandlerRef<View, LabelProps>, LabelProps>(
         }
       )
     ))
+
+    if (hasPositionFixed) {
+      return createElement(Portal, null, finalComponent)
+    }
+
+    return finalComponent
   }
 )
 

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

@@ -8,6 +8,7 @@ import useNodesRef, { HandlerRef } from './useNodesRef'
 import useInnerProps from './getInnerListeners'
 import { MovableAreaContext } from './context'
 import { useTransformStyle, wrapChildren, useLayout, extendObject } from './utils'
+import Portal from './mpx-portal'
 
 interface MovableAreaProps {
   style?: Record<string, any>
@@ -30,6 +31,7 @@ const _MovableArea = forwardRef<HandlerRef<View, MovableAreaProps>, MovableAreaP
     normalStyle,
     hasVarDec,
     varContextRef,
+    hasPositionFixed,
     setWidth,
     setHeight
   } = useTransformStyle(style, { enableVar, externalVarContext, parentFontSize, parentWidth, parentHeight })
@@ -60,7 +62,7 @@ const _MovableArea = forwardRef<HandlerRef<View, MovableAreaProps>, MovableAreaP
     { layoutRef }
   )
 
-  return createElement(MovableAreaContext.Provider, { value: contextValue }, createElement(
+  let movableComponent: JSX.Element = createElement(MovableAreaContext.Provider, { value: contextValue }, createElement(
     View,
     innerProps,
     wrapChildren(
@@ -71,6 +73,10 @@ const _MovableArea = forwardRef<HandlerRef<View, MovableAreaProps>, MovableAreaP
       }
     )
   ))
+  if (hasPositionFixed) {
+    movableComponent = createElement(Portal, null, movableComponent)
+  }
+  return movableComponent
 })
 
 _MovableArea.displayName = 'MpxMovableArea'