@gravity-ui/uikit
Version:
Gravity UI base styling and components
45 lines (44 loc) • 2.17 kB
JavaScript
'use client';
;
Object.defineProperty(exports, "__esModule", { value: true });
exports.Card = void 0;
const tslib_1 = require("tslib");
const jsx_runtime_1 = require("react/jsx-runtime");
const React = tslib_1.__importStar(require("react"));
const hooks_1 = require("../../hooks/index.js");
const layout_1 = require("../layout/index.js");
const useDefaultProps_1 = require("../theme/useDefaultProps.js");
const cn_1 = require("../utils/cn.js");
require("./Card.css");
const b = (0, cn_1.block)('card');
const roles = {
selection: 'radio',
action: 'button',
container: undefined,
};
exports.Card = React.forwardRef(function Card(rawProps, ref) {
const props = (0, useDefaultProps_1.useDefaultProps)('Card', rawProps);
const { type = 'container', theme, view, size = 'm', children, className, onClick, disabled, selected, ...restProps } = props;
const isTypeAction = type === 'action';
const isTypeSelection = type === 'selection';
const isTypeContainer = type === 'container';
/* Clickable card — only with type 'action' or 'selection' and not selected or disabled */
const hasAction = isTypeAction || isTypeSelection;
const isClickable = hasAction && Boolean(onClick) && !disabled;
/* Theme only with type 'container' */
const defaultTheme = isTypeContainer ? 'normal' : undefined;
/* View only with type 'container' and 'selection' */
const defaultView = isTypeContainer || isTypeSelection ? 'outlined' : undefined;
const handleClick = isClickable ? onClick : undefined;
const { onKeyDown } = (0, hooks_1.useActionHandlers)(onClick);
return ((0, jsx_runtime_1.jsx)(layout_1.Box, { ref: ref, role: roles[type], className: b({
theme: theme || defaultTheme,
view: view || defaultView,
type,
selected,
size,
disabled,
clickable: isClickable,
}, className), onClick: handleClick, onKeyDown: isClickable ? onKeyDown : undefined, tabIndex: isClickable ? 0 : undefined, "aria-checked": isTypeSelection ? selected : undefined, ...restProps, children: children }));
});
//# sourceMappingURL=Card.js.map