@mpxjs/webpack-plugin 2.9.70 → 2.9.72

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

@@ -1,8 +1,9 @@
 import { View } from 'react-native';
-import React, { forwardRef, useState, useRef } from 'react';
+import React, { forwardRef, useRef } from 'react';
 import useInnerProps, { getCustomEvent } from './getInnerListeners';
 import useNodesRef from './useNodesRef';
-import { useLayout, splitProps, splitStyle, wrapChildren, parseInlineStyle, useTransformStyle, useDebounceCallback, useStableCallback, extendObject } from './utils';
+import { useLayout, splitProps, splitStyle, wrapChildren, useTransformStyle, extendObject } from './utils';
+import { PickerViewStyleContext } from './pickerVIewContext';
 const styles = {
     wrapper: {
         display: 'flex',
@@ -13,42 +14,38 @@ const styles = {
         alignItems: 'center'
     }
 };
+const DefaultPickerItemH = 36;
 const _PickerView = forwardRef((props, ref) => {
-    const { children, value = [], bindchange, style, 'enable-var': enableVar, 'external-var-context': externalVarContext } = props;
-    // indicatorStyle 需要转换为rn的style
-    // 微信设置到pick-view上上设置的normalStyle如border等需要转换成RN的style然后进行透传
-    const indicatorStyle = parseInlineStyle(props['indicator-style']);
-    const { height: indicatorH, ...pickerOverlayStyle } = indicatorStyle;
-    const [pickMaxH, setPickMaxH] = useState(0);
+    const { children, value = [], bindchange, style, 'indicator-style': indicatorStyle = {}, 'mask-style': pickerMaskStyle = {}, 'enable-var': enableVar, 'external-var-context': externalVarContext } = props;
+    const { height: indicatorH, ...pickerIndicatorStyle } = indicatorStyle;
     const nodeRef = useRef(null);
     const cloneRef = useRef(null);
     const activeValueRef = useRef(value);
     activeValueRef.current = value.slice();
+    const snapActiveValueRef = useRef(null);
     const { normalStyle, hasVarDec, varContextRef, hasSelfPercent, setWidth, setHeight } = useTransformStyle(style, { enableVar, externalVarContext });
     useNodesRef(props, ref, nodeRef, {
         style: normalStyle
     });
-    const { 
-    // 存储layout布局信息
-    layoutRef, layoutProps, layoutStyle } = useLayout({ props, hasSelfPercent, setWidth, setHeight, nodeRef: nodeRef });
+    const { layoutRef, layoutProps, layoutStyle } = useLayout({ props, hasSelfPercent, setWidth, setHeight, nodeRef: nodeRef });
     const { textProps } = splitProps(props);
     const { textStyle } = splitStyle(normalStyle);
-    const onColumnItemRawHChange = (height) => {
-        if (height > pickMaxH) {
-            setPickMaxH(height);
-        }
-    };
-    const bindchangeDebounce = useDebounceCallback(useStableCallback(bindchange), 300);
     const onSelectChange = (columnIndex, selectedIndex) => {
-        bindchangeDebounce.clear();
         const activeValue = activeValueRef.current;
         activeValue[columnIndex] = selectedIndex;
-        const eventData = getCustomEvent('change', {}, { detail: { value: activeValue, source: 'change' }, layoutRef });
-        bindchangeDebounce(eventData);
+        const eventData = getCustomEvent('change', {}, { detail: { value: activeValue.slice(), source: 'change' }, layoutRef });
+        bindchange?.(eventData);
+        snapActiveValueRef.current = activeValueRef.current;
     };
-    const onInitialChange = (value) => {
-        const eventData = getCustomEvent('change', {}, { detail: { value, source: 'change' }, layoutRef });
-        bindchange?.(eventData); // immediate
+    const hasDiff = (a = [], b) => {
+        return a.some((v, i) => v !== b[i]);
+    };
+    const onInitialChange = (isInvalid, value) => {
+        if (isInvalid || !snapActiveValueRef.current || hasDiff(snapActiveValueRef.current, value)) {
+            const eventData = getCustomEvent('change', {}, { detail: { value: value.slice(), source: 'change' }, layoutRef });
+            bindchange?.(eventData);
+            snapActiveValueRef.current = value.slice();
+        }
     };
     const innerProps = useInnerProps(props, extendObject({
         ref: nodeRef,
@@ -57,9 +54,14 @@ const _PickerView = forwardRef((props, ref) => {
             overflow: 'hidden'
         }),
         layoutProps
-    }), ['enable-offset'], { layoutRef });
+    }), [
+        'enable-offset',
+        'indicator-style',
+        'indicator-class',
+        'mask-style',
+        'mask-class'
+    ], { layoutRef });
     const renderColumn = (child, index, columnData, initialIndex) => {
-        const extraProps = {};
         const childProps = child?.props || {};
         const wrappedProps = extendObject({}, childProps, {
             columnData,
@@ -67,14 +69,14 @@ const _PickerView = forwardRef((props, ref) => {
             columnIndex: index,
             key: `pick-view-${index}`,
             wrapperStyle: {
-                height: normalStyle?.height || 0,
-                itemHeight: indicatorH || 0
+                height: normalStyle?.height || DefaultPickerItemH,
+                itemHeight: indicatorH || DefaultPickerItemH
             },
-            onColumnItemRawHChange,
             onSelectChange: onSelectChange.bind(null, index),
             initialIndex,
-            pickerOverlayStyle
-        }, extraProps);
+            pickerIndicatorStyle,
+            pickerMaskStyle
+        });
         const realElement = React.cloneElement(child, wrappedProps);
         return wrapChildren({
             children: realElement
@@ -110,12 +112,14 @@ const _PickerView = forwardRef((props, ref) => {
             validValue.push(validIndex);
             renderColumns.push(renderColumn(item, index, columnData, validIndex));
         });
-        isInvalid && onInitialChange(validValue);
+        onInitialChange(isInvalid, validValue);
         return renderColumns;
     };
-    return (<View {...innerProps}>
-      <View style={[styles.wrapper]}>{renderPickerColumns()}</View>
-    </View>);
+    return (<PickerViewStyleContext.Provider value={textStyle}>
+      <View {...innerProps}>
+        <View style={[styles.wrapper]}>{renderPickerColumns()}</View>
+      </View>
+    </PickerViewStyleContext.Provider>);
 });
 _PickerView.displayName = 'MpxPickerView';
 export default _PickerView;

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,6 +201,8 @@ const _ScrollView = forwardRef((scrollViewProps = {}, ref) => {
                 layoutRef
             }, props));
         updateScrollOptions(e, { scrollLeft, scrollTop });
+        onStartReached(e);
+        onEndReached(e);
         if (enableTriggerIntersectionObserver && intersectionObservers) {
             for (const key in intersectionObservers) {
                 intersectionObservers[key].throttleMeasure();
@@ -342,12 +349,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;