@massds/mayflower-react
Version:
React versions of Mayflower design system UI components
81 lines (80 loc) • 2.98 kB
JavaScript
;
exports.__esModule = true;
exports["default"] = void 0;
var _react = _interopRequireDefault(require("react"));
var _propTypes = _interopRequireDefault(require("prop-types"));
var _es = require("react-portal/es");
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); }
var TabBody = /*#__PURE__*/function (_React$Component) {
function TabBody(props) {
var _this;
_this = _React$Component.call(this, props) || this;
_this.state = {
nodeList: []
};
if (globalThis.MutationObserver) {
_this.observer = new MutationObserver(function (mutations) {
var tabContainer = document.getElementById(_this.props.tabContainerBodyId);
mutations.forEach(function (mutation) {
if (!mutation.target) {
return;
}
if (_this.props.active && mutation.target.contains(tabContainer)) {
_this.setState({
nodeList: [tabContainer]
});
} else if (!_this.props.active && mutation.target.contains(tabContainer)) {
_this.setState({
nodeList: []
});
}
});
});
}
return _this;
}
_inheritsLoose(TabBody, _React$Component);
var _proto = TabBody.prototype;
_proto.componentDidMount = function componentDidMount() {
var nodeList = document.getElementById(this.props.tabContainerBodyId);
if (nodeList) {
// eslint-disable-next-line react/no-did-mount-set-state
this.setState({
nodeList: [nodeList]
});
}
if (globalThis.MutationObserver) {
this.observer.observe(document, {
attributes: true,
childList: true,
subtree: true
});
}
};
_proto.componentWillUnmount = function componentWillUnmount() {
if (globalThis.MutationObserver) {
this.observer.disconnect();
}
};
_proto.render = function render() {
if (this.state.nodeList.length > 0 && this.props.active) {
return /*#__PURE__*/_react["default"].createElement(_es.Portal, {
node: this.state.nodeList[0]
}, this.props.children);
}
return null;
};
return TabBody;
}(_react["default"].Component);
TabBody.propTypes = process.env.NODE_ENV !== "production" ? {
/** The tab container body to render Tab children into. */
tabContainerBodyId: _propTypes["default"].string.isRequired,
/** Sets if the tab is the currently active tab or not. */
active: _propTypes["default"].bool,
/** Children passed to tab body (tab content) */
children: _propTypes["default"].node
} : {};
var _default = exports["default"] = TabBody;
module.exports = exports.default;