@mpxjs/webpack-plugin 2.10.9 → 2.10.11-beta.1

package/lib/independent-loader.js

@@ -10,7 +10,6 @@ module.exports = function (content) {
   if (!mpx) {
     return content
   }
-
   const mode = mpx.mode
   const env = mpx.env
   const i18n = mpx.i18n

package/lib/platform/template/wx/component-config/index.js

@@ -42,6 +42,7 @@ const wxs = require('./wxs')
 const component = require('./component')
 const fixComponentName = require('./fix-component-name')
 const rootPortal = require('./root-portal')
+const pageContainer = require('./page-container')
 const stickyHeader = require('./sticky-header')
 const stickySection = require('./sticky-section')
 
@@ -128,6 +129,7 @@ module.exports = function getComponentConfigs ({ warn, error }) {
     label({ print }),
     component(),
     rootPortal({ print }),
+    pageContainer({ print }),
     stickyHeader({ print }),
     stickySection({ print })
   ]

package/lib/platform/template/wx/component-config/page-container.js

@@ -0,0 +1,19 @@
+const TAG_NAME = 'page-container'
+
+module.exports = function ({ print }) {
+  return {
+    test: TAG_NAME,
+    ios (tag, { el }) {
+      el.isBuiltIn = true
+      return 'mpx-page-container'
+    },
+    android (tag, { el }) {
+      el.isBuiltIn = true
+      return 'mpx-page-container'
+    },
+    harmony (tag, { el }) {
+      el.isBuiltIn = true
+      return 'mpx-page-container'
+    }
+  }
+}

package/lib/platform/template/wx/component-config/unsupported.js

@@ -11,7 +11,7 @@ const JD_UNSUPPORTED_TAG_NAME_ARR = ['functional-page-navigator', 'live-pusher',
 // 快应用不支持的标签集合
 const QA_UNSUPPORTED_TAG_NAME_ARR = ['movable-view', 'movable-area', 'open-data', 'official-account', 'editor', 'functional-page-navigator', 'live-player', 'live-pusher', 'ad', 'cover-image']
 // RN不支持的标签集合
-const RN_UNSUPPORTED_TAG_NAME_ARR = ['open-data', 'official-account', 'editor', 'functional-page-navigator', 'live-player', 'live-pusher', 'ad', 'progress', 'slider', 'audio', 'camera', 'match-media', 'page-container', 'editor', 'keyboard-accessory', 'map']
+const RN_UNSUPPORTED_TAG_NAME_ARR = ['open-data', 'official-account', 'editor', 'functional-page-navigator', 'live-player', 'live-pusher', 'ad', 'progress', 'slider', 'audio', 'camera', 'match-media', 'editor', 'keyboard-accessory', 'map']
 
 /**
  * @param {function(object): function} print

package/lib/runtime/components/react/dist/mpx-page-container.jsx

@@ -0,0 +1,300 @@
+import React, { createElement, forwardRef, useEffect, useRef, useState } from 'react';
+import { StyleSheet, Dimensions, TouchableWithoutFeedback } from 'react-native';
+import Animated, { useSharedValue, useAnimatedStyle, withTiming, cancelAnimation, runOnJS } from 'react-native-reanimated';
+import { GestureDetector, Gesture } from 'react-native-gesture-handler';
+import Portal from './mpx-portal/index';
+import { usePreventRemove } from '@react-navigation/native';
+import { extendObject, useLayout, useNavigation } from './utils';
+import useInnerProps, { getCustomEvent } from './getInnerListeners';
+import useNodesRef from './useNodesRef';
+const screenWidth = Dimensions.get('screen').width;
+function nextTick(cb) {
+    setTimeout(cb, 0);
+}
+function getInitialTranslate(position) {
+    switch (position) {
+        case 'top':
+            return -100;
+        case 'bottom':
+            return 100;
+        case 'right':
+            return 100;
+        case 'center':
+            return 0;
+    }
+}
+function getRoundStyle(position) {
+    switch (position) {
+        case 'top':
+            return {
+                borderBottomLeftRadius: 20,
+                borderBottomRightRadius: 20
+            };
+        case 'bottom':
+            return {
+                borderTopLeftRadius: 20,
+                borderTopRightRadius: 20
+            };
+        default: return {};
+    }
+}
+const PageContainer = forwardRef((props, ref) => {
+    const { show, duration = 300, 'z-index': zIndex = 100, overlay = true, position = 'bottom', round = false, 'close-on-slide-down': closeOnSlideDown = false, 'overlay-style': overlayStyle, 'custom-style': customStyle, bindclose, // RN下特有属性，用于同步show状态到父组件
+    bindbeforeenter, bindenter, bindafterenter, bindbeforeleave, bindleave, bindafterleave, bindclickoverlay, children } = props;
+    const isFirstRenderFlag = useRef(true);
+    const isFirstRender = isFirstRenderFlag.current;
+    if (isFirstRenderFlag.current) {
+        isFirstRenderFlag.current = false;
+    }
+    const triggerBeforeEnterEvent = () => bindbeforeenter?.(getCustomEvent('beforeenter', {}, {}, props));
+    const triggerEnterEvent = () => bindenter?.(getCustomEvent('enter', {}, {}, props));
+    const triggerAfterEnterEvent = () => bindafterenter?.(getCustomEvent('afterenter', {}, {}, props));
+    const triggerBeforeLeaveEvent = () => bindbeforeleave?.(getCustomEvent('beforeleave', {}, {}, props));
+    const triggerLeaveEvent = () => bindleave?.(getCustomEvent('leave', {}, {}, props));
+    const triggerAfterLeaveEvent = () => bindafterleave?.(getCustomEvent('afterleave', {}, {}, props));
+    const close = () => bindclose(getCustomEvent('close', {}, { detail: { value: false, source: 'close' } }, props));
+    // 控制组件是否挂载
+    const [internalVisible, setInternalVisible] = useState(show);
+    const overlayOpacity = useSharedValue(0);
+    const contentOpacity = useSharedValue(position === 'center' ? 0 : 1);
+    const contentTranslate = useSharedValue(getInitialTranslate(position));
+    const overlayAnimatedStyle = useAnimatedStyle(() => ({
+        opacity: overlayOpacity.value
+    }));
+    const sharedPosition = useSharedValue(position);
+    useEffect(() => {
+        sharedPosition.set(position);
+    }, [position]);
+    const contentAnimatedStyle = useAnimatedStyle(() => {
+        let transform = [];
+        if (sharedPosition.value === 'top' || sharedPosition.value === 'bottom') {
+            transform = [{ translateY: `${contentTranslate.value}%` }];
+        }
+        else if (sharedPosition.value === 'right') {
+            transform = [{ translateX: `${contentTranslate.value}%` }];
+        }
+        return {
+            opacity: contentOpacity.value,
+            transform
+        };
+    });
+    const currentTick = useRef(0);
+    function createTick() {
+        currentTick.current++;
+        const current = currentTick.current;
+        console.log('createTick ', current);
+        return () => {
+            console.log('isCurrentTick ', current, ', global tick is ' + currentTick.current);
+            return currentTick.current === current;
+        };
+    }
+    function clearAnimation() {
+        cancelAnimation(overlayOpacity);
+        cancelAnimation(contentOpacity);
+        cancelAnimation(contentTranslate);
+    }
+    // 播放入场动画
+    const animateIn = () => {
+        const isCurrentTick = createTick();
+        triggerBeforeEnterEvent();
+        nextTick(() => {
+            const animateOutFinish = internalVisible === false;
+            setInternalVisible(true);
+            triggerEnterEvent();
+            if (!isCurrentTick())
+                return;
+            const animateEnd = () => {
+                if (!isCurrentTick())
+                    return;
+                triggerAfterEnterEvent();
+            };
+            /**
+             * 对齐 微信小程序
+             * 如果退场动画已经结束，则需将内容先移动到对应动画的初始位置
+             * 否则，结束退场动画，从当前位置作为初始位置完成进场动画，且退场动画时长将缩短
+             */
+            let durationTime = duration;
+            if (animateOutFinish) {
+                contentTranslate.set(getInitialTranslate(position));
+                contentOpacity.set(position === 'center' ? 0 : 1);
+            }
+            else {
+                clearAnimation();
+                if (position === 'center') {
+                    durationTime = durationTime * (1 - contentOpacity.value);
+                }
+                else {
+                    durationTime = durationTime * (contentTranslate.value / 100);
+                }
+            }
+            overlayOpacity.value = withTiming(1, { duration: durationTime });
+            if (position === 'center') {
+                contentOpacity.value = withTiming(1, { duration: durationTime }, () => {
+                    runOnJS(animateEnd)();
+                });
+                contentTranslate.value = withTiming(0, { duration: durationTime });
+            }
+            else {
+                contentOpacity.value = withTiming(1, { duration: durationTime });
+                contentTranslate.value = withTiming(0, { duration: durationTime }, () => {
+                    runOnJS(animateEnd)();
+                });
+            }
+        });
+    };
+    // 播放离场动画
+    const animateOut = () => {
+        const isCurrentTick = createTick();
+        triggerBeforeLeaveEvent();
+        nextTick(() => {
+            triggerLeaveEvent();
+            if (!isCurrentTick())
+                return;
+            const animateEnd = () => {
+                if (!isCurrentTick())
+                    return; // 如果动画被cancelAnimation依然会触发回调，所以在此也需要判断Tick
+                triggerAfterLeaveEvent();
+                setInternalVisible(false);
+            };
+            if (position === 'center') {
+                contentOpacity.value = withTiming(0, { duration }, () => {
+                    runOnJS(animateEnd)();
+                });
+                contentTranslate.value = withTiming(getInitialTranslate(position), { duration });
+            }
+            else {
+                contentOpacity.value = withTiming(0, { duration });
+                contentTranslate.value = withTiming(getInitialTranslate(position), { duration }, () => {
+                    runOnJS(animateEnd)();
+                });
+            }
+            overlayOpacity.value = withTiming(0, { duration });
+        });
+    };
+    useEffect(() => {
+        // 如果展示状态和挂载状态一致，则不需要做任何操作
+        if (show) {
+            animateIn();
+        }
+        else {
+            if (!isFirstRender)
+                animateOut();
+        }
+    }, [show]);
+    const navigation = useNavigation();
+    usePreventRemove(show, (event) => {
+        const { data } = event;
+        if (show) {
+            close();
+        }
+        else {
+            navigation?.dispatch(data.action);
+        }
+    });
+    /**
+       * IOS 下需要关闭手势返回（原因： IOS手势返回时页面会跟随手指滑动，但是实际返回动作是在松手时触发，需禁掉页面跟随手指滑动的效果）
+       * 禁用与启用逻辑抽离为rnConfig由外部实现，并补充纯RN下默认实现
+       */
+    if (__mpx_mode__ === 'ios') {
+        // eslint-disable-next-line react-hooks/rules-of-hooks
+        useEffect(() => {
+            if (typeof global.__mpx.config?.rnConfig?.disableSwipeBack === 'function') {
+                global.__mpx.config.rnConfig.disableSwipeBack({ disable: show });
+            }
+            else {
+                navigation?.setOptions({
+                    gestureEnabled: !show
+                });
+            }
+        }, [show]);
+    }
+    const THRESHOLD = screenWidth * 0.3; // 距离阈值
+    const VELOCITY_THRESHOLD = 1000; // px/s
+    const contentGesture = Gesture.Pan()
+        .activeOffsetY(150) // 下滑至少滑动 150px 才处理
+        .onEnd((e) => {
+        const { velocityY, translationY } = e;
+        const shouldGoBack = translationY > THRESHOLD || velocityY > VELOCITY_THRESHOLD;
+        if (shouldGoBack) {
+            runOnJS(close)();
+        }
+    });
+    /**
+     * 全屏幕 IOS 左滑手势返回（ios默认页面返回存在页面跟手逻辑，page-container暂不支持，对齐微信小程序）
+     * 1: 仅在屏幕左边缘滑动 才触发返回手势。
+     * 2: 用户滑动距离足够 或 滑动速度足够快，才触发返回。
+     * 3: 用户中途回退（滑回来）或滑太慢/太短，则应取消返回。
+     */
+    const screenGesture = Gesture.Pan()
+        .onEnd((e) => {
+        const { velocityX, translationX } = e;
+        const shouldGoBack = translationX > THRESHOLD || velocityX > VELOCITY_THRESHOLD;
+        if (shouldGoBack) {
+            runOnJS(close)();
+        }
+    })
+        .hitSlop({ left: 0, width: 30 }); // 从屏幕左侧 30px 内触发才处理
+    const renderMask = () => {
+        const onPress = () => {
+            close();
+            bindclickoverlay?.(getCustomEvent('clickoverlay', {}, { detail: { value: false, source: 'clickoverlay' } }, props));
+        };
+        return createElement(TouchableWithoutFeedback, { onPress }, createElement(Animated.View, { style: [styles.overlay, overlayStyle, overlayAnimatedStyle] }));
+    };
+    const renderContent = () => {
+        const contentView = (<Animated.View style={[
+                styles.container,
+                getRoundStyle(position),
+                positionStyle[position],
+                customStyle,
+                contentAnimatedStyle
+            ]}>
+        {children}
+      </Animated.View>);
+        return closeOnSlideDown
+            ? <GestureDetector gesture={contentGesture}>{contentView}</GestureDetector>
+            : contentView;
+    };
+    const nodeRef = useRef(null);
+    useNodesRef(props, ref, nodeRef, {});
+    const { layoutRef, layoutProps } = useLayout({ props, hasSelfPercent: false, nodeRef });
+    const innerProps = useInnerProps(extendObject({}, props, {
+        ref: nodeRef
+    }, layoutProps), [], { layoutRef });
+    const wrapperProps = extendObject(innerProps, {
+        style: [styles.wrapper, { zIndex }]
+    });
+    const renderWrapped = () => {
+        const wrappedView = (<Animated.View {...wrapperProps}>
+        {overlay ? renderMask() : null}
+        {renderContent()}
+      </Animated.View>);
+        return __mpx_mode__ === 'ios'
+            ? <GestureDetector gesture={screenGesture}>{wrappedView}</GestureDetector>
+            : wrappedView;
+    };
+    // TODO 是否有必要支持refs? dataset?
+    return createElement(Portal, null, internalVisible ? renderWrapped() : null);
+});
+const styles = StyleSheet.create({
+    wrapper: extendObject({
+        justifyContent: 'flex-end',
+        alignItems: 'center'
+    }, StyleSheet.absoluteFillObject),
+    overlay: extendObject({
+        backgroundColor: 'rgba(0,0,0,0.5)'
+    }, StyleSheet.absoluteFillObject),
+    container: {
+        position: 'absolute',
+        backgroundColor: 'white',
+        overflow: 'hidden'
+    }
+});
+const positionStyle = {
+    bottom: { bottom: 0, width: '100%', height: 'auto' },
+    top: { top: 0, width: '100%', height: 'auto' },
+    right: extendObject({}, StyleSheet.absoluteFillObject, { right: 0 }),
+    center: extendObject({}, StyleSheet.absoluteFillObject)
+};
+PageContainer.displayName = 'PageContainer';
+export default PageContainer;

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

@@ -34,7 +34,7 @@
 import { ScrollView, RefreshControl, Gesture, GestureDetector } from 'react-native-gesture-handler';
 import { Animated as RNAnimated } from 'react-native';
 import { isValidElement, Children, useRef, useState, useEffect, forwardRef, useContext, useMemo, createElement } from 'react';
-import Animated, { useAnimatedRef, useSharedValue, withTiming, useAnimatedStyle, runOnJS } from 'react-native-reanimated';
+import Animated, { useSharedValue, withTiming, useAnimatedStyle, runOnJS } from 'react-native-reanimated';
 import { warn, hasOwn } from '@mpxjs/utils';
 import useInnerProps, { getCustomEvent } from './getInnerListeners';
 import useNodesRef from './useNodesRef';
@@ -74,11 +74,12 @@ const _ScrollView = forwardRef((scrollViewProps = {}, ref) => {
         black: ['#000'],
         white: ['#fff']
     };
+    const isContentSizeChange = useRef(false);
     const { refresherContent, otherContent } = getRefresherContent(props.children);
     const hasRefresher = refresherContent && refresherEnabled;
     const { normalStyle, hasVarDec, varContextRef, hasSelfPercent, hasPositionFixed, setWidth, setHeight } = useTransformStyle(style, { enableVar, externalVarContext, parentFontSize, parentWidth, parentHeight });
     const { textStyle, innerStyle = {} } = splitStyle(normalStyle);
-    const scrollViewRef = useAnimatedRef();
+    const scrollViewRef = useRef(null);
     useNodesRef(props, ref, scrollViewRef, {
         style: normalStyle,
         scrollOffset: scrollOptions,
@@ -206,7 +207,22 @@ const _ScrollView = forwardRef((scrollViewProps = {}, ref) => {
         }
     }
     function onContentSizeChange(width, height) {
-        scrollOptions.current.contentLength = selectLength({ height, width });
+        isContentSizeChange.current = true;
+        const newContentLength = selectLength({ height, width });
+        const oldContentLength = scrollOptions.current.contentLength;
+        scrollOptions.current.contentLength = newContentLength;
+        // 内容高度变化时，Animated.event 的映射可能会有不生效的场景，所以需要手动设置一下 scrollOffset 的值
+        if (enableSticky && (__mpx_mode__ === 'android' || __mpx_mode__ === 'ios')) {
+            // 当内容变少时，检查当前滚动位置是否超出新的内容范围
+            if (newContentLength < oldContentLength) {
+                const { visibleLength, offset } = scrollOptions.current;
+                const maxOffset = Math.max(0, newContentLength - visibleLength);
+                // 如果当前滚动位置超出了新的内容范围，调整滚动offset
+                if (offset > maxOffset && scrollY) {
+                    scrollOffset.setValue(maxOffset);
+                }
+            }
+        }
     }
     function onLayout(e) {
         const layout = e.nativeEvent.layout || {};
@@ -226,8 +242,9 @@ const _ScrollView = forwardRef((scrollViewProps = {}, ref) => {
     }
     function onScroll(e) {
         const { bindscroll } = props;
-        const { x: scrollLeft, y: scrollTop } = e.nativeEvent.contentOffset;
-        const { width: scrollWidth, height: scrollHeight } = e.nativeEvent.contentSize;
+        const { contentOffset, layoutMeasurement, contentSize } = e.nativeEvent;
+        const { x: scrollLeft, y: scrollTop } = contentOffset;
+        const { width: scrollWidth, height: scrollHeight } = contentSize;
         isAtTop.value = scrollTop <= 0;
         bindscroll &&
             bindscroll(getCustomEvent('scroll', e, {
@@ -237,7 +254,8 @@ const _ScrollView = forwardRef((scrollViewProps = {}, ref) => {
                     scrollHeight,
                     scrollWidth,
                     deltaX: scrollLeft - scrollOptions.current.scrollLeft,
-                    deltaY: scrollTop - scrollOptions.current.scrollTop
+                    deltaY: scrollTop - scrollOptions.current.scrollTop,
+                    layoutMeasurement
                 },
                 layoutRef
             }, props));
@@ -250,8 +268,9 @@ const _ScrollView = forwardRef((scrollViewProps = {}, ref) => {
     }
     function onScrollEnd(e) {
         const { bindscrollend } = props;
-        const { x: scrollLeft, y: scrollTop } = e.nativeEvent.contentOffset;
-        const { width: scrollWidth, height: scrollHeight } = e.nativeEvent.contentSize;
+        const { contentOffset, layoutMeasurement, contentSize } = e.nativeEvent;
+        const { x: scrollLeft, y: scrollTop } = contentOffset;
+        const { width: scrollWidth, height: scrollHeight } = contentSize;
         isAtTop.value = scrollTop <= 0;
         bindscrollend &&
             bindscrollend(getCustomEvent('scrollend', e, {
@@ -259,7 +278,8 @@ const _ScrollView = forwardRef((scrollViewProps = {}, ref) => {
                     scrollLeft,
                     scrollTop,
                     scrollHeight,
-                    scrollWidth
+                    scrollWidth,
+                    layoutMeasurement
                 },
                 layoutRef
             }, props));
@@ -333,6 +353,16 @@ const _ScrollView = forwardRef((scrollViewProps = {}, ref) => {
     const scrollHandler = RNAnimated.event([{ nativeEvent: { contentOffset: { y: scrollOffset } } }], {
         useNativeDriver: true,
         listener: (event) => {
+            const y = event.nativeEvent.contentOffset.y || 0;
+            // 内容高度变化时，鸿蒙中 listener 回调通过scrollOffset.__getValue获取值一直等于event.nativeEvent.contentOffset.y，值是正确的，但是无法触发 sticky 动画执行，所以需要手动再 set 一次
+            if (__mpx_mode__ === 'harmony') {
+                if (isContentSizeChange.current) {
+                    scrollOffset.setValue(y);
+                    setTimeout(() => {
+                        isContentSizeChange.current = false;
+                    }, 100);
+                }
+            }
             onScroll(event);
         }
     });
@@ -495,6 +525,7 @@ const _ScrollView = forwardRef((scrollViewProps = {}, ref) => {
         showsVerticalScrollIndicator: scrollY && showScrollbar,
         scrollEnabled: !enableScroll ? false : !!(scrollX || scrollY),
         bounces: false,
+        overScrollMode: 'never',
         ref: scrollViewRef,
         onScroll: enableSticky ? scrollHandler : onScroll,
         onContentSizeChange: onContentSizeChange,

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

@@ -71,7 +71,7 @@ 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 } = props;
+    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, bindchange } = props;
     const easeingFunc = props['easing-function'] || 'default';
     const easeDuration = props.duration || 500;
     const horizontal = props.vertical !== undefined ? !props.vertical : true;
@@ -329,7 +329,7 @@ const SwiperWrapper = forwardRef((props, ref) => {
     function handleSwiperChange(current) {
         if (props.current !== currentIndex.value) {
             const eventData = getCustomEvent('change', {}, { detail: { current, source: 'touch' }, layoutRef: layoutRef });
-            props.bindchange && props.bindchange(eventData);
+            bindchange && bindchange(eventData);
         }
     }
     function getOffset(index, stepValue) {
@@ -373,7 +373,7 @@ const SwiperWrapper = forwardRef((props, ref) => {
     // 1. 用户在当前页切换选中项，动画；用户携带选中index打开到swiper页直接选中不走动画
     useAnimatedReaction(() => currentIndex.value, (newIndex, preIndex) => {
         // 这里必须传递函数名, 直接写()=> {}形式会报 访问了未sharedValue信息
-        if (newIndex !== preIndex && props.bindchange) {
+        if (newIndex !== preIndex && bindchange) {
             runOnJS(handleSwiperChange)(newIndex);
         }
     });