@wix/design-system/dist/esm/ListItemSelect/ListItemSelect.js

@wix/design-system

import PropTypes from 'prop-types';
import React, { useContext } from 'react';
import Box from '../Box';
import Checkbox from '../Checkbox';
import Highlighter from '../Highlighter';
import HighlightContext from '../InputWithOptions/HighlightContext';
import Text from '../Text';
import { DATA_HOOK, SIZE } from './ListItemSelect.constants';
import { classes, st } from './ListItemSelect.st.css.js';
import Tooltip from '../Tooltip';
import semanticClassNames from './ListItemSelect.semanticClassNames';
const ListItemSelect = ({ checkbox = false, selected = false, highlighted, ellipsis = false, size = SIZE.medium, dataHook = 'list-item-select', className, disabled, disabledDescription, onClick, prefix, suffix, title, subtitle, tooltipProps, titleMaxLines, subtitleMaxLines, }) => {
    const { highlight, match } = useContext(HighlightContext);
    const WrapperComponent = checkbox ? Checkbox : React.Fragment;
    const HighlightWrapper = highlight ? Highlighter : React.Fragment;
    const wrapperComponentProps = checkbox
        ? {
            dataHook: DATA_HOOK.CHECKBOX,
            className: classes.fullWidthContent,
            size,
            checked: selected,
            disabled,
        }
        : {};
    const highlightWrapperProps = highlight ? { match } : {};
    const textProps = {
        tagName: 'div',
        size,
        ellipsis,
        tooltipProps,
        skin: disabled ? 'disabled' : 'standard',
        weight: 'thin',
        light: selected && !checkbox,
        maxLines: titleMaxLines,
    };
    const secondaryTextProps = {
        ...textProps,
        light: !disabled,
        secondary: !selected || checkbox,
        maxLines: subtitleMaxLines,
    };
    const isDisabledWithTooltip = disabled && !!disabledDescription;
    function renderComponent() {
        return (React.createElement("div", { className: st(classes.root, {
                checkbox,
                selected,
                highlighted,
                disabled,
                size,
                hoverHighlightDisabled: highlighted === false,
                withPrefix: !!prefix,
            }, className, semanticClassNames.container), "data-hook": dataHook, "data-selected": selected, "aria-disabled": disabled, "aria-selected": selected, "aria-description": isDisabledWithTooltip ? disabledDescription : undefined, onClick: !disabled ? onClick : undefined },
            React.createElement(WrapperComponent, { ...wrapperComponentProps },
                React.createElement(Box, { width: "100%", verticalAlign: "middle", className: classes.textsWrapper },
                    prefix && (React.createElement(Text, { className: st(classes.prefix, {
                            subtitle: Boolean(subtitle),
                        }), dataHook: DATA_HOOK.PREFIX, ...textProps, ellipsis: false }, prefix)),
                    React.createElement("div", { className: st(classes.titleWrapper, {
                            subtitle: Boolean(subtitle),
                        }) },
                        React.createElement("div", { className: classes.titleOverrideWrapper },
                            React.createElement(HighlightWrapper, { ...highlightWrapperProps },
                                React.createElement(Text, { className: classes.title, dataHook: DATA_HOOK.TITLE, ...textProps }, title))),
                        subtitle && (React.createElement("div", { className: classes.subtitleOverrideWrapper },
                            React.createElement(Text, { className: classes.subtitle, dataHook: DATA_HOOK.SUBTITLE, secondary: true, ...secondaryTextProps, size: SIZE.small }, subtitle)))),
                    suffix && (React.createElement(Text, { dataHook: DATA_HOOK.SUFFIX, className: classes.suffix, ...secondaryTextProps }, suffix))))));
    }
    if (isDisabledWithTooltip) {
        return (React.createElement(Tooltip, { dataHook: DATA_HOOK.TOOLTIP, disabled: false, content: disabledDescription, enterDelay: 450 }, renderComponent()));
    }
    return renderComponent();
};
ListItemSelect.displayName = 'ListItemSelect';
ListItemSelect.propTypes = {
    dataHook: PropTypes.string,
    className: PropTypes.string,
    checkbox: PropTypes.bool,
    prefix: PropTypes.any,
    title: PropTypes.any,
    subtitle: PropTypes.any,
    suffix: PropTypes.any,
    selected: PropTypes.bool,
    highlighted: PropTypes.bool,
    disabled: PropTypes.bool,
    disabledDescription: PropTypes.string,
    tooltipProps: PropTypes.any,
    onClick: PropTypes.func,
    size: PropTypes.any,
    ellipsis: PropTypes.bool,
    titleMaxLines: PropTypes.number,
    subtitleMaxLines: PropTypes.number,
};
export default ListItemSelect;
export const listItemSelectBuilder = ({ id, className, checkbox, prefix, title, label, subtitle, suffix, disabled, disabledDescription, size, ellipsis, dataHook, tooltipProps, titleMaxLines, subtitleMaxLines, }) => ({
    id,
    disabled,
    overrideOptionStyle: true,
    label,
    prefix,
    value: ({ selected, hovered, size: restSize, ...rest }) => (React.createElement(ListItemSelect, { dataHook: dataHook, className: className, checkbox: checkbox, prefix: prefix, title: title, subtitle: subtitle, suffix: suffix, size: size ?? restSize, ellipsis: ellipsis, disabledDescription: disabledDescription, selected: selected, highlighted: hovered, tooltipProps: tooltipProps, titleMaxLines: titleMaxLines, subtitleMaxLines: subtitleMaxLines, ...rest })),
});
//# sourceMappingURL=ListItemSelect.js.map