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

@wix/design-system

import React, { useState } from 'react';
import Text from '../../../Text';
import Toggle from '../../../Transition/Toggle';
import AccordionItemCaret from '../AccordionItemCaret';
import { timingMap } from '../../../Transition/constants';
import { dataHooks } from '../../constants';
import { st, classes } from './AccordionItem.st.css.js';
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 caretProps = {
        hover,
        buttonType,
        expandLabel,
        collapseLabel,
        showLabel,
        open,
        disabled,
        skin,
    };
    const _onMouseLeave = (e) => {
        setHover(false);
        !disabled && onMouseLeave && onMouseLeave(e);
    };
    const _onMouseEnter = (e) => {
        setHover(true);
        !disabled && onMouseEnter && onMouseEnter(e);
    };
    return (React.createElement("div", { "data-hook": dataHooks.item, className: st(classes.root, {
            disabled,
            open,
            skin,
            hideShadow,
            size,
            horizontalPadding,
            contentPadding,
            last,
            titleSize,
        }, className) },
        React.createElement("div", { onClick: !disabled ? onToggle : () => { }, className: st(classes.header, { size }), "data-hook": dataHooks.header, onMouseEnter: _onMouseEnter, onMouseLeave: _onMouseLeave },
            React.createElement(IconsContainer, { position: "start", toggleIconPlacement: toggleIconPlacement, icon: prefix || icon, caretProps: caretProps, iconDataHook: dataHooks.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": dataHooks.subtitle }, typeof subtitle === 'string' ? (React.createElement(Text, { size: "small" }, subtitle)) : (subtitle)))),
            React.createElement(IconsContainer, { position: "end", toggleIconPlacement: toggleIconPlacement, icon: suffix, caretProps: caretProps, iconDataHook: dataHooks.suffix })),
        React.createElement(Toggle, { show: open, timeout: timingMap[transitionSpeed], onStart: onAnimationEnter, onEnd: onAnimationExit, unmountOnExit: true },
            React.createElement("div", { "data-hook": "children", className: classes.children }, children))));
}
export default AccordionItem;
//# sourceMappingURL=AccordionItem.js.map