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

package/lib/runtime/components/react/dist/mpx-sticky-section.jsx

@@ -0,0 +1,45 @@
+import { useRef, forwardRef, createElement, useCallback, useMemo } from 'react';
+import { View } from 'react-native';
+import useNodesRef from './useNodesRef';
+import { splitProps, splitStyle, useTransformStyle, wrapChildren, useLayout, extendObject } from './utils';
+import { StickyContext } from './context';
+import useInnerProps from './getInnerListeners';
+const _StickySection = forwardRef((stickySectionProps = {}, ref) => {
+    const { textProps, innerProps: props = {} } = splitProps(stickySectionProps);
+    const { style, 'enable-var': enableVar, 'external-var-context': externalVarContext, 'parent-font-size': parentFontSize, 'parent-width': parentWidth, 'parent-height': parentHeight } = props;
+    const sectionRef = useRef(null);
+    const { normalStyle, hasVarDec, varContextRef, hasSelfPercent, setWidth, setHeight } = useTransformStyle(style, { enableVar, externalVarContext, parentFontSize, parentWidth, parentHeight });
+    const { layoutRef, layoutProps, layoutStyle } = useLayout({ props, hasSelfPercent, setWidth, setHeight, nodeRef: sectionRef, onLayout });
+    const { textStyle, innerStyle = {} } = splitStyle(normalStyle);
+    const stickyHeaders = useRef(new Map());
+    const registerStickyHeader = useCallback((item) => {
+        stickyHeaders.current.set(item.id, item);
+    }, []);
+    const unregisterStickyHeader = useCallback((id) => {
+        stickyHeaders.current.delete(id);
+    }, []);
+    const contextValue = useMemo(() => ({
+        registerStickyHeader,
+        unregisterStickyHeader
+    }), []);
+    useNodesRef(props, ref, sectionRef, {
+        style: normalStyle
+    });
+    function onLayout() {
+        stickyHeaders.current.forEach(item => {
+            item.updatePosition();
+        });
+    }
+    const innerProps = useInnerProps(extendObject({}, props, {
+        style: extendObject(innerStyle, layoutStyle),
+        ref: sectionRef
+    }, layoutProps), [], { layoutRef });
+    return (createElement(View, innerProps, createElement(StickyContext.Provider, { value: contextValue }, wrapChildren(props, {
+        hasVarDec,
+        varContext: varContextRef.current,
+        textStyle,
+        textProps
+    }))));
+});
+_StickySection.displayName = 'MpxStickySection';
+export default _StickySection;

package/lib/runtime/components/react/dist/mpx-swiper-item.jsx

@@ -2,7 +2,7 @@ import Animated, { useAnimatedStyle, interpolate } from 'react-native-reanimated
 import { forwardRef, useRef, useContext } from 'react';
 import useInnerProps from './getInnerListeners';
 import useNodesRef from './useNodesRef'; // 引入辅助函数
-import { useTransformStyle, splitStyle, splitProps, wrapChildren, useLayout } from './utils';
+import { useTransformStyle, splitStyle, splitProps, wrapChildren, useLayout, extendObject } from './utils';
 import { SwiperContext } from './context';
 const _SwiperItem = forwardRef((props, ref) => {
     const { 'enable-var': enableVar, 'external-var-context': externalVarContext, style, customStyle, itemIndex } = props;
@@ -21,10 +21,9 @@ const _SwiperItem = forwardRef((props, ref) => {
     const { 
     // 存储layout布局信息
     layoutRef, layoutProps, layoutStyle } = useLayout({ props, hasSelfPercent, setWidth, setHeight, nodeRef: nodeRef });
-    const innerProps = useInnerProps(props, {
-        ref: nodeRef,
-        ...layoutProps
-    }, [
+    const innerProps = useInnerProps(extendObject({}, props, layoutProps, {
+        ref: nodeRef
+    }), [
         'children',
         'enable-offset',
         'style'

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

@@ -4,7 +4,7 @@ import Animated, { useAnimatedStyle, useSharedValue, withTiming, Easing, runOnJS
 import React, { forwardRef, useRef, useEffect, useMemo } from 'react';
 import useInnerProps, { getCustomEvent } from './getInnerListeners';
 import useNodesRef from './useNodesRef'; // 引入辅助函数
-import { useTransformStyle, splitStyle, splitProps, useLayout, wrapChildren } from './utils';
+import { useTransformStyle, splitStyle, splitProps, useLayout, wrapChildren, extendObject } from './utils';
 import { SwiperContext } from './context';
 /**
  * 默认的Style类型
@@ -124,9 +124,9 @@ const SwiperWrapper = forwardRef((props, ref) => {
     const { 
     // 存储layout布局信息
     layoutRef, layoutProps, layoutStyle } = useLayout({ props, hasSelfPercent, setWidth, setHeight, nodeRef, onLayout: onWrapperLayout });
-    const innerProps = useInnerProps(props, {
+    const innerProps = useInnerProps(extendObject({}, props, {
         ref: nodeRef
-    }, [
+    }), [
         'style',
         'indicator-dots',
         'indicator-color',
@@ -187,8 +187,8 @@ const SwiperWrapper = forwardRef((props, ref) => {
                 dotAnimatedStyle
             ]}/>
           {dots}
-      </View>
-    </View>);
+        </View>
+      </View>);
     }
     function renderItems() {
         const intLen = children.length;
@@ -641,12 +641,12 @@ const SwiperWrapper = forwardRef((props, ref) => {
     function renderSwiper() {
         const arrPages = renderItems();
         return (<View style={[normalStyle, layoutStyle, styles.swiper]} {...layoutProps} {...innerProps}>
-        <Animated.View style={[{
+      <Animated.View style={[{
                     flexDirection: dir === 'x' ? 'row' : 'column',
                     width: '100%',
                     height: '100%'
                 }, animatedStyles]}>
-          {wrapChildren({
+        {wrapChildren({
                 children: arrPages
             }, {
                 hasVarDec,
@@ -654,8 +654,8 @@ const SwiperWrapper = forwardRef((props, ref) => {
                 textStyle,
                 textProps
             })}
-        </Animated.View>
-        {showsPagination && renderPagination()}
+      </Animated.View>
+      {showsPagination && renderPagination()}
     </View>);
     }
     if (children.length === 1) {

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

@@ -67,17 +67,15 @@ const _Switch = forwardRef((props, ref) => {
             }
         };
     }, []);
-    const innerProps = useInnerProps(props, extendObject({
+    const innerProps = useInnerProps(extendObject({}, props, layoutProps, {
         ref: nodeRef,
         style: extendObject({}, normalStyle, layoutStyle)
-    }, layoutProps, !disabled ? { [type === 'switch' ? 'onValueChange' : '_onChange']: onChange } : {}), [
+    }, !disabled ? { [type === 'switch' ? 'onValueChange' : '_onChange']: onChange } : {}), [
         'checked',
         'disabled',
         'type',
         'color'
-    ], {
-        layoutRef
-    });
+    ], { layoutRef });
     if (type === 'checkbox') {
         return createElement(CheckBox, extendObject({}, innerProps, {
             color: color,

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

@@ -7,10 +7,9 @@ import { Text } from 'react-native';
 import { useRef, forwardRef, createElement } from 'react';
 import useInnerProps from './getInnerListeners';
 import useNodesRef from './useNodesRef'; // 引入辅助函数
-import { useTransformStyle, wrapChildren } from './utils';
+import { useTransformStyle, wrapChildren, extendObject } from './utils';
 const _Text = forwardRef((props, ref) => {
     const { style = {}, allowFontScaling = false, selectable, 'enable-var': enableVar, 'external-var-context': externalVarContext, 'user-select': userSelect, 'parent-font-size': parentFontSize, 'parent-width': parentWidth, 'parent-height': parentHeight } = props;
-    const layoutRef = useRef({});
     const { normalStyle, hasVarDec, varContextRef } = useTransformStyle(style, {
         enableVar,
         externalVarContext,
@@ -22,16 +21,14 @@ const _Text = forwardRef((props, ref) => {
     useNodesRef(props, ref, nodeRef, {
         style: normalStyle
     });
-    const innerProps = useInnerProps(props, {
+    const innerProps = useInnerProps(extendObject({}, props, {
         ref: nodeRef,
         style: normalStyle,
         selectable: !!selectable || !!userSelect,
         allowFontScaling
-    }, [
+    }), [
         'user-select'
-    ], {
-        layoutRef
-    });
+    ]);
     return createElement(Text, innerProps, wrapChildren(props, {
         hasVarDec,
         varContext: varContextRef.current

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

@@ -64,7 +64,7 @@
  */
 import { useRef, forwardRef, createElement } from 'react';
 import Video, { DRMType } from 'react-native-video';
-import { StyleSheet, View, Platform } from 'react-native';
+import { StyleSheet, View } from 'react-native';
 import { splitProps, useTransformStyle, useLayout, extendObject } from './utils';
 import useInnerProps, { getCustomEvent } from './getInnerListeners';
 import useNodesRef from './useNodesRef';
@@ -132,7 +132,7 @@ const MpxVideo = forwardRef((videoProps, ref) => {
         // 手动拖拽进度条场景，android 可以触发，ios 不可以
         bindseekcomplete(getCustomEvent('seekcomplete', {}, {
             detail: {
-                position: Platform.OS === 'android' ? seekTime * 1000 : seekTime
+                position: __mpx_mode__ !== 'ios' ? seekTime * 1000 : seekTime
             },
             layoutRef
         }, propsRef.current));
@@ -202,11 +202,11 @@ const MpxVideo = forwardRef((videoProps, ref) => {
     if (isDrm) {
         source.drm = {
             type: DRMType.FAIRPLAY,
-            certificateUrl: Platform.OS === 'android' ? provisionUrl : certificateUrl,
+            certificateUrl: __mpx_mode__ !== 'ios' ? provisionUrl : certificateUrl,
             licenseServer: licenseUrl
         };
     }
-    const innerProps = useInnerProps(props, extendObject({
+    const innerProps = useInnerProps(extendObject({}, props, layoutProps, {
         style: styles.video,
         ref: videoRef,
         source,
@@ -228,7 +228,7 @@ const MpxVideo = forwardRef((videoProps, ref) => {
         onFullscreenPlayerWillDismiss: bindfullscreenchange && handleExitFullScreen,
         onControlsVisibilityChange: bindcontrolstoggle && handleAndroidControlsVisibilityChange,
         onLoad: handleVideoLoad
-    }, layoutProps), [
+    }), [
         'src',
         'autoplay',
         'loop',

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

@@ -11,7 +11,7 @@ import Animated from 'react-native-reanimated';
 import useAnimationHooks from './useAnimationHooks';
 import useNodesRef from './useNodesRef';
 import { parseUrl, PERCENT_REGEX, splitStyle, splitProps, useTransformStyle, wrapChildren, useLayout, renderImage, pickStyle, extendObject, useHover } from './utils';
-import { error } from '@mpxjs/utils';
+import { error, isFunction } from '@mpxjs/utils';
 import LinearGradient from 'react-native-linear-gradient';
 import { GestureDetector } from 'react-native-gesture-handler';
 import Portal from './mpx-portal';
@@ -543,7 +543,7 @@ function wrapWithChildren(props, { hasVarDec, enableBackground, textStyle, backg
 }
 const _View = forwardRef((viewProps, ref) => {
     const { textProps, innerProps: props = {} } = splitProps(viewProps);
-    let { style = {}, 'hover-style': hoverStyle, 'hover-start-time': hoverStartTime = 50, 'hover-stay-time': hoverStayTime = 400, 'enable-var': enableVar, 'external-var-context': externalVarContext, 'enable-background': enableBackground, 'enable-fast-image': enableFastImage, 'enable-animation': enableAnimation, 'parent-font-size': parentFontSize, 'parent-width': parentWidth, 'parent-height': parentHeight, animation } = props;
+    let { style = {}, 'hover-style': hoverStyle, 'hover-start-time': hoverStartTime = 50, 'hover-stay-time': hoverStayTime = 400, 'enable-var': enableVar, 'external-var-context': externalVarContext, 'enable-background': enableBackground, 'enable-fast-image': enableFastImage, 'enable-animation': enableAnimation, 'parent-font-size': parentFontSize, 'parent-width': parentWidth, 'parent-height': parentHeight, animation, catchtransitionend, bindtransitionend } = props;
     // 默认样式
     const defaultStyle = style.display === 'flex'
         ? {
@@ -575,15 +575,29 @@ const _View = forwardRef((viewProps, ref) => {
     });
     const { layoutRef, layoutStyle, layoutProps } = useLayout({ props, hasSelfPercent, setWidth, setHeight, nodeRef });
     const viewStyle = extendObject({}, innerStyle, layoutStyle);
-    const { enableStyleAnimation, animationStyle } = useAnimationHooks({
-        enableAnimation,
-        animation,
-        style: viewStyle
-    });
-    const innerProps = useInnerProps(props, extendObject({
+    const transitionend = isFunction(catchtransitionend)
+        ? catchtransitionend
+        : isFunction(bindtransitionend)
+            ? bindtransitionend
+            : null;
+    const { enableStyleAnimation, animationStyle } = useAnimationHooks(transitionend
+        ? {
+            layoutRef,
+            animation,
+            enableAnimation,
+            style: viewStyle,
+            transitionend
+        }
+        : {
+            layoutRef,
+            animation,
+            enableAnimation,
+            style: viewStyle
+        });
+    const innerProps = useInnerProps(extendObject({}, props, layoutProps, {
         ref: nodeRef,
         style: enableStyleAnimation ? [viewStyle, animationStyle] : viewStyle
-    }, layoutProps), [
+    }), [
         'hover-start-time',
         'hover-stay-time',
         'hover-style',

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

@@ -1,4 +1,4 @@
-import { forwardRef, useRef, useContext, useMemo, useState, useEffect } from 'react';
+import { forwardRef, useRef, useContext, useMemo, useState } from 'react';
 import { warn, isFunction } from '@mpxjs/utils';
 import Portal from './mpx-portal/index';
 import { getCustomEvent } from './getInnerListeners';
@@ -74,14 +74,17 @@ const _WebView = forwardRef((props, ref) => {
         isNavigateBack.current = false;
     };
     const navigation = useNavigation();
-    useEffect(() => {
-        const beforeRemoveSubscription = navigation?.addListener?.('beforeRemove', beforeRemoveHandle);
-        return () => {
-            if (isFunction(beforeRemoveSubscription)) {
-                beforeRemoveSubscription();
-            }
-        };
-    }, []);
+    // useEffect(() => {
+    //   let beforeRemoveSubscription:any
+    //   if (__mpx_mode__ !== 'ios') {
+    //     beforeRemoveSubscription = navigation?.addListener?.('beforeRemove', beforeRemoveHandle)
+    //   }
+    //   return () => {
+    //     if (isFunction(beforeRemoveSubscription)) {
+    //       beforeRemoveSubscription()
+    //     }
+    //   }
+    // }, [])
     useNodesRef(props, ref, webViewRef, {
         style: defaultWebViewStyle
     });
@@ -89,7 +92,7 @@ const _WebView = forwardRef((props, ref) => {
         return null;
     }
     const _reload = function () {
-        if (__mpx_mode__ === 'android') {
+        if (__mpx_mode__ !== 'ios') {
             fristLoaded.current = false; // 安卓需要重新设置
         }
         setPageLoadErr(false);
@@ -133,7 +136,7 @@ const _WebView = forwardRef((props, ref) => {
         }
     };
     const _onLoadProgress = function (event) {
-        if (__mpx_mode__ === 'android') {
+        if (__mpx_mode__ !== 'ios') {
             canGoBack.current = event.nativeEvent.canGoBack;
         }
     };
@@ -157,7 +160,7 @@ const _WebView = forwardRef((props, ref) => {
                 { // case下不允许直接声明，包个块解决该问题
                     const title = postData._documentTitle?.trim();
                     if (title !== undefined) {
-                        navigation && navigation.setOptions({ title });
+                        navigation && navigation.setPageConfig({ navigationBarTitleText: title });
                     }
                 }
                 break;
@@ -251,7 +254,7 @@ const _WebView = forwardRef((props, ref) => {
         }
     };
     const onLoadEnd = function (res) {
-        if (__mpx_mode__ === 'android') {
+        if (__mpx_mode__ !== 'ios') {
             res.persist();
             setTimeout(() => {
                 onLoadEndHandle(res);

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

@@ -1,6 +1,6 @@
 import { useEffect, useMemo, useRef } from 'react';
-import { Easing, useSharedValue, withTiming, useAnimatedStyle, withSequence, withDelay, makeMutable, cancelAnimation } from 'react-native-reanimated';
-import { error, hasOwn } from '@mpxjs/utils';
+import { Easing, useSharedValue, withTiming, useAnimatedStyle, withSequence, withDelay, makeMutable, cancelAnimation, runOnJS } from 'react-native-reanimated';
+import { error, hasOwn, collectDataset } from '@mpxjs/utils';
 // 微信 timingFunction 和 RN Easing 对应关系
 const EasingKey = {
     linear: Easing.linear,
@@ -140,7 +140,7 @@ function getTransformObj(transforms) {
     }, {});
 }
 export default function useAnimationHooks(props) {
-    const { style = {}, animation, enableAnimation } = props;
+    const { style = {}, animation, enableAnimation, transitionend, layoutRef } = props;
     const enableStyleAnimation = enableAnimation || !!animation;
     const enableAnimationRef = useRef(enableStyleAnimation);
     if (enableAnimationRef.current !== enableStyleAnimation) {
@@ -249,10 +249,32 @@ export default function useAnimationHooks(props) {
             });
         });
     }
+    function withTimingCallback(finished, current, duration) {
+        if (!transitionend)
+            return;
+        const target = {
+            id: animation?.id || -1,
+            dataset: collectDataset(props),
+            offsetLeft: layoutRef?.current?.offsetLeft || 0,
+            offsetTop: layoutRef?.current?.offsetTop || 0
+        };
+        transitionend({
+            type: 'transitionend',
+            detail: { elapsedTime: duration, finished, current },
+            target,
+            currentTarget: target,
+            timeStamp: Date.now()
+        });
+    }
     // 创建单个animation
     function getAnimation({ key, value }, { delay, duration, easing }, callback) {
         const animation = typeof callback === 'function'
-            ? withTiming(value, { duration, easing }, callback)
+            ? withTiming(value, { duration, easing }, (finished, current) => {
+                callback(finished, current);
+                if (transitionend && finished) {
+                    runOnJS(withTimingCallback)(finished, current, duration);
+                }
+            })
             : withTiming(value, { duration, easing });
         return delay ? withDelay(delay, animation) : animation;
     }

package/lib/runtime/components/react/dist/utils.jsx

@@ -19,6 +19,7 @@ export const HIDDEN_STYLE = {
 };
 export const isIOS = __mpx_mode__ === 'ios';
 export const isAndroid = __mpx_mode__ === 'android';
+export const isHarmony = __mpx_mode__ === 'harmony';
 const varDecRegExp = /^--/;
 const varUseRegExp = /var\(/;
 const unoVarDecRegExp = /^--un-/;
@@ -80,7 +81,7 @@ export function isText(ele) {
     if (isValidElement(ele)) {
         const displayName = ele.type?.displayName;
         const isCustomText = ele.type?.isCustomText;
-        return displayName === 'MpxText' || displayName === 'MpxSimpleText' || displayName === 'Text' || !!isCustomText;
+        return displayName === 'MpxText' || displayName === 'MpxSimpleText' || displayName === 'MpxInlineText' || displayName === 'Text' || !!isCustomText;
     }
     return false;
 }
@@ -450,7 +451,18 @@ export const useLayout = ({ props, hasSelfPercent, setWidth, setHeight, onLayout
             if (enableOffset) {
                 nodeRef.current?.measure((x, y, width, height, offsetLeft, offsetTop) => {
                     const { y: navigationY = 0 } = navigation?.layout || {};
-                    layoutRef.current = { x, y: y - navigationY, width, height, offsetLeft, offsetTop: offsetTop - navigationY };
+                    layoutRef.current = {
+                        x,
+                        y: y - navigationY,
+                        width,
+                        height,
+                        offsetLeft,
+                        offsetTop: offsetTop - navigationY,
+                        _x: x,
+                        _y: y,
+                        _offsetLeft: offsetLeft,
+                        _offsetTop: offsetTop
+                    };
                 });
             }
             onLayout && onLayout(e);

package/lib/runtime/components/react/event.config.ts

@@ -1,9 +1,3 @@
-interface EventConfig {
-  [key: string]: string[];
-}
-
-export const TAP_EVENTS = ['bindtap', 'catchtap', 'capture-bindtap', 'capture-catchtap']
-
 const eventConfigMap: { [key: string]: { bitFlag: string; events: string[] } } = {
   bindtap: { bitFlag: '0', events: ['onTouchStart', 'onTouchMove', 'onTouchEnd'] },
   bindlongpress: { bitFlag: '1', events: ['onTouchStart', 'onTouchMove', 'onTouchEnd', 'onTouchCancel'] },
@@ -30,4 +24,5 @@ const eventConfigMap: { [key: string]: { bitFlag: string; events: string[] } } =
   'capture-catchtouchend': { bitFlag: 'm', events: ['onTouchEndCapture'] },
   'capture-catchtouchcancel': { bitFlag: 'n', events: ['onTouchCancelCapture'] }
 }
+
 export default eventConfigMap