feat(components): view-pager - add swipeEnabled prop

akveo · Mar 3, 2021 · c9e791f · c9e791f
1 parent 310e5c5
commit c9e791f
Show file tree

Hide file tree

Showing 2 changed files with 36 additions and 3 deletions.
diff --git a/src/components/ui/viewPager/viewPager.component.tsx b/src/components/ui/viewPager/viewPager.component.tsx
@@ -28,6 +28,7 @@ import {
 export interface ViewPagerProps<ChildrenProps = {}> extends ViewProps {
   children?: ChildrenWithProps<ChildrenProps>;
   selectedIndex?: number;
+  swipeEnabled?: boolean;
   onSelect?: (index: number) => void;
   shouldLoadComponent?: (index: number) => boolean;
   onOffsetChange?: (offset: number) => void;
@@ -44,6 +45,8 @@ export type ViewPagerElement = React.ReactElement<ViewPagerProps>;
  *
  * @property {number} selectedIndex - Index of currently selected view.
  *
+ * @property {boolean} swipeEnabled - Disable swipe gesture, but keeping animations.
+ *
  * @property {(number) => void} onSelect - Called when view becomes visible.
  *
  * @property {(number) => boolean} shouldLoadComponent - A function to determine
@@ -65,6 +68,7 @@ export class ViewPager<ChildrenProps = {}> extends React.Component<ViewPagerProp
 
   static defaultProps: Partial<ViewPagerProps> = {
     selectedIndex: 0,
+    swipeEnabled: true,
     shouldLoadComponent: (): boolean => true,
   };
 
@@ -191,14 +195,16 @@ export class ViewPager<ChildrenProps = {}> extends React.Component<ViewPagerProp
   };
 
   public render(): React.ReactElement<ViewProps> {
-    const { style, children, ...viewProps } = this.props;
+    const { style, children, swipeEnabled, ...viewProps } = this.props;
+
+    const panResponderConfig = swipeEnabled ? this.panResponder.panHandlers : null;
+    const animatedViewProps = { ...viewProps, ...panResponderConfig  };
 
     return (
       <Animated.View
-        {...viewProps}
+        {...animatedViewProps}
         style={[styles.container, style, this.getContainerStyle()]}
         onLayout={this.onLayout}
-        {...this.panResponder.panHandlers}
         // @ts-ignore
         ref={this.containerRef}>
         {this.renderComponentChildren(children)}

diff --git a/src/components/ui/viewPager/viewPager.spec.tsx b/src/components/ui/viewPager/viewPager.spec.tsx
@@ -14,6 +14,10 @@ import {
 
 describe('@view-pager: component checks', () => {
 
+  const getComponentProps = (component) => {
+    return component._fiber.pendingProps;
+  };
+
   const TestViewPager = (props?: ViewPagerProps): React.ReactElement<ViewPagerProps> => (
     <ViewPager {...props}/>
   );
@@ -54,5 +58,28 @@ describe('@view-pager: component checks', () => {
     expect(component.queryByText('Tab 1')).toBeFalsy();
   });
 
+  it('should disable swipe gesture when swipeEnabled is false', () => {
+    const component = render(
+      <TestViewPager swipeEnabled={false}>
+        <Text>Tab 0</Text>
+        <Text>Tab 1</Text>
+      </TestViewPager>,
+    );
+
+    const viewPager = component.UNSAFE_queryByType(ViewPager);
+
+    expect(getComponentProps(viewPager).onStartShouldSetResponder).toBeFalsy();
+    expect(getComponentProps(viewPager).onMoveShouldSetResponder).toBeFalsy();
+    expect(getComponentProps(viewPager).onMoveShouldSetResponderCapture).toBeFalsy();
+    expect(getComponentProps(viewPager).onResponderGrant).toBeFalsy();
+    expect(getComponentProps(viewPager).onResponderReject).toBeFalsy();
+    expect(getComponentProps(viewPager).onResponderRelease).toBeFalsy();
+    expect(getComponentProps(viewPager).onResponderStart).toBeFalsy();
+    expect(getComponentProps(viewPager).onResponderMove).toBeFalsy();
+    expect(getComponentProps(viewPager).onResponderEnd).toBeFalsy();
+    expect(getComponentProps(viewPager).onResponderTerminate).toBeFalsy();
+    expect(getComponentProps(viewPager).onResponderTerminationRequest).toBeFalsy();
+  });
+
 });