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

React component library

"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
exports.ListCardItem = void 0;
var tslib_1 = require("tslib");
require("./components/ListCardItemInfoCarcass/ListCardItemInfoCarcass.css");
require("./components/ListCardItemCaption/ListCardItemCaption.css");
require("./components/ListCardItemItemCarcass/ListCardItemItemCarcass.css");
require("./modules/ListCardItemTrailingItem/ListCardItemTrailingItem.css");
require("./modules/ListCardItemTrailingButton/ListCardItemTrailingButton.css");
require("./modules/ListCardItemCenterButton/ListCardItemCenterButton.css");
require("./modules/ListCardItemLeadingIcon/ListCardItemLeadingIcon.css");
require("./modules/ListCardItemLeadingItem/ListCardItemLeadingItem.css");
require("./ListCardItem.css");
var react_1 = tslib_1.__importDefault(require("react"));
var useThemeProps_1 = require("../../hooks/useThemeProps");
var css_1 = require("../../utils/css");
var polymorphicComponentWithRef_1 = require("../../utils/polymorphicComponentWithRef");
var ListCardContext_1 = require("../ListCard/ListCardContext");
var Paper_1 = require("../Paper");
var Stack_1 = require("../Stack");
var classNames_1 = require("./classNames");
var constants_1 = require("./constants");
var hooks_1 = require("./hooks");
var ListCardItemContext_1 = require("./ListCardItemContext");
var utils_1 = require("./utils");
exports.ListCardItem = (0, polymorphicComponentWithRef_1.polymorphicComponentWithRef)(function (inProps, ref) {
    var _a, _b;
    var props = (0, useThemeProps_1.useThemeProps)({
        props: inProps,
        name: 'ListCardItem',
    });
    var _c = props.size, sizeProp = _c === void 0 ? constants_1.LIST_CARD_ITEM_DEFAULT_SIZE : _c, _d = props.variant, variantProp = _d === void 0 ? constants_1.LIST_CARD_ITEM_DEFAULT_VARIANT : _d, _e = props.backgroundColorScheme, backgroundColorSchemeProp = _e === void 0 ? constants_1.LIST_CARD_ITEM_DEFAULT_BACKGROUND_COLOR_SCHEME : _e, borderColorSchemeProp = props.borderColorScheme, _f = props.contentTrailingRatio, contentTrailingRatioProp = _f === void 0 ? constants_1.LIST_CARD_ITEM_DEFAULT_CONTENT_TRAILING_RATIO : _f, children = props.children, _g = props.as, as = _g === void 0 ? constants_1.LIST_CARD_ITEM_DEFAULT_TAG : _g, _h = props.interactive, interactiveProp = _h === void 0 ? constants_1.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 ? constants_1.LIST_CARD_ITEM_DEFAULT_ALIGN : _j, paddingProp = props.padding, other = tslib_1.__rest(props, ["size", "variant", "backgroundColorScheme", "borderColorScheme", "contentTrailingRatio", "children", "as", "interactive", "className", "style", "trailing", "control", "leading", "align", "padding"]);
    var hoverControl = (0, hooks_1.useListCardItemHover)();
    var listCardContext = (0, ListCardContext_1.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 = (0, hooks_1.useListCardItemColorScheme)(backgroundColorScheme, 'background');
    var borderColorSchemeVariables = (0, hooks_1.useListCardItemColorScheme)(borderColorScheme, 'border');
    var hasBorder = !!borderColorSchemeVariables;
    var ratio = (0, hooks_1.useListCardItemRatio)(contentTrailingRatio);
    var align = (0, utils_1.generateListCardItemAlign)(rawAlign);
    var padding = (0, hooks_1.useListCardItemPadding)(rawPadding);
    return (react_1.default.createElement(ListCardItemContext_1.ListCardItemContext.Provider, { value: {
            size: size,
            variant: variant,
            hoverControl: hoverControl,
        } },
        react_1.default.createElement(Paper_1.Paper, tslib_1.__assign({}, other, { ref: ref, as: as, className: (0, classNames_1.cnListCardItem)({
                withBorder: hasBorder,
                size: size,
                variant: variant,
                ignoreHover: hoverControl.isHoverChildren,
                interactive: interactive,
            }, [className]), radius: constants_1.LIST_CARD_ITEM_SIZE_TO_PAPER_RADIUS[size], style: tslib_1.__assign(tslib_1.__assign(tslib_1.__assign(tslib_1.__assign({}, style), backgroundColorSchemeVariables), borderColorSchemeVariables), padding) }),
            leading && (react_1.default.createElement(Stack_1.Stack, { className: (0, classNames_1.cnListCardItem)('Leading'), display: "block", align: align.leading }, leading)),
            react_1.default.createElement(Stack_1.Stack, { className: (0, classNames_1.cnListCardItem)('Main') },
                react_1.default.createElement(Stack_1.Stack, { className: (0, classNames_1.cnListCardItem)('Center'), display: "block", style: (0, css_1.generateCSSVariables)((_a = {},
                        _a[constants_1.LIST_CARD_ITEM_CSS_VARIABLES.CENTER_GROW] = ratio.content,
                        _a)), align: align.center }, children),
                trailing && (react_1.default.createElement(Stack_1.Stack, { className: (0, classNames_1.cnListCardItem)('Trailing'), display: "block", style: (0, css_1.generateCSSVariables)((_b = {},
                        _b[constants_1.LIST_CARD_ITEM_CSS_VARIABLES.TRAILING_GROW] = ratio.trailing,
                        _b)), justify: "end", align: align.trailing }, trailing))),
            control && (react_1.default.createElement(Stack_1.Stack, { className: (0, classNames_1.cnListCardItem)('Controls'), display: "block", align: align.controls }, control)))));
});