@carbon/ibm-security
Version:
Carbon for Cloud & Cognitive IBM Security UI components
204 lines (198 loc) • 8.71 kB
JavaScript
"use strict";
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
var _typeof = require("@babel/runtime/helpers/typeof");
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.navListNamespace = exports.default = void 0;
var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
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 _iconsReact = require("@carbon/icons-react");
var _classnames2 = _interopRequireDefault(require("classnames"));
var _propTypes = require("prop-types");
var _react = _interopRequireWildcard(require("react"));
var _namespace = require("../../../globals/namespace");
var _Icon = _interopRequireDefault(require("../../Icon"));
var _NavItem = _interopRequireWildcard(require("../NavItem/NavItem"));
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 list class.
* @copyright IBM Security 2019 - 2021
*/
var navListNamespace = exports.navListNamespace = (0, _namespace.getComponentNamespace)('nav__list');
var NavList = exports.default = /*#__PURE__*/function (_Component) {
function NavList(props) {
var _this;
(0, _classCallCheck2.default)(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.default.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.
*/
(0, _inherits2.default)(NavList, _Component);
return (0, _createClass2.default)(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.default.createElement(_NavItem.default, (0, _extends2.default)({}, props, {
key: "".concat(_NavItem.namespace, "--").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 = (0, _classnames2.default)(navListNamespace, className, (0, _defineProperty2.default)({}, "".concat(_NavItem.namespace, "--expanded"), open));
var newChildren = _react.default.Children.map(children, function (child, index) {
return _this2.buildNewItemChild(child, index);
});
return /*#__PURE__*/_react.default.createElement("li", {
className: classNames,
tabIndex: tabIndex,
onClick: this.toggle,
onKeyPress: this.toggle,
role: "menuitem"
}, /*#__PURE__*/_react.default.createElement("div", {
className: "".concat(_NavItem.namespace, "__link")
}, icon && /*#__PURE__*/_react.default.createElement("img", {
alt: navigationItemTitle,
className: "".concat(_NavItem.namespace, "__img"),
src: icon
}), /*#__PURE__*/_react.default.createElement("div", {
className: "".concat(_NavItem.namespace, "__content")
}, title), /*#__PURE__*/_react.default.createElement(_Icon.default, {
className: "".concat(navListNamespace, "__icon"),
renderIcon: _iconsReact.ChevronDown16
})), /*#__PURE__*/_react.default.createElement("ul", {
"aria-label": title,
"aria-hidden": !open,
className: "".concat(navListNamespace, " ").concat(navListNamespace, "--nested"),
role: "menu"
}, newChildren));
}
}]);
}(_react.Component);
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: _propTypes.string,
/** @type {Node} Child elements. */
children: _propTypes.node,
/** @type {string} Extra classes to add. */
className: _propTypes.string,
/** @type {string} Icon of a list. */
icon: _propTypes.string,
/** @type {string} ID of a list. */
id: _propTypes.string,
/** @type {boolean} State of a list. */
isExpandedOnPageload: _propTypes.bool,
/** @type {boolean} Title of nav. */
navigationItemTitle: _propTypes.string,
/** @type {Function} Click handler for an item. */
onItemClick: _propTypes.func,
/** @type {Function} Click handler for a list. */
onListClick: _propTypes.func,
/** @type {number} `tabindex` of an item. */
tabIndex: _propTypes.number,
/** @type {string} Label of the list. */
title: _propTypes.string
};
NavList.displayName = 'NavList';