@mpxjs/webpack-plugin 2.10.10 → 2.10.11-beta.1

package/lib/runtime/components/react/mpx-page-container.tsx

@@ -0,0 +1,392 @@
+import React, { createElement, forwardRef, useCallback, useEffect, useRef, useState } from 'react'
+import { StyleSheet, Dimensions, TouchableWithoutFeedback, StyleProp, ViewStyle } from 'react-native'
+import Animated, { useSharedValue, useAnimatedStyle, withTiming, cancelAnimation, runOnJS } from 'react-native-reanimated'
+import { GestureDetector, Gesture } from 'react-native-gesture-handler'
+import Portal from './mpx-portal/index'
+import { PreventRemoveEvent, usePreventRemove } from '@react-navigation/native'
+import { extendObject, useLayout, useNavigation } from './utils'
+import useInnerProps, { getCustomEvent } from './getInnerListeners'
+import useNodesRef from './useNodesRef'
+
+type Position = 'top' | 'bottom' | 'right' | 'center';
+
+interface PageContainerProps {
+    show: boolean;
+    duration?: number;
+    'z-index'?: number;
+    overlay?: boolean;
+    position?: Position;
+    round?: boolean;
+    'close-on-slide-down'?: boolean;
+    'overlay-style'?: StyleProp<ViewStyle>;
+    'custom-style'?: StyleProp<ViewStyle>;
+    bindbeforeenter?: (event: CustomEvent) => void;
+    bindenter?: (event: CustomEvent) => void;
+    bindafterenter?: (event: CustomEvent) => void;
+    bindbeforeleave?: (event: CustomEvent) => void;
+    bindleave?: (event: CustomEvent) => void;
+    bindafterleave?: (event: CustomEvent) => void;
+    bindclickoverlay?: (event: CustomEvent) => void;
+
+    bindclose: (event: CustomEvent<{ value: boolean}>) => void;
+    children: React.ReactNode;
+}
+
+const screenWidth = Dimensions.get('screen').width
+
+function nextTick (cb: () => void) {
+  setTimeout(cb, 0)
+}
+
+function getInitialTranslate (position: Position) {
+  switch (position) {
+    case 'top':
+      return -100
+    case 'bottom':
+      return 100
+    case 'right':
+      return 100
+    case 'center':
+      return 0
+  }
+}
+function getRoundStyle (position: Position) {
+  switch (position) {
+    case 'top':
+      return {
+        borderBottomLeftRadius: 20,
+        borderBottomRightRadius: 20
+      }
+    case 'bottom':
+      return {
+        borderTopLeftRadius: 20,
+        borderTopRightRadius: 20
+      }
+    default: return {}
+  }
+}
+
+const PageContainer = forwardRef<any, PageContainerProps>((props, ref) => {
+  const {
+    show,
+    duration = 300,
+    'z-index': zIndex = 100,
+    overlay = true,
+    position = 'bottom',
+    round = false,
+    'close-on-slide-down': closeOnSlideDown = false,
+    'overlay-style': overlayStyle,
+    'custom-style': customStyle,
+    bindclose, // RN下特有属性，用于同步show状态到父组件
+    bindbeforeenter,
+    bindenter,
+    bindafterenter,
+    bindbeforeleave,
+    bindleave,
+    bindafterleave,
+    bindclickoverlay,
+    children
+  } = props
+
+  const isFirstRenderFlag = useRef(true)
+  const isFirstRender = isFirstRenderFlag.current
+  if (isFirstRenderFlag.current) {
+    isFirstRenderFlag.current = false
+  }
+
+  const triggerBeforeEnterEvent = () => bindbeforeenter?.(getCustomEvent('beforeenter', {}, {}, props))
+  const triggerEnterEvent = () => bindenter?.(getCustomEvent('enter', {}, {}, props))
+  const triggerAfterEnterEvent = () => bindafterenter?.(getCustomEvent('afterenter', {}, {}, props))
+  const triggerBeforeLeaveEvent = () => bindbeforeleave?.(getCustomEvent('beforeleave', {}, {}, props))
+  const triggerLeaveEvent = () => bindleave?.(getCustomEvent('leave', {}, {}, props))
+  const triggerAfterLeaveEvent = () => bindafterleave?.(getCustomEvent('afterleave', {}, {}, props))
+
+  const close = () => bindclose(getCustomEvent('close', {}, { detail: { value: false, source: 'close' } }, props))
+
+  // 控制组件是否挂载
+  const [internalVisible, setInternalVisible] = useState(show)
+
+  const overlayOpacity = useSharedValue(0)
+  const contentOpacity = useSharedValue(position === 'center' ? 0 : 1)
+  const contentTranslate = useSharedValue(getInitialTranslate(position))
+
+  const overlayAnimatedStyle = useAnimatedStyle(() => ({
+    opacity: overlayOpacity.value
+  }))
+
+  const sharedPosition = useSharedValue(position)
+  useEffect(() => {
+    sharedPosition.set(position)
+  }, [position])
+  const contentAnimatedStyle = useAnimatedStyle(() => {
+    let transform: ViewStyle['transform'] = []
+    if (sharedPosition.value === 'top' || sharedPosition.value === 'bottom') {
+      transform = [{ translateY: `${contentTranslate.value}%` }]
+    } else if (sharedPosition.value === 'right') {
+      transform = [{ translateX: `${contentTranslate.value}%` }]
+    }
+
+    return {
+      opacity: contentOpacity.value,
+      transform
+    }
+  })
+
+  const currentTick = useRef(0)
+  function createTick () {
+    currentTick.current++
+    const current = currentTick.current
+    console.log('createTick ', current)
+    return () => {
+      console.log('isCurrentTick ', current, ', global tick is ' + currentTick.current)
+      return currentTick.current === current
+    }
+  }
+
+  function clearAnimation () {
+    cancelAnimation(overlayOpacity)
+    cancelAnimation(contentOpacity)
+    cancelAnimation(contentTranslate)
+  }
+
+  // 播放入场动画
+  const animateIn = () => {
+    const isCurrentTick = createTick()
+    triggerBeforeEnterEvent()
+    nextTick(() => {
+      const animateOutFinish = internalVisible === false
+      setInternalVisible(true)
+      triggerEnterEvent()
+      if (!isCurrentTick()) return
+
+      const animateEnd = () => {
+        if (!isCurrentTick()) return
+        triggerAfterEnterEvent()
+      }
+      /**
+       * 对齐 微信小程序
+       * 如果退场动画已经结束，则需将内容先移动到对应动画的初始位置
+       * 否则，结束退场动画，从当前位置作为初始位置完成进场动画，且退场动画时长将缩短
+       */
+      let durationTime = duration
+      if (animateOutFinish) {
+        contentTranslate.set(getInitialTranslate(position))
+        contentOpacity.set(position === 'center' ? 0 : 1)
+      } else {
+        clearAnimation()
+        if (position === 'center') {
+          durationTime = durationTime * (1 - contentOpacity.value)
+        } else {
+          durationTime = durationTime * (contentTranslate.value / 100)
+        }
+      }
+
+      overlayOpacity.value = withTiming(1, { duration: durationTime })
+      if (position === 'center') {
+        contentOpacity.value = withTiming(1, { duration: durationTime }, () => {
+          runOnJS(animateEnd)()
+        })
+        contentTranslate.value = withTiming(0, { duration: durationTime })
+      } else {
+        contentOpacity.value = withTiming(1, { duration: durationTime })
+        contentTranslate.value = withTiming(0, { duration: durationTime }, () => {
+          runOnJS(animateEnd)()
+        })
+      }
+    })
+  }
+
+  // 播放离场动画
+  const animateOut = () => {
+    const isCurrentTick = createTick()
+    triggerBeforeLeaveEvent()
+    nextTick(() => {
+      triggerLeaveEvent()
+      if (!isCurrentTick()) return
+
+      const animateEnd = () => {
+        if (!isCurrentTick()) return // 如果动画被cancelAnimation依然会触发回调，所以在此也需要判断Tick
+        triggerAfterLeaveEvent()
+        setInternalVisible(false)
+      }
+
+      if (position === 'center') {
+        contentOpacity.value = withTiming(0, { duration }, () => {
+          runOnJS(animateEnd)()
+        })
+        contentTranslate.value = withTiming(getInitialTranslate(position), { duration })
+      } else {
+        contentOpacity.value = withTiming(0, { duration })
+        contentTranslate.value = withTiming(getInitialTranslate(position), { duration }, () => {
+          runOnJS(animateEnd)()
+        })
+      }
+      overlayOpacity.value = withTiming(0, { duration })
+    })
+  }
+
+  useEffect(() => {
+    // 如果展示状态和挂载状态一致，则不需要做任何操作
+    if (show) {
+      animateIn()
+    } else {
+      if (!isFirstRender) animateOut()
+    }
+  }, [show])
+
+  const navigation = useNavigation()
+  usePreventRemove(show, (event: PreventRemoveEvent) => {
+    const { data } = event
+    if (show) {
+      close()
+    } else {
+      navigation?.dispatch(data.action)
+    }
+  })
+
+  /**
+     * IOS 下需要关闭手势返回（原因： IOS手势返回时页面会跟随手指滑动，但是实际返回动作是在松手时触发，需禁掉页面跟随手指滑动的效果）
+     * 禁用与启用逻辑抽离为rnConfig由外部实现，并补充纯RN下默认实现
+     */
+
+  if (__mpx_mode__ === 'ios') {
+    // eslint-disable-next-line react-hooks/rules-of-hooks
+    useEffect(() => {
+      if (typeof global.__mpx.config?.rnConfig?.disableSwipeBack === 'function') {
+        global.__mpx.config.rnConfig.disableSwipeBack({ disable: show })
+      } else {
+        navigation?.setOptions({
+          gestureEnabled: !show
+        })
+      }
+    }, [show])
+  }
+
+  const THRESHOLD = screenWidth * 0.3 // 距离阈值
+  const VELOCITY_THRESHOLD = 1000 // px/s
+  const contentGesture = Gesture.Pan()
+    .activeOffsetY(150) // 下滑至少滑动 150px 才处理
+    .onEnd((e) => {
+      const { velocityY, translationY } = e
+      const shouldGoBack = translationY > THRESHOLD || velocityY > VELOCITY_THRESHOLD
+      if (shouldGoBack) {
+        runOnJS(close)()
+      }
+    })
+  /**
+   * 全屏幕 IOS 左滑手势返回（ios默认页面返回存在页面跟手逻辑，page-container暂不支持，对齐微信小程序）
+   * 1: 仅在屏幕左边缘滑动 才触发返回手势。
+   * 2: 用户滑动距离足够 或 滑动速度足够快，才触发返回。
+   * 3: 用户中途回退（滑回来）或滑太慢/太短，则应取消返回。
+   */
+  const screenGesture = Gesture.Pan()
+    .onEnd((e) => {
+      const { velocityX, translationX } = e
+      const shouldGoBack = translationX > THRESHOLD || velocityX > VELOCITY_THRESHOLD
+      if (shouldGoBack) {
+        runOnJS(close)()
+      }
+    })
+    .hitSlop({ left: 0, width: 30 }) // 从屏幕左侧 30px 内触发才处理
+
+  const renderMask = () => {
+    const onPress = () => {
+      close()
+      bindclickoverlay?.(getCustomEvent(
+        'clickoverlay',
+        {},
+        { detail: { value: false, source: 'clickoverlay' } },
+        props
+      ))
+    }
+    return createElement(TouchableWithoutFeedback, { onPress },
+      createElement(Animated.View, { style: [styles.overlay, overlayStyle, overlayAnimatedStyle] }))
+  }
+
+  const renderContent = () => {
+    const contentView = (
+      <Animated.View style={[
+        styles.container,
+        getRoundStyle(position),
+        positionStyle[position],
+        customStyle,
+        contentAnimatedStyle
+      ]}>
+        {children}
+      </Animated.View>
+    )
+
+    return closeOnSlideDown
+      ? <GestureDetector gesture={contentGesture}>{contentView}</GestureDetector>
+      : contentView
+  }
+
+  const nodeRef = useRef(null)
+  useNodesRef(props, ref, nodeRef, {})
+  const { layoutRef, layoutProps } = useLayout({ props, hasSelfPercent: false, nodeRef })
+  const innerProps = useInnerProps(
+    extendObject(
+      {},
+      props,
+      {
+        ref: nodeRef
+      },
+      layoutProps
+    ),
+    [],
+    { layoutRef }
+  )
+  const wrapperProps = extendObject(
+    innerProps,
+    {
+      style: [styles.wrapper, { zIndex }]
+    }
+  )
+
+  const renderWrapped = () => {
+    const wrappedView = (
+      <Animated.View {...wrapperProps}>
+        {overlay ? renderMask() : null}
+        {renderContent()}
+      </Animated.View>
+    )
+    return __mpx_mode__ === 'ios'
+      ? <GestureDetector gesture={screenGesture}>{wrappedView}</GestureDetector>
+      : wrappedView
+  }
+
+  // TODO 是否有必要支持refs? dataset?
+  return createElement(Portal, null, internalVisible ? renderWrapped() : null)
+})
+
+const styles = StyleSheet.create({
+  wrapper: extendObject(
+    {
+      justifyContent: 'flex-end',
+      alignItems: 'center'
+    } as const,
+    StyleSheet.absoluteFillObject
+  ),
+  overlay: extendObject(
+    {
+      backgroundColor: 'rgba(0,0,0,0.5)'
+    },
+    StyleSheet.absoluteFillObject
+  ),
+  container: {
+    position: 'absolute',
+    backgroundColor: 'white',
+    overflow: 'hidden'
+  }
+})
+
+const positionStyle: Record<Position, ViewStyle> = {
+  bottom: { bottom: 0, width: '100%', height: 'auto' },
+  top: { top: 0, width: '100%', height: 'auto' },
+  right: extendObject({}, StyleSheet.absoluteFillObject, { right: 0 }),
+  center: extendObject({}, StyleSheet.absoluteFillObject)
+}
+
+PageContainer.displayName = 'PageContainer'
+
+export default PageContainer

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
 
@@ -358,7 +360,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) {
@@ -381,8 +398,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(
@@ -393,7 +411,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)
@@ -408,8 +427,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(
@@ -418,7 +438,8 @@ const _ScrollView = forwardRef<HandlerRef<ScrollView & View, ScrollViewProps>, S
             scrollLeft,
             scrollTop,
             scrollHeight,
-            scrollWidth
+            scrollWidth,
+            layoutMeasurement
           },
           layoutRef
         }, props)
@@ -505,6 +526,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)
       }
     }
@@ -683,6 +714,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,

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

@@ -143,7 +143,8 @@ const SwiperWrapper = forwardRef<HandlerRef<View, SwiperProps>, SwiperProps>((pr
     style = {},
     autoplay = false,
     circular = false,
-    disableGesture = false
+    disableGesture = false,
+    bindchange
   } = props
   const easeingFunc = props['easing-function'] || 'default'
   const easeDuration = props.duration || 500
@@ -427,7 +428,7 @@ const SwiperWrapper = forwardRef<HandlerRef<View, SwiperProps>, SwiperProps>((pr
   function handleSwiperChange (current: number) {
     if (props.current !== currentIndex.value) {
       const eventData = getCustomEvent('change', {}, { detail: { current, source: 'touch' }, layoutRef: layoutRef })
-      props.bindchange && props.bindchange(eventData)
+      bindchange && bindchange(eventData)
     }
   }
 
@@ -469,7 +470,7 @@ const SwiperWrapper = forwardRef<HandlerRef<View, SwiperProps>, SwiperProps>((pr
   // 1. 用户在当前页切换选中项，动画；用户携带选中index打开到swiper页直接选中不走动画
   useAnimatedReaction(() => currentIndex.value, (newIndex: number, preIndex: number) => {
     // 这里必须传递函数名, 直接写()=> {}形式会报 访问了未sharedValue信息
-    if (newIndex !== preIndex && props.bindchange) {
+    if (newIndex !== preIndex && bindchange) {
       runOnJS(handleSwiperChange)(newIndex)
     }
   })

package/lib/template-compiler/compiler.js

@@ -38,7 +38,7 @@ const endTag = new RegExp(('^<\\/' + qnameCapture + '[^>]*>'))
 const doctype = /^<!DOCTYPE [^>]+>/i
 const comment = /^<!--/
 const conditionalComment = /^<!\[/
-const specialClassReg = /^mpx-((cover-)?view|button|navigator|picker-view|input|textarea)$/
+const specialClassReg = /^mpx-((cover-)?view|button|navigator|picker-view|input|textarea|page-container)$/
 let IS_REGEX_CAPTURING_BROKEN = false
 'x'.replace(/x(.)?/g, function (m, g) {
   IS_REGEX_CAPTURING_BROKEN = g === ''
@@ -1111,8 +1111,28 @@ function processStyleReact (el, options) {
     }])
   }
 
-  if (specialClassReg.test(el.tag)) {
-    const staticClassNames = ['hover', 'indicator', 'mask', 'placeholder']
+  // 原生组件支持 xx-class 与 xx-style（xx-class 将会被合并到 xx-style 中）
+  const match = el.tag.match(specialClassReg)
+  if (match) {
+    let staticClassNames
+    switch (el.tag) {
+      case 'mpx-view':
+      case 'mpx-cover-view':
+      case 'mpx-button':
+      case 'mpx-navigator':
+        staticClassNames = ['hover']
+        break
+      case 'mpx-page-container':
+        staticClassNames = ['custom', 'overlay']
+        break
+      case 'mpx-input':
+      case 'mpx-textarea':
+        staticClassNames = ['placeholder']
+        break
+      case 'mpx-picker-view':
+        staticClassNames = ['mask', 'indicator']
+        break
+    }
     staticClassNames.forEach((className) => {
       let staticClass = el.attrsMap[className + '-class'] || ''
       let staticStyle = getAndRemoveAttr(el, className + '-style').val || ''

package/lib/utils/dom-tag-config.js

@@ -78,7 +78,7 @@ const isBuildInWebTag = makeMap(
   'mpx-swiper,mpx-view,mpx-checkbox-group,mpx-movable-area,mpx-radio-group,' +
   'mpx-switch,mpx-web-view,mpx-checkbox,mpx-movable-view,mpx-radio,' +
   'mpx-tab-bar-container,mpx-form,mpx-navigator,mpx-rich-text,mpx-tab-bar,' +
-  'mpx-icon,mpx-picker-view-column,mpx-scroll-view,mpx-text'
+  'mpx-icon,mpx-picker-view-column,mpx-scroll-view,mpx-text,mpx-page-container'
 )
 
 /**

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mpxjs/webpack-plugin",
-  "version": "2.10.10",
+  "version": "2.10.11-beta.1",
   "description": "mpx compile core",
   "keywords": [
     "mpx"
@@ -100,5 +100,5 @@
   "engines": {
     "node": ">=14.14.0"
   },
-  "gitHead": "cee4b9ba7c2b455ebb864cbad7d2a8374b2d7308"
+  "gitHead": "2d37697869b9bdda3efab92dda8c910b68fd05c0"
 }