@wix/design-system/dist/esm/Accordion/components/AccordionItem/AccordionItem.js

@wix/design-system

import React, { useContext, useState } from 'react';
import { Text } from '../../../Text';
import { Toggle } from '../../../Transition/Toggle';
import { AccordionItemCaret } from '../AccordionItemCaret';
import { timingMap } from '../../../Transition/constants';
import { BUTTON_TYPES, DATA_HOOKS } from '../../constants';
import { WixDesignSystemContext } from '../../../WixDesignSystemProvider/context';
import { classes } from './AccordionItem.classes';
const IconsContainer = ({ position, toggleIconPlacement, icon, iconDataHook, caretProps, }) => {
    const shouldShowToggleIcon = toggleIconPlacement === position;
    return shouldShowToggleIcon || icon ? (React.createElement("div", { className: classes.iconsContainer() },
        shouldShowToggleIcon && position === 'start' && (React.createElement(AccordionItemCaret, { ...caretProps })),
        icon && (React.createElement("div", { className: classes.affix(), "data-hook": iconDataHook }, icon)),
        shouldShowToggleIcon && position === 'end' && (React.createElement(AccordionItemCaret, { ...caretProps })))) : null;
};
function AccordionItem({ icon, prefix, suffix, title, subtitle, open, children, onToggle, onMouseLeave, onMouseEnter, disabled, skin, hideShadow, className, size, horizontalPadding, contentPadding, last, transitionSpeed = 'medium', onAnimationEnter, onAnimationExit, buttonType = 'textButton', expandLabel, collapseLabel, toggleIconPlacement = 'end', showLabel, titleSize, }) {
    // needed for toggle button label visibility
    const [hover, setHover] = useState(false);
    const { mobile } = useContext(WixDesignSystemContext);
    const isLabelShown = !!(showLabel === 'always' || hover || mobile);
    const caretProps = {
        hover,
        buttonType,
        expandLabel,
        collapseLabel,
        showLabel,
        isLabelShown,
        open,
        disabled,
        skin,
    };
    const caretWithLabel = buttonType === BUTTON_TYPES.textButton &&
        isLabelShown &&
        !!(open ? collapseLabel : expandLabel);
    const _onMouseLeave = (e) => {
        setHover(false);
        !disabled && onMouseLeave && onMouseLeave(e);
    };
    const _onMouseEnter = (e) => {
        setHover(true);
        !disabled && onMouseEnter && onMouseEnter(e);
    };
    return (React.createElement("div", { "data-hook": DATA_HOOKS.item, className: classes.root({
            disabled,
            open,
            skin,
            hideShadow,
            size,
            horizontalPadding,
            contentPadding,
            last,
            titleSize,
            transitionSpeed,
            caretWithLabel,
        }, className) },
        React.createElement("div", { onClick: !disabled ? onToggle : () => { }, className: classes.header(), "data-hook": DATA_HOOKS.header, onMouseEnter: _onMouseEnter, onMouseLeave: _onMouseLeave },
            React.createElement(IconsContainer, { position: "start", toggleIconPlacement: toggleIconPlacement, icon: prefix || icon, caretProps: caretProps, iconDataHook: DATA_HOOKS.prefix }),
            React.createElement("div", { className: classes.titleWrapper() },
                title && (React.createElement("div", { "data-hook": "titleContainer" }, typeof title === 'string' ? (React.createElement(Text, { dataHook: "title", ellipsis: true, weight: "normal", className: classes.title() }, title)) : (title))),
                subtitle && (React.createElement("div", { "data-hook": DATA_HOOKS.subtitle, className: classes.subtitle() }, typeof subtitle === 'string' ? (React.createElement(Text, { size: "small" }, subtitle)) : (subtitle)))),
            React.createElement(IconsContainer, { position: "end", toggleIconPlacement: toggleIconPlacement, icon: suffix, caretProps: caretProps, iconDataHook: DATA_HOOKS.suffix })),
        React.createElement(Toggle, { show: open, timeout: timingMap[transitionSpeed], onStart: onAnimationEnter, onEnd: onAnimationExit, className: classes.panel(), unmountOnExit: true },
            React.createElement("div", { "data-hook": "children", className: classes.content() }, children))));
}
export { AccordionItem };
//# sourceMappingURL=AccordionItem.js.map