@ozen-ui/kit/__inner__/esm/components/ListCardItem/ListCardItem.js

React component library

import { __assign, __rest } from "tslib";
import './components/ListCardItemInfoCarcass/ListCardItemInfoCarcass.css';
import './components/ListCardItemCaption/ListCardItemCaption.css';
import './components/ListCardItemItemCarcass/ListCardItemItemCarcass.css';
import './modules/ListCardItemTrailingItem/ListCardItemTrailingItem.css';
import './modules/ListCardItemTrailingButton/ListCardItemTrailingButton.css';
import './modules/ListCardItemCenterButton/ListCardItemCenterButton.css';
import './modules/ListCardItemLeadingIcon/ListCardItemLeadingIcon.css';
import './modules/ListCardItemLeadingItem/ListCardItemLeadingItem.css';
import './ListCardItem.css';
import React from 'react';
import { useThemeProps } from '../../hooks/useThemeProps';
import { generateCSSVariables } from '../../utils/css';
import { polymorphicComponentWithRef } from '../../utils/polymorphicComponentWithRef';
import { useListCardContext } from '../ListCard/ListCardContext';
import { Paper } from '../Paper';
import { Stack } from '../Stack';
import { cnListCardItem } from './classNames';
import { LIST_CARD_ITEM_CSS_VARIABLES, LIST_CARD_ITEM_DEFAULT_ALIGN, LIST_CARD_ITEM_DEFAULT_BACKGROUND_COLOR_SCHEME, LIST_CARD_ITEM_DEFAULT_CONTENT_TRAILING_RATIO, LIST_CARD_ITEM_DEFAULT_INTERACTIVE, LIST_CARD_ITEM_DEFAULT_SIZE, LIST_CARD_ITEM_DEFAULT_TAG, LIST_CARD_ITEM_DEFAULT_VARIANT, LIST_CARD_ITEM_SIZE_TO_PAPER_RADIUS, } from './constants';
import { useListCardItemColorScheme, useListCardItemHover, useListCardItemPadding, useListCardItemRatio, } from './hooks';
import { ListCardItemContext } from './ListCardItemContext';
import { generateListCardItemAlign } from './utils';
export var ListCardItem = polymorphicComponentWithRef(function (inProps, ref) {
    var _a, _b;
    var props = useThemeProps({
        props: inProps,
        name: 'ListCardItem',
    });
    var _c = props.size, sizeProp = _c === void 0 ? LIST_CARD_ITEM_DEFAULT_SIZE : _c, _d = props.variant, variantProp = _d === void 0 ? LIST_CARD_ITEM_DEFAULT_VARIANT : _d, _e = props.backgroundColorScheme, backgroundColorSchemeProp = _e === void 0 ? LIST_CARD_ITEM_DEFAULT_BACKGROUND_COLOR_SCHEME : _e, borderColorSchemeProp = props.borderColorScheme, _f = props.contentTrailingRatio, contentTrailingRatioProp = _f === void 0 ? LIST_CARD_ITEM_DEFAULT_CONTENT_TRAILING_RATIO : _f, children = props.children, _g = props.as, as = _g === void 0 ? LIST_CARD_ITEM_DEFAULT_TAG : _g, _h = props.interactive, interactiveProp = _h === void 0 ? LIST_CARD_ITEM_DEFAULT_INTERACTIVE : _h, className = props.className, style = props.style, trailing = props.trailing, control = props.control, leading = props.leading, _j = props.align, alignProp = _j === void 0 ? LIST_CARD_ITEM_DEFAULT_ALIGN : _j, paddingProp = props.padding, other = __rest(props, ["size", "variant", "backgroundColorScheme", "borderColorScheme", "contentTrailingRatio", "children", "as", "interactive", "className", "style", "trailing", "control", "leading", "align", "padding"]);
    var hoverControl = useListCardItemHover();
    var listCardContext = useListCardContext();
    var size = sizeProp;
    var variant = variantProp;
    var contentTrailingRatio = contentTrailingRatioProp;
    var backgroundColorScheme = backgroundColorSchemeProp;
    var borderColorScheme = borderColorSchemeProp;
    var interactive = interactiveProp;
    var rawAlign = alignProp;
    var rawPadding = paddingProp;
    if (listCardContext) {
        if (inProps.size === undefined && listCardContext.size) {
            size = listCardContext.size;
        }
        if (inProps.variant === undefined && listCardContext.variant) {
            variant = listCardContext.variant;
        }
        if (inProps.contentTrailingRatio === undefined &&
            listCardContext.contentTrailingRatio) {
            contentTrailingRatio = listCardContext.contentTrailingRatio;
        }
        if (inProps.backgroundColorScheme === undefined &&
            listCardContext.backgroundColorScheme) {
            backgroundColorScheme = listCardContext.backgroundColorScheme;
        }
        if (inProps.borderColorScheme === undefined &&
            listCardContext.borderColorScheme) {
            borderColorScheme = listCardContext.borderColorScheme;
        }
        if (inProps.interactive === undefined &&
            listCardContext.interactive !== undefined) {
            interactive = listCardContext.interactive;
        }
        if (inProps.align === undefined && listCardContext.align) {
            rawAlign = listCardContext.align;
        }
        if (inProps.padding === undefined && listCardContext.padding) {
            rawPadding = listCardContext.padding;
        }
    }
    var backgroundColorSchemeVariables = useListCardItemColorScheme(backgroundColorScheme, 'background');
    var borderColorSchemeVariables = useListCardItemColorScheme(borderColorScheme, 'border');
    var hasBorder = !!borderColorSchemeVariables;
    var ratio = useListCardItemRatio(contentTrailingRatio);
    var align = generateListCardItemAlign(rawAlign);
    var padding = useListCardItemPadding(rawPadding);
    return (React.createElement(ListCardItemContext.Provider, { value: {
            size: size,
            variant: variant,
            hoverControl: hoverControl,
        } },
        React.createElement(Paper, __assign({}, other, { ref: ref, as: as, className: cnListCardItem({
                withBorder: hasBorder,
                size: size,
                variant: variant,
                ignoreHover: hoverControl.isHoverChildren,
                interactive: interactive,
            }, [className]), radius: LIST_CARD_ITEM_SIZE_TO_PAPER_RADIUS[size], style: __assign(__assign(__assign(__assign({}, style), backgroundColorSchemeVariables), borderColorSchemeVariables), padding) }),
            leading && (React.createElement(Stack, { className: cnListCardItem('Leading'), display: "block", align: align.leading }, leading)),
            React.createElement(Stack, { className: cnListCardItem('Main') },
                React.createElement(Stack, { className: cnListCardItem('Center'), display: "block", style: generateCSSVariables((_a = {},
                        _a[LIST_CARD_ITEM_CSS_VARIABLES.CENTER_GROW] = ratio.content,
                        _a)), align: align.center }, children),
                trailing && (React.createElement(Stack, { className: cnListCardItem('Trailing'), display: "block", style: generateCSSVariables((_b = {},
                        _b[LIST_CARD_ITEM_CSS_VARIABLES.TRAILING_GROW] = ratio.trailing,
                        _b)), justify: "end", align: align.trailing }, trailing))),
            control && (React.createElement(Stack, { className: cnListCardItem('Controls'), display: "block", align: align.controls }, control)))));
});