zent/es/tabs/Tabs.js

一套前端设计语言和基于React的实现

import { __assign, __extends } from "tslib";
import { jsx as _jsx } from "react/jsx-runtime";
import { isElement } from 'react-is';
import cn from 'classnames';
import { Children } from 'react';
import isNil from '../utils/isNil';
import noop from '../utils/noop';
import LazyMount from '../utils/component/LazyMount';
import TabPanel from './components/TabPanel';
import NormalTabsNav from './components/tabs-nav/NormalTabsNav';
import CardTabsNav from './components/tabs-nav/CardTabsNav';
import ButtonTabsNav from './components/tabs-nav/ButtonTabsNav';
import BaseTabs from './components/base/BaseTabs';
import { getTabDataFromChild } from './utils';
var TabsNavComponents = {
    normal: NormalTabsNav,
    card: CardTabsNav,
    button: ButtonTabsNav,
};
var Tabs = (function (_super) {
    __extends(Tabs, _super);
    function Tabs() {
        return _super !== null && _super.apply(this, arguments) || this;
    }
    Object.defineProperty(Tabs.prototype, "tabsCls", {
        get: function () {
            var _a = this.props, className = _a.className, type = _a.type;
            return cn('zent-tabs', "zent-tabs-type__" + type, className);
        },
        enumerable: false,
        configurable: true
    });
    Tabs.prototype.getTabDataListFromTabs = function (tabs) {
        var activeId = this.props.activeId;
        return tabs.map(function (tab) { return (__assign(__assign({}, tab), { actived: tab.key === activeId })); });
    };
    Tabs.prototype.getTabDataListFromChildren = function (children) {
        var activeId = this.props.activeId;
        return Children.map(children, function (child) {
            if (!isElement(child)) {
                return null;
            }
            return getTabDataFromChild(child, activeId);
        }).filter(function (v) { return !isNil(v); });
    };
    Tabs.prototype.renderNav = function (tabDataList) {
        var _a = this.props, type = _a.type, candel = _a.candel, canFixed = _a.canFixed, fixedIds = _a.fixedIds, onFixedChange = _a.onFixedChange, stretch = _a.stretch, navExtraContent = _a.navExtraContent, onChange = _a.onChange, onDelete = _a.onDelete, onAdd = _a.onAdd, overflowMode = _a.overflowMode, activeId = _a.activeId, renderTabBar = _a.renderTabBar;
        var TabsNavComp = (TabsNavComponents[type] ||
            TabsNavComponents['normal']);
        var tabNavProps = {
            onChange: onChange,
            tabDataList: tabDataList,
            onDelete: onDelete,
            onAdd: onAdd,
            candel: candel,
            canFixed: canFixed,
            stretch: stretch,
            overflowMode: overflowMode,
            navExtraContent: navExtraContent,
            type: type,
            activeId: activeId,
            onFixedChange: onFixedChange,
        };
        if ('fixedIds' in this.props) {
            tabNavProps.fixedIds = fixedIds;
        }
        if (renderTabBar) {
            return renderTabBar(tabNavProps, TabsNavComp);
        }
        return _jsx(TabsNavComp, __assign({}, tabNavProps), void 0);
    };
    Tabs.prototype.renderTabPanel = function (tabItem) {
        var _a = this.props, unmountPanelOnHide = _a.unmountPanelOnHide, disableLazyMount = _a.disableLazyMount;
        return (_jsx(LazyMount, __assign({ mount: disableLazyMount || tabItem.actived }, { children: _jsx(TabPanel, __assign({ tab: tabItem.title, actived: tabItem.actived, unmountOnHide: tabItem.unmountOnHide || unmountPanelOnHide, className: tabItem.className, id: tabItem.key }, { children: tabItem.panelChildren }), void 0) }), tabItem.key));
    };
    Tabs.TabPanel = TabPanel;
    Tabs.defaultProps = {
        type: 'normal',
        activeId: '',
        candel: false,
        canFixed: false,
        stretch: false,
        onChange: noop,
        onDelete: noop,
        unmountPanelOnHide: false,
    };
    return Tabs;
}(BaseTabs));
export { Tabs };
export default Tabs;