@mpxjs/webpack-plugin 2.10.17 → 2.10.18

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

@@ -8,9 +8,8 @@ import useInnerProps, { getCustomEvent } from './getInnerListeners';
 const _StickyHeader = forwardRef((stickyHeaderProps = {}, ref) => {
     const { textProps, innerProps: props = {} } = splitProps(stickyHeaderProps);
     const { style, bindstickontopchange, padding = [0, 0, 0, 0], 'offset-top': offsetTop = 0, 'enable-var': enableVar, 'external-var-context': externalVarContext, 'parent-font-size': parentFontSize, 'parent-width': parentWidth, 'parent-height': parentHeight } = props;
-    const scrollViewContext = useContext(ScrollViewContext);
+    const { scrollOffset, gestureRef: scrollViewRef } = useContext(ScrollViewContext);
     const stickyContext = useContext(StickyContext);
-    const { scrollOffset } = scrollViewContext;
     const { registerStickyHeader, unregisterStickyHeader } = stickyContext;
     const headerRef = useRef(null);
     const isStickOnTopRef = useRef(false);
@@ -29,7 +28,6 @@ const _StickyHeader = forwardRef((stickyHeaderProps = {}, ref) => {
     }, []);
     function updatePosition() {
         if (headerRef.current) {
-            const scrollViewRef = scrollViewContext.gestureRef;
             if (scrollViewRef && scrollViewRef.current) {
                 headerRef.current.measureLayout(scrollViewRef.current, (left, top) => {
                     Animated.timing(headerTopAnimated, {
@@ -52,7 +50,7 @@ const _StickyHeader = forwardRef((stickyHeaderProps = {}, ref) => {
         style: normalStyle
     });
     useEffect(() => {
-        if (!bindstickontopchange)
+        if (!bindstickontopchange || !scrollOffset)
             return;
         const listener = scrollOffset.addListener((state) => {
             const currentScrollValue = state.value;
@@ -70,24 +68,26 @@ const _StickyHeader = forwardRef((stickyHeaderProps = {}, ref) => {
         return () => {
             scrollOffset.removeListener(listener);
         };
-    }, []);
+    }, [bindstickontopchange, scrollOffset]);
     const animatedStyle = useMemo(() => {
-        const translateY = Animated.subtract(scrollOffset, headerTopAnimated).interpolate({
-            inputRange: [0, 1],
-            outputRange: [0, 1],
-            extrapolateLeft: 'clamp',
-            extrapolateRight: 'extend'
-        });
-        const finalTranslateY = offsetTop === 0
-            ? translateY
-            : Animated.add(translateY, Animated.subtract(scrollOffset, headerTopAnimated).interpolate({
+        if (scrollOffset) {
+            const translateY = Animated.subtract(scrollOffset, headerTopAnimated).interpolate({
                 inputRange: [0, 1],
-                outputRange: [0, offsetTop],
-                extrapolate: 'clamp'
-            }));
-        return {
-            transform: [{ translateY: finalTranslateY }]
-        };
+                outputRange: [0, 1],
+                extrapolateLeft: 'clamp',
+                extrapolateRight: 'extend'
+            });
+            const finalTranslateY = offsetTop === 0
+                ? translateY
+                : Animated.add(translateY, Animated.subtract(scrollOffset, headerTopAnimated).interpolate({
+                    inputRange: [0, 1],
+                    outputRange: [0, offsetTop],
+                    extrapolate: 'clamp'
+                }));
+            return {
+                transform: [{ translateY: finalTranslateY }]
+            };
+        }
     }, [scrollOffset, headerTopAnimated, offsetTop]);
     const innerProps = useInnerProps(extendObject({}, props, {
         ref: headerRef,

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

@@ -13,4 +13,3 @@ interface StickySectionProps {
 }
 declare const _StickySection: import("react").ForwardRefExoticComponent<StickySectionProps & import("react").RefAttributes<HandlerRef<View, StickySectionProps>>>;
 export default _StickySection;
-//# sourceMappingURL=mpx-sticky-section.d.ts.map

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

@@ -16,4 +16,3 @@ interface SwiperItemProps {
 }
 declare const _SwiperItem: import("react").ForwardRefExoticComponent<SwiperItemProps & import("react").RefAttributes<HandlerRef<View, SwiperItemProps>>>;
 export default _SwiperItem;
-//# sourceMappingURL=mpx-swiper-item.d.ts.map

package/lib/runtime/components/react/dist/mpx-swiper.d.ts

@@ -5,6 +5,11 @@ import { GestureHandler } from './utils';
 /**
  * ✔ indicator-dots
  * ✔ indicator-color
+ * ✔ indicator-width
+ * ✔ indicator-height
+ * ✔ indicator-radius
+ * ✔ indicator-spacing
+ * ✔ indicator-margin
  * ✔ indicator-active-color
  * ✔ autoplay
  * ✔ current
@@ -29,6 +34,11 @@ interface SwiperProps {
     scale?: boolean;
     'indicator-dots'?: boolean;
     'indicator-color'?: string;
+    'indicator-width'?: number;
+    'indicator-height'?: number;
+    'indicator-spacing'?: number;
+    'indicator-radius'?: number;
+    'indicator-margin'?: number;
     'indicator-active-color'?: string;
     vertical?: boolean;
     style: {
@@ -50,4 +60,3 @@ interface SwiperProps {
 }
 declare const SwiperWrapper: React.ForwardRefExoticComponent<SwiperProps & React.RefAttributes<HandlerRef<View, SwiperProps>>>;
 export default SwiperWrapper;
-//# sourceMappingURL=mpx-swiper.d.ts.map

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

@@ -13,23 +13,23 @@ import Portal from './mpx-portal';
 const styles = {
     pagination_x: {
         position: 'absolute',
-        bottom: 25,
+        bottom: 0,
         left: 0,
         right: 0,
         flexDirection: 'row',
         flex: 1,
         justifyContent: 'center',
-        alignItems: 'center'
+        alignItems: 'flex-end'
     },
     pagination_y: {
         position: 'absolute',
-        right: 15,
+        right: 0,
         top: 0,
         bottom: 0,
         flexDirection: 'column',
         flex: 1,
         justifyContent: 'center',
-        alignItems: 'center'
+        alignItems: 'flex-end'
     },
     pagerWrapperx: {
         position: 'absolute',
@@ -49,16 +49,6 @@ const styles = {
         justifyContent: 'flex-start'
     }
 };
-const dotCommonStyle = {
-    width: 8,
-    height: 8,
-    borderRadius: 4,
-    marginLeft: 3,
-    marginRight: 3,
-    marginTop: 3,
-    marginBottom: 3,
-    zIndex: 98
-};
 const activeDotStyle = {
     zIndex: 99
 };
@@ -71,7 +61,17 @@ const easeMap = {
     easeInOutCubic: Easing.inOut(Easing.cubic)
 };
 const SwiperWrapper = forwardRef((props, ref) => {
-    const { 'indicator-dots': showPagination, 'indicator-color': dotColor = 'rgba(0, 0, 0, .3)', 'indicator-active-color': activeDotColor = '#000000', 'enable-var': enableVar = false, 'parent-font-size': parentFontSize, 'parent-width': parentWidth, 'parent-height': parentHeight, 'external-var-context': externalVarContext, 'simultaneous-handlers': originSimultaneousHandlers = [], 'wait-for': waitFor = [], style = {}, autoplay = false, circular = false, disableGesture = false, current: propCurrent = 0, bindchange } = props;
+    const { 'indicator-dots': showPagination, 'indicator-color': dotColor = 'rgba(0, 0, 0, .3)', 'indicator-width': dotWidth = 8, 'indicator-height': dotHeight = 8, 'indicator-radius': dotRadius = 4, 'indicator-spacing': dotSpacing = 4, 'indicator-margin': paginationMargin = 10, 'indicator-active-color': activeDotColor = '#000000', 'enable-var': enableVar = false, 'parent-font-size': parentFontSize, 'parent-width': parentWidth, 'parent-height': parentHeight, 'external-var-context': externalVarContext, 'simultaneous-handlers': originSimultaneousHandlers = [], 'wait-for': waitFor = [], style = {}, autoplay = false, circular = false, disableGesture = false, current: propCurrent = 0, bindchange } = props;
+    const dotCommonStyle = {
+        width: dotWidth,
+        height: dotHeight,
+        borderRadius: dotRadius,
+        marginLeft: dotSpacing,
+        marginRight: dotSpacing,
+        marginTop: dotSpacing,
+        marginBottom: dotSpacing,
+        zIndex: 98
+    };
     const easeingFunc = props['easing-function'] || 'default';
     const easeDuration = props.duration || 500;
     const horizontal = props.vertical !== undefined ? !props.vertical : true;
@@ -101,7 +101,8 @@ const SwiperWrapper = forwardRef((props, ref) => {
     const patchElmNum = circular ? (preMargin ? 2 : 1) : 0;
     const patchElmNumShared = useSharedValue(patchElmNum);
     const circularShared = useSharedValue(circular);
-    const children = Array.isArray(props.children) ? props.children.filter(child => child) : (props.children ? [props.children] : []);
+    // 支持swiper-item 同时存在<swiper-item wx:for/>和<swiper-item>并列的情况
+    const children = React.Children.toArray(props.children);
     // 对有变化的变量，在worklet中只能使用sharedValue变量，useRef不能更新
     const childrenLength = useSharedValue(children.length);
     const initWidth = typeof normalStyle?.width === 'number' ? normalStyle.width - preMargin - nextMargin : normalStyle.width;
@@ -124,8 +125,12 @@ const SwiperWrapper = forwardRef((props, ref) => {
     const preAbsolutePos = useSharedValue(0);
     // 记录从onBegin 到 onTouchesUp 时移动的距离
     const moveTranstion = useSharedValue(0);
+    // 记录用户手滑动的方向
+    const moveDir = useSharedValue(0);
     const timerId = useRef(0);
     const intervalTimer = props.interval || 500;
+    // 记录是否首次，首次不能触发bindchange回调
+    const isFirstRef = useRef(true);
     const simultaneousHandlers = flatGesture(originSimultaneousHandlers);
     const waitForHandlers = flatGesture(waitFor);
     // 判断gesture手势是否需要协同处理、等待手势失败响应
@@ -152,6 +157,7 @@ const SwiperWrapper = forwardRef((props, ref) => {
         'style',
         'indicator-dots',
         'indicator-color',
+        'indicator-width',
         'indicator-active-color',
         'previous-margin',
         'vertical',
@@ -193,7 +199,17 @@ const SwiperWrapper = forwardRef((props, ref) => {
         for (let i = 0; i < children.length; i++) {
             dots.push(<View style={[dotCommonStyle, { backgroundColor: unActionColor }]} key={i}></View>);
         }
-        return (<View pointerEvents="none" style={styles['pagination_' + dir]}>
+        let paginationStyle = styles['pagination_' + dir];
+        if (paginationMargin) {
+            paginationStyle = {
+                ...paginationStyle,
+                marginBottom: paginationMargin,
+                marginLeft: paginationMargin,
+                marginRight: paginationMargin,
+                marginTop: paginationMargin
+            };
+        }
+        return (<View pointerEvents="none" style={paginationStyle} key="pagination">
         <View style={[styles['pagerWrapper' + dir]]}>
           <Animated.View style={[
                 dotCommonStyle,
@@ -325,11 +341,9 @@ const SwiperWrapper = forwardRef((props, ref) => {
             resumeLoop
         };
     }, []);
-    function handleSwiperChange(current, pCurrent) {
-        if (pCurrent !== currentIndex.value) {
-            const eventData = getCustomEvent('change', {}, { detail: { current, source: 'touch' }, layoutRef: layoutRef });
-            bindchange && bindchange(eventData);
-        }
+    function handleSwiperChange(current) {
+        const eventData = getCustomEvent('change', {}, { detail: { current, source: 'touch' }, layoutRef: layoutRef });
+        bindchange && bindchange(eventData);
     }
     const runOnJSCallbackRef = useRef({
         loop,
@@ -379,9 +393,10 @@ const SwiperWrapper = forwardRef((props, ref) => {
     // 1. 用户在当前页切换选中项，动画；用户携带选中index打开到swiper页直接选中不走动画
     useAnimatedReaction(() => currentIndex.value, (newIndex, preIndex) => {
         // 这里必须传递函数名, 直接写()=> {}形式会报 访问了未sharedValue信息
-        if (newIndex !== preIndex && bindchange) {
+        if (newIndex !== preIndex && bindchange && !isFirstRef.current) {
             runOnJS(runOnJSCallback)('handleSwiperChange', newIndex, propCurrent);
         }
+        isFirstRef.current = false;
     });
     useEffect(() => {
         let patchStep = 0;
@@ -434,6 +449,7 @@ const SwiperWrapper = forwardRef((props, ref) => {
         }
     }, [circular, preMargin]);
     const { gestureHandler } = useMemo(() => {
+        // 基于transdir + 当前offset计算索引
         function getTargetPosition(eventData) {
             'worklet';
             // 移动的距离
@@ -546,10 +562,8 @@ const SwiperWrapper = forwardRef((props, ref) => {
                 }
             });
         }
-        // 当前的offset和index多对应的offset进行对比，判断是否超过一半
-        function computeHalf(eventData) {
+        function computeHalf() {
             'worklet';
-            const { transdir } = eventData;
             const currentOffset = Math.abs(offset.value);
             let preOffset = (currentIndex.value + patchElmNumShared.value) * step.value;
             if (circularShared.value) {
@@ -558,35 +572,14 @@ const SwiperWrapper = forwardRef((props, ref) => {
             // 正常事件中拿到的translation值(正向滑动<0，倒着滑>0)
             const diffOffset = preOffset - currentOffset;
             const half = Math.abs(diffOffset) > step.value / 2;
-            const isTriggerUpdateHalf = (transdir < 0 && currentOffset < preOffset) || (transdir > 0 && currentOffset > preOffset);
-            return {
-                diffOffset,
-                half,
-                isTriggerUpdateHalf
-            };
-        }
-        function handleLongPress(eventData) {
-            'worklet';
-            const { diffOffset, half, isTriggerUpdateHalf } = computeHalf(eventData);
-            if (+diffOffset === 0) {
-                runOnJS(runOnJSCallback)('resumeLoop');
-            }
-            else if (isTriggerUpdateHalf) {
-                // 如果触发了onUpdate时的索引变更
-                handleEnd(eventData);
-            }
-            else if (half) {
-                handleEnd(eventData);
-            }
-            else {
-                handleBack(eventData);
-            }
+            return half;
         }
         function reachBoundary(eventData) {
             'worklet';
             // 1. 基于当前的offset和translation判断是否超过当前边界值
             const { translation } = eventData;
-            const boundaryStart = -patchElmNumShared.value * step.value;
+            // 与终点的逻辑对齐，都是超过补位元素对应的起点offset
+            const boundaryStart = 0;
             const boundaryEnd = -(childrenLength.value + patchElmNumShared.value) * step.value;
             const moveToOffset = offset.value + translation;
             let isBoundary = false;
@@ -603,7 +596,7 @@ const SwiperWrapper = forwardRef((props, ref) => {
                 // 超过边界的距离
                 const exceedLength = Math.abs(boundaryStart) - Math.abs(moveToOffset);
                 // 计算对标正常元素所在的offset
-                resetOffset = (patchElmNumShared.value + childrenLength.value - 1) * step.value + (step.value - exceedLength);
+                resetOffset = (patchElmNumShared.value + childrenLength.value - 1) * step.value - exceedLength;
             }
             return {
                 isBoundary,
@@ -642,6 +635,14 @@ const SwiperWrapper = forwardRef((props, ref) => {
             }
             return finalOffset;
         }
+        // 设置手势移动的方向
+        function setMoveDir(curAbsoPos) {
+            'worklet';
+            const distance = curAbsoPos - preAbsolutePos.value;
+            if (distance) {
+                moveDir.value = curAbsoPos - preAbsolutePos.value;
+            }
+        }
         const gesturePan = Gesture.Pan()
             .onBegin((e) => {
             'worklet';
@@ -663,9 +664,9 @@ const SwiperWrapper = forwardRef((props, ref) => {
                 transdir: moveDistance
             };
             // 1. 支持滑动中超出一半更新索引的能力：只更新索引并不会影响onFinalize依据当前offset计算的索引
-            const { half } = computeHalf(eventData);
-            if (childrenLength.value > 1 && half) {
-                const { selectedIndex } = getTargetPosition(eventData);
+            const offsetHalf = computeHalf();
+            if (childrenLength.value > 1 && offsetHalf) {
+                const { selectedIndex } = getTargetPosition({ transdir: moveDistance });
                 currentIndex.value = selectedIndex;
             }
             // 2. 非循环: 处理用户一直拖拽到临界点的场景,如果放到onFinalize无法阻止offset.value更新为越界的值
@@ -677,6 +678,7 @@ const SwiperWrapper = forwardRef((props, ref) => {
                     const finalOffset = handleResistanceMove(eventData);
                     offset.value = finalOffset;
                 }
+                setMoveDir(e[strAbso]);
                 preAbsolutePos.value = e[strAbso];
                 return;
             }
@@ -684,6 +686,7 @@ const SwiperWrapper = forwardRef((props, ref) => {
             if (circularShared.value && childrenLength.value === 1) {
                 const finalOffset = handleResistanceMove(eventData);
                 offset.value = finalOffset;
+                setMoveDir(e[strAbso]);
                 preAbsolutePos.value = e[strAbso];
                 return;
             }
@@ -695,6 +698,7 @@ const SwiperWrapper = forwardRef((props, ref) => {
             else {
                 offset.value = moveDistance + offset.value;
             }
+            setMoveDir(e[strAbso]);
             preAbsolutePos.value = e[strAbso];
         })
             .onFinalize((e) => {
@@ -703,10 +707,21 @@ const SwiperWrapper = forwardRef((props, ref) => {
                 return;
             touchfinish.value = true;
             // 触发过onUpdate正常情况下e[strAbso] - preAbsolutePos.value=0; 未触发过onUpdate的情况下e[strAbso] - preAbsolutePos.value 不为0
+            // 正常状态下基于onUpdate时的moveDir判断方向、未触发onUpdate的则基于onBegin的moveTranstion判断方向
             const moveDistance = e[strAbso] - preAbsolutePos.value;
+            // 默认兜底方向: 以onBegin为起点，因一些原因未触发onUpdate但是触发了位移
+            const defaultDir = e[strAbso] - moveTranstion.value;
+            // 实时方向：方向基于onUpdate时的方向，滑动的速度超过阈值时基于实时的滑动方向计算
+            const realtimeData = {
+                transdir: moveDir.value || defaultDir
+            };
+            // 起始方向：基于用户起始手势
+            const originData = {
+                transdir: defaultDir
+            };
             const eventData = {
                 translation: moveDistance,
-                transdir: moveDistance !== 0 ? moveDistance : e[strAbso] - moveTranstion.value
+                transdir: realtimeData.transdir
             };
             // 1. 只有一个元素：循环 和 非循环状态，都走回弹效果
             if (childrenLength.value === 1) {
@@ -720,21 +735,39 @@ const SwiperWrapper = forwardRef((props, ref) => {
             // 非循环支持最后元素可滑动能力后，向左快速移动未超过最大可移动范围一半，因为offset为正值，向左滑动handleBack，默认向上取整
             // 但是在offset大于0时，取0。[-100, 0](back取0), [0, 100](back取1)， 所以handleLongPress里的处理逻辑需要兼容支持，因此这里直接单独处理，不耦合下方公共的判断逻辑。
             if (!circularShared.value && !canMove(eventData)) {
-                if (eventData.transdir < 0) {
-                    handleBack(eventData);
+                if (realtimeData.transdir < 0) {
+                    handleBack(realtimeData);
                 }
                 else {
-                    handleEnd(eventData);
+                    handleEnd(realtimeData);
                 }
                 return;
             }
             // 3. 非循环状态可移动态、循环状态, 正常逻辑处理
             const velocity = e[strVelocity];
-            if (Math.abs(velocity) < longPressRatio) {
-                handleLongPress(eventData);
+            // 用于判断是否超过一半，基于索引判断是否超过一半不可行(1.滑动过程中索引会变更导致计算反向, 2.边界场景会更新offset也会导致基于索引+offset判断实效)
+            const tmp = offset.value % step.value > step.value / 2;
+            // 小于0手向左滑动
+            const offsetHalf = originData.transdir < 0 ? tmp : !tmp;
+            if (offsetHalf) {
+                if (Math.abs(velocity) > longPressRatio) {
+                    // 超过速度阈值，按照实时方向(快速来回滑动)
+                    handleEnd(realtimeData);
+                }
+                else {
+                    // 超过速度阈值，按照起始方向（慢速长按）
+                    handleEnd(originData);
+                }
             }
             else {
-                handleEnd(eventData);
+                if (Math.abs(velocity) > longPressRatio) {
+                    // 超过速度阈值，按照实时方向(快速来回滑动)
+                    handleEnd(realtimeData);
+                }
+                else {
+                    // 超过速度阈值，按照起始方向（慢速长按）
+                    handleBack(originData);
+                }
             }
         })
             .withRef(swiperGestureRef);
@@ -770,6 +803,7 @@ const SwiperWrapper = forwardRef((props, ref) => {
         style: [normalStyle, layoutStyle, styles.swiper]
     }, layoutProps, innerProps);
     const animateComponent = createElement(Animated.View, {
+        key: 'swiperContainer',
         style: [{ flexDirection: dir === 'x' ? 'row' : 'column', width: '100%', height: '100%' }, animatedStyles]
     }, wrapChildren({
         children: arrPages

package/lib/runtime/components/react/dist/mpx-switch.d.ts

@@ -24,4 +24,3 @@ interface _SwitchProps extends SwitchProps {
 }
 declare const _Switch: import("react").ForwardRefExoticComponent<_SwitchProps & import("react").RefAttributes<HandlerRef<Switch, _SwitchProps>>>;
 export default _Switch;
-//# sourceMappingURL=mpx-switch.d.ts.map

package/lib/runtime/components/react/dist/mpx-text.d.ts

@@ -20,4 +20,3 @@ interface _TextProps extends TextProps {
 }
 declare const _Text: import("react").ForwardRefExoticComponent<_TextProps & import("react").RefAttributes<HandlerRef<Text, _TextProps>>>;
 export default _Text;
-//# sourceMappingURL=mpx-text.d.ts.map

package/lib/runtime/components/react/dist/mpx-textarea.d.ts

@@ -5,4 +5,3 @@ import { HandlerRef } from './useNodesRef';
 export type TextareProps = Omit<InputProps & PrivateInputProps, 'type' | 'password' | 'multiline' | 'confirm-hold'>;
 declare const Textarea: import("react").ForwardRefExoticComponent<TextareProps & import("react").RefAttributes<HandlerRef<TextInput, TextareProps>>>;
 export default Textarea;
-//# sourceMappingURL=mpx-textarea.d.ts.map

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

@@ -4,6 +4,7 @@
  *     type, password, confirm-hold
  *   Addition:
  *     ✔ confirm-type
+ *     ✘ confirm-hold
  *     ✔ auto-height
  *     ✘ fixed
  *     ✘ show-confirm-bar

package/lib/runtime/components/react/dist/mpx-video.d.ts

@@ -99,4 +99,3 @@ interface VideoProps {
 }
 declare const MpxVideo: import("react").ForwardRefExoticComponent<VideoProps & import("react").RefAttributes<HandlerRef<View, VideoProps>>>;
 export default MpxVideo;
-//# sourceMappingURL=mpx-video.d.ts.map

package/lib/runtime/components/react/dist/mpx-view.d.ts

@@ -6,7 +6,8 @@
  */
 import { View, NativeSyntheticEvent, ViewProps } from 'react-native';
 import { ReactNode } from 'react';
-import type { AnimationProp } from './useAnimationHooks';
+import { AnimationType } from './animationHooks/index';
+import type { AnimationProp } from './animationHooks/utils';
 import { ExtendedViewStyle } from './types/common';
 import { HandlerRef } from './useNodesRef';
 export interface _ViewProps extends ViewProps {
@@ -23,7 +24,7 @@ export interface _ViewProps extends ViewProps {
     'parent-font-size'?: number;
     'parent-width'?: number;
     'parent-height'?: number;
-    'enable-animation'?: boolean;
+    'enable-animation'?: boolean | AnimationType;
     bindtouchstart?: (event: NativeSyntheticEvent<TouchEvent> | unknown) => void;
     bindtouchmove?: (event: NativeSyntheticEvent<TouchEvent> | unknown) => void;
     bindtouchend?: (event: NativeSyntheticEvent<TouchEvent> | unknown) => void;
@@ -32,4 +33,3 @@ export interface _ViewProps extends ViewProps {
 }
 declare const _View: import("react").ForwardRefExoticComponent<_ViewProps & import("react").RefAttributes<HandlerRef<View, _ViewProps>>>;
 export default _View;
-//# sourceMappingURL=mpx-view.d.ts.map

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

@@ -8,7 +8,7 @@ import { View, StyleSheet, Image } from 'react-native';
 import { useRef, useState, useEffect, forwardRef, createElement } from 'react';
 import useInnerProps from './getInnerListeners';
 import Animated from 'react-native-reanimated';
-import useAnimationHooks from './useAnimationHooks';
+import useAnimationHooks from './animationHooks/index';
 import useNodesRef from './useNodesRef';
 import { parseUrl, PERCENT_REGEX, splitStyle, splitProps, useTransformStyle, wrapChildren, useLayout, renderImage, pickStyle, extendObject, useHover } from './utils';
 import { error, isFunction } from '@mpxjs/utils';
@@ -203,7 +203,7 @@ function backgroundSize(imageProps, preImageInfo, imageSize, layoutInfo) {
         else { // 数值类型      ImageStyle
             // 数值类型设置为 stretch
             imageProps.resizeMode = 'stretch';
-            if (type === 'linear' && (!layoutWidth || !layoutHeight)) {
+            if (type === 'linear' && (!layoutWidth || !layoutHeight) && (isPercent(width) || isPercent(height))) {
                 // ios 上 linear 组件只要重新触发渲染，在渲染过程中外层容器 width 或者 height 被设置为 0，通过设置 % 的方式会渲染不出来，即使后面再更新为正常宽高也渲染不出来
                 // 所以 hack 手动先将 linear 宽高也设置为 0，后面再更新为正确的数值或 %。
                 dimensions = {
@@ -274,6 +274,18 @@ function normalizeBackgroundPosition(parts) {
     let hOffset = 0;
     let vStart = 'top';
     let vOffset = 0;
+    if (!Array.isArray(parts)) {
+        // 模板 style 属性传入单个数值时不会和 class 一样转成数组，需要手动转换
+        parts = [parts];
+    }
+    // 模板 style 属性传入时， 需要额外转换处理单位 px/rpx/vh 以及 center 转化为 50%
+    parts = parts.map((part) => {
+        if (typeof part !== 'string')
+            return part;
+        if (part === 'center')
+            return '50%';
+        return global.__formatValue(part);
+    });
     if (parts.length === 4)
         return parts;
     // 归一化
@@ -415,14 +427,16 @@ function normalizeBackgroundSize(backgroundSize, type) {
     const sizeList = backgroundSize.slice();
     if (sizeList.length === 1)
         sizeList.push('auto');
-    if (type === 'linear') {
+    return sizeList.map((val) => {
+        if (typeof val !== 'string')
+            return val;
         // 处理当使用渐变的时候，background-size出现cover, contain, auto，当作100%处理
-        for (const i in sizeList) {
-            const val = sizeList[i];
-            sizeList[i] = /^cover|contain|auto$/.test(val) ? '100%' : val;
+        if (type === 'linear' && /^cover|contain|auto$/.test(val)) {
+            val = '100%';
         }
-    }
-    return sizeList;
+        // 模板 style 属性传入时， 需要额外转换处理单位 px/rpx/vh
+        return global.__formatValue(val);
+    });
 }
 function preParseImage(imageStyle) {
     const { backgroundImage = '', backgroundSize = ['auto'], backgroundPosition = [0, 0] } = normalizeStyle(imageStyle) || {};

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

@@ -20,4 +20,3 @@ interface WebViewProps {
 }
 declare const _WebView: import("react").ForwardRefExoticComponent<Omit<WebViewProps, "ref"> & import("react").RefAttributes<HandlerRef<WebView<{}>, WebViewProps>>>;
 export default _WebView;
-//# sourceMappingURL=mpx-web-view.d.ts.map

package/lib/runtime/components/react/dist/parser.d.ts

@@ -37,4 +37,3 @@ export declare class ReplaceSource {
     source(): string;
 }
 export {};
-//# sourceMappingURL=parser.d.ts.map

package/lib/runtime/components/react/dist/useNodesRef.d.ts

@@ -9,4 +9,3 @@ export type HandlerRef<T, P> = {
 };
 export default function useNodesRef<T, P>(props: P, ref: ForwardedRef<HandlerRef<T, P>>, nodeRef: RefObject<T>, instance?: Obj): void;
 export {};
-//# sourceMappingURL=useNodesRef.d.ts.map

package/lib/runtime/components/react/dist/utils.d.ts

@@ -1,6 +1,6 @@
 import { ReactNode, ReactElement, Dispatch, SetStateAction, MutableRefObject } from 'react';
 import { LayoutChangeEvent, TextStyle, ImageProps } from 'react-native';
-import { FastImageProps } from '@d11/react-native-fast-image';
+import type { FastImageProps } from '@d11/react-native-fast-image';
 import type { AnyFunc } from './types/common';
 export declare const TEXT_STYLE_REGEX: RegExp;
 export declare const PERCENT_REGEX: RegExp;
@@ -15,6 +15,12 @@ export declare const HIDDEN_STYLE: {
 export declare const isIOS: boolean;
 export declare const isAndroid: boolean;
 export declare const isHarmony: boolean;
+export declare const extendObject: {
+    <T extends {}, U>(target: T, source: U): T & U;
+    <T_1 extends {}, U_1, V>(target: T_1, source1: U_1, source2: V): T_1 & U_1 & V;
+    <T_2 extends {}, U_2, V_1, W>(target: T_2, source1: U_2, source2: V_1, source3: W): T_2 & U_2 & V_1 & W;
+    (target: object, ...sources: any[]): any;
+};
 export declare function useNavigation(): Record<string, any> | undefined;
 export declare function omit<T, K extends string>(obj: T, fields: K[]): Omit<T, K>;
 /**
@@ -32,14 +38,16 @@ export declare function splitStyle<T extends Record<string, any>>(styleObj: T):
     backgroundStyle?: Partial<T>;
     innerStyle?: Partial<T>;
 };
+export declare function parseValues(str: string, char?: string): string[];
 interface TransformStyleConfig {
     enableVar?: boolean;
     externalVarContext?: Record<string, any>;
     parentFontSize?: number;
     parentWidth?: number;
     parentHeight?: number;
+    transformRadiusPercent?: boolean;
 }
-export declare function useTransformStyle(styleObj: Record<string, any> | undefined, { enableVar, externalVarContext, parentFontSize, parentWidth, parentHeight }: TransformStyleConfig): {
+export declare function useTransformStyle(styleObj: Record<string, any> | undefined, { enableVar, transformRadiusPercent, externalVarContext, parentFontSize, parentWidth, parentHeight }: TransformStyleConfig): {
     hasVarDec: boolean;
     varContextRef: MutableRefObject<{}>;
     setWidth: Dispatch<SetStateAction<number>>;
@@ -97,12 +105,6 @@ export interface GestureHandler {
     current?: unknown;
 }
 export declare function flatGesture(gestures?: Array<GestureHandler>): any[];
-export declare const extendObject: {
-    <T extends {}, U>(target: T, source: U): T & U;
-    <T_1 extends {}, U_1, V>(target: T_1, source1: U_1, source2: V): T_1 & U_1 & V;
-    <T_2 extends {}, U_2, V_1, W>(target: T_2, source1: U_2, source2: V_1, source3: W): T_2 & U_2 & V_1 & W;
-    (target: object, ...sources: any[]): any;
-};
 export declare function getCurrentPage(pageId: number | null | undefined): any;
 export declare function renderImage(imageProps: ImageProps | FastImageProps, enableFastImage?: boolean): ReactElement<ImageProps | FastImageProps, string | import("react").JSXElementConstructor<any>>;
 export declare function pickStyle(styleObj: Record<string, any> | undefined, pickedKeys: Array<string>, callback?: (key: string, val: number | string) => number | string): Record<string, any>;
@@ -120,4 +122,3 @@ export declare function useHover({ enableHover, hoverStartTime, hoverStayTime, d
 };
 export declare function useRunOnJSCallback(callbackMapRef: MutableRefObject<Record<string, AnyFunc>>): (key: string, ...args: any) => any;
 export {};
-//# sourceMappingURL=utils.d.ts.map