Pass componentName to NavigationProps (#7757)

* Pass componentName to NavigationProps * Update NavigationComponentProps.ts
wix · Jul 30, 2023 · 39e3cb1 · 39e3cb1
1 parent 1dd7eed
commit 39e3cb1
Show file tree

Hide file tree

Showing 49 changed files with 117 additions and 117 deletions.
diff --git a/lib/src/components/ComponentWrapper.test.tsx b/lib/src/components/ComponentWrapper.test.tsx
@@ -117,6 +117,7 @@ describe('ComponentWrapper', () => {
     renderer.create(<NavigationComponent componentId={'component123'} />);
     expect(myComponentProps).toEqual({
       componentId: 'component123',
+      componentName,
       numberProp: 1,
       stringProp: 'hello',
       objectProp: { a: 2 },
@@ -251,7 +252,10 @@ describe('ComponentWrapper', () => {
     const NavigationComponent = uut.wrap(componentName, generator, store, componentEventsObserver);
     const tree = renderer.create(<NavigationComponent componentId={'component123'} />);
     expect(tree.root.findByType(View)).toBeDefined();
-    expect(tree.root.findByType(MyComponent).props).toEqual({ componentId: 'component123' });
+    expect(tree.root.findByType(MyComponent).props).toEqual({
+      componentId: 'component123',
+      componentName,
+    });
   });
 
   it('sets component instance in store when constructed', () => {

diff --git a/lib/src/components/ComponentWrapper.tsx b/lib/src/components/ComponentWrapper.tsx
@@ -79,7 +79,11 @@ export class ComponentWrapper {
 
       render() {
         return (
-          <GeneratedComponentClass {...this.state.allProps} componentId={this.state.componentId} />
+          <GeneratedComponentClass
+            {...this.state.allProps}
+            componentId={this.state.componentId}
+            componentName={componentName}
+          />
         );
       }
 

diff --git a/lib/src/interfaces/NavigationComponent.ts b/lib/src/interfaces/NavigationComponent.ts
@@ -9,11 +9,11 @@ import {
   ComponentDidAppearEvent,
   ComponentDidDisappearEvent,
 } from './ComponentEvents';
-import { NavigationComponentProps } from './NavigationComponentProps';
+import { NavigationProps } from './NavigationComponentProps';
 import { Options } from './Options';
 
 export class NavigationComponent<Props = {}, State = {}, Snapshot = any> extends React.Component<
-  Props & NavigationComponentProps,
+  Props & NavigationProps,
   State,
   Snapshot
 > {

diff --git a/lib/src/interfaces/NavigationComponentProps.ts b/lib/src/interfaces/NavigationComponentProps.ts
@@ -1,3 +1,11 @@
+/**
+ * @deprecated This type replaced with NavigationProps
+ */
 export interface NavigationComponentProps {
   componentId: string;
 }
+
+export interface NavigationProps {
+  componentId: string;
+  componentName: string;
+}
diff --git a/lib/src/interfaces/NavigationFunctionComponent.ts b/lib/src/interfaces/NavigationFunctionComponent.ts
@@ -1,8 +1,8 @@
 import React from 'react';
-import { NavigationComponentProps } from './NavigationComponentProps';
+import { NavigationProps } from './NavigationComponentProps';
 import { Options } from './Options';
 
 export interface NavigationFunctionComponent<Props = {}>
-  extends React.FunctionComponent<Props & NavigationComponentProps> {
-  options?: ((props: Props & NavigationComponentProps) => Options) | Options;
+  extends React.FunctionComponent<Props & NavigationProps> {
+  options?: ((props: Props & NavigationProps) => Options) | Options;
 }
diff --git a/playground/src/components/TopBarBackground.tsx b/playground/src/components/TopBarBackground.tsx
@@ -1,8 +1,8 @@
 import React from 'react';
 import { StyleSheet, View, ViewStyle } from 'react-native';
-import { NavigationComponentProps } from 'react-native-navigation';
+import { NavigationProps } from 'react-native-navigation';
 
-interface TopBarBackgroundProps extends NavigationComponentProps {
+interface TopBarBackgroundProps extends NavigationProps {
   color: string;
 }
 

diff --git a/playground/src/screens/Alert.tsx b/playground/src/screens/Alert.tsx
@@ -1,9 +1,9 @@
 import React from 'react';
 import { StyleSheet, Text, Button, View, ViewStyle, TextStyle } from 'react-native';
-import { Navigation, NavigationComponentProps } from 'react-native-navigation';
+import { Navigation, NavigationProps } from 'react-native-navigation';
 import testIDs from '../testIDs';
 
-interface Props extends NavigationComponentProps {
+interface Props extends NavigationProps {
   title: string;
   message: string;
 }

diff --git a/playground/src/screens/BackButtonScreen.tsx b/playground/src/screens/BackButtonScreen.tsx
@@ -1,5 +1,5 @@
 import React from 'react';
-import { NavigationComponentProps, Options } from 'react-native-navigation';
+import { NavigationProps, Options } from 'react-native-navigation';
 import Root from '../components/Root';
 import Button from '../components/Button';
 import Screens from './Screens';
@@ -17,7 +17,7 @@ const {
   BACK_BUTTON,
 } = testIDs;
 
-export default class BackButtonScreen extends React.Component<NavigationComponentProps> {
+export default class BackButtonScreen extends React.Component<NavigationProps> {
   visible: boolean = true;
   static options(): Options {
     return {

diff --git a/playground/src/screens/Button.tsx b/playground/src/screens/Button.tsx
@@ -9,9 +9,9 @@ import {
   ViewStyle,
   TextStyle,
 } from 'react-native';
-import { Navigation, NavigationComponentProps } from 'react-native-navigation';
+import { Navigation, NavigationProps } from 'react-native-navigation';
 
-interface Props extends NavigationComponentProps {
+interface Props extends NavigationProps {
   title: string;
   accessibilityLabel?: string;
   color: string;

diff --git a/playground/src/screens/ContextScreen.tsx b/playground/src/screens/ContextScreen.tsx
@@ -1,10 +1,10 @@
 import React from 'react';
 import { Text, Button, StyleSheet, ViewStyle, TextStyle } from 'react-native';
-import { NavigationComponentProps } from 'react-native-navigation';
+import { NavigationProps } from 'react-native-navigation';
 import Root from '../components/Root';
 import { GlobalContext, Context } from '../context';
 
-export default class ContextScreen extends React.Component<NavigationComponentProps> {
+export default class ContextScreen extends React.Component<NavigationProps> {
   static contextType = Context;
 
   static options() {

diff --git a/playground/src/screens/CustomTextButton.tsx b/playground/src/screens/CustomTextButton.tsx
@@ -1,8 +1,8 @@
 import React from 'react';
 import { StyleSheet, View, TouchableOpacity, Text, Alert } from 'react-native';
-import { NavigationComponentProps } from 'react-native-navigation';
+import { NavigationProps } from 'react-native-navigation';
 
-interface Props extends NavigationComponentProps {
+interface Props extends NavigationProps {
   title: string;
 }
 

diff --git a/playground/src/screens/CustomTopBar.tsx b/playground/src/screens/CustomTopBar.tsx
@@ -1,8 +1,8 @@
 import React from 'react';
 import { StyleSheet, View, TouchableOpacity, Text, Alert } from 'react-native';
-import { NavigationComponentProps } from 'react-native-navigation';
+import { NavigationProps } from 'react-native-navigation';
 
-interface Props extends NavigationComponentProps {
+interface Props extends NavigationProps {
   title: string;
   text: string;
   clickable: boolean;

diff --git a/playground/src/screens/ExternalComponentScreen.tsx b/playground/src/screens/ExternalComponentScreen.tsx
@@ -1,5 +1,5 @@
 import React from 'react';
-import { NavigationComponentProps } from 'react-native-navigation';
+import { NavigationProps } from 'react-native-navigation';
 import Root from '../components/Root';
 import Button from '../components/Button';
 import Screens from './Screens';
@@ -9,7 +9,7 @@ import testIDs from '../testIDs';
 
 const { PUSH_BTN, MODAL_BTN, REGISTER_MODAL_DISMISS_EVENT_BTN } = testIDs;
 
-export default class ExternalComponentScreen extends React.Component<NavigationComponentProps> {
+export default class ExternalComponentScreen extends React.Component<NavigationProps> {
   static options() {
     return {
       topBar: {

diff --git a/playground/src/screens/FirstBottomTabScreen.tsx b/playground/src/screens/FirstBottomTabScreen.tsx
@@ -1,5 +1,5 @@
 import React from 'react';
-import { NavigationComponentProps, Options } from 'react-native-navigation';
+import { NavigationProps, Options } from 'react-native-navigation';
 import Root from '../components/Root';
 import Button from '../components/Button';
 import Navigation from './../services/Navigation';
@@ -18,7 +18,7 @@ const {
   FIRST_TAB_BAR_BUTTON,
 } = testIDs;
 
-export default class FirstBottomTabScreen extends React.Component<NavigationComponentProps> {
+export default class FirstBottomTabScreen extends React.Component<NavigationProps> {
   static options(): Options {
     return {
       layout: {

diff --git a/playground/src/screens/FlatListScreen.tsx b/playground/src/screens/FlatListScreen.tsx
@@ -2,7 +2,7 @@ import React from 'react';
 import { FlatList, View, Text } from 'react-native';
 import {
   Navigation,
-  NavigationComponentProps,
+  NavigationProps,
   NavigationButtonPressedEvent,
   NavigationComponent,
   Options,
@@ -23,7 +23,7 @@ type FakeDataItem = {
   gender: string;
 };
 
-export default class FlatListScreen extends NavigationComponent<NavigationComponentProps, State> {
+export default class FlatListScreen extends NavigationComponent<NavigationProps, State> {
   static options(): Options {
     return {
       topBar: {
@@ -63,7 +63,7 @@ export default class FlatListScreen extends NavigationComponent<NavigationCompon
     };
   }
 
-  constructor(props: NavigationComponentProps) {
+  constructor(props: NavigationProps) {
     super(props);
     Navigation.events().bindComponent(this);
     this.state = { isFetching: false, shouldHideOnScroll: false };

diff --git a/playground/src/screens/KeyboardScreen.tsx b/playground/src/screens/KeyboardScreen.tsx
@@ -1,7 +1,7 @@
 import React from 'react';
 import { View, ScrollView, Dimensions, StyleSheet, Image, TextInput, Text } from 'react-native';
 import {
-  NavigationComponentProps,
+  NavigationProps,
   NavigationComponent,
   ComponentDidAppearEvent,
 } from 'react-native-navigation';
@@ -12,7 +12,7 @@ import testIDs from '../testIDs';
 import { stack } from '../commons/Layouts';
 const screenWidth = Dimensions.get('window').width;
 const KEYBOARD_LABEL = 'Keyboard Demo';
-interface Props extends NavigationComponentProps {
+interface Props extends NavigationProps {
   title?: string;
   autoFocus?: boolean;
 }

diff --git a/playground/src/screens/LayoutsScreen.tsx b/playground/src/screens/LayoutsScreen.tsx
@@ -3,7 +3,7 @@ import {
   Options,
   OptionsModalPresentationStyle,
   NavigationComponent,
-  NavigationComponentProps,
+  NavigationProps,
 } from 'react-native-navigation';
 
 import Root from '../components/Root';
@@ -28,8 +28,8 @@ interface State {
   componentDidAppear: boolean;
 }
 
-export default class LayoutsScreen extends NavigationComponent<NavigationComponentProps, State> {
-  constructor(props: NavigationComponentProps) {
+export default class LayoutsScreen extends NavigationComponent<NavigationProps, State> {
+  constructor(props: NavigationProps) {
     super(props);
     Navigation.events().bindComponent(this);
     this.state = {

diff --git a/playground/src/screens/LazilyRegisteredScreen.tsx b/playground/src/screens/LazilyRegisteredScreen.tsx
@@ -1,12 +1,12 @@
 import React from 'react';
-import { NavigationComponentProps, Options } from 'react-native-navigation';
+import { NavigationProps, Options } from 'react-native-navigation';
 import Root from '../components/Root';
 import Button from '../components/Button';
 import Navigation from '../services/Navigation';
 import testIDs from '../testIDs';
 import Screens from './Screens';
 
-class LazilyRegisteredScreen extends React.Component<NavigationComponentProps> {
+class LazilyRegisteredScreen extends React.Component<NavigationProps> {
   static options(): Options {
     return {
       topBar: {
@@ -24,7 +24,7 @@ class LazilyRegisteredScreen extends React.Component<NavigationComponentProps> {
     };
   }
 
-  constructor(props: NavigationComponentProps) {
+  constructor(props: NavigationProps) {
     super(props);
     Navigation.events().bindComponent(this);
   }

diff --git a/playground/src/screens/LazyTopBar.tsx b/playground/src/screens/LazyTopBar.tsx
@@ -1,9 +1,9 @@
 import React from 'react';
 import { StyleSheet, View, Text } from 'react-native';
-import { NavigationComponentProps } from 'react-native-navigation';
+import { NavigationProps } from 'react-native-navigation';
 import testIDs from '../testIDs';
 
-interface Props extends NavigationComponentProps {
+interface Props extends NavigationProps {
   title: string;
   text: string;
 }

diff --git a/playground/src/screens/LifecycleScreen.tsx b/playground/src/screens/LifecycleScreen.tsx
@@ -1,5 +1,5 @@
 import React from 'react';
-import { NavigationComponentProps, NavigationButtonPressedEvent } from 'react-native-navigation';
+import { NavigationProps, NavigationButtonPressedEvent } from 'react-native-navigation';
 import Root from '../components/Root';
 import Button from '../components/Button';
 import Navigation from '../services/Navigation';
@@ -8,7 +8,7 @@ import testIDs from '../testIDs';
 
 const { PUSH_TO_TEST_DID_DISAPPEAR_BTN, DISMISS_MODAL_BTN, SCREEN_POPPED_BTN, POP_BTN } = testIDs;
 
-interface Props extends NavigationComponentProps {
+interface Props extends NavigationProps {
   isModal?: boolean;
 }
 

diff --git a/playground/src/screens/ModalCommandsScreen.tsx b/playground/src/screens/ModalCommandsScreen.tsx
@@ -1,6 +1,6 @@
 import React from 'react';
 import { Text } from 'react-native';
-import { NavigationComponent, NavigationComponentProps } from 'react-native-navigation';
+import { NavigationComponent, NavigationProps } from 'react-native-navigation';
 import Root from '../components/Root';
 import Button from '../components/Button';
 import Navigation from '../services/Navigation';
@@ -21,7 +21,7 @@ interface State {
   dismissModalPromiseResult?: string;
 }
 
-export default class ModalScreen extends NavigationComponent<NavigationComponentProps, State> {
+export default class ModalScreen extends NavigationComponent<NavigationProps, State> {
   static options() {
     return {
       topBar: {
@@ -32,7 +32,7 @@ export default class ModalScreen extends NavigationComponent<NavigationComponent
     };
   }
 
-  constructor(props: NavigationComponentProps) {
+  constructor(props: NavigationProps) {
     super(props);
     Navigation.events().registerModalDismissedListener(({ componentId }) => {
       this.setState({

diff --git a/playground/src/screens/NavigationScreen.tsx b/playground/src/screens/NavigationScreen.tsx
@@ -2,7 +2,7 @@ import React from 'react';
 import { Platform } from 'react-native';
 import {
   NavigationComponent,
-  NavigationComponentProps,
+  NavigationProps,
   OptionsModalPresentationStyle,
 } from 'react-native-navigation';
 import Root from '../components/Root';
@@ -24,7 +24,7 @@ const {
   BACK_BUTTON_SCREEN_BTN,
 } = testIDs;
 
-interface Props extends NavigationComponentProps {}
+interface Props extends NavigationProps {}
 
 export default class NavigationScreen extends NavigationComponent<Props> {
   static options() {

diff --git a/playground/src/screens/OptionsScreen.tsx b/playground/src/screens/OptionsScreen.tsx
@@ -1,5 +1,5 @@
 import React from 'react';
-import { NavigationComponent, NavigationComponentProps } from 'react-native-navigation';
+import { NavigationComponent, NavigationProps } from 'react-native-navigation';
 import Button from '../components/Button';
 import Root from '../components/Root';
 import Navigation from '../services/Navigation';
@@ -22,7 +22,7 @@ const {
   REPLACED_TAB,
 } = testIDs;
 
-interface Props extends NavigationComponentProps {}
+interface Props extends NavigationProps {}
 
 export default class Options extends NavigationComponent<Props> {
   static options() {

diff --git a/playground/src/screens/OrientationDetectScreen.tsx b/playground/src/screens/OrientationDetectScreen.tsx
@@ -10,14 +10,14 @@ import {
 } from 'react-native';
 import {
   Navigation,
-  NavigationComponentProps,
+  NavigationProps,
   LayoutOrientation,
   NavigationComponent,
   Options,
 } from 'react-native-navigation';
 import TestIDs from '../testIDs';
 
-interface Props extends NavigationComponentProps {
+interface Props extends NavigationProps {
   orientation: LayoutOrientation[]; // LayoutOrientation type is not exposed.
 }
 

diff --git a/playground/src/screens/OrientationScreen.tsx b/playground/src/screens/OrientationScreen.tsx
@@ -1,5 +1,5 @@
 import React from 'react';
-import { Navigation, NavigationComponentProps, LayoutOrientation } from 'react-native-navigation';
+import { Navigation, NavigationProps, LayoutOrientation } from 'react-native-navigation';
 import Root from '../components/Root';
 import Button from '../components/Button';
 import Screens from './Screens';
@@ -11,7 +11,7 @@ const {
   PORTRAIT_ORIENTATION_BTN,
 } = testIDs;
 
-export default class OrientationScreen extends React.Component<NavigationComponentProps> {
+export default class OrientationScreen extends React.Component<NavigationProps> {
   render() {
     return (
       <Root componentId={this.props.componentId}>