leo-design-ui/dist/components/Tabs/tabs.js

React Design Library

import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import classNames from "classnames";
import React, { createContext, useState } from "react";
export var TabsContext = createContext({ index: '0', type: 'line' });
var Tabs = function (_a) {
    var _b;
    var _c = _a.type, type = _c === void 0 ? 'line' : _c, _d = _a.defaultIndex, defaultIndex = _d === void 0 ? '0' : _d, className = _a.className, size = _a.size, children = _a.children, onSelect = _a.onSelect, _e = _a.tabPosition, tabPosition = _e === void 0 ? 'top' : _e;
    if (tabPosition === 'left' && type === 'card') {
        return _jsx("div", { style: { color: 'red' }, children: "tabPosition do not set left when type is card" });
    }
    var classes = classNames(className, (_b = {},
        _b["tabs-".concat(tabPosition)] = tabPosition,
        _b["tabs-".concat(size)] = size,
        _b['leo-tabs'] = type === 'line',
        _b['leo-tab-item-card'] = type === 'card',
        _b));
    var classesContent = classNames('leo-tabs-content', classNames);
    var _f = useState(defaultIndex), currentActive = _f[0], setActive = _f[1];
    // 子传父（tabItem切换将索引传过来）
    var clickFn = function (index) {
        console.log('index', index);
        setActive(index);
        if (onSelect) {
            onSelect(index);
        }
    };
    // 上下文参数
    var contextValue = {
        index: currentActive,
        onSelect: clickFn,
        type: type
    };
    var renderChildren = function () {
        return React.Children.map(children, function (child, index) {
            var childElement = child;
            if (childElement.type.displayName === 'TabItem') {
                return React.cloneElement(childElement, {
                    index: index.toString()
                });
            }
            else {
                console.error("Warning: Tabs has a child which is not a TabItem component");
            }
        });
    };
    var renderContent = function () {
        return React.Children.map(children, function (child, index) {
            var childElement = child;
            if (index.toString() === currentActive) {
                return childElement.props.children;
            }
        });
    };
    return (_jsxs("div", { className: "leo-tabs-wrapper", children: [_jsx(TabsContext.Provider, { value: contextValue, children: _jsx("ul", { className: classes, children: renderChildren() }) }), _jsx("div", { className: classesContent, children: renderContent() })] }));
};
export default Tabs;