@mpxjs/webpack-plugin 2.10.15-5 → 2.10.15-prelease.1

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

@@ -0,0 +1,259 @@
+/**
+ * ✔ percent 进度百分比 0-100
+ * ✘ show-info 在进度条右侧显示百分比
+ * ✘ border-radius 圆角大小
+ * ✘ font-size 右侧百分比字体大小
+ * ✔ stroke-width 进度条线的宽度
+ * ✔ color 进度条颜色（请使用activeColor）
+ * ✔ activeColor 已选择的进度条的颜色
+ * ✔ backgroundColor 未选择的进度条的颜色
+ * ✔ active 进度条从左往右的动画
+ * ✔ active-mode backwards: 动画从头播；forwards：动画从上次结束点接着播
+ * ✔ duration 进度增加1%所需毫秒数
+ * ✔ bindactiveend 动画完成事件
+ */
+import {
+  JSX,
+  useRef,
+  forwardRef,
+  useEffect,
+  useState,
+  createElement,
+  ForwardedRef
+} from 'react'
+import {
+  View,
+  ViewStyle
+} from 'react-native'
+import Animated, {
+  useSharedValue,
+  useAnimatedStyle,
+  withTiming,
+  Easing,
+  runOnJS
+} from 'react-native-reanimated'
+
+import useInnerProps from './getInnerListeners'
+import useNodesRef, { HandlerRef } from './useNodesRef'
+import { useLayout, useTransformStyle, extendObject, useRunOnJSCallback } from './utils'
+import Portal from './mpx-portal'
+
+export interface ProgressProps {
+  percent?: number
+  'stroke-width'?: number | string
+  color?: string
+  activeColor?: string
+  backgroundColor?: string
+  active?: boolean
+  'active-mode'?: 'backwards' | 'forwards'
+  duration?: number
+  bindactiveend?: (event: any) => void
+  style?: ViewStyle & Record<string, any>
+  'enable-offset'?: boolean
+  'enable-var'?: boolean
+  'external-var-context'?: Record<string, any>
+  'parent-font-size'?: number
+  'parent-width'?: number
+  'parent-height'?: number
+}
+
+const Progress = forwardRef<
+  HandlerRef<View, ProgressProps>,
+  ProgressProps
+>((props: ProgressProps, ref: ForwardedRef<HandlerRef<View, ProgressProps>>): JSX.Element => {
+  const {
+    percent = 0,
+    'stroke-width': strokeWidth = 6,
+    color,
+    activeColor = color || '#09BB07',
+    backgroundColor = '#EBEBEB',
+    active = false,
+    'active-mode': activeMode = 'backwards',
+    duration = 30,
+    style = {},
+    'enable-var': enableVar,
+    'external-var-context': externalVarContext,
+    'parent-font-size': parentFontSize,
+    'parent-width': parentWidth,
+    'parent-height': parentHeight
+  } = props
+
+  const nodeRef = useRef(null)
+  const propsRef = useRef(props)
+  propsRef.current = props
+
+  // 进度值状态
+  const [lastPercent, setLastPercent] = useState(0)
+  const progressWidth = useSharedValue(0)
+
+  const {
+    normalStyle,
+    hasSelfPercent,
+    setWidth,
+    setHeight,
+    hasPositionFixed
+  } = useTransformStyle(style, {
+    enableVar,
+    externalVarContext,
+    parentFontSize,
+    parentWidth,
+    parentHeight
+  })
+
+  const { layoutRef, layoutStyle, layoutProps } = useLayout({
+    props,
+    hasSelfPercent,
+    setWidth,
+    setHeight,
+    nodeRef
+  })
+
+  useNodesRef(props, ref, nodeRef, {
+    style: normalStyle
+  })
+
+  // 使用 useRunOnJSCallback 处理动画回调
+  const runOnJSCallbackRef = useRef({
+    triggerActiveEnd: (percent: number) => {
+      const currentProps = propsRef.current
+      if (currentProps.bindactiveend) {
+        currentProps.bindactiveend({
+          type: 'activeend',
+          detail: {
+            percent: percent
+          }
+        })
+      }
+    }
+  })
+  const runOnJSCallback = useRunOnJSCallback(runOnJSCallbackRef)
+
+  // 进度条动画函数
+  const startProgressAnimation = (targetPercent: number, startPercent: number, animationDuration: number, onFinished?: () => void) => {
+    // 根据 active-mode 设置起始位置
+    progressWidth.value = startPercent
+    progressWidth.value = withTiming(
+      targetPercent,
+      {
+        duration: animationDuration,
+        easing: Easing.linear
+      },
+      (finished) => {
+        if (finished && onFinished) {
+          // 在动画回调中，执行传入的worklet函数
+          onFinished()
+        }
+      }
+    )
+  }
+
+  // 进度变化时的动画效果
+  useEffect(() => {
+    const targetPercent = Math.max(0, Math.min(100, percent))
+    if (active) {
+      // 根据 active-mode 确定起始位置
+      let startPercent
+      if (activeMode === 'backwards') {
+        startPercent = 0
+      } else {
+        // forwards 模式：使用上次记录的百分比作为起始位置
+        startPercent = lastPercent
+      }
+
+      // 计算动画持续时间
+      const percentDiff = Math.abs(targetPercent - startPercent)
+      const animationDuration = percentDiff * duration
+
+      // 执行动画
+      startProgressAnimation(targetPercent, startPercent, animationDuration, () => {
+        'worklet'
+        // 在worklet函数内部执行runOnJS调用runOnJSCallback
+        runOnJS(runOnJSCallback)('triggerActiveEnd', targetPercent)
+      })
+    } else {
+      progressWidth.value = targetPercent
+    }
+
+    setLastPercent(targetPercent)
+  }, [percent, active, activeMode, duration])
+
+  // 初始化时设置进度值
+  useEffect(() => {
+    if (!active) {
+      progressWidth.value = Math.max(0, Math.min(100, percent))
+    }
+  }, [])
+
+  // 进度条动画样式
+  const animatedProgressStyle = useAnimatedStyle(() => {
+    return {
+      width: `${progressWidth.value}%`
+    }
+  })
+
+  // 确保数值类型正确
+  const strokeWidthNum = typeof strokeWidth === 'number' ? strokeWidth : parseInt(strokeWidth as string, 10) || 6
+
+  // 容器样式
+  const containerStyle: ViewStyle = extendObject({} as ViewStyle, {
+    flexDirection: 'row' as const,
+    alignItems: 'center' as const,
+    width: '100%',
+    minHeight: Math.max(strokeWidthNum, 20)
+  }, normalStyle, layoutStyle)
+
+  // 进度条背景样式
+  const progressBgStyle: ViewStyle = {
+    width: '100%',
+    height: strokeWidthNum,
+    backgroundColor,
+    overflow: 'hidden'
+  }
+
+  // 进度条填充样式
+  const progressFillStyle: ViewStyle = {
+    height: '100%',
+    backgroundColor: activeColor
+  }
+
+  const innerProps = useInnerProps(
+    extendObject({}, props, layoutProps, {
+      ref: nodeRef
+    }),
+    [
+      'percent',
+      'stroke-width',
+      'color',
+      'activeColor',
+      'backgroundColor',
+      'active',
+      'active-mode',
+      'duration',
+      'bindactiveend'
+    ],
+    { layoutRef }
+  )
+
+  const progressComponent = createElement(
+    View,
+    extendObject({}, innerProps, { style: containerStyle }),
+    // 进度条背景
+    createElement(
+      View,
+      { style: progressBgStyle },
+      // 进度条填充
+      createElement(Animated.View, {
+        style: [progressFillStyle, animatedProgressStyle]
+      })
+    )
+  )
+
+  if (hasPositionFixed) {
+    return createElement(Portal, null, progressComponent)
+  }
+
+  return progressComponent
+})
+
+Progress.displayName = 'MpxProgress'
+export default Progress

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

@@ -194,6 +194,8 @@ const _ScrollView = forwardRef<HandlerRef<ScrollView & View, ScrollViewProps>, S
     white: ['#fff']
   }
 
+  const isContentSizeChange = useRef(false)
+
   const { refresherContent, otherContent } = getRefresherContent(props.children)
   const hasRefresher = refresherContent && refresherEnabled
 
@@ -379,7 +381,22 @@ const _ScrollView = forwardRef<HandlerRef<ScrollView & View, ScrollViewProps>, S
   }
 
   function onContentSizeChange (width: number, height: number) {
-    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: LayoutChangeEvent) {
@@ -402,8 +419,9 @@ const _ScrollView = forwardRef<HandlerRef<ScrollView & View, ScrollViewProps>, S
 
   function onScroll (e: NativeSyntheticEvent<NativeScrollEvent>) {
     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(
@@ -414,7 +432,8 @@ const _ScrollView = forwardRef<HandlerRef<ScrollView & View, ScrollViewProps>, S
             scrollHeight,
             scrollWidth,
             deltaX: scrollLeft - scrollOptions.current.scrollLeft,
-            deltaY: scrollTop - scrollOptions.current.scrollTop
+            deltaY: scrollTop - scrollOptions.current.scrollTop,
+            layoutMeasurement
           },
           layoutRef
         }, props)
@@ -429,8 +448,9 @@ const _ScrollView = forwardRef<HandlerRef<ScrollView & View, ScrollViewProps>, S
 
   function onScrollEnd (e: NativeSyntheticEvent<NativeScrollEvent>) {
     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(
@@ -439,7 +459,8 @@ const _ScrollView = forwardRef<HandlerRef<ScrollView & View, ScrollViewProps>, S
             scrollLeft,
             scrollTop,
             scrollHeight,
-            scrollWidth
+            scrollWidth,
+            layoutMeasurement
           },
           layoutRef
         }, props)
@@ -494,6 +515,16 @@ const _ScrollView = forwardRef<HandlerRef<ScrollView & View, ScrollViewProps>, S
     {
       useNativeDriver: true,
       listener: (event: NativeSyntheticEvent<NativeScrollEvent>) => {
+        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)
       }
     }
@@ -702,6 +733,7 @@ const _ScrollView = forwardRef<HandlerRef<ScrollView & View, ScrollViewProps>, S
       showsVerticalScrollIndicator: scrollY && showScrollbar,
       scrollEnabled: !enableScroll ? false : !!(scrollX || scrollY),
       bounces: false,
+      overScrollMode: 'never',
       ref: scrollViewRef,
       onScroll: enableSticky ? scrollHandler : onScroll,
       onContentSizeChange: onContentSizeChange,