@carbon/ibm-security
Version:
Carbon for Cloud & Cognitive IBM Security UI components
158 lines (156 loc) • 6.79 kB
JavaScript
import _extends from "@babel/runtime/helpers/extends";
import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
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";
import _defineProperty from "@babel/runtime/helpers/defineProperty";
var _excluded = ["className", "element", "tabIndex", "children", "disabled", "label", "onClick", "href", "activeHref", "current", "handleItemSelect", "link", "id"];
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 item class.
* @copyright IBM Security 2019 - 2021
*/
import { Launch16 } from '@carbon/icons-react';
import setupGetInstanceId from 'carbon-components-react/es/tools/setupGetInstanceId';
import classnames from 'classnames';
import { bool, elementType, func, node, number, string } from 'prop-types';
import React, { Component } from 'react';
import Icon from '../../Icon';
import NavItemLink from '../NavItemLink';
import { getComponentNamespace } from '../../../globals/namespace';
var getInstanceId = setupGetInstanceId();
export var namespace = getComponentNamespace('nav__list__item');
/**
* Navigation item component.
*/
var NavItem = /*#__PURE__*/function (_Component) {
function NavItem() {
var _this;
_classCallCheck(this, NavItem);
for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
args[_key] = arguments[_key];
}
_this = _callSuper(this, NavItem, [].concat(args));
_defineProperty(_this, "state", {
current: _this.props.current
});
_defineProperty(_this, "instanceId", "".concat(namespace, "__").concat(getInstanceId()));
return _this;
}
_inherits(NavItem, _Component);
return _createClass(NavItem, [{
key: "render",
value: function render() {
var _this$props = this.props,
className = _this$props.className,
element = _this$props.element,
tabIndex = _this$props.tabIndex,
children = _this$props.children,
disabled = _this$props.disabled,
label = _this$props.label,
_onClick = _this$props.onClick,
href = _this$props.href,
activeHref = _this$props.activeHref,
_ = _this$props.current,
handleItemSelect = _this$props.handleItemSelect,
link = _this$props.link,
id = _this$props.id,
other = _objectWithoutProperties(_this$props, _excluded);
var isAbsoluteLink = new RegExp('^([a-z]+://|//)', 'i');
var externalLink = isAbsoluteLink.test(href) && href.indexOf(window.location.host) === -1;
var navItemId = id || this.instanceId;
var classNames = classnames(namespace, className, _defineProperty(_defineProperty({}, "".concat(namespace, "--active"), this.state.current !== null && this.state.current === navItemId || activeHref !== undefined && activeHref === href && !externalLink), "".concat(namespace, "--disabled"), disabled));
var externalLinkProps = externalLink && {
rel: 'noopener noreferrer',
target: '_blank'
};
var handleDisabled = function handleDisabled(action) {
var defaultValue = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : null;
return !disabled ? action : defaultValue;
};
var linkClassName = "".concat(namespace, "__link");
var navItemTabIndex = handleDisabled(tabIndex, -1);
return /*#__PURE__*/React.createElement("li", {
className: classNames,
label: label,
onClick: function onClick(event) {
return handleDisabled(_onClick(event, href));
},
onKeyPress: function onKeyPress(event) {
return handleDisabled(_onClick(event, href));
},
role: "menuitem"
}, link ? /*#__PURE__*/React.createElement(NavItemLink, _extends({
id: navItemId,
className: classnames(linkClassName, _defineProperty({}, "".concat(namespace, "__link--external"), externalLink)),
element: element,
href: href,
tabIndex: navItemTabIndex
}, other, externalLinkProps), children, externalLink && /*#__PURE__*/React.createElement(Icon, {
className: "".concat(namespace, "__link--external__icon"),
renderIcon: Launch16
})) : /*#__PURE__*/React.createElement("div", {
id: navItemId,
className: linkClassName,
onClick: handleDisabled(handleItemSelect),
onKeyPress: handleDisabled(handleItemSelect),
role: "menuitem",
tabIndex: navItemTabIndex
}, children));
}
}], [{
key: "getDerivedStateFromProps",
value: function getDerivedStateFromProps(props, state) {
return props.current === state.current ? null : {
current: props.current
};
}
}]);
}(Component);
_defineProperty(NavItem, "propTypes", {
/** @type {string} Hypertext reference for active page. */
activeHref: string,
/** @type {Node} Children. */
children: node,
/** @type {string} Extra classes to add. */
className: string,
/** @type {string} Currently selected item. */
current: string,
/** @type {bool} Whether the item is disabled. */
disabled: bool,
/** @type {elementType} The base element to use to build the link. Defaults to `a`, can also accept alternative tag names or custom components like `Link` from `react-router`. */
element: elementType,
/** @type {Function} Click handler of an item. */
handleItemSelect: func,
/** @type {string} The href of the nav item. */
href: string,
/** @type {string} Identifier. */
id: string,
/** @type {string} Label of an item. */
label: string,
/** @type {bool} Whether the item is a link. */
link: bool,
/** @type {Function} Click handler of an item. */
onClick: func,
/** @type {number} `tabindex` of an item. */
tabIndex: number
});
_defineProperty(NavItem, "defaultProps", {
activeHref: '#',
children: null,
className: '',
current: null,
disabled: false,
element: 'a',
handleItemSelect: null,
href: undefined,
id: null,
label: '',
link: true,
onClick: function onClick() {},
tabIndex: 0
});
export { NavItem as default };