fix: add _ScrollViewComponent prop

ant-design · Mar 15, 2024 · ee8eb9a · ee8eb9a
1 parent 2a63ff4
commit ee8eb9a
Show file tree

Hide file tree

Showing 9 changed files with 33 additions and 39 deletions.
diff --git a/CHANGELOG.en-US.md b/CHANGELOG.en-US.md
@@ -14,6 +14,12 @@ toc: false
 
 ---
 
+### 5.1.1
+`2024-03-15`
+- **PickerView** & **DatePickerView** & **Carousel** 
+  - fix: remove import `react-native-gesture-handler/ScrollView`
+  - Let the user decide whether to use by `_ScrollViewComponent` prop
+
 ### 5.1.0
 `2024-02-20`
 - Refactor **Picker** & **PickerView**

diff --git a/CHANGELOG.zh-CN.md b/CHANGELOG.zh-CN.md
@@ -14,6 +14,12 @@ toc: false
 
 ---
 
+### 5.1.1
+`2024-03-15`
+- **PickerView** & **DatePickerView** & **Carousel** 
+  - fix: 移除 `react-native-gesture-handler/ScrollView` 引用
+  - 提供 `_ScrollViewComponent` 属性让用户决定是否使用
+
 ### 5.1.0
 `2024-02-23`
 - 重构 **Picker** & **PickerView**

diff --git a/components/carousel/index.tsx b/components/carousel/index.tsx
@@ -27,6 +27,10 @@ export interface CarouselPropsType
   autoplay?: boolean
   autoplayInterval?: number
   infinite?: boolean
+  /**
+   * @description To fix: Carousel not scrolling in Android ScrollView
+   */
+  _ScrollViewComponent?: any
 }
 
 export interface CarouselProps extends CarouselPropsType {
@@ -459,8 +463,9 @@ class Carousel extends React.PureComponent<CarouselProps, CarouselState> {
   }
 
   private renderScroll = (pages: React.ReactNode) => {
+    const ScrollViewComponent = this.props._ScrollViewComponent || ScrollView
     return (
-      <ScrollView
+      <ScrollViewComponent
         {...this.props}
         horizontal={!this.props.vertical}
         ref={this.scrollview as any}
@@ -483,7 +488,7 @@ class Carousel extends React.PureComponent<CarouselProps, CarouselState> {
             }
           : {})}>
         {pages}
-      </ScrollView>
+      </ScrollViewComponent>
     )
   }
 

diff --git a/components/date-picker-view/PropsType.tsx b/components/date-picker-view/PropsType.tsx
@@ -16,7 +16,7 @@ export interface DatePickerViewPropsType
     | 'numberOfLines'
     | 'renderMaskTop'
     | 'renderMaskBottom'
-    | 'withWrapper'
+    | '_ScrollViewComponent'
   > {
   value?: PickerDate
   defaultValue?: PickerDate

diff --git a/components/date-picker-view/demo/basic.tsx b/components/date-picker-view/demo/basic.tsx
@@ -1,6 +1,6 @@
 import React, { useState } from 'react'
 import { ScrollView, Text } from 'react-native'
-import { createNativeWrapper } from 'react-native-gesture-handler'
+import { ScrollView as GestureScrollView } from 'react-native-gesture-handler'
 import { DatePickerView } from '../../'
 import { DatePickerFilter } from '../../date-picker/date-picker-utils'
 
@@ -40,12 +40,7 @@ export default () => {
         precision="hour"
         renderLabel={labelRenderer}
         filter={dateFilter}
-        withWrapper={(Component) =>
-          createNativeWrapper(Component, {
-            disallowInterruption: true,
-            shouldCancelWhenOutside: false,
-          })
-        }
+        _ScrollViewComponent={GestureScrollView}
       />
     </ScrollView>
   )

diff --git a/components/picker-view/PropsType.tsx b/components/picker-view/PropsType.tsx
@@ -1,5 +1,4 @@
 import type { ReactNode } from 'react'
-import { ComponentType } from 'react'
 import { StyleProp, TextStyle, ViewStyle } from 'react-native'
 
 export type PickerValue = string | number
@@ -35,18 +34,5 @@ export interface PickerViewPropsType {
   renderLabel?: (item: PickerColumnItem, index: number) => ReactNode
   renderMaskTop?: () => ReactNode
   renderMaskBottom?: () => ReactNode
-  /**
-   * @description HOC for Wheel
-   * @example ```tsx
-   * import { createNativeWrapper } from 'react-native-gesture-handler'
-   *
-   * withWrapper={(Component) =>
-   *  createNativeWrapper(Component, {
-   *    disallowInterruption: true,
-   *    shouldCancelWhenOutside: false,
-   *  })
-   * }
-   * ```
-   */
-  withWrapper?: (Component: ComponentType<any>) => ComponentType<any>
+  _ScrollViewComponent?: any
 }
diff --git a/components/picker-view/Wheel.tsx b/components/picker-view/Wheel.tsx
@@ -22,6 +22,7 @@ type Props = {
   renderLabel: (item: ColumnItem, index: number) => ReactNode
   itemHeight: number
   wheelHeight: number
+  _ScrollViewComponent?: any
 }
 
 class Wheel extends React.Component<Props> {
@@ -167,11 +168,12 @@ class Wheel extends React.Component<Props> {
   }
 
   render() {
+    const ScrollViewComponent = this.props._ScrollViewComponent || ScrollView
     return (
-      <ScrollView
+      <ScrollViewComponent
         style={{ flex: 1 }}
         horizontal={false}
-        ref={(el) => (this.scrollerRef = el)}
+        ref={(el: any) => (this.scrollerRef = el)}
         showsHorizontalScrollIndicator={false}
         showsVerticalScrollIndicator={false}
         pagingEnabled={false}
@@ -191,7 +193,7 @@ class Wheel extends React.Component<Props> {
               onMomentumScrollEnd: this.onMomentumScrollEnd,
             })}>
         {this.renderItems()}
-      </ScrollView>
+      </ScrollViewComponent>
     )
   }
 }

diff --git a/components/picker-view/demo/basic.tsx b/components/picker-view/demo/basic.tsx
@@ -1,6 +1,6 @@
 import React from 'react'
 import { ScrollView, Text } from 'react-native'
-import { createNativeWrapper } from 'react-native-gesture-handler'
+import { ScrollView as GestureScrollView } from 'react-native-gesture-handler'
 import { PickerView } from '../../'
 
 const basicColumns = [
@@ -42,12 +42,7 @@ export default class PickerViewExample extends React.Component {
             padding: 0,
           }}
           // To fix: Wheel not scrolling in Android ScrollView
-          withWrapper={(Component) =>
-            createNativeWrapper(Component, {
-              disallowInterruption: true,
-              shouldCancelWhenOutside: false,
-            })
-          }
+          _ScrollViewComponent={GestureScrollView}
         />
 
         <Text style={{ margin: 16 }}>受控模式</Text>

diff --git a/components/picker-view/picker-view.tsx b/components/picker-view/picker-view.tsx
@@ -32,7 +32,6 @@ export default class RMCPickerView extends React.Component<
     renderMaskBottom: () => (
       <View style={{ flex: 1, backgroundColor: 'rgba(255,255,255,0.8)' }} />
     ),
-    withWrapper: (Component: any) => Component,
   }
 
   constructor(props: RMCPickerViewProps) {
@@ -111,10 +110,9 @@ export default class RMCPickerView extends React.Component<
       numberOfLines,
       handleSelect,
       loadingContent,
-      withWrapper,
+      _ScrollViewComponent,
     } = this.props
     const itemHeight = this.props.itemHeight || this.state.itemHeight
-    const WheelHOC = withWrapper?.(Wheel) || Wheel
     return (
       <WithTheme themeStyles={pickerViewStyles} styles={styles}>
         {(s) =>
@@ -146,7 +144,7 @@ export default class RMCPickerView extends React.Component<
                   : itemHeight > 0 &&
                     wheelHeight > 0 &&
                     columns.map((column, index) => (
-                      <WheelHOC
+                      <Wheel
                         key={index}
                         index={index}
                         column={column}
@@ -155,6 +153,7 @@ export default class RMCPickerView extends React.Component<
                         itemHeight={itemHeight}
                         wheelHeight={wheelHeight}
                         renderLabel={this.renderLabel}
+                        _ScrollViewComponent={_ScrollViewComponent}
                       />
                     ))}
               </View>