PageWithSidebar.js

import React, { Component } from 'react';

import Link from './Link';

import { NavigationActions, addNavigationHelpers } from 'react-navigation';

const LinkableLi = Link.Linkable(props => <li {...props} />);

function getConfig(router, state, action, configName) {
  if (action) {
    state = router.getStateForAction(action, state);
  }
  const Component = router.getComponentForState(state);
  return Component.navigationOptions[configName];
}

class PageWithSidebar extends Component {
  render() {
    const { router, navigation } = this.props;
    const { dispatch, state } = navigation;
    const ActiveScreen = router.getComponentForState(state);
    let prevAction = null;
    if (state.routes[state.index].index > 0) {
      const prev = state.routes[state.index].index - 1;
      prevAction = NavigationActions.navigate({
        routeName: state.routes[state.index].routes[prev].routeName,
      });
    }
    if (!prevAction && state.index > 0) {
      const prev = state.index - 1;
      prevAction = NavigationActions.navigate({
        routeName: state.routes[prev].routeName,
        action: NavigationActions.navigate({
          routeName:
            state.routes[prev].routes[state.routes[prev].routes.length - 1]
              .routeName,
        }),
      });
    }
    let nextAction = null;
    if (
      state.routes[state.index].index <
      state.routes[state.index].routes.length - 1
    ) {
      const next = state.routes[state.index].index + 1;
      nextAction = NavigationActions.navigate({
        routeName: state.routes[state.index].routes[next].routeName,
      });
    }
    if (!nextAction && state.index < state.routes.length - 1) {
      const next = state.index + 1;
      nextAction = NavigationActions.navigate({
        routeName: state.routes[next].routeName,
      });
    }
    let prevName =
      prevAction && getConfig(router, state, prevAction, 'linkName');
    let nextName =
      nextAction && getConfig(router, state, nextAction, 'linkName');
    const docPath = getConfig(router, state, null, 'doc') + '.md';
    return (
      <div className="page-body">
        <div className="inner-page-body">
          <div className="left-sidebar">
            <ul className="pt-menu pt-elevation-1 navmenu">
              {state.routes &&
                state.routes.map((route, i) => {
                  const DocComponent = router.getComponentForRouteName(
                    route.routeName
                  );
                  const childNavigation = addNavigationHelpers({
                    state: route,
                    dispatch,
                  });
                  const options = router.getScreenOptions(childNavigation, {});
                  const isActive = state.index === i;
                  return (
                    <span key={i}>
                      <LinkableLi
                        to={route.routeName}
                        className={
                          'pt-menu-header ' +
                          options.icon +
                          ' ' +
                          (isActive ? 'active' : '')
                        }
                      >
                        <h6>{options.linkName}</h6>
                      </LinkableLi>
                      <div>
                        {route.routes &&
                          route.routes.map((childRoute, childI) => {
                            const isChildActive =
                              isActive && route.index === childI;
                            const secondChildNavigation = addNavigationHelpers({
                              state: childRoute,
                              dispatch,
                            });
                            const secondOptions =
                              DocComponent.router &&
                              DocComponent.router.getScreenOptions(
                                secondChildNavigation,
                                {}
                              );
                            const routerLinkName =
                              secondOptions && secondOptions.linkName;
                            const linkName =
                              routerLinkName || childRoute.routeName;
                            return (
                              <Link
                                to={childRoute.routeName}
                                className={`pt-menu-item page ${isChildActive
                                  ? 'active'
                                  : ''}`}
                                key={childI}
                              >
                                {linkName}
                              </Link>
                            );
                          })}
                      </div>
                    </span>
                  );
                })}
            </ul>
          </div>

          <div className="main-section">
            <ActiveScreen navigation={this.props.navigation} />
            <hr />
            {state.routeName === 'Docs' && (
              <Link
                href={`https://github.com/react-community/react-navigation/tree/master/docs/${docPath}`}
                className="editLink"
              >
                {' '}
                Edit on GitHub
              </Link>
            )}
            {prevAction && <Link to={prevAction}>Previous: {prevName}</Link>}
            {nextAction && (
              <Link to={nextAction} className="nextLink">
                Next: {nextName}
              </Link>
            )}
          </div>
        </div>
      </div>
    );
  }
}

export default PageWithSidebar;