react-native-navigation 8.7.4 → 8.7.5

package/src/Mock/Application.tsx

@@ -0,0 +1,30 @@
+import * as React from 'react';
+import { View } from 'react-native';
+import { connect } from './connect';
+
+interface ApplicationProps {
+  entryPoint: () => void;
+}
+
+export const Application = connect(
+  class extends React.Component<ApplicationProps> {
+    constructor(props: ApplicationProps) {
+      super(props);
+      props.entryPoint();
+    }
+
+    render() {
+      const { LayoutComponent } = require('./Components/LayoutComponent');
+      const { LayoutStore } = require('./Stores/LayoutStore');
+      const { Modals } = require('./Components/Modals');
+      const { Overlays } = require('./Components/Overlays');
+      return (
+        <View testID={'Application'}>
+          <LayoutComponent layoutNode={LayoutStore.getLayout()} />
+          <Modals />
+          <Overlays />
+        </View>
+      );
+    }
+  }
+);

package/src/Mock/ComponentProps.tsx

@@ -0,0 +1,6 @@
+import ParentNode from './Layouts/ParentNode';
+
+export interface ComponentProps {
+  layoutNode: ParentNode;
+  backButton?: boolean;
+}

package/src/Mock/Components/BottomTabs.tsx

@@ -0,0 +1,14 @@
+import React, { Component } from 'react';
+import { LayoutComponent } from './LayoutComponent';
+import { ComponentProps } from '../ComponentProps';
+import { connect } from '../connect';
+
+export const BottomTabs = connect(
+  class extends Component<ComponentProps> {
+    render() {
+      return this.props.layoutNode.children.map((child) => {
+        return <LayoutComponent key={child.nodeId} layoutNode={child} />;
+      });
+    }
+  }
+);

package/src/Mock/Components/ComponentScreen.tsx

@@ -0,0 +1,107 @@
+import React, { Component } from 'react';
+import { View, Text, TouchableOpacity, Image, ImageURISource } from 'react-native';
+import { Navigation, ImageResource } from 'react-native-navigation';
+import { ComponentProps } from '../ComponentProps';
+import { VISIBLE_SCREEN_TEST_ID } from '../constants';
+import { LayoutStore } from '../Stores/LayoutStore';
+import { connect } from '../connect';
+import { TopBar } from './TopBar';
+import { events } from '../Stores/EventsStore';
+import _ from 'lodash';
+import { switchTabByIndex } from '../actions/layoutActions';
+
+function isURISource(src: ImageResource | undefined): src is ImageURISource {
+  return !!src && typeof src === 'object' && 'uri' in src;
+}
+
+export const ComponentScreen = connect(
+  class extends Component<ComponentProps> {
+    constructor(props: ComponentProps) {
+      super(props);
+    }
+
+    componentDidMount() {
+      this.props.layoutNode.componentDidMount();
+    }
+
+    isVisible(): boolean {
+      const isVisible = LayoutStore.isVisibleLayout(this.props.layoutNode);
+      return isVisible;
+    }
+
+    renderTabBar() {
+      const bottomTabs = this.props.layoutNode.getBottomTabs();
+      if (!bottomTabs) return null;
+      const bottomTabsOptions = bottomTabs.resolveOptions().bottomTabs;
+      if (bottomTabsOptions?.visible === false) return null;
+      const buttons = bottomTabs!.children!.map((child, i) => {
+        const bottomTabOptions = child.resolveOptions().bottomTab;
+        const icon =
+          (bottomTabs as any).selectedIndex === i
+            ? bottomTabOptions?.selectedIcon
+            : bottomTabOptions?.icon;
+        const iconURI = isURISource(icon) ? icon.uri : undefined;
+        return (
+          <View key={`tab-${i}`}>
+            <TouchableOpacity
+              style={{ padding: 10 }}
+              testID={bottomTabOptions?.testID}
+              onPress={() => {
+                events.invokeBottomTabPressed({
+                  tabIndex: i,
+                });
+                if (_.defaultTo(bottomTabOptions?.selectTabOnPress, true))
+                  switchTabByIndex(this.props.layoutNode.getBottomTabs(), i);
+              }}
+            >
+              <View style={{ justifyContent: 'center', alignItems: 'center' }}>
+                <Text>{bottomTabOptions?.badge}</Text>
+                {iconURI && (
+                  <Image
+                    style={{ width: 18, height: 18, marginBottom: 5 }}
+                    source={{ uri: iconURI }}
+                  />
+                )}
+                <Text style={{ fontSize: 12 }}>{bottomTabOptions?.text || ''}</Text>
+              </View>
+            </TouchableOpacity>
+          </View>
+        );
+      });
+
+      return (
+        <View
+          testID={bottomTabsOptions?.testID}
+          style={{
+            flexDirection: 'row',
+            justifyContent: 'center',
+            width: '100%',
+            backgroundColor: '#F0F2F5',
+          }}
+        >
+          {buttons}
+        </View>
+      );
+    }
+
+    render() {
+      const Component = Navigation.mock.store.getWrappedComponent(this.props.layoutNode.data.name);
+      if (!Component)
+        throw new Error(`${this.props.layoutNode.data.name} has not been registered.`);
+
+      return (
+        <View testID={this.isVisible() ? VISIBLE_SCREEN_TEST_ID : undefined}>
+          {this.props.layoutNode.getStack() && (
+            <TopBar
+              layoutNode={this.props.layoutNode}
+              topBarOptions={this.props.layoutNode.resolveOptions().topBar}
+              backButtonOptions={this.props.layoutNode.resolveOptions().topBar?.backButton}
+            />
+          )}
+          <Component componentId={this.props.layoutNode.nodeId} />
+          {this.renderTabBar()}
+        </View>
+      );
+    }
+  }
+);

package/src/Mock/Components/LayoutComponent.tsx

@@ -0,0 +1,37 @@
+import React, { Component } from 'react';
+import { View } from 'react-native';
+import { BottomTabs } from './BottomTabs';
+import { ComponentProps } from '../ComponentProps';
+import { ComponentScreen } from './ComponentScreen';
+import { Stack } from './Stack';
+import { SideMenuRoot, SideMenuCenter, SideMenuLeft, SideMenuRight } from './SideMenu';
+
+export const LayoutComponent = class extends Component<ComponentProps> {
+  render() {
+    switch (this.props.layoutNode.type) {
+      case 'BottomTabs':
+        return <BottomTabs layoutNode={this.props.layoutNode} />;
+      case 'Stack':
+        return <Stack layoutNode={this.props.layoutNode} />;
+      case 'Component':
+        return <ComponentScreen layoutNode={this.props.layoutNode} />;
+      case 'SideMenuRoot':
+        return <SideMenuRoot layoutNode={this.props.layoutNode} />;
+      case 'SideMenuLeft':
+        return <SideMenuLeft layoutNode={this.props.layoutNode} />;
+      case 'SideMenuCenter':
+        return <SideMenuCenter layoutNode={this.props.layoutNode} />;
+      case 'SideMenuRight':
+        return <SideMenuRight layoutNode={this.props.layoutNode} />;
+    }
+
+    return <View />;
+  }
+  componentDidCatch(error: Error, errorInfo: React.ErrorInfo) {
+    const err = new Error(
+      `Error while trying to render layout ${this.props.layoutNode.nodeId} of type ${this.props.layoutNode.type}: ${error}\n${errorInfo?.componentStack}`
+    );
+    (err as any).cause = error;
+    throw err;
+  }
+};

package/src/Mock/Components/Modals.tsx

@@ -0,0 +1,22 @@
+import React, { Component } from 'react';
+import { View } from 'react-native';
+import { ComponentProps } from '../ComponentProps';
+import { LayoutComponent } from './LayoutComponent';
+import ParentNode from '../Layouts/ParentNode';
+import { LayoutStore } from '../Stores/LayoutStore';
+import { connect } from '../connect';
+
+export const Modals = connect(
+  class extends Component<ComponentProps> {
+    render() {
+      const children = LayoutStore.getModals();
+      return (
+        <View testID={'MODALS'}>
+          {children.map((child: ParentNode) => {
+            return <LayoutComponent key={child.nodeId} layoutNode={child} />;
+          })}
+        </View>
+      );
+    }
+  }
+);

package/src/Mock/Components/NavigationButton.tsx

@@ -0,0 +1,86 @@
+import React, { Component } from 'react';
+import { Button, TouchableOpacity } from 'react-native';
+import { Navigation, OptionsTopBarButton } from 'react-native-navigation';
+import { events } from '../Stores/EventsStore';
+
+interface ButtonProps {
+  button: OptionsTopBarButton;
+  componentId: string;
+}
+
+export const NavigationButton = class extends Component<ButtonProps> {
+  ref = undefined;
+  render() {
+    const { button, componentId } = this.props;
+    if (button.component) return this.renderButtonComponent();
+    return (
+      <Button
+        testID={button.testID}
+        key={button.id}
+        title={button.text || ''}
+        disabled={button.enabled === false}
+        onPress={() =>
+          button.enabled !== false &&
+          events.invokeNavigationButtonPressed({
+            buttonId: button.id,
+            componentId,
+          })
+        }
+      />
+    );
+  }
+
+  renderButtonComponent() {
+    const { button, componentId } = this.props;
+    // @ts-ignore
+    const buttonComponentId = button.component!.componentId;
+    // @ts-ignore
+    const ComponentClass = Navigation.mock.store.getComponentClassForName(button.component.name);
+    if (!ComponentClass) {
+      throw new Error(`Cannot find registered component for: ${button.component?.name}`);
+    }
+    const ButtonComponent = ComponentClass();
+    const props = Navigation.mock.store.getPropsForId(buttonComponentId);
+    return (
+      <TouchableOpacity
+        onPress={() => {
+          if (this.ref) {
+            this.invokeOnClick(
+              // @ts-ignore
+              (this.ref!._reactInternalFiber || this.ref!._reactInternals).return.stateNode
+            );
+          }
+
+          events.invokeNavigationButtonPressed({
+            buttonId: button.id,
+            componentId: componentId,
+          });
+        }}
+        testID={button.testID}
+      >
+        <ButtonComponent
+          key={buttonComponentId}
+          {...props}
+          componentId={buttonComponentId}
+          ref={(ref: any) => (this.ref = ref)}
+        />
+      </TouchableOpacity>
+    );
+  }
+
+  invokeOnClick(stateNode: any) {
+    if (stateNode.children) {
+      // @ts-ignore
+      stateNode.children.forEach((instance) => {
+        if (
+          instance.internalInstanceHandle &&
+          instance.internalInstanceHandle.stateNode.props.onClick
+        ) {
+          instance.internalInstanceHandle.stateNode.props.onClick();
+        }
+
+        this.invokeOnClick(instance);
+      });
+    }
+  }
+};

package/src/Mock/Components/Overlays.tsx

@@ -0,0 +1,23 @@
+import React, { Component } from 'react';
+import { View } from 'react-native';
+import { ComponentProps } from '../ComponentProps';
+import { VISIBLE_OVERLAY_TEST_ID } from '../constants';
+import { LayoutComponent } from './LayoutComponent';
+import ParentNode from '../Layouts/ParentNode';
+import { LayoutStore } from '../Stores/LayoutStore';
+import { connect } from '../connect';
+
+export const Overlays = connect(
+  class extends Component<ComponentProps> {
+    render() {
+      const children = LayoutStore.getOverlays();
+      return (
+        <View testID={VISIBLE_OVERLAY_TEST_ID}>
+          {children.map((child: ParentNode) => {
+            return <LayoutComponent key={child.nodeId} layoutNode={child} />;
+          })}
+        </View>
+      );
+    }
+  }
+);

package/src/Mock/Components/SideMenu.tsx

@@ -0,0 +1,27 @@
+import React, { Component } from 'react';
+import { connect } from '../connect';
+import { ComponentProps } from '../ComponentProps';
+import { LayoutComponent } from './LayoutComponent';
+import ParentNode from '../Layouts/ParentNode';
+
+export const SideMenuRoot = connect(
+  class extends Component<ComponentProps> {
+    render() {
+      const children = this.props.layoutNode.children;
+      return children.map((child: ParentNode) => {
+        return <LayoutComponent key={child.nodeId} layoutNode={child} />;
+      });
+    }
+  }
+);
+
+const SideMenuComponent = connect(class extends Component<ComponentProps> {
+  render() {
+    const children = this.props.layoutNode.children;
+    const component = children[0];
+    return <LayoutComponent key={component.nodeId} layoutNode={component} />;
+  }
+});
+export const SideMenuLeft = SideMenuComponent;
+export const SideMenuCenter = SideMenuComponent;
+export const SideMenuRight = SideMenuComponent;

package/src/Mock/Components/Stack.tsx

@@ -0,0 +1,16 @@
+import React, { Component } from 'react';
+import { ComponentProps } from '../ComponentProps';
+import { LayoutComponent } from './LayoutComponent';
+import ParentNode from '../Layouts/ParentNode';
+import { connect } from '../connect';
+
+export const Stack = connect(
+  class extends Component<ComponentProps> {
+    render() {
+      const children = this.props.layoutNode.children;
+      return children.map((child: ParentNode, i: number) => {
+        return <LayoutComponent key={child.nodeId} layoutNode={child} backButton={i > 0} />;
+      });
+    }
+  }
+);

package/src/Mock/Components/TopBar.tsx

@@ -0,0 +1,96 @@
+import React, { Component } from 'react';
+import { Button, View, Text } from 'react-native';
+import {
+  Navigation,
+  OptionsTopBar,
+  OptionsTopBarBackButton,
+  OptionsTopBarButton,
+} from 'react-native-navigation';
+import ParentNode from '../Layouts/ParentNode';
+import { LayoutStore } from '../Stores/LayoutStore';
+import { NavigationButton } from './NavigationButton';
+import { events } from '../Stores/EventsStore';
+
+const DEFAULT_BACK_BUTTON_ID = 'RNN.back';
+
+export interface TopBarProps {
+  layoutNode: ParentNode;
+  topBarOptions?: OptionsTopBar;
+  backButtonOptions?: OptionsTopBarBackButton;
+}
+
+export const TopBar = class extends Component<TopBarProps> {
+  constructor(props: TopBarProps) {
+    super(props);
+  }
+
+  render() {
+    const topBarOptions = this.props.topBarOptions;
+    const topbarTestId = topBarOptions?.testID;
+    const titleTestId = topbarTestId ? { testID: `${topbarTestId}.title` } : {};
+    const subtitleTestId = topbarTestId ? { testID: `${topbarTestId}.subtitle` } : {};
+    if (topBarOptions?.visible === false) return null;
+    else {
+      const component = topBarOptions?.title?.component;
+      return (
+        <View testID={topbarTestId}>
+          <Text {...titleTestId}>{topBarOptions?.title?.text}</Text>
+          <Text {...subtitleTestId}>{topBarOptions?.subtitle?.text}</Text>
+          {this.renderButtons(topBarOptions?.leftButtons)}
+          {this.renderButtons(topBarOptions?.rightButtons)}
+          {component &&
+            //@ts-ignore
+            this.renderComponent(component.componentId!, component.name)}
+          {this.shouldRenderBackButton(this.props.layoutNode) && this.renderBackButton()}
+        </View>
+      );
+    }
+  }
+
+  shouldRenderBackButton(layoutNode: ParentNode) {
+    const backButtonVisible = layoutNode.resolveOptions().topBar?.backButton?.visible;
+    return layoutNode.getStack()!.children.length > 1 && backButtonVisible !== false;
+  }
+
+  renderButtons(buttons: OptionsTopBarButton[] = []) {
+    return buttons.map((button, i: number) => {
+      return (
+        <NavigationButton
+          button={button}
+          key={button.id || i}
+          componentId={this.props.layoutNode.nodeId}
+        />
+      );
+    });
+  }
+
+  renderBackButton() {
+    const backButtonOptions = this.props.backButtonOptions;
+    return (
+      <Button
+        testID={backButtonOptions?.testID}
+        title={backButtonOptions && backButtonOptions.title ? backButtonOptions.title : ''}
+        onPress={() => {
+          if (backButtonOptions?.popStackOnPress === false) {
+            events.invokeNavigationButtonPressed({
+              buttonId: backButtonOptions?.id || DEFAULT_BACK_BUTTON_ID,
+              componentId: this.props.layoutNode.nodeId,
+            });
+          } else {
+            LayoutStore.pop(this.props.layoutNode.nodeId);
+          }
+        }}
+      />
+    );
+  }
+
+  renderComponent(id: string, name: string, testID?: string) {
+    const Component = Navigation.mock.store.getComponentClassForName(name)!();
+    const props = Navigation.mock.store.getPropsForId(id);
+    return (
+      <View key={id} testID={testID}>
+        <Component {...props} componentId={id} />
+      </View>
+    );
+  }
+};

package/src/Mock/Layouts/BottomTabsNode.ts

@@ -0,0 +1,34 @@
+import _ from 'lodash';
+import { Options } from '../../index';
+import { switchTabByIndex } from '../actions/layoutActions';
+import ParentNode from './ParentNode';
+
+export default class BottomTabsNode extends ParentNode {
+  selectedIndex: number;
+  constructor(layout: any, parentNode?: ParentNode) {
+    super(layout, 'BottomTabs', parentNode);
+    this.selectedIndex = layout.data?.options?.bottomTabs?.currentTabIndex || 0;
+  }
+
+  mergeOptions(_options: Options) {
+    super.mergeOptions(_options);
+
+    const { options } = this.data;
+    if (options.bottomTabs?.currentTabIndex) {
+      this.selectedIndex = options.bottomTabs?.currentTabIndex;
+      switchTabByIndex(this, this.selectedIndex);
+    }
+    if (options.bottomTabs?.currentTabId) {
+      const index = _.findIndex(
+        this.children,
+        (child) => child.nodeId === options?.bottomTabs?.currentTabId
+      );
+      if (index !== -1) this.selectedIndex = index;
+      switchTabByIndex(this, this.selectedIndex);
+    }
+  }
+
+  getVisibleLayout() {
+    return this.children[this.selectedIndex].getVisibleLayout();
+  }
+}

package/src/Mock/Layouts/ComponentNode.ts

@@ -0,0 +1,124 @@
+import _ from 'lodash';
+import { OptionsTopBarButton } from '../../index';
+import { events } from '../Stores/EventsStore';
+import ParentNode from './ParentNode';
+
+export default class ComponentNode extends ParentNode {
+  componentDidMountOnce = false;
+  componentDidAppearPending = false;
+
+  constructor(layout: any, parentNode?: ParentNode) {
+    super(layout, 'Component', parentNode);
+  }
+
+  public componentDidMount() {
+    this.componentDidMountOnce = true;
+    this.componentDidAppearPending && setImmediate(() => this.componentDidAppear());
+  }
+
+  public componentDidAppear() {
+    if (this.componentDidMountOnce) {
+      events.invokeComponentWillAppear({
+        componentName: this.data.name,
+        componentId: this.nodeId,
+        componentType: 'Component',
+      });
+      events.invokeComponentDidAppear({
+        componentName: this.data.name,
+        componentId: this.nodeId,
+        componentType: 'Component',
+      });
+
+      this.buttonsDidAppear(
+        _.concat(
+          this.data.options.topBar?.rightButtons || [],
+          this.data.options.topBar?.leftButtons || []
+        )
+      );
+      this.titleChanged(undefined, this.data.options.topBar?.title);
+    } else {
+      this.componentDidAppearPending = true;
+    }
+  }
+
+  public componentDidDisappear() {
+    events.invokeComponentDidDisappear({
+      componentName: this.data.name,
+      componentId: this.nodeId,
+      componentType: 'Component',
+    });
+
+    this.buttonsDidDisappear(
+      _.concat(
+        this.data.options.topBar?.rightButtons || [],
+        this.data.options.topBar?.leftButtons || []
+      )
+    );
+    this.titleChanged(this.data.options.topBar?.title);
+  }
+
+  titleChanged(oldTitle: any, newTitle?: any) {
+    if (oldTitle && oldTitle.component) {
+      events.invokeComponentDidDisappear({
+        componentName: oldTitle.component.name,
+        componentId: oldTitle.component.componentId,
+        componentType: 'TopBarTitle',
+      });
+    }
+
+    if (newTitle && newTitle.component) {
+      events.invokeComponentWillAppear({
+        componentName: newTitle.component.name,
+        componentId: newTitle.component.componentId,
+        componentType: 'TopBarTitle',
+      });
+      events.invokeComponentDidAppear({
+        componentName: newTitle.component.name,
+        componentId: newTitle.component.componentId,
+        componentType: 'TopBarTitle',
+      });
+    }
+  }
+
+  buttonsChanged(oldButtons: OptionsTopBarButton[], newButtons: OptionsTopBarButton[]) {
+    this.buttonsDidDisappear(oldButtons);
+    this.buttonsDidAppear(newButtons);
+  }
+
+  buttonsDidAppear(buttons: OptionsTopBarButton[] = []) {
+    buttons.forEach((button: OptionsTopBarButton) => {
+      if (button.component) {
+        events.invokeComponentWillAppear({
+          componentName: button.component.name,
+          // @ts-ignore
+          componentId: button.component.componentId,
+          componentType: 'TopBarButton',
+        });
+
+        events.invokeComponentDidAppear({
+          componentName: button.component.name,
+          // @ts-ignore
+          componentId: button.component.componentId,
+          componentType: 'TopBarButton',
+        });
+      }
+    });
+  }
+
+  buttonsDidDisappear(buttons: OptionsTopBarButton[] = []) {
+    buttons.forEach((button: OptionsTopBarButton) => {
+      if (button.component) {
+        events.invokeComponentDidDisappear({
+          componentName: button.component.name,
+          // @ts-ignore
+          componentId: button.component.componentId,
+          componentType: 'TopBarButton',
+        });
+      }
+    });
+  }
+
+  getVisibleLayout() {
+    return this;
+  }
+}

package/src/Mock/Layouts/LayoutNodeFactory.ts

@@ -0,0 +1,31 @@
+import BottomTabs from './BottomTabsNode';
+import ComponentNode from './ComponentNode';
+import Stack from './StackNode';
+import ParentNode from './ParentNode';
+import SideMenuRootNode, {
+  SideMenuLeftNode,
+  SideMenuRightNode,
+  SideMenuCenterNode,
+} from './SideMenu';
+
+export default class LayoutNodeFactory {
+  static create(layout: any, parentNode?: ParentNode) {
+    switch (layout.type) {
+      case 'Component':
+        return new ComponentNode(layout, parentNode);
+      case 'Stack':
+        return new Stack(layout, parentNode);
+      case 'SideMenuRoot':
+        return new SideMenuRootNode(layout, parentNode);
+      case 'SideMenuLeft':
+        return new SideMenuLeftNode(layout, parentNode);
+      case 'SideMenuCenter':
+        return new SideMenuCenterNode(layout, parentNode);
+      case 'SideMenuRight':
+        return new SideMenuRightNode(layout, parentNode);
+      default: // TODO Undo
+      case 'BottomTabs':
+        return new BottomTabs(layout, parentNode);
+    }
+  }
+}