@massds/mayflower-react
Version:
React versions of Mayflower design system UI components
149 lines (123 loc) • 6.6 kB
JavaScript
function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
function _assertThisInitialized(self) { if (self === void 0) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return self; }
function _inheritsLoose(subClass, superClass) { subClass.prototype = Object.create(superClass.prototype); subClass.prototype.constructor = subClass; subClass.__proto__ = superClass; }
function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
import React from "react";
import PropTypes from "prop-types";
import classNames from "classnames";
import is from "is";
import TabContext from "./context";
import TabBody from "./tab-body";
let Tab = /*#__PURE__*/function (_React$Component) {
_inheritsLoose(Tab, _React$Component);
function Tab() {
var _this;
for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
args[_key] = arguments[_key];
}
_this = _React$Component.call.apply(_React$Component, [this].concat(args)) || this;
_defineProperty(_assertThisInitialized(_this), "handleKeyDown", e => {
let nextIdent = null;
let prevIdent = null;
_this.context.tabIds.forEach((ident, key) => {
if (_this.context.activeTab === ident) {
nextIdent = key === _this.context.tabIds.size - 1 ? _this.context.tabIds.get(0) : _this.context.tabIds.get(key + 1);
prevIdent = key === 0 ? _this.context.tabIds.get(_this.context.tabIds.size - 1) : _this.context.tabIds.get(key - 1);
}
});
if (e.key === 'ArrowRight') {
const body = document.getElementById(_this.context.tabContainerBodyId);
if (_this.context.tabRefs[nextIdent]) {
_this.context.setActiveTab(nextIdent);
} else if (!body.getElementsByClassName('ma__tab-container--nested')[0] && e.currentTarget.closest('div.ma__tab-container').parentElement.closest('div.ma__tab-container') && e.currentTarget.closest('div.ma__tab-container').parentElement.closest('div.ma__tab-container').getElementsByClassName('ma__tab-title--active')[0].nextElementSibling) {
// If the TabContainer has a parent TabContainer, and that container has a next selectable sibling.
if (e.currentTarget.closest('div.ma__tab-container').parentElement.closest('div.ma__tab-container') && e.currentTarget.closest('div.ma__tab-container').parentElement.closest('div.ma__tab-container').getElementsByClassName('ma__tab-title--active')[0].nextElementSibling) {
const nextTab = e.currentTarget.closest('div.ma__tab-container').parentElement.closest('div.ma__tab-container').getElementsByClassName('ma__tab-title--active')[0].nextElementSibling.getElementsByTagName('button')[0];
nextTab.removeAttribute('tabindex');
nextTab.focus();
}
}
}
if (e.key === 'ArrowLeft') {
const body = document.getElementById(_this.context.tabContainerBodyId);
if (_this.context.tabRefs[prevIdent]) {
_this.context.setActiveTab(prevIdent);
} else if (!body.getElementsByClassName('ma__tab-container--nested')[0]) {
// If the TabContainer has a parent TabContainer, and that container has a previous selectable sibling.
if (e.currentTarget.closest('div.ma__tab-container').parentElement.closest('div.ma__tab-container') && e.currentTarget.closest('div.ma__tab-container').parentElement.closest('div.ma__tab-container').getElementsByClassName('ma__tab-title--active')[0].previousElementSibling) {
const prevTab = e.currentTarget.closest('div.ma__tab-container').parentElement.closest('div.ma__tab-container').getElementsByClassName('ma__tab-title--active')[0].previousElementSibling.getElementsByTagName('button')[0];
prevTab.removeAttribute('tabindex');
prevTab.focus();
}
}
}
});
return _this;
}
var _proto = Tab.prototype;
_proto.render = function render() {
const _this$props = this.props,
tabIdent = _this$props.tabIdent,
active = _this$props.active,
tabRef = _this$props.tabRef;
const _this$context = this.context,
setActiveTab = _this$context.setActiveTab,
activeTab = _this$context.activeTab;
const tabClasses = classNames({
'ma__tab-title': true,
'ma__tab-title--active': active
});
const buttonProps = {
onClick: e => {
e.target.scrollIntoView({
behavior: 'smooth',
block: 'nearest',
inline: 'center'
});
e.persist();
if (activeTab !== tabIdent) {
setActiveTab(tabIdent);
}
if (is.fn(this.props.handleClick)) {
this.props.handleClick(e, tabIdent, this.props.children);
}
},
onKeyDown: this.handleKeyDown,
id: tabIdent,
'aria-selected': active,
'aria-controls': this.context.tabContainerBodyId,
role: 'tab',
ref: tabRef,
tabIndex: active ? 0 : -1
};
return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("li", {
role: "presentation",
className: tabClasses
}, /*#__PURE__*/React.createElement("button", _extends({
type: "button"
}, buttonProps), this.props.title)), global.window && /*#__PURE__*/React.createElement(TabBody, {
active: activeTab === tabIdent,
tabContainerBodyId: this.context.tabContainerBodyId
}, this.props.children));
};
return Tab;
}(React.Component);
Tab.contextType = TabContext;
Tab.defaultProps = {
active: false
};
Tab.propTypes = process.env.NODE_ENV !== "production" ? {
/** The text of the tab. */
title: PropTypes.string.isRequired,
/** A callback function ran after the tab has been clicked. */
handleClick: PropTypes.func,
/** Sets if the tab is the currently active tab or not. */
active: PropTypes.bool,
/** The unique identifier set by TabContainer. */
tabIdent: PropTypes.string,
/** Children passed to tab container (tab content) */
children: PropTypes.node,
/** The tabs ref */
tabRef: PropTypes.oneOfType([PropTypes.object, PropTypes.any])
} : {};
export default Tab;