@carbon/ibm-security
Version:
Carbon for Cloud & Cognitive IBM Security UI components
188 lines (182 loc) • 8.44 kB
JavaScript
;
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
var _typeof = require("@babel/runtime/helpers/typeof");
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.navNamespace = exports.default = void 0;
var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
var _classCallCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/classCallCheck"));
var _createClass2 = _interopRequireDefault(require("@babel/runtime/helpers/createClass"));
var _possibleConstructorReturn2 = _interopRequireDefault(require("@babel/runtime/helpers/possibleConstructorReturn"));
var _getPrototypeOf2 = _interopRequireDefault(require("@babel/runtime/helpers/getPrototypeOf"));
var _inherits2 = _interopRequireDefault(require("@babel/runtime/helpers/inherits"));
var _classnames = _interopRequireDefault(require("classnames"));
var _propTypes = require("prop-types");
var _react = _interopRequireWildcard(require("react"));
var _NavItem = _interopRequireWildcard(require("./NavItem/NavItem"));
var _NavList = _interopRequireDefault(require("./NavList"));
var _globalRoot = _interopRequireDefault(require("../../globals/utils/globalRoot"));
var _namespace = require("../../globals/namespace");
var _excluded = ["activeHref", "className", "children", "heading", "label"];
function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != _typeof(e) && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
function _callSuper(t, o, e) { return o = (0, _getPrototypeOf2.default)(o), (0, _possibleConstructorReturn2.default)(t, _isNativeReflectConstruct() ? Reflect.construct(o, e || [], (0, _getPrototypeOf2.default)(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
*/
var navNamespace = exports.navNamespace = (0, _namespace.getComponentNamespace)('nav');
var Nav = exports.default = /*#__PURE__*/function (_Component) {
function Nav(props) {
var _this;
(0, _classCallCheck2.default)(this, Nav);
_this = _callSuper(this, Nav, [props]);
var activeHref = _this.props.activeHref;
if (!activeHref && _globalRoot.default.location) {
var _window$location = _globalRoot.default.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.
*/
(0, _inherits2.default)(Nav, _Component);
return (0, _createClass2.default)(Nav, [{
key: "buildNewItemChild",
value: function buildNewItemChild(_ref, index) {
var _this2 = this;
var props = _ref.props;
var key = "".concat(_NavItem.namespace, "--").concat(index);
return /*#__PURE__*/_react.default.createElement(_NavItem.default, (0, _extends2.default)({}, 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.default.createElement(_NavList.default, (0, _extends2.default)({}, 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;
_react.Children.forEach(this.props.children, function (_ref3, index) {
var props = _ref3.props,
type = _ref3.type;
if (type.displayName === _NavList.default.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 = (0, _objectWithoutProperties2.default)(_this$props, _excluded);
return /*#__PURE__*/_react.default.createElement("nav", (0, _extends2.default)({
className: (0, _classnames.default)(navNamespace, className),
"aria-label": label
}, other), heading && /*#__PURE__*/_react.default.createElement("h1", {
className: "".concat(navNamespace, "__heading")
}, heading), /*#__PURE__*/_react.default.createElement("ul", {
className: "".concat(navNamespace, "__wrapper"),
role: "menubar"
}, _react.Children.map(children, function (child, index) {
return child.type.displayName === _NavList.default.displayName ? _this5.buildNewListChild(child, index) : _this5.buildNewItemChild(child, index);
})));
}
}]);
}(_react.Component);
Nav.defaultProps = {
activeHref: undefined,
children: null,
className: '',
heading: null
};
Nav.propTypes = {
/** @type {string} Hypertext reference for active page. */
activeHref: _propTypes.string,
/** @type {Node} Child elements. */
children: _propTypes.node,
/** @type {string} Extra classes to add. */
className: _propTypes.string,
/** @type {string} Heading */
heading: _propTypes.string,
/** @type {string} Aria-label on the rendered `nav` element. */
label: _propTypes.string.isRequired
};