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

Componenti React per Bootstrap 5

import classNames from 'classnames';
import React, { useCallback, 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 onEntering = useCallback((node, isAppearing) => {
        setHeight(getHeight(node));
        attributes.onEntering?.(node, isAppearing);
    }, [attributes.onEntering]);
    const onEntered = useCallback((node, isAppearing) => {
        setHeight(null);
        attributes.onEntered?.(node, isAppearing);
    }, [attributes.onEntered]);
    const onExit = useCallback((node) => {
        setHeight(getHeight(node));
        attributes.onExit?.(node);
    }, [attributes.onExit]);
    const onExiting = useCallback((node) => {
        // getting this variable triggers a reflow
        // @ts-expect-error variabile non usata
        // eslint-disable-next-line @typescript-eslint/no-unused-vars
        const _unused = node.offsetHeight;
        setHeight(0);
        attributes.onExiting?.(node);
    }, [attributes.onExiting]);
    const onExited = useCallback((node) => {
        setHeight(null);
        attributes.onExited?.(node);
    }, [attributes.onExited]);
    const Tag = tag;
    const transitionProps = pick(attributes, TransitionsKeys);
    const childProps = omit(attributes, TransitionsKeys);
    return (React.createElement(Transition, { ...transitionProps, timeout: timeout, in: active, onEntering: onEntering, onEntered: onEntered, onExit: onExit, onExiting: onExiting, onExited: onExited }, (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, style: { ...childProps.style, ...style }, ...childProps },
            React.createElement("div", { className: listClasses }, children)));
    }));
};
// }
//# sourceMappingURL=AccordionBody.js.map