@mpxjs/webpack-plugin 2.9.69-beta.4 → 2.9.69-beta.6

package/lib/runtime/components/react/context.ts

@@ -42,7 +42,7 @@ export interface PortalManagerContextValue {
 export interface PortalContextValue {
   mount: (children: React.ReactNode, key?: number, pageId?: number|null) => number| undefined
   update: (key: number, children: React.ReactNode, pageId?: number|null) => void
-  unmount: (key: number, pageId?: number|null) => void
+  unmount: (key: number) => void
   manager?: PortalManagerContextValue
 }
 

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

@@ -38,7 +38,7 @@ import { createElement, useEffect, useRef, forwardRef, useContext } from 'react'
 import { View, StyleSheet, Animated, Easing } from 'react-native';
 import { warn } from '@mpxjs/utils';
 import { GestureDetector } from 'react-native-gesture-handler';
-import { getCurrentPage, splitProps, splitStyle, useLayout, useTransformStyle, wrapChildren, extendObject, useHoverStyle } from './utils';
+import { getCurrentPage, splitProps, splitStyle, useLayout, useTransformStyle, wrapChildren, extendObject, useHover } from './utils';
 import useInnerProps, { getCustomEvent } from './getInnerListeners';
 import useNodesRef from './useNodesRef';
 import { RouteContext, FormContext } from './context';
@@ -132,7 +132,8 @@ const Button = forwardRef((buttonProps, ref) => {
     const { size = 'default', type = 'default', plain = false, disabled = false, loading = false, 'hover-class': hoverClass, 'hover-style': hoverStyle = {}, 'hover-start-time': hoverStartTime = 20, 'hover-stay-time': hoverStayTime = 70, 'open-type': openType, 'form-type': formType, 'enable-var': enableVar, 'external-var-context': externalVarContext, 'parent-font-size': parentFontSize, 'parent-width': parentWidth, 'parent-height': parentHeight, style = {}, children, bindgetuserinfo, bindtap } = props;
     const pageId = useContext(RouteContext);
     const formContext = useContext(FormContext);
-    const { isHover, enableHoverStyle, gesture } = useHoverStyle({ hoverStyle, hoverStartTime, hoverStayTime, disabled });
+    const enableHover = hoverClass !== 'none';
+    const { isHover, gesture } = useHover({ enableHover, hoverStartTime, hoverStayTime, disabled });
     let submitFn;
     let resetFn;
     if (formContext) {
@@ -140,23 +141,22 @@ const Button = forwardRef((buttonProps, ref) => {
         resetFn = formContext.reset;
     }
     const isMiniSize = size === 'mini';
-    const applyHoverEffect = isHover && hoverClass !== 'none';
     const [color, hoverColor, plainColor, disabledColor] = TypeColorMap[type];
-    const normalBackgroundColor = disabled ? disabledColor : applyHoverEffect || loading ? hoverColor : color;
+    const normalBackgroundColor = disabled ? disabledColor : isHover || loading ? hoverColor : color;
     const plainBorderColor = disabled
         ? 'rgba(0, 0, 0, .2)'
-        : applyHoverEffect
+        : isHover
             ? `rgba(${plainColor},.6)`
             : `rgb(${plainColor})`;
     const normalBorderColor = type === 'default' ? 'rgba(0, 0, 0, .2)' : normalBackgroundColor;
     const plainTextColor = disabled
         ? 'rgba(0, 0, 0, .2)'
-        : applyHoverEffect
+        : isHover
             ? `rgba(${plainColor}, .6)`
             : `rgb(${plainColor})`;
     const normalTextColor = type === 'default'
-        ? `rgba(0, 0, 0, ${disabled ? 0.3 : applyHoverEffect || loading ? 0.6 : 1})`
-        : `rgba(255 ,255 ,255 , ${disabled || applyHoverEffect || loading ? 0.6 : 1})`;
+        ? `rgba(0, 0, 0, ${disabled ? 0.3 : isHover || loading ? 0.6 : 1})`
+        : `rgba(255 ,255 ,255 , ${disabled || isHover || loading ? 0.6 : 1})`;
     const viewStyle = {
         borderWidth: 1,
         borderStyle: 'solid',
@@ -166,7 +166,7 @@ const Button = forwardRef((buttonProps, ref) => {
     const defaultViewStyle = extendObject({}, styles.button, isMiniSize ? styles.buttonMini : null, viewStyle);
     const defaultTextStyle = extendObject({}, styles.text, isMiniSize ? styles.textMini : {}, { color: plain ? plainTextColor : normalTextColor });
     const defaultStyle = extendObject({}, defaultViewStyle, defaultTextStyle);
-    const styleObj = extendObject({}, defaultStyle, style, applyHoverEffect ? hoverStyle : {});
+    const styleObj = extendObject({}, defaultStyle, style, isHover ? hoverStyle : {});
     const { hasSelfPercent, normalStyle, hasVarDec, varContextRef, setWidth, setHeight } = useTransformStyle(styleObj, { enableVar, externalVarContext, parentFontSize, parentWidth, parentHeight });
     const nodeRef = useRef(null);
     useNodesRef(props, ref, nodeRef, { style: normalStyle });
@@ -263,8 +263,8 @@ const Button = forwardRef((buttonProps, ref) => {
         textStyle,
         textProps
     }));
-    return enableHoverStyle
-        ? createElement(GestureDetector, { gesture }, baseButton)
+    return enableHover
+        ? createElement(GestureDetector, { gesture: gesture }, baseButton)
         : baseButton;
 });
 Button.displayName = 'MpxButton';

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

@@ -14,8 +14,8 @@ const _PickerViewColumnItem = ({ item, index, itemHeight, itemWidth = '100%', te
         return {
             opacity: interpolate(offsetYShared.value, inputRange, facesShared.value.map((x) => x.opacity), Extrapolation.CLAMP),
             transform: [
-                { rotateX: interpolate(offsetYShared.value, inputRange, facesShared.value.map((x) => x.deg), Extrapolation.CLAMP) + 'deg' },
                 { translateY: interpolate(offsetYShared.value, inputRange, facesShared.value.map((x) => x.offsetY), Extrapolation.EXTEND) },
+                { rotateX: interpolate(offsetYShared.value, inputRange, facesShared.value.map((x) => x.deg), Extrapolation.CLAMP) + 'deg' },
                 { scale: interpolate(offsetYShared.value, inputRange, facesShared.value.map((x) => x.scale), Extrapolation.EXTEND) }
             ]
         };

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

@@ -25,6 +25,7 @@ const _PickerViewColumn = forwardRef((props, ref) => {
     const prevScrollingInfo = useRef({ index: initialIndex, y: 0 });
     const touching = useRef(false);
     const scrolling = useRef(false);
+    const timerScrollTo = useRef(null);
     const activeIndex = useRef(initialIndex);
     const prevIndex = usePrevious(initialIndex);
     const prevMaxIndex = usePrevious(maxIndex);
@@ -65,6 +66,17 @@ const _PickerViewColumn = forwardRef((props, ref) => {
         }
     });
     const debounceResetScrollPosition = useDebounceCallback(stableResetScrollPosition, 10);
+    const clearTimerScrollTo = () => {
+        if (timerScrollTo.current) {
+            clearTimeout(timerScrollTo.current);
+            timerScrollTo.current = null;
+        }
+    };
+    useEffect(() => {
+        return () => {
+            clearTimerScrollTo();
+        };
+    }, []);
     useEffect(() => {
         if (!scrollViewRef.current ||
             !itemRawH ||
@@ -76,7 +88,8 @@ const _PickerViewColumn = forwardRef((props, ref) => {
             maxIndex !== prevMaxIndex) {
             return;
         }
-        setTimeout(() => {
+        clearTimerScrollTo();
+        timerScrollTo.current = setTimeout(() => {
             scrollViewRef.current?.scrollTo({
                 x: 0,
                 y: getYofIndex(initialIndex),
@@ -88,7 +101,8 @@ const _PickerViewColumn = forwardRef((props, ref) => {
     const onContentSizeChange = (_w, h) => {
         const y = getYofIndex(initialIndex);
         if (y <= h) {
-            setTimeout(() => {
+            clearTimerScrollTo();
+            timerScrollTo.current = setTimeout(() => {
                 scrollViewRef.current?.scrollTo({ x: 0, y, animated: false });
             }, 0);
         }

package/lib/runtime/components/react/dist/mpx-portal/portal-consumer.jsx

@@ -15,7 +15,7 @@ const PortalConsumer = ({ manager, children }) => {
         const curPageId = navigation?.pageId;
         keyRef.current = manager.mount(children, undefined, curPageId);
         return () => {
-            manager.unmount(keyRef.current, curPageId);
+            manager.unmount(keyRef.current);
         };
     }, []);
     return null;

package/lib/runtime/components/react/dist/mpx-portal/portal-host.jsx

@@ -6,6 +6,7 @@ import { PortalContext } from '../context';
 // events
 const addType = 'MPX_RN_ADD_PORTAL';
 const removeType = 'MPX_RN_REMOVE_PORTAL';
+const updateType = 'MPX_RN_UPDATE_PORTAL';
 // fix react native web does not support DeviceEventEmitter
 const TopViewEventEmitter = DeviceEventEmitter || new NativeEventEmitter();
 const styles = StyleSheet.create({
@@ -23,6 +24,9 @@ class PortalGuard {
     remove = (key) => {
         TopViewEventEmitter.emit(removeType, key);
     };
+    update = (key, e) => {
+        TopViewEventEmitter.emit(updateType, key, e);
+    };
 }
 /**
  * portal
@@ -33,6 +37,7 @@ const PortalHost = ({ children }) => {
     const _queue = useRef([]);
     const _addType = useRef(null);
     const _removeType = useRef(null);
+    const _updateType = useRef(null);
     const manager = useRef(null);
     let currentPageId;
     const _mount = (children, _key, curPageId) => {
@@ -45,23 +50,12 @@ const PortalHost = ({ children }) => {
         if (manager.current) {
             manager.current.mount(key, children);
         }
-        else {
-            _queue.current.push({ type: 'mount', key, children });
-        }
         return key;
     };
-    const _unmount = (key, curPageId) => {
-        const navigation = getFocusedNavigation();
-        const pageId = navigation?.pageId;
-        if (pageId !== (curPageId ?? currentPageId)) {
-            return;
-        }
+    const _unmount = (key) => {
         if (manager.current) {
             manager.current.unmount(key);
         }
-        else {
-            _queue.current.push({ type: 'unmount', key });
-        }
     };
     const _update = (key, children, curPageId) => {
         const navigation = getFocusedNavigation();
@@ -72,41 +66,17 @@ const PortalHost = ({ children }) => {
         if (manager.current) {
             manager.current.update(key, children);
         }
-        else {
-            const op = { type: 'mount', key, children };
-            const index = _queue.current.findIndex((o) => o.type === 'mount' || (o.type === 'update' && o.key === key));
-            if (index > -1) {
-                _queue.current[index] = op;
-            }
-            else {
-                _queue.current.push(op);
-            }
-        }
     };
     useEffect(() => {
         const navigation = getFocusedNavigation();
         currentPageId = navigation?.pageId;
         _addType.current = TopViewEventEmitter.addListener(addType, _mount);
         _removeType.current = TopViewEventEmitter.addListener(removeType, _unmount);
+        _updateType.current = TopViewEventEmitter.addListener(updateType, _update);
         return () => {
-            while (_queue.current.length && manager.current) {
-                const action = _queue.current.pop();
-                if (!action) {
-                    continue;
-                }
-                // tslint:disable-next-line:switch-default
-                switch (action.type) {
-                    case 'mount':
-                        manager.current?.mount(action.key, action.children);
-                        break;
-                    case 'update':
-                        manager.current?.update(action.key, action.children);
-                        break;
-                    case 'unmount':
-                        manager.current?.unmount(action.key);
-                        break;
-                }
-            }
+            _addType.current?.remove();
+            _removeType.current?.remove();
+            _updateType.current?.remove();
         };
     }, []);
     return (<PortalContext.Provider value={{
@@ -114,7 +84,6 @@ const PortalHost = ({ children }) => {
             update: _update,
             unmount: _unmount
         }}>
-      {/* Need collapsable=false here to clip the elevations, otherwise they appear above Portal components */}
       <View style={styles.container} collapsable={false}>
         {children}
       </View>

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

@@ -9,4 +9,5 @@ const Portal = ({ children }) => {
 Portal.Host = PortalHost;
 Portal.add = portal.add;
 Portal.remove = portal.remove;
+Portal.update = portal.update;
 export default Portal;

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

@@ -10,6 +10,7 @@ const _SwiperItem = forwardRef((props, ref) => {
     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 });
@@ -33,14 +34,19 @@ const _SwiperItem = forwardRef((props, ref) => {
             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)
-                }]
-        };
+        // 实现元素的宽度跟随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
+        });
     });
-    const mergeStyle = [innerStyle, layoutStyle, { width: '100%', height: '100%' }, scale ? itemAnimatedStyle : {}].concat(customStyle);
-    return (<Animated.View {...innerProps} style={mergeStyle} data-itemId={props['item-id']}>
+    return (<Animated.View {...innerProps} style={[innerStyle, layoutStyle, itemAnimatedStyle, customStyle]} data-itemId={props['item-id']}>
       {wrapChildren(props, {
             hasVarDec,
             varContext: varContextRef.current,