react-native-navigation/lib/module/Mock/Components/TopBar.js

React Native Navigation - truly native navigation for iOS and Android

"use strict";

import React, { Component } from 'react';
import { Button, View, Text } from 'react-native';
import { Navigation } from 'react-native-navigation';
import { LayoutStore } from "../Stores/LayoutStore.js";
import { NavigationButton } from "./NavigationButton.js";
import { events } from "../Stores/EventsStore.js";
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
const DEFAULT_BACK_BUTTON_ID = 'RNN.back';
export const TopBar = class extends Component {
  constructor(props) {
    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 /*#__PURE__*/_jsxs(View, {
        testID: topbarTestId,
        children: [/*#__PURE__*/_jsx(Text, {
          ...titleTestId,
          children: topBarOptions?.title?.text
        }), /*#__PURE__*/_jsx(Text, {
          ...subtitleTestId,
          children: topBarOptions?.subtitle?.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()]
      });
    }
  }
  shouldRenderBackButton(layoutNode) {
    const backButtonVisible = layoutNode.resolveOptions().topBar?.backButton?.visible;
    return layoutNode.getStack().children.length > 1 && backButtonVisible !== false;
  }
  renderButtons(buttons = []) {
    return buttons.map((button, i) => {
      return /*#__PURE__*/_jsx(NavigationButton, {
        button: button,
        componentId: this.props.layoutNode.nodeId
      }, button.id || i);
    });
  }
  renderBackButton() {
    const backButtonOptions = this.props.backButtonOptions;
    return /*#__PURE__*/_jsx(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, name, testID) {
    const Component = Navigation.mock.store.getComponentClassForName(name)();
    const props = Navigation.mock.store.getPropsForId(id);
    return /*#__PURE__*/_jsx(View, {
      testID: testID,
      children: /*#__PURE__*/_jsx(Component, {
        ...props,
        componentId: id
      })
    }, id);
  }
};
//# sourceMappingURL=TopBar.js.map