364 lines
12 KiB
JavaScript
364 lines
12 KiB
JavaScript
"use strict";
|
|
|
|
var _interopRequireWildcard = require("@babel/runtime-corejs2/helpers/interopRequireWildcard");
|
|
|
|
var _interopRequireDefault = require("@babel/runtime-corejs2/helpers/interopRequireDefault");
|
|
|
|
exports.__esModule = true;
|
|
exports.default = void 0;
|
|
|
|
var _extends3 = _interopRequireDefault(require("@babel/runtime-corejs2/helpers/extends"));
|
|
|
|
var _objectWithoutPropertiesLoose2 = _interopRequireDefault(require("@babel/runtime-corejs2/helpers/objectWithoutPropertiesLoose"));
|
|
|
|
var _inheritsLoose2 = _interopRequireDefault(require("@babel/runtime-corejs2/helpers/inheritsLoose"));
|
|
|
|
var _classnames = _interopRequireDefault(require("classnames"));
|
|
|
|
var _keycode = _interopRequireDefault(require("keycode"));
|
|
|
|
var _react = _interopRequireWildcard(require("react"));
|
|
|
|
var _propTypes = _interopRequireDefault(require("prop-types"));
|
|
|
|
var _reactDom = _interopRequireDefault(require("react-dom"));
|
|
|
|
var _all = _interopRequireDefault(require("prop-types-extra/lib/all"));
|
|
|
|
var _warning = _interopRequireDefault(require("warning"));
|
|
|
|
var _bootstrapUtils = require("./utils/bootstrapUtils");
|
|
|
|
var _createChainedFunction = _interopRequireDefault(require("./utils/createChainedFunction"));
|
|
|
|
var _ValidComponentChildren = _interopRequireDefault(require("./utils/ValidComponentChildren"));
|
|
|
|
// TODO: Should we expose `<NavItem>` as `<Nav.Item>`?
|
|
// TODO: This `bsStyle` is very unlike the others. Should we rename it?
|
|
// TODO: `pullRight` and `pullLeft` don't render right outside of `navbar`.
|
|
// Consider renaming or replacing them.
|
|
var propTypes = {
|
|
/**
|
|
* Marks the NavItem with a matching `eventKey` as active. Has a
|
|
* higher precedence over `activeHref`.
|
|
*/
|
|
activeKey: _propTypes.default.any,
|
|
|
|
/**
|
|
* Marks the child NavItem with a matching `href` prop as active.
|
|
*/
|
|
activeHref: _propTypes.default.string,
|
|
|
|
/**
|
|
* NavItems are be positioned vertically.
|
|
*/
|
|
stacked: _propTypes.default.bool,
|
|
justified: (0, _all.default)(_propTypes.default.bool, function (_ref) {
|
|
var justified = _ref.justified,
|
|
navbar = _ref.navbar;
|
|
return justified && navbar ? Error('justified navbar `Nav`s are not supported') : null;
|
|
}),
|
|
|
|
/**
|
|
* A callback fired when a NavItem is selected.
|
|
*
|
|
* ```js
|
|
* function (
|
|
* Any eventKey,
|
|
* SyntheticEvent event?
|
|
* )
|
|
* ```
|
|
*/
|
|
onSelect: _propTypes.default.func,
|
|
|
|
/**
|
|
* ARIA role for the Nav, in the context of a TabContainer, the default will
|
|
* be set to "tablist", but can be overridden by the Nav when set explicitly.
|
|
*
|
|
* When the role is set to "tablist" NavItem focus is managed according to
|
|
* the ARIA authoring practices for tabs:
|
|
* https://www.w3.org/TR/2013/WD-wai-aria-practices-20130307/#tabpanel
|
|
*/
|
|
role: _propTypes.default.string,
|
|
|
|
/**
|
|
* Apply styling an alignment for use in a Navbar. This prop will be set
|
|
* automatically when the Nav is used inside a Navbar.
|
|
*/
|
|
navbar: _propTypes.default.bool,
|
|
|
|
/**
|
|
* Float the Nav to the right. When `navbar` is `true` the appropriate
|
|
* contextual classes are added as well.
|
|
*/
|
|
pullRight: _propTypes.default.bool,
|
|
|
|
/**
|
|
* Float the Nav to the left. When `navbar` is `true` the appropriate
|
|
* contextual classes are added as well.
|
|
*/
|
|
pullLeft: _propTypes.default.bool
|
|
};
|
|
var defaultProps = {
|
|
justified: false,
|
|
pullRight: false,
|
|
pullLeft: false,
|
|
stacked: false
|
|
};
|
|
var contextTypes = {
|
|
$bs_navbar: _propTypes.default.shape({
|
|
bsClass: _propTypes.default.string,
|
|
onSelect: _propTypes.default.func
|
|
}),
|
|
$bs_tabContainer: _propTypes.default.shape({
|
|
activeKey: _propTypes.default.any,
|
|
onSelect: _propTypes.default.func.isRequired,
|
|
getTabId: _propTypes.default.func.isRequired,
|
|
getPaneId: _propTypes.default.func.isRequired
|
|
})
|
|
};
|
|
|
|
var Nav =
|
|
/*#__PURE__*/
|
|
function (_React$Component) {
|
|
(0, _inheritsLoose2.default)(Nav, _React$Component);
|
|
|
|
function Nav() {
|
|
return _React$Component.apply(this, arguments) || this;
|
|
}
|
|
|
|
var _proto = Nav.prototype;
|
|
|
|
_proto.componentDidUpdate = function componentDidUpdate() {
|
|
var _this = this;
|
|
|
|
if (!this._needsRefocus) {
|
|
return;
|
|
}
|
|
|
|
this._needsRefocus = false;
|
|
var children = this.props.children;
|
|
|
|
var _this$getActiveProps = this.getActiveProps(),
|
|
activeKey = _this$getActiveProps.activeKey,
|
|
activeHref = _this$getActiveProps.activeHref;
|
|
|
|
var activeChild = _ValidComponentChildren.default.find(children, function (child) {
|
|
return _this.isActive(child, activeKey, activeHref);
|
|
});
|
|
|
|
var childrenArray = _ValidComponentChildren.default.toArray(children);
|
|
|
|
var activeChildIndex = childrenArray.indexOf(activeChild);
|
|
|
|
var childNodes = _reactDom.default.findDOMNode(this).children;
|
|
|
|
var activeNode = childNodes && childNodes[activeChildIndex];
|
|
|
|
if (!activeNode || !activeNode.firstChild) {
|
|
return;
|
|
}
|
|
|
|
activeNode.firstChild.focus();
|
|
};
|
|
|
|
_proto.getActiveProps = function getActiveProps() {
|
|
var tabContainer = this.context.$bs_tabContainer;
|
|
|
|
if (tabContainer) {
|
|
process.env.NODE_ENV !== "production" ? (0, _warning.default)(this.props.activeKey == null && !this.props.activeHref, 'Specifying a `<Nav>` `activeKey` or `activeHref` in the context of ' + 'a `<TabContainer>` is not supported. Instead use `<TabContainer ' + ("activeKey={" + this.props.activeKey + "} />`.")) : void 0;
|
|
return tabContainer;
|
|
}
|
|
|
|
return this.props;
|
|
};
|
|
|
|
_proto.getNextActiveChild = function getNextActiveChild(offset) {
|
|
var _this2 = this;
|
|
|
|
var children = this.props.children;
|
|
var validChildren = children.filter(function (child) {
|
|
return child.props.eventKey != null && !child.props.disabled;
|
|
});
|
|
|
|
var _this$getActiveProps2 = this.getActiveProps(),
|
|
activeKey = _this$getActiveProps2.activeKey,
|
|
activeHref = _this$getActiveProps2.activeHref;
|
|
|
|
var activeChild = _ValidComponentChildren.default.find(children, function (child) {
|
|
return _this2.isActive(child, activeKey, activeHref);
|
|
}); // This assumes the active child is not disabled.
|
|
|
|
|
|
var activeChildIndex = validChildren.indexOf(activeChild);
|
|
|
|
if (activeChildIndex === -1) {
|
|
// Something has gone wrong. Select the first valid child we can find.
|
|
return validChildren[0];
|
|
}
|
|
|
|
var nextIndex = activeChildIndex + offset;
|
|
var numValidChildren = validChildren.length;
|
|
|
|
if (nextIndex >= numValidChildren) {
|
|
nextIndex = 0;
|
|
} else if (nextIndex < 0) {
|
|
nextIndex = numValidChildren - 1;
|
|
}
|
|
|
|
return validChildren[nextIndex];
|
|
};
|
|
|
|
_proto.getTabProps = function getTabProps(child, tabContainer, navRole, active, onSelect) {
|
|
var _this3 = this;
|
|
|
|
if (!tabContainer && navRole !== 'tablist') {
|
|
// No tab props here.
|
|
return null;
|
|
}
|
|
|
|
var _child$props = child.props,
|
|
id = _child$props.id,
|
|
controls = _child$props['aria-controls'],
|
|
eventKey = _child$props.eventKey,
|
|
role = _child$props.role,
|
|
onKeyDown = _child$props.onKeyDown,
|
|
tabIndex = _child$props.tabIndex;
|
|
|
|
if (tabContainer) {
|
|
process.env.NODE_ENV !== "production" ? (0, _warning.default)(!id && !controls, 'In the context of a `<TabContainer>`, `<NavItem>`s are given ' + 'generated `id` and `aria-controls` attributes for the sake of ' + 'proper component accessibility. Any provided ones will be ignored. ' + 'To control these attributes directly, provide a `generateChildId` ' + 'prop to the parent `<TabContainer>`.') : void 0;
|
|
id = tabContainer.getTabId(eventKey);
|
|
controls = tabContainer.getPaneId(eventKey);
|
|
}
|
|
|
|
if (navRole === 'tablist') {
|
|
role = role || 'tab';
|
|
onKeyDown = (0, _createChainedFunction.default)(function (event) {
|
|
return _this3.handleTabKeyDown(onSelect, event);
|
|
}, onKeyDown);
|
|
tabIndex = active ? tabIndex : -1;
|
|
}
|
|
|
|
return {
|
|
id: id,
|
|
role: role,
|
|
onKeyDown: onKeyDown,
|
|
'aria-controls': controls,
|
|
tabIndex: tabIndex
|
|
};
|
|
};
|
|
|
|
_proto.handleTabKeyDown = function handleTabKeyDown(onSelect, event) {
|
|
var nextActiveChild;
|
|
|
|
switch (event.keyCode) {
|
|
case _keycode.default.codes.left:
|
|
case _keycode.default.codes.up:
|
|
nextActiveChild = this.getNextActiveChild(-1);
|
|
break;
|
|
|
|
case _keycode.default.codes.right:
|
|
case _keycode.default.codes.down:
|
|
nextActiveChild = this.getNextActiveChild(1);
|
|
break;
|
|
|
|
default:
|
|
// It was a different key; don't handle this keypress.
|
|
return;
|
|
}
|
|
|
|
event.preventDefault();
|
|
|
|
if (onSelect && nextActiveChild && nextActiveChild.props.eventKey != null) {
|
|
onSelect(nextActiveChild.props.eventKey);
|
|
}
|
|
|
|
this._needsRefocus = true;
|
|
};
|
|
|
|
_proto.isActive = function isActive(_ref2, activeKey, activeHref) {
|
|
var props = _ref2.props;
|
|
|
|
if (props.active || activeKey != null && props.eventKey === activeKey || activeHref && props.href === activeHref) {
|
|
return true;
|
|
}
|
|
|
|
return props.active;
|
|
};
|
|
|
|
_proto.render = function render() {
|
|
var _extends2,
|
|
_this4 = this;
|
|
|
|
var _this$props = this.props,
|
|
stacked = _this$props.stacked,
|
|
justified = _this$props.justified,
|
|
onSelect = _this$props.onSelect,
|
|
propsRole = _this$props.role,
|
|
propsNavbar = _this$props.navbar,
|
|
pullRight = _this$props.pullRight,
|
|
pullLeft = _this$props.pullLeft,
|
|
className = _this$props.className,
|
|
children = _this$props.children,
|
|
props = (0, _objectWithoutPropertiesLoose2.default)(_this$props, ["stacked", "justified", "onSelect", "role", "navbar", "pullRight", "pullLeft", "className", "children"]);
|
|
var tabContainer = this.context.$bs_tabContainer;
|
|
var role = propsRole || (tabContainer ? 'tablist' : null);
|
|
|
|
var _this$getActiveProps3 = this.getActiveProps(),
|
|
activeKey = _this$getActiveProps3.activeKey,
|
|
activeHref = _this$getActiveProps3.activeHref;
|
|
|
|
delete props.activeKey; // Accessed via this.getActiveProps().
|
|
|
|
delete props.activeHref; // Accessed via this.getActiveProps().
|
|
|
|
var _splitBsProps = (0, _bootstrapUtils.splitBsProps)(props),
|
|
bsProps = _splitBsProps[0],
|
|
elementProps = _splitBsProps[1];
|
|
|
|
var classes = (0, _extends3.default)({}, (0, _bootstrapUtils.getClassSet)(bsProps), (_extends2 = {}, _extends2[(0, _bootstrapUtils.prefix)(bsProps, 'stacked')] = stacked, _extends2[(0, _bootstrapUtils.prefix)(bsProps, 'justified')] = justified, _extends2));
|
|
var navbar = propsNavbar != null ? propsNavbar : this.context.$bs_navbar;
|
|
var pullLeftClassName;
|
|
var pullRightClassName;
|
|
|
|
if (navbar) {
|
|
var navbarProps = this.context.$bs_navbar || {
|
|
bsClass: 'navbar'
|
|
};
|
|
classes[(0, _bootstrapUtils.prefix)(navbarProps, 'nav')] = true;
|
|
pullRightClassName = (0, _bootstrapUtils.prefix)(navbarProps, 'right');
|
|
pullLeftClassName = (0, _bootstrapUtils.prefix)(navbarProps, 'left');
|
|
} else {
|
|
pullRightClassName = 'pull-right';
|
|
pullLeftClassName = 'pull-left';
|
|
}
|
|
|
|
classes[pullRightClassName] = pullRight;
|
|
classes[pullLeftClassName] = pullLeft;
|
|
return _react.default.createElement("ul", (0, _extends3.default)({}, elementProps, {
|
|
role: role,
|
|
className: (0, _classnames.default)(className, classes)
|
|
}), _ValidComponentChildren.default.map(children, function (child) {
|
|
var active = _this4.isActive(child, activeKey, activeHref);
|
|
|
|
var childOnSelect = (0, _createChainedFunction.default)(child.props.onSelect, onSelect, navbar && navbar.onSelect, tabContainer && tabContainer.onSelect);
|
|
return (0, _react.cloneElement)(child, (0, _extends3.default)({}, _this4.getTabProps(child, tabContainer, role, active, childOnSelect), {
|
|
active: active,
|
|
activeKey: activeKey,
|
|
activeHref: activeHref,
|
|
onSelect: childOnSelect
|
|
}));
|
|
}));
|
|
};
|
|
|
|
return Nav;
|
|
}(_react.default.Component);
|
|
|
|
Nav.propTypes = propTypes;
|
|
Nav.defaultProps = defaultProps;
|
|
Nav.contextTypes = contextTypes;
|
|
|
|
var _default = (0, _bootstrapUtils.bsClass)('nav', (0, _bootstrapUtils.bsStyles)(['tabs', 'pills'], Nav));
|
|
|
|
exports.default = _default;
|
|
module.exports = exports["default"]; |