@massds/mayflower-react
Version:
React versions of Mayflower design system UI components
145 lines • 6.45 kB
JavaScript
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
*/
import React from "react";
import PropTypes from "prop-types";
import classNames from "classnames";
import nanoid from "nanoid";
import is from "is";
import TabContext from "./context";
let 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", tabId => {
const state = {
activeTab: tabId
};
_this.setState(state, () => {
if (is.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.createRef();
// When false, runs key down code for nested containers.
_this.preventBodyKeyDown = false;
const tabIds = new Map();
// This only works for class components because it is not re-generated on every render.
_this.spanId = nanoid();
_this.focusOnTabBody = () => {
_this.tabBodyRef.current.setAttribute('tabindex', '0');
_this.tabBodyRef.current.focus();
};
const tabRefs = {};
let activeTab = null;
React.Children.forEach(props.children, (child, index) => {
const id = nanoid();
tabIds.set(index, id);
tabRefs[tabIds.get(index)] = /*#__PURE__*/React.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: nanoid(),
tabContainerBodyId: nanoid(),
// 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: nanoid(),
tabContainerBodyId: nanoid()
});
};
_proto.render = function render() {
const classes = classNames({
'ma__tab-container': true,
'ma__tab-container--nested': this.props.nested
});
const ulClasses = classNames({
'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
const children = this.props.children;
const childrenWithProps = React.Children.map(children, (child, index) => {
const newProps = {
active: this.state.activeTab === this.state.tabIds.get(index),
tabIdent: this.state.tabIds.get(index),
tabRef: this.state.tabRefs[this.state.tabIds.get(index)]
};
return /*#__PURE__*/React.cloneElement(child, newProps, child.props.children);
});
return /*#__PURE__*/React.createElement(TabContext.Provider, {
value: this.state
}, /*#__PURE__*/React.createElement("div", {
className: classes
}, /*#__PURE__*/React.createElement("ul", {
className: ulClasses,
id: this.state.tabContainerId,
role: "tablist"
}, /*#__PURE__*/React.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.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.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.bool,
/** The numerical index of which tab should default to be open, starting at 0. */
defaultTab: PropTypes.number,
/** A callback function for a tab change, receives the tab's id and children */
onTabChange: PropTypes.func,
/** Children passed to tab container. */
children: PropTypes.node
} : {};
export default TabContainer;