From c9e791f2846625b83fe44ada86923788ef7a6226 Mon Sep 17 00:00:00 2001 From: Petrus Pierre Date: Wed, 3 Mar 2021 09:19:54 -0300 Subject: [PATCH] feat(components): view-pager - add swipeEnabled prop --- .../ui/viewPager/viewPager.component.tsx | 12 ++++++--- .../ui/viewPager/viewPager.spec.tsx | 27 +++++++++++++++++++ 2 files changed, 36 insertions(+), 3 deletions(-) diff --git a/src/components/ui/viewPager/viewPager.component.tsx b/src/components/ui/viewPager/viewPager.component.tsx index 59986e807..2bcdd69b9 100644 --- a/src/components/ui/viewPager/viewPager.component.tsx +++ b/src/components/ui/viewPager/viewPager.component.tsx @@ -28,6 +28,7 @@ import { export interface ViewPagerProps extends ViewProps { children?: ChildrenWithProps; 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; * * @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 extends React.Component = { selectedIndex: 0, + swipeEnabled: true, shouldLoadComponent: (): boolean => true, }; @@ -191,14 +195,16 @@ export class ViewPager extends React.Component { - 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 ( {this.renderComponentChildren(children)} diff --git a/src/components/ui/viewPager/viewPager.spec.tsx b/src/components/ui/viewPager/viewPager.spec.tsx index e0618b099..965a8afc3 100644 --- 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 => ( ); @@ -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( + + Tab 0 + Tab 1 + , + ); + + 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(); + }); + });