@mpxjs/webpack-plugin 2.10.18-beta.6 → 2.10.18-beta.8

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-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/mpx-input.tsx

@@ -54,7 +54,7 @@ import {
   NativeTouchEvent
 } from 'react-native'
 import { warn } from '@mpxjs/utils'
-import { useUpdateEffect, useTransformStyle, useLayout, extendObject, isAndroid } from './utils'
+import { useUpdateEffect, useTransformStyle, useLayout, extendObject, isIOS } from './utils'
 import useInnerProps, { getCustomEvent } from './getInnerListeners'
 import useNodesRef, { HandlerRef } from './useNodesRef'
 import { FormContext, FormFieldValue, KeyboardAvoidContext } from './context'
@@ -472,12 +472,6 @@ const Input = forwardRef<HandlerRef<TextInput, FinalInputProps>, FinalInputProps
       : (nodeRef.current as TextInput)?.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(
       {},
@@ -501,7 +495,7 @@ const Input = forwardRef<HandlerRef<TextInput, FinalInputProps>, FinalInputProps
         underlineColorAndroid: 'rgba(0,0,0,0)',
         textAlignVertical: textAlignVertical,
         placeholderTextColor: placeholderStyle?.color,
-        multiline: multiline || needMultilineFix,
+        multiline: !!multiline,
         onTouchStart,
         onTouchEnd,
         onFocus,
@@ -511,7 +505,6 @@ const Input = forwardRef<HandlerRef<TextInput, FinalInputProps>, FinalInputProps
         onContentSizeChange,
         onSubmitEditing: bindconfirm && onSubmitEditing
       },
-      needMultilineFix ? { numberOfLines: 1 } : {},
       !!multiline && confirmType === 'return' ? {} : { enterKeyHint: confirmType }
     ),
     [

package/lib/runtime/components/react/mpx-swiper.tsx

@@ -79,6 +79,7 @@ interface SwiperProps {
   disableGesture?: boolean
   'display-multiple-items'?: number
   bindchange?: (event: NativeSyntheticEvent<TouchEvent> | unknown) => void
+  bindchangestart?: (event: NativeSyntheticEvent<TouchEvent> | unknown) => void
 }
 
 /**
@@ -159,7 +160,8 @@ const SwiperWrapper = forwardRef<HandlerRef<View, SwiperProps>, SwiperProps>((pr
     circular = false,
     disableGesture = false,
     current: propCurrent = 0,
-    bindchange
+    bindchange,
+    bindchangestart
   } = props
 
   const dotCommonStyle = {
@@ -425,6 +427,7 @@ const SwiperWrapper = forwardRef<HandlerRef<View, SwiperProps>, SwiperProps>((pr
         nextIndex += 1
         // targetOffset = -nextIndex * step.value - preMarginShared.value
         targetOffset = -nextIndex * step.value
+        runOnJSCallback('handleSwiperChangeStart', nextIndex)
         offset.value = withTiming(targetOffset, {
           duration: easeDuration,
           easing: easeMap[easeingFunc]
@@ -438,6 +441,7 @@ const SwiperWrapper = forwardRef<HandlerRef<View, SwiperProps>, SwiperProps>((pr
           nextIndex = 0
           targetOffset = -(childrenLength.value + patchElmNumShared.value) * step.value + preMarginShared.value
           // 执行动画到下一帧
+          runOnJSCallback('handleSwiperChangeStart', nextIndex)
           offset.value = withTiming(targetOffset, {
             duration: easeDuration
           }, () => {
@@ -451,6 +455,7 @@ const SwiperWrapper = forwardRef<HandlerRef<View, SwiperProps>, SwiperProps>((pr
           nextIndex = currentIndex.value + 1
           targetOffset = -(nextIndex + patchElmNumShared.value) * step.value + preMarginShared.value
           // 执行动画到下一帧
+          runOnJSCallback('handleSwiperChangeStart', nextIndex)
           offset.value = withTiming(targetOffset, {
             duration: easeDuration,
             easing: easeMap[easeingFunc]
@@ -489,11 +494,17 @@ const SwiperWrapper = forwardRef<HandlerRef<View, SwiperProps>, SwiperProps>((pr
     bindchange && bindchange(eventData)
   }
 
+  function handleSwiperChangeStart (current: number) {
+    const eventData = getCustomEvent('changestart', {}, { detail: { current }, layoutRef: layoutRef })
+    bindchangestart && bindchangestart(eventData)
+  }
+
   const runOnJSCallbackRef = useRef({
     loop,
     pauseLoop,
     resumeLoop,
-    handleSwiperChange
+    handleSwiperChange,
+    handleSwiperChangeStart
   })
   const runOnJSCallback = useRunOnJSCallback(runOnJSCallbackRef)
 
@@ -514,6 +525,7 @@ const SwiperWrapper = forwardRef<HandlerRef<View, SwiperProps>, SwiperProps>((pr
     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]
@@ -805,7 +817,10 @@ const SwiperWrapper = forwardRef<HandlerRef<View, SwiperProps>, SwiperProps>((pr
         const offsetHalf = computeHalf()
         if (childrenLength.value > 1 && offsetHalf) {
           const { selectedIndex } = getTargetPosition({ transdir: moveDistance } as EventEndType)
-          currentIndex.value = selectedIndex
+          if (selectedIndex !== currentIndex.value) {
+            currentIndex.value = selectedIndex
+            runOnJS(runOnJSCallback)('handleSwiperChangeStart', selectedIndex)
+          }
         }
         // 2. 非循环: 处理用户一直拖拽到临界点的场景,如果放到onFinalize无法阻止offset.value更新为越界的值
         if (!circularShared.value) {

package/package.json

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