@mpxjs/webpack-plugin 2.10.3 → 2.10.4-beta.11

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

@@ -87,14 +87,15 @@ const Icon = forwardRef<HandlerRef<Text, IconProps>, IconProps>(
     const { layoutRef, layoutStyle, layoutProps } = useLayout({ props, hasSelfPercent, setWidth, setHeight, nodeRef })
 
     const innerProps = useInnerProps(
-      props,
       extendObject(
+        {},
+        props,
+        layoutProps,
         {
           ref: nodeRef,
           source,
           style: extendObject({}, normalStyle, layoutStyle, { tintColor: color })
-        },
-        layoutProps
+        }
       ),
       [],
       {

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

@@ -379,8 +379,10 @@ const Image = forwardRef<HandlerRef<RNImage, ImageProps>, ImageProps>((props, re
   }, [src, isSvg, isLayoutMode])
 
   const innerProps = useInnerProps(
-    props,
     extendObject(
+      {},
+      props,
+      layoutProps,
       {
         ref: nodeRef,
         style: extendObject(
@@ -390,8 +392,7 @@ const Image = forwardRef<HandlerRef<RNImage, ImageProps>, ImageProps>((props, re
           isHeightFixMode ? { width: fixedWidth } : {},
           isWidthFixMode ? { height: fixedHeight } : {}
         )
-      },
-      layoutProps
+      }
     ),
     [
       'src',

package/lib/runtime/components/react/mpx-inline-text.tsx

@@ -0,0 +1,18 @@
+import { Text, TextProps } from 'react-native'
+import { JSX, createElement } from 'react'
+
+import { extendObject } from './utils'
+
+const InlineText = (props: TextProps): JSX.Element => {
+  const {
+    allowFontScaling = false
+  } = props
+
+  return createElement(Text, extendObject({}, props, {
+    allowFontScaling
+  }))
+}
+
+InlineText.displayName = 'MpxInlineText'
+
+export default InlineText

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

@@ -39,7 +39,6 @@
  */
 import { JSX, forwardRef, useRef, useState, useContext, useEffect, createElement } from 'react'
 import {
-  Platform,
   TextInput,
   TextStyle,
   ViewStyle,
@@ -51,10 +50,11 @@ import {
   TextInputSelectionChangeEventData,
   TextInputFocusEventData,
   TextInputChangeEventData,
-  TextInputSubmitEditingEventData
+  TextInputSubmitEditingEventData,
+  NativeTouchEvent
 } from 'react-native'
 import { warn } from '@mpxjs/utils'
-import { useUpdateEffect, useTransformStyle, useLayout, extendObject } from './utils'
+import { useUpdateEffect, useTransformStyle, useLayout, extendObject, isIOS } from './utils'
 import useInnerProps, { getCustomEvent } from './getInnerListeners'
 import useNodesRef, { HandlerRef } from './useNodesRef'
 import { FormContext, FormFieldValue, KeyboardAvoidContext } from './context'
@@ -121,11 +121,7 @@ const keyboardTypeMap: Record<Type, string> = {
   text: 'default',
   number: 'numeric',
   idcard: 'default',
-  digit:
-    Platform.select({
-      ios: 'decimal-pad',
-      android: 'numeric'
-    }) || ''
+  digit: isIOS ? 'decimal-pad' : 'numeric'
 }
 
 const Input = forwardRef<HandlerRef<TextInput, FinalInputProps>, FinalInputProps>((props: FinalInputProps, ref): JSX.Element => {
@@ -195,7 +191,7 @@ const Input = forwardRef<HandlerRef<TextInput, FinalInputProps>, FinalInputProps
 
   const [inputValue, setInputValue] = useState(defaultValue)
   const [contentHeight, setContentHeight] = useState(0)
-  const [selection, setSelection] = useState({ start: -1, end: -1 })
+  const [selection, setSelection] = useState({ start: -1, end: tmpValue.current.length })
 
   const styleObj = extendObject(
     { padding: 0, backgroundColor: '#fff' },
@@ -221,15 +217,17 @@ const Input = forwardRef<HandlerRef<TextInput, FinalInputProps>, FinalInputProps
 
   useEffect(() => {
     if (inputValue !== value) {
-      setInputValue(parseValue(value))
+      const parsed = parseValue(value)
+      tmpValue.current = parsed
+      setInputValue(parsed)
     }
   }, [value])
 
   useEffect(() => {
-    if (typeof cursor === 'number') {
+    if (selectionStart > -1) {
+      setSelection({ start: selectionStart, end: selectionEnd === -1 ? tmpValue.current.length : selectionEnd })
+    } else if (typeof cursor === 'number') {
       setSelection({ start: cursor, end: cursor })
-    } else if (selectionStart >= 0 && selectionEnd >= 0 && selectionStart !== selectionEnd) {
-      setSelection({ start: selectionStart, end: selectionEnd })
     }
   }, [cursor, selectionStart, selectionEnd])
 
@@ -290,6 +288,10 @@ const Input = forwardRef<HandlerRef<TextInput, FinalInputProps>, FinalInputProps
     setKeyboardAvoidContext()
   }
 
+  const onTouchEnd = (evt: NativeSyntheticEvent<NativeTouchEvent & { origin?: string }>) => {
+    evt.nativeEvent.origin = 'input'
+  }
+
   const onFocus = (evt: NativeSyntheticEvent<TextInputFocusEventData>) => {
     setKeyboardAvoidContext()
     bindfocus && bindfocus(
@@ -388,6 +390,7 @@ const Input = forwardRef<HandlerRef<TextInput, FinalInputProps>, FinalInputProps
   }
 
   const resetValue = () => {
+    tmpValue.current = ''
     setInputValue('')
   }
 
@@ -427,8 +430,10 @@ const Input = forwardRef<HandlerRef<TextInput, FinalInputProps>, FinalInputProps
   }, [focus])
 
   const innerProps = useInnerProps(
-    props,
     extendObject(
+      {},
+      props,
+      layoutProps,
       {
         ref: nodeRef,
         style: extendObject({}, normalStyle, layoutStyle),
@@ -440,25 +445,23 @@ const Input = forwardRef<HandlerRef<TextInput, FinalInputProps>, FinalInputProps
         maxLength: maxlength === -1 ? undefined : maxlength,
         editable: !disabled,
         autoFocus: !!autoFocus || !!focus,
-        selection: selection,
+        selection: selectionStart > -1 || typeof cursor === 'number' ? selection : undefined,
         selectionColor: cursorColor,
         blurOnSubmit: !multiline && !confirmHold,
         underlineColorAndroid: 'rgba(0,0,0,0)',
         textAlignVertical: textAlignVertical,
         placeholderTextColor: placeholderStyle?.color,
-        multiline: !!multiline
-      },
-      !!multiline && confirmType === 'return' ? {} : { enterKeyHint: confirmType },
-      layoutProps,
-      {
+        multiline: !!multiline,
         onTouchStart,
+        onTouchEnd,
         onFocus,
         onBlur,
         onChange,
         onSelectionChange,
         onContentSizeChange,
         onSubmitEditing: bindconfirm && !multiline && onSubmitEditing
-      }
+      },
+      !!multiline && confirmType === 'return' ? {} : { enterKeyHint: confirmType }
     ),
     [
       'type',

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

@@ -1,8 +1,8 @@
-import React, { ReactNode, useContext, useEffect, useMemo } from 'react'
-import { DimensionValue, EmitterSubscription, Keyboard, Platform, View, ViewStyle } from 'react-native'
-import Animated, { useSharedValue, useAnimatedStyle, withTiming, Easing, runOnJS } from 'react-native-reanimated'
-import { GestureDetector, Gesture } from 'react-native-gesture-handler'
+import React, { ReactNode, useContext, useEffect } from 'react'
+import { DimensionValue, EmitterSubscription, Keyboard, View, ViewStyle, NativeSyntheticEvent, NativeTouchEvent } from 'react-native'
+import Animated, { useSharedValue, useAnimatedStyle, withTiming, Easing } from 'react-native-reanimated'
 import { KeyboardAvoidContext } from './context'
+import { isIOS } from './utils'
 
 type KeyboardAvoidViewProps = {
   children?: ReactNode
@@ -11,7 +11,6 @@ type KeyboardAvoidViewProps = {
 }
 
 const KeyboardAvoidingView = ({ children, style, contentContainerStyle }: KeyboardAvoidViewProps) => {
-  const isIOS = Platform.OS === 'ios'
   const duration = isIOS ? 250 : 300
   const easing = isIOS ? Easing.inOut(Easing.ease) : Easing.out(Easing.quad)
 
@@ -19,25 +18,10 @@ const KeyboardAvoidingView = ({ children, style, contentContainerStyle }: Keyboa
   const basic = useSharedValue('auto')
   const keyboardAvoid = useContext(KeyboardAvoidContext)
 
-  const dismiss = () => {
-    Keyboard.isVisible() && Keyboard.dismiss()
-  }
-
-  const gesture = useMemo(() => {
-    return Gesture.Tap()
-      .onEnd(() => {
-        dismiss()
-      }).runOnJS(true)
-  }, [])
-
-  const animatedStyle = useAnimatedStyle(() => {
-    return Object.assign(
-      {
-        transform: [{ translateY: -offset.value }]
-      },
-      isIOS ? {} : { flexBasis: basic.value as DimensionValue }
-    )
-  })
+  const animatedStyle = useAnimatedStyle(() => ({
+    transform: [{ translateY: -offset.value }],
+    flexBasis: basic.value as DimensionValue
+  }))
 
   const resetKeyboard = () => {
     if (keyboardAvoid?.current) {
@@ -47,6 +31,12 @@ const KeyboardAvoidingView = ({ children, style, contentContainerStyle }: Keyboa
     basic.value = 'auto'
   }
 
+  const onTouchEnd = ({ nativeEvent }: NativeSyntheticEvent<NativeTouchEvent & { origin?: string }>) => {
+    if (nativeEvent.origin !== 'input') {
+      Keyboard.isVisible() && Keyboard.dismiss()
+    }
+  }
+
   useEffect(() => {
     let subscriptions: EmitterSubscription[] = []
 
@@ -62,7 +52,12 @@ const KeyboardAvoidingView = ({ children, style, contentContainerStyle }: Keyboa
               const aboveValue = -aboveOffset >= cursorSpacing ? 0 : aboveOffset + cursorSpacing
               const belowValue = Math.min(endCoordinates.height, aboveOffset + cursorSpacing)
               const value = aboveOffset > 0 ? belowValue : aboveValue
-              offset.value = withTiming(value, { duration, easing })
+              offset.value = withTiming(value, { duration, easing }, (finished) => {
+                if (finished) {
+                  // Set flexBasic after animation to trigger re-layout and reset layout information
+                  basic.value = '99.99%'
+                }
+              })
             })
           })
         }),
@@ -82,11 +77,7 @@ const KeyboardAvoidingView = ({ children, style, contentContainerStyle }: Keyboa
             const value = aboveOffset > 0 ? belowValue : aboveValue
             offset.value = withTiming(value, { duration, easing }, (finished) => {
               if (finished) {
-                /**
-                 * In the Android environment, the layout information is not synchronized after the animation,
-                 * which results in the inability to correctly trigger element events.
-                 * Here, we utilize flexBasic to proactively trigger a re-layout
-                 */
+                // Set flexBasic after animation to trigger re-layout and reset layout information
                 basic.value = '99.99%'
               }
             })
@@ -102,18 +93,16 @@ const KeyboardAvoidingView = ({ children, style, contentContainerStyle }: Keyboa
   }, [keyboardAvoid])
 
   return (
-    <GestureDetector gesture={gesture}>
-      <View style={style}>
-        <Animated.View
-          style={[
-            contentContainerStyle,
-            animatedStyle
-          ]}
-        >
-          {children}
-        </Animated.View>
-      </View>
-    </GestureDetector>
+    <View style={style} onTouchEnd={onTouchEnd}>
+      <Animated.View
+        style={[
+          contentContainerStyle,
+          animatedStyle
+        ]}
+      >
+        {children}
+      </Animated.View>
+    </View>
   )
 }
 

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

@@ -75,14 +75,13 @@ const Label = forwardRef<HandlerRef<View, LabelProps>, LabelProps>(
     }, [])
 
     const innerProps = useInnerProps(
-      props,
       extendObject(
-        {
-          ref: nodeRef,
-          style: extendObject({}, innerStyle, layoutStyle)
-        },
+        {},
+        props,
         layoutProps,
         {
+          ref: nodeRef,
+          style: extendObject({}, innerStyle, layoutStyle),
           bindtap: onTap
         }
       ),

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

@@ -10,16 +10,16 @@ import { MovableAreaContext } from './context'
 import { useTransformStyle, wrapChildren, useLayout, extendObject } from './utils'
 
 interface MovableAreaProps {
-  style?: Record<string, any>;
-  children: ReactNode;
-  width?: number;
-  height?: number;
-  'enable-offset'?: boolean;
+  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;
+  '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 => {
@@ -46,10 +46,19 @@ const _MovableArea = forwardRef<HandlerRef<View, MovableAreaProps>, MovableAreaP
 
   const { layoutRef, layoutStyle, layoutProps } = useLayout({ props, hasSelfPercent, setWidth, setHeight, nodeRef: movableViewRef })
 
-  const innerProps = useInnerProps(props, extendObject({
-    style: extendObject({ height: contextValue.height, width: contextValue.width, overflow: 'hidden' }, normalStyle, layoutStyle),
-    ref: movableViewRef
-  }, layoutProps), [], { layoutRef })
+  const innerProps = useInnerProps(
+    extendObject(
+      {},
+      props,
+      layoutProps,
+      {
+        style: extendObject({ height: contextValue.height, width: contextValue.width, overflow: 'hidden' }, normalStyle, layoutStyle),
+        ref: movableViewRef
+      }
+    ),
+    [],
+    { layoutRef }
+  )
 
   return createElement(MovableAreaContext.Provider, { value: contextValue }, createElement(
     View,

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

@@ -36,39 +36,39 @@ import Animated, {
 import { collectDataset, noop } from '@mpxjs/utils'
 
 interface MovableViewProps {
-  children: ReactNode;
-  style?: Record<string, any>;
-  direction: 'all' | 'vertical' | 'horizontal' | 'none';
-  x?: number;
-  y?: number;
-  disabled?: boolean;
-  animation?: boolean;
-  id?: string;
-  bindchange?: (event: unknown) => void;
-  bindtouchstart?: (event: GestureTouchEvent) => void;
-  catchtouchstart?: (event: GestureTouchEvent) => void;
-  bindtouchmove?: (event: GestureTouchEvent) => void;
-  catchtouchmove?: (event: GestureTouchEvent) => void;
-  catchtouchend?: (event: GestureTouchEvent) => void;
-  bindtouchend?: (event: GestureTouchEvent) => void;
-  bindhtouchmove?: (event: GestureTouchEvent) => void;
-  bindvtouchmove?: (event: GestureTouchEvent) => void;
-  catchhtouchmove?: (event: GestureTouchEvent) => void;
-  catchvtouchmove?: (event: GestureTouchEvent) => void;
-  bindlongpress?: (event: GestureTouchEvent) => void;
-  catchlongpress?: (event: GestureTouchEvent) => void;
-  bindtap?: (event: GestureTouchEvent) => void;
-  catchtap?: (event: GestureTouchEvent) => void;
-  onLayout?: (event: LayoutChangeEvent) => void;
-  'out-of-bounds'?: boolean;
-  'wait-for'?: Array<GestureHandler>;
-  'simultaneous-handlers'?: Array<GestureHandler>;
-  inertia?: boolean;
+  children: ReactNode
+  style?: Record<string, any>
+  direction: 'all' | 'vertical' | 'horizontal' | 'none'
+  x?: number
+  y?: number
+  disabled?: boolean
+  animation?: boolean
+  id?: string
+  bindchange?: (event: unknown) => void
+  bindtouchstart?: (event: GestureTouchEvent) => void
+  catchtouchstart?: (event: GestureTouchEvent) => void
+  bindtouchmove?: (event: GestureTouchEvent) => void
+  catchtouchmove?: (event: GestureTouchEvent) => void
+  catchtouchend?: (event: GestureTouchEvent) => void
+  bindtouchend?: (event: GestureTouchEvent) => void
+  bindhtouchmove?: (event: GestureTouchEvent) => void
+  bindvtouchmove?: (event: GestureTouchEvent) => void
+  catchhtouchmove?: (event: GestureTouchEvent) => void
+  catchvtouchmove?: (event: GestureTouchEvent) => void
+  bindlongpress?: (event: GestureTouchEvent) => void
+  catchlongpress?: (event: GestureTouchEvent) => void
+  bindtap?: (event: GestureTouchEvent) => void
+  catchtap?: (event: GestureTouchEvent) => void
+  onLayout?: (event: LayoutChangeEvent) => void
+  'out-of-bounds'?: boolean
+  'wait-for'?: Array<GestureHandler>
+  'simultaneous-handlers'?: Array<GestureHandler>
+  inertia?: boolean
   'enable-var'?: boolean
-  'external-var-context'?: Record<string, any>;
-  'parent-font-size'?: number;
-  'parent-width'?: number;
-  'parent-height'?: number;
+  'external-var-context'?: Record<string, any>
+  'parent-font-size'?: number
+  'parent-width'?: number
+  'parent-height'?: number
 }
 
 const styles = StyleSheet.create({
@@ -235,7 +235,7 @@ const _MovableView = forwardRef<HandlerRef<View, MovableViewProps>, MovableViewP
       offsetX: offsetX.value,
       offsetY: offsetY.value
     }),
-    (currentValue: { offsetX: any; offsetY: any; }) => {
+    (currentValue: { offsetX: any; offsetY: any }) => {
       const { offsetX, offsetY } = currentValue
       runOnJS(handleTriggerChange)({
         x: offsetX,
@@ -342,11 +342,11 @@ const _MovableView = forwardRef<HandlerRef<View, MovableViewProps>, MovableViewP
     props.onLayout && props.onLayout(e)
   }
 
-  const extendEvent = useCallback((e: any, type: 'start'|'move'|'end') => {
+  const extendEvent = useCallback((e: any, type: 'start' | 'move' | 'end') => {
     const { y: navigationY = 0 } = navigation?.layout || {}
     const touchArr = [e.changedTouches, e.allTouches]
     touchArr.forEach(touches => {
-      touches && touches.forEach((item: { absoluteX: number; absoluteY: number; pageX: number; pageY: number ; clientX: number; clientY: number}) => {
+      touches && touches.forEach((item: { absoluteX: number; absoluteY: number; pageX: number; pageY: number; clientX: number; clientY: number }) => {
         item.pageX = item.absoluteX
         item.pageY = item.absoluteY - navigationY
         item.clientX = item.absoluteX
@@ -565,11 +565,18 @@ const _MovableView = forwardRef<HandlerRef<View, MovableViewProps>, MovableViewP
     'catchtouchend'
   ])
 
-  const innerProps = useInnerProps(filterProps, extendObject({
-    ref: nodeRef,
-    onLayout: onLayout,
-    style: [innerStyle, animatedStyles, layoutStyle]
-  }, rewriteCatchEvent()))
+  const innerProps = useInnerProps(
+    extendObject(
+      {},
+      filterProps,
+      {
+        ref: nodeRef,
+        onLayout: onLayout,
+        style: [innerStyle, animatedStyles, layoutStyle]
+      },
+      rewriteCatchEvent()
+    )
+  )
 
   return createElement(GestureDetector, { gesture: gesture }, createElement(
     Animated.View,

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

@@ -7,9 +7,7 @@
  * ✔ url
  * ✔ delta
  */
-import { View } from 'react-native'
-import { useCallback, forwardRef, JSX, createElement } from 'react'
-import useInnerProps from './getInnerListeners'
+import { useCallback, forwardRef, JSX, createElement, MutableRefObject } from 'react'
 import { redirectTo, navigateTo, navigateBack, reLaunch, switchTab } from '@mpxjs/api-proxy'
 
 import MpxView, { _ViewProps } from './mpx-view'
@@ -20,7 +18,7 @@ interface _NavigatorProps extends _ViewProps {
   delta: number
 }
 
-const _Navigator = forwardRef<View, _NavigatorProps>((props, ref): JSX.Element => {
+const _Navigator = forwardRef<any, _NavigatorProps>((props, ref): JSX.Element => {
   const {
     children,
     'open-type': openType,
@@ -48,10 +46,10 @@ const _Navigator = forwardRef<View, _NavigatorProps>((props, ref): JSX.Element =
     }
   }, [openType, url, delta])
 
-  const innerProps = useInnerProps(props, {
+  const innerProps = {
     ref,
     bindtap: handleClick
-  })
+  }
 
   return createElement(MpxView, innerProps, children)
 })