optimizely-oui/module/js/components/NavBar/index.js

Optimizely's Component Library.

function _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }

function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }

function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }

import React from "react";
import classNames from "classnames";
import PropTypes from "prop-types";
import Link from "../Link";
import Badge from "../Badge";
import IconLink from "./IconLink";
import CurrentUserMenu from "./CurrentUserMenu";
var LINK = "link";
var PUSH_STATE = "pushstate";
var BUTTON = "button";
var linkPropTypes = {
  /** CSS class names. */
  className: PropTypes.string,

  /* Boolean, whether an external icon should show */
  hasExternalIcon: PropTypes.bool,

  /** Should show a separator line before this link. */
  hasSeparator: PropTypes.bool,

  /** Url to Navigate to when type is link. */
  href: PropTypes.string,

  /** Name of Icon. */
  iconName: PropTypes.string.isRequired,

  /** Whether the link is highlighted blue as the current active nav link. */
  isActive: PropTypes.bool,

  /** Condition in which this link is visible. */
  isVisible: PropTypes.bool,

  /** Description of url. */
  linkLabel: PropTypes.oneOfType([PropTypes.string, PropTypes.node]),

  /** Handler called when link is clicked. */
  onClick: PropTypes.func,

  /** Name of test data section. */
  testSection: PropTypes.string,

  /** Type of Link. */
  type: PropTypes.oneOf([LINK, PUSH_STATE, BUTTON])
};
var linkDefaultProps = {
  href: "",
  isActive: false,
  isVisible: true,
  linkLabel: "",
  testSection: null,
  hasSeparator: false,
  onClick: function onClick() {
    return null;
  },
  type: LINK
};

var PrimaryLink = function PrimaryLink(props) {
  return React.createElement(IconLink, _extends({}, props, {
    isSecondaryLink: false
  }));
};

PrimaryLink.propTypes = linkPropTypes;
PrimaryLink.defaultProps = linkDefaultProps;
PrimaryLink.displayName = "NavBar.PrimaryLink";

var SecondaryLink = function SecondaryLink(props) {
  return React.createElement(IconLink, _extends({}, props, {
    isSecondaryLink: true
  }));
};

SecondaryLink.propTypes = linkPropTypes;
SecondaryLink.defaultProps = linkDefaultProps;
SecondaryLink.displayName = "NavBar.SecondaryLink";
/**
 *
 * @param {Object} props - Properties passed to component
 * @returns {ReactElement}
 */

var NavBar = function NavBar(_ref) {
  var badgeText = _ref.badgeText,
      children = _ref.children,
      className = _ref.className,
      footerContent = _ref.footerContent,
      homeUrl = _ref.homeUrl,
      isOpen = _ref.isOpen,
      logoUrl = _ref.logoUrl,
      title = _ref.title,
      trialContent = _ref.trialContent,
      props = _objectWithoutProperties(_ref, ["badgeText", "children", "className", "footerContent", "homeUrl", "isOpen", "logoUrl", "title", "trialContent"]);

  var renderChildrenByType = function renderChildrenByType(ComponentType) {
    return React.Children.toArray(children).filter(function (child) {
      return child.type === ComponentType;
    }).map(function (element) {
      return React.cloneElement(element, {
        isOpen: isOpen
      });
    });
  };

  var logoClasses = classNames("push-double--left", {
    "root-nav__logo--full": isOpen,
    "root-nav__logo--mark": !isOpen
  });

  var renderPrivacy = function renderPrivacy() {
    var year = new Date().getFullYear();
    return React.createElement("div", {
      className: "root-nav__user root-nav__link root-nav__link--plain hard--bottom muted"
    }, React.createElement("span", {
      className: "display--inline-block"
    }, "\xA92010\u2013", year, " Optimizely.", " ", React.createElement("a", {
      href: "https://www.optimizely.com/privacy/",
      className: "muted underline"
    }, "Privacy")));
  };

  var renderFooterContent = function renderFooterContent() {
    return React.createElement(React.Fragment, null, React.createElement("hr", {
      className: "oui-rule push-double--sides hard"
    }), React.createElement("div", {
      className: "root-nav__link root-nav__link--plain flex flex--column flex--1"
    }, footerContent));
  };

  return React.createElement("nav", _extends({
    className: classNames({
      "root-nav": true,
      "root-nav--open": isOpen
    }, className),
    "data-test-section": "p13n-root-navbar"
  }, props), React.createElement("div", {
    "data-test-section": "navbar-header"
  }, logoUrl && React.createElement("div", {
    className: "root-nav__logo push--bottom"
  }, React.createElement(Link, {
    href: homeUrl
  }, React.createElement("img", {
    alt: "logo",
    src: logoUrl,
    className: logoClasses
  }))), trialContent, React.createElement("div", {
    className: classNames({
      "root-nav__project": true,
      "root-nav-fader": !isOpen
    })
  }, React.createElement("div", {
    className: "epsilon truncate",
    "data-test-section": "project-name"
  }, title), React.createElement(Badge, {
    color: "purple",
    testSection: "project-badge"
  }, badgeText))), React.createElement("ul", {
    className: "push--ends"
  }, renderChildrenByType(PrimaryLink)), React.createElement("div", {
    className: "anchor--bottom"
  }, React.createElement("ul", {
    className: "push--ends"
  }, renderChildrenByType(SecondaryLink)), renderChildrenByType(CurrentUserMenu), isOpen && footerContent && renderFooterContent(), isOpen && renderPrivacy()));
};

NavBar.propTypes = {
  /** Text to appear below title in a badge. */
  badgeText: PropTypes.string,

  /** Allowed Children are <NavBar.PrimaryLink>, <NavBar.SecondaryLink>, <NavBar.CurrentUserMenu>. Only one of <NavBar.CurrentUserMenu> is allowed. */
  children: function children(props, propName) {
    var prop = props[propName];
    var error = null;
    React.Children.forEach(prop, function (child) {
      if (child === null) {
        // Skip checking empty child nodes
        return;
      }

      if (![SecondaryLink, PrimaryLink, CurrentUserMenu].includes(child.type)) {
        error = new Error("Children should be of type PrimaryLink, SecondaryLink, or CurrentUserMenu.");
      }
    });

    if (!error && React.Children.toArray(prop).filter(function (child) {
      return child.type === CurrentUserMenu;
    }).length !== 1) {
      error = new Error("There should be only one instance of `CurrentUserMenu`");
    }

    return error;
  },

  /** CSS class names. */
  className: PropTypes.string,

  /** Component to appear above the privacy statement. */
  footerContent: PropTypes.node,

  /** Url to navigate to when Brand Logo is clicked. */
  homeUrl: PropTypes.string,

  /** Is Navigation Bar open or closed. */
  isOpen: PropTypes.bool,

  /** Brand logo URL. */
  logoUrl: PropTypes.string,

  /** Title of navigation bar */
  title: PropTypes.string,

  /** Component to appear above title and below brand logo. */
  trialContent: PropTypes.node
};
NavBar.defaultProps = {
  badgeText: "",
  homeUrl: "",
  isOpen: true,
  logoUrl: null,
  title: "",
  trialContent: null
};
NavBar.PrimaryLink = PrimaryLink;
NavBar.SecondaryLink = SecondaryLink;
NavBar.CurrentUserMenu = CurrentUserMenu;
export default NavBar;