refactor: 简化 react-window outerElementType

src/react-window/FixedSizeList.tsx

@@ -2,15 +2,16 @@ import React from 'react'
 import { View } from '@tarojs/components'
 import { FixedSizeList as List, FixedSizeListProps as ListProps } from 'react-window'
 
-import { useOuterScrollView, OuterScrollViewProps } from './useOuterScrollView'
+import { OuterScrollView } from './OuterScrollView'
+// import { useOuterScrollView, OuterScrollViewProps } from './useOuterScrollView'
 
 export interface FixedSizeListProps extends ListProps {
-    outerElementProps?: OuterScrollViewProps
+    // outerElementProps?: OuterScrollViewProps
 }
 
-export const FixedSizeList: React.FC<FixedSizeListProps> = props => {
-    const { outerElementProps, ...listProps } = props
-    const OuterScrollView = useOuterScrollView({ width: props.width, height: props.height, ...outerElementProps })
+export const FixedSizeList = React.forwardRef<List, FixedSizeListProps>((props, ref) => {
+    // const { outerElementProps, ...listProps } = props
+    // const OuterScrollView = useOuterScrollView({ width: props.width, height: props.height, ...outerElementProps })
 
-    return <List outerElementType={OuterScrollView} innerElementType={View} {...listProps} />
-}
+    return <List ref={ref} outerElementType={OuterScrollView} innerElementType={View} {...props} />
+})

src/react-window/OuterScrollView.tsx

@@ -2,31 +2,36 @@ import React, { useCallback } from 'react'
 import { ScrollView } from '@tarojs/components'
 import { ScrollViewProps } from '@tarojs/components/types/ScrollView'
 
-export interface OuterScrollViewProps extends Omit<ScrollViewProps, 'onScroll'> {
-    width?: number | string
-    height?: number | string
-}
+export interface OuterScrollViewProps extends ScrollViewProps {}
 
 /**
  * Container scroll view
  *
  * Use provided width/height synthesize standard onScroll event
  */
-export const OuterScrollView = React.forwardRef<typeof ScrollView, OuterScrollViewProps>((
-    props,
-    /* Taro legacy ref type */ ref: any
-) => {
-    const { width, height, ...rest } = props
+export const OuterScrollView = React.forwardRef<any, OuterScrollViewProps>((props, ref) => {
+    const { style, onScroll, ...rest } = props
+    const { width, height, ...otherStyle } = style as React.CSSProperties
 
     const handleScroll = useCallback(
-        event => {
-            rest['onScroll']({
+        (event) => {
+            onScroll({
                 ...event,
                 currentTarget: { ...event.detail, clientWidth: width, clientHeight: height },
             })
         },
-        [width, height, rest['onScroll']]
+        [width, height, onScroll]
     )
 
-    return <ScrollView ref={ref} scrollX scrollY onScroll={handleScroll} {...rest} />
+    return (
+        <ScrollView
+            ref={ref as any}
+            style={{ width, height, overflowAnchor: 'auto', ...otherStyle }}
+            scrollX
+            scrollY
+            scrollAnchoring
+            onScroll={handleScroll}
+            {...rest}
+        />
+    )
 })

src/react-window/VariableSizeList.tsx

@@ -2,24 +2,25 @@ import React, { useEffect } from 'react'
 import { View } from '@tarojs/components'
 import { VariableSizeList as List, VariableSizeListProps as ListProps } from 'react-window'
 
-import { useOuterScrollView, OuterScrollViewProps } from './useOuterScrollView'
+// import { useOuterScrollView, OuterScrollViewProps } from './useOuterScrollView'
+import { OuterScrollView } from './OuterScrollView'
 
 export interface VariableSizeListProps extends ListProps {
     /** 传给 outer element 的属性 */
-    outerElementProps?: OuterScrollViewProps
+    // outerElementProps?: OuterScrollViewProps
 }
 
 export const VariableSizeList = React.forwardRef<List, VariableSizeListProps>((props, ref) => {
-    const { outerElementProps, ...listProps } = props
-    const OuterScrollView = useOuterScrollView({
-        width: props.width,
-        height: props.height,
-        ...outerElementProps,
-    })
+    // const { outerElementProps, ...listProps } = props
+    // const OuterScrollView = useOuterScrollView({
+    //     width: props.width,
+    //     height: props.height,
+    //     ...outerElementProps,
+    // })
 
-    useEffect(() => {}, [])
+    // useEffect(() => {}, [])
 
-    return <List ref={ref} outerElementType={OuterScrollView} innerElementType={View} {...listProps} />
+    return <List ref={ref} outerElementType={OuterScrollView} innerElementType={View} {...props} />
 })
 // export const VariableSizeList: React.FC<VariableSizeListProps> = props => {
 //     const { outerElementProps, ...listProps } = props

src/react-window/index.ts

@@ -1,3 +1,4 @@
 export * from './FixedSizeList'
 export * from './VariableSizeList'
-export * from './useOuterScrollView'
+export * from './OuterScrollView'
+// export * from './useOuterScrollView'