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.
44 lines
1.5 KiB
44 lines
1.5 KiB
import * as React from 'react';
|
|
import { useMemo } from 'react';
|
|
import { useUncontrolledProp } from 'uncontrollable';
|
|
import { useSSRSafeId } from './ssr';
|
|
import TabContext from './TabContext';
|
|
import SelectableContext from './SelectableContext';
|
|
import TabPanel from './TabPanel';
|
|
import { jsx as _jsx } from "react/jsx-runtime";
|
|
|
|
const Tabs = props => {
|
|
const {
|
|
id: userId,
|
|
generateChildId: generateCustomChildId,
|
|
onSelect: propsOnSelect,
|
|
activeKey: propsActiveKey,
|
|
defaultActiveKey,
|
|
transition,
|
|
mountOnEnter,
|
|
unmountOnExit,
|
|
children
|
|
} = props;
|
|
const [activeKey, onSelect] = useUncontrolledProp(propsActiveKey, defaultActiveKey, propsOnSelect);
|
|
const id = useSSRSafeId(userId);
|
|
const generateChildId = useMemo(() => generateCustomChildId || ((key, type) => id ? `${id}-${type}-${key}` : null), [id, generateCustomChildId]);
|
|
const tabContext = useMemo(() => ({
|
|
onSelect,
|
|
activeKey,
|
|
transition,
|
|
mountOnEnter: mountOnEnter || false,
|
|
unmountOnExit: unmountOnExit || false,
|
|
getControlledId: key => generateChildId(key, 'tabpane'),
|
|
getControllerId: key => generateChildId(key, 'tab')
|
|
}), [onSelect, activeKey, transition, mountOnEnter, unmountOnExit, generateChildId]);
|
|
return /*#__PURE__*/_jsx(TabContext.Provider, {
|
|
value: tabContext,
|
|
children: /*#__PURE__*/_jsx(SelectableContext.Provider, {
|
|
value: onSelect || null,
|
|
children: children
|
|
})
|
|
});
|
|
};
|
|
|
|
Tabs.Panel = TabPanel;
|
|
export default Tabs; |