@mpxjs/webpack-plugin 2.9.70-alpha.0 → 2.9.70-alpha.2

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

@@ -2,10 +2,10 @@
  * ✔ nodes
  */
 import { View } from 'react-native';
-import { useRef, forwardRef, useState } from 'react';
+import { useRef, forwardRef, useState, createElement } from 'react';
 import useInnerProps from '../getInnerListeners';
 import useNodesRef from '../useNodesRef'; // 引入辅助函数
-import { useTransformStyle, useLayout } from '../utils';
+import { useTransformStyle, useLayout, extendObject } from '../utils';
 import { WebView } from 'react-native-webview';
 import { generateHTML } from './html';
 function jsonToHtmlStr(elements) {
@@ -44,20 +44,19 @@ const _RichText = forwardRef((props, ref) => {
     useNodesRef(props, ref, nodeRef, {
         layoutRef
     });
-    const innerProps = useInnerProps(props, {
+    const innerProps = useInnerProps(props, extendObject({
         ref: nodeRef,
-        style: { ...normalStyle, ...layoutStyle },
-        ...layoutProps
-    }, [], {
+        style: extendObject(normalStyle, layoutStyle)
+    }, layoutProps), [], {
         layoutRef
     });
     const html = typeof nodes === 'string' ? nodes : jsonToHtmlStr(nodes);
-    return (<View {...innerProps}>
-      <WebView source={{ html: generateHTML(html) }} onMessage={(event) => {
+    return createElement(View, innerProps, createElement(WebView, {
+        source: { html: generateHTML(html) },
+        onMessage: (event) => {
             setWebViewHeight(+event.nativeEvent.data);
-        }}>
-      </WebView>
-    </View>);
+        }
+    }));
 });
 _RichText.displayName = 'mpx-rich-text';
 export default _RichText;

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, createElement } 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, extendObject, flatGesture } from './utils';
-import { IntersectionObserverContext } from './context';
+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;
@@ -78,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');
@@ -196,11 +201,8 @@ const _ScrollView = forwardRef((scrollViewProps = {}, ref) => {
                 layoutRef
             }, props));
         updateScrollOptions(e, { scrollLeft, scrollTop });
-        if (enableTriggerIntersectionObserver && intersectionObservers) {
-            for (const key in intersectionObservers) {
-                intersectionObservers[key].throttleMeasure();
-            }
-        }
+        onStartReached(e);
+        onEndReached(e);
     }
     function onScrollEnd(e) {
         const { bindscrollend } = props;
@@ -219,6 +221,14 @@ const _ScrollView = forwardRef((scrollViewProps = {}, ref) => {
         updateScrollOptions(e, { scrollLeft, scrollTop });
         onStartReached(e);
         onEndReached(e);
+        updateIntersection();
+    }
+    function updateIntersection() {
+        if (enableTriggerIntersectionObserver && intersectionObservers) {
+            for (const key in intersectionObservers) {
+                intersectionObservers[key].throttleMeasure();
+            }
+        }
     }
     function scrollToOffset(x = 0, y = 0) {
         if (scrollViewRef.current) {
@@ -277,6 +287,7 @@ const _ScrollView = forwardRef((scrollViewProps = {}, ref) => {
     function onScrollDrag(e) {
         const { x: scrollLeft, y: scrollTop } = e.nativeEvent.contentOffset;
         updateScrollOptions(e, { scrollLeft, scrollTop });
+        updateIntersection();
     }
     const scrollAdditionalProps = extendObject({
         style: extendObject({}, innerStyle, layoutStyle),
@@ -342,12 +353,12 @@ const _ScrollView = forwardRef((scrollViewProps = {}, ref) => {
                 onRefresh: onRefresh
             }, (refresherDefaultStyle && refresherDefaultStyle !== 'none' ? { colors: refreshColor[refresherDefaultStyle] } : null)))
             : undefined
-    }), wrapChildren(props, {
+    }), 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-swiper-item.jsx

@@ -1,10 +1,16 @@
-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-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 dir = contextValue.dir || 'x';
     const { textProps } = splitProps(props);
     const nodeRef = useRef(null);
     const { normalStyle, hasVarDec, varContextRef, hasSelfPercent, setWidth, setHeight } = useTransformStyle(style, { enableVar, externalVarContext });
@@ -16,21 +22,38 @@ const _SwiperItem = forwardRef((props, ref) => {
     // 存储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];
+        // 实现元素的宽度跟随step从0到真实宽度，且不能触发重新渲染整个组件，通过AnimatedStyle的方式实现
+        const outerLayoutStyle = dir === 'x' ? { width: step.value, height: '100%' } : { width: '100%', height: step.value };
+        const transformStyle = [];
+        if (scale) {
+            transformStyle.push({
+                scale: interpolate(Math.abs(Math.abs(offset.value) - itemIndex * step.value), inputRange, outputRange)
+            });
+        }
+        return Object.assign(outerLayoutStyle, {
+            transform: transformStyle
+        });
+    });
+    return (<Animated.View {...innerProps} style={[innerStyle, layoutStyle, itemAnimatedStyle, customStyle]} data-itemId={props['item-id']}>
+      {wrapChildren(props, {
             hasVarDec,
             varContext: varContextRef.current,
             textStyle,
             textProps
         })}
-    </View>);
+    </Animated.View>);
 });
 _SwiperItem.displayName = 'MpxSwiperItem';
 export default _SwiperItem;