design-react-kit/dist/Accordion/AccordionBody.js

Componenti React per Bootstrap 5

import classNames from 'classnames';
import React, { useCallback, useRef, useState } from 'react';
import { Transition } from 'react-transition-group';
import { TransitionTimeouts, TransitionsKeys } from '../transitions';
import { omit, pick } from '../utils';
// hardcode these entries to avoid leaks
const transitionStatusToClassHash = {
    entering: 'collapsing',
    entered: 'collapse show',
    exiting: 'collapsing',
    exited: 'collapse'
};
function getTransitionClass(status) {
    return transitionStatusToClassHash[status] || 'collapse';
}
function getHeight(node) {
    return node.scrollHeight;
}
export const AccordionBody = ({ className, listClassName, tag = 'div', active = false, children, timeout = TransitionTimeouts.Collapse, ...attributes }) => {
    const [height, setHeight] = useState(null);
    const nodeRef = useRef(null);
    const onEntering = useCallback((isAppearing) => {
        if (nodeRef.current) {
            setHeight(getHeight(nodeRef.current));
            attributes.onEntering?.(nodeRef.current, isAppearing);
        }
    }, [attributes.onEntering]);
    const onEntered = useCallback((isAppearing) => {
        setHeight(null);
        if (nodeRef.current) {
            attributes.onEntered?.(nodeRef.current, isAppearing);
        }
    }, [attributes.onEntered]);
    const onExit = useCallback(() => {
        if (nodeRef.current) {
            setHeight(getHeight(nodeRef.current));
            attributes.onExit?.(nodeRef.current);
        }
    }, [attributes.onExit]);
    const onExiting = useCallback(() => {
        if (nodeRef.current) {
            // getting this variable triggers a reflow
            // @ts-expect-error variabile non usata
            // eslint-disable-next-line @typescript-eslint/no-unused-vars
            const _unused = nodeRef.current.offsetHeight;
            setHeight(0);
            attributes.onExiting?.(nodeRef.current);
        }
    }, [attributes.onExiting]);
    const onExited = useCallback(() => {
        setHeight(null);
        if (nodeRef.current) {
            attributes.onExited?.(nodeRef.current);
        }
    }, [attributes.onExited]);
    const Tag = tag;
    const transitionProps = pick(attributes, TransitionsKeys);
    const childProps = omit(attributes, TransitionsKeys);
    return (React.createElement(Transition, { nodeRef: nodeRef, timeout: timeout, in: active, onEntering: onEntering, onEntered: onEntered, onExit: onExit, onExiting: onExiting, onExited: onExited, ...transitionProps }, (status) => {
        const transitionClass = getTransitionClass(status);
        const classes = classNames(className, transitionClass);
        const listClasses = classNames(listClassName, 'accordion-body');
        const style = height == null ? null : { height };
        return (React.createElement(Tag, { className: classes, ref: nodeRef, style: { ...childProps.style, ...style }, ...childProps },
            React.createElement("div", { className: listClasses }, children)));
    }));
};
//# sourceMappingURL=AccordionBody.js.map