@carbon/ibm-security
Version:
Carbon for Cloud & Cognitive IBM Security UI components
197 lines (191 loc) • 7.01 kB
JavaScript
import _defineProperty from "@babel/runtime/helpers/defineProperty";
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";
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 list class.
* @copyright IBM Security 2019 - 2021
*/
import { ChevronDown16 } from '@carbon/icons-react';
import classnames from 'classnames';
import { bool, func, node, number, string } from 'prop-types';
import React, { Component } from 'react';
import { getComponentNamespace } from '../../../globals/namespace';
import Icon from '../../Icon';
import NavItem, { namespace as navItemNamespace } from '../NavItem/NavItem';
export var navListNamespace = getComponentNamespace('nav__list');
var NavList = /*#__PURE__*/function (_Component) {
function NavList(props) {
var _this;
_classCallCheck(this, NavList);
_this = _callSuper(this, NavList, [props]);
var _this$props = _this.props,
activeHref = _this$props.activeHref,
children = _this$props.children;
var open = _this.props.isExpandedOnPageload;
// Reads all children, filters out children without HREF attributes, and creates an array of HREF strings.
if (!open) {
var hrefs = React.Children.toArray(children).filter(function (_ref) {
var childProps = _ref.props;
return childProps.href && childProps.href.length > 0;
}).map(function (_ref2) {
var childProps = _ref2.props;
return childProps.href;
});
open = hrefs.includes(activeHref);
}
_this.state = {
open: open
};
_this.buildNewItemChild = _this.buildNewItemChild.bind(_this);
_this.toggle = _this.toggle.bind(_this);
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(NavList, _Component);
return _createClass(NavList, [{
key: "buildNewItemChild",
value: function buildNewItemChild(_ref3, index) {
var props = _ref3.props;
var _this$props2 = this.props,
onItemClick = _this$props2.onItemClick,
activeHref = _this$props2.activeHref;
var _onClick = props.onClick;
return /*#__PURE__*/React.createElement(NavItem, _extends({}, props, {
key: "".concat(navItemNamespace, "--").concat(index),
onClick: function onClick(event, href) {
onItemClick(event, href);
if (_onClick) {
_onClick(event);
}
},
activeHref: activeHref,
tabIndex: this.state.open ? 0 : -1
}));
}
/**
* Closes the list.
*/
}, {
key: "close",
value: function close() {
if (this.state.open) {
this.setState({
open: false
});
}
}
/**
* Handles toggling the list.
* @param {SyntheticEvent} event The event fired when the list is toggled.
*/
}, {
key: "toggle",
value: function toggle(_ref4) {
var which = _ref4.which,
type = _ref4.type;
var open = this.state.open;
var _this$props3 = this.props,
id = _this$props3.id,
onListClick = _this$props3.onListClick;
// Enter (13) and spacebar (32).
if (which === 13 || which === 32 || type === 'click') {
if (!open) {
onListClick(id);
}
this.setState({
open: !open
});
}
}
}, {
key: "render",
value: function render() {
var _this2 = this;
var _this$props4 = this.props,
className = _this$props4.className,
children = _this$props4.children,
icon = _this$props4.icon,
tabIndex = _this$props4.tabIndex,
title = _this$props4.title,
navigationItemTitle = _this$props4.navigationItemTitle;
var open = this.state.open;
var classNames = classnames(navListNamespace, className, _defineProperty({}, "".concat(navItemNamespace, "--expanded"), open));
var newChildren = React.Children.map(children, function (child, index) {
return _this2.buildNewItemChild(child, index);
});
return /*#__PURE__*/React.createElement("li", {
className: classNames,
tabIndex: tabIndex,
onClick: this.toggle,
onKeyPress: this.toggle,
role: "menuitem"
}, /*#__PURE__*/React.createElement("div", {
className: "".concat(navItemNamespace, "__link")
}, icon && /*#__PURE__*/React.createElement("img", {
alt: navigationItemTitle,
className: "".concat(navItemNamespace, "__img"),
src: icon
}), /*#__PURE__*/React.createElement("div", {
className: "".concat(navItemNamespace, "__content")
}, title), /*#__PURE__*/React.createElement(Icon, {
className: "".concat(navListNamespace, "__icon"),
renderIcon: ChevronDown16
})), /*#__PURE__*/React.createElement("ul", {
"aria-label": title,
"aria-hidden": !open,
className: "".concat(navListNamespace, " ").concat(navListNamespace, "--nested"),
role: "menu"
}, newChildren));
}
}]);
}(Component);
export { NavList as default };
NavList.defaultProps = {
activeHref: '#',
className: '',
children: null,
id: '',
isExpandedOnPageload: false,
onItemClick: function onItemClick() {},
onListClick: function onListClick() {},
tabIndex: 0,
title: '',
icon: '',
navigationItemTitle: ''
};
NavList.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} Icon of a list. */
icon: string,
/** @type {string} ID of a list. */
id: string,
/** @type {boolean} State of a list. */
isExpandedOnPageload: bool,
/** @type {boolean} Title of nav. */
navigationItemTitle: string,
/** @type {Function} Click handler for an item. */
onItemClick: func,
/** @type {Function} Click handler for a list. */
onListClick: func,
/** @type {number} `tabindex` of an item. */
tabIndex: number,
/** @type {string} Label of the list. */
title: string
};
NavList.displayName = 'NavList';