@wix/design-system/dist/esm/SelectableAccordion/Item/Item.js

@wix/design-system

import React, { useCallback, useRef } from 'react';
import { Checkbox } from '../../Checkbox';
import { ToggleSwitch } from '../../ToggleSwitch';
import { Radio } from '../../Radio';
import { Text } from '../../Text';
import { Collapse } from '../../Collapse';
import { Divider } from '../../Divider';
import { Tooltip } from '../../Tooltip';
import { dataHooks, TYPES } from '../constants';
import { isString } from '../../utils/StringUtils';
import { useHover } from '../../common/useHover';
import { st, classes } from './Item.st.css.js';
const renderTitle = (title, disabled) => {
    if (isString(title)) {
        return (React.createElement(Text, { weight: "normal", size: "medium", skin: disabled ? 'disabled' : 'standard' }, title));
    }
    return title;
};
const renderSubtitle = (subtitle, disabled) => isString(subtitle) ? (React.createElement(Text, { ellipsis: true, size: "small", weight: "thin", skin: disabled ? 'disabled' : 'standard' }, subtitle)) : (subtitle);
const renderContent = content => isString(content) ? (React.createElement(Text, { className: classes.text, size: "small", weight: "thin" }, content)) : (content);
const renderSelector = ({ type, open, disabled, onChange }) => {
    let selector = null;
    switch (type) {
        case TYPES.CHECKBOX:
            selector = (React.createElement(Checkbox, { checked: open, onChange: onChange, disabled: disabled }));
            break;
        case TYPES.RADIO:
            selector = (React.createElement(Radio, { checked: open, onChange: onChange, disabled: disabled }));
            break;
        case TYPES.TOGGLE:
            selector = (React.createElement(ToggleSwitch, { checked: open, onChange: onChange, size: "small", disabled: disabled }));
            break;
        default:
            break;
    }
    return (React.createElement("span", { className: classes.selectorToggle, onClick: e => e.stopPropagation() }, selector));
};
const SelectableAccordionItem = ({ type = 'toggle', onChange = () => { }, idx, open, disabled, tooltipContent, verticalPadding, title, subtitle, content, }) => {
    const tooltipRef = useRef(null);
    const { hovered, hoverProps } = useHover({
        onHoverStart: () => tooltipRef.current?.open(),
        onHoverEnd: () => tooltipRef.current?.close(),
    });
    const handleChange = useCallback(event => {
        if (disabled) {
            return;
        }
        if (type === 'radio' && open) {
            return;
        }
        onChange(event, idx, !open);
    }, [disabled, type, open, onChange, idx]);
    const hasTooltip = tooltipContent !== undefined && tooltipContent !== null;
    const selector = renderSelector({
        type,
        open,
        disabled,
        onChange: handleChange,
    });
    return (React.createElement("div", { ...hoverProps, "data-hook": dataHooks.item, "data-state": open ? 'open' : 'collapsed', "data-disabled": disabled, className: st(classes.item, {
            hovered: !open && hovered,
            verticalPadding,
            disabled,
        }) },
        React.createElement("div", { onClick: handleChange, className: classes.selector }, hasTooltip ? (React.createElement(Tooltip, { ref: tooltipRef, dataHook: dataHooks.itemTooltip, content: tooltipContent, className: classes.tooltip }, selector)) : (selector)),
        React.createElement("div", { "data-hook": dataHooks.itemHeader, onClick: handleChange, className: classes.header },
            renderTitle(title, disabled),
            renderSubtitle(subtitle, disabled)),
        React.createElement("div", { className: classes.content },
            content ? (React.createElement(Collapse, { open: open },
                React.createElement("div", { className: classes.inner }, renderContent(content)))) : null,
            React.createElement("div", { className: classes.divider },
                React.createElement(Divider, null)))));
};
SelectableAccordionItem.displayName = 'SelectableAccordionItem';
export { SelectableAccordionItem };
//# sourceMappingURL=Item.js.map