@i-novus/ui-core/dist/data-display/Tabs.js

Базовые UI компоненты

import { jsx as _jsx } from "react/jsx-runtime";
import { Children, cloneElement, forwardRef, useCallback, useEffect, useRef, useState, } from 'react';
import classNames from 'classnames';
import { useConfigProvider } from '../core';
import { Button } from '../general/Button';
const TabsBody = forwardRef((props, ref) => {
    const { prefix, className, activeTabPaneId, onChange, variant = 'primary', direction = 'row', children, ...restProps } = props;
    const { getPrefix } = useConfigProvider();
    const prefixCls = getPrefix(prefix);
    const activeTabPaneRef = useRef(null);
    const [tabsStyles, setTabsStyles] = useState({
        width: 0,
        height: 0,
        left: 0,
        top: 0,
    });
    useEffect(() => {
        if (!activeTabPaneRef.current) {
            return;
        }
        const { offsetWidth, offsetHeight, offsetLeft, offsetTop } = activeTabPaneRef.current;
        setTabsStyles({
            width: offsetWidth,
            height: offsetHeight,
            left: offsetLeft,
            top: offsetTop,
        });
    }, [activeTabPaneId]);
    return (_jsx("div", { ref: ref, className: classNames(`${prefixCls}-tabs`, `${prefixCls}-tabs_variant-${variant}`, `${prefixCls}-tabs_direction-${direction}`, className), style: {
            '--width': `${tabsStyles.width}px`,
            '--height': `${tabsStyles.height}px`,
            '--left': `${tabsStyles.left}px`,
            '--top': `${tabsStyles.top}px`,
        }, ...restProps, children: Children.map(children, (child) => {
            if (child && typeof child === 'object' && Object.hasOwn(child, 'props')) {
                const childTabPane = child;
                const { id, ...restTabPaneProps } = childTabPane.props;
                const isActive = Boolean(id) && Boolean(id === activeTabPaneId);
                return cloneElement(childTabPane, {
                    ...restTabPaneProps,
                    id,
                    isActive,
                    onChange,
                    ref: isActive ? activeTabPaneRef : undefined,
                });
            }
            return null;
        }) }));
});
const TabPane = forwardRef((props, ref) => {
    const { id, className, isActive, children, prefix, onChange, ...restProps } = props;
    const { getPrefix } = useConfigProvider();
    const prefixCls = getPrefix(prefix);
    const onActiveTabPaneChange = useCallback(() => {
        onChange?.(id);
    }, [id, onChange]);
    return (_jsx(Button, { ...restProps, variant: 'link', className: classNames(`${prefixCls}-tab-pane`, {
            [`${prefixCls}-tab-pane_active`]: isActive,
        }, className), onClick: onActiveTabPaneChange, ref: ref, children: children }));
});
TabPane.defaultProps = {
    onChange: () => { },
};
export const Tabs = TabsBody;
Tabs.TabPane = TabPane;
Tabs.displayName = 'Tabs';
TabPane.displayName = 'TabPane';