@mpxjs/webpack-plugin 2.10.7 → 2.10.8-beta.3

package/lib/runtime/components/react/mpx-sticky-header.tsx

@@ -0,0 +1,181 @@
+import { useEffect, useRef, useContext, forwardRef, useMemo, createElement, ReactNode, useId } from 'react'
+import { Animated, StyleSheet, View, NativeSyntheticEvent, ViewStyle, LayoutChangeEvent, useAnimatedValue } from 'react-native'
+import { ScrollViewContext, StickyContext } from './context'
+import useNodesRef, { HandlerRef } from './useNodesRef'
+import { splitProps, splitStyle, useTransformStyle, wrapChildren, useLayout, extendObject } from './utils'
+import { error } from '@mpxjs/utils'
+import useInnerProps, { getCustomEvent } from './getInnerListeners'
+
+interface StickyHeaderProps {
+  children?: ReactNode;
+  style?: ViewStyle;
+  padding?: [number, number, number, number];
+  'offset-top'?: number;
+  'enable-var'?: boolean;
+  'external-var-context'?: Record<string, any>;
+  'parent-font-size'?: number;
+  'parent-width'?: number;
+  'parent-height'?: number;
+  bindstickontopchange?: (e: NativeSyntheticEvent<unknown>) => void;
+}
+
+const _StickyHeader = forwardRef<HandlerRef<View, StickyHeaderProps>, StickyHeaderProps>((stickyHeaderProps: StickyHeaderProps = {}, ref): JSX.Element => {
+  const { textProps, innerProps: props = {} } = splitProps(stickyHeaderProps)
+  const {
+    style,
+    bindstickontopchange,
+    padding = [0, 0, 0, 0],
+    'offset-top': offsetTop = 0,
+    'enable-var': enableVar,
+    'external-var-context': externalVarContext,
+    'parent-font-size': parentFontSize,
+    'parent-width': parentWidth,
+    'parent-height': parentHeight
+  } = props
+
+  const scrollViewContext = useContext(ScrollViewContext)
+  const stickyContext = useContext(StickyContext)
+  const { scrollOffset } = scrollViewContext
+  const { registerStickyHeader, unregisterStickyHeader } = stickyContext
+  const headerRef = useRef<View>(null)
+  const isStickOnTopRef = useRef(false)
+  const id = useId()
+
+  const {
+    normalStyle,
+    hasVarDec,
+    varContextRef,
+    hasSelfPercent,
+    setWidth,
+    setHeight
+  } = useTransformStyle(style, { enableVar, externalVarContext, parentFontSize, parentWidth, parentHeight })
+
+  const { layoutRef, layoutProps } = useLayout({ props, hasSelfPercent, setWidth, setHeight, nodeRef: headerRef, onLayout })
+
+  const { textStyle, innerStyle = {} } = splitStyle(normalStyle)
+
+  const headerTopAnimated = useAnimatedValue(0)
+  // harmony animatedValue 不支持通过 _value 访问
+  const headerTopRef = useRef(0)
+
+  useEffect(() => {
+    registerStickyHeader({ key: id, updatePosition })
+    return () => {
+      unregisterStickyHeader(id)
+    }
+  }, [])
+
+  function updatePosition () {
+    if (headerRef.current) {
+      const scrollViewRef = scrollViewContext.gestureRef
+      if (scrollViewRef && scrollViewRef.current) {
+        headerRef.current.measureLayout(
+          scrollViewRef.current,
+          (left: number, top: number) => {
+            Animated.timing(headerTopAnimated, {
+              toValue: top,
+              duration: 0,
+              useNativeDriver: true
+            }).start()
+            headerTopRef.current = top
+          }
+        )
+      } else {
+        error('StickyHeader measureLayout error: scrollViewRef is not a valid native component reference')
+      }
+    }
+  }
+
+  function onLayout (e: LayoutChangeEvent) {
+    updatePosition()
+  }
+
+  useNodesRef(props, ref, headerRef, {
+    style: normalStyle
+  })
+
+  useEffect(() => {
+    if (!bindstickontopchange) return
+
+    const listener = scrollOffset.addListener((state: { value: number }) => {
+      const currentScrollValue = state.value
+      const newIsStickOnTop = currentScrollValue > headerTopRef.current
+      if (newIsStickOnTop !== isStickOnTopRef.current) {
+        isStickOnTopRef.current = newIsStickOnTop
+        bindstickontopchange(
+          getCustomEvent('stickontopchange', {}, {
+            detail: {
+              isStickOnTop: newIsStickOnTop
+            },
+            layoutRef
+          }, props))
+      }
+    })
+
+    return () => {
+      scrollOffset.removeListener(listener)
+    }
+  }, [])
+
+  const animatedStyle = useMemo(() => {
+    const translateY = Animated.subtract(scrollOffset, headerTopAnimated).interpolate({
+      inputRange: [0, 1],
+      outputRange: [0, 1],
+      extrapolateLeft: 'clamp',
+      extrapolateRight: 'extend'
+    })
+
+    const finalTranslateY = offsetTop === 0
+      ? translateY
+      : Animated.add(
+        translateY,
+        Animated.subtract(scrollOffset, headerTopAnimated).interpolate({
+          inputRange: [0, 1],
+          outputRange: [0, offsetTop],
+          extrapolate: 'clamp'
+        })
+      )
+
+    return {
+      transform: [{ translateY: finalTranslateY }]
+    }
+  }, [scrollOffset, headerTopAnimated, offsetTop])
+
+  const innerProps = useInnerProps(extendObject({}, props, {
+    ref: headerRef,
+    style: extendObject({}, styles.content, innerStyle, animatedStyle, {
+      paddingTop: padding[0] || 0,
+      paddingRight: padding[1] || 0,
+      paddingBottom: padding[2] || 0,
+      paddingLeft: padding[3] || 0
+    })
+  }, layoutProps), [], { layoutRef })
+
+  return (
+    createElement(
+      Animated.View,
+      innerProps,
+      wrapChildren(
+        props,
+        {
+          hasVarDec,
+          varContext: varContextRef.current,
+          textStyle,
+          textProps
+        }
+      )
+    )
+  )
+})
+
+const styles = StyleSheet.create({
+  content: {
+    width: '100%',
+    zIndex: 10,
+    // harmony 需要手动设置 relative， zIndex 才生效
+    position: 'relative'
+  }
+})
+
+_StickyHeader.displayName = 'MpxStickyHeader'
+export default _StickyHeader

package/lib/runtime/components/react/mpx-sticky-section.tsx

@@ -0,0 +1,96 @@
+
+import { useRef, forwardRef, createElement, ReactNode, useCallback, useMemo } from 'react'
+import { View, ViewStyle } from 'react-native'
+import useNodesRef, { HandlerRef } from './useNodesRef'
+import { splitProps, splitStyle, useTransformStyle, wrapChildren, useLayout, extendObject } from './utils'
+import { StickyContext } from './context'
+import useInnerProps from './getInnerListeners'
+
+interface StickySectionProps {
+  children?: ReactNode;
+  style?: ViewStyle;
+  'offset-top'?: number;
+  'enable-var'?: boolean;
+  'external-var-context'?: Record<string, any>;
+  'parent-font-size'?: number;
+  'parent-width'?: number;
+  'parent-height'?: number;
+}
+
+const _StickySection = forwardRef<HandlerRef<View, StickySectionProps>, StickySectionProps>((stickySectionProps: StickySectionProps = {}, ref): JSX.Element => {
+  const { textProps, innerProps: props = {} } = splitProps(stickySectionProps)
+  const {
+    style,
+    'enable-var': enableVar,
+    'external-var-context': externalVarContext,
+    'parent-font-size': parentFontSize,
+    'parent-width': parentWidth,
+    'parent-height': parentHeight
+  } = props
+  const sectionRef = useRef<View>(null)
+
+  const {
+    normalStyle,
+    hasVarDec,
+    varContextRef,
+    hasSelfPercent,
+    setWidth,
+    setHeight
+  } = useTransformStyle(style, { enableVar, externalVarContext, parentFontSize, parentWidth, parentHeight })
+
+  const { layoutRef, layoutProps, layoutStyle } = useLayout({ props, hasSelfPercent, setWidth, setHeight, nodeRef: sectionRef, onLayout })
+
+  const { textStyle, innerStyle = {} } = splitStyle(normalStyle)
+
+  const stickyHeaders = useRef<Map<string, any>>(new Map())
+
+  const registerStickyHeader = useCallback((item: { id: string, updatePosition: Function }) => {
+    stickyHeaders.current.set(item.id, item)
+  }, [])
+
+  const unregisterStickyHeader = useCallback((id: string) => {
+    stickyHeaders.current.delete(id)
+  }, [])
+
+  const contextValue = useMemo(() => ({
+    registerStickyHeader,
+    unregisterStickyHeader
+  }), [])
+
+  useNodesRef(props, ref, sectionRef, {
+    style: normalStyle
+  })
+
+  function onLayout () {
+    stickyHeaders.current.forEach(item => {
+      item.updatePosition()
+    })
+  }
+
+  const innerProps = useInnerProps(extendObject({}, props, {
+    style: extendObject(innerStyle, layoutStyle),
+    ref: sectionRef
+  }, layoutProps), [], { layoutRef })
+
+  return (
+    createElement(
+      View,
+      innerProps,
+      createElement(
+        StickyContext.Provider,
+        { value: contextValue },
+        wrapChildren(
+          props,
+          {
+            hasVarDec,
+            varContext: varContextRef.current,
+            textStyle,
+            textProps
+          }
+        )
+      ))
+  )
+})
+
+_StickySection.displayName = 'MpxStickySection'
+export default _StickySection

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
@@ -428,6 +429,7 @@ const SwiperWrapper = forwardRef<HandlerRef<View, SwiperProps>, SwiperProps>((pr
     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 +471,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/runtime/components/react/nav.tsx

@@ -0,0 +1,172 @@
+/* eslint-disable space-before-function-paren */
+import { createElement, useState, useMemo, memo, useContext, useLayoutEffect } from 'react'
+import { useSafeAreaInsets } from 'react-native-safe-area-context'
+import { StatusBar, processColor, TouchableWithoutFeedback, Image, View, StyleSheet, Text } from 'react-native'
+import { useNavShared } from './useNavShared'
+
+function convertToHex(color?: string) {
+  try {
+    const intColor = processColor(color) as number | null | undefined
+    if (intColor === null || intColor === undefined) {
+      return null
+    }
+    // 将32位整数颜色值转换为RGBA
+    const r = (intColor >> 16) & 255
+    const g = (intColor >> 8) & 255
+    const b = intColor & 255
+    // 转换为十六进制
+    const hexR = r.toString(16).padStart(2, '0')
+    const hexG = g.toString(16).padStart(2, '0')
+    const hexB = b.toString(16).padStart(2, '0')
+    return `#${hexR}${hexG}${hexB}`
+  } catch (error) {
+    return null
+  }
+}
+
+const titleHeight = 44
+export function useInnerHeaderHeight(pageConfig: PageConfig) {
+  const safeArea = useSafeAreaInsets()
+  if (pageConfig.navigationStyle === 'custom') {
+    return 0
+  } else {
+    const safeAreaTop = safeArea?.top || 0
+    const headerHeight = safeAreaTop + titleHeight
+    return headerHeight
+  }
+}
+
+const styles = StyleSheet.create({
+  header: {
+    elevation: 3
+  },
+  headerContent: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    justifyContent: 'center'
+  },
+  backButton: {
+    position: 'absolute',
+    height: '100%',
+    width: 40,
+    left: 0,
+    top: 0,
+    alignItems: 'center',
+    justifyContent: 'center'
+  },
+  backButtonImage: {
+    width: 22,
+    height: 22
+  },
+  title: {
+    fontSize: 17,
+    fontWeight: 600,
+    width: '60%',
+    textAlign: 'center'
+  }
+})
+const NavColor = {
+  White: '#ffffff',
+  Black: '#000000'
+}
+// navigationBarTextStyle 只支持黑白 'white'/'black
+const validBarTextStyle = (textStyle?: string) => {
+  const textStyleColor = convertToHex(textStyle)
+  if (textStyle && textStyleColor && [NavColor.White, NavColor.Black].includes(textStyleColor)) {
+    return textStyleColor
+  } else {
+    return NavColor.White
+  }
+}
+
+export interface MpxNavProps {
+  pageConfig: PageConfig
+  navigation: any
+}
+
+export interface MpxNavFactorOptions {
+  Mpx: any
+}
+
+const BACK_ICON =
+  'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADwAAABICAYAAACqT5alAAAA2UlEQVR4nO3bMQrCUBRE0Yla6AYEN2nnBrTL+izcitW3MRDkEUWSvPzJvfCqgMwhZbAppWhNbbIHzB1g9wATERFRVyvpkj1irlpJ5X326D7WHh1hbdFD2CLpLmmftm7kfsEe09aNHFiBrT+wAlt/YAW2/sAKbP2BFdj6Ayuwy+ufz6XPL893krZ//O6iu2n4LT8kndLWTRTo4EC7BDo40C6BDg60S6CDA+0S6OBAuwQ6uNWiD2nrJmoIfU7cNWkR2hbb1UfbY7uuWhGWiIg+a/iHuHmA3QPs3gu4JW9Gan+OJAAAAABJRU5ErkJggg=='
+
+function createMpxNav(options: MpxNavFactorOptions) {
+  const { Mpx } = options
+  const innerNav = memo(({ pageConfig, navigation }: MpxNavProps) => {
+    const [innerPageConfig, setPageConfig] = useState<PageConfig>(pageConfig || {})
+    const [customNav] = useNavShared()
+    const safeAreaTop = useSafeAreaInsets()?.top || 0
+
+    navigation.setPageConfig = (config: PageConfig) => {
+      setPageConfig(Object.assign({}, innerPageConfig, config))
+    }
+    const isCustom = innerPageConfig.navigationStyle === 'custom'
+    const navigationBarTextStyle = useMemo(() => validBarTextStyle(innerPageConfig.navigationBarTextStyle), [innerPageConfig.navigationBarTextStyle])
+    // 状态栏的颜色
+    const statusBarElement = (
+      <StatusBar
+        translucent
+        backgroundColor='transparent'
+        barStyle={navigationBarTextStyle === NavColor.White ? 'light-content' : 'dark-content'}></StatusBar>
+    )
+
+    if (isCustom)
+      return (
+        <>
+          {statusBarElement}
+          {customNav}
+        </>
+      )
+    // 假设是栈导航，获取栈的长度
+    const stackLength = navigation.getState()?.routes?.length
+    const onStackTopBack = Mpx.config?.rnConfig?.onStackTopBack
+    const isHandleStackTopBack = typeof onStackTopBack === 'function'
+
+    // 回退按钮与图标
+    // prettier-ignore
+    const backElement = stackLength > 1 || isHandleStackTopBack
+      ? (
+        <TouchableWithoutFeedback
+          onPress={() => {
+            if (stackLength <= 1 && isHandleStackTopBack) {
+              onStackTopBack()
+              return
+            }
+            navigation.goBack()
+          }}>
+          <View style={[styles.backButton]}>
+            <Image style={[styles.backButtonImage, { tintColor: navigationBarTextStyle }]} source={{ uri: BACK_ICON }}></Image>
+          </View>
+        </TouchableWithoutFeedback>
+        )
+      : null
+
+    return (
+      <View
+        style={[
+          styles.header,
+          {
+            paddingTop: safeAreaTop,
+            backgroundColor: innerPageConfig.navigationBarBackgroundColor || '#000000'
+          }
+        ]}>
+        {statusBarElement}
+        {/* TODO: 确定 height 的有效性 */}
+        {/* eslint-disable-next-line @typescript-eslint/ban-ts-comment */}
+        {/* @ts-expect-error */}
+        <View style={styles.headerContent} height={titleHeight}>
+          {backElement}
+          <Text style={[styles.title, { color: navigationBarTextStyle }]} numberOfLines={1}>
+            {innerPageConfig.navigationBarTitleText?.trim() || ''}
+          </Text>
+        </View>
+      </View>
+    )
+  })
+
+  innerNav.displayName = 'MpxNav'
+  return innerNav
+}
+
+export default createMpxNav

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

@@ -18,3 +18,22 @@ export type ExtendedFunctionComponent = FunctionComponent & {
 }
 
 export type AnyFunc = (...args: ReadonlyArray<any>) => any
+
+declare global {
+  interface PageConfig {
+    /**
+     * 是否自定义导航栏
+     */
+    navigationStyle?: 'custom'
+    /**
+     * 标题栏样式
+     */
+    navigationBarTextStyle?: 'white' | 'black' | '#ffffff' | '#000000'
+    /**
+     * 页面标题
+     */
+    navigationBarTitleText?: string
+
+    [key: string]: any
+  }
+}

package/lib/runtime/components/react/useNavShared.ts

@@ -0,0 +1,8 @@
+import { useContext } from 'react'
+import { NavSharedContext } from './context'
+
+export function useNavShared () {
+  const navSharedValue = useContext(NavSharedContext)
+
+  return [navSharedValue.customNav, navSharedValue.setCustomNav] as const
+}

package/lib/runtime/components/web/mpx-nav-container.vue

@@ -0,0 +1,13 @@
+<script>
+  export default {
+    name: 'mpx-view',
+    data() {
+      return {}
+    },
+    props: {},
+    render() {
+      return this.$slots.default
+    },
+    methods: {}
+  }
+</script>

package/lib/runtime/components/web/mpx-scroll-view.vue

@@ -1,4 +1,5 @@
 <script>
+  import { computed } from 'vue'
   import getInnerListeners, { getCustomEvent } from './getInnerListeners'
   import { processSize } from '../../utils'
   import BScroll from '@better-scroll/core'
@@ -44,6 +45,7 @@
       enhanced: Boolean,
       refresherEnabled: Boolean,
       refresherTriggered: Boolean,
+      enableSticky: Boolean,
       refresherThreshold: {
         type: Number,
         default: 45
@@ -57,6 +59,12 @@
         default: ''
       }
     },
+    provide () {
+      return {
+        scrollOffset: computed(() => -this.lastY || 0),
+        refreshVersion: computed(() => this.refreshVersion || 0)
+      }
+    },
     data () {
       return {
         isLoading: false,
@@ -68,7 +76,8 @@
         lastContentWidth: 0,
         lastContentHeight: 0,
         lastWrapperWidth: 0,
-        lastWrapperHeight: 0
+        lastWrapperHeight: 0,
+        refreshVersion: 0
       }
     },
     computed: {
@@ -222,6 +231,9 @@
             stop: 56
           }
         }
+        if(this.enableSticky) {
+          originBsOptions.useTransition = false
+        }
         const bsOptions = Object.assign({}, originBsOptions, this.scrollOptions, { observeDOM: false })
         this.bs = new BScroll(this.$refs.wrapper, bsOptions)
         this.lastX = -this.currentX
@@ -251,7 +263,7 @@
           }
           this.lastX = x
           this.lastY = y
-        }, 30, {
+        }, this.enableSticky ? 0 : 30, {
           leading: true,
           trailing: true
         }))
@@ -392,6 +404,7 @@
           this.lastContentHeight = scrollContentHeight
           this.lastWrapperWidth = scrollWrapperWidth
           this.lastWrapperHeight = scrollWrapperHeight
+          this.refreshVersion++
           if (this.bs) this.bs.refresh()
         }
       },
@@ -458,7 +471,8 @@
       }
 
       const innerWrapper = createElement('div', {
-        ref: 'innerWrapper'
+        ref: 'innerWrapper',
+        class: 'mpx-inner-wrapper'
       }, this.$slots.default)
 
       const pullDownContent = this.refresherDefaultStyle !== 'none' ? createElement('div', {
@@ -568,4 +582,4 @@
               background: rgba(255, 255, 255, .7)
             100%
               background: rgba(255, 255, 255, .3)
-</style>
+</style>

package/lib/runtime/components/web/mpx-sticky-header.vue

@@ -0,0 +1,99 @@
+<script>
+import { warn } from '@mpxjs/utils'
+import { getCustomEvent } from './getInnerListeners'
+
+  export default {
+    name: 'mpx-sticky-header',
+    inject: ['scrollOffset', 'refreshVersion'],
+    props: {
+      offsetTop: {
+        type: Number,
+        default: 0
+      },
+      padding: Array
+    },
+    data() {
+      return {
+        headerTop: 0,
+        isStickOnTop: false
+      }
+    },
+    watch: {
+      scrollOffset: {
+        handler(newScrollOffset) {
+          const newIsStickOnTop = newScrollOffset > this.headerTop
+          if (newIsStickOnTop !== this.isStickOnTop) {
+            this.isStickOnTop = newIsStickOnTop
+            this.$emit('stickontopchange', getCustomEvent('stickontopchange', {
+              isStickOnTop: newIsStickOnTop
+            }, this))
+          }
+
+          this.setTransformStyle()
+        },
+        immediate: true
+      },
+      refreshVersion: {
+        handler() {
+          this.setHeaderTop()
+          this.setTransformStyle()
+        },
+      }
+    },
+    mounted() {
+      this.setPaddingStyle()
+      this.setHeaderTop()
+    },
+    methods: {
+      setHeaderTop () {
+        const parentElement = this.$el.parentElement
+          if (!parentElement) return
+          
+          const parentClass = parentElement.className || ''
+          const isStickySection = /mpx-sticky-section/.test(parentClass)
+          const isScrollViewWrapper = /mpx-inner-wrapper/.test(parentClass)
+          
+          if (!isStickySection && !isScrollViewWrapper) {
+            warn('sticky-header only supports being a direct child of a scroll-view or sticky-section component.')
+            return
+          }
+          this.headerTop = isStickySection 
+            ? this.$el.offsetTop + parentElement.offsetTop
+            : this.$el.offsetTop
+      },
+      setPaddingStyle() {
+        const stickyHeader = this.$refs.stickyHeader
+        if (!stickyHeader) return
+        
+        if (this.padding && Array.isArray(this.padding)) {
+          const [top = 0, right = 0, bottom = 0, left = 0] = this.padding
+          stickyHeader.style.padding = `${top}px ${right}px ${bottom}px ${left}px`
+        }
+      },
+      setTransformStyle () {
+        const stickyHeader = this.$refs.stickyHeader
+        if (!stickyHeader) return
+        
+        // 设置 transform
+        if (this.scrollOffset > this.headerTop) {
+          stickyHeader.style.transform = `translateY(${this.scrollOffset - this.headerTop + this.offsetTop}px)`
+        } else {
+          stickyHeader.style.transform = 'none'
+        }
+      }
+    },
+    render(h) {
+      const style = {
+        width: '100%',
+        boxSizing: 'border-box',
+        position: 'relative',
+        zIndex: 10
+      }
+
+      return h('div', {
+        style,
+        ref: 'stickyHeader'
+      }, this.$slots.default)
+    }
+  }
+</script>