@mpxjs/webpack-plugin 2.10.17-beta.7 → 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/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;

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

@@ -0,0 +1,272 @@
+import React, { forwardRef, useRef, useState, useEffect, useMemo, createElement, useImperativeHandle } from 'react';
+import { SectionList, RefreshControl } from 'react-native';
+import useInnerProps, { getCustomEvent } from './getInnerListeners';
+import { extendObject, useLayout, useTransformStyle } from './utils';
+const getGeneric = (generichash, generickey) => {
+    if (!generichash || !generickey)
+        return null;
+    const GenericComponent = global.__mpxGenericsMap?.[generichash]?.[generickey]?.();
+    if (!GenericComponent)
+        return null;
+    return forwardRef((props, ref) => {
+        return createElement(GenericComponent, extendObject({}, {
+            ref: ref
+        }, props));
+    });
+};
+const getListHeaderComponent = (generichash, generickey, data) => {
+    if (!generichash || !generickey)
+        return undefined;
+    const ListHeaderComponent = getGeneric(generichash, generickey);
+    return ListHeaderComponent ? createElement(ListHeaderComponent, { listHeaderData: data }) : null;
+};
+const getSectionHeaderRenderer = (generichash, generickey) => {
+    if (!generichash || !generickey)
+        return undefined;
+    return (sectionData) => {
+        if (!sectionData.section.hasSectionHeader)
+            return null;
+        const SectionHeaderComponent = getGeneric(generichash, generickey);
+        return SectionHeaderComponent ? createElement(SectionHeaderComponent, { itemData: sectionData.section.headerData }) : null;
+    };
+};
+const getItemRenderer = (generichash, generickey) => {
+    if (!generichash || !generickey)
+        return undefined;
+    return ({ item }) => {
+        const ItemComponent = getGeneric(generichash, generickey);
+        return ItemComponent ? createElement(ItemComponent, { itemData: item }) : null;
+    };
+};
+const RecycleView = forwardRef((props = {}, ref) => {
+    const { enhanced = false, bounces = true, scrollEventThrottle = 0, height, width, listData, generichash, style = {}, itemHeight = {}, sectionHeaderHeight = {}, listHeaderHeight = {}, listHeaderData = null, useListHeader = false, 'genericrecycle-item': genericrecycleItem, 'genericsection-header': genericsectionHeader, 'genericlist-header': genericListHeader, 'enable-var': enableVar, 'external-var-context': externalVarContext, 'parent-font-size': parentFontSize, 'parent-width': parentWidth, 'parent-height': parentHeight, 'enable-sticky': enableSticky = false, 'enable-back-to-top': enableBackToTop = false, 'end-reached-threshold': onEndReachedThreshold = 0.1, 'refresher-enabled': refresherEnabled, 'show-scrollbar': showScrollbar = true, 'refresher-triggered': refresherTriggered } = props;
+    const [refreshing, setRefreshing] = useState(!!refresherTriggered);
+    const scrollViewRef = useRef(null);
+    const indexMap = useRef({});
+    const reverseIndexMap = useRef({});
+    const { hasSelfPercent, setWidth, setHeight } = useTransformStyle(style, { enableVar, externalVarContext, parentFontSize, parentWidth, parentHeight });
+    const { layoutRef, layoutStyle, layoutProps } = useLayout({ props, hasSelfPercent, setWidth, setHeight, nodeRef: scrollViewRef });
+    useEffect(() => {
+        if (refreshing !== refresherTriggered) {
+            setRefreshing(!!refresherTriggered);
+        }
+    }, [refresherTriggered]);
+    const onRefresh = () => {
+        const { bindrefresherrefresh } = props;
+        bindrefresherrefresh &&
+            bindrefresherrefresh(getCustomEvent('refresherrefresh', {}, { layoutRef }, props));
+    };
+    const onEndReached = () => {
+        const { bindscrolltolower } = props;
+        bindscrolltolower &&
+            bindscrolltolower(getCustomEvent('scrolltolower', {}, { layoutRef }, props));
+    };
+    const onScroll = (event) => {
+        const { bindscroll } = props;
+        bindscroll &&
+            bindscroll(getCustomEvent('scroll', event.nativeEvent, { layoutRef }, props));
+    };
+    // 通过sectionIndex和rowIndex获取原始索引
+    const getOriginalIndex = (sectionIndex, rowIndex) => {
+        const key = `${sectionIndex}_${rowIndex}`;
+        return reverseIndexMap.current[key] ?? -1; // 如果找不到，返回-1
+    };
+    const scrollToIndex = ({ index, animated, viewOffset = 0, viewPosition = 0 }) => {
+        if (scrollViewRef.current) {
+            // 通过索引映射表快速定位位置
+            const position = indexMap.current[index];
+            const [sectionIndex, itemIndex] = position.split('_');
+            scrollViewRef.current.scrollToLocation?.({
+                itemIndex: itemIndex === 'header' ? 0 : Number(itemIndex) + 1,
+                sectionIndex: Number(sectionIndex) || 0,
+                animated,
+                viewOffset,
+                viewPosition
+            });
+        }
+    };
+    const getItemHeight = ({ sectionIndex, rowIndex }) => {
+        if (!itemHeight) {
+            return 0;
+        }
+        if (itemHeight.getter) {
+            const item = convertedListData[sectionIndex].data[rowIndex];
+            // 使用getOriginalIndex获取原始索引
+            const originalIndex = getOriginalIndex(sectionIndex, rowIndex);
+            return itemHeight.getter?.(item, originalIndex) || 0;
+        }
+        else {
+            return itemHeight.value || 0;
+        }
+    };
+    const getSectionHeaderHeight = ({ sectionIndex }) => {
+        const item = convertedListData[sectionIndex];
+        const { hasSectionHeader } = item;
+        // 使用getOriginalIndex获取原始索引
+        const originalIndex = getOriginalIndex(sectionIndex, 'header');
+        if (!hasSectionHeader)
+            return 0;
+        if (sectionHeaderHeight.getter) {
+            return sectionHeaderHeight.getter?.(item, originalIndex) || 0;
+        }
+        else {
+            return sectionHeaderHeight.value || 0;
+        }
+    };
+    const convertedListData = useMemo(() => {
+        const sections = [];
+        let currentSection = null;
+        // 清空之前的索引映射
+        indexMap.current = {};
+        // 清空反向索引映射
+        reverseIndexMap.current = {};
+        listData.forEach((item, index) => {
+            if (item.isSectionHeader) {
+                // 如果已经存在一个 section，先把它添加到 sections 中
+                if (currentSection) {
+                    sections.push(currentSection);
+                }
+                // 创建新的 section
+                currentSection = {
+                    headerData: item,
+                    data: [],
+                    hasSectionHeader: true,
+                    _originalItemIndex: index
+                };
+                // 为 section header 添加索引映射
+                const sectionIndex = sections.length;
+                indexMap.current[index] = `${sectionIndex}_header`;
+                // 添加反向索引映射
+                reverseIndexMap.current[`${sectionIndex}_header`] = index;
+            }
+            else {
+                // 如果没有当前 section，创建一个默认的
+                if (!currentSection) {
+                    // 创建默认section (无header的section)
+                    currentSection = {
+                        headerData: null,
+                        data: [],
+                        hasSectionHeader: false,
+                        _originalItemIndex: -1
+                    };
+                }
+                // 将 item 添加到当前 section 的 data 中
+                const itemIndex = currentSection.data.length;
+                currentSection.data.push(extendObject({}, item, {
+                    _originalItemIndex: index
+                }));
+                let sectionIndex;
+                // 为 item 添加索引映射 - 存储格式为: "sectionIndex_itemIndex"
+                if (!currentSection.hasSectionHeader && sections.length === 0) {
+                    // 在默认section中(第一个且无header)
+                    sectionIndex = 0;
+                    indexMap.current[index] = `${sectionIndex}_${itemIndex}`;
+                }
+                else {
+                    // 在普通section中
+                    sectionIndex = sections.length;
+                    indexMap.current[index] = `${sectionIndex}_${itemIndex}`;
+                }
+                // 添加反向索引映射
+                reverseIndexMap.current[`${sectionIndex}_${itemIndex}`] = index;
+            }
+        });
+        // 添加最后一个 section
+        if (currentSection) {
+            sections.push(currentSection);
+        }
+        return sections;
+    }, [listData]);
+    const { getItemLayout } = useMemo(() => {
+        const layouts = [];
+        let offset = 0;
+        if (useListHeader) {
+            // 计算列表头部的高度
+            offset += listHeaderHeight.getter?.() || listHeaderHeight.value || 0;
+        }
+        // 遍历所有 sections
+        convertedListData.forEach((section, sectionIndex) => {
+            // 添加 section header 的位置信息
+            const headerHeight = getSectionHeaderHeight({ sectionIndex });
+            layouts.push({
+                length: headerHeight,
+                offset,
+                index: layouts.length
+            });
+            offset += headerHeight;
+            // 添加该 section 中所有 items 的位置信息
+            section.data.forEach((item, itemIndex) => {
+                const contenteight = getItemHeight({ sectionIndex, rowIndex: itemIndex });
+                layouts.push({
+                    length: contenteight,
+                    offset,
+                    index: layouts.length
+                });
+                offset += contenteight;
+            });
+            // 添加该 section 尾部位置信息
+            // 因为即使 sectionList 没传 renderSectionFooter，getItemLayout 中的 index 的计算也会包含尾部节点
+            layouts.push({
+                length: 0,
+                offset,
+                index: layouts.length
+            });
+        });
+        return {
+            itemLayouts: layouts,
+            getItemLayout: (data, index) => layouts[index]
+        };
+    }, [convertedListData, useListHeader]);
+    const scrollAdditionalProps = extendObject({
+        alwaysBounceVertical: false,
+        alwaysBounceHorizontal: false,
+        scrollEventThrottle: scrollEventThrottle,
+        scrollsToTop: enableBackToTop,
+        showsHorizontalScrollIndicator: showScrollbar,
+        onEndReachedThreshold,
+        ref: scrollViewRef,
+        bounces: false,
+        stickySectionHeadersEnabled: enableSticky,
+        onScroll: onScroll,
+        onEndReached: onEndReached
+    }, layoutProps);
+    if (enhanced) {
+        Object.assign(scrollAdditionalProps, {
+            bounces
+        });
+    }
+    if (refresherEnabled) {
+        Object.assign(scrollAdditionalProps, {
+            refreshing: refreshing
+        });
+    }
+    useImperativeHandle(ref, () => {
+        return {
+            ...props,
+            scrollToIndex
+        };
+    });
+    const innerProps = useInnerProps(extendObject({}, props, scrollAdditionalProps), [
+        'id',
+        'show-scrollbar',
+        'lower-threshold',
+        'refresher-triggered',
+        'refresher-enabled',
+        'bindrefresherrefresh'
+    ], { layoutRef });
+    return createElement(SectionList, extendObject({
+        style: [{ height, width }, style, layoutStyle],
+        sections: convertedListData,
+        renderItem: getItemRenderer(generichash, genericrecycleItem),
+        getItemLayout: getItemLayout,
+        ListHeaderComponent: useListHeader ? getListHeaderComponent(generichash, genericListHeader, listHeaderData) : null,
+        renderSectionHeader: getSectionHeaderRenderer(generichash, genericsectionHeader),
+        refreshControl: refresherEnabled
+            ? React.createElement(RefreshControl, {
+                onRefresh: onRefresh,
+                refreshing: refreshing
+            })
+            : undefined
+    }, innerProps));
+});
+export default RecycleView;