Page MenuHomec4science
Files F102279818

TabPanel.js
No OneTemporary
Actions

File Metadata

Created
Wed, Feb 19, 01:33

TabPanel.js
View Options

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;

Event Timeline

c4science · Help