diff --git a/CHANGELOG.en-US.md b/CHANGELOG.en-US.md index 940c7eab..050e8919 100644 --- 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 index 4557ee01..152d507e 100644 --- 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 index 8837278c..67e39330 100644 --- 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 { } private renderScroll = (pages: React.ReactNode) => { + const ScrollViewComponent = this.props._ScrollViewComponent || ScrollView return ( - { } : {})}> {pages} - + ) } diff --git a/components/date-picker-view/PropsType.tsx b/components/date-picker-view/PropsType.tsx index 852339fb..5692214b 100644 --- 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 index f0bb5641..0d116bb1 100644 --- 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} /> ) diff --git a/components/picker-view/PropsType.tsx b/components/picker-view/PropsType.tsx index 2ab2bc30..5a8e1ae7 100644 --- 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) => ComponentType + _ScrollViewComponent?: any } diff --git a/components/picker-view/Wheel.tsx b/components/picker-view/Wheel.tsx index 1cc0becd..7de353a1 100644 --- 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 { @@ -167,11 +168,12 @@ class Wheel extends React.Component { } render() { + const ScrollViewComponent = this.props._ScrollViewComponent || ScrollView return ( - (this.scrollerRef = el)} + ref={(el: any) => (this.scrollerRef = el)} showsHorizontalScrollIndicator={false} showsVerticalScrollIndicator={false} pagingEnabled={false} @@ -191,7 +193,7 @@ class Wheel extends React.Component { onMomentumScrollEnd: this.onMomentumScrollEnd, })}> {this.renderItems()} - + ) } } diff --git a/components/picker-view/demo/basic.tsx b/components/picker-view/demo/basic.tsx index 422fcd0c..c0a7da02 100644 --- 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} /> 受控模式 diff --git a/components/picker-view/picker-view.tsx b/components/picker-view/picker-view.tsx index 6fabffd8..92512536 100644 --- 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: () => ( ), - 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 ( {(s) => @@ -146,7 +144,7 @@ export default class RMCPickerView extends React.Component< : itemHeight > 0 && wheelHeight > 0 && columns.map((column, index) => ( - ))}