@mpxjs/webpack-plugin 2.10.21 → 2.10.24-beta.1

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

@@ -0,0 +1,734 @@
+import { forwardRef, useRef, useMemo, createElement, useImperativeHandle, useEffect } from 'react'
+import type { ComponentType } from 'react'
+import { SectionList, RefreshControl, NativeSyntheticEvent, NativeScrollEvent } from 'react-native'
+import type { SectionListData, SectionListProps as RNSectionListProps } from 'react-native'
+import { Gesture, GestureDetector } from 'react-native-gesture-handler'
+import { hasOwn, error } from '@mpxjs/utils'
+import useInnerProps, { getCustomEvent } from './getInnerListeners'
+import { extendObject, useLayout, useTransformStyle, GestureHandler, flatGesture } from './utils'
+interface ListItem {
+  isSectionHeader?: boolean;
+  isSectionFooter?: boolean;
+  [key: string]: any;
+}
+
+interface SectionExtra {
+  headerData: ListItem | null;
+  footerData: ListItem | null;
+  hasSectionHeader?: boolean;
+  hasSectionFooter?: boolean;
+}
+
+interface Section extends SectionExtra {
+  data: ListItem[];
+}
+
+type RNSection = SectionListData<ListItem, SectionExtra>
+
+const TypedSectionList = SectionList as unknown as ComponentType<RNSectionListProps<ListItem, SectionExtra>>
+
+interface ItemHeightType {
+  value?: number;
+  getter?: (item: any, index: number) => number;
+}
+
+interface ItemLayoutInfo {
+  length: number;
+  offset: number;
+  index: number;
+}
+
+interface ItemExposureLayout {
+  offset: number;
+  length: number;
+}
+
+interface ItemExposureDetail {
+  index: number;
+  itemData: ListItem | null;
+  layout: ItemExposureLayout;
+  threshold: number;
+}
+
+interface ItemExposureViewToken {
+  item: Section | ListItem;
+  key: string;
+  index: number | null;
+  isViewable: boolean;
+  section?: any;
+}
+
+interface ItemExposureViewabilityConfig {
+  itemVisiblePercentThreshold: number;
+}
+
+interface ItemExposureViewabilityPair {
+  viewabilityConfig: ItemExposureViewabilityConfig;
+  onViewableItemsChanged: (info: {
+    viewableItems: ItemExposureViewToken[];
+    changed: ItemExposureViewToken[];
+  }) => void;
+}
+
+interface ItemExposureInfo {
+  index: number;
+  itemData: ListItem | null;
+  layout: ItemExposureLayout;
+}
+
+type ItemExposureType = 'header' | 'footer' | 'item'
+
+interface ItemExposureIndexInfo {
+  index: number;
+  type: ItemExposureType;
+}
+
+interface MpxSectionListProps {
+  enhanced?: boolean;
+  bounces?: boolean;
+  height?: number | string;
+  width?: number | string;
+  generichash?: string;
+  style?: Record<string, any>;
+  'scroll-event-throttle'?: number;
+  'list-data'?: ListItem[];
+  'item-height'?: ItemHeightType;
+  'section-header-height'?: ItemHeightType;
+  'section-footer-height'?: ItemHeightType;
+  'list-header-data'?: any;
+  'list-header-height'?: number;
+  'use-list-header'?: boolean;
+  'list-footer-data'?: any;
+  'use-list-footer'?: boolean;
+  'genericrecycle-item'?: string;
+  'genericsection-header'?: string;
+  'genericsection-footer'?: 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;
+  'enable-item-exposure'?: boolean;
+  'item-exposure-threshold'?: number;
+  'wait-for'?: Array<GestureHandler>;
+  'simultaneous-handlers'?: Array<GestureHandler>;
+  bindrefresherrefresh?: (event: any) => void;
+  bindscrolltolower?: (event: any) => void;
+  bindscroll?: (event: any) => void;
+  binditemexposure?: (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
+  return global.__mpxGenericsMap?.[generichash]?.[generickey]?.() || null
+}
+
+const getExposurePercentThreshold = (threshold = 0) => {
+  return Math.max(0, Math.min(100, threshold))
+}
+
+const _SectionList = forwardRef<any, MpxSectionListProps>((props = {}, ref) => {
+  const {
+    enhanced = false,
+    bounces = true,
+    height,
+    width,
+    generichash,
+    style = {},
+    'list-data': listData,
+    'scroll-event-throttle': scrollEventThrottle = 0,
+    'item-height': itemHeight = {},
+    'section-header-height': sectionHeaderHeight = {},
+    'section-footer-height': sectionFooterHeight = {},
+    'list-header-height': listHeaderHeight = 0,
+    'list-header-data': listHeaderData = null,
+    'use-list-header': useListHeader = false,
+    'list-footer-data': listFooterData = null,
+    'use-list-footer': useListFooter = false,
+    'genericrecycle-item': genericrecycleItem,
+    'genericsection-header': genericsectionHeader,
+    'genericsection-footer': genericsectionFooter,
+    '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,
+    'enable-item-exposure': enableItemExposure = false,
+    'item-exposure-threshold': itemExposureThreshold = 0,
+    'simultaneous-handlers': originSimultaneousHandlers,
+    'wait-for': waitFor,
+    binditemexposure
+  } = props
+
+  const refreshing = !!refresherTriggered
+
+  const scrollViewRef = useRef<any>(null)
+  const sectionListGestureRef = useRef<any>()
+
+  const indexMap = useRef<{ [key: string]: string }>({})
+
+  const reverseIndexMap = useRef<{ [key: string]: number }>({})
+  const exposureIndexMap = useRef<{ [key: number]: ItemExposureIndexInfo }>({})
+  const itemLayoutsRef = useRef<ItemLayoutInfo[]>([])
+  const itemExposureState = useRef<{ [key: string]: boolean }>({})
+  const enableStickyRef = useRef(enableSticky)
+  const bindItemExposureRef = useRef<typeof binditemexposure>()
+  const propsRef = useRef(props)
+  const initialEnableItemExposureRef = useRef(enableItemExposure)
+  const itemExposureViewabilityConfig = useRef<ItemExposureViewabilityConfig>()
+  if (!itemExposureViewabilityConfig.current) {
+    itemExposureViewabilityConfig.current = {
+      itemVisiblePercentThreshold: getExposurePercentThreshold(itemExposureThreshold)
+    }
+  }
+  const itemExposureViewabilityConfigValue = itemExposureViewabilityConfig.current as ItemExposureViewabilityConfig
+
+  const {
+    hasSelfPercent,
+    setWidth,
+    setHeight
+  } = useTransformStyle(style, { enableVar, externalVarContext, parentFontSize, parentWidth, parentHeight })
+
+  const { layoutRef, layoutStyle, layoutProps } = useLayout({ props, hasSelfPercent, setWidth, setHeight, nodeRef: scrollViewRef })
+
+  if (initialEnableItemExposureRef.current !== enableItemExposure) {
+    error('[Mpx runtime error]: [enable-item-exposure] cannot be toggled at runtime. Set its value once at component initialization.')
+  }
+
+  enableStickyRef.current = enableSticky
+  bindItemExposureRef.current = binditemexposure
+  propsRef.current = props
+
+  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)
+      )
+  }
+
+  const itemExposureViewabilityPairs = useRef<ItemExposureViewabilityPair[]>()
+  if (!itemExposureViewabilityPairs.current) {
+    itemExposureViewabilityPairs.current = [
+      {
+        viewabilityConfig: itemExposureViewabilityConfigValue,
+        onViewableItemsChanged: ({ changed }) => {
+          const bindItemExposure = bindItemExposureRef.current
+          if (!bindItemExposure) return
+
+          const exposedItems: ItemExposureDetail[] = []
+          changed.forEach((viewToken) => {
+            const exposureInfo = getItemExposureInfo(viewToken)
+            if (!exposureInfo) return
+
+            const { index, itemData, layout } = exposureInfo
+            const key = `${index}`
+
+            if (!viewToken.isViewable) {
+              delete itemExposureState.current[key]
+              return
+            }
+
+            if (!itemExposureState.current[key]) {
+              itemExposureState.current[key] = true
+              exposedItems.push({
+                index,
+                itemData,
+                layout,
+                threshold: itemExposureViewabilityConfigValue.itemVisiblePercentThreshold
+              })
+            }
+          })
+
+          if (exposedItems.length) {
+            bindItemExposure(
+              getCustomEvent('itemexposure', {}, {
+                detail: {
+                  items: exposedItems,
+                  time: Date.now()
+                },
+                layoutRef
+              }, propsRef.current)
+            )
+          }
+        }
+      }
+    ]
+  }
+
+  // 通过sectionIndex和rowIndex获取原始索引
+  const getOriginalIndex = (sectionIndex: number, rowIndex: number | 'header' | 'footer'): number => {
+    const key = `${sectionIndex}_${rowIndex}`
+    return reverseIndexMap.current[key] ?? -1 // 如果找不到，返回-1
+  }
+
+  const getItemExposureInfo = (viewToken: ItemExposureViewToken): ItemExposureInfo | null => {
+    const item = viewToken.item
+    if (!item) return null
+
+    const viewIndex = viewToken.index
+    if (viewIndex == null) return null
+    const indexInfo = exposureIndexMap.current[viewIndex]
+    if (!indexInfo) return null
+    if (indexInfo.type === 'header' && enableStickyRef.current) return null
+    const layoutInfo = itemLayoutsRef.current[viewIndex]
+    const layout = {
+      offset: layoutInfo ? layoutInfo.offset : 0,
+      length: layoutInfo ? layoutInfo.length : 0
+    }
+
+    if (indexInfo.type === 'header') {
+      const section = item as Section
+      return {
+        index: indexInfo.index,
+        itemData: section.headerData || null,
+        layout
+      }
+    }
+
+    if (indexInfo.type === 'footer') {
+      const section = item as Section
+      return {
+        index: indexInfo.index,
+        itemData: section.footerData || null,
+        layout
+      }
+    }
+
+    return {
+      index: indexInfo.index,
+      itemData: item as ListItem,
+      layout
+    }
+  }
+
+  const scrollToIndex = ({ index, animated, viewOffset = 0, viewPosition = 0 }: ScrollPositionParams) => {
+    if (!scrollViewRef.current) return
+    // 通过索引映射表快速定位位置
+    const position = indexMap.current[index]
+    if (!position) return
+    const [sectionIndex, itemIndex] = position.split('_')
+    const targetSectionIndex = Number(sectionIndex) || 0
+    const targetItemIndex = itemIndex === 'header'
+      ? 0
+      : itemIndex === 'footer'
+        ? convertedListData[targetSectionIndex].data.length + 1
+        : Number(itemIndex) + 1
+    scrollViewRef.current.scrollToLocation?.({
+      itemIndex: targetItemIndex,
+      sectionIndex: targetSectionIndex,
+      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]
+      return (itemHeight as ItemHeightType).getter?.(item, getOriginalIndex(sectionIndex, rowIndex)) || 0
+    } else {
+      return (itemHeight as ItemHeightType).value || 0
+    }
+  }
+
+  const getSectionExtraHeight = ({ sectionIndex, type }: { sectionIndex: number, type: 'header' | 'footer' }) => {
+    const item = convertedListData[sectionIndex]
+    const isHeader = type === 'header'
+    if (!(isHeader ? item.hasSectionHeader : item.hasSectionFooter)) return 0
+    const sectionExtraHeight = (isHeader ? sectionHeaderHeight : sectionFooterHeight) as ItemHeightType
+    if (sectionExtraHeight.getter) {
+      const sectionExtraData = isHeader ? item.headerData : item.footerData
+      return sectionExtraHeight.getter?.(sectionExtraData, getOriginalIndex(sectionIndex, type)) || 0
+    }
+    return sectionExtraHeight.value || 0
+  }
+
+  const convertedListData = useMemo(() => {
+    const sections: Section[] = []
+    let currentSection: Section | null = null
+    // 清空之前的索引映射
+    indexMap.current = {}
+    // 清空反向索引映射
+    reverseIndexMap.current = {}
+    exposureIndexMap.current = {}
+
+    // 处理 listData 为空的情况
+    if (!listData || !listData.length) {
+      return sections
+    }
+
+    let exposureIndex = 0
+    // 需与 RN SectionList 和 getItemLayout 的扁平顺序保持一致：每个 section 都是 [header, ...items, footer]
+    const createSection = (headerInfo?: { data: ListItem, index: number }): Section => {
+      const sectionIndex = sections.length
+      const section = {
+        headerData: headerInfo?.data || null,
+        footerData: null,
+        data: [],
+        hasSectionHeader: !!headerInfo,
+        hasSectionFooter: false
+      }
+
+      if (headerInfo) {
+        const { index } = headerInfo
+        indexMap.current[index] = `${sectionIndex}_header`
+        reverseIndexMap.current[`${sectionIndex}_header`] = index
+        exposureIndexMap.current[exposureIndex] = {
+          index,
+          type: 'header'
+        }
+      }
+      exposureIndex++
+
+      return section
+    }
+
+    const closeSection = () => {
+      const section = currentSection
+      if (!section) return
+
+      if (section.hasSectionFooter) {
+        const sectionIndex = sections.length
+        const index = getOriginalIndex(sectionIndex, 'footer')
+        if (index > -1) {
+          exposureIndexMap.current[exposureIndex] = {
+            index,
+            type: 'footer'
+          }
+        }
+      }
+      // RN SectionList 即使没有真实 footer，也会为每个 section 保留 footer slot
+      exposureIndex++
+
+      sections.push(section)
+      currentSection = null
+    }
+
+    listData.forEach((item: ListItem, index: number) => {
+      if (item.isSectionHeader) {
+        // 如果已经存在一个 section，先把它添加到 sections 中
+        if (currentSection) {
+          closeSection()
+        }
+        currentSection = createSection({ data: item, index })
+      } else if (item.isSectionFooter) {
+        // 如果没有当前 section，创建一个默认的
+        if (!currentSection) {
+          // 创建默认section (无header的section)
+          currentSection = createSection()
+        }
+        const sectionIndex = sections.length
+        currentSection.footerData = item
+        currentSection.hasSectionFooter = true
+        indexMap.current[index] = `${sectionIndex}_footer`
+        // 添加反向索引映射
+        reverseIndexMap.current[`${sectionIndex}_footer`] = index
+        closeSection()
+      } else {
+        // 如果没有当前 section，创建一个默认的
+        if (!currentSection) {
+          // 创建默认section (无header的section)
+          currentSection = createSection()
+        }
+        // 将 item 添加到当前 section 的 data 中
+        const itemIndex = currentSection.data.length
+        currentSection.data.push(item)
+        const sectionIndex = sections.length
+        // 为 item 添加索引映射 - 存储格式为: "sectionIndex_itemIndex"
+        indexMap.current[index] = `${sectionIndex}_${itemIndex}`
+        // 添加反向索引映射
+        reverseIndexMap.current[`${sectionIndex}_${itemIndex}`] = index
+        exposureIndexMap.current[exposureIndex] = {
+          index,
+          type: 'item'
+        }
+        exposureIndex++
+      }
+    })
+    // 添加最后一个 section
+    if (currentSection) {
+      closeSection()
+    }
+    return sections
+  }, [listData])
+
+  const { getItemLayout } = useMemo(() => {
+    const layouts: ItemLayoutInfo[] = []
+    let offset = 0
+
+    if (useListHeader) {
+      // 计算列表头部的高度
+      offset += listHeaderHeight
+    }
+
+    // 遍历所有 sections
+    convertedListData.forEach((section: Section, sectionIndex: number) => {
+      // 添加 section header 的位置信息
+      const headerHeight = getSectionExtraHeight({ sectionIndex, type: 'header' })
+      layouts.push({
+        length: headerHeight,
+        offset,
+        index: layouts.length
+      })
+      offset += headerHeight
+
+      // 添加该 section 中所有 items 的位置信息
+      section.data.forEach((item: ListItem, itemIndex: number) => {
+        const contentHeight = getItemHeight({ sectionIndex, rowIndex: itemIndex })
+        layouts.push({
+          length: contentHeight,
+          offset,
+          index: layouts.length
+        })
+        offset += contentHeight
+      })
+
+      // 添加该 section 尾部位置信息
+      // 因为即使 sectionList 没传 renderSectionFooter，getItemLayout 中的 index 的计算也会包含尾部节点
+      const footerHeight = getSectionExtraHeight({ sectionIndex, type: 'footer' })
+      layouts.push({
+        length: footerHeight,
+        offset,
+        index: layouts.length
+      })
+      offset += footerHeight
+    })
+    itemLayoutsRef.current = layouts
+    return {
+      getItemLayout: (data: any, index: number) => layouts[index]
+    }
+  }, [convertedListData, useListHeader, itemHeight.value, itemHeight.getter, sectionHeaderHeight.value, sectionHeaderHeight.getter, sectionFooterHeight.value, sectionFooterHeight.getter, listHeaderHeight])
+
+  useEffect(() => {
+    itemExposureState.current = {}
+  }, [convertedListData, enableSticky])
+
+  const scrollAdditionalProps = extendObject(
+    {
+      style: [
+        hasOwn(style, 'flex') || hasOwn(style, 'flexGrow') ? null : { flexGrow: 0 },
+        { height, width },
+        style,
+        layoutStyle
+      ],
+      alwaysBounceVertical: false,
+      alwaysBounceHorizontal: false,
+      scrollEventThrottle: scrollEventThrottle,
+      scrollsToTop: enableBackToTop,
+      showsHorizontalScrollIndicator: showScrollbar,
+      onEndReachedThreshold,
+      ref: scrollViewRef,
+      bounces: enhanced ? bounces : false,
+      stickySectionHeadersEnabled: enableSticky,
+      onScroll: onScroll,
+      onEndReached: onEndReached
+    },
+    refresherEnabled ? { refreshing } : null,
+    layoutProps
+  )
+
+  if (initialEnableItemExposureRef.current) {
+    extendObject(scrollAdditionalProps, {
+      viewabilityConfigCallbackPairs: itemExposureViewabilityPairs.current
+    })
+  }
+
+  const nativeGesture = useMemo(() => {
+    const simultaneousHandlers = flatGesture(originSimultaneousHandlers)
+    const waitForHandlers = flatGesture(waitFor)
+    const gesture = Gesture.Native().withRef(sectionListGestureRef as any)
+    if (simultaneousHandlers && simultaneousHandlers.length) {
+      gesture.simultaneousWithExternalGesture(...simultaneousHandlers)
+    }
+    if (waitForHandlers && waitForHandlers.length) {
+      gesture.requireExternalGestureToFail(...waitForHandlers)
+    }
+    return gesture
+  }, [originSimultaneousHandlers, waitFor])
+
+  useImperativeHandle(ref, () => {
+    return {
+      gestureRef: sectionListGestureRef,
+      scrollToIndex
+    }
+  })
+
+  const innerProps = useInnerProps(extendObject({}, props, scrollAdditionalProps), [
+    'id',
+    'enhanced',
+    'height',
+    'width',
+    'list-data',
+    'item-height',
+    'section-header-height',
+    'section-footer-height',
+    'list-header-height',
+    'list-header-data',
+    'use-list-header',
+    'list-footer-data',
+    'use-list-footer',
+    'genericrecycle-item',
+    'genericsection-header',
+    'genericsection-footer',
+    'genericlist-header',
+    'genericlist-footer',
+    'show-scrollbar',
+    'lower-threshold',
+    'scroll-event-throttle',
+    'enable-sticky',
+    'enable-back-to-top',
+    'end-reached-threshold',
+    'refresher-triggered',
+    'refresher-enabled',
+    'enable-item-exposure',
+    'item-exposure-threshold',
+    'bindrefresherrefresh',
+    'bindscrolltolower',
+    'bindscroll',
+    'binditemexposure',
+    'simultaneous-handlers',
+    'wait-for'
+  ], { layoutRef })
+
+  // 使用 useMemo 获取 GenericComponent 并创建渲染函数，避免每次组件更新都重新创建函数引用导致不必要的重新渲染
+  const renderItem = useMemo(
+    () => {
+      const ItemComponent = getGeneric(generichash, genericrecycleItem)
+      if (!ItemComponent) return undefined
+      return ({ item }: { item: ListItem }) => createElement(ItemComponent, { itemData: item })
+    },
+    [generichash, genericrecycleItem]
+  )
+
+  const renderSectionHeader = useMemo(
+    () => {
+      const SectionHeaderComponent = getGeneric(generichash, genericsectionHeader)
+      if (!SectionHeaderComponent) return undefined
+      return (sectionData: { section: RNSection }) => {
+        if (!sectionData.section.hasSectionHeader) return null
+        return createElement(SectionHeaderComponent, { itemData: sectionData.section.headerData })
+      }
+    },
+    [generichash, genericsectionHeader]
+  )
+
+  const renderSectionFooter = useMemo(
+    () => {
+      const SectionFooterComponent = getGeneric(generichash, genericsectionFooter)
+      if (!SectionFooterComponent) return undefined
+      return (sectionData: { section: RNSection }) => {
+        if (!sectionData.section.hasSectionFooter) return null
+        return createElement(SectionFooterComponent, { itemData: sectionData.section.footerData })
+      }
+    },
+    [generichash, genericsectionFooter]
+  )
+
+  const ListHeaderGenericComponent = useMemo(
+    () => {
+      if (!useListHeader) return null
+      return getGeneric(generichash, genericListHeader)
+    },
+    [useListHeader, generichash, genericListHeader]
+  )
+
+  const ListFooterGenericComponent = useMemo(
+    () => {
+      if (!useListFooter) return null
+      return getGeneric(generichash, genericListFooter)
+    },
+    [useListFooter, generichash, genericListFooter]
+  )
+
+  const ListHeaderComponent = useMemo(
+    () => {
+      if (!ListHeaderGenericComponent) return null
+      return createElement(ListHeaderGenericComponent, { listHeaderData })
+    },
+    [ListHeaderGenericComponent, listHeaderData]
+  )
+
+  const ListFooterComponent = useMemo(
+    () => {
+      if (!ListFooterGenericComponent) return null
+      return createElement(ListFooterGenericComponent, { listFooterData })
+    },
+    [ListFooterGenericComponent, listFooterData]
+  )
+
+  const sectionListProps: RNSectionListProps<ListItem, SectionExtra> = extendObject(
+    {
+      sections: convertedListData,
+      renderItem: renderItem,
+      getItemLayout: getItemLayout,
+      ListHeaderComponent: useListHeader ? ListHeaderComponent : null,
+      ListFooterComponent: useListFooter ? ListFooterComponent : null,
+      renderSectionHeader: renderSectionHeader,
+      renderSectionFooter: renderSectionFooter,
+      refreshControl: refresherEnabled
+        ? createElement(RefreshControl, {
+          onRefresh: onRefresh,
+          refreshing: refreshing
+        })
+        : undefined
+    },
+    innerProps
+  )
+
+  return createElement(
+    GestureDetector,
+    { gesture: nativeGesture },
+    createElement(
+      TypedSectionList,
+      sectionListProps
+    )
+  )
+})
+
+_SectionList.displayName = 'MpxSectionList'
+
+export default _SectionList