metadata-based-explorer1/es/elements/content-sidebar/SidebarNavButton.js

Box UI Elements

/**
 * 
 * @file Preview sidebar nav button component
 * @author Box
 */
import * as React from 'react';
import { Route } from 'react-router-dom';
import NavButton from '../common/nav-button';
import Tooltip from '../../components/tooltip/Tooltip';
import './SidebarNavButton.scss';

var SidebarNavButton = function SidebarNavButton(_ref) {
  var children = _ref.children,
      dataResinTarget = _ref['data-resin-target'],
      dataTestId = _ref['data-testid'],
      isOpen = _ref.isOpen,
      sidebarView = _ref.sidebarView,
      tooltip = _ref.tooltip;
  var sidebarPath = "/".concat(sidebarView);
  return React.createElement(Route, {
    path: sidebarPath
  }, function (_ref2) {
    var match = _ref2.match;
    var isMatch = !!match;

    var isActive = function isActive() {
      return isMatch && !!isOpen;
    };

    var isToggle = isMatch && match.isExact;
    var sidebarState = {
      open: isToggle ? !isOpen : true
    };
    return React.createElement(Tooltip, {
      position: "middle-left",
      text: tooltip
    }, React.createElement(NavButton, {
      "aria-selected": isActive(),
      activeClassName: "bcs-is-selected",
      className: "bcs-NavButton",
      "data-resin-target": dataResinTarget,
      isActive: isActive,
      replace: isToggle,
      role: "tab",
      to: {
        pathname: sidebarPath,
        state: sidebarState
      },
      type: "button"
    }, children));
  });
};

export default SidebarNavButton;