@mpxjs/webpack-plugin 2.9.62 → 2.9.65

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

@@ -54,7 +54,8 @@ import {
   TextInputChangeEventData,
   TextInputSubmitEditingEventData
 } from 'react-native'
-import { parseInlineStyle, useUpdateEffect, throwReactWarning } from './utils'
+import { warn } from '@mpxjs/utils'
+import { parseInlineStyle, useUpdateEffect, useTransformStyle, useLayout } from './utils'
 import useInnerProps, { getCustomEvent } from './getInnerListeners'
 import useNodesRef, { HandlerRef } from './useNodesRef'
 import { FormContext, FormFieldValue } from './context'
@@ -72,6 +73,7 @@ type InputStyle = Omit<
 >
 
 type Type = 'text' | 'number' | 'idcard' | 'digit'
+
 export interface InputProps {
   name?: string
   style?: InputStyle & Record<string, any>
@@ -91,6 +93,11 @@ export interface InputProps {
   'selection-end'?: number
   'placeholder-style'?: string
   'enable-offset'?: boolean,
+  'enable-var'?: boolean
+  'external-var-context'?: Record<string, any>
+  'parent-font-size'?: number
+  'parent-width'?: number
+  'parent-height'?: number
   bindinput?: (evt: NativeSyntheticEvent<TextInputTextInputEventData> | unknown) => void
   bindfocus?: (evt: NativeSyntheticEvent<TextInputFocusEventData> | unknown) => void
   bindblur?: (evt: NativeSyntheticEvent<TextInputFocusEventData> | unknown) => void
@@ -113,8 +120,8 @@ const keyboardTypeMap: Record<Type, string> = {
   digit:
     Platform.select({
       ios: 'decimal-pad',
-      android: 'numeric',
-    }) || '',
+      android: 'numeric'
+    }) || ''
 }
 
 const Input = forwardRef<HandlerRef<TextInput, FinalInputProps>, FinalInputProps>((props: FinalInputProps, ref): JSX.Element => {
@@ -134,7 +141,11 @@ const Input = forwardRef<HandlerRef<TextInput, FinalInputProps>, FinalInputProps
     'cursor-color': cursorColor,
     'selection-start': selectionStart = -1,
     'selection-end': selectionEnd = -1,
-    'enable-offset': enableOffset,
+    'enable-var': enableVar,
+    'external-var-context': externalVarContext,
+    'parent-font-size': parentFontSize,
+    'parent-width': parentWidth,
+    'parent-height': parentHeight,
     bindinput,
     bindfocus,
     bindblur,
@@ -143,7 +154,7 @@ const Input = forwardRef<HandlerRef<TextInput, FinalInputProps>, FinalInputProps
     // private
     multiline,
     'auto-height': autoHeight,
-    bindlinechange,
+    bindlinechange
   } = props
 
   const formContext = useContext(FormContext)
@@ -154,14 +165,11 @@ const Input = forwardRef<HandlerRef<TextInput, FinalInputProps>, FinalInputProps
     formValuesMap = formContext.formValuesMap
   }
 
-  const { nodeRef } = useNodesRef(props, ref)
-
   const keyboardType = keyboardTypeMap[type]
   const defaultValue = type === 'number' && value ? value + '' : value
   const placeholderTextColor = parseInlineStyle(placeholderStyle)?.color
   const textAlignVertical = multiline ? 'top' : 'auto'
 
-  const layoutRef = useRef({})
   const tmpValue = useRef<string>()
   const cursorIndex = useRef<number>(0)
   const lineCount = useRef<number>(0)
@@ -169,6 +177,26 @@ const Input = forwardRef<HandlerRef<TextInput, FinalInputProps>, FinalInputProps
   const [inputValue, setInputValue] = useState(defaultValue)
   const [contentHeight, setContentHeight] = useState(0)
 
+  const styleObj = {
+    padding: 0,
+    ...style,
+    ...multiline && autoHeight && {
+      height: Math.max((style as any)?.minHeight || 35, contentHeight)
+    }
+  }
+
+  const {
+    hasSelfPercent,
+    normalStyle,
+    setWidth,
+    setHeight
+  } = useTransformStyle(styleObj, { enableVar, externalVarContext, parentFontSize, parentWidth, parentHeight })
+
+  const nodeRef = useRef(null)
+  useNodesRef(props, ref, nodeRef)
+
+  const { layoutRef, layoutStyle, layoutProps } = useLayout({ props, hasSelfPercent, setWidth, setHeight, nodeRef })
+
   useEffect(() => {
     if (inputValue !== value) {
       setInputValue(value)
@@ -187,7 +215,7 @@ const Input = forwardRef<HandlerRef<TextInput, FinalInputProps>, FinalInputProps
     if (!bindinput && !bindblur) return
     const {
       range: { start, end },
-      text,
+      text
     } = nativeEvent
     cursorIndex.current = start < end ? start : start + text.length
   }
@@ -202,7 +230,7 @@ const Input = forwardRef<HandlerRef<TextInput, FinalInputProps>, FinalInputProps
         {
           detail: {
             value: evt.nativeEvent.text,
-            cursor: cursorIndex.current,
+            cursor: cursorIndex.current
           },
           layoutRef
         },
@@ -225,7 +253,7 @@ const Input = forwardRef<HandlerRef<TextInput, FinalInputProps>, FinalInputProps
           evt,
           {
             detail: {
-              value: tmpValue.current || '',
+              value: tmpValue.current || ''
             },
             layoutRef
           },
@@ -243,7 +271,7 @@ const Input = forwardRef<HandlerRef<TextInput, FinalInputProps>, FinalInputProps
           {
             detail: {
               value: tmpValue.current || '',
-              cursor: cursorIndex.current,
+              cursor: cursorIndex.current
             },
             layoutRef
           },
@@ -261,7 +289,7 @@ const Input = forwardRef<HandlerRef<TextInput, FinalInputProps>, FinalInputProps
           evt,
           {
             detail: {
-              value: tmpValue.current || '',
+              value: tmpValue.current || ''
             },
             layoutRef
           },
@@ -279,7 +307,7 @@ const Input = forwardRef<HandlerRef<TextInput, FinalInputProps>, FinalInputProps
           evt,
           {
             detail: {
-              value: tmpValue.current || '',
+              value: tmpValue.current || ''
             },
             layoutRef
           },
@@ -303,7 +331,7 @@ const Input = forwardRef<HandlerRef<TextInput, FinalInputProps>, FinalInputProps
               detail: {
                 height,
                 lineHeight,
-                lineCount: lineCount.current,
+                lineCount: lineCount.current
               },
               layoutRef
             },
@@ -323,7 +351,7 @@ const Input = forwardRef<HandlerRef<TextInput, FinalInputProps>, FinalInputProps
           {
             detail: {
               selectionStart: evt.nativeEvent.selection.start,
-              selectionEnd: evt.nativeEvent.selection.end,
+              selectionEnd: evt.nativeEvent.selection.end
             },
             layoutRef
           },
@@ -332,12 +360,6 @@ const Input = forwardRef<HandlerRef<TextInput, FinalInputProps>, FinalInputProps
       )
   }
 
-  const onLayout = () => {
-    nodeRef.current?.measure((x: number, y: number, width: number, height: number, offsetLeft: number, offsetTop: number) => {
-      layoutRef.current = { x, y, width, height, offsetLeft, offsetTop }
-    })
-  }
-
   const resetValue = () => {
     setInputValue('')
   }
@@ -348,7 +370,7 @@ const Input = forwardRef<HandlerRef<TextInput, FinalInputProps>, FinalInputProps
 
   if (formValuesMap) {
     if (!props.name) {
-      throwReactWarning('[Mpx runtime warn]: If a form component is used, the name attribute is required.')
+      warn('If a form component is used, the name attribute is required.')
     } else {
       formValuesMap.set(props.name, { getValue, resetValue })
     }
@@ -363,16 +385,23 @@ const Input = forwardRef<HandlerRef<TextInput, FinalInputProps>, FinalInputProps
       : (nodeRef.current as TextInput)?.blur()
   }, [focus])
 
+  const composeStyle = { ...normalStyle, ...layoutStyle }
+
   const innerProps = useInnerProps(props, {
     ref: nodeRef,
-    ...(enableOffset ? { onLayout } : {}),
+    style: {
+      padding: 0,
+      ...composeStyle,
+      ...multiline && autoHeight && {
+        height: Math.max((composeStyle as any)?.minHeight || 35, contentHeight)
+      }
+    },
+    ...layoutProps
   },
-    [
-      'enable-offset'
-    ],
-    {
-      layoutRef
-    })
+  [],
+  {
+    layoutRef
+  })
 
   return (
     <TextInput
@@ -400,14 +429,6 @@ const Input = forwardRef<HandlerRef<TextInput, FinalInputProps>, FinalInputProps
       onSubmitEditing={onSubmitEditing}
       onContentSizeChange={onContentSizeChange}
       onSelectionChange={onSelectionChange}
-      style={{
-        padding: 0,
-        ...style,
-        ...multiline && autoHeight && {
-          height: Math.max((style as any)?.minHeight || 35, contentHeight)
-        }
-      }
-      }
     />
   )
 })

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

@@ -2,101 +2,87 @@
  * ✘ for
  */
 import { JSX, useRef, forwardRef, ReactNode } from 'react'
-import {
-  View,
-  Text,
-  ViewStyle,
-  NativeSyntheticEvent,
-  TextStyle,
-} from 'react-native'
+import { View, ViewStyle, NativeSyntheticEvent } from 'react-native'
+import { noop, warn } from '@mpxjs/utils'
 import useInnerProps, { getCustomEvent } from './getInnerListeners'
 import useNodesRef, { HandlerRef } from './useNodesRef'
-import { every, splitStyle, splitProps, isText, throwReactWarning } from './utils'
+import { splitProps, splitStyle, useLayout, useTransformStyle, wrapChildren } from './utils'
 import { LabelContext, LabelContextValue } from './context'
 
 export interface LabelProps {
   for?: string
   style?: ViewStyle & Record<string, any>
   'enable-offset'?: boolean
+  'enable-var'?: boolean
+  'external-var-context'?: Record<string, any>
+  'parent-font-size'?: number
+  'parent-width'?: number
+  'parent-height'?: number
   children: ReactNode
   bindtap?: (evt: NativeSyntheticEvent<TouchEvent> | unknown) => void
 }
 
 const Label = forwardRef<HandlerRef<View, LabelProps>, LabelProps>(
-  (props, ref): JSX.Element => {
+  (labelProps, ref): JSX.Element => {
+    const { textProps, innerProps: props = {} } = splitProps(labelProps)
+
     const {
       style = {},
-      'enable-offset': enableOffset,
-      children,
+      'enable-var': enableVar,
+      'external-var-context': externalVarContext,
+      'parent-font-size': parentFontSize,
+      'parent-width': parentWidth,
+      'parent-height': parentHeight,
       bindtap
     } = props
 
-    const { textStyle, imageStyle, innerStyle } = splitStyle(style)
-
-    if (imageStyle) {
-      throwReactWarning('[Mpx runtime warn]: Label does not support background image-related styles!')
+    const defaultStyle = {
+      flexDirection: 'row'
     }
 
-    const defaultStyle = {
-      flexDirection: 'row',
+    const styleObj = {
+      ...defaultStyle,
+      ...style
     }
 
-    const contextRef: LabelContextValue = useRef({
-      triggerChange: () => { }
-    })
+    const {
+      hasSelfPercent,
+      normalStyle,
+      hasVarDec,
+      varContextRef,
+      setWidth,
+      setHeight
+    } = useTransformStyle(styleObj, { enableVar, externalVarContext, parentFontSize, parentWidth, parentHeight })
 
-    const layoutRef = useRef({})
+    const nodeRef = useRef(null)
+    useNodesRef(props, ref, nodeRef, { defaultStyle })
 
-    const { nodeRef } = useNodesRef(props, ref, {
-      defaultStyle
-    })
+    const { layoutRef, layoutStyle, layoutProps } = useLayout({ props, hasSelfPercent, setWidth, setHeight, nodeRef })
 
-    const onLayout = () => {
-      nodeRef.current?.measure(
-        (
-          x: number,
-          y: number,
-          width: number,
-          height: number,
-          offsetLeft: number,
-          offsetTop: number
-        ) => {
-          layoutRef.current = { x, y, width, height, offsetLeft, offsetTop }
-        }
-      )
+    const { textStyle, backgroundStyle, innerStyle } = splitStyle(normalStyle)
+
+    if (backgroundStyle) {
+      warn('Label does not support background image-related styles!')
     }
 
+    const contextRef: LabelContextValue = useRef({
+      triggerChange: noop
+    })
+
     const onTap = (evt: NativeSyntheticEvent<TouchEvent>) => {
       bindtap && bindtap(getCustomEvent('tap', evt, { layoutRef }, props))
       contextRef.current.triggerChange?.(evt)
     }
 
-    const wrapChildren = (
-      children: ReactNode,
-      textStyle?: TextStyle
-    ) => {
-      const { textProps } = splitProps(props)
-
-      if (every(children, (child) => isText(child))) {
-        if (textStyle || textProps) {
-          children = <Text key='labelTextWrap' style={textStyle || {}} {...(textProps || {})}>{children}</Text>
-        }
-      } else {
-        if (textStyle) throwReactWarning('[Mpx runtime warn]: Text style will be ignored unless every child of the Label is Text node!')
-      }
-
-      return children
-    }
-
     const innerProps = useInnerProps(
       props,
       {
         ref: nodeRef,
-        style: { ...defaultStyle, ...innerStyle },
-        bindtap: onTap,
-        ...(enableOffset ? { onLayout } : {})
+        style: { ...innerStyle, ...layoutStyle },
+        ...layoutProps,
+        bindtap: onTap
       },
-      ['enable-offset'],
+      [],
       {
         layoutRef
       }
@@ -104,7 +90,17 @@ const Label = forwardRef<HandlerRef<View, LabelProps>, LabelProps>(
 
     return <View {...innerProps}>
       <LabelContext.Provider value={contextRef}>
-        {wrapChildren(children, textStyle)}
+        {
+          wrapChildren(
+            props,
+            {
+              hasVarDec,
+              varContext: varContextRef.current,
+              textStyle,
+              textProps
+            }
+          )
+        }
       </LabelContext.Provider>
     </View>
   }

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

@@ -3,65 +3,80 @@
  */
 
 import { View, LayoutChangeEvent } from 'react-native'
-import { JSX, useState, useEffect, useRef, forwardRef, ReactNode } from 'react'
+import { JSX, useState, useEffect, forwardRef, ReactNode, useRef } from 'react'
 import useNodesRef, { HandlerRef } from './useNodesRef'
 import useInnerProps from './getInnerListeners'
 import { MovableAreaContext } from './context'
+import { useTransformStyle, wrapChildren, useLayout } from './utils'
 
 interface MovableAreaProps {
   style?: Record<string, any>;
   children: ReactNode;
   width?: number;
   height?: number;
+  'enable-offset'?: boolean;
+  'enable-var'?: boolean
+  'external-var-context'?: Record<string, any>;
+  'parent-font-size'?: number;
+  'parent-width'?: number;
+  'parent-height'?: number;
 }
 
 const _MovableArea = forwardRef<HandlerRef<View, MovableAreaProps>, MovableAreaProps>((props: MovableAreaProps, ref): JSX.Element => {
-  const { children, style = {}, width = 10, height = 10 } = props;
-  const [areaWidth, setAreaWidth] = useState(0);
-  const [areaHeight, setAreaHeight] = useState(0);
-
-  const layoutRef = useRef<any>({})
+  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 { nodeRef: movableViewRef } = useNodesRef(props, ref)
+  const {
+    hasSelfPercent,
+    normalStyle,
+    hasVarDec,
+    varContextRef,
+    setWidth,
+    setHeight
+  } = useTransformStyle(style, { enableVar, externalVarContext, parentFontSize, parentWidth, parentHeight })
+
+  const movableViewRef = useRef(null)
+  useNodesRef(props, ref, movableViewRef)
 
   const onLayout = (e: LayoutChangeEvent) => {
     const { width = 10, height = 10 } = e.nativeEvent.layout
     setAreaWidth(width)
     setAreaHeight(height)
-    movableViewRef.current?.measure((x: number, y: number, width: number, height: number, offsetLeft: number, offsetTop: number) => {
-      layoutRef.current = { x, y, width, height, offsetLeft, offsetTop }
-    })
   }
+
+  const { layoutRef, layoutStyle, layoutProps } = useLayout({ props, hasSelfPercent, setWidth, setHeight, nodeRef: movableViewRef, onLayout })
+
   const innerProps = useInnerProps(props, {
+    style: { height: areaHeight, width: areaWidth, overflow: 'hidden', ...normalStyle, ...layoutStyle },
     ref: movableViewRef,
-    onLayout
-  }, [
-    'children',
-    'style',
-  ], { layoutRef })
+    ...layoutProps
+  }, [], { layoutRef })
 
   return (
     <MovableAreaContext.Provider value={{ height: areaHeight, width: areaWidth }}>
       <View
         {...innerProps}
-        style={{
-          height: areaHeight,
-          width: areaWidth,
-          overflow: 'hidden',
-          ...style
-        }}
       >
-        {children}
+      {
+        wrapChildren(
+          props,
+          {
+            hasVarDec,
+            varContext: varContextRef.current
+          }
+        )
+      }
       </View>
     </MovableAreaContext.Provider>
-  );
+  )
 })
 
-_MovableArea.displayName = 'mpx-movable-area';
+_MovableArea.displayName = 'mpx-movable-area'
 
-export default _MovableArea
+export default _MovableArea

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

@@ -17,9 +17,9 @@
  * ✔ htouchmove
  * ✔ vtouchmove
  */
-import { useRef, useEffect, forwardRef, ReactNode, useContext, useState, useMemo } from 'react';
-import { StyleSheet, Animated, NativeSyntheticEvent, PanResponder, View } from 'react-native';
-import useInnerProps, { getCustomEvent } from './getInnerListeners';
+import { useRef, useEffect, forwardRef, ReactNode, useContext, useState, useMemo } from 'react'
+import { StyleSheet, Animated, NativeSyntheticEvent, PanResponder, View } from 'react-native'
+import useInnerProps, { getCustomEvent } from './getInnerListeners'
 import useNodesRef, { HandlerRef } from './useNodesRef'
 import { MovableAreaContext } from './context'
 
@@ -51,7 +51,7 @@ const styles = StyleSheet.create({
     position: 'absolute',
     left: 0,
     top: 0
-  },
+  }
 })
 
 const _MovableView = forwardRef<HandlerRef<View, MovableViewProps>, MovableViewProps>((props: MovableViewProps, ref): JSX.Element => {
@@ -84,15 +84,16 @@ const _MovableView = forwardRef<HandlerRef<View, MovableViewProps>, MovableViewP
     y: Number(y)
   })
 
-  const { nodeRef } = useNodesRef(props, ref, {
+  const nodeRef = useRef<View>(null)
+  useNodesRef(props, ref, nodeRef, {
     defaultStyle: styles.container
   })
 
   let panResponder: any = {}
 
-  let isFirstTouch = useRef<boolean>(true)
-  let touchEvent = useRef<string>('')
-  let initialDistance = useRef<number>(0)
+  const isFirstTouch = useRef<boolean>(true)
+  const touchEvent = useRef<string>('')
+  const initialDistance = useRef<number>(0)
 
   propsRef.current = props
 
@@ -102,7 +103,7 @@ const _MovableView = forwardRef<HandlerRef<View, MovableViewProps>, MovableViewP
       Animated.spring(scaleValue.current, {
         toValue: clampedScale,
         friction,
-        useNativeDriver: false,
+        useNativeDriver: false
       }).start(() => {
         bindscale && bindscale(getCustomEvent('scale', {}, {
           detail: {
@@ -115,7 +116,7 @@ const _MovableView = forwardRef<HandlerRef<View, MovableViewProps>, MovableViewP
         )
       })
     }
-  }, [originScaleValue]);
+  }, [originScaleValue])
 
   useEffect(() => {
     if (movablePosition.current.x !== Number(x) || movablePosition.current.y !== Number(y)) {
@@ -142,7 +143,7 @@ const _MovableView = forwardRef<HandlerRef<View, MovableViewProps>, MovableViewP
               },
               layoutRef
             }, props)
-          );
+          )
       })
     }
   }, [x, y])
@@ -194,34 +195,33 @@ const _MovableView = forwardRef<HandlerRef<View, MovableViewProps>, MovableViewP
           pan.current.setOffset({
             x: direction === 'all' || direction === 'horizontal' ? pan.current.x._value : 0,
             y: direction === 'all' || direction === 'vertical' ? pan.current.y._value : 0
-          });
-          pan.current.setValue({ x: 0, y: 0 });
+          })
+          pan.current.setValue({ x: 0, y: 0 })
         } else {
-          initialDistance.current = 0;
+          initialDistance.current = 0
           setTransformOrigin('50% 50%')
         }
       },
       onPanResponderMove: (e, gestureState) => {
         if (gestureState.numberActiveTouches === 2 && scale) {
           setTransformOrigin('50% 50%')
-          const touch1 = e.nativeEvent.touches[0];
-          const touch2 = e.nativeEvent.touches[1];
+          const touch1 = e.nativeEvent.touches[0]
+          const touch2 = e.nativeEvent.touches[1]
           const currentTouchDistance = Math.sqrt(
             Math.pow(touch1.pageX - touch2.pageX, 2) + Math.pow(touch1.pageY - touch2.pageY, 2)
           )
 
           if (!initialDistance.current) {
-            initialDistance.current = currentTouchDistance;
+            initialDistance.current = currentTouchDistance
           } else {
             const newScale = currentTouchDistance / initialDistance.current
             const clampedScale = Math.min(scaleMax, Math.max(scaleMin, newScale))
 
-
             Animated.spring(scaleValue.current, {
               toValue: clampedScale,
               friction: 7,
               useNativeDriver: false
-            }).start();
+            }).start()
             bindscale && bindscale(getCustomEvent('scale', e, {
               detail: {
                 x: pan.current.x._value,
@@ -229,29 +229,29 @@ const _MovableView = forwardRef<HandlerRef<View, MovableViewProps>, MovableViewP
                 scale: clampedScale
               },
               layoutRef
-            }, propsRef.current));
+            }, propsRef.current))
           }
         } else if (gestureState.numberActiveTouches === 1) {
           if (initialDistance.current) {
-            return; // Skip processing if it's switching from a double touch
+            return // Skip processing if it's switching from a double touch
           }
           setTransformOrigin('0% 0%')
           if (isFirstTouch.current) {
             touchEvent.current = Math.abs(gestureState.dx) > Math.abs(gestureState.dy) ? 'htouchmove' : 'vtouchmove'
-            isFirstTouch.current = false;
+            isFirstTouch.current = false
           }
           Animated.event(
             [
               null,
               {
                 dx: direction === 'all' || direction === 'horizontal' ? pan.current.x : new Animated.Value(0),
-                dy: direction === 'all' || direction === 'vertical' ? pan.current.y : new Animated.Value(0),
+                dy: direction === 'all' || direction === 'vertical' ? pan.current.y : new Animated.Value(0)
               }
             ],
             {
               useNativeDriver: false
             }
-          )(e, gestureState);
+          )(e, gestureState)
 
           movablePosition.current = {
             x: pan.current.x.__getValue(),
@@ -375,7 +375,7 @@ const _MovableView = forwardRef<HandlerRef<View, MovableViewProps>, MovableViewP
     }
   }
 
-  const [translateX, translateY] = [pan.current.x, pan.current.y];
+  const [translateX, translateY] = [pan.current.x, pan.current.y]
 
   const transformStyle = { transform: [{ translateX }, { translateY }, { scale: scaleValue.current }], transformOrigin: transformOrigin }
 
@@ -387,8 +387,8 @@ const _MovableView = forwardRef<HandlerRef<View, MovableViewProps>, MovableViewP
     ref: nodeRef,
     ...panResponder.panHandlers,
     onLayout,
-    ...(hasTouchmove() ? { 'bindtouchmove': onTouchMove } : {}),
-    ...(hasCatchTouchmove() ? { 'catchtouchmove': onCatchTouchMove } : {}),
+    ...(hasTouchmove() ? { bindtouchmove: onTouchMove } : {}),
+    ...(hasCatchTouchmove() ? { catchtouchmove: onCatchTouchMove } : {})
   }, [
     'children',
     'style',
@@ -417,9 +417,9 @@ const _MovableView = forwardRef<HandlerRef<View, MovableViewProps>, MovableViewP
     >
       {children}
     </Animated.View>
-  );
+  )
 })
 
 _MovableView.displayName = 'mpx-movable-view'
 
-export default _MovableView
+export default _MovableView