Pass component passProps to componentDidAppear event (#5139)

Pass component passProps to componentDidAppear event
wix · May 23, 2019 · c226a7d · c226a7d
1 parent 0720bda
commit c226a7d
Show file tree

Hide file tree

Showing 5 changed files with 33 additions and 6 deletions.
diff --git 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
@@ -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
@@ -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(<BoundScreen componentId={event.componentId} />);
+    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(<BoundScreen componentId={'myCompId'} />);
     uut.notifyComponentDidAppear({ componentId: 'other', componentName: 'doesnt matter' });

diff --git a/lib/src/events/ComponentEventsObserver.ts b/lib/src/events/ComponentEventsObserver.ts
@@ -11,14 +11,18 @@ import {
   ModalDismissedEvent
 } from '../interfaces/ComponentEvents';
 import { NativeEventsReceiver } from '../adapters/NativeEventsReceiver';
+import { Store } from '../components/Store';
 
 type ReactComponentWithIndexing = React.Component<any> & Record<string, any>;
 
 export class ComponentEventsObserver {
   private listeners: Record<string, Record<string, ReactComponentWithIndexing>> = {};
   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
@@ -4,6 +4,7 @@ export interface ComponentEvent {
 
 export interface ComponentDidAppearEvent extends ComponentEvent {
   componentName: string;
+  passProps?: object
 }
 
 export interface ComponentDidDisappearEvent extends ComponentEvent {