From 43c84c2cc8ac45247c3ea348d912673ff1ef5132 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E8=B5=B5=E6=9D=B1=E6=BE=94?= Date: Sat, 19 Feb 2022 16:12:26 +0800 Subject: [PATCH] feat: deprecated enableSnap instead with snapEnabled --- CHANGELOG.md | 2 +- docs/props.md | 2 +- docs/props.zh-CN.md | 2 +- example/src/marquee/index.tsx | 2 +- example/src/parallax/index.tsx | 8 ++++---- example/src/stack/index.tsx | 8 ++++---- src/ScrollViewGesture.tsx | 8 ++++---- src/hooks/useInitProps.ts | 4 ++-- src/types.ts | 8 +++++++- 9 files changed, 25 insertions(+), 19 deletions(-) diff --git a/CHANGELOG.md b/CHANGELOG.md index be15f747..e8e2eb6a 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -136,7 +136,7 @@ * add stack layout ([5a70a23](https://github.com/dohooo/react-native-reanimated-carousel/commit/5a70a230307e0b258e16230d6b21be2c4d8c7497)) * multiple stack styles are supported ([d4497a7](https://github.com/dohooo/react-native-reanimated-carousel/commit/d4497a785f6da4dae79e812dac1d5515303d0cd3)) -* support pagingEnabled enableSnap ([000658e](https://github.com/dohooo/react-native-reanimated-carousel/commit/000658ed4a97b58d4e2649b6ab816e62919beff9)), closes [#65](https://github.com/dohooo/react-native-reanimated-carousel/issues/65) +* support pagingEnabled snapEnabled ([000658e](https://github.com/dohooo/react-native-reanimated-carousel/commit/000658ed4a97b58d4e2649b6ab816e62919beff9)), closes [#65](https://github.com/dohooo/react-native-reanimated-carousel/issues/65) diff --git a/docs/props.md b/docs/props.md index 400a0522..822b5185 100644 --- a/docs/props.md +++ b/docs/props.md @@ -26,7 +26,7 @@ | modeConfig | ❌ | { snapDirection: 'left',moveSize: window.width,stackInterval: 30,scaleInterval: 0.08,rotateZDeg: 135} | {moveSize?: number;stackInterval?: number;scaleInterval?: number;rotateZDeg?: number;snapDirection?: 'left' \| 'right';} | Stack layout animation style | | showLength | ❌ | data.length - 1 | number | The maximum number of items will show in stack | | pagingEnabled | ❌ | true | boolean | When true, the scroll view stops on multiples of the scroll view's size when scrolling | -| enableSnap | ❌ | true | boolean | If enabled, releasing the touch will scroll to the nearest item, valid when pagingEnabled=false | +| snapEnabled | ❌ | true | boolean | If enabled, releasing the touch will scroll to the nearest item, valid when pagingEnabled=false | | customConfig | ❌ | | () => {type?: 'negative' \| 'positive';viewCount?: number;} | Custom carousel config | | customAnimation | ❌ | | (value: number) => Animated.AnimatedStyleProp | Custom animations. For details, see below[custom animation](./custom-animation.md) | diff --git a/docs/props.zh-CN.md b/docs/props.zh-CN.md index 96ac31e0..15079728 100644 --- a/docs/props.zh-CN.md +++ b/docs/props.zh-CN.md @@ -26,7 +26,7 @@ | modeConfig | ❌ | { snapDirection: 'left',moveSize: window.width,stackInterval: 30,scaleInterval: 0.08,rotateZDeg: 135} | {moveSize?: number;stackInterval?: number;scaleInterval?: number;rotateZDeg?: number;snapDirection?: 'left' \| 'right';} | 堆栈视图的动画样式 | | showLength | ❌ | data.length - 1 | number | 堆栈视图中展示元素的最大数量 | | pagingEnabled | ❌ | true | boolean | 当值为 true 时，滚动条会停在滚动视图的尺寸的整数倍位置。 | -| enableSnap | ❌ | true | boolean | 如果启用，松开触摸会滚动到最近的元素，当 pagingEnabled=false 时有效 | +| snapEnabled | ❌ | true | boolean | 如果启用，松开触摸会滚动到最近的元素，当 pagingEnabled=false 时有效 | | customConfig | ❌ | | () => {type?: 'negative' \| 'positive';viewCount?: number;} | 自定义轮播图内部配置 | | customAnimation | ❌ | | (value: number) => Animated.AnimatedStyleProp | 自定动画，详情见[自定义动画](./custom-animation.zh-CN.md) | diff --git a/example/src/marquee/index.tsx b/example/src/marquee/index.tsx index f4292166..dadbfa86 100644 --- a/example/src/marquee/index.tsx +++ b/example/src/marquee/index.tsx @@ -64,7 +64,7 @@ function Index() { style={{ width: 200, }} - enableSnap={false} + snapEnabled={false} pagingEnabled={false} loop autoPlay diff --git a/example/src/parallax/index.tsx b/example/src/parallax/index.tsx index f1312056..f6824c6b 100644 --- a/example/src/parallax/index.tsx +++ b/example/src/parallax/index.tsx @@ -25,7 +25,7 @@ function Index() { const [isVertical, setIsVertical] = React.useState(false); const [autoPlay, setAutoPlay] = React.useState(false); const [pagingEnabled, setPagingEnabled] = React.useState(true); - const [enableSnap, setEnableSnap] = React.useState(true); + const [snapEnabled, setSnapEnabled] = React.useState(true); const progressValue = useSharedValue(0); const baseOptions = isVertical ? ({ @@ -49,7 +49,7 @@ function Index() { {...baseOptions} loop pagingEnabled={pagingEnabled} - enableSnap={enableSnap} + snapEnabled={snapEnabled} autoPlay={autoPlay} autoPlayInterval={1500} onProgressChange={(_, absoluteProgress) => @@ -117,10 +117,10 @@ function Index() { { - setEnableSnap(!enableSnap); + setSnapEnabled(!snapEnabled); }} > - {`enableSnap:${enableSnap}`} + {`snapEnabled:${snapEnabled}`} ); diff --git a/example/src/stack/index.tsx b/example/src/stack/index.tsx index a3c68b7d..d6a40f21 100644 --- a/example/src/stack/index.tsx +++ b/example/src/stack/index.tsx @@ -11,7 +11,7 @@ function Index() { 'left' ); const [pagingEnabled, setPagingEnabled] = React.useState(true); - const [enableSnap, setEnableSnap] = React.useState(true); + const [snapEnabled, setSnapEnabled] = React.useState(true); const [loop, setLoop] = React.useState(true); const [autoPlay, setAutoPlay] = React.useState(false); const [autoPlayReverse, setAutoPlayReverse] = @@ -29,7 +29,7 @@ function Index() { width={280} height={210} pagingEnabled={pagingEnabled} - enableSnap={enableSnap} + snapEnabled={snapEnabled} mode={mode} loop={loop} autoPlay={autoPlay} @@ -101,10 +101,10 @@ function Index() { { - setEnableSnap(!enableSnap); + setSnapEnabled(!snapEnabled); }} > - {`enableSnap:${enableSnap}`} + {`snapEnabled:${snapEnabled}`} diff --git a/src/ScrollViewGesture.tsx b/src/ScrollViewGesture.tsx index b59f897f..594ed5fd 100644 --- a/src/ScrollViewGesture.tsx +++ b/src/ScrollViewGesture.tsx @@ -41,7 +41,7 @@ const IScrollViewGesture: React.FC = (props) => { style, data, pagingEnabled, - enableSnap, + snapEnabled, panGestureHandlerProps, loop: infinite, scrollAnimationDuration, @@ -96,7 +96,7 @@ const IScrollViewGesture: React.FC = (props) => { const origin = translation.value; const velocity = scrollEndVelocity.value; if (!pagingEnabled) { - if (enableSnap) { + if (snapEnabled) { const nextPage = Math.round((origin + velocity * 0.4) / size) * size; translation.value = _withSpring(nextPage, onFinished); @@ -130,7 +130,7 @@ const IScrollViewGesture: React.FC = (props) => { size, maxPage, pagingEnabled, - enableSnap, + snapEnabled, ] ); @@ -257,7 +257,7 @@ const IScrollViewGesture: React.FC = (props) => { infinite, maxPage, size, - enableSnap, + snapEnabled, onScrollBegin, onScrollEnd, ] diff --git a/src/hooks/useInitProps.ts b/src/hooks/useInitProps.ts index b6801a92..40a6c9be 100644 --- a/src/hooks/useInitProps.ts +++ b/src/hooks/useInitProps.ts @@ -32,7 +32,7 @@ export function useInitProps( style = {}, panGestureHandlerProps = {}, pagingEnabled = true, - enableSnap = true, + snapEnabled = props.enableSnap ?? true, width: _width, height: _height, } = props; @@ -73,7 +73,7 @@ export function useInitProps( style, panGestureHandlerProps, pagingEnabled, - enableSnap, + snapEnabled, width, height, }; diff --git a/src/types.ts b/src/types.ts index 89f33b1f..21126a61 100644 --- a/src/types.ts +++ b/src/types.ts @@ -116,9 +116,15 @@ export type TCarouselProps = { /** * If enabled, releasing the touch will scroll to the nearest item. * valid when pagingEnabled=false - * @default true + * @deprecated please use snapEnabled instead */ enableSnap?: boolean; + /** + * If enabled, releasing the touch will scroll to the nearest item. + * valid when pagingEnabled=false + * @default true + */ + snapEnabled?: boolean; /** * Specifies the scrolling animation effect. */