import _extends from "@babel/runtime-corejs2/helpers/esm/extends"; import _objectWithoutPropertiesLoose from "@babel/runtime-corejs2/helpers/esm/objectWithoutPropertiesLoose"; import _inheritsLoose from "@babel/runtime-corejs2/helpers/esm/inheritsLoose"; import React from 'react'; import PropTypes from 'prop-types'; import requiredForA11y from 'prop-types-extra/lib/isRequiredForA11y'; import uncontrollable from 'uncontrollable'; import elementType from 'prop-types-extra/lib/elementType'; import Nav from './Nav'; import NavItem from './NavItem'; import UncontrolledTabContainer from './TabContainer'; import TabContent from './TabContent'; import { bsClass as setBsClass } from './utils/bootstrapUtils'; import ValidComponentChildren from './utils/ValidComponentChildren'; var TabContainer = UncontrolledTabContainer.ControlledComponent; var propTypes = { /** * Mark the Tab with a matching `eventKey` as active. * * @controllable onSelect */ activeKey: PropTypes.any, /** * Navigation style */ bsStyle: PropTypes.oneOf(['tabs', 'pills']), /** * Sets a default animation strategy. Use `false` to disable, `true` * to enable the default `` animation, or a react-transition-group * v2 `` component. */ animation: PropTypes.oneOfType([PropTypes.bool, elementType]), id: requiredForA11y(PropTypes.oneOfType([PropTypes.string, PropTypes.number])), /** * Callback fired when a Tab is selected. * * ```js * function ( * Any eventKey, * SyntheticEvent event? * ) * ``` * * @controllable activeKey */ onSelect: PropTypes.func, /** * Wait until the first "enter" transition to mount tabs (add them to the DOM) */ mountOnEnter: PropTypes.bool, /** * Unmount tabs (remove it from the DOM) when it is no longer visible */ unmountOnExit: PropTypes.bool }; var defaultProps = { bsStyle: 'tabs', animation: true, mountOnEnter: false, unmountOnExit: false }; function getDefaultActiveKey(children) { var defaultActiveKey; ValidComponentChildren.forEach(children, function (child) { if (defaultActiveKey == null) { defaultActiveKey = child.props.eventKey; } }); return defaultActiveKey; } var Tabs = /*#__PURE__*/ function (_React$Component) { _inheritsLoose(Tabs, _React$Component); function Tabs() { return _React$Component.apply(this, arguments) || this; } var _proto = Tabs.prototype; _proto.renderTab = function renderTab(child) { var _child$props = child.props, title = _child$props.title, eventKey = _child$props.eventKey, disabled = _child$props.disabled, tabClassName = _child$props.tabClassName; if (title == null) { return null; } return React.createElement(NavItem, { eventKey: eventKey, disabled: disabled, className: tabClassName }, title); }; _proto.render = function render() { var _this$props = this.props, id = _this$props.id, onSelect = _this$props.onSelect, animation = _this$props.animation, mountOnEnter = _this$props.mountOnEnter, unmountOnExit = _this$props.unmountOnExit, bsClass = _this$props.bsClass, className = _this$props.className, style = _this$props.style, children = _this$props.children, _this$props$activeKey = _this$props.activeKey, activeKey = _this$props$activeKey === void 0 ? getDefaultActiveKey(children) : _this$props$activeKey, props = _objectWithoutPropertiesLoose(_this$props, ["id", "onSelect", "animation", "mountOnEnter", "unmountOnExit", "bsClass", "className", "style", "children", "activeKey"]); return React.createElement(TabContainer, { id: id, activeKey: activeKey, onSelect: onSelect, className: className, style: style }, React.createElement("div", null, React.createElement(Nav, _extends({}, props, { role: "tablist" }), ValidComponentChildren.map(children, this.renderTab)), React.createElement(TabContent, { bsClass: bsClass, animation: animation, mountOnEnter: mountOnEnter, unmountOnExit: unmountOnExit }, children))); }; return Tabs; }(React.Component); Tabs.propTypes = propTypes; Tabs.defaultProps = defaultProps; setBsClass('tab', Tabs); export default uncontrollable(Tabs, { activeKey: 'onSelect' });