Browse Source

Pass component passProps to componentDidAppear event (#5139)

Pass component passProps to componentDidAppear event
Yogev Ben David 5 years ago
parent
commit
c226a7d551

+ 2
- 1
docs/docs/events.md View File

45
 
45
 
46
 ```js
46
 ```js
47
 // Subscribe
47
 // Subscribe
48
-const screenEventListener = Navigation.events().registerComponentDidAppearListener(({ componentId, componentName }) => {
48
+const screenEventListener = Navigation.events().registerComponentDidAppearListener(({ componentId, componentName, passProps }) => {
49
 
49
 
50
 });
50
 });
51
 ...
51
 ...
56
 |:--------------------:|:-----|
56
 |:--------------------:|:-----|
57
 |**componentId**| Id of the appearing component|
57
 |**componentId**| Id of the appearing component|
58
 |**componentName**|Registered name used when registering the component with `Navigation.registerComponent()`|
58
 |**componentName**|Registered name used when registering the component with `Navigation.registerComponent()`|
59
+|**passProps**| props passed to the component|
59
 
60
 
60
 ## componentDidDisappear
61
 ## componentDidDisappear
61
 Called each time this component disappears from screen (detached from the view heirarchy)
62
 Called each time this component disappears from screen (detached from the view heirarchy)

+ 1
- 1
lib/src/Navigation.ts View File

44
     this.store = new Store();
44
     this.store = new Store();
45
     this.nativeEventsReceiver = new NativeEventsReceiver();
45
     this.nativeEventsReceiver = new NativeEventsReceiver();
46
     this.uniqueIdProvider = new UniqueIdProvider();
46
     this.uniqueIdProvider = new UniqueIdProvider();
47
-    this.componentEventsObserver = new ComponentEventsObserver(this.nativeEventsReceiver);
47
+    this.componentEventsObserver = new ComponentEventsObserver(this.nativeEventsReceiver, this.store);
48
     const appRegistryService = new AppRegistryService();
48
     const appRegistryService = new AppRegistryService();
49
     this.componentRegistry = new ComponentRegistry(
49
     this.componentRegistry = new ComponentRegistry(
50
       this.store,
50
       this.store,

+ 23
- 3
lib/src/events/ComponentEventsObserver.test.tsx View File

3
 import { ComponentEventsObserver } from './ComponentEventsObserver';
3
 import { ComponentEventsObserver } from './ComponentEventsObserver';
4
 import { NativeEventsReceiver } from '../adapters/NativeEventsReceiver.mock';
4
 import { NativeEventsReceiver } from '../adapters/NativeEventsReceiver.mock';
5
 import { EventSubscription } from '../interfaces/EventSubscription';
5
 import { EventSubscription } from '../interfaces/EventSubscription';
6
+import { Store } from '../components/Store';
7
+import { ComponentDidAppearEvent } from '../interfaces/ComponentEvents';
6
 
8
 
7
 describe('ComponentEventsObserver', () => {
9
 describe('ComponentEventsObserver', () => {
8
   const mockEventsReceiver = new NativeEventsReceiver();
10
   const mockEventsReceiver = new NativeEventsReceiver();
11
+  const mockStore = new Store();
9
   const didAppearFn = jest.fn();
12
   const didAppearFn = jest.fn();
10
   const didDisappearFn = jest.fn();
13
   const didDisappearFn = jest.fn();
11
   const didMountFn = jest.fn();
14
   const didMountFn = jest.fn();
84
       willUnmountFn();
87
       willUnmountFn();
85
     }
88
     }
86
 
89
 
87
-    componentDidAppear() {
88
-      didAppearFn();
90
+    componentDidAppear(event: ComponentDidAppearEvent) {
91
+      didAppearFn(event);
89
     }
92
     }
90
 
93
 
91
     componentDidDisappear() {
94
     componentDidDisappear() {
119
 
122
 
120
   beforeEach(() => {
123
   beforeEach(() => {
121
     jest.clearAllMocks();
124
     jest.clearAllMocks();
122
-    uut = new ComponentEventsObserver(mockEventsReceiver);
125
+    uut = new ComponentEventsObserver(mockEventsReceiver, mockStore);
123
   });
126
   });
124
 
127
 
125
   it(`bindComponent expects a component with componentId`, () => {
128
   it(`bindComponent expects a component with componentId`, () => {
192
     expect(willUnmountFn).toHaveBeenCalledTimes(1);
195
     expect(willUnmountFn).toHaveBeenCalledTimes(1);
193
   });
196
   });
194
 
197
 
198
+  it(`componentDidAppear should receive component props from store`, () => {
199
+    const event = {
200
+      componentId: 'myCompId',
201
+      passProps: {
202
+        propA: 'propA'
203
+      },
204
+      componentName: 'doesnt matter'
205
+    }
206
+    renderer.create(<BoundScreen componentId={event.componentId} />);
207
+    mockStore.setPropsForId(event.componentId, event.passProps)
208
+    expect(didAppearFn).not.toHaveBeenCalled();
209
+
210
+    uut.notifyComponentDidAppear({ componentId: 'myCompId', componentName: 'doesnt matter' });
211
+    expect(didAppearFn).toHaveBeenCalledTimes(1);
212
+    expect(didAppearFn).toHaveBeenCalledWith(event);
213
+  });
214
+
195
   it(`doesnt call other componentIds`, () => {
215
   it(`doesnt call other componentIds`, () => {
196
     renderer.create(<BoundScreen componentId={'myCompId'} />);
216
     renderer.create(<BoundScreen componentId={'myCompId'} />);
197
     uut.notifyComponentDidAppear({ componentId: 'other', componentName: 'doesnt matter' });
217
     uut.notifyComponentDidAppear({ componentId: 'other', componentName: 'doesnt matter' });

+ 6
- 1
lib/src/events/ComponentEventsObserver.ts View File

11
   ModalDismissedEvent
11
   ModalDismissedEvent
12
 } from '../interfaces/ComponentEvents';
12
 } from '../interfaces/ComponentEvents';
13
 import { NativeEventsReceiver } from '../adapters/NativeEventsReceiver';
13
 import { NativeEventsReceiver } from '../adapters/NativeEventsReceiver';
14
+import { Store } from '../components/Store';
14
 
15
 
15
 type ReactComponentWithIndexing = React.Component<any> & Record<string, any>;
16
 type ReactComponentWithIndexing = React.Component<any> & Record<string, any>;
16
 
17
 
18
   private listeners: Record<string, Record<string, ReactComponentWithIndexing>> = {};
19
   private listeners: Record<string, Record<string, ReactComponentWithIndexing>> = {};
19
   private alreadyRegistered = false;
20
   private alreadyRegistered = false;
20
 
21
 
21
-  constructor(private readonly nativeEventsReceiver: NativeEventsReceiver) {
22
+  constructor(
23
+    private readonly nativeEventsReceiver: NativeEventsReceiver,
24
+    private readonly store: Store
25
+  ) {
22
     this.notifyComponentDidAppear = this.notifyComponentDidAppear.bind(this);
26
     this.notifyComponentDidAppear = this.notifyComponentDidAppear.bind(this);
23
     this.notifyComponentDidDisappear = this.notifyComponentDidDisappear.bind(this);
27
     this.notifyComponentDidDisappear = this.notifyComponentDidDisappear.bind(this);
24
     this.notifyNavigationButtonPressed = this.notifyNavigationButtonPressed.bind(this);
28
     this.notifyNavigationButtonPressed = this.notifyNavigationButtonPressed.bind(this);
60
   }
64
   }
61
 
65
 
62
   notifyComponentDidAppear(event: ComponentDidAppearEvent) {
66
   notifyComponentDidAppear(event: ComponentDidAppearEvent) {
67
+    event.passProps = this.store.getPropsForId(event.componentId);
63
     this.triggerOnAllListenersByComponentId(event, 'componentDidAppear');
68
     this.triggerOnAllListenersByComponentId(event, 'componentDidAppear');
64
   }
69
   }
65
 
70
 

+ 1
- 0
lib/src/interfaces/ComponentEvents.ts View File

4
 
4
 
5
 export interface ComponentDidAppearEvent extends ComponentEvent {
5
 export interface ComponentDidAppearEvent extends ComponentEvent {
6
   componentName: string;
6
   componentName: string;
7
+  passProps?: object
7
 }
8
 }
8
 
9
 
9
 export interface ComponentDidDisappearEvent extends ComponentEvent {
10
 export interface ComponentDidDisappearEvent extends ComponentEvent {