From c226a7d55193c9c630e102dce35bc02243222921 Mon Sep 17 00:00:00 2001 From: Yogev Ben David Date: Thu, 23 May 2019 12:28:49 +0300 Subject: [PATCH] Pass component passProps to componentDidAppear event (#5139) Pass component passProps to componentDidAppear event --- docs/docs/events.md | 3 ++- lib/src/Navigation.ts | 2 +- .../events/ComponentEventsObserver.test.tsx | 26 ++++++++++++++++--- lib/src/events/ComponentEventsObserver.ts | 7 ++++- lib/src/interfaces/ComponentEvents.ts | 1 + 5 files changed, 33 insertions(+), 6 deletions(-) diff --git a/docs/docs/events.md b/docs/docs/events.md index ca7ea74e578..991e62c1ebc 100644 --- a/docs/docs/events.md +++ b/docs/docs/events.md @@ -45,7 +45,7 @@ This event can be observed globally as well: ```js // Subscribe -const screenEventListener = Navigation.events().registerComponentDidAppearListener(({ componentId, componentName }) => { +const screenEventListener = Navigation.events().registerComponentDidAppearListener(({ componentId, componentName, passProps }) => { }); ... @@ -56,6 +56,7 @@ screenEventListener.remove(); |:--------------------:|:-----| |**componentId**| Id of the appearing component| |**componentName**|Registered name used when registering the component with `Navigation.registerComponent()`| +|**passProps**| props passed to the component| ## componentDidDisappear Called each time this component disappears from screen (detached from the view heirarchy) diff --git a/lib/src/Navigation.ts b/lib/src/Navigation.ts index 5afe74c4311..2dbeb859fb1 100644 --- a/lib/src/Navigation.ts +++ b/lib/src/Navigation.ts @@ -44,7 +44,7 @@ export class NavigationRoot { this.store = new Store(); this.nativeEventsReceiver = new NativeEventsReceiver(); this.uniqueIdProvider = new UniqueIdProvider(); - this.componentEventsObserver = new ComponentEventsObserver(this.nativeEventsReceiver); + this.componentEventsObserver = new ComponentEventsObserver(this.nativeEventsReceiver, this.store); const appRegistryService = new AppRegistryService(); this.componentRegistry = new ComponentRegistry( this.store, diff --git a/lib/src/events/ComponentEventsObserver.test.tsx b/lib/src/events/ComponentEventsObserver.test.tsx index 0f4c9342c72..2394601bfb3 100644 --- a/lib/src/events/ComponentEventsObserver.test.tsx +++ b/lib/src/events/ComponentEventsObserver.test.tsx @@ -3,9 +3,12 @@ import * as renderer from 'react-test-renderer'; import { ComponentEventsObserver } from './ComponentEventsObserver'; import { NativeEventsReceiver } from '../adapters/NativeEventsReceiver.mock'; import { EventSubscription } from '../interfaces/EventSubscription'; +import { Store } from '../components/Store'; +import { ComponentDidAppearEvent } from '../interfaces/ComponentEvents'; describe('ComponentEventsObserver', () => { const mockEventsReceiver = new NativeEventsReceiver(); + const mockStore = new Store(); const didAppearFn = jest.fn(); const didDisappearFn = jest.fn(); const didMountFn = jest.fn(); @@ -84,8 +87,8 @@ describe('ComponentEventsObserver', () => { willUnmountFn(); } - componentDidAppear() { - didAppearFn(); + componentDidAppear(event: ComponentDidAppearEvent) { + didAppearFn(event); } componentDidDisappear() { @@ -119,7 +122,7 @@ describe('ComponentEventsObserver', () => { beforeEach(() => { jest.clearAllMocks(); - uut = new ComponentEventsObserver(mockEventsReceiver); + uut = new ComponentEventsObserver(mockEventsReceiver, mockStore); }); it(`bindComponent expects a component with componentId`, () => { @@ -192,6 +195,23 @@ describe('ComponentEventsObserver', () => { expect(willUnmountFn).toHaveBeenCalledTimes(1); }); + it(`componentDidAppear should receive component props from store`, () => { + const event = { + componentId: 'myCompId', + passProps: { + propA: 'propA' + }, + componentName: 'doesnt matter' + } + renderer.create(); + mockStore.setPropsForId(event.componentId, event.passProps) + expect(didAppearFn).not.toHaveBeenCalled(); + + uut.notifyComponentDidAppear({ componentId: 'myCompId', componentName: 'doesnt matter' }); + expect(didAppearFn).toHaveBeenCalledTimes(1); + expect(didAppearFn).toHaveBeenCalledWith(event); + }); + it(`doesnt call other componentIds`, () => { renderer.create(); uut.notifyComponentDidAppear({ componentId: 'other', componentName: 'doesnt matter' }); diff --git a/lib/src/events/ComponentEventsObserver.ts b/lib/src/events/ComponentEventsObserver.ts index 2f63d34c582..30466557b3b 100644 --- a/lib/src/events/ComponentEventsObserver.ts +++ b/lib/src/events/ComponentEventsObserver.ts @@ -11,6 +11,7 @@ import { ModalDismissedEvent } from '../interfaces/ComponentEvents'; import { NativeEventsReceiver } from '../adapters/NativeEventsReceiver'; +import { Store } from '../components/Store'; type ReactComponentWithIndexing = React.Component & Record; @@ -18,7 +19,10 @@ export class ComponentEventsObserver { private listeners: Record> = {}; private alreadyRegistered = false; - constructor(private readonly nativeEventsReceiver: NativeEventsReceiver) { + constructor( + private readonly nativeEventsReceiver: NativeEventsReceiver, + private readonly store: Store + ) { this.notifyComponentDidAppear = this.notifyComponentDidAppear.bind(this); this.notifyComponentDidDisappear = this.notifyComponentDidDisappear.bind(this); this.notifyNavigationButtonPressed = this.notifyNavigationButtonPressed.bind(this); @@ -60,6 +64,7 @@ export class ComponentEventsObserver { } notifyComponentDidAppear(event: ComponentDidAppearEvent) { + event.passProps = this.store.getPropsForId(event.componentId); this.triggerOnAllListenersByComponentId(event, 'componentDidAppear'); } diff --git a/lib/src/interfaces/ComponentEvents.ts b/lib/src/interfaces/ComponentEvents.ts index aea0ebad207..8b904022d52 100644 --- a/lib/src/interfaces/ComponentEvents.ts +++ b/lib/src/interfaces/ComponentEvents.ts @@ -4,6 +4,7 @@ export interface ComponentEvent { export interface ComponentDidAppearEvent extends ComponentEvent { componentName: string; + passProps?: object } export interface ComponentDidDisappearEvent extends ComponentEvent {