@mpxjs/webpack-plugin 2.10.17 → 2.10.18

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

@@ -11,6 +11,11 @@ import Portal from './mpx-portal'
 /**
  * ✔ indicator-dots
  * ✔ indicator-color
+ * ✔ indicator-width
+ * ✔ indicator-height
+ * ✔ indicator-radius
+ * ✔ indicator-spacing
+ * ✔ indicator-margin
  * ✔ indicator-active-color
  * ✔ autoplay
  * ✔ current
@@ -33,6 +38,10 @@ type EventDataType = {
   // onUpdate时根据上一个判断方向，onFinalize根据transformStart判断
   transdir: number
 }
+// 只基于方向 + offset 计算最终的索引
+type EventEndType = {
+  transdir: number
+}
 
 interface SwiperProps {
   children?: ReactNode
@@ -46,6 +55,11 @@ interface SwiperProps {
   scale?: boolean
   'indicator-dots'?: boolean
   'indicator-color'?: string
+  'indicator-width'?: number
+  'indicator-height'?: number
+  'indicator-spacing'?: number
+  'indicator-radius'?: number
+  'indicator-margin'?: number
   'indicator-active-color'?: string
   vertical?: boolean
   style: {
@@ -72,23 +86,23 @@ interface SwiperProps {
 const styles: { [key: string]: Object } = {
   pagination_x: {
     position: 'absolute',
-    bottom: 25,
+    bottom: 0,
     left: 0,
     right: 0,
     flexDirection: 'row',
     flex: 1,
     justifyContent: 'center',
-    alignItems: 'center'
+    alignItems: 'flex-end'
   },
   pagination_y: {
     position: 'absolute',
-    right: 15,
+    right: 0,
     top: 0,
     bottom: 0,
     flexDirection: 'column',
     flex: 1,
     justifyContent: 'center',
-    alignItems: 'center'
+    alignItems: 'flex-end'
   },
   pagerWrapperx: {
     position: 'absolute',
@@ -109,16 +123,6 @@ const styles: { [key: string]: Object } = {
   }
 }
 
-const dotCommonStyle = {
-  width: 8,
-  height: 8,
-  borderRadius: 4,
-  marginLeft: 3,
-  marginRight: 3,
-  marginTop: 3,
-  marginBottom: 3,
-  zIndex: 98
-}
 const activeDotStyle = {
   zIndex: 99
 }
@@ -136,6 +140,11 @@ const SwiperWrapper = forwardRef<HandlerRef<View, SwiperProps>, SwiperProps>((pr
   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,
@@ -151,6 +160,17 @@ const SwiperWrapper = forwardRef<HandlerRef<View, SwiperProps>, SwiperProps>((pr
     current: propCurrent = 0,
     bindchange
   } = props
+
+  const dotCommonStyle = {
+    width: dotWidth,
+    height: dotHeight,
+    borderRadius: dotRadius,
+    marginLeft: dotSpacing,
+    marginRight: dotSpacing,
+    marginTop: dotSpacing,
+    marginBottom: dotSpacing,
+    zIndex: 98
+  }
   const easeingFunc = props['easing-function'] || 'default'
   const easeDuration = props.duration || 500
   const horizontal = props.vertical !== undefined ? !props.vertical : true
@@ -188,7 +208,8 @@ const SwiperWrapper = forwardRef<HandlerRef<View, SwiperProps>, SwiperProps>((pr
   const patchElmNum = circular ? (preMargin ? 2 : 1) : 0
   const patchElmNumShared = useSharedValue(patchElmNum)
   const circularShared = useSharedValue(circular)
-  const children = Array.isArray(props.children) ? props.children.filter(child => child) : (props.children ? [props.children] : [])
+  // 支持swiper-item 同时存在<swiper-item wx:for/>和<swiper-item>并列的情况
+  const children = React.Children.toArray(props.children) as ReactElement[]
   // 对有变化的变量，在worklet中只能使用sharedValue变量，useRef不能更新
   const childrenLength = useSharedValue(children.length)
   const initWidth = typeof normalStyle?.width === 'number' ? normalStyle.width - preMargin - nextMargin : normalStyle.width
@@ -211,8 +232,12 @@ const SwiperWrapper = forwardRef<HandlerRef<View, SwiperProps>, SwiperProps>((pr
   const preAbsolutePos = useSharedValue(0)
   // 记录从onBegin 到 onTouchesUp 时移动的距离
   const moveTranstion = useSharedValue(0)
+  // 记录用户手滑动的方向
+  const moveDir = useSharedValue(0)
   const timerId = useRef(0 as number | ReturnType<typeof setTimeout>)
   const intervalTimer = props.interval || 500
+  // 记录是否首次，首次不能触发bindchange回调
+  const isFirstRef = useRef(true)
 
   const simultaneousHandlers = flatGesture(originSimultaneousHandlers)
   const waitForHandlers = flatGesture(waitFor)
@@ -252,6 +277,7 @@ const SwiperWrapper = forwardRef<HandlerRef<View, SwiperProps>, SwiperProps>((pr
       'style',
       'indicator-dots',
       'indicator-color',
+      'indicator-width',
       'indicator-active-color',
       'previous-margin',
       'vertical',
@@ -294,8 +320,18 @@ const SwiperWrapper = forwardRef<HandlerRef<View, SwiperProps>, SwiperProps>((pr
     for (let i = 0; i < children.length; i++) {
       dots.push(<View style={[dotCommonStyle, { backgroundColor: unActionColor }]} key={i}></View>)
     }
+    let paginationStyle = styles['pagination_' + dir]
+    if (paginationMargin) {
+      paginationStyle = {
+        ...paginationStyle,
+        marginBottom: paginationMargin,
+        marginLeft: paginationMargin,
+        marginRight: paginationMargin,
+        marginTop: paginationMargin
+      }
+    }
     return (
-      <View pointerEvents="none" style={styles['pagination_' + dir]}>
+      <View pointerEvents="none" style={paginationStyle} key="pagination">
         <View style={[styles['pagerWrapper' + dir]]}>
           <Animated.View style={[
             dotCommonStyle,
@@ -429,11 +465,9 @@ const SwiperWrapper = forwardRef<HandlerRef<View, SwiperProps>, SwiperProps>((pr
     }
   }, [])
 
-  function handleSwiperChange (current: number, pCurrent: number) {
-    if (pCurrent !== currentIndex.value) {
-      const eventData = getCustomEvent('change', {}, { detail: { current, source: 'touch' }, layoutRef: layoutRef })
-      bindchange && bindchange(eventData)
-    }
+  function handleSwiperChange (current: number) {
+    const eventData = getCustomEvent('change', {}, { detail: { current, source: 'touch' }, layoutRef: layoutRef })
+    bindchange && bindchange(eventData)
   }
 
   const runOnJSCallbackRef = useRef({
@@ -482,9 +516,10 @@ const SwiperWrapper = forwardRef<HandlerRef<View, SwiperProps>, SwiperProps>((pr
   // 1. 用户在当前页切换选中项，动画；用户携带选中index打开到swiper页直接选中不走动画
   useAnimatedReaction(() => currentIndex.value, (newIndex: number, preIndex: number) => {
     // 这里必须传递函数名, 直接写()=> {}形式会报 访问了未sharedValue信息
-    if (newIndex !== preIndex && bindchange) {
+    if (newIndex !== preIndex && bindchange && !isFirstRef.current) {
       runOnJS(runOnJSCallback)('handleSwiperChange', newIndex, propCurrent)
     }
+    isFirstRef.current = false
   })
 
   useEffect(() => {
@@ -542,7 +577,8 @@ const SwiperWrapper = forwardRef<HandlerRef<View, SwiperProps>, SwiperProps>((pr
     }
   }, [circular, preMargin])
   const { gestureHandler } = useMemo(() => {
-    function getTargetPosition (eventData: EventDataType) {
+    // 基于transdir + 当前offset计算索引
+    function getTargetPosition (eventData: EventEndType) {
       'worklet'
       // 移动的距离
       const { transdir } = eventData
@@ -601,7 +637,7 @@ const SwiperWrapper = forwardRef<HandlerRef<View, SwiperProps>, SwiperProps>((pr
         return true
       }
     }
-    function handleEnd (eventData: EventDataType) {
+    function handleEnd (eventData: EventEndType) {
       'worklet'
       const { isCriticalItem, targetOffset, resetOffset, selectedIndex } = getTargetPosition(eventData)
       if (isCriticalItem) {
@@ -627,7 +663,7 @@ const SwiperWrapper = forwardRef<HandlerRef<View, SwiperProps>, SwiperProps>((pr
         })
       }
     }
-    function handleBack (eventData: EventDataType) {
+    function handleBack (eventData: EventEndType) {
       'worklet'
       const { transdir } = eventData
       // 向右滑动的back:trans < 0， 向左滑动的back: trans < 0
@@ -648,10 +684,8 @@ const SwiperWrapper = forwardRef<HandlerRef<View, SwiperProps>, SwiperProps>((pr
         }
       })
     }
-    // 当前的offset和index多对应的offset进行对比，判断是否超过一半
-    function computeHalf (eventData: EventDataType) {
+    function computeHalf () {
       'worklet'
-      const { transdir } = eventData
       const currentOffset = Math.abs(offset.value)
       let preOffset = (currentIndex.value + patchElmNumShared.value) * step.value
       if (circularShared.value) {
@@ -660,32 +694,14 @@ const SwiperWrapper = forwardRef<HandlerRef<View, SwiperProps>, SwiperProps>((pr
       // 正常事件中拿到的translation值(正向滑动<0，倒着滑>0)
       const diffOffset = preOffset - currentOffset
       const half = Math.abs(diffOffset) > step.value / 2
-      const isTriggerUpdateHalf = (transdir < 0 && currentOffset < preOffset) || (transdir > 0 && currentOffset > preOffset)
-      return {
-        diffOffset,
-        half,
-        isTriggerUpdateHalf
-      }
-    }
-    function handleLongPress (eventData: EventDataType) {
-      'worklet'
-      const { diffOffset, half, isTriggerUpdateHalf } = computeHalf(eventData)
-      if (+diffOffset === 0) {
-        runOnJS(runOnJSCallback)('resumeLoop')
-      } else if (isTriggerUpdateHalf) {
-        // 如果触发了onUpdate时的索引变更
-        handleEnd(eventData)
-      } else if (half) {
-        handleEnd(eventData)
-      } else {
-        handleBack(eventData)
-      }
+      return half
     }
     function reachBoundary (eventData: EventDataType) {
       'worklet'
       // 1. 基于当前的offset和translation判断是否超过当前边界值
       const { translation } = eventData
-      const boundaryStart = -patchElmNumShared.value * step.value
+      // 与终点的逻辑对齐，都是超过补位元素对应的起点offset
+      const boundaryStart = 0
       const boundaryEnd = -(childrenLength.value + patchElmNumShared.value) * step.value
       const moveToOffset = offset.value + translation
       let isBoundary = false
@@ -702,7 +718,7 @@ const SwiperWrapper = forwardRef<HandlerRef<View, SwiperProps>, SwiperProps>((pr
         // 超过边界的距离
         const exceedLength = Math.abs(boundaryStart) - Math.abs(moveToOffset)
         // 计算对标正常元素所在的offset
-        resetOffset = (patchElmNumShared.value + childrenLength.value - 1) * step.value + (step.value - exceedLength)
+        resetOffset = (patchElmNumShared.value + childrenLength.value - 1) * step.value - exceedLength
       }
       return {
         isBoundary,
@@ -739,6 +755,14 @@ const SwiperWrapper = forwardRef<HandlerRef<View, SwiperProps>, SwiperProps>((pr
       }
       return finalOffset
     }
+    // 设置手势移动的方向
+    function setMoveDir (curAbsoPos: number) {
+      'worklet'
+      const distance = curAbsoPos - preAbsolutePos.value
+      if (distance) {
+        moveDir.value = curAbsoPos - preAbsolutePos.value
+      }
+    }
     const gesturePan = Gesture.Pan()
       .onBegin((e: GestureStateChangeEvent<PanGestureHandlerEventPayload>) => {
         'worklet'
@@ -758,9 +782,9 @@ const SwiperWrapper = forwardRef<HandlerRef<View, SwiperProps>, SwiperProps>((pr
           transdir: moveDistance
         }
         // 1. 支持滑动中超出一半更新索引的能力：只更新索引并不会影响onFinalize依据当前offset计算的索引
-        const { half } = computeHalf(eventData)
-        if (childrenLength.value > 1 && half) {
-          const { selectedIndex } = getTargetPosition(eventData)
+        const offsetHalf = computeHalf()
+        if (childrenLength.value > 1 && offsetHalf) {
+          const { selectedIndex } = getTargetPosition({ transdir: moveDistance } as EventEndType)
           currentIndex.value = selectedIndex
         }
         // 2. 非循环: 处理用户一直拖拽到临界点的场景,如果放到onFinalize无法阻止offset.value更新为越界的值
@@ -771,6 +795,7 @@ const SwiperWrapper = forwardRef<HandlerRef<View, SwiperProps>, SwiperProps>((pr
             const finalOffset = handleResistanceMove(eventData)
             offset.value = finalOffset
           }
+          setMoveDir(e[strAbso])
           preAbsolutePos.value = e[strAbso]
           return
         }
@@ -778,6 +803,7 @@ const SwiperWrapper = forwardRef<HandlerRef<View, SwiperProps>, SwiperProps>((pr
         if (circularShared.value && childrenLength.value === 1) {
           const finalOffset = handleResistanceMove(eventData)
           offset.value = finalOffset
+          setMoveDir(e[strAbso])
           preAbsolutePos.value = e[strAbso]
           return
         }
@@ -788,6 +814,7 @@ const SwiperWrapper = forwardRef<HandlerRef<View, SwiperProps>, SwiperProps>((pr
         } else {
           offset.value = moveDistance + offset.value
         }
+        setMoveDir(e[strAbso])
         preAbsolutePos.value = e[strAbso]
       })
       .onFinalize((e: GestureStateChangeEvent<PanGestureHandlerEventPayload>) => {
@@ -795,10 +822,21 @@ const SwiperWrapper = forwardRef<HandlerRef<View, SwiperProps>, SwiperProps>((pr
         if (touchfinish.value) return
         touchfinish.value = true
         // 触发过onUpdate正常情况下e[strAbso] - preAbsolutePos.value=0; 未触发过onUpdate的情况下e[strAbso] - preAbsolutePos.value 不为0
+        // 正常状态下基于onUpdate时的moveDir判断方向、未触发onUpdate的则基于onBegin的moveTranstion判断方向
         const moveDistance = e[strAbso] - preAbsolutePos.value
+        // 默认兜底方向: 以onBegin为起点，因一些原因未触发onUpdate但是触发了位移
+        const defaultDir = e[strAbso] - moveTranstion.value
+        // 实时方向：方向基于onUpdate时的方向，滑动的速度超过阈值时基于实时的滑动方向计算
+        const realtimeData = {
+          transdir: moveDir.value || defaultDir
+        }
+        // 起始方向：基于用户起始手势
+        const originData = {
+          transdir: defaultDir
+        }
         const eventData = {
           translation: moveDistance,
-          transdir: moveDistance !== 0 ? moveDistance : e[strAbso] - moveTranstion.value
+          transdir: realtimeData.transdir
         }
         // 1. 只有一个元素：循环 和 非循环状态，都走回弹效果
         if (childrenLength.value === 1) {
@@ -812,19 +850,35 @@ const SwiperWrapper = forwardRef<HandlerRef<View, SwiperProps>, SwiperProps>((pr
         // 非循环支持最后元素可滑动能力后，向左快速移动未超过最大可移动范围一半，因为offset为正值，向左滑动handleBack，默认向上取整
         // 但是在offset大于0时，取0。[-100, 0](back取0), [0, 100](back取1)， 所以handleLongPress里的处理逻辑需要兼容支持，因此这里直接单独处理，不耦合下方公共的判断逻辑。
         if (!circularShared.value && !canMove(eventData)) {
-          if (eventData.transdir < 0) {
-            handleBack(eventData)
+          if (realtimeData.transdir < 0) {
+            handleBack(realtimeData)
           } else {
-            handleEnd(eventData)
+            handleEnd(realtimeData)
           }
           return
         }
         // 3. 非循环状态可移动态、循环状态, 正常逻辑处理
         const velocity = e[strVelocity]
-        if (Math.abs(velocity) < longPressRatio) {
-          handleLongPress(eventData)
+        // 用于判断是否超过一半，基于索引判断是否超过一半不可行(1.滑动过程中索引会变更导致计算反向, 2.边界场景会更新offset也会导致基于索引+offset判断实效)
+        const tmp = offset.value % step.value > step.value / 2
+        // 小于0手向左滑动
+        const offsetHalf = originData.transdir < 0 ? tmp : !tmp
+        if (offsetHalf) {
+          if (Math.abs(velocity) > longPressRatio) {
+            // 超过速度阈值，按照实时方向(快速来回滑动)
+            handleEnd(realtimeData)
+          } else {
+            // 超过速度阈值，按照起始方向（慢速长按）
+            handleEnd(originData)
+          }
         } else {
-          handleEnd(eventData)
+          if (Math.abs(velocity) > longPressRatio) {
+            // 超过速度阈值，按照实时方向(快速来回滑动)
+            handleEnd(realtimeData)
+          } else {
+            // 超过速度阈值，按照起始方向（慢速长按）
+            handleBack(originData)
+          }
         }
       })
       .withRef(swiperGestureRef)
@@ -861,6 +915,7 @@ const SwiperWrapper = forwardRef<HandlerRef<View, SwiperProps>, SwiperProps>((pr
     style: [normalStyle, layoutStyle, styles.swiper]
   }, layoutProps, innerProps)
   const animateComponent = createElement(Animated.View, {
+    key: 'swiperContainer',
     style: [{ flexDirection: dir === 'x' ? 'row' : 'column', width: '100%', height: '100%' }, animatedStyles]
   }, wrapChildren({
     children: arrPages

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

@@ -4,6 +4,7 @@
  *     type, password, confirm-hold
  *   Addition:
  *     ✔ confirm-type
+ *     ✘ confirm-hold
  *     ✔ auto-height
  *     ✘ fixed
  *     ✘ show-confirm-bar

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

@@ -8,8 +8,8 @@ import { View, TextStyle, NativeSyntheticEvent, ViewProps, ImageStyle, StyleShee
 import { useRef, useState, useEffect, forwardRef, ReactNode, JSX, createElement } from 'react'
 import useInnerProps from './getInnerListeners'
 import Animated from 'react-native-reanimated'
-import useAnimationHooks from './useAnimationHooks'
-import type { AnimationProp } from './useAnimationHooks'
+import useAnimationHooks, { AnimationType } from './animationHooks/index'
+import type { AnimationProp } from './animationHooks/utils'
 import { ExtendedViewStyle } from './types/common'
 import useNodesRef, { HandlerRef } from './useNodesRef'
 import { parseUrl, PERCENT_REGEX, splitStyle, splitProps, useTransformStyle, wrapChildren, useLayout, renderImage, pickStyle, extendObject, useHover } from './utils'
@@ -32,7 +32,7 @@ export interface _ViewProps extends ViewProps {
   'parent-font-size'?: number
   'parent-width'?: number
   'parent-height'?: number
-  'enable-animation'?: boolean
+  'enable-animation'?: boolean | AnimationType
   bindtouchstart?: (event: NativeSyntheticEvent<TouchEvent> | unknown) => void
   bindtouchmove?: (event: NativeSyntheticEvent<TouchEvent> | unknown) => void
   bindtouchend?: (event: NativeSyntheticEvent<TouchEvent> | unknown) => void
@@ -287,7 +287,7 @@ function backgroundSize (imageProps: ImageProps, preImageInfo: PreImageInfo, ima
     } else { // 数值类型      ImageStyle
       // 数值类型设置为 stretch
       imageProps.resizeMode = 'stretch'
-      if (type === 'linear' && (!layoutWidth || !layoutHeight)) {
+      if (type === 'linear' && (!layoutWidth || !layoutHeight) && (isPercent(width) || isPercent(height))) {
         // ios 上 linear 组件只要重新触发渲染，在渲染过程中外层容器 width 或者 height 被设置为 0，通过设置 % 的方式会渲染不出来，即使后面再更新为正常宽高也渲染不出来
         // 所以 hack 手动先将 linear 宽高也设置为 0，后面再更新为正确的数值或 %。
         dimensions = {
@@ -369,6 +369,17 @@ function normalizeBackgroundPosition (parts: PositionVal[]): backgroundPositionL
   let vStart: 'top' | 'bottom' = 'top'
   let vOffset: PositionVal = 0
 
+  if (!Array.isArray(parts)) {
+    // 模板 style 属性传入单个数值时不会和 class 一样转成数组，需要手动转换
+    parts = [parts]
+  }
+  // 模板 style 属性传入时， 需要额外转换处理单位 px/rpx/vh 以及 center 转化为 50%
+  parts = (parts as (PositionVal | string)[]).map((part) => {
+    if (typeof part !== 'string') return part
+    if (part === 'center') return '50%'
+    return global.__formatValue(part) as PositionVal
+  })
+
   if (parts.length === 4) return parts as backgroundPositionList
 
   // 归一化
@@ -514,19 +525,24 @@ function parseBgImage (text: string): {
   }
 }
 
-function normalizeBackgroundSize (backgroundSize: Exclude<ExtendedViewStyle['backgroundSize'], undefined>, type: 'image' | 'linear' | undefined) {
+function normalizeBackgroundSize (
+  backgroundSize: NonNullable<ExtendedViewStyle['backgroundSize']>,
+  type: 'image' | 'linear' | undefined
+): DimensionValue[] {
   const sizeList = backgroundSize.slice()
   if (sizeList.length === 1) sizeList.push('auto')
 
-  if (type === 'linear') {
+  return sizeList.map((val) => {
+    if (typeof val !== 'string') return val
+
     // 处理当使用渐变的时候，background-size出现cover, contain, auto，当作100%处理
-    for (const i in sizeList) {
-      const val = sizeList[i]
-      sizeList[i] = /^cover|contain|auto$/.test(val as string) ? '100%' : val
+    if (type === 'linear' && /^cover|contain|auto$/.test(val)) {
+      val = '100%'
     }
-  }
 
-  return sizeList
+    // 模板 style 属性传入时， 需要额外转换处理单位 px/rpx/vh
+    return global.__formatValue(val) as DimensionValue
+  })
 }
 
 function preParseImage (imageStyle?: ExtendedViewStyle) {
@@ -777,7 +793,6 @@ const _View = forwardRef<HandlerRef<View, _ViewProps>, _ViewProps>((viewProps, r
         ref: nodeRef,
         style: enableStyleAnimation ? [viewStyle, animationStyle] : viewStyle
       }
-
     ),
     [
       'hover-start-time',

package/lib/runtime/components/react/tsconfig.json

@@ -0,0 +1,26 @@
+// 用于 react 生成
+{
+  "include": [
+    "./"
+  ],
+  "exclude": ["./dist/"],
+  "compilerOptions": {
+    "target": "esnext",
+    "module": "esnext",
+    "outDir": "./dist",
+    "rootDir": "./",
+    "noImplicitThis": true,
+    "noImplicitAny": true,
+    "skipLibCheck": true,
+    "strictNullChecks": true,
+    "moduleResolution": "node",
+    "declaration": true,
+    "allowSyntheticDefaultImports": true,
+    "jsx": "preserve",
+    "lib": [
+      "esnext",
+      "dom",
+      "dom.iterable"
+    ],
+  }
+}

package/lib/runtime/components/react/types/global.d.ts

@@ -34,6 +34,7 @@ declare module '@mpxjs/utils' {
     },
     setOptions: (params: Record<string, any>) => void
   } | undefined
+  export function dash2hump (str: string): string
 }
 
 declare let global: {