1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071727374757677787980 |
- import _extends from "@babel/runtime/helpers/esm/extends";
- import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
- import classNames from 'classnames';
- import React, { useContext } from 'react';
- import { useBootstrapPrefix } from './ThemeProvider';
- import TabContext from './TabContext';
- import SelectableContext, { makeEventKey } from './SelectableContext';
- import Fade from './Fade';
-
- function useTabContext(props) {
- var context = useContext(TabContext);
- if (!context) return props;
-
- var activeKey = context.activeKey,
- getControlledId = context.getControlledId,
- getControllerId = context.getControllerId,
- rest = _objectWithoutPropertiesLoose(context, ["activeKey", "getControlledId", "getControllerId"]);
-
- var shouldTransition = props.transition !== false && rest.transition !== false;
- var key = makeEventKey(props.eventKey);
- return _extends({}, props, {
- active: props.active == null && key != null ? makeEventKey(activeKey) === key : props.active,
- id: getControlledId(props.eventKey),
- 'aria-labelledby': getControllerId(props.eventKey),
- transition: shouldTransition && (props.transition || rest.transition || Fade),
- mountOnEnter: props.mountOnEnter != null ? props.mountOnEnter : rest.mountOnEnter,
- unmountOnExit: props.unmountOnExit != null ? props.unmountOnExit : rest.unmountOnExit
- });
- }
-
- var TabPane = React.forwardRef(function (props, ref) {
- var _useTabContext = useTabContext(props),
- bsPrefix = _useTabContext.bsPrefix,
- className = _useTabContext.className,
- active = _useTabContext.active,
- onEnter = _useTabContext.onEnter,
- onEntering = _useTabContext.onEntering,
- onEntered = _useTabContext.onEntered,
- onExit = _useTabContext.onExit,
- onExiting = _useTabContext.onExiting,
- onExited = _useTabContext.onExited,
- mountOnEnter = _useTabContext.mountOnEnter,
- unmountOnExit = _useTabContext.unmountOnExit,
- Transition = _useTabContext.transition,
- _useTabContext$as = _useTabContext.as,
- Component = _useTabContext$as === void 0 ? 'div' : _useTabContext$as,
- _ = _useTabContext.eventKey,
- rest = _objectWithoutPropertiesLoose(_useTabContext, ["bsPrefix", "className", "active", "onEnter", "onEntering", "onEntered", "onExit", "onExiting", "onExited", "mountOnEnter", "unmountOnExit", "transition", "as", "eventKey"]);
-
- var prefix = useBootstrapPrefix(bsPrefix, 'tab-pane');
- if (!active && unmountOnExit) return null;
- var pane = React.createElement(Component, _extends({}, rest, {
- ref: ref,
- role: "tabpanel",
- "aria-hidden": !active,
- className: classNames(className, prefix, {
- active: active
- })
- }));
- if (Transition) pane = React.createElement(Transition, {
- in: active,
- onEnter: onEnter,
- onEntering: onEntering,
- onEntered: onEntered,
- onExit: onExit,
- onExiting: onExiting,
- onExited: onExited,
- mountOnEnter: mountOnEnter,
- unmountOnExit: unmountOnExit
- }, pane); // We provide an empty the TabContext so `<Nav>`s in `<TabPane>`s don't
- // conflict with the top level one.
-
- return React.createElement(TabContext.Provider, {
- value: null
- }, React.createElement(SelectableContext.Provider, {
- value: null
- }, pane));
- });
- TabPane.displayName = 'TabPane';
- export default TabPane;
|