@mpxjs/webpack-plugin 2.10.4-beta.4 → 2.10.4-beta.6

package/lib/platform/template/wx/component-config/index.js

@@ -42,6 +42,8 @@ const wxs = require('./wxs')
 const component = require('./component')
 const fixComponentName = require('./fix-component-name')
 const rootPortal = require('./root-portal')
+const stickyHeader = require('./sticky-header')
+const stickySection = require('./sticky-section')
 
 module.exports = function getComponentConfigs ({ warn, error }) {
   /**
@@ -125,6 +127,8 @@ module.exports = function getComponentConfigs ({ warn, error }) {
     hyphenTagName({ print }),
     label({ print }),
     component(),
-    rootPortal({ print })
+    rootPortal({ print }),
+    stickyHeader({ print }),
+    stickySection({ print })
   ]
 }

package/lib/platform/template/wx/component-config/sticky-header.js

@@ -0,0 +1,23 @@
+const TAG_NAME = 'sticky-header'
+
+module.exports = function ({ print }) {
+  return {
+    test: TAG_NAME,
+    android (tag, { el }) {
+      el.isBuiltIn = true
+      return 'mpx-sticky-header'
+    },
+    ios (tag, { el }) {
+      el.isBuiltIn = true
+      return 'mpx-sticky-header'
+    },
+    harmony (tag, { el }) {
+      el.isBuiltIn = true
+      return 'mpx-sticky-header'
+    },
+    web (tag, { el }) {
+      el.isBuiltIn = true
+      return 'mpx-sticky-header'
+    }
+  }
+}

package/lib/platform/template/wx/component-config/sticky-section.js

@@ -0,0 +1,23 @@
+const TAG_NAME = 'sticky-section'
+
+module.exports = function ({ print }) {
+  return {
+    test: TAG_NAME,
+    android (tag, { el }) {
+      el.isBuiltIn = true
+      return 'mpx-sticky-section'
+    },
+    ios (tag, { el }) {
+      el.isBuiltIn = true
+      return 'mpx-sticky-section'
+    },
+    harmony (tag, { el }) {
+      el.isBuiltIn = true
+      return 'mpx-sticky-section'
+    },
+    web (tag, { el }) {
+      el.isBuiltIn = true
+      return 'mpx-sticky-section'
+    }
+  }
+}

package/lib/runtime/components/react/context.ts

@@ -1,5 +1,6 @@
 import { createContext, Dispatch, MutableRefObject, SetStateAction } from 'react'
-import { NativeSyntheticEvent } from 'react-native'
+import { NativeSyntheticEvent, Animated } from 'react-native'
+import { noop } from '@mpxjs/utils'
 
 export type LabelContextValue = MutableRefObject<{
   triggerChange: (evt: NativeSyntheticEvent<TouchEvent>) => void
@@ -42,7 +43,8 @@ export interface PortalContextValue {
 }
 
 export interface ScrollViewContextValue {
-   gestureRef: React.RefObject<any> | null
+  gestureRef: React.RefObject<any> | null,
+  scrollOffset: Animated.Value
 }
 
 export interface RouteContextValue {
@@ -50,6 +52,11 @@ export interface RouteContextValue {
   navigation: Record<string, any>
 }
 
+export interface StickyContextValue {
+  registerStickyHeader: Function,
+  unregisterStickyHeader: Function
+}
+
 export const MovableAreaContext = createContext({ width: 0, height: 0 })
 
 export const FormContext = createContext<FormContextValue | null>(null)
@@ -72,6 +79,8 @@ export const SwiperContext = createContext({})
 
 export const KeyboardAvoidContext = createContext<KeyboardAvoidContextValue | null>(null)
 
-export const ScrollViewContext = createContext<ScrollViewContextValue>({ gestureRef: null })
+export const ScrollViewContext = createContext<ScrollViewContextValue>({ gestureRef: null, scrollOffset: new Animated.Value(0) })
 
 export const PortalContext = createContext<PortalContextValue>(null as any)
+
+export const StickyContext = createContext<StickyContextValue>({ registerStickyHeader: noop, unregisterStickyHeader: noop })

package/lib/runtime/components/react/dist/context.js

@@ -1,4 +1,6 @@
 import { createContext } from 'react';
+import { Animated } from 'react-native';
+import { noop } from '@mpxjs/utils';
 export const MovableAreaContext = createContext({ width: 0, height: 0 });
 export const FormContext = createContext(null);
 export const CheckboxGroupContext = createContext(null);
@@ -10,5 +12,6 @@ export const IntersectionObserverContext = createContext(null);
 export const RouteContext = createContext(null);
 export const SwiperContext = createContext({});
 export const KeyboardAvoidContext = createContext(null);
-export const ScrollViewContext = createContext({ gestureRef: null });
+export const ScrollViewContext = createContext({ gestureRef: null, scrollOffset: new Animated.Value(0) });
 export const PortalContext = createContext(null);
+export const StickyContext = createContext({ registerStickyHeader: noop, unregisterStickyHeader: noop });

package/lib/runtime/components/react/dist/event.config.js

@@ -1,5 +1,3 @@
-export const TAP_EVENTS = ['bindtap', 'catchtap', 'capture-bindtap', 'capture-catchtap'];
-export const LONGPRESS_EVENTS = ['bindlongpress', 'catchlongpress', 'capture-bindlongpress', 'capture-catchlongpress'];
 const eventConfigMap = {
     bindtap: { bitFlag: '0', events: ['onTouchStart', 'onTouchMove', 'onTouchEnd'] },
     bindlongpress: { bitFlag: '1', events: ['onTouchStart', 'onTouchMove', 'onTouchEnd', 'onTouchCancel'] },

package/lib/runtime/components/react/dist/getInnerListeners.js

@@ -1,21 +1,22 @@
 import { useRef, useMemo } from 'react';
-import { hasOwn, collectDataset } from '@mpxjs/utils';
+import { collectDataset } from '@mpxjs/utils';
 import { omit, extendObject, useNavigation } from './utils';
-import eventConfigMap, { TAP_EVENTS, LONGPRESS_EVENTS } from './event.config';
+import eventConfigMap from './event.config';
 const globalEventState = {
     needPress: true
 };
-const getTouchEvent = (type, event, props, config, navigation) => {
+const getTouchEvent = (type, event, config) => {
+    const { navigation, propsRef, layoutRef } = config;
+    const props = propsRef.current;
     const { y: navigationY = 0 } = navigation?.layout || {};
     const nativeEvent = event.nativeEvent;
     const { timestamp, pageX, pageY, touches, changedTouches } = nativeEvent;
     const { id } = props;
-    const { layoutRef } = config;
     const currentTarget = extendObject({}, event.currentTarget, {
         id: id || '',
         dataset: collectDataset(props),
-        offsetLeft: layoutRef?.current?.offsetLeft || 0,
-        offsetTop: layoutRef?.current?.offsetTop || 0
+        offsetLeft: layoutRef.current?.offsetLeft || 0,
+        offsetTop: layoutRef.current?.offsetTop || 0
     });
     const pendingProps = event._targetInst?.pendingProps || {};
     const target = extendObject({}, event.target, {
@@ -70,150 +71,107 @@ export const getCustomEvent = (type = '', oe = {}, { detail = {}, layoutRef }, p
         preventDefault: oe.preventDefault
     });
 };
-function handleEmitEvent(events, type, oe, propsRef, config, navigation) {
-    events.forEach((event) => {
-        if (propsRef.current[event]) {
-            const match = /^(catch|capture-catch):?(.*?)(?:\.(.*))?$/.exec(event);
-            // 检查是否已经被上层的 catch 阻止
-            if ((type === 'tap' || type === 'longpress') && oe._stoppedEventTypes?.has(type)) {
-                return;
-            }
-            if (match) {
-                const eventBase = match[2] || '';
-                if (eventBase === 'tap' || eventBase === 'longpress') {
-                    // 为 tap、longpress 添加标记，影响后续的冒泡
-                    if (!oe._stoppedEventTypes) {
-                        oe._stoppedEventTypes = new Set();
-                    }
-                    oe._stoppedEventTypes.add(eventBase);
-                }
-                else {
-                    // 原生 touch 事件使用 stopPropagation
-                    oe.stopPropagation();
-                }
-            }
-            propsRef.current[event](getTouchEvent(type, oe, propsRef.current, config, navigation));
+function handleEmitEvent(name, e, type, eventConfig) {
+    const { propsRef } = eventConfig;
+    const eventCfg = eventConfig[name];
+    if (eventCfg) {
+        if (eventCfg.hasCatch && name !== 'tap' && name !== 'longpress') {
+            e.stopPropagation();
         }
-    });
+        eventCfg[type].forEach((event) => {
+            propsRef.current[event]?.(getTouchEvent(name, e, eventConfig));
+        });
+    }
 }
 function checkIsNeedPress(e, type, ref) {
     const tapDetailInfo = ref.current.mpxPressInfo.detail || { x: 0, y: 0 };
-    const nativeEvent = e.nativeEvent;
-    const currentPageX = nativeEvent.changedTouches[0].pageX;
-    const currentPageY = nativeEvent.changedTouches[0].pageY;
+    const currentPageX = e.nativeEvent.changedTouches[0].pageX;
+    const currentPageY = e.nativeEvent.changedTouches[0].pageY;
     if (Math.abs(currentPageX - tapDetailInfo.x) > 3 ||
         Math.abs(currentPageY - tapDetailInfo.y) > 3) {
         globalEventState.needPress = false;
-        ref.current.startTimer[type] &&
-            clearTimeout(ref.current.startTimer[type]);
+        ref.current.startTimer[type] && clearTimeout(ref.current.startTimer[type]);
         ref.current.startTimer[type] = null;
     }
 }
-function handleTouchstart(e, type, ref, propsRef, config, navigation) {
+function handleTouchstart(e, type, eventConfig) {
+    // 阻止事件被释放放回对象池，导致对象复用 _stoppedEventTypes 状态被保留
     e.persist();
-    const bubbleTouchEvent = ['catchtouchstart', 'bindtouchstart'];
-    const bubblePressEvent = ['catchlongpress', 'bindlongpress'];
-    const captureTouchEvent = [
-        'capture-catchtouchstart',
-        'capture-bindtouchstart'
-    ];
-    const capturePressEvent = [
-        'capture-catchlongpress',
-        'capture-bindlongpress'
-    ];
-    ref.current.startTimer[type] = null;
+    const { innerRef } = eventConfig;
     globalEventState.needPress = true;
-    const nativeEvent = e.nativeEvent;
-    ref.current.mpxPressInfo.detail = {
-        x: nativeEvent.changedTouches[0].pageX,
-        y: nativeEvent.changedTouches[0].pageY
+    innerRef.current.mpxPressInfo.detail = {
+        x: e.nativeEvent.changedTouches[0].pageX,
+        y: e.nativeEvent.changedTouches[0].pageY
     };
-    const currentTouchEvent = type === 'bubble' ? bubbleTouchEvent : captureTouchEvent;
-    const currentPressEvent = type === 'bubble' ? bubblePressEvent : capturePressEvent;
-    handleEmitEvent(currentTouchEvent, 'touchstart', e, propsRef, config, navigation);
-    if (LONGPRESS_EVENTS.some(eventName => propsRef.current[eventName])) {
-        ref.current.startTimer[type] = setTimeout(() => {
+    handleEmitEvent('touchstart', e, type, eventConfig);
+    if (eventConfig.longpress) {
+        if (e._stoppedEventTypes?.has('longpress')) {
+            return;
+        }
+        if (eventConfig.longpress.hasCatch) {
+            e._stoppedEventTypes = e._stoppedEventTypes || new Set();
+            e._stoppedEventTypes.add('longpress');
+        }
+        innerRef.current.startTimer[type] && clearTimeout(innerRef.current.startTimer[type]);
+        innerRef.current.startTimer[type] = setTimeout(() => {
             // 只要触发过longpress, 全局就不再触发tap
             globalEventState.needPress = false;
-            handleEmitEvent(currentPressEvent, 'longpress', e, propsRef, config, navigation);
+            handleEmitEvent('longpress', e, type, eventConfig);
         }, 350);
     }
 }
-function handleTouchmove(e, type, ref, propsRef, config, navigation) {
-    const bubbleTouchEvent = ['catchtouchmove', 'bindtouchmove'];
-    const captureTouchEvent = [
-        'capture-catchtouchmove',
-        'capture-bindtouchmove'
-    ];
-    const currentTouchEvent = type === 'bubble' ? bubbleTouchEvent : captureTouchEvent;
-    handleEmitEvent(currentTouchEvent, 'touchmove', e, propsRef, config, navigation);
-    if (TAP_EVENTS.some(eventName => propsRef.current[eventName])) {
-        checkIsNeedPress(e, type, ref);
+function handleTouchmove(e, type, eventConfig) {
+    const { innerRef } = eventConfig;
+    handleEmitEvent('touchmove', e, type, eventConfig);
+    if (eventConfig.tap) {
+        checkIsNeedPress(e, type, innerRef);
     }
 }
-function handleTouchend(e, type, ref, propsRef, config, navigation) {
-    // move event may not be triggered
-    if (TAP_EVENTS.some(eventName => propsRef.current[eventName])) {
-        checkIsNeedPress(e, type, ref);
-    }
-    const bubbleTouchEvent = ['catchtouchend', 'bindtouchend'];
-    const bubbleTapEvent = ['catchtap', 'bindtap'];
-    const captureTouchEvent = [
-        'capture-catchtouchend',
-        'capture-bindtouchend'
-    ];
-    const captureTapEvent = ['capture-catchtap', 'capture-bindtap'];
-    const currentTouchEvent = type === 'bubble' ? bubbleTouchEvent : captureTouchEvent;
-    const currentTapEvent = type === 'bubble' ? bubbleTapEvent : captureTapEvent;
-    ref.current.startTimer[type] &&
-        clearTimeout(ref.current.startTimer[type]);
-    ref.current.startTimer[type] = null;
-    handleEmitEvent(currentTouchEvent, 'touchend', e, propsRef, config, navigation);
-    if (globalEventState.needPress) {
-        if (type === 'bubble' && config.disableTap) {
+function handleTouchend(e, type, eventConfig) {
+    const { innerRef, disableTap } = eventConfig;
+    handleEmitEvent('touchend', e, type, eventConfig);
+    innerRef.current.startTimer[type] && clearTimeout(innerRef.current.startTimer[type]);
+    if (eventConfig.tap) {
+        checkIsNeedPress(e, type, innerRef);
+        if (!globalEventState.needPress || (type === 'bubble' && disableTap) || e._stoppedEventTypes?.has('tap')) {
             return;
         }
-        handleEmitEvent(currentTapEvent, 'tap', e, propsRef, config, navigation);
+        if (eventConfig.tap.hasCatch) {
+            e._stoppedEventTypes = e._stoppedEventTypes || new Set();
+            e._stoppedEventTypes.add('tap');
+        }
+        handleEmitEvent('tap', e, type, eventConfig);
     }
 }
-function handleTouchcancel(e, type, ref, propsRef, config, navigation) {
-    const bubbleTouchEvent = ['catchtouchcancel', 'bindtouchcancel'];
-    const captureTouchEvent = [
-        'capture-catchtouchcancel',
-        'capture-bindtouchcancel'
-    ];
-    const currentTouchEvent = type === 'bubble' ? bubbleTouchEvent : captureTouchEvent;
-    ref.current.startTimer[type] &&
-        clearTimeout(ref.current.startTimer[type]);
-    ref.current.startTimer[type] = null;
-    handleEmitEvent(currentTouchEvent, 'touchcancel', e, propsRef, config, navigation);
+function handleTouchcancel(e, type, eventConfig) {
+    const { innerRef } = eventConfig;
+    handleEmitEvent('touchcancel', e, type, eventConfig);
+    innerRef.current.startTimer[type] && clearTimeout(innerRef.current.startTimer[type]);
 }
-function createTouchEventHandler(eventName, type) {
-    return (e, ref, propsRef, config, navigation) => {
-        const handlerMap = {
+function createTouchEventHandler(eventName, eventConfig) {
+    return (e) => {
+        const bubbleHandlerMap = {
             onTouchStart: handleTouchstart,
             onTouchMove: handleTouchmove,
             onTouchEnd: handleTouchend,
             onTouchCancel: handleTouchcancel
         };
-        const handler = handlerMap[eventName];
-        if (handler) {
-            handler(e, type, ref, propsRef, config, navigation);
+        const captureHandlerMap = {
+            onTouchStartCapture: handleTouchstart,
+            onTouchMoveCapture: handleTouchmove,
+            onTouchEndCapture: handleTouchend,
+            onTouchCancelCapture: handleTouchcancel
+        };
+        if (bubbleHandlerMap[eventName]) {
+            bubbleHandlerMap[eventName](e, 'bubble', eventConfig);
+        }
+        if (captureHandlerMap[eventName]) {
+            captureHandlerMap[eventName](e, 'capture', eventConfig);
         }
     };
 }
-const touchEventList = [
-    { eventName: 'onTouchStart', handler: createTouchEventHandler('onTouchStart', 'bubble') },
-    { eventName: 'onTouchMove', handler: createTouchEventHandler('onTouchMove', 'bubble') },
-    { eventName: 'onTouchEnd', handler: createTouchEventHandler('onTouchEnd', 'bubble') },
-    { eventName: 'onTouchCancel', handler: createTouchEventHandler('onTouchCancel', 'bubble') },
-    { eventName: 'onTouchStartCapture', handler: createTouchEventHandler('onTouchStart', 'capture') },
-    { eventName: 'onTouchMoveCapture', handler: createTouchEventHandler('onTouchMove', 'capture') },
-    { eventName: 'onTouchEndCapture', handler: createTouchEventHandler('onTouchEnd', 'capture') },
-    { eventName: 'onTouchCancelCapture', handler: createTouchEventHandler('onTouchCancel', 'capture') }
-];
-const useInnerProps = (props = {}, additionalProps = {}, userRemoveProps = [], rawConfig) => {
-    const ref = useRef({
+const useInnerProps = (props = {}, userRemoveProps = [], rawConfig) => {
+    const innerRef = useRef({
         startTimer: {
             bubble: null,
             capture: null
@@ -226,52 +184,68 @@ const useInnerProps = (props = {}, additionalProps = {}, userRemoveProps = [], r
         }
     });
     const propsRef = useRef({});
-    const eventConfig = {};
-    const config = rawConfig || {
-        layoutRef: { current: {} },
-        disableTap: false
-    };
+    propsRef.current = props;
     const navigation = useNavigation();
-    const removeProps = [
-        'children',
-        'enable-background',
-        'enable-offset',
-        'enable-var',
-        'external-var-context',
-        'parent-font-size',
-        'parent-width',
-        'parent-height',
-        ...userRemoveProps
-    ];
-    propsRef.current = extendObject({}, props, additionalProps);
+    const eventConfig = extendObject({
+        layoutRef: {
+            current: null
+        },
+        propsRef,
+        innerRef,
+        disableTap: false,
+        navigation
+    }, rawConfig);
     let hashEventKey = '';
     const rawEventKeys = [];
-    for (const key in eventConfigMap) {
-        if (hasOwn(propsRef.current, key)) {
-            eventConfig[key] = eventConfigMap[key].events;
-            hashEventKey = hashEventKey + eventConfigMap[key].bitFlag;
+    const transformedEventSet = new Set();
+    Object.keys(props).forEach((key) => {
+        if (eventConfigMap[key]) {
+            hashEventKey += eventConfigMap[key].bitFlag;
             rawEventKeys.push(key);
+            eventConfigMap[key].events.forEach((event) => {
+                transformedEventSet.add(event);
+            });
+            const match = /^(bind|catch|capture-bind|capture-catch)(.*)$/.exec(key);
+            const prefix = match[1];
+            const eventName = match[2];
+            eventConfig[eventName] = eventConfig[eventName] || {
+                bubble: [],
+                capture: [],
+                hasCatch: false
+            };
+            if (prefix === 'bind' || prefix === 'catch') {
+                eventConfig[eventName].bubble.push(key);
+            }
+            else {
+                eventConfig[eventName].capture.push(key);
+            }
+            if (prefix === 'catch' || prefix === 'capture-catch') {
+                eventConfig[eventName].hasCatch = true;
+            }
         }
-    }
+    });
     const events = useMemo(() => {
-        if (!rawEventKeys.length) {
+        if (!hashEventKey) {
             return {};
         }
-        const transformedEventKeys = rawEventKeys.reduce((acc, key) => {
-            if (propsRef.current[key]) {
-                return acc.concat(eventConfig[key]);
-            }
-            return acc;
-        }, []);
-        const finalEventKeys = [...new Set(transformedEventKeys)];
         const events = {};
-        touchEventList.forEach((item) => {
-            if (finalEventKeys.includes(item.eventName)) {
-                events[item.eventName] = (e) => item.handler(e, ref, propsRef, config, navigation);
-            }
-        });
+        for (const eventName of transformedEventSet) {
+            events[eventName] = createTouchEventHandler(eventName, eventConfig);
+        }
         return events;
     }, [hashEventKey]);
-    return extendObject({}, events, omit(propsRef.current, [...rawEventKeys, ...removeProps]));
+    const removeProps = [
+        'children',
+        'enable-background',
+        'enable-offset',
+        'enable-var',
+        'external-var-context',
+        'parent-font-size',
+        'parent-width',
+        'parent-height',
+        ...userRemoveProps,
+        ...rawEventKeys
+    ];
+    return extendObject({}, events, omit(props, removeProps));
 };
 export default useInnerProps;

package/lib/runtime/components/react/dist/mpx-button.jsx

@@ -236,10 +236,9 @@ const Button = forwardRef((buttonProps, ref) => {
         handleOpenTypeEvent(evt);
         handleFormTypeFn();
     };
-    const innerProps = useInnerProps(props, extendObject({
+    const innerProps = useInnerProps(extendObject({}, props, layoutProps, {
         ref: nodeRef,
-        style: extendObject({}, innerStyle, layoutStyle)
-    }, layoutProps, {
+        style: extendObject({}, innerStyle, layoutStyle),
         bindtap: !disabled && onTap
     }), [
         'disabled',

package/lib/runtime/components/react/dist/mpx-canvas/index.jsx

@@ -56,11 +56,10 @@ const _Canvas = forwardRef((props = {}, ref) => {
     });
     const { register } = useConstructorsRegistry();
     const { layoutRef, layoutStyle, layoutProps } = useLayout({ props, hasSelfPercent, setWidth, setHeight, nodeRef });
-    const innerProps = useInnerProps(props, {
+    const innerProps = useInnerProps(extendObject({}, props, layoutProps, {
         ref: nodeRef,
-        style: extendObject({}, normalStyle, layoutStyle, { opacity: isLoaded ? 1 : 0 }),
-        ...layoutProps
-    }, [], {
+        style: extendObject({}, normalStyle, layoutStyle, { opacity: isLoaded ? 1 : 0 })
+    }), [], {
         layoutRef
     });
     const context2D = new CanvasRenderingContext2D(canvasRef.current);

package/lib/runtime/components/react/dist/mpx-checkbox-group.jsx

@@ -57,10 +57,10 @@ const CheckboxGroup = forwardRef((props, ref) => {
             }
         };
     }, []);
-    const innerProps = useInnerProps(props, extendObject({
+    const innerProps = useInnerProps(extendObject({}, props, layoutProps, {
         ref: nodeRef,
         style: extendObject({}, normalStyle, layoutStyle)
-    }, layoutProps), [
+    }), [
         'name'
     ], {
         layoutRef

package/lib/runtime/components/react/dist/mpx-checkbox.jsx

@@ -82,10 +82,9 @@ const Checkbox = forwardRef((checkboxProps, ref) => {
     if (labelContext) {
         labelContext.current.triggerChange = onChange;
     }
-    const innerProps = useInnerProps(props, extendObject({
+    const innerProps = useInnerProps(extendObject({}, props, layoutProps, {
         ref: nodeRef,
-        style: extendObject({}, innerStyle, layoutStyle)
-    }, layoutProps, {
+        style: extendObject({}, innerStyle, layoutStyle),
         bindtap: !disabled && onTap
     }), [
         'value',

package/lib/runtime/components/react/dist/mpx-form.jsx

@@ -22,10 +22,10 @@ const _Form = forwardRef((fromProps, ref) => {
     const propsRef = useRef({});
     propsRef.current = props;
     const { layoutRef, layoutStyle, layoutProps } = useLayout({ props, hasSelfPercent, setWidth, setHeight, nodeRef: formRef });
-    const innerProps = useInnerProps(props, extendObject({
+    const innerProps = useInnerProps(extendObject({}, props, layoutProps, {
         style: extendObject({}, innerStyle, layoutStyle),
         ref: formRef
-    }, layoutProps), [
+    }), [
         'bindsubmit',
         'bindreset'
     ], { layoutRef });

package/lib/runtime/components/react/dist/mpx-icon/index.jsx

@@ -37,11 +37,11 @@ const Icon = forwardRef((props, ref) => {
     const nodeRef = useRef(null);
     useNodesRef(props, ref, nodeRef, { style: normalStyle });
     const { layoutRef, layoutStyle, layoutProps } = useLayout({ props, hasSelfPercent, setWidth, setHeight, nodeRef });
-    const innerProps = useInnerProps(props, extendObject({
+    const innerProps = useInnerProps(extendObject({}, props, layoutProps, {
         ref: nodeRef,
         source,
         style: extendObject({}, normalStyle, layoutStyle, { tintColor: color })
-    }, layoutProps), [], {
+    }), [], {
         layoutRef
     });
     return createElement(Image, innerProps);

package/lib/runtime/components/react/dist/mpx-image.jsx

@@ -258,10 +258,10 @@ const Image = forwardRef((props, ref) => {
             });
         }
     }, [src, isSvg, isLayoutMode]);
-    const innerProps = useInnerProps(props, extendObject({
+    const innerProps = useInnerProps(extendObject({}, props, layoutProps, {
         ref: nodeRef,
         style: extendObject({}, normalStyle, layoutStyle, isHeightFixMode ? { width: fixedWidth } : {}, isWidthFixMode ? { height: fixedHeight } : {})
-    }, layoutProps), [
+    }), [
         'src',
         'mode',
         'svg'

package/lib/runtime/components/react/dist/mpx-input.jsx

@@ -244,7 +244,7 @@ const Input = forwardRef((props, ref) => {
             ? nodeRef.current?.focus()
             : nodeRef.current?.blur();
     }, [focus]);
-    const innerProps = useInnerProps(props, extendObject({
+    const innerProps = useInnerProps(extendObject({}, props, layoutProps, {
         ref: nodeRef,
         style: extendObject({}, normalStyle, layoutStyle),
         allowFontScaling,
@@ -261,8 +261,7 @@ const Input = forwardRef((props, ref) => {
         underlineColorAndroid: 'rgba(0,0,0,0)',
         textAlignVertical: textAlignVertical,
         placeholderTextColor: placeholderStyle?.color,
-        multiline: !!multiline
-    }, !!multiline && confirmType === 'return' ? {} : { enterKeyHint: confirmType }, layoutProps, {
+        multiline: !!multiline,
         onTouchStart,
         onFocus,
         onBlur,
@@ -270,7 +269,7 @@ const Input = forwardRef((props, ref) => {
         onSelectionChange,
         onContentSizeChange,
         onSubmitEditing: bindconfirm && !multiline && onSubmitEditing
-    }), [
+    }, !!multiline && confirmType === 'return' ? {} : { enterKeyHint: confirmType }), [
         'type',
         'password',
         'placeholder-style',

package/lib/runtime/components/react/dist/mpx-label.jsx

@@ -33,10 +33,9 @@ const Label = forwardRef((labelProps, ref) => {
         bindtap && bindtap(getCustomEvent('tap', evt, { layoutRef }, { props: propsRef.current }));
         contextRef.current.triggerChange(evt);
     }, []);
-    const innerProps = useInnerProps(props, extendObject({
+    const innerProps = useInnerProps(extendObject({}, props, layoutProps, {
         ref: nodeRef,
-        style: extendObject({}, innerStyle, layoutStyle)
-    }, layoutProps, {
+        style: extendObject({}, innerStyle, layoutStyle),
         bindtap: onTap
     }), [], {
         layoutRef

package/lib/runtime/components/react/dist/mpx-movable-area.jsx

@@ -19,10 +19,10 @@ const _MovableArea = forwardRef((props, ref) => {
         width: normalStyle.width || 10
     }), [normalStyle.width, normalStyle.height]);
     const { layoutRef, layoutStyle, layoutProps } = useLayout({ props, hasSelfPercent, setWidth, setHeight, nodeRef: movableViewRef });
-    const innerProps = useInnerProps(props, extendObject({
+    const innerProps = useInnerProps(extendObject({}, props, layoutProps, {
         style: extendObject({ height: contextValue.height, width: contextValue.width, overflow: 'hidden' }, normalStyle, layoutStyle),
         ref: movableViewRef
-    }, layoutProps), [], { layoutRef });
+    }), [], { layoutRef });
     return createElement(MovableAreaContext.Provider, { value: contextValue }, createElement(View, innerProps, wrapChildren(props, {
         hasVarDec,
         varContext: varContextRef.current

package/lib/runtime/components/react/dist/mpx-movable-view.jsx

@@ -452,7 +452,7 @@ const _MovableView = forwardRef((movableViewProps, ref) => {
         'catchhtouchmove',
         'catchtouchend'
     ]);
-    const innerProps = useInnerProps(filterProps, extendObject({
+    const innerProps = useInnerProps(extendObject({}, filterProps, {
         ref: nodeRef,
         onLayout: onLayout,
         style: [innerStyle, animatedStyles, layoutStyle]