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 _assertThisInitialized from "@babel/runtime-corejs2/helpers/esm/assertThisInitialized"; import classNames from 'classnames'; import React from 'react'; import PropTypes from 'prop-types'; import elementType from 'prop-types-extra/lib/elementType'; import { bsClass as setBsClass, prefix, splitBsPropsAndOmit } from './utils/bootstrapUtils'; var propTypes = { componentClass: elementType, /** * Sets a default animation strategy for all children ``s. Use * `false` to disable, `true` to enable the default `` animation or * a react-transition-group v2 `` component. */ animation: PropTypes.oneOfType([PropTypes.bool, elementType]), /** * 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 they are no longer visible */ unmountOnExit: PropTypes.bool }; var defaultProps = { componentClass: 'div', animation: true, mountOnEnter: false, unmountOnExit: false }; var contextTypes = { $bs_tabContainer: PropTypes.shape({ activeKey: PropTypes.any }) }; var childContextTypes = { $bs_tabContent: PropTypes.shape({ bsClass: PropTypes.string, animation: PropTypes.oneOfType([PropTypes.bool, elementType]), activeKey: PropTypes.any, mountOnEnter: PropTypes.bool, unmountOnExit: PropTypes.bool, onPaneEnter: PropTypes.func.isRequired, onPaneExited: PropTypes.func.isRequired, exiting: PropTypes.bool.isRequired }) }; var TabContent = /*#__PURE__*/ function (_React$Component) { _inheritsLoose(TabContent, _React$Component); function TabContent(props, context) { var _this; _this = _React$Component.call(this, props, context) || this; _this.handlePaneEnter = _this.handlePaneEnter.bind(_assertThisInitialized(_assertThisInitialized(_this))); _this.handlePaneExited = _this.handlePaneExited.bind(_assertThisInitialized(_assertThisInitialized(_this))); // Active entries in state will be `null` unless `animation` is set. Need // to track active child in case keys swap and the active child changes // but the active key does not. _this.state = { activeKey: null, activeChild: null }; return _this; } var _proto = TabContent.prototype; _proto.getChildContext = function getChildContext() { var _this$props = this.props, bsClass = _this$props.bsClass, animation = _this$props.animation, mountOnEnter = _this$props.mountOnEnter, unmountOnExit = _this$props.unmountOnExit; var stateActiveKey = this.state.activeKey; var containerActiveKey = this.getContainerActiveKey(); var activeKey = stateActiveKey != null ? stateActiveKey : containerActiveKey; var exiting = stateActiveKey != null && stateActiveKey !== containerActiveKey; return { $bs_tabContent: { bsClass: bsClass, animation: animation, activeKey: activeKey, mountOnEnter: mountOnEnter, unmountOnExit: unmountOnExit, onPaneEnter: this.handlePaneEnter, onPaneExited: this.handlePaneExited, exiting: exiting } }; }; _proto.componentWillReceiveProps = function componentWillReceiveProps(nextProps) { if (!nextProps.animation && this.state.activeChild) { this.setState({ activeKey: null, activeChild: null }); } }; _proto.componentWillUnmount = function componentWillUnmount() { this.isUnmounted = true; }; _proto.getContainerActiveKey = function getContainerActiveKey() { var tabContainer = this.context.$bs_tabContainer; return tabContainer && tabContainer.activeKey; }; _proto.handlePaneEnter = function handlePaneEnter(child, childKey) { if (!this.props.animation) { return false; } // It's possible that this child should be transitioning out. if (childKey !== this.getContainerActiveKey()) { return false; } this.setState({ activeKey: childKey, activeChild: child }); return true; }; _proto.handlePaneExited = function handlePaneExited(child) { // This might happen as everything is unmounting. if (this.isUnmounted) { return; } this.setState(function (_ref) { var activeChild = _ref.activeChild; if (activeChild !== child) { return null; } return { activeKey: null, activeChild: null }; }); }; _proto.render = function render() { var _this$props2 = this.props, Component = _this$props2.componentClass, className = _this$props2.className, props = _objectWithoutPropertiesLoose(_this$props2, ["componentClass", "className"]); var _splitBsPropsAndOmit = splitBsPropsAndOmit(props, ['animation', 'mountOnEnter', 'unmountOnExit']), bsProps = _splitBsPropsAndOmit[0], elementProps = _splitBsPropsAndOmit[1]; return React.createElement(Component, _extends({}, elementProps, { className: classNames(className, prefix(bsProps, 'content')) })); }; return TabContent; }(React.Component); TabContent.propTypes = propTypes; TabContent.defaultProps = defaultProps; TabContent.contextTypes = contextTypes; TabContent.childContextTypes = childContextTypes; export default setBsClass('tab', TabContent);