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

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

import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import { forwardRef, useCallback, useMemo, useState } from 'react';
import classNames from 'classnames';
import { useConfigProvider } from '../core';
import { Icon } from './Icon';
export const Collapse = forwardRef((props, ref) => {
    const { className, children, header, open: openExternal, onToggle: onToggleExternal, visible = true, arrowPosition = 'left', contentIndented = true, icon, prefix, forceRender = false, ...restProps } = props;
    const { getPrefix } = useConfigProvider();
    const prefixCls = getPrefix(prefix);
    const [openInternal, setOpenInternal] = useState(false);
    const onToggleInternal = useCallback(() => {
        setOpenInternal(prev => !prev);
    }, []);
    const open = useMemo(() => {
        if (typeof openExternal !== 'undefined' && typeof onToggleExternal !== 'undefined') {
            return openExternal;
        }
        return openInternal;
    }, [openExternal, openInternal, onToggleExternal]);
    const onToggle = useMemo(() => {
        if (typeof openExternal !== 'undefined' && typeof onToggleExternal !== 'undefined') {
            return (event) => onToggleExternal(openExternal, event);
        }
        return onToggleInternal;
    }, [openExternal, onToggleInternal, onToggleExternal]);
    if (!visible) {
        return null;
    }
    return (_jsxs("div", { ref: ref, className: classNames(`${prefixCls}-collapse`, className, {
            [`${prefixCls}-collapse_expanded`]: open,
            [`${prefixCls}-collapse_indented`]: contentIndented,
            [`${prefixCls}-collapse_arrow-right`]: arrowPosition === 'right',
        }), ...restProps, children: [_jsxs("div", { role: "presentation", className: `${prefixCls}-collapse__header`, onClick: onToggle, children: [_jsx("div", { className: `${prefixCls}-collapse__arrow`, children: icon && _jsx(Icon, { icon: icon }) }), header] }), (open || forceRender) && (_jsx("div", { className: `${prefixCls}-collapse__panel`, style: forceRender && !open ? { display: 'none' } : undefined, children: children }))] }));
});
Collapse.displayName = 'Collapse';