@mpxjs/webpack-plugin 2.10.18-beta.11 → 2.10.18-beta.12

package/lib/react/style-helper.js

@@ -135,27 +135,18 @@ function getClassMap ({ content, filename, mode, srcMode, ctorType, formatValueN
     if (classMapKeys.length) {
       classMapKeys.forEach((key) => {
         if (Object.keys(classMapValue).length) {
-          let _default = classMap[key]?._default
-          let _media = classMap[key]?._media
+          // set css defalut value
+          const val = classMap[key] || {}
+          classMap[key] = Object.assign(val, classMapValue)
+
+          // set css media
           if (isMedia) {
-            // 当前是媒体查询
-            _default = _default || {}
-            _media = _media || []
+            const _media = classMap[key]?._media || []
             _media.push({
               options,
               value: classMapValue
             })
-            classMap[key] = {
-              _media,
-              _default
-            }
-          } else if (_default) {
-            // 已有媒体查询数据，此次非媒体查询
-            Object.assign(_default, classMapValue)
-          } else {
-            // 无媒体查询
-            const val = classMap[key] || {}
-            classMap[key] = Object.assign(val, classMapValue)
+            classMap[key]._media = _media
           }
         }
       })

package/lib/runtime/components/react/animationHooks/useTransitionHooks.ts

@@ -144,7 +144,7 @@ function parseTransitionStyle (originalStyle: ExtendedViewStyle) {
   const transitionMap = transitionData.reduce((acc, cur) => {
     // hasOwn(transitionSupportedProperty, dash2hump(val)) || val === Transform
     const { property = '', duration = 0, delay = 0, easing = Easing.inOut(Easing.ease) } = cur
-    if ((hasOwn(transitionSupportedProperty, dash2hump(property)) || property === 'transform') && duration > 0) {
+    if ((hasOwn(transitionSupportedProperty, dash2hump(property)) || property === 'transform') && duration >= 0) {
       acc[property] = {
         duration,
         delay,
@@ -157,17 +157,59 @@ function parseTransitionStyle (originalStyle: ExtendedViewStyle) {
   return transitionMap
 }
 
+const transitionKeys = ['transition', 'transitionDuration', 'transitionTimingFunction', 'transitionDelay', 'transitionProperty'] as const
+
+function getTransitionPropertyKeys (map: TransitionMap): string {
+  return Object.keys(map).sort().join(',')
+}
+
 export default function useTransitionHooks<T, P> (props: AnimationHooksPropsType) {
   // console.log(`useTransitionHooks, props=`, props)
   const { style: originalStyle = {}, transitionend } = props
   // style变更标识(首次render不执行)，初始值为0，首次渲染后为1
   const animationDeps = useRef(0)
-  // 记录上次style map
-  // const lastStyleRef = useRef({} as {[propName: keyof ExtendedViewStyle]: number|string})
-  // ** 从 style 中获取动画数据
+  // transition 时序属性动态更新追踪
+  const transitionMapVersionRef = useRef(0)
+  const lastTransitionStyleRef = useRef<Record<string, any>>(
+    transitionKeys.reduce((acc, key) => { acc[key] = originalStyle[key]; return acc }, {} as Record<string, any>)
+  )
+  const initialPropertyKeysRef = useRef('')
+  const prevTransitionMapRef = useRef<TransitionMap>({})
+  // 检测 transition 时序属性变化，返回版本号驱动 transitionMap 重新计算
+  const transitionMapVersion = useMemo(() => {
+    const prevStyle = lastTransitionStyleRef.current
+    const hasChanged = transitionKeys.some(key => prevStyle[key] !== originalStyle[key])
+    if (hasChanged) {
+      transitionKeys.forEach(key => { lastTransitionStyleRef.current[key] = originalStyle[key] })
+      transitionMapVersionRef.current++
+    }
+    return transitionMapVersionRef.current
+  }, [originalStyle])
+  // ** 从 style 中获取动画数据(支持动态更新 transitionDuration/transitionDelay/transitionTimingFunction)
   const transitionMap = useMemo(() => {
-    return parseTransitionStyle(originalStyle)
-  }, [])
+    const newTransitionMap = parseTransitionStyle(originalStyle)
+    const newPropertyKeys = getTransitionPropertyKeys(newTransitionMap)
+    if (!initialPropertyKeysRef.current) {
+      // 首次计算，记录初始属性集合
+      initialPropertyKeysRef.current = newPropertyKeys
+      prevTransitionMapRef.current = newTransitionMap
+      return newTransitionMap
+    }
+    // 检测 transitionProperty 是否变化
+    if (newPropertyKeys !== initialPropertyKeysRef.current) {
+      error('[Mpx runtime error]: dynamic setting transitionProperty is not supported')
+      // 保留初始属性集合，仅更新已有属性的时序
+      const prevMap = prevTransitionMapRef.current
+      const result = Object.keys(prevMap).reduce((map, property) => {
+        map[property] = newTransitionMap[property] || prevMap[property]
+        return map
+      }, {} as TransitionMap)
+      prevTransitionMapRef.current = result
+      return result
+    }
+    prevTransitionMapRef.current = newTransitionMap
+    return newTransitionMap
+  }, [transitionMapVersion])
   // ** style prop sharedValue  interpolateOutput: SharedValue<InterpolateOutput>
   const { shareValMap, animatedKeys, animatedStyleKeys } = useMemo(() => {
     // 记录需要执行动画的 propName

package/lib/runtime/components/react/dist/animationHooks/useTransitionHooks.js

@@ -117,7 +117,7 @@ function parseTransitionStyle(originalStyle) {
     const transitionMap = transitionData.reduce((acc, cur) => {
         // hasOwn(transitionSupportedProperty, dash2hump(val)) || val === Transform
         const { property = '', duration = 0, delay = 0, easing = Easing.inOut(Easing.ease) } = cur;
-        if ((hasOwn(transitionSupportedProperty, dash2hump(property)) || property === 'transform') && duration > 0) {
+        if ((hasOwn(transitionSupportedProperty, dash2hump(property)) || property === 'transform') && duration >= 0) {
             acc[property] = {
                 duration,
                 delay,
@@ -129,17 +129,55 @@ function parseTransitionStyle(originalStyle) {
     // console.log(`parseTransitionStyle transitionMap=`, transitionMap)
     return transitionMap;
 }
+const transitionKeys = ['transition', 'transitionDuration', 'transitionTimingFunction', 'transitionDelay', 'transitionProperty'];
+function getTransitionPropertyKeys(map) {
+    return Object.keys(map).sort().join(',');
+}
 export default function useTransitionHooks(props) {
     // console.log(`useTransitionHooks, props=`, props)
     const { style: originalStyle = {}, transitionend } = props;
     // style变更标识(首次render不执行)，初始值为0，首次渲染后为1
     const animationDeps = useRef(0);
-    // 记录上次style map
-    // const lastStyleRef = useRef({} as {[propName: keyof ExtendedViewStyle]: number|string})
-    // ** 从 style 中获取动画数据
+    // transition 时序属性动态更新追踪
+    const transitionMapVersionRef = useRef(0);
+    const lastTransitionStyleRef = useRef(transitionKeys.reduce((acc, key) => { acc[key] = originalStyle[key]; return acc; }, {}));
+    const initialPropertyKeysRef = useRef('');
+    const prevTransitionMapRef = useRef({});
+    // 检测 transition 时序属性变化，返回版本号驱动 transitionMap 重新计算
+    const transitionMapVersion = useMemo(() => {
+        const prevStyle = lastTransitionStyleRef.current;
+        const hasChanged = transitionKeys.some(key => prevStyle[key] !== originalStyle[key]);
+        if (hasChanged) {
+            transitionKeys.forEach(key => { lastTransitionStyleRef.current[key] = originalStyle[key]; });
+            transitionMapVersionRef.current++;
+        }
+        return transitionMapVersionRef.current;
+    }, [originalStyle]);
+    // ** 从 style 中获取动画数据(支持动态更新 transitionDuration/transitionDelay/transitionTimingFunction)
     const transitionMap = useMemo(() => {
-        return parseTransitionStyle(originalStyle);
-    }, []);
+        const newTransitionMap = parseTransitionStyle(originalStyle);
+        const newPropertyKeys = getTransitionPropertyKeys(newTransitionMap);
+        if (!initialPropertyKeysRef.current) {
+            // 首次计算，记录初始属性集合
+            initialPropertyKeysRef.current = newPropertyKeys;
+            prevTransitionMapRef.current = newTransitionMap;
+            return newTransitionMap;
+        }
+        // 检测 transitionProperty 是否变化
+        if (newPropertyKeys !== initialPropertyKeysRef.current) {
+            error('[Mpx runtime error]: dynamic setting transitionProperty is not supported');
+            // 保留初始属性集合，仅更新已有属性的时序
+            const prevMap = prevTransitionMapRef.current;
+            const result = Object.keys(prevMap).reduce((map, property) => {
+                map[property] = newTransitionMap[property] || prevMap[property];
+                return map;
+            }, {});
+            prevTransitionMapRef.current = result;
+            return result;
+        }
+        prevTransitionMapRef.current = newTransitionMap;
+        return newTransitionMap;
+    }, [transitionMapVersion]);
     // ** style prop sharedValue  interpolateOutput: SharedValue<InterpolateOutput>
     const { shareValMap, animatedKeys, animatedStyleKeys } = useMemo(() => {
         // 记录需要执行动画的 propName

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

@@ -40,7 +40,7 @@
 import { forwardRef, useRef, useState, useContext, useEffect, createElement } from 'react';
 import { TextInput } from 'react-native';
 import { warn } from '@mpxjs/utils';
-import { useUpdateEffect, useTransformStyle, useLayout, extendObject, isAndroid } from './utils';
+import { useUpdateEffect, useTransformStyle, useLayout, extendObject } from './utils';
 import useInnerProps, { getCustomEvent } from './getInnerListeners';
 import useNodesRef from './useNodesRef';
 import { FormContext, KeyboardAvoidContext } from './context';
@@ -285,11 +285,6 @@ const Input = forwardRef((props, ref) => {
             ? nodeRef.current?.focus()
             : nodeRef.current?.blur();
     }, [isAutoFocus]);
-    // 使用 multiline 来修复光标位置问题
-    // React Native 的 TextInput 在 textAlign center + placeholder 时光标会跑到右边
-    // 这个问题只在 Android 上出现
-    // 参考：https://github.com/facebook/react-native/issues/28794 (Android only)
-    const needMultilineFix = isAndroid && !multiline;
     const innerProps = useInnerProps(extendObject({}, props, layoutProps, {
         ref: nodeRef,
         style: extendObject({}, normalStyle, layoutStyle),
@@ -308,7 +303,7 @@ const Input = forwardRef((props, ref) => {
         underlineColorAndroid: 'rgba(0,0,0,0)',
         textAlignVertical: textAlignVertical,
         placeholderTextColor: placeholderStyle?.color,
-        multiline: multiline || needMultilineFix,
+        multiline: !!multiline,
         onTouchStart,
         onTouchEnd,
         onFocus,
@@ -317,7 +312,7 @@ const Input = forwardRef((props, ref) => {
         onSelectionChange,
         onContentSizeChange,
         onSubmitEditing: bindconfirm && onSubmitEditing
-    }, needMultilineFix ? { numberOfLines: 1 } : {}, !!multiline && confirmType === 'return' ? {} : { enterKeyHint: confirmType }), [
+    }, !!multiline && confirmType === 'return' ? {} : { enterKeyHint: confirmType }), [
         'type',
         'password',
         'placeholder-style',

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

@@ -73,6 +73,15 @@ const _PickerViewColumn = forwardRef((props, ref) => {
             clearTimerScrollTo();
         };
     }, []);
+    // `contentOffset` prop sets visual position but does not fire scroll events,
+    // so `offsetYShared` (from `useScrollViewOffset`) stays at 0 until the user scrolls.
+    // Directly sync it whenever `itemRawH` is established so wheel animation renders correctly.
+    useEffect(() => {
+        if (!itemRawH || dragging.current || scrolling.current) {
+            return;
+        }
+        offsetYShared.value = activeIndex.current * itemRawH;
+    }, [itemRawH]);
     useEffect(() => {
         if (!scrollViewRef.current ||
             !itemRawH ||

package/lib/runtime/components/react/dist/mpx-swiper.d.ts

@@ -58,6 +58,7 @@ interface SwiperProps {
     disableGesture?: boolean;
     'display-multiple-items'?: number;
     bindchange?: (event: NativeSyntheticEvent<TouchEvent> | unknown) => void;
+    bindchangestart?: (event: NativeSyntheticEvent<TouchEvent> | unknown) => void;
 }
 declare const SwiperWrapper: React.ForwardRefExoticComponent<SwiperProps & React.RefAttributes<HandlerRef<View, SwiperProps>>>;
 export default SwiperWrapper;

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

@@ -61,7 +61,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-width': dotWidth = 8, 'indicator-height': dotHeight = 8, 'indicator-radius': dotRadius = 4, 'indicator-spacing': dotSpacing = 4, 'indicator-margin': paginationMargin = 10, '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, current: propCurrent = 0, bindchange } = props;
+    const { 'indicator-dots': showPagination, 'indicator-color': dotColor = 'rgba(0, 0, 0, .3)', 'indicator-width': dotWidth = 8, 'indicator-height': dotHeight = 8, 'indicator-radius': dotRadius = 4, 'indicator-spacing': dotSpacing = 4, 'indicator-margin': paginationMargin = 10, '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, current: propCurrent = 0, bindchange, bindchangestart } = props;
     const dotCommonStyle = {
         width: dotWidth,
         height: dotHeight,
@@ -300,6 +300,7 @@ const SwiperWrapper = forwardRef((props, ref) => {
                 nextIndex += 1;
                 // targetOffset = -nextIndex * step.value - preMarginShared.value
                 targetOffset = -nextIndex * step.value;
+                runOnJSCallback('handleSwiperChangeStart', nextIndex);
                 offset.value = withTiming(targetOffset, {
                     duration: easeDuration,
                     easing: easeMap[easeingFunc]
@@ -314,6 +315,7 @@ const SwiperWrapper = forwardRef((props, ref) => {
                     nextIndex = 0;
                     targetOffset = -(childrenLength.value + patchElmNumShared.value) * step.value + preMarginShared.value;
                     // 执行动画到下一帧
+                    runOnJSCallback('handleSwiperChangeStart', nextIndex);
                     offset.value = withTiming(targetOffset, {
                         duration: easeDuration
                     }, () => {
@@ -328,6 +330,7 @@ const SwiperWrapper = forwardRef((props, ref) => {
                     nextIndex = currentIndex.value + 1;
                     targetOffset = -(nextIndex + patchElmNumShared.value) * step.value + preMarginShared.value;
                     // 执行动画到下一帧
+                    runOnJSCallback('handleSwiperChangeStart', nextIndex);
                     offset.value = withTiming(targetOffset, {
                         duration: easeDuration,
                         easing: easeMap[easeingFunc]
@@ -362,11 +365,16 @@ const SwiperWrapper = forwardRef((props, ref) => {
         const eventData = getCustomEvent('change', {}, { detail: { current, source: 'touch' }, layoutRef: layoutRef });
         bindchange && bindchange(eventData);
     }
+    function handleSwiperChangeStart(current) {
+        const eventData = getCustomEvent('changestart', {}, { detail: { current }, layoutRef: layoutRef });
+        bindchangestart && bindchangestart(eventData);
+    }
     const runOnJSCallbackRef = useRef({
         loop,
         pauseLoop,
         resumeLoop,
-        handleSwiperChange
+        handleSwiperChange,
+        handleSwiperChangeStart
     });
     const runOnJSCallback = useRunOnJSCallback(runOnJSCallbackRef);
     function getOffset(index, stepValue) {
@@ -387,6 +395,7 @@ const SwiperWrapper = forwardRef((props, ref) => {
         if (targetOffset !== offset.value) {
             // 内部基于props.current!==currentIndex.value决定是否使用动画及更新currentIndex.value
             if (propCurrent !== undefined && propCurrent !== currentIndex.value) {
+                runOnJSCallback('handleSwiperChangeStart', propCurrent);
                 offset.value = withTiming(targetOffset, {
                     duration: easeDuration,
                     easing: easeMap[easeingFunc]
@@ -686,7 +695,10 @@ const SwiperWrapper = forwardRef((props, ref) => {
             const offsetHalf = computeHalf();
             if (childrenLength.value > 1 && offsetHalf) {
                 const { selectedIndex } = getTargetPosition({ transdir: moveDistance });
-                currentIndex.value = selectedIndex;
+                if (selectedIndex !== currentIndex.value) {
+                    currentIndex.value = selectedIndex;
+                    runOnJS(runOnJSCallback)('handleSwiperChangeStart', selectedIndex);
+                }
             }
             // 2. 非循环: 处理用户一直拖拽到临界点的场景,如果放到onFinalize无法阻止offset.value更新为越界的值
             if (!circularShared.value) {

package/lib/runtime/components/react/dist/utils.jsx

@@ -285,7 +285,7 @@ export function parseValues(str, char = ' ') {
 function parseTransform(transformStr) {
     const values = parseValues(transformStr);
     // Todo transform 排序不一致时，transform动画会闪烁，故这里同样的排序输出 transform
-    values.sort();
+    // values.sort()
     const transform = [];
     values.forEach(item => {
         const match = item.match(/([/\w]+)\((.+)\)/);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mpxjs/webpack-plugin",
-  "version": "2.10.18-beta.11",
+  "version": "2.10.18-beta.12",
   "description": "mpx compile core",
   "keywords": [
     "mpx"