@pluve/ace/lib/tabs/index.js

一套React版本的 Taro UI 组件库

import React, { isValidElement, Children, useState, cloneElement, useEffect } from 'react';
import { View } from '@tarojs/components';
import TabPane from './TabPane';
const parseTabList = (children) => {
    return (Children.map(children, (node) => {
        if (isValidElement(node)) {
            const { key, props: { tab = '' } = {} } = node;
            return {
                key: key !== undefined ? String(key) : undefined,
                title: tab,
            };
        }
        return null;
    }) || []).filter((tab) => tab);
};
const Tabs = ({ className = '', defaultActiveKey, activeKey: propsActiveKey, children, onChange, animated = true, }) => {
    const tabs = parseTabList(children);
    const [{ key: firstTabKey = undefined } = {}] = tabs;
    const [activeKey, setActiveKey] = useState(firstTabKey);
    // const currentIndex = tabs.findIndex(({ key }) => key === activeKey);
    useEffect(() => {
        setActiveKey(propsActiveKey || defaultActiveKey || firstTabKey);
    }, [propsActiveKey, defaultActiveKey, firstTabKey]);
    return (React.createElement(View, { className: `ace-tabs ${className}` },
        React.createElement(View, { className: "ace-tabs-header" }, tabs.map(({ key, title }) => (React.createElement(View, { key: key, onClick: () => {
                setActiveKey(key);
                if (onChange) {
                    onChange(key);
                }
            }, className: `ace-tabs-header-item ${key === activeKey ? 'ace-tabs-header-item__active' : ''}` }, title)))),
        React.createElement(View, { className: `ace-tabs-body ${animated ? 'ace-tabs-body__animated' : ''}` }, Children.map(children, (node) => (isValidElement(node) ? cloneElement(node, { id: node.key, activeKey }) : node)))));
};
Tabs.TabPane = TabPane;
export default Tabs;
//# sourceMappingURL=index.js.map