feat: movable、scroll-view、canvas、video支持fixed定位

Author: lareinayanyu

packages/webpack-plugin/lib/runtime/components/react/mpx-canvas/index.tsx

@@ -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), {
@@ -280,7 +282,7 @@ const _Canvas = forwardRef<HandlerRef<CanvasProps & View, CanvasProps>, CanvasPr
     )
   }
 
-  return createElement(View, innerProps, createElement(WebView, {
+  let canvasComponent: JSX.Element = createElement(View, innerProps, createElement(WebView, {
     ref: (element) => {
       if (canvasRef.current) {
         canvasRef.current.webview = element
@@ -293,6 +295,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'

packages/webpack-plugin/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 })
@@ -51,7 +53,7 @@ const _MovableArea = forwardRef<HandlerRef<View, MovableAreaProps>, MovableAreaP
     ref: movableViewRef
   }, layoutProps), [], { layoutRef })
 
-  return createElement(MovableAreaContext.Provider, { value: contextValue }, createElement(
+  let movableComponent: JSX.Element = createElement(MovableAreaContext.Provider, { value: contextValue }, createElement(
     View,
     innerProps,
     wrapChildren(
@@ -62,6 +64,10 @@ const _MovableArea = forwardRef<HandlerRef<View, MovableAreaProps>, MovableAreaP
       }
     )
   ))
+  if (hasPositionFixed) {
+    movableComponent = createElement(Portal, null, movableComponent)
+  }
+  return movableComponent
 })
 
 _MovableArea.displayName = 'MpxMovableArea'

packages/webpack-plugin/lib/runtime/components/react/mpx-scroll-view.tsx

@@ -40,6 +40,7 @@ import useInnerProps, { getCustomEvent } from './getInnerListeners'
 import useNodesRef, { HandlerRef } from './useNodesRef'
 import { splitProps, splitStyle, useTransformStyle, useLayout, wrapChildren, extendObject, flatGesture, GestureHandler } from './utils'
 import { IntersectionObserverContext, ScrollViewContext } from './context'
+import Portal from './mpx-portal'
 
 interface ScrollViewProps {
   children?: ReactNode;
@@ -172,6 +173,7 @@ const _ScrollView = forwardRef<HandlerRef<ScrollView & View, ScrollViewProps>, S
     hasVarDec,
     varContextRef,
     hasSelfPercent,
+    hasPositionFixed,
     setWidth,
     setHeight
   } = useTransformStyle(style, { enableVar, externalVarContext, parentFontSize, parentWidth, parentHeight })
@@ -528,7 +530,7 @@ const _ScrollView = forwardRef<HandlerRef<ScrollView & View, ScrollViewProps>, S
     white: ['#fff']
   }
 
-  return createElement(
+  let scrollViewComponent: JSX.Element = createElement(
     ScrollView,
     extendObject({}, innerProps, {
       refreshControl: refresherEnabled
@@ -552,6 +554,12 @@ const _ScrollView = forwardRef<HandlerRef<ScrollView & View, ScrollViewProps>, S
       )
     )
   )
+
+  if (hasPositionFixed) {
+    scrollViewComponent = createElement(Portal, null, scrollViewComponent)
+  }
+
+  return scrollViewComponent
 })
 
 _ScrollView.displayName = 'MpxScrollView'

packages/webpack-plugin/lib/runtime/components/react/mpx-video.tsx

@@ -74,6 +74,7 @@ import {
 } from './utils'
 import useInnerProps, { getCustomEvent } from './getInnerListeners'
 import useNodesRef, { HandlerRef } from './useNodesRef'
+import Portal from './mpx-portal'
 
 interface VideoProps {
   src: string;
@@ -170,7 +171,7 @@ const MpxVideo = forwardRef<HandlerRef<View, VideoProps>, VideoProps>((videoProp
 
   propsRef.current = props
 
-  const { normalStyle, hasSelfPercent, setWidth, setHeight } =
+  const { normalStyle, hasSelfPercent, setWidth, setHeight, hasPositionFixed } =
     useTransformStyle(extendObject({}, styles.container, style), {
       enableVar,
       externalVarContext,
@@ -380,9 +381,13 @@ const MpxVideo = forwardRef<HandlerRef<View, VideoProps>, VideoProps>((videoProp
     ],
     { layoutRef }
   )
-  return createElement(View, { style: extendObject({}, normalStyle, layoutStyle), ref: viewRef },
+  let videoComponent: JSX.Element = createElement(View, { style: extendObject({}, normalStyle, layoutStyle), ref: viewRef },
     createElement(Video, innerProps)
   )
+  if (hasPositionFixed) {
+    videoComponent = createElement(Portal, null, videoComponent)
+  }
+  return videoComponent
 })
 
 export default MpxVideo