@massds/mayflower-react
Version:
React versions of Mayflower design system UI components
151 lines (150 loc) • 7.21 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 _nanoid = _interopRequireDefault(require("nanoid"));
var _is = _interopRequireDefault(require("is"));
var _context = _interopRequireDefault(require("./context"));
function _interopRequireDefault(e) { return e && e.__esModule ? e : { "default": e }; }
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); } /**
* TabContainer module.
* @module @massds/mayflower-react/TabContainer
* @requires module:@massds/mayflower-assets/scss/03-organisms/tab-container
*/
var TabContainer = /*#__PURE__*/function (_React$Component) {
function TabContainer(props) {
var _this;
_this = _React$Component.call(this, props) || this;
// Allows Tab to interact directly with the tab body div through context.
_defineProperty(_this, "setActiveTab", function (tabId) {
var state = {
activeTab: tabId
};
_this.setState(state, function () {
if (_is["default"].fn(_this.props.onTabChange)) {
_this.props.onTabChange(_this.state.tabRefs[tabId], tabId);
}
});
if (_this.state.tabRefs[tabId].current.focus) {
_this.state.tabRefs[tabId].current.focus();
}
});
_this.tabBodyRef = /*#__PURE__*/_react["default"].createRef();
// When false, runs key down code for nested containers.
_this.preventBodyKeyDown = false;
var tabIds = new Map();
// This only works for class components because it is not re-generated on every render.
_this.spanId = (0, _nanoid["default"])();
_this.focusOnTabBody = function () {
_this.tabBodyRef.current.setAttribute('tabindex', '0');
_this.tabBodyRef.current.focus();
};
var tabRefs = {};
var activeTab = null;
_react["default"].Children.forEach(props.children, function (child, index) {
var id = (0, _nanoid["default"])();
tabIds.set(index, id);
tabRefs[tabIds.get(index)] = /*#__PURE__*/_react["default"].createRef();
if (index === props.defaultTab) {
activeTab = id;
}
});
_this.state = {
activeTab: activeTab,
// eslint-disable-next-line react/no-unused-state
setActiveTab: _this.setActiveTab,
// eslint-disable-next-line react/no-unused-state
focusOnTabBody: _this.focusOnTabBody,
tabIds: tabIds,
tabRefs: tabRefs,
tabContainerId: (0, _nanoid["default"])(),
tabContainerBodyId: (0, _nanoid["default"])(),
// eslint-disable-next-line react/no-unused-state
tabBodyRef: _this.tabBodyRef
};
return _this;
}
_inheritsLoose(TabContainer, _React$Component);
var _proto = TabContainer.prototype;
_proto.componentDidMount = function componentDidMount() {
// React hydration ignores any differences in attributes for performance
// reasons. So, it's not able to fix an ID mismatch and we see different
// IDs in the DOM and in the state. As a temporary workaround, we push
// different IDs to the state. This triggers a re-rendering and fixes the
// mismatch.
// @see https://reactjs.org/docs/react-dom.html#hydrate
// @todo This component needs a revamp in order to properly support SSR,
// because right now it only renders the tabs, but not the tab body. The
// workaround below adds another round of re-rendering. It's a performance
// issue and could be avoided with a consistent ID generator or something
// like the useId() hook introduced in React 18.
this.setState({
tabContainerId: (0, _nanoid["default"])(),
tabContainerBodyId: (0, _nanoid["default"])()
});
};
_proto.render = function render() {
var _this2 = this;
var classes = (0, _classnames["default"])({
'ma__tab-container': true,
'ma__tab-container--nested': this.props.nested
});
var ulClasses = (0, _classnames["default"])({
'ma__tab-container-head': true,
'ma__tab-container-head--nested': this.props.nested,
'ma__tab-container-head--parent': !this.props.nested
});
// eslint-disable-next-line react/prop-types
var children = this.props.children;
var childrenWithProps = _react["default"].Children.map(children, function (child, index) {
var newProps = {
active: _this2.state.activeTab === _this2.state.tabIds.get(index),
tabIdent: _this2.state.tabIds.get(index),
tabRef: _this2.state.tabRefs[_this2.state.tabIds.get(index)]
};
return /*#__PURE__*/_react["default"].cloneElement(child, newProps, child.props.children);
});
return /*#__PURE__*/_react["default"].createElement(_context["default"].Provider, {
value: this.state
}, /*#__PURE__*/_react["default"].createElement("div", {
className: classes
}, /*#__PURE__*/_react["default"].createElement("ul", {
className: ulClasses,
id: this.state.tabContainerId,
role: "tablist"
}, /*#__PURE__*/_react["default"].createElement("span", {
id: this.spanId,
className: "ma__visually-hidden"
}, "Use left and right arrows to navigate between tabs, up and down arrows to navigate between active tab and its content."), childrenWithProps), /*#__PURE__*/_react["default"].createElement("div", {
"aria-labelledby": this.state.activeTab,
className: "ma__tab-container-body",
tabIndex: 0,
ref: this.tabBodyRef,
role: "tabpanel",
id: this.state.tabContainerBodyId
})));
};
return TabContainer;
}(_react["default"].Component);
TabContainer.defaultProps = {
nested: false,
defaultTab: 0
};
TabContainer.propTypes = process.env.NODE_ENV !== "production" ? {
/** When true, the styles of the container changes to drop borders around each tab. */
nested: _propTypes["default"].bool,
/** The numerical index of which tab should default to be open, starting at 0. */
defaultTab: _propTypes["default"].number,
/** A callback function for a tab change, receives the tab's id and children */
onTabChange: _propTypes["default"].func,
/** Children passed to tab container. */
children: _propTypes["default"].node
} : {};
var _default = exports["default"] = TabContainer;
module.exports = exports.default;