You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
118 lines
3.5 KiB
118 lines
3.5 KiB
const _excluded = ["active", "eventKey", "mountOnEnter", "transition", "unmountOnExit", "role", "onEnter", "onEntering", "onEntered", "onExit", "onExiting", "onExited"],
|
|
_excluded2 = ["activeKey", "getControlledId", "getControllerId"],
|
|
_excluded3 = ["as"];
|
|
|
|
function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
|
|
|
|
import * as React from 'react';
|
|
import { useContext } from 'react';
|
|
import TabContext from './TabContext';
|
|
import SelectableContext, { makeEventKey } from './SelectableContext';
|
|
import NoopTransition from './NoopTransition';
|
|
import { jsx as _jsx } from "react/jsx-runtime";
|
|
export function useTabPanel(_ref) {
|
|
let {
|
|
active,
|
|
eventKey,
|
|
mountOnEnter,
|
|
transition,
|
|
unmountOnExit,
|
|
role = 'tabpanel',
|
|
onEnter,
|
|
onEntering,
|
|
onEntered,
|
|
onExit,
|
|
onExiting,
|
|
onExited
|
|
} = _ref,
|
|
props = _objectWithoutPropertiesLoose(_ref, _excluded);
|
|
|
|
const context = useContext(TabContext);
|
|
if (!context) return [Object.assign({}, props, {
|
|
role
|
|
}), {
|
|
eventKey,
|
|
isActive: active,
|
|
mountOnEnter,
|
|
transition,
|
|
unmountOnExit,
|
|
onEnter,
|
|
onEntering,
|
|
onEntered,
|
|
onExit,
|
|
onExiting,
|
|
onExited
|
|
}];
|
|
|
|
const {
|
|
activeKey,
|
|
getControlledId,
|
|
getControllerId
|
|
} = context,
|
|
rest = _objectWithoutPropertiesLoose(context, _excluded2);
|
|
|
|
const key = makeEventKey(eventKey);
|
|
return [Object.assign({}, props, {
|
|
role,
|
|
id: getControlledId(eventKey),
|
|
'aria-labelledby': getControllerId(eventKey)
|
|
}), {
|
|
eventKey,
|
|
isActive: active == null && key != null ? makeEventKey(activeKey) === key : active,
|
|
transition: transition || rest.transition,
|
|
mountOnEnter: mountOnEnter != null ? mountOnEnter : rest.mountOnEnter,
|
|
unmountOnExit: unmountOnExit != null ? unmountOnExit : rest.unmountOnExit,
|
|
onEnter,
|
|
onEntering,
|
|
onEntered,
|
|
onExit,
|
|
onExiting,
|
|
onExited
|
|
}];
|
|
}
|
|
const TabPanel = /*#__PURE__*/React.forwardRef( // Need to define the default "as" during prop destructuring to be compatible with styled-components github.com/react-bootstrap/react-bootstrap/issues/3595
|
|
(_ref2, ref) => {
|
|
let {
|
|
as: Component = 'div'
|
|
} = _ref2,
|
|
props = _objectWithoutPropertiesLoose(_ref2, _excluded3);
|
|
|
|
const [tabPanelProps, {
|
|
isActive,
|
|
onEnter,
|
|
onEntering,
|
|
onEntered,
|
|
onExit,
|
|
onExiting,
|
|
onExited,
|
|
mountOnEnter,
|
|
unmountOnExit,
|
|
transition: Transition = NoopTransition
|
|
}] = useTabPanel(props); // We provide an empty the TabContext so `<Nav>`s in `<TabPanel>`s don't
|
|
// conflict with the top level one.
|
|
|
|
return /*#__PURE__*/_jsx(TabContext.Provider, {
|
|
value: null,
|
|
children: /*#__PURE__*/_jsx(SelectableContext.Provider, {
|
|
value: null,
|
|
children: /*#__PURE__*/_jsx(Transition, {
|
|
in: isActive,
|
|
onEnter: onEnter,
|
|
onEntering: onEntering,
|
|
onEntered: onEntered,
|
|
onExit: onExit,
|
|
onExiting: onExiting,
|
|
onExited: onExited,
|
|
mountOnEnter: mountOnEnter,
|
|
unmountOnExit: unmountOnExit,
|
|
children: /*#__PURE__*/_jsx(Component, Object.assign({}, tabPanelProps, {
|
|
ref: ref,
|
|
hidden: !isActive,
|
|
"aria-hidden": !isActive
|
|
}))
|
|
})
|
|
})
|
|
});
|
|
});
|
|
TabPanel.displayName = 'TabPanel';
|
|
export default TabPanel; |