feat: add enabled props

when false, Carousel will not respond to any gestures
dohooo · Feb 19, 2022 · e713e12 · e713e12
1 parent 43c84c2
commit e713e12
Show file tree

Hide file tree

Showing 6 changed files with 16 additions and 5 deletions.
diff --git a/docs/props.md b/docs/props.md
@@ -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)                                             |
 

diff --git a/docs/props.zh-CN.md b/docs/props.zh-CN.md
@@ -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)                                                                    |
 

diff --git a/example/src/marquee/index.tsx b/example/src/marquee/index.tsx
@@ -78,7 +78,7 @@ function Index() {
                             autoPlayInterval={0}
                             data={[...new Array(6).keys()]}
                             renderItem={() => text}
-                            panGestureHandlerProps={{ enabled: false }}
+                            enabled={false}
                         />
                     </View>
                 );

diff --git a/src/ScrollViewGesture.tsx b/src/ScrollViewGesture.tsx
@@ -46,6 +46,7 @@ const IScrollViewGesture: React.FC<Props> = (props) => {
             loop: infinite,
             scrollAnimationDuration,
             withAnimation,
+            enabled,
         },
     } = React.useContext(CTX);
 
@@ -275,6 +276,7 @@ const IScrollViewGesture: React.FC<Props> = (props) => {
         >
             <PanGestureHandler
                 {...panGestureHandlerProps}
+                enabled={enabled}
                 onGestureEvent={panGestureEventHandler}
             >
                 {props.children}

diff --git a/src/hooks/useInitProps.ts b/src/hooks/useInitProps.ts
@@ -27,6 +27,7 @@ export function useInitProps<T>(
         defaultIndex = 0,
         data: rawData = [],
         loop = true,
+        enabled = true,
         autoPlayInterval: _autoPlayInterval = 1000,
         scrollAnimationDuration = 500,
         style = {},
@@ -68,6 +69,7 @@ export function useInitProps<T>(
         data,
         rawData,
         loop,
+        enabled,
         autoPlayInterval,
         scrollAnimationDuration,
         style,

diff --git a/src/types.ts b/src/types.ts
@@ -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,
@@ -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.
      */