@mpxjs/webpack-plugin 2.9.67 → 2.9.69-beta.1

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

@@ -33,13 +33,13 @@
  */
 import { ScrollView } from 'react-native-gesture-handler';
 import { RefreshControl } from 'react-native';
-import { useRef, useState, useEffect, forwardRef, useContext } from 'react';
+import { useRef, useState, useEffect, forwardRef, useContext, createElement, useMemo } from 'react';
 import { useAnimatedRef } from 'react-native-reanimated';
 import { warn } from '@mpxjs/utils';
 import useInnerProps, { getCustomEvent } from './getInnerListeners';
 import useNodesRef from './useNodesRef';
-import { splitProps, splitStyle, useTransformStyle, useLayout, wrapChildren, flatGesture } from './utils';
-import { IntersectionObserverContext } from './context';
+import { splitProps, splitStyle, useTransformStyle, useLayout, wrapChildren, extendObject, flatGesture } from './utils';
+import { IntersectionObserverContext, ScrollViewContext } from './context';
 const _ScrollView = forwardRef((scrollViewProps = {}, ref) => {
     const { textProps, innerProps: props = {} } = splitProps(scrollViewProps);
     const { enhanced = false, bounces = true, style = {}, binddragstart, binddragging, binddragend, bindtouchstart, bindtouchmove, bindtouchend, 'scroll-x': scrollX = false, 'scroll-y': scrollY = false, 'enable-back-to-top': enableBackToTop = false, 'enable-trigger-intersection-observer': enableTriggerIntersectionObserver = false, 'paging-enabled': pagingEnabled = false, 'upper-threshold': upperThreshold = 50, 'lower-threshold': lowerThreshold = 50, 'scroll-with-animation': scrollWithAnimation, 'refresher-enabled': refresherEnabled, 'refresher-default-style': refresherDefaultStyle, 'refresher-background': refresherBackground, 'show-scrollbar': showScrollbar = true, 'scroll-into-view': scrollIntoView = '', 'scroll-top': scrollTop = 0, 'scroll-left': scrollLeft = 0, 'refresher-triggered': refresherTriggered, 'enable-var': enableVar, 'external-var-context': externalVarContext, 'parent-font-size': parentFontSize, 'parent-width': parentWidth, 'parent-height': parentHeight, 'simultaneous-handlers': originSimultaneousHandlers, 'wait-for': waitFor, __selectRef } = props;
@@ -60,11 +60,12 @@ const _ScrollView = forwardRef((scrollViewProps = {}, ref) => {
     const hasCallScrollToLower = useRef(false);
     const initialTimeout = useRef(null);
     const intersectionObservers = useContext(IntersectionObserverContext);
-    const snapScrollIntoView = useRef('');
+    const firstScrollIntoViewChange = useRef(false);
     const { normalStyle, hasVarDec, varContextRef, hasSelfPercent, setWidth, setHeight } = useTransformStyle(style, { enableVar, externalVarContext, parentFontSize, parentWidth, parentHeight });
-    const { textStyle, innerStyle } = splitStyle(normalStyle);
+    const { textStyle, innerStyle = {} } = splitStyle(normalStyle);
     const scrollViewRef = useAnimatedRef();
     useNodesRef(props, ref, scrollViewRef, {
+        style: normalStyle,
         scrollOffset: scrollOptions,
         node: {
             scrollEnabled: scrollX || scrollY,
@@ -77,6 +78,11 @@ const _ScrollView = forwardRef((scrollViewProps = {}, ref) => {
         },
         gestureRef: scrollViewRef
     });
+    const contextValue = useMemo(() => {
+        return {
+            gestureRef: scrollViewRef
+        };
+    }, []);
     const { layoutRef, layoutStyle, layoutProps } = useLayout({ props, hasSelfPercent, setWidth, setHeight, nodeRef: scrollViewRef, onLayout });
     if (scrollX && scrollY) {
         warn('scroll-x and scroll-y cannot be set to true at the same time, Mpx will use the value of scroll-y as the criterion');
@@ -97,19 +103,25 @@ const _ScrollView = forwardRef((scrollViewProps = {}, ref) => {
         }
     }, [refresherTriggered]);
     useEffect(() => {
-        if (scrollIntoView && __selectRef && snapScrollIntoView.current !== scrollIntoView) {
-            snapScrollIntoView.current = scrollIntoView || '';
-            setTimeout(() => {
-                const refs = __selectRef(`#${scrollIntoView}`, 'node');
-                if (refs) {
-                    const { nodeRef } = refs.getNodeInstance();
-                    nodeRef.current?.measureLayout(scrollViewRef.current, (left, top) => {
-                        scrollToOffset(left, top);
-                    });
-                }
-            });
+        if (scrollIntoView && __selectRef) {
+            if (!firstScrollIntoViewChange.current) {
+                setTimeout(handleScrollIntoView);
+            }
+            else {
+                handleScrollIntoView();
+            }
         }
+        firstScrollIntoViewChange.current = true;
     }, [scrollIntoView]);
+    function handleScrollIntoView() {
+        const refs = __selectRef(`#${scrollIntoView}`, 'node');
+        if (!refs)
+            return;
+        const { nodeRef } = refs.getNodeInstance();
+        nodeRef.current?.measureLayout(scrollViewRef.current, (left, top) => {
+            scrollToOffset(left, top);
+        });
+    }
     function selectLength(size) {
         return !scrollX ? size.height : size.width;
     }
@@ -164,14 +176,13 @@ const _ScrollView = forwardRef((scrollViewProps = {}, ref) => {
         const visibleLength = selectLength(e.nativeEvent.layoutMeasurement);
         const contentLength = selectLength(e.nativeEvent.contentSize);
         const offset = selectOffset(e.nativeEvent.contentOffset);
-        scrollOptions.current = {
-            ...scrollOptions.current,
+        extendObject(scrollOptions.current, {
             contentLength,
             offset,
             scrollLeft: position.scrollLeft,
             scrollTop: position.scrollTop,
             visibleLength
-        };
+        });
     }
     function onScroll(e) {
         const { bindscroll } = props;
@@ -272,8 +283,8 @@ const _ScrollView = forwardRef((scrollViewProps = {}, ref) => {
         const { x: scrollLeft, y: scrollTop } = e.nativeEvent.contentOffset;
         updateScrollOptions(e, { scrollLeft, scrollTop });
     }
-    let scrollAdditionalProps = {
-        style: { ...innerStyle, ...layoutStyle },
+    const scrollAdditionalProps = extendObject({
+        style: extendObject({}, innerStyle, layoutStyle),
         pinchGestureEnabled: false,
         horizontal: scrollX && !scrollY,
         scrollEventThrottle: scrollEventThrottle,
@@ -284,22 +295,18 @@ const _ScrollView = forwardRef((scrollViewProps = {}, ref) => {
         ref: scrollViewRef,
         onScroll: onScroll,
         onContentSizeChange: onContentSizeChange,
-        bindtouchstart: ((enhanced && binddragstart) || bindtouchstart) ? onScrollTouchStart : undefined,
-        bindtouchmove: ((enhanced && binddragging) || bindtouchend) ? onScrollTouchMove : undefined,
-        bindtouchend: ((enhanced && binddragend) || bindtouchend) ? onScrollTouchEnd : undefined,
+        bindtouchstart: ((enhanced && binddragstart) || bindtouchstart) && onScrollTouchStart,
+        bindtouchmove: ((enhanced && binddragging) || bindtouchend) && onScrollTouchMove,
+        bindtouchend: ((enhanced && binddragend) || bindtouchend) && onScrollTouchEnd,
         onScrollBeginDrag: onScrollDrag,
         onScrollEndDrag: onScrollDrag,
-        onMomentumScrollEnd: onScrollEnd,
-        ...layoutProps,
-        ...(simultaneousHandlers ? { simultaneousHandlers } : {}),
-        ...(waitForHandlers ? { waitFor: waitForHandlers } : {})
-    };
+        onMomentumScrollEnd: onScrollEnd
+    }, (simultaneousHandlers ? { simultaneousHandlers } : {}), (waitForHandlers ? { waitFor: waitForHandlers } : {}), layoutProps);
     if (enhanced) {
-        scrollAdditionalProps = {
-            ...scrollAdditionalProps,
+        Object.assign(scrollAdditionalProps, {
             bounces,
             pagingEnabled
-        };
+        });
     }
     const innerProps = useInnerProps(props, scrollAdditionalProps, [
         'id',
@@ -332,16 +339,20 @@ const _ScrollView = forwardRef((scrollViewProps = {}, ref) => {
         black: ['#000'],
         white: ['#fff']
     };
-    return (<ScrollView {...innerProps} refreshControl={refresherEnabled
-            ? (<RefreshControl progressBackgroundColor={refresherBackground} refreshing={refreshing} onRefresh={onRefresh} {...(refresherDefaultStyle && refresherDefaultStyle !== 'none' ? { colors: refreshColor[refresherDefaultStyle] } : {})}/>)
-            : undefined}>
-       {wrapChildren(props, {
-            hasVarDec,
-            varContext: varContextRef.current,
-            textStyle,
-            textProps
-        })}
-    </ScrollView>);
+    return createElement(ScrollView, extendObject({}, innerProps, {
+        refreshControl: refresherEnabled
+            ? createElement(RefreshControl, extendObject({
+                progressBackgroundColor: refresherBackground,
+                refreshing: refreshing,
+                onRefresh: onRefresh
+            }, (refresherDefaultStyle && refresherDefaultStyle !== 'none' ? { colors: refreshColor[refresherDefaultStyle] } : null)))
+            : undefined
+    }), createElement(ScrollViewContext.Provider, { value: contextValue }, wrapChildren(props, {
+        hasVarDec,
+        varContext: varContextRef.current,
+        textStyle,
+        textProps
+    })));
 });
 _ScrollView.displayName = 'MpxScrollView';
 export default _ScrollView;

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

@@ -0,0 +1,11 @@
+import { Text } from 'react-native';
+import { createElement } from 'react';
+import { extendObject } from './utils';
+const _Text2 = (props) => {
+    const { allowFontScaling = false } = props;
+    return createElement(Text, extendObject({}, props, {
+        allowFontScaling
+    }));
+};
+_Text2.displayName = 'MpxSimpleText';
+export default _Text2;

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

@@ -1,34 +1,53 @@
-import { View } from 'react-native';
-import { forwardRef, useRef } from 'react';
+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 { SwiperContext } from './context';
 const _SwiperItem = forwardRef((props, ref) => {
-    const { 'enable-offset': enableOffset, 'enable-var': enableVar, 'external-var-context': externalVarContext, style } = props;
+    const { 'enable-var': enableVar, 'external-var-context': externalVarContext, style, customStyle, itemIndex } = props;
+    const contextValue = useContext(SwiperContext);
+    const offset = contextValue.offset || 0;
+    const step = contextValue.step || 0;
+    const scale = contextValue.scale || false;
     const { textProps } = splitProps(props);
     const nodeRef = useRef(null);
-    useNodesRef(props, ref, nodeRef, {});
     const { normalStyle, hasVarDec, varContextRef, hasSelfPercent, setWidth, setHeight } = useTransformStyle(style, { enableVar, externalVarContext });
     const { textStyle, innerStyle } = splitStyle(normalStyle);
+    useNodesRef(props, ref, nodeRef, {
+        style: normalStyle
+    });
     const { 
     // 存储layout布局信息
     layoutRef, layoutProps, layoutStyle } = useLayout({ props, hasSelfPercent, setWidth, setHeight, nodeRef: nodeRef });
     const innerProps = useInnerProps(props, {
-        style: { ...innerStyle, ...layoutStyle },
         ref: nodeRef,
         ...layoutProps
     }, [
         'children',
-        'enable-offset'
+        'enable-offset',
+        'style'
     ], { layoutRef });
-    return (<View data-itemId={props['item-id']} {...innerProps}>
-       {wrapChildren(props, {
+    const itemAnimatedStyle = useAnimatedStyle(() => {
+        if (!step.value)
+            return {};
+        const inputRange = [step.value, 0];
+        const outputRange = [0.7, 1];
+        return {
+            transform: [{
+                    scale: interpolate(Math.abs(Math.abs(offset.value) - itemIndex * step.value), inputRange, outputRange)
+                }]
+        };
+    });
+    const mergeStyle = [innerStyle, layoutStyle, { width: '100%', height: '100%' }, scale ? itemAnimatedStyle : {}].concat(customStyle);
+    return (<Animated.View {...innerProps} style={mergeStyle} data-itemId={props['item-id']}>
+      {wrapChildren(props, {
             hasVarDec,
             varContext: varContextRef.current,
             textStyle,
             textProps
         })}
-    </View>);
+    </Animated.View>);
 });
 _SwiperItem.displayName = 'MpxSwiperItem';
 export default _SwiperItem;