Skip to content

Commit

Permalink
feat: deprecated enableSnap instead with snapEnabled
Browse files Browse the repository at this point in the history
  • Loading branch information
@dohooo
dohooo committed Feb 19, 2022
1 parent e090110 commit 43c84c2
Show file tree
Hide file tree
Showing 9 changed files with 25 additions and 19 deletions.
2 changes: 1 addition & 1 deletion CHANGELOG.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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)



Expand Down
2 changes: 1 addition & 1 deletion docs/props.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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<ViewStyle> | Custom animations. For details, see below[custom animation](./custom-animation.md) |

Expand Down
2 changes: 1 addition & 1 deletion docs/props.zh-CN.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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<ViewStyle> | 自定动画，详情见[自定义动画](./custom-animation.zh-CN.md) |

Expand Down
2 changes: 1 addition & 1 deletion example/src/marquee/index.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -64,7 +64,7 @@ function Index() {
style={{
width: 200,
}}
enableSnap={false}
snapEnabled={false}
pagingEnabled={false}
loop
autoPlay
Expand Down
8 changes: 4 additions & 4 deletions example/src/parallax/index.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -25,7 +25,7 @@ function Index() {
const [isVertical, setIsVertical] = React.useState(false);
const [autoPlay, setAutoPlay] = React.useState(false);
const [pagingEnabled, setPagingEnabled] = React.useState<boolean>(true);
const [enableSnap, setEnableSnap] = React.useState<boolean>(true);
const [snapEnabled, setSnapEnabled] = React.useState<boolean>(true);
const progressValue = useSharedValue<number>(0);
const baseOptions = isVertical
? ({
Expand All @@ -49,7 +49,7 @@ function Index() {
{...baseOptions}
loop
pagingEnabled={pagingEnabled}
enableSnap={enableSnap}
snapEnabled={snapEnabled}
autoPlay={autoPlay}
autoPlayInterval={1500}
onProgressChange={(_, absoluteProgress) =>
Expand Down Expand Up @@ -117,10 +117,10 @@ function Index() {
</SButton>
<SButton
onPress={() => {
setEnableSnap(!enableSnap);
setSnapEnabled(!snapEnabled);
}}
>
{`enableSnap:${enableSnap}`}
{`snapEnabled:${snapEnabled}`}
</SButton>
</View>
);
Expand Down
8 changes: 4 additions & 4 deletions example/src/stack/index.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -11,7 +11,7 @@ function Index() {
'left'
);
const [pagingEnabled, setPagingEnabled] = React.useState<boolean>(true);
const [enableSnap, setEnableSnap] = React.useState<boolean>(true);
const [snapEnabled, setSnapEnabled] = React.useState<boolean>(true);
const [loop, setLoop] = React.useState<boolean>(true);
const [autoPlay, setAutoPlay] = React.useState<boolean>(false);
const [autoPlayReverse, setAutoPlayReverse] =
Expand All @@ -29,7 +29,7 @@ function Index() {
width={280}
height={210}
pagingEnabled={pagingEnabled}
enableSnap={enableSnap}
snapEnabled={snapEnabled}
mode={mode}
loop={loop}
autoPlay={autoPlay}
Expand Down Expand Up @@ -101,10 +101,10 @@ function Index() {
</SButton>
<SButton
onPress={() => {
setEnableSnap(!enableSnap);
setSnapEnabled(!snapEnabled);
}}
>
{`enableSnap:${enableSnap}`}
{`snapEnabled:${snapEnabled}`}
</SButton>
</View>
</View>
Expand Down
8 changes: 4 additions & 4 deletions src/ScrollViewGesture.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -41,7 +41,7 @@ const IScrollViewGesture: React.FC<Props> = (props) => {
style,
data,
pagingEnabled,
enableSnap,
snapEnabled,
panGestureHandlerProps,
loop: infinite,
scrollAnimationDuration,
Expand Down Expand Up @@ -96,7 +96,7 @@ const IScrollViewGesture: React.FC<Props> = (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);
Expand Down Expand Up @@ -130,7 +130,7 @@ const IScrollViewGesture: React.FC<Props> = (props) => {
size,
maxPage,
pagingEnabled,
enableSnap,
snapEnabled,
]
);

Expand Down Expand Up @@ -257,7 +257,7 @@ const IScrollViewGesture: React.FC<Props> = (props) => {
infinite,
maxPage,
size,
enableSnap,
snapEnabled,
onScrollBegin,
onScrollEnd,
]
Expand Down
4 changes: 2 additions & 2 deletions src/hooks/useInitProps.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -32,7 +32,7 @@ export function useInitProps<T>(
style = {},
panGestureHandlerProps = {},
pagingEnabled = true,
enableSnap = true,
snapEnabled = props.enableSnap ?? true,
width: _width,
height: _height,
} = props;
Expand Down Expand Up @@ -73,7 +73,7 @@ export function useInitProps<T>(
style,
panGestureHandlerProps,
pagingEnabled,
enableSnap,
snapEnabled,
width,
height,
};
Expand Down
8 changes: 7 additions & 1 deletion src/types.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -116,9 +116,15 @@ export type TCarouselProps<T = any> = {
/**
* 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.
*/
Expand Down

0 comments on commit 43c84c2

Please sign in to comment.