@massds/mayflower-react
Version:
React versions of Mayflower design system UI components
132 lines (131 loc) • 7.51 kB
JavaScript
;
exports.__esModule = true;
exports["default"] = void 0;
var _react = _interopRequireDefault(require("react"));
var _propTypes = _interopRequireDefault(require("prop-types"));
var _classnames = _interopRequireDefault(require("classnames"));
var _is = _interopRequireDefault(require("is"));
var _context = _interopRequireDefault(require("./context"));
var _tabBody = _interopRequireDefault(require("./tab-body"));
function _interopRequireDefault(e) { return e && e.__esModule ? e : { "default": e }; }
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); }
var 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", function (e) {
var nextIdent = null;
var prevIdent = null;
_this.context.tabIds.forEach(function (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') {
var 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) {
var 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') {
var _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) {
var 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() {
var _this2 = this;
var _this$props = this.props,
tabIdent = _this$props.tabIdent,
active = _this$props.active,
tabRef = _this$props.tabRef;
var _this$context = this.context,
setActiveTab = _this$context.setActiveTab,
activeTab = _this$context.activeTab;
var tabClasses = (0, _classnames["default"])({
'ma__tab-title': true,
'ma__tab-title--active': active
});
var buttonProps = {
onClick: function onClick(e) {
e.target.scrollIntoView({
behavior: 'smooth',
block: 'nearest',
inline: 'center'
});
e.persist();
if (activeTab !== tabIdent) {
setActiveTab(tabIdent);
}
if (_is["default"].fn(_this2.props.handleClick)) {
_this2.props.handleClick(e, tabIdent, _this2.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["default"].createElement(_react["default"].Fragment, null, /*#__PURE__*/_react["default"].createElement("li", {
role: "presentation",
className: tabClasses
}, /*#__PURE__*/_react["default"].createElement("button", _extends({
type: "button"
}, buttonProps), this.props.title)), String(globalThis) === '[object Window]' && /*#__PURE__*/_react["default"].createElement(_tabBody["default"], {
active: activeTab === tabIdent,
tabContainerBodyId: this.context.tabContainerBodyId
}, this.props.children));
};
return Tab;
}(_react["default"].Component);
Tab.contextType = _context["default"];
Tab.defaultProps = {
active: false
};
Tab.propTypes = process.env.NODE_ENV !== "production" ? {
/** The text of the tab. */
title: _propTypes["default"].string.isRequired,
/** A callback function ran after the tab has been clicked. */
handleClick: _propTypes["default"].func,
/** Sets if the tab is the currently active tab or not. */
active: _propTypes["default"].bool,
/** The unique identifier set by TabContainer. */
tabIdent: _propTypes["default"].string,
/** Children passed to tab container (tab content) */
children: _propTypes["default"].node,
/** The tabs ref */
tabRef: _propTypes["default"].oneOfType([_propTypes["default"].object, _propTypes["default"].any])
} : {};
var _default = exports["default"] = Tab;
module.exports = exports.default;