@coreui/react-pro/dist/esm/components/tabs/CTabPanel.js

UI Components Library for React.js

import { __rest } from '../../node_modules/tslib/tslib.es6.js';
import React, { forwardRef, useContext, useRef, useState, useEffect } from 'react';
import PropTypes from 'prop-types';
import classNames from '../../_virtual/index.js';
import { CTabsContext } from './CTabsContext.js';
import '@popperjs/core';
import getTransitionDurationFromElement from '../../utils/getTransitionDurationFromElement.js';
import { useForkedRef } from '../../hooks/useForkedRef.js';
import Transition from '../../node_modules/react-transition-group/esm/Transition.js';

const CTabPanel = forwardRef((_a, ref) => {
    var { children, className, itemKey, onHide, onShow, transition = true, visible } = _a, rest = __rest(_a, ["children", "className", "itemKey", "onHide", "onShow", "transition", "visible"]);
    const { _activeItemKey, id } = useContext(CTabsContext);
    const tabPaneRef = useRef(null);
    const forkedRef = useForkedRef(ref, tabPaneRef);
    const [_visible, setVisible] = useState(visible || _activeItemKey === itemKey);
    useEffect(() => {
        visible !== undefined && setVisible(visible);
    }, [visible]);
    useEffect(() => {
        setVisible(_activeItemKey === itemKey);
    }, [_activeItemKey]);
    return (React.createElement(Transition, { in: _visible, nodeRef: tabPaneRef, onEnter: onShow, onExit: onHide, timeout: tabPaneRef.current ? getTransitionDurationFromElement(tabPaneRef.current) : 0 }, (state) => (React.createElement("div", Object.assign({ className: classNames('tab-pane', {
            active: _visible,
            fade: transition,
            show: state === 'entered',
        }, className), id: `${id}${itemKey}-tab-pane`, role: "tabpanel", "aria-labelledby": `${id}${itemKey}-tab`, tabIndex: 0, ref: forkedRef }, rest), children))));
});
CTabPanel.propTypes = {
    children: PropTypes.node,
    className: PropTypes.string,
    itemKey: PropTypes.oneOfType([PropTypes.number, PropTypes.string]).isRequired,
    onHide: PropTypes.func,
    onShow: PropTypes.func,
    transition: PropTypes.bool,
    visible: PropTypes.bool,
};
CTabPanel.displayName = 'CTabPanel';

export { CTabPanel };
//# sourceMappingURL=CTabPanel.js.map