@mpxjs/webpack-plugin 2.10.17 → 2.10.18-beta.1

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

@@ -0,0 +1,439 @@
+import React, { forwardRef, useRef, useState, useEffect, useMemo, createElement, useImperativeHandle, useCallback, memo } from 'react'
+import { SectionList, RefreshControl, NativeSyntheticEvent, NativeScrollEvent } from 'react-native'
+import useInnerProps, { getCustomEvent } from './getInnerListeners'
+import { extendObject, useLayout, useTransformStyle } from './utils'
+interface ListItem {
+  isSectionHeader?: boolean;
+  _originalItemIndex?: number;
+  [key: string]: any;
+}
+
+interface Section {
+  headerData: ListItem | null;
+  data: ListItem[];
+  hasSectionHeader?: boolean;
+  _originalItemIndex?: number;
+}
+
+interface ItemHeightType {
+  value?: number;
+  getter?: (item: any, index: number) => number;
+}
+
+interface SectionListProps {
+  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;
+  listFooterData?: any;
+  useListFooter?: boolean;
+  'genericrecycle-item'?: string;
+  'genericsection-header'?: string;
+  'genericlist-header'?: string;
+  'genericlist-footer'?: 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;
+}
+
+interface ScrollPositionParams {
+  index: number;
+  animated?: boolean;
+  viewOffset?: number;
+  viewPosition?: number;
+}
+
+const getGeneric = (generichash: string, generickey: string) => {
+  if (!generichash || !generickey) return null
+  const GenericComponent = global.__mpxGenericsMap?.[generichash]?.[generickey]?.()
+  if (!GenericComponent) return null
+
+  return memo(forwardRef((props: any, ref: any) => {
+    return createElement(GenericComponent, extendObject({}, {
+      ref: ref
+    }, props))
+  }))
+}
+
+const _SectionList = forwardRef<any, SectionListProps>((props = {}, ref) => {
+  const {
+    enhanced = false,
+    bounces = true,
+    scrollEventThrottle = 0,
+    height,
+    width,
+    listData,
+    generichash,
+    style = {},
+    itemHeight = {},
+    sectionHeaderHeight = {},
+    listHeaderHeight = {},
+    listHeaderData = null,
+    useListHeader = false,
+    listFooterData = null,
+    useListFooter = false,
+    'genericrecycle-item': genericrecycleItem,
+    'genericsection-header': genericsectionHeader,
+    'genericlist-header': genericListHeader,
+    'genericlist-footer': genericListFooter,
+    '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<any>(null)
+
+  const indexMap = useRef<{ [key: string]: string | number }>({})
+
+  const reverseIndexMap = useRef<{ [key: string]: number }>({})
+
+  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: NativeSyntheticEvent<NativeScrollEvent>) => {
+    const { bindscroll } = props
+    bindscroll &&
+      bindscroll(
+        getCustomEvent('scroll', event.nativeEvent, { layoutRef }, props)
+      )
+  }
+
+  // 通过sectionIndex和rowIndex获取原始索引
+  const getOriginalIndex = (sectionIndex: number, rowIndex: number | 'header'): number => {
+    const key = `${sectionIndex}_${rowIndex}`
+    return reverseIndexMap.current[key] ?? -1 // 如果找不到，返回-1
+  }
+
+  const scrollToIndex = ({ index, animated, viewOffset = 0, viewPosition = 0 }: ScrollPositionParams) => {
+    if (scrollViewRef.current) {
+      // 通过索引映射表快速定位位置
+      const position = indexMap.current[index]
+      const [sectionIndex, itemIndex] = (position as string).split('_')
+      scrollViewRef.current.scrollToLocation?.({
+        itemIndex: itemIndex === 'header' ? 0 : Number(itemIndex) + 1,
+        sectionIndex: Number(sectionIndex) || 0,
+        animated,
+        viewOffset,
+        viewPosition
+      })
+    }
+  }
+
+  const getItemHeight = ({ sectionIndex, rowIndex }: { sectionIndex: number, rowIndex: number }) => {
+    if (!itemHeight) {
+      return 0
+    }
+    if ((itemHeight as ItemHeightType).getter) {
+      const item = convertedListData[sectionIndex].data[rowIndex]
+      // 使用getOriginalIndex获取原始索引
+      const originalIndex = getOriginalIndex(sectionIndex, rowIndex)
+      return (itemHeight as ItemHeightType).getter?.(item, originalIndex) || 0
+    } else {
+      return (itemHeight as ItemHeightType).value || 0
+    }
+  }
+
+  const getSectionHeaderHeight = ({ sectionIndex }: { sectionIndex: number }) => {
+    const item = convertedListData[sectionIndex]
+    const { hasSectionHeader } = item
+    // 使用getOriginalIndex获取原始索引
+    const originalIndex = getOriginalIndex(sectionIndex, 'header')
+    if (!hasSectionHeader) return 0
+    if ((sectionHeaderHeight as ItemHeightType).getter) {
+      return (sectionHeaderHeight as ItemHeightType).getter?.(item, originalIndex) || 0
+    } else {
+      return (sectionHeaderHeight as ItemHeightType).value || 0
+    }
+  }
+
+  const convertedListData = useMemo(() => {
+    const sections: Section[] = []
+    let currentSection: Section | null = null
+    // 清空之前的索引映射
+    indexMap.current = {}
+    // 清空反向索引映射
+    reverseIndexMap.current = {}
+
+    // 处理 listData 为空的情况
+    if (!listData || !listData.length) {
+      return sections
+    }
+
+    listData.forEach((item: ListItem, index: number) => {
+      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: Array<{ length: number, offset: number, index: number }> = []
+    let offset = 0
+
+    if (useListHeader) {
+      // 计算列表头部的高度
+      offset += listHeaderHeight.getter?.() || listHeaderHeight.value || 0
+    }
+
+    // 遍历所有 sections
+    convertedListData.forEach((section: Section, sectionIndex: number) => {
+      // 添加 section header 的位置信息
+      const headerHeight = getSectionHeaderHeight({ sectionIndex })
+      layouts.push({
+        length: headerHeight,
+        offset,
+        index: layouts.length
+      })
+      offset += headerHeight
+
+      // 添加该 section 中所有 items 的位置信息
+      section.data.forEach((item: ListItem, itemIndex: number) => {
+        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: any, index: number) => layouts[index]
+    }
+  }, [convertedListData, useListHeader, itemHeight.value, itemHeight.getter, sectionHeaderHeight.value, sectionHeaderHeight.getter, listHeaderHeight.value, listHeaderHeight.getter])
+
+  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 })
+
+  // 使用 ref 保存最新的数据，避免数据变化时组件销毁重建
+  const listHeaderDataRef = useRef(listHeaderData)
+  listHeaderDataRef.current = listHeaderData
+
+  const listFooterDataRef = useRef(listFooterData)
+  listFooterDataRef.current = listFooterData
+
+  // 使用 useMemo 获取 GenericComponent 并创建渲染函数，避免每次组件更新都重新创建函数引用导致不必要的重新渲染
+  const renderItem = useMemo(
+    () => {
+      const ItemComponent = getGeneric(generichash, genericrecycleItem)
+      if (!ItemComponent) return undefined
+      return ({ item }: { item: any }) => createElement(ItemComponent, { itemData: item })
+    },
+    [generichash, genericrecycleItem]
+  )
+
+  const renderSectionHeader = useMemo(
+    () => {
+      const SectionHeaderComponent = getGeneric(generichash, genericsectionHeader)
+      if (!SectionHeaderComponent) return undefined
+      return (sectionData: { section: Section }) => {
+        if (!sectionData.section.hasSectionHeader) return null
+        return createElement(SectionHeaderComponent, { itemData: sectionData.section.headerData })
+      }
+    },
+    [generichash, genericsectionHeader]
+  )
+
+  const ListHeaderComponent = useMemo(
+    () => {
+      if (!useListHeader) return null
+      const ListHeaderGenericComponent = getGeneric(generichash, genericListHeader)
+      if (!ListHeaderGenericComponent) return null
+      return () => createElement(ListHeaderGenericComponent, { listHeaderData: listHeaderDataRef.current })
+    },
+    [useListHeader, generichash, genericListHeader]
+  )
+
+  const ListFooterComponent = useMemo(
+    () => {
+      if (!useListFooter) return null
+      const ListFooterGenericComponent = getGeneric(generichash, genericListFooter)
+      if (!ListFooterGenericComponent) return null
+      return () => createElement(ListFooterGenericComponent, { listFooterData: listFooterDataRef.current })
+    },
+    [useListFooter, generichash, genericListFooter]
+  )
+
+  return createElement(
+    SectionList,
+    extendObject(
+      {
+        style: [{ height, width }, style, layoutStyle],
+        sections: convertedListData,
+        renderItem: renderItem,
+        getItemLayout: getItemLayout,
+        ListHeaderComponent: useListHeader ? ListHeaderComponent : null,
+        ListFooterComponent: useListFooter ? ListFooterComponent : null,
+        renderSectionHeader: renderSectionHeader,
+        refreshControl: refresherEnabled
+          ? React.createElement(RefreshControl, {
+            onRefresh: onRefresh,
+            refreshing: refreshing
+          })
+          : undefined
+      },
+      innerProps
+    )
+  )
+})
+
+_SectionList.displayName = 'MpxSectionList'
+
+export default _SectionList

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

@@ -33,9 +33,8 @@ const _StickyHeader = forwardRef<HandlerRef<View, StickyHeaderProps>, StickyHead
     'parent-height': parentHeight
   } = props
 
-  const scrollViewContext = useContext(ScrollViewContext)
+  const { scrollOffset, gestureRef: scrollViewRef } = useContext(ScrollViewContext)
   const stickyContext = useContext(StickyContext)
-  const { scrollOffset } = scrollViewContext
   const { registerStickyHeader, unregisterStickyHeader } = stickyContext
   const headerRef = useRef<View>(null)
   const isStickOnTopRef = useRef(false)
@@ -67,7 +66,6 @@ const _StickyHeader = forwardRef<HandlerRef<View, StickyHeaderProps>, StickyHead
 
   function updatePosition () {
     if (headerRef.current) {
-      const scrollViewRef = scrollViewContext.gestureRef
       if (scrollViewRef && scrollViewRef.current) {
         headerRef.current.measureLayout(
           scrollViewRef.current,
@@ -95,7 +93,7 @@ const _StickyHeader = forwardRef<HandlerRef<View, StickyHeaderProps>, StickyHead
   })
 
   useEffect(() => {
-    if (!bindstickontopchange) return
+    if (!bindstickontopchange || !scrollOffset) return
 
     const listener = scrollOffset.addListener((state: { value: number }) => {
       const currentScrollValue = state.value
@@ -115,29 +113,31 @@ const _StickyHeader = forwardRef<HandlerRef<View, StickyHeaderProps>, StickyHead
     return () => {
       scrollOffset.removeListener(listener)
     }
-  }, [])
+  }, [bindstickontopchange, scrollOffset])
 
   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'
-        })
-      )
+    if (scrollOffset) {
+      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 }]
+      return {
+        transform: [{ translateY: finalTranslateY }]
+      }
     }
   }, [scrollOffset, headerTopAnimated, offsetTop])