Skip to content

Commit

Permalink
Merge pull request #19 from underscopeio/feature/add-450-new-navigati…
Browse files Browse the repository at this point in the history 
…on-events

Feature/add 450 new navigation events
  • Loading branch information
@jpgarcia
jpgarcia authored Feb 16, 2020
2 parents b63743f + 6bcb61c commit a14ae7f
Show file tree
Hide file tree
Showing 5 changed files with 2,695 additions and 2,002 deletions.
69 changes: 59 additions & 10 deletions README.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -108,6 +108,32 @@ const ScreenComponent = ({ componentId }) => {
}
```

### useNavigationModalAttemptedToDismiss

Invoked only on iOS pageSheet modal when swipeToDismiss flag is set to true and modal swiped down to dismiss. [more info](https://wix.github.io/react-native-navigation/#/docs/events?id=registermodalattemptedtodismisslistenerios-13-only)

```js
import { useNavigationModalAttemptedToDismiss } from 'react-native-navigation-hooks'

const ScreenComponent = ({ componentId }) => {
// Global listener
useNavigationModalAttemptedToDismiss(e => {
console.log(`Modal attempted dismissed on componentId: ${e.componentId}`)
})

// Listen events only for this screen (componentId)
useNavigationModalAttemptedToDismiss(e => {
console.log(`Modal attempted dismissed on componentId:${e.componentId}`)
}, componentId)

return (
<View>
<Text>Screen Component</Text>
</View>
)
}
```

### useNavigationModalDismiss

Invoked when modal dismissed. [more info](https://wix.github.io/react-native-navigation/#/docs/events?id=registermodaldismissedlistener)
Expand All @@ -118,12 +144,12 @@ import { useNavigationModalDismiss } from 'react-native-navigation-hooks'
const ScreenComponent = ({ componentId }) => {
// Global listener
useNavigationModalDismiss(e => {
console.log(`Modals dismissed: ${modalsDismissed} on ${e.componentId}`)
console.log(`Modals dismissed: ${e.modalsDismissed} on componentId: ${e.componentId}`)
})

// Listen events only for this screen (componentId)
useNavigationModalDismiss(e => {
console.log(`Modals dismissed: ${modalsDismissed}`)
console.log(`Modals dismissed: ${e.modalsDismissed}`)
}, componentId)

return (
Expand All @@ -144,12 +170,12 @@ import { useNavigationScreenPop } from 'react-native-navigation-hooks'
const ScreenComponent = ({ componentId }) => {
// Global listener
useNavigationScreenPop(e => {
console.log(`Screen was popped: ${e.componentId}`)
console.log(`Screen was popped on componentId: ${e.componentId}`)
})

// Listen events only for this screen (componentId)
useNavigationScreenPop(e => {
console.log(`Screen was popped: ${e.componentId}`)
console.log(`Screen was popped on componentId: ${e.componentId}`)
}, componentId)

return (
Expand All @@ -170,7 +196,28 @@ import { useNavigationBottomTabSelect } from 'react-native-navigation-hooks'
const ScreenComponent = ({ componentId }) => {
// Global listener
useNavigationBottomTabSelect(e => {
console.log(`Selected tab id ${unselectedTabIndex}, unselected tab id ${unselectedTabIndex}`)
console.log(`Selected tab id ${e.selectedTabIndex}, unselected tab id ${e.unselectedTabIndex}`)
})

return (
<View>
<Text>Screen Component</Text>
</View>
)
}
```

### useNavigationBottomTabLongPress

Invoked when a BottomTab is long pressed by the user. [more info](https://wix.github.io/react-native-navigation/#/docs/events?id=registerbottomtablongpressedlistener)

```js
import { useNavigationBottomTabLongPress } from 'react-native-navigation-hooks'

const ScreenComponent = ({ componentId }) => {
// Global listener
useNavigationBottomTabLongPress(e => {
console.log(`Selected tab id ${e.selectedTabIndex}`)
})

return (
Expand All @@ -191,7 +238,7 @@ import { useNavigationButtonPress } from 'react-native-navigation-hooks'
const ScreenComponent = ({ componentId }) => {
// Global listener
useNavigationButtonPress(e => {
console.log(`Pressed ${e.buttonId} on ${e.componentId}`)
console.log(`Pressed ${e.buttonId} on componentId: ${e.componentId}`)
})

// Listen events only for this screen (componentId)
Expand Down Expand Up @@ -226,7 +273,9 @@ import { useNavigationSearchBarUpdate } from 'react-native-navigation-hooks'
const ScreenComponent = ({ componentId }) => {
// Global listener
useNavigationSearchBarUpdate(e => {
console.log(`Seach bar text changed to ${e.text}${e.focussed ? ' (focussed)' : ''} on ${e.componentId}`)
console.log(
`Seach bar text changed to ${e.text}${e.focussed ? ' (focussed)' : ''} on componentId: ${e.componentId}`
)
})

// Listen events only for this screen (componentId)
Expand All @@ -252,7 +301,7 @@ import { useNavigationSearchBarCancelPress } from 'react-native-navigation-hooks
const ScreenComponent = ({ componentId }) => {
// Global listener
useNavigationSearchBarCancelPress(e => {
console.log(`Seach bar cancel button pressed on ${e.componentId}`)
console.log(`Seach bar cancel button pressed on componentName: ${e.componentName}`)
})

// Listen events only for this screen (componentId)
Expand All @@ -278,12 +327,12 @@ import { useNavigationPreviewComplete } from 'react-native-navigation-hooks'
const ScreenComponent = ({ componentId }) => {
// Global listener
useNavigationPreviewComplete(e => {
console.log(`Preview component ${previewComponentId} shown on ${e.componentId}`)
console.log(`Preview component ${e.previewComponentId} shown on ${e.componentId}`)
})

// Listen events only for this screen (componentId)
useNavigationPreviewComplete(e => {
console.log(`Preview component ${previewComponentId} shown on this screen`)
console.log(`Preview component ${e.previewComponentId} shown on this screen`)
}, componentId)

return (
Expand Down
40 changes: 20 additions & 20 deletions package.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -20,7 +20,7 @@
"peerDependencies": {
"react": ">=16.8.3",
"react-native": ">=0.59.0",
"react-native-navigation": ">=4.0.7"
"react-native-navigation": ">=4.5.0"
},
"scripts": {
"lint": "eslint *.js",
Expand All @@ -30,32 +30,32 @@
"release": "semantic-release"
},
"devDependencies": {
"@babel/core": "7.7.2",
"@babel/plugin-syntax-dynamic-import": "7.2.0",
"@babel/preset-env": "7.7.1",
"@babel/preset-react": "7.7.0",
"@babel/preset-typescript": "7.7.2",
"@semantic-release/changelog": "3.0.6",
"@semantic-release/git": "7.0.18",
"@semantic-release/npm": "5.3.4",
"@babel/core": "7.8.4",
"@babel/plugin-syntax-dynamic-import": "7.8.3",
"@babel/preset-env": "7.8.4",
"@babel/preset-react": "7.8.3",
"@babel/preset-typescript": "7.8.3",
"@semantic-release/changelog": "5.0.0",
"@semantic-release/git": "9.0.0",
"@semantic-release/npm": "7.0.3",
"@testing-library/react-hooks": "3.2.1",
"@types/jest": "24.0.23",
"@types/react": "16.9.11",
"@types/jest": "25.1.2",
"@types/react": "16.9.19",
"@types/react-native": ">=0.59.0",
"babel-eslint": "10.0.3",
"eslint": "6.4.0",
"eslint-config-prettier": "6.6.0",
"eslint-plugin-prettier": "3.1.1",
"eslint-plugin-react": "7.14.3",
"eslint-plugin-react-hooks": "2.0.1",
"jest": "24.9.0",
"eslint": "6.8.0",
"eslint-config-prettier": "6.10.0",
"eslint-plugin-prettier": "3.1.2",
"eslint-plugin-react": "7.18.3",
"eslint-plugin-react-hooks": "2.3.0",
"jest": "25.1.0",
"prettier": "1.19.1",
"react": ">=16.8.3",
"react-native": ">=0.59.0",
"react-native-navigation": ">=4.0.7",
"react-native-navigation": ">=4.5.0",
"react-test-renderer": "16.12.0",
"semantic-release": "15.13.31",
"typescript": "3.7.2"
"semantic-release": "17.0.3",
"typescript": "3.7.5"
},
"release": {
"branch": "master",
Expand Down
157 changes: 157 additions & 0 deletions src/index.test.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,9 +4,11 @@ import {
ComponentDidAppearEvent,
ComponentDidDisappearEvent,
CommandCompletedEvent,
ModalAttemptedToDismissEvent,
ScreenPoppedEvent,
ModalDismissedEvent,
BottomTabSelectedEvent,
BottomTabLongPressedEvent,
NavigationButtonPressedEvent,
SearchBarUpdatedEvent,
SearchBarCancelPressedEvent,
Expand All @@ -19,9 +21,11 @@ import {
useNavigationComponentDidDisappear,
useNavigationCommand,
useNavigationCommandComplete,
useNavigationModalAttemptedToDismiss,
useNavigationModalDismiss,
useNavigationScreenPop,
useNavigationBottomTabSelect,
useNavigationBottomTabLongPress,
useNavigationButtonPress,
useNavigationSearchBarUpdate,
useNavigationSearchBarCancelPress,
Expand Down Expand Up @@ -431,6 +435,97 @@ describe('useNavigationCommandComplete', () => {
})
})

describe('useNavigationModalAttemptedToDismiss', () => {
let triggerEvent: (event: ModalAttemptedToDismissEvent) => void
let mockRemoveSubscription: () => void
let mockHandler: () => void

beforeEach(() => {
mockHandler = jest.fn(() => {})
mockRemoveSubscription = jest.fn()

Navigation.events = jest.fn().mockReturnValue({
registerModalAttemptedToDismissListener: jest.fn(callback => {
triggerEvent = callback

return { remove: mockRemoveSubscription }
}),
})
})

it('should remove the event listener on unmount', () => {
const { result, unmount } = renderHook(() => {
useNavigationModalAttemptedToDismiss(() => {})
})

unmount()

expect(mockRemoveSubscription).toBeCalledTimes(1)

expect(result.current).toBeUndefined()
expect(result.error).toBeUndefined()
})

it('should never call the handler if no event was triggered', () => {
const { result } = renderHook(() => {
useNavigationModalAttemptedToDismiss(() => {})
})

expect(mockHandler).toBeCalledTimes(0)

expect(result.current).toBeUndefined()
expect(result.error).toBeUndefined()
})

it('should call handler twice when componentId is not provided', () => {
const { result } = renderHook(() => {
useNavigationModalAttemptedToDismiss(mockHandler)
})

const event1 = { componentId: 'COMPONENT_ID_1' }
triggerEvent(event1)

const event2 = { componentId: 'COMPONENT_ID_2' }
triggerEvent(event2)

expect(mockHandler).toBeCalledTimes(2)
expect(mockHandler).toHaveBeenNthCalledWith(1, event1)
expect(mockHandler).toHaveBeenNthCalledWith(2, event2)

expect(result.current).toBeUndefined()
expect(result.error).toBeUndefined()
})

it('should call handler once if componentId provided', () => {
const { result } = renderHook(() => {
useNavigationModalAttemptedToDismiss(mockHandler, 'COMPONENT_ID_1')
})

const event = { componentId: 'COMPONENT_ID_1' }
triggerEvent(event)

expect(mockHandler).toBeCalledTimes(1)
expect(mockHandler).toBeCalledWith(event)

expect(result.current).toBeUndefined()
expect(result.error).toBeUndefined()
})

it('should never call the handler if componentId does not match', () => {
const { result } = renderHook(() => {
useNavigationModalAttemptedToDismiss(mockHandler, 'COMPONENT_ID_1')
})

const event = { componentId: 'COMPONENT_ID_2' }
triggerEvent(event)

expect(mockHandler).toBeCalledTimes(0)

expect(result.current).toBeUndefined()
expect(result.error).toBeUndefined()
})
})

describe('useNavigationScreenPop', () => {
let triggerEvent: (event: ScreenPoppedEvent) => void
let mockRemoveSubscription: () => void
Expand Down Expand Up @@ -675,6 +770,68 @@ describe('useNavigationBottomTabSelect', () => {
})
})

describe('useNavigationBottomTabLongPress', () => {
let triggerEvent: (event: BottomTabLongPressedEvent) => void
let mockRemoveSubscription: () => void
let mockHandler: () => void

beforeEach(() => {
mockHandler = jest.fn(() => {})
mockRemoveSubscription = jest.fn()

Navigation.events = jest.fn().mockReturnValue({
registerBottomTabLongPressedListener: jest.fn(callback => {
triggerEvent = callback

return { remove: mockRemoveSubscription }
}),
})
})

it('should remove the event listener on unmount', () => {
const { result, unmount } = renderHook(() => {
useNavigationBottomTabLongPress(() => {})
})

unmount()

expect(mockRemoveSubscription).toBeCalledTimes(1)

expect(result.current).toBeUndefined()
expect(result.error).toBeUndefined()
})

it('should never call the handler if no event was triggered', () => {
const { result } = renderHook(() => {
useNavigationBottomTabLongPress(() => {})
})

expect(mockHandler).toBeCalledTimes(0)

expect(result.current).toBeUndefined()
expect(result.error).toBeUndefined()
})

it('should call handler twice', () => {
const { result } = renderHook(() => {
useNavigationBottomTabLongPress(mockHandler)
})

const event1 = { selectedTabIndex: 1 }
triggerEvent(event1)

const event2 = { selectedTabIndex: 1 }
triggerEvent(event2)

expect(mockHandler).toBeCalledTimes(2)
expect(mockHandler).toHaveBeenNthCalledWith(1, event1)
expect(mockHandler).toHaveBeenNthCalledWith(2, event2)

expect(result.current).toBeUndefined()
expect(result.error).toBeUndefined()
})
})

describe('useNavigationButtonPress', () => {
let triggerEvent: (event: NavigationButtonPressedEvent) => void
let mockRemoveSubscription: () => void
Expand Down
Loading

0 comments on commit a14ae7f

Please sign in to comment.