@massds/mayflower-react
Version:
React versions of Mayflower design system UI components
125 lines • 6.87 kB
JavaScript
function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
function _inheritsLoose(t, o) { t.prototype = Object.create(o.prototype), t.prototype.constructor = t, _setPrototypeOf(t, o); }
function _setPrototypeOf(t, e) { return _setPrototypeOf = Object.setPrototypeOf ? Object.setPrototypeOf.bind() : function (t, e) { return t.__proto__ = e, t; }, _setPrototypeOf(t, e); }
function _defineProperty(e, r, t) { return (r = _toPropertyKey(r)) in e ? Object.defineProperty(e, r, { value: t, enumerable: !0, configurable: !0, writable: !0 }) : e[r] = t, e; }
function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == typeof i ? i : i + ""; }
function _toPrimitive(t, r) { if ("object" != typeof t || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != typeof i) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
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) {
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(_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;
}
_inheritsLoose(Tab, _React$Component);
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)), String(globalThis) === '[object 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;