@ozen-ui/kit
Version:
React component library
90 lines (89 loc) • 6.22 kB
JavaScript
"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");
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, other = tslib_1.__rest(props, ["size", "variant", "backgroundColorScheme", "borderColorScheme", "contentTrailingRatio", "children", "as", "interactive", "className", "style", "trailing", "control", "leading"]);
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;
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;
}
}
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);
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({}, style), backgroundColorSchemeVariables), borderColorSchemeVariables) }),
leading && react_1.default.createElement("div", { className: (0, classNames_1.cnListCardItem)('Leading') }, leading),
react_1.default.createElement(Stack_1.Stack, { className: (0, classNames_1.cnListCardItem)('Main') },
react_1.default.createElement("div", { className: (0, classNames_1.cnListCardItem)('Center'), style: (0, css_1.generateCSSVariables)((_a = {},
_a[constants_1.LIST_CARD_ITEM_CSS_VARIABLES.CENTER_GROW] = ratio.content,
_a)) }, children),
trailing && (react_1.default.createElement("div", { className: (0, classNames_1.cnListCardItem)('Trailing'), style: (0, css_1.generateCSSVariables)((_b = {},
_b[constants_1.LIST_CARD_ITEM_CSS_VARIABLES.TRAILING_GROW] = ratio.trailing,
_b)) }, trailing))),
control && react_1.default.createElement("div", { className: (0, classNames_1.cnListCardItem)('Controls') }, control))));
});