@coreui/react/dist/cjs/components/tabs/CTabPanel.js

UI Components Library for React.js

'use strict';

var tslib_es6 = require('../../node_modules/tslib/tslib.es6.js');
var React = require('react');
var PropTypes = require('prop-types');
var index = require('../../_virtual/index.js');
var CTabsContext = require('./CTabsContext.js');
var useForkedRef = require('../../hooks/useForkedRef.js');
require('@popperjs/core');
var getTransitionDurationFromElement = require('../../utils/getTransitionDurationFromElement.js');
var Transition = require('../../node_modules/react-transition-group/esm/Transition.js');

var CTabPanel = React.forwardRef(function (_a, ref) {
    var children = _a.children, className = _a.className, itemKey = _a.itemKey, onHide = _a.onHide, onShow = _a.onShow, _b = _a.transition, transition = _b === void 0 ? true : _b, visible = _a.visible, rest = tslib_es6.__rest(_a, ["children", "className", "itemKey", "onHide", "onShow", "transition", "visible"]);
    var _c = React.useContext(CTabsContext.CTabsContext), _activeItemKey = _c._activeItemKey, id = _c.id;
    var tabPaneRef = React.useRef(null);
    var forkedRef = useForkedRef.useForkedRef(ref, tabPaneRef);
    var _d = React.useState(visible || _activeItemKey === itemKey), _visible = _d[0], setVisible = _d[1];
    React.useEffect(function () {
        visible !== undefined && setVisible(visible);
    }, [visible]);
    React.useEffect(function () {
        setVisible(_activeItemKey === itemKey);
    }, [_activeItemKey]);
    return (React.createElement(Transition.default, { in: _visible, nodeRef: tabPaneRef, onEnter: onShow, onExit: onHide, timeout: tabPaneRef.current ? getTransitionDurationFromElement.default(tabPaneRef.current) : 0 }, function (state) { return (React.createElement("div", tslib_es6.__assign({ className: index.default('tab-pane', {
            active: _visible,
            fade: transition,
            show: state === 'entered',
        }, className), id: "".concat(id).concat(itemKey, "-tab-pane"), role: "tabpanel", "aria-labelledby": "".concat(id).concat(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';

exports.CTabPanel = CTabPanel;
//# sourceMappingURL=CTabPanel.js.map