@alauda/doom/lib/theme/AutoExpandable.js

Doctor Doom making docs.

import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import { IconDown, SvgWrapper } from '@rspress/core/theme';
import { clsx } from 'clsx';
import { useCallback, useEffect, useRef, useState } from 'react';
import { useIsPrint, useTranslation } from '../runtime/index.js';
import classes from '@alauda/doom/styles/auto-expandable.module.scss';
export const AutoExpandable = ({ threshold = 240, children, }) => {
    const t = useTranslation();
    const ref = useRef(null);
    const isPrint = useIsPrint();
    const [expandable, setExpandable] = useState(false);
    const [expanded, setExpanded] = useState(false);
    useEffect(() => {
        const containerEl = ref.current;
        if (!containerEl || isPrint) {
            return;
        }
        let observer;
        const calculate = () => {
            if (containerEl.scrollHeight > threshold) {
                setExpandable(true);
            }
            observer?.disconnect();
        };
        calculate();
        const tabItem = containerEl.closest('.rp-tabs__content__item--hidden');
        if (tabItem) {
            observer = new MutationObserver(calculate);
            observer.observe(tabItem, { attributeFilter: ['class'] });
            return () => {
                observer?.disconnect();
            };
        }
    }, [threshold, isPrint]);
    const onExpandChange = useCallback(() => {
        setExpanded((expanded) => !expanded);
    }, []);
    return (_jsxs("div", { ref: ref, className: `${classes.container} auto-expandable`, children: [_jsx("div", { className: clsx({
                    expandable,
                    [classes.expandable]: expandable,
                    [classes.expanded]: expanded,
                }), children: children }), expandable && (_jsx("div", { className: classes.actionContainer, children: _jsxs("button", { className: classes.action, type: "button", onClick: onExpandChange, "aria-expanded": expanded, children: [t(`show_${expanded ? 'less' : 'more'}`), _jsx(SvgWrapper, { className: clsx(classes.arrow, {
                                [classes.expanded]: expanded,
                            }), icon: IconDown })] }) }))] }));
};