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

package/lib/runtime/components/ali/mpx-sticky-header.mpx

@@ -0,0 +1,212 @@
+<template>
+  <view class="mpx-sticky-header-container">
+    <view class="mpx-sticky-header" wx:ref="stickyHeader" wx:style="{{stickyHeaderStyle}}">
+      <slot></slot>
+    </view>
+    <view
+      class="mpx-sticky-header-placeholder"
+      id="{{stickyId}}"
+      wx:style="{{placeholderStyle}}"
+    ></view>
+  </view>
+</template>
+
+<script>
+  import mpx, { createComponent } from '@mpxjs/core'
+
+  createComponent({
+    properties: {
+      offsetTop: {
+        type: Number,
+        value: 0
+      },
+      scrollViewId: {
+        type: String,
+        value: ''
+      },
+      stickyId: {
+        type: String,
+        value: ''
+      },
+      padding: Array,
+      enablePolling: {
+        type: Boolean,
+        value: false
+      },
+      pollingDuration: {
+        type: Number,
+        value: 300
+      }
+    },
+    data: {
+      isStickOnTop: false,
+      scrollOffsetTop: 0,
+      headerHeight: 0,
+      stickyHeader: '',
+      headerTop: 0,
+      lastIntersectionRatio: -1,
+      pollingTimer: null
+    },
+    computed: {
+      paddingStyle() {
+        if (!this.padding || !Array.isArray(this.padding)) {
+          return ''
+        }
+        const [top = 0, right = 0, bottom = 0, left = 0] = this.padding
+        return `padding: ${top}px ${right}px ${bottom}px ${left}px;`
+      },
+      stickyHeaderStyle() {
+        const baseStyle = this.isStickOnTop
+          ? `position: fixed;top: ${this.scrollOffsetTop + this.offsetTop}px;`
+          : ''
+        return baseStyle + this.paddingStyle
+      },
+      placeholderStyle() {
+        const position = this.isStickOnTop ? 'relative' : 'absolute'
+        return `position: ${position};height: ${this.headerHeight}px;`
+      }
+    },
+    ready() {
+      if (!this.scrollViewId) {
+        console.error('[mpx runtime error]: scroll-view-id is necessary property in ali environment')
+      }
+      if (!this.stickyId) {
+        console.error('[mpx runtime error]: sticky-id is necessary property in ali environment')
+      }
+      this.initStickyHeader()
+        // 启动轮询
+      if (this.enablePolling) {
+        this.startPolling()
+      }
+    },
+    methods: {
+      initStickyHeader() {
+        this.createSelectorQuery()
+          .select('.mpx-sticky-header')
+          .boundingClientRect()
+          .exec((rect = []) => {
+            this.headerHeight = rect[0]?.height || 0
+          })
+
+        mpx
+          .createSelectorQuery()
+          .select(`#${this.scrollViewId}`)
+          .boundingClientRect()
+          .exec((res) => {
+            if (!res) return
+            this.scrollOffsetTop = res[0]?.top || 0
+            this.stickyHeader = mpx.createIntersectionObserver({
+              thresholds: [0.1, 0.9]
+            })
+            this.initObserver()
+          })
+      },
+      initObserver() {
+        this.stickyHeader.relativeTo(`#${this.scrollViewId}`).observe(`#${this.stickyId}`, (res) => {
+          const { intersectionRatio, intersectionRect, relativeRect, boundingClientRect } = res
+          if (intersectionRatio < this.lastIntersectionRatio) {
+            // boundingClientRect.top < relativeRect.top fixed，否则默认布局
+            this.handleStickyStateChange(boundingClientRect.top < relativeRect.top)
+          } else if (intersectionRatio > this.lastIntersectionRatio) {
+            this.handleStickyStateChange(false)
+          }
+          this.lastIntersectionRatio = intersectionRatio
+        })
+      },
+      refresh() {
+        // 并行执行两个独立的查询
+        Promise.all([
+          // 查询1：组件内部元素
+          new Promise((resolve) => {
+            this.createSelectorQuery()
+              .select('.mpx-sticky-header')
+              .boundingClientRect()
+              .select('.mpx-sticky-header-placeholder')
+              .boundingClientRect()
+              .exec((results) => {
+                resolve(results)
+              })
+          }),
+          // 查询2：页面级scrollView
+          new Promise((resolve) => {
+            mpx.createSelectorQuery()
+              .select(`#${this.scrollViewId}`)
+              .boundingClientRect()
+              .select(`#${this.scrollViewId}`)
+              .scrollOffset()
+              .exec((results) => {
+                resolve(results)
+              })
+          })
+        ]).then(([componentResults, scrollResults]) => {
+          const [stickyHeaderRect, placeholderRect] = componentResults
+          const [scrollViewRect, scrollOffsetData] = scrollResults
+          
+          if (!stickyHeaderRect || !placeholderRect || !scrollViewRect || !scrollOffsetData) return
+
+          this.scrollOffsetTop = scrollViewRect.top || 0
+          this.headerHeight = stickyHeaderRect.height
+
+          // 模拟 offsetTop 计算：sticky placeholder具体顶部距离 - scrollView顶部 + scrollView滚动位置
+          // 必须用 placeholder 到顶部距离，用 sticky 如果刚好差值为 0， 区分不出是本身就在顶部还是 fixed 在顶部
+          this.headerTop = placeholderRect.top - this.scrollOffsetTop + scrollOffsetData.scrollTop
+          
+          this.handleStickyStateChange(scrollOffsetData.scrollTop > this.headerTop)
+        })
+      },
+      handleStickyStateChange(shouldStick) {
+        // 如果状态没有变化，直接返回
+        if (shouldStick === this.isStickOnTop) {
+          return
+        }
+        // 更新状态
+        this.isStickOnTop = shouldStick
+        // 触发事件
+        this.triggerEvent('stickontopchange', {
+          isStickOnTop: shouldStick,
+          id: this.stickyId
+        })
+      },
+       // 启动轮询
+      startPolling() {
+        if (this.pollingTimer) {
+          clearInterval(this.pollingTimer)
+        }
+        this.pollingTimer = setInterval(() => {
+          this.refresh()
+        }, this.pollingDuration)
+      },
+      // 停止轮询
+      stopPolling() {
+        if (this.pollingTimer) {
+          clearInterval(this.pollingTimer)
+          this.pollingTimer = null
+        }
+      }
+    },
+    detached() {
+      // 清理观察器
+      if (this.stickyHeader) {
+        this.stickyHeader.disconnect()
+      }
+       // 清理轮询定时器
+      if (this.pollingTimer) {
+        clearInterval(this.pollingTimer)
+        this.pollingTimer = null
+      }
+    }
+  })
+</script>
+<style lang="stylus" scoped>
+  .mpx-sticky-header-container
+    position relative
+  .mpx-sticky-header-placeholder
+    position absolute
+    left 0
+    right 0
+    top 0
+    pointer-events none
+  .mpx-sticky-header
+    width 100%
+    box-sizing border-box
+</style>

package/lib/runtime/components/ali/mpx-sticky-section.mpx

@@ -0,0 +1,17 @@
+<template>
+  <view class="mpx-sticky-section">
+    <slot></slot>
+  </view>
+</template>
+
+<script>
+  import { createComponent } from '@mpxjs/core'
+
+  createComponent({
+    
+  })
+</script>
+<style lang="stylus" scoped>
+  .mpx-sticky-section
+    position relative
+</style>

package/lib/runtime/components/react/animationHooks/useTransitionHooks.ts

@@ -1,4 +1,4 @@
-import { hasOwn, dash2hump, error } from '@mpxjs/utils'
+import { hasOwn, dash2hump, error, warn } from '@mpxjs/utils'
 import { useMemo, useRef, useEffect } from 'react'
 import {
   Easing,
@@ -169,10 +169,11 @@ export default function useTransitionHooks<T, P> (props: AnimationHooksPropsType
     return parseTransitionStyle(originalStyle)
   }, [])
   // ** style prop sharedValue  interpolateOutput: SharedValue<InterpolateOutput>
-  const { shareValMap, animatedKeys, animatedKeysShareVal } = useMemo(() => {
+  const { shareValMap, animatedKeys, animatedStyleKeys } = useMemo(() => {
     // 记录需要执行动画的 propName
     const animatedKeys = [] as string[]
-    const animatedKeysShareVal = [] as (string|string[])[]
+    // 有动画样式的 style key(useAnimatedStyle使用)
+    const animatedStyleKeys = [] as (string|string[])[]
     const transforms = [] as string[]
     const shareValMap = Object.keys(transitionMap).reduce((valMap, property) => {
       // const { property } = transition || {}
@@ -189,20 +190,18 @@ export default function useTransitionHooks<T, P> (props: AnimationHooksPropsType
         // console.log(`shareValMap property=${property} defaultVal=${defaultVal}`)
         valMap[property] = makeMutable(defaultVal)
         animatedKeys.push(property)
-        animatedKeysShareVal.push(property)
+        animatedStyleKeys.push(property)
       }
       // console.log('shareValMap = ', valMap)
       return valMap
     }, {} as { [propName: keyof ExtendedViewStyle]: SharedValue<string|number> })
-    if (transforms.length) animatedKeysShareVal.push(transforms)
+    if (transforms.length) animatedStyleKeys.push(transforms)
     return {
       shareValMap,
       animatedKeys,
-      animatedKeysShareVal
+      animatedStyleKeys
     }
   }, [])
-  // 有动画样式的 style key(useAnimatedStyle使用)
-  const animatedStyleKeys = useSharedValue(animatedKeysShareVal)
   const runOnJSCallbackRef = useRef({})
   const runOnJSCallback = useRunOnJSCallback(runOnJSCallbackRef)
   // 根据 animation action 创建&驱动动画
@@ -228,32 +227,37 @@ export default function useTransitionHooks<T, P> (props: AnimationHooksPropsType
         toVal = `${toVal * 100}%`
       } else if (typeof toVal !== typeof shareVal) {
         // 动画起始值和终态值类型不一致报错提示一下
-        error(`[Mpx runtime error]: Value types of property ${key} must be consistent during the animation`)
+        warn(`[Mpx runtime error]: Value types of property ${key} must be consistent during the animation`)
       }
-      // console.log(`key=${key} oldVal=${shareValMap[key].value} newVal=${toVal}`)
-      const { delay = 0, duration, easing } = transitionMap[isTransformKey ? 'transform' : key]
-      // console.log('animationOptions=', { delay, duration, easing })
-      let callback
-      if (transitionend && (!isTransformKey || !transformTransitionendDone)) {
-        runOnJSCallbackRef.current = {
-          animationCallback: (duration: number, finished: boolean, current?: AnimatableValue) => {
-            transitionend(finished, current, duration)
+      if ((toVal === 'auto' && !isNaN(+shareVal)) || (shareVal === 'auto' && !isNaN(+toVal))) {
+        // 有 auto 直接赋值不做动画
+        shareValMap[key].value = toVal
+      } else {
+        // console.log(`key=${key} oldVal=${shareValMap[key].value} newVal=${toVal}`)
+        const { delay = 0, duration, easing } = transitionMap[isTransformKey ? 'transform' : key]
+        // console.log('animationOptions=', { delay, duration, easing })
+        let callback
+        if (transitionend && (!isTransformKey || !transformTransitionendDone)) {
+          runOnJSCallbackRef.current = {
+            animationCallback: (duration: number, finished: boolean, current?: AnimatableValue) => {
+              transitionend(finished, current, duration)
+            }
           }
-        }
-        callback = (finished?: boolean, current?: AnimatableValue) => {
-          'worklet'
-          // 动画结束后设置下一次transformOrigin
-          if (finished) {
-            runOnJS(runOnJSCallback)('animationCallback', duration, finished, current)
+          callback = (finished?: boolean, current?: AnimatableValue) => {
+            'worklet'
+            // 动画结束后设置下一次transformOrigin
+            if (finished) {
+              runOnJS(runOnJSCallback)('animationCallback', duration, finished, current)
+            }
           }
         }
+        const animation = getAnimation({ key, value: toVal! }, { delay, duration, easing }, callback)
+        // Todo transform 有多个属性时也仅执行一次 transitionend（对齐wx）
+        if (isTransformKey) {
+          transformTransitionendDone = true
+        }
+        shareValMap[key].value = animation
       }
-      const animation = getAnimation({ key, value: toVal! }, { delay, duration, easing }, callback)
-      // Todo transform 有多个属性时也仅执行一次 transitionend（对齐wx）
-      if (isTransformKey) {
-        transformTransitionendDone = true
-      }
-      shareValMap[key].value = animation
       // console.log(`useTransitionHooks, ${key}=`, animation)
     })
   }
@@ -278,7 +282,7 @@ export default function useTransitionHooks<T, P> (props: AnimationHooksPropsType
   // ** 生成动画样式
   return useAnimatedStyle(() => {
     // console.info(`useAnimatedStyle styles=`, originalStyle)
-    return animatedStyleKeys.value.reduce((styles, key) => {
+    return animatedStyleKeys.reduce((styles, key) => {
       if (Array.isArray(key)) {
         const transformStyle = getTransformObj(originalStyle.transform || [])
         key.forEach((transformKey) => {

package/lib/runtime/components/react/animationHooks/utils.ts

@@ -94,8 +94,9 @@ export const transformInitial: ExtendedViewStyle = {
 export const animationAPIInitialValue: ExtendedViewStyle = Object.assign({
   opacity: 1,
   backgroundColor: 'transparent',
-  width: 0,
-  height: 0,
+  // fixme 未设置 height 初始值定义了 transition-property height 时把动画高度值把原由子元素撑开的高度给覆盖的问题
+  width: 'auto',
+  height: 'auto',
   top: 0,
   right: 0,
   bottom: 0,

package/lib/runtime/components/react/dist/animationHooks/useTransitionHooks.js

@@ -1,6 +1,6 @@
-import { hasOwn, dash2hump, error } from '@mpxjs/utils';
+import { hasOwn, dash2hump, error, warn } from '@mpxjs/utils';
 import { useMemo, useRef, useEffect } from 'react';
-import { Easing, makeMutable, runOnJS, useSharedValue, useAnimatedStyle, cancelAnimation } from 'react-native-reanimated';
+import { Easing, makeMutable, runOnJS, useAnimatedStyle, cancelAnimation } from 'react-native-reanimated';
 import { easingKey, transitionSupportedProperty, transformInitial, cubicBezierExp, secondRegExp, percentExp, getTransformObj, getUnit, getInitialVal, getAnimation, isTransform } from './utils';
 import { parseValues, useRunOnJSCallback } from '../utils';
 const propName = {
@@ -141,10 +141,11 @@ export default function useTransitionHooks(props) {
         return parseTransitionStyle(originalStyle);
     }, []);
     // ** style prop sharedValue  interpolateOutput: SharedValue<InterpolateOutput>
-    const { shareValMap, animatedKeys, animatedKeysShareVal } = useMemo(() => {
+    const { shareValMap, animatedKeys, animatedStyleKeys } = useMemo(() => {
         // 记录需要执行动画的 propName
         const animatedKeys = [];
-        const animatedKeysShareVal = [];
+        // 有动画样式的 style key(useAnimatedStyle使用)
+        const animatedStyleKeys = [];
         const transforms = [];
         const shareValMap = Object.keys(transitionMap).reduce((valMap, property) => {
             // const { property } = transition || {}
@@ -162,21 +163,19 @@ export default function useTransitionHooks(props) {
                 // console.log(`shareValMap property=${property} defaultVal=${defaultVal}`)
                 valMap[property] = makeMutable(defaultVal);
                 animatedKeys.push(property);
-                animatedKeysShareVal.push(property);
+                animatedStyleKeys.push(property);
             }
             // console.log('shareValMap = ', valMap)
             return valMap;
         }, {});
         if (transforms.length)
-            animatedKeysShareVal.push(transforms);
+            animatedStyleKeys.push(transforms);
         return {
             shareValMap,
             animatedKeys,
-            animatedKeysShareVal
+            animatedStyleKeys
         };
     }, []);
-    // 有动画样式的 style key(useAnimatedStyle使用)
-    const animatedStyleKeys = useSharedValue(animatedKeysShareVal);
     const runOnJSCallbackRef = useRef({});
     const runOnJSCallback = useRunOnJSCallback(runOnJSCallbackRef);
     // 根据 animation action 创建&驱动动画
@@ -204,32 +203,38 @@ export default function useTransitionHooks(props) {
             }
             else if (typeof toVal !== typeof shareVal) {
                 // 动画起始值和终态值类型不一致报错提示一下
-                error(`[Mpx runtime error]: Value types of property ${key} must be consistent during the animation`);
+                warn(`[Mpx runtime error]: Value types of property ${key} must be consistent during the animation`);
             }
-            // console.log(`key=${key} oldVal=${shareValMap[key].value} newVal=${toVal}`)
-            const { delay = 0, duration, easing } = transitionMap[isTransformKey ? 'transform' : key];
-            // console.log('animationOptions=', { delay, duration, easing })
-            let callback;
-            if (transitionend && (!isTransformKey || !transformTransitionendDone)) {
-                runOnJSCallbackRef.current = {
-                    animationCallback: (duration, finished, current) => {
-                        transitionend(finished, current, duration);
-                    }
-                };
-                callback = (finished, current) => {
-                    'worklet';
-                    // 动画结束后设置下一次transformOrigin
-                    if (finished) {
-                        runOnJS(runOnJSCallback)('animationCallback', duration, finished, current);
-                    }
-                };
+            if ((toVal === 'auto' && !isNaN(+shareVal)) || (shareVal === 'auto' && !isNaN(+toVal))) {
+                // 有 auto 直接赋值不做动画
+                shareValMap[key].value = toVal;
             }
-            const animation = getAnimation({ key, value: toVal }, { delay, duration, easing }, callback);
-            // Todo transform 有多个属性时也仅执行一次 transitionend（对齐wx）
-            if (isTransformKey) {
-                transformTransitionendDone = true;
+            else {
+                // console.log(`key=${key} oldVal=${shareValMap[key].value} newVal=${toVal}`)
+                const { delay = 0, duration, easing } = transitionMap[isTransformKey ? 'transform' : key];
+                // console.log('animationOptions=', { delay, duration, easing })
+                let callback;
+                if (transitionend && (!isTransformKey || !transformTransitionendDone)) {
+                    runOnJSCallbackRef.current = {
+                        animationCallback: (duration, finished, current) => {
+                            transitionend(finished, current, duration);
+                        }
+                    };
+                    callback = (finished, current) => {
+                        'worklet';
+                        // 动画结束后设置下一次transformOrigin
+                        if (finished) {
+                            runOnJS(runOnJSCallback)('animationCallback', duration, finished, current);
+                        }
+                    };
+                }
+                const animation = getAnimation({ key, value: toVal }, { delay, duration, easing }, callback);
+                // Todo transform 有多个属性时也仅执行一次 transitionend（对齐wx）
+                if (isTransformKey) {
+                    transformTransitionendDone = true;
+                }
+                shareValMap[key].value = animation;
             }
-            shareValMap[key].value = animation;
             // console.log(`useTransitionHooks, ${key}=`, animation)
         });
     }
@@ -254,7 +259,7 @@ export default function useTransitionHooks(props) {
     // ** 生成动画样式
     return useAnimatedStyle(() => {
         // console.info(`useAnimatedStyle styles=`, originalStyle)
-        return animatedStyleKeys.value.reduce((styles, key) => {
+        return animatedStyleKeys.reduce((styles, key) => {
             if (Array.isArray(key)) {
                 const transformStyle = getTransformObj(originalStyle.transform || []);
                 key.forEach((transformKey) => {

package/lib/runtime/components/react/dist/animationHooks/utils.js

@@ -47,8 +47,9 @@ export const transformInitial = {
 export const animationAPIInitialValue = Object.assign({
     opacity: 1,
     backgroundColor: 'transparent',
-    width: 0,
-    height: 0,
+    // fixme 未设置 height 初始值定义了 transition-property height 时把动画高度值把原由子元素撑开的高度给覆盖的问题
+    width: 'auto',
+    height: 'auto',
     top: 0,
     right: 0,
     bottom: 0,

package/lib/runtime/components/react/dist/mpx-image.jsx

@@ -16,7 +16,7 @@ import { noop } from '@mpxjs/utils';
 import { SvgCssUri } from 'react-native-svg/css';
 import useInnerProps, { getCustomEvent } from './getInnerListeners';
 import useNodesRef from './useNodesRef';
-import { SVG_REGEXP, useLayout, useTransformStyle, renderImage, extendObject } from './utils';
+import { SVG_REGEXP, useLayout, useTransformStyle, renderImage, extendObject, isAndroid } from './utils';
 import Portal from './mpx-portal';
 const DEFAULT_IMAGE_WIDTH = 320;
 const DEFAULT_IMAGE_HEIGHT = 240;
@@ -104,7 +104,7 @@ const Image = forwardRef((props, ref) => {
             setLoaded(true);
         }
     };
-    const { hasPositionFixed, hasSelfPercent, normalStyle, setWidth, setHeight } = useTransformStyle(styleObj, { enableVar, externalVarContext, parentFontSize, parentWidth, parentHeight });
+    const { hasPositionFixed, hasSelfPercent, normalStyle, setWidth, setHeight } = useTransformStyle(styleObj, { enableVar, isTransformBorderRadiusPercent: isAndroid && !isSvg && !isLayoutMode, externalVarContext, parentFontSize, parentWidth, parentHeight });
     const { layoutRef, layoutStyle, layoutProps } = useLayout({
         props,
         hasSelfPercent,

package/lib/runtime/components/react/dist/mpx-recycle-view.d.ts

@@ -0,0 +1,45 @@
+import React from 'react';
+interface ListItem {
+    isSectionHeader?: boolean;
+    _originalItemIndex?: number;
+    [key: string]: any;
+}
+interface ItemHeightType {
+    value?: number;
+    getter?: (item: any, index: number) => number;
+}
+interface RecycleViewProps {
+    enhanced?: boolean;
+    bounces?: boolean;
+    scrollEventThrottle?: number;
+    height?: number | string;
+    width?: number | string;
+    listData?: ListItem[];
+    generichash?: string;
+    style?: Record<string, any>;
+    itemHeight?: ItemHeightType;
+    sectionHeaderHeight?: ItemHeightType;
+    listHeaderData?: any;
+    listHeaderHeight?: ItemHeightType;
+    useListHeader?: boolean;
+    'genericrecycle-item'?: string;
+    'genericsection-header'?: string;
+    'genericlist-header'?: string;
+    'enable-var'?: boolean;
+    'external-var-context'?: any;
+    'parent-font-size'?: number;
+    'parent-width'?: number;
+    'parent-height'?: number;
+    'enable-sticky'?: boolean;
+    'enable-back-to-top'?: boolean;
+    'end-reached-threshold'?: number;
+    'refresher-enabled'?: boolean;
+    'show-scrollbar'?: boolean;
+    'refresher-triggered'?: boolean;
+    bindrefresherrefresh?: (event: any) => void;
+    bindscrolltolower?: (event: any) => void;
+    bindscroll?: (event: any) => void;
+    [key: string]: any;
+}
+declare const RecycleView: React.ForwardRefExoticComponent<Omit<RecycleViewProps, "ref"> & React.RefAttributes<any>>;
+export default RecycleView;