Skip to content

Commit

Permalink
feat: add enabled props
Browse files Browse the repository at this point in the history
when false, Carousel will not respond to any gestures
  • Loading branch information
dohooo committed Feb 19, 2022
1 parent 43c84c2 commit e713e12
Show file tree
Hide file tree
Showing 6 changed files with 16 additions and 5 deletions.
3 changes: 2 additions & 1 deletion docs/props.md
Original file line number Diff line number Diff line change
Expand Up @@ -26,7 +26,8 @@
| 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 |
| snapEnabled || 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 |
| enabled || true | boolean | when false, Carousel will not respond to any gestures |
| 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
5 changes: 3 additions & 2 deletions docs/props.zh-CN.md
Original file line number Diff line number Diff line change
Expand Up @@ -19,14 +19,15 @@
| onSnapToItem || | (index: number) => void | 切换至另一张轮播图时触发 |
| onScrollBegin || | () => void | 切换动画开始时触发 |
| onScrollEnd || | (previous: number, current: number) => void | 切换动画结束时触发 |
| withAnimation || | {type: 'spring';config: WithSpringConfig;} \| {type: 'timing';config: WithTimingConfig;} | 指定滚动时的动画效果 |
| withAnimation || | {type: 'spring';config: WithSpringConfig;} \| {type: 'timing';config: WithTimingConfig;} | 指定滚动时的动画效果 |
| panGestureHandlerProps || {} | Omit<Partial\<PanGestureHandlerProps\>,'onHandlerStateChange'> | PanGestureHandler props |
| windowSize || 0 | number | 能响应平移手势事件的最大 item 数量,0 表示所有元素都会先响应 |
| onProgressChange || | onProgressChange?: (offsetProgress: number,absoluteProgress: number) => void | 当滚动进度发生变化时触发 `offsetProgress`:总的偏移值 (0 390 780 ...); `absoluteProgress`:转化为 index 的进度变化 (0 1 2 ...) |
| 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 时,滚动条会停在滚动视图的尺寸的整数倍位置。 |
| snapEnabled || true | boolean | 如果启用,松开触摸会滚动到最近的元素,当 pagingEnabled=false 时有效 |
| snapEnabled || true | boolean | 如果启用,松开触摸会滚动到最近的元素,当 pagingEnabled=false 时有效 |
| enabled || true | boolean | 当值为 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
Original file line number Diff line number Diff line change
Expand Up @@ -78,7 +78,7 @@ function Index() {
autoPlayInterval={0}
data={[...new Array(6).keys()]}
renderItem={() => text}
panGestureHandlerProps={{ enabled: false }}
enabled={false}
/>
</View>
);
Expand Down
2 changes: 2 additions & 0 deletions src/ScrollViewGesture.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -46,6 +46,7 @@ const IScrollViewGesture: React.FC<Props> = (props) => {
loop: infinite,
scrollAnimationDuration,
withAnimation,
enabled,
},
} = React.useContext(CTX);

Expand Down Expand Up @@ -275,6 +276,7 @@ const IScrollViewGesture: React.FC<Props> = (props) => {
>
<PanGestureHandler
{...panGestureHandlerProps}
enabled={enabled}
onGestureEvent={panGestureEventHandler}
>
{props.children}
Expand Down
2 changes: 2 additions & 0 deletions src/hooks/useInitProps.ts
Original file line number Diff line number Diff line change
Expand Up @@ -27,6 +27,7 @@ export function useInitProps<T>(
defaultIndex = 0,
data: rawData = [],
loop = true,
enabled = true,
autoPlayInterval: _autoPlayInterval = 1000,
scrollAnimationDuration = 500,
style = {},
Expand Down Expand Up @@ -68,6 +69,7 @@ export function useInitProps<T>(
data,
rawData,
loop,
enabled,
autoPlayInterval,
scrollAnimationDuration,
style,
Expand Down
7 changes: 6 additions & 1 deletion src/types.ts
Original file line number Diff line number Diff line change
Expand Up @@ -99,7 +99,7 @@ export type TCarouselProps<T = any> = {
* PanGestureHandler props
*/
panGestureHandlerProps?: Partial<
Omit<PanGestureHandlerProps, 'onHandlerStateChange'>
Omit<PanGestureHandlerProps, 'onHandlerStateChange' | 'enabled'>
>;
/**
* Determines the maximum number of items will respond to pan gesture events,
Expand All @@ -125,6 +125,11 @@ export type TCarouselProps<T = any> = {
* @default true
*/
snapEnabled?: boolean;
/**
* If false, Carousel will not respond to any gestures.
* @default true
*/
enabled?: boolean;
/**
* Specifies the scrolling animation effect.
*/
Expand Down

0 comments on commit e713e12

Please sign in to comment.