@mpxjs/webpack-plugin 2.9.66 → 2.9.69

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

@@ -2,8 +2,8 @@
  * ✘ scale-area
  */
 
-import { View, LayoutChangeEvent } from 'react-native'
-import { JSX, useState, useEffect, forwardRef, ReactNode, useRef } from 'react'
+import { View } from 'react-native'
+import { JSX, forwardRef, ReactNode, useRef, useMemo } from 'react'
 import useNodesRef, { HandlerRef } from './useNodesRef'
 import useInnerProps from './getInnerListeners'
 import { MovableAreaContext } from './context'
@@ -23,14 +23,7 @@ interface MovableAreaProps {
 }
 
 const _MovableArea = forwardRef<HandlerRef<View, MovableAreaProps>, MovableAreaProps>((props: MovableAreaProps, ref): JSX.Element => {
-  const { style = {}, width = 10, height = 10, 'enable-var': enableVar, 'external-var-context': externalVarContext, 'parent-font-size': parentFontSize, 'parent-width': parentWidth, 'parent-height': parentHeight } = props
-  const [areaWidth, setAreaWidth] = useState(0)
-  const [areaHeight, setAreaHeight] = useState(0)
-
-  useEffect(() => {
-    setAreaWidth(width)
-    setAreaHeight(height)
-  }, [width, height])
+  const { style = {}, 'enable-var': enableVar, 'external-var-context': externalVarContext, 'parent-font-size': parentFontSize, 'parent-width': parentWidth, 'parent-height': parentHeight } = props
 
   const {
     hasSelfPercent,
@@ -44,22 +37,21 @@ const _MovableArea = forwardRef<HandlerRef<View, MovableAreaProps>, MovableAreaP
   const movableViewRef = useRef(null)
   useNodesRef(props, ref, movableViewRef)
 
-  const onLayout = (e: LayoutChangeEvent) => {
-    const { width = 10, height = 10 } = e.nativeEvent.layout
-    setAreaWidth(width)
-    setAreaHeight(height)
-  }
+  const contextValue = useMemo(() => ({
+    height: normalStyle.height || 10,
+    width: normalStyle.width || 10
+  }), [normalStyle.width, normalStyle.height])
 
-  const { layoutRef, layoutStyle, layoutProps } = useLayout({ props, hasSelfPercent, setWidth, setHeight, nodeRef: movableViewRef, onLayout })
+  const { layoutRef, layoutStyle, layoutProps } = useLayout({ props, hasSelfPercent, setWidth, setHeight, nodeRef: movableViewRef })
 
   const innerProps = useInnerProps(props, {
-    style: { height: areaHeight, width: areaWidth, overflow: 'hidden', ...normalStyle, ...layoutStyle },
+    style: { height: contextValue.height, width: contextValue.width, overflow: 'hidden', ...normalStyle, ...layoutStyle },
     ref: movableViewRef,
     ...layoutProps
   }, [], { layoutRef })
 
   return (
-    <MovableAreaContext.Provider value={{ height: areaHeight, width: areaWidth }}>
+    <MovableAreaContext.Provider value={contextValue}>
       <View
         {...innerProps}
       >
@@ -77,6 +69,6 @@ const _MovableArea = forwardRef<HandlerRef<View, MovableAreaProps>, MovableAreaP
   )
 })
 
-_MovableArea.displayName = 'mpx-movable-area'
+_MovableArea.displayName = 'MpxMovableArea'
 
 export default _MovableArea