@mpxjs/webpack-plugin 2.9.66 → 2.9.69-beta.0

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

@@ -5,7 +5,7 @@
  * ✔ lower-threshold
  * ✔ scroll-top
  * ✔ scroll-left
- * ✘ scroll-into-view
+ * ✔ scroll-into-view
  * ✔ scroll-with-animation
  * ✔ enable-back-to-top
  * ✘ enable-passive
@@ -33,16 +33,18 @@
  */
 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 } 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 } from './utils';
+import { splitProps, splitStyle, useTransformStyle, useLayout, wrapChildren, extendObject, flatGesture } from './utils';
 import { IntersectionObserverContext } from './context';
 const _ScrollView = forwardRef((scrollViewProps = {}, ref) => {
     const { textProps, innerProps: props = {} } = splitProps(scrollViewProps);
-    const { enhanced = false, bounces = true, style = {}, '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, 'enable-var': enableVar, 'external-var-context': externalVarContext, 'parent-font-size': parentFontSize, 'parent-width': parentWidth, 'parent-height': parentHeight } = props;
+    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;
+    const simultaneousHandlers = flatGesture(originSimultaneousHandlers);
+    const waitForHandlers = flatGesture(waitFor);
     const [refreshing, setRefreshing] = useState(true);
     const snapScrollTop = useRef(0);
     const snapScrollLeft = useRef(0);
@@ -58,10 +60,12 @@ const _ScrollView = forwardRef((scrollViewProps = {}, ref) => {
     const hasCallScrollToLower = useRef(false);
     const initialTimeout = useRef(null);
     const intersectionObservers = useContext(IntersectionObserverContext);
+    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,
@@ -71,30 +75,48 @@ const _ScrollView = forwardRef((scrollViewProps = {}, ref) => {
             fastDeceleration: false,
             decelerationDisabled: false,
             scrollTo: scrollToOffset
-        }
+        },
+        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');
     }
     useEffect(() => {
-        if (snapScrollTop.current !== props['scroll-top'] ||
-            snapScrollLeft.current !== props['scroll-left']) {
-            snapScrollTop.current = props['scroll-top'] || 0;
-            snapScrollLeft.current = props['scroll-left'] || 0;
+        if (snapScrollTop.current !== scrollTop || snapScrollLeft.current !== scrollLeft) {
             initialTimeout.current = setTimeout(() => {
-                scrollToOffset(snapScrollLeft.current, snapScrollTop.current);
+                scrollToOffset(scrollLeft, scrollTop);
             }, 0);
             return () => {
                 initialTimeout.current && clearTimeout(initialTimeout.current);
             };
         }
-    }, [props['scroll-top'], props['scroll-left']]);
+    }, [scrollTop, scrollLeft]);
+    useEffect(() => {
+        if (refreshing !== refresherTriggered) {
+            setRefreshing(!!refresherTriggered);
+        }
+    }, [refresherTriggered]);
     useEffect(() => {
-        if (refreshing !== props['refresher-triggered']) {
-            setRefreshing(!!props['refresher-triggered']);
+        if (scrollIntoView && __selectRef) {
+            if (!firstScrollIntoViewChange.current) {
+                setTimeout(handleScrollIntoView);
+            }
+            else {
+                handleScrollIntoView();
+            }
         }
-    }, [props['refresher-triggered']]);
+        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;
     }
@@ -149,14 +171,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;
@@ -204,6 +225,8 @@ const _ScrollView = forwardRef((scrollViewProps = {}, ref) => {
             scrollViewRef.current.scrollTo({ x, y, animated: !!scrollWithAnimation });
             scrollOptions.current.scrollLeft = x;
             scrollOptions.current.scrollTop = y;
+            snapScrollLeft.current = x;
+            snapScrollTop.current = y;
         }
     }
     function onRefresh() {
@@ -212,7 +235,7 @@ const _ScrollView = forwardRef((scrollViewProps = {}, ref) => {
             bindrefresherrefresh(getCustomEvent('refresherrefresh', {}, { layoutRef }, props));
     }
     function onScrollTouchStart(e) {
-        const { binddragstart, bindtouchstart, enhanced } = props;
+        const { bindtouchstart } = props;
         bindtouchstart && bindtouchstart(e);
         if (enhanced) {
             binddragstart &&
@@ -226,7 +249,6 @@ const _ScrollView = forwardRef((scrollViewProps = {}, ref) => {
         }
     }
     function onScrollTouchMove(e) {
-        const { binddragging, bindtouchmove, enhanced } = props;
         bindtouchmove && bindtouchmove(e);
         if (enhanced) {
             binddragging &&
@@ -239,26 +261,25 @@ const _ScrollView = forwardRef((scrollViewProps = {}, ref) => {
                 }, props));
         }
     }
-    function onScrollEndDrag(e) {
-        const { binddragend, enhanced } = props;
+    function onScrollTouchEnd(e) {
+        bindtouchend && bindtouchend(e);
         if (enhanced) {
-            const { x: scrollLeft, y: scrollTop } = e.nativeEvent.contentOffset;
-            const { width: scrollWidth, height: scrollHeight } = e.nativeEvent.contentSize;
             binddragend &&
                 binddragend(getCustomEvent('dragend', e, {
                     detail: {
-                        scrollLeft: scrollLeft,
-                        scrollTop: scrollTop,
-                        scrollHeight,
-                        scrollWidth
+                        scrollLeft: scrollOptions.current.scrollLeft || 0,
+                        scrollTop: scrollOptions.current.scrollTop || 0
                     },
                     layoutRef
                 }, props));
-            updateScrollOptions(e, { scrollLeft, scrollTop });
         }
     }
-    let scrollAdditionalProps = {
-        style: { ...innerStyle, ...layoutStyle },
+    function onScrollDrag(e) {
+        const { x: scrollLeft, y: scrollTop } = e.nativeEvent.contentOffset;
+        updateScrollOptions(e, { scrollLeft, scrollTop });
+    }
+    const scrollAdditionalProps = extendObject({
+        style: extendObject({}, innerStyle, layoutStyle),
         pinchGestureEnabled: false,
         horizontal: scrollX && !scrollY,
         scrollEventThrottle: scrollEventThrottle,
@@ -269,20 +290,21 @@ const _ScrollView = forwardRef((scrollViewProps = {}, ref) => {
         ref: scrollViewRef,
         onScroll: onScroll,
         onContentSizeChange: onContentSizeChange,
-        bindtouchstart: onScrollTouchStart,
-        bindtouchmove: onScrollTouchMove,
-        onScrollEndDrag,
-        onMomentumScrollEnd: onScrollEnd,
-        ...layoutProps
-    };
+        bindtouchstart: ((enhanced && binddragstart) || bindtouchstart) && onScrollTouchStart,
+        bindtouchmove: ((enhanced && binddragging) || bindtouchend) && onScrollTouchMove,
+        bindtouchend: ((enhanced && binddragend) || bindtouchend) && onScrollTouchEnd,
+        onScrollBeginDrag: onScrollDrag,
+        onScrollEndDrag: onScrollDrag,
+        onMomentumScrollEnd: onScrollEnd
+    }, (simultaneousHandlers ? { simultaneousHandlers } : {}), (waitForHandlers ? { waitFor: waitForHandlers } : {}), layoutProps);
     if (enhanced) {
-        scrollAdditionalProps = {
-            ...scrollAdditionalProps,
+        Object.assign(scrollAdditionalProps, {
             bounces,
             pagingEnabled
-        };
+        });
     }
     const innerProps = useInnerProps(props, scrollAdditionalProps, [
+        'id',
         'scroll-x',
         'scroll-y',
         'enable-back-to-top',
@@ -312,16 +334,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
+    }), wrapChildren(props, {
+        hasVarDec,
+        varContext: varContextRef.current,
+        textStyle,
+        textProps
+    }));
 });
-_ScrollView.displayName = 'mpx-scroll-view';
+_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

@@ -4,12 +4,14 @@ import useInnerProps from './getInnerListeners';
 import useNodesRef from './useNodesRef'; // 引入辅助函数
 import { useTransformStyle, splitStyle, splitProps, wrapChildren, useLayout } from './utils';
 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 } = props;
     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 });
@@ -30,5 +32,5 @@ const _SwiperItem = forwardRef((props, ref) => {
         })}
     </View>);
 });
-_SwiperItem.displayName = 'mpx-swiper-item';
+_SwiperItem.displayName = 'MpxSwiperItem';
 export default _SwiperItem;