@carbon/ibm-security/es/components/Nav/Nav.js

Carbon for Cloud & Cognitive IBM Security UI components

import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
import _extends from "@babel/runtime/helpers/extends";
import _classCallCheck from "@babel/runtime/helpers/classCallCheck";
import _createClass from "@babel/runtime/helpers/createClass";
import _possibleConstructorReturn from "@babel/runtime/helpers/possibleConstructorReturn";
import _getPrototypeOf from "@babel/runtime/helpers/getPrototypeOf";
import _inherits from "@babel/runtime/helpers/inherits";
var _excluded = ["activeHref", "className", "children", "heading", "label"];
function _callSuper(t, o, e) { return o = _getPrototypeOf(o), _possibleConstructorReturn(t, _isNativeReflectConstruct() ? Reflect.construct(o, e || [], _getPrototypeOf(t).constructor) : o.apply(t, e)); }
function _isNativeReflectConstruct() { try { var t = !Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); } catch (t) {} return (_isNativeReflectConstruct = function _isNativeReflectConstruct() { return !!t; })(); }
/**
 * @file Navigation class.
 * @copyright IBM Security 2019 - 2021
 */

import classnames from 'classnames';
import { node, string } from 'prop-types';
import React, { Children, Component } from 'react';
import NavItem, { namespace as navItemNamespace } from './NavItem/NavItem';
import NavList from './NavList';
import window from '../../globals/utils/globalRoot';
import { getComponentNamespace } from '../../globals/namespace';
export var navNamespace = getComponentNamespace('nav');
var Nav = /*#__PURE__*/function (_Component) {
  function Nav(props) {
    var _this;
    _classCallCheck(this, Nav);
    _this = _callSuper(this, Nav, [props]);
    var activeHref = _this.props.activeHref;
    if (!activeHref && window.location) {
      var _window$location = window.location,
        hash = _window$location.hash,
        pathname = _window$location.pathname;
      activeHref = pathname + hash;
    }
    _this.state = {
      activeHref: activeHref
    };
    _this.handleItemClick = _this.handleItemClick.bind(_this);
    _this.handleListClick = _this.handleListClick.bind(_this);
    _this.navigationLists = [];
    return _this;
  }

  /**
   * Creates a new child list item.
   * @param {NavItem} child The child list item to create.
   * @param {number} index The index of the child list item.
   * @returns {NavItem} The new child list item.
   */
  _inherits(Nav, _Component);
  return _createClass(Nav, [{
    key: "buildNewItemChild",
    value: function buildNewItemChild(_ref, index) {
      var _this2 = this;
      var props = _ref.props;
      var key = "".concat(navItemNamespace, "--").concat(index);
      return /*#__PURE__*/React.createElement(NavItem, _extends({}, props, {
        activeHref: this.state.activeHref,
        key: key,
        onClick: function onClick(event, href) {
          _this2.handleItemClick(event, href, props.onClick);
        }
      }));
    }

    /**
     * Creates a new child list.
     * @param {NavList} child The child list to create.
     * @param {number} index The index of the child list.
     * @returns {NavList} The new child list.
     */
  }, {
    key: "buildNewListChild",
    value: function buildNewListChild(_ref2, index) {
      var _this3 = this;
      var props = _ref2.props;
      var key = "".concat(navNamespace, "__list--").concat(index);
      return /*#__PURE__*/React.createElement(NavList, _extends({}, props, {
        activeHref: this.state.activeHref,
        id: key,
        key: key,
        onListClick: this.handleListClick,
        onItemClick: this.handleItemClick,
        ref: function ref(navigationList) {
          _this3.navigationLists.push(navigationList);
        }
      }));
    }

    /**
     * Handles toggling the list item.
     * @param {SyntheticEvent} event The event fired when the list item is toggled.
     * @param {string} activeHref The URL of the list item.
     */
  }, {
    key: "handleItemClick",
    value: function handleItemClick(event, activeHref, onClick) {
      event.stopPropagation();
      var type = event.type,
        which = event.which;

      // Enter (13) and spacebar (32).
      var acceptableEvent = which === 13 || which === 32 || type === 'click';
      var diffHref = activeHref !== this.state.activeHref;
      if (acceptableEvent && diffHref) {
        this.setState({
          activeHref: activeHref
        });
      }
      if (onClick) {
        onClick(event);
      }
    }

    /**
     * Handles when a list has been selected.
     * @param {number} id The index of the list.
     */
  }, {
    key: "handleListClick",
    value: function handleListClick(id) {
      var _this4 = this;
      Children.forEach(this.props.children, function (_ref3, index) {
        var props = _ref3.props,
          type = _ref3.type;
        if (type.displayName === NavList.displayName) {
          var childId = "".concat(navNamespace, "__list--").concat(index);
          if (childId !== id && !props.isExpandedOnPageload) {
            _this4.navigationLists.find(function (_ref4) {
              var props = _ref4.props;
              return props.id === childId;
            }).close();
          }
        }
      });
    }
  }, {
    key: "render",
    value: function render() {
      var _this5 = this;
      var _this$props = this.props,
        _ = _this$props.activeHref,
        className = _this$props.className,
        children = _this$props.children,
        heading = _this$props.heading,
        label = _this$props.label,
        other = _objectWithoutProperties(_this$props, _excluded);
      return /*#__PURE__*/React.createElement("nav", _extends({
        className: classnames(navNamespace, className),
        "aria-label": label
      }, other), heading && /*#__PURE__*/React.createElement("h1", {
        className: "".concat(navNamespace, "__heading")
      }, heading), /*#__PURE__*/React.createElement("ul", {
        className: "".concat(navNamespace, "__wrapper"),
        role: "menubar"
      }, Children.map(children, function (child, index) {
        return child.type.displayName === NavList.displayName ? _this5.buildNewListChild(child, index) : _this5.buildNewItemChild(child, index);
      })));
    }
  }]);
}(Component);
export { Nav as default };
Nav.defaultProps = {
  activeHref: undefined,
  children: null,
  className: '',
  heading: null
};
Nav.propTypes = {
  /** @type {string} Hypertext reference for active page. */
  activeHref: string,
  /** @type {Node} Child elements. */
  children: node,
  /** @type {string} Extra classes to add. */
  className: string,
  /** @type {string} Heading */
  heading: string,
  /** @type {string} Aria-label on the rendered `nav` element. */
  label: string.isRequired
};