@kwiz/fluentui
Version:
KWIZ common controls for FluentUI
64 lines • 3.4 kB
JavaScript
import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
import { Card, CardFooter, cardFooterClassNames, CardHeader, CardPreview, InfoLabel, Label, labelClassNames, makeStyles, tokens } from '@fluentui/react-components';
import { MoreVerticalRegular } from '@fluentui/react-icons';
import { isNotEmptyArray, isNotEmptyString, isNullOrEmptyArray, isNullOrUndefined, stopEvent } from '@kwiz/common';
import React from 'react';
import { useKWIZFluentContext } from '../helpers/context-internal';
import { MenuEx } from './menu';
const useStyles = makeStyles({
card: {
height: '225px',
width: '190px',
[`& .${cardFooterClassNames.root}>button`]: {
display: "none"
},
"&:hover": {
backgroundColor: tokens.colorNeutralBackground1Hover,
[`& .${cardFooterClassNames.root}>button`]: {
display: "block"
}
}
},
previewContent: {
textAlign: "center",
backgroundColor: tokens.colorBrandBackground,
color: tokens.colorBrandBackground2
},
previewContentNoDescription: {
textAlign: "center",
color: tokens.colorBrandBackground,
paddingTop: '20%'
},
cardIcon: {
height: '120px',
width: '100px'
},
cardLabels: {
whiteSpace: "nowrap",
overflow: "hidden",
textOverflow: "ellipsis",
maxWidth: '166px'
},
cardInfoLabel: {
display: "flex",
maxWidth: '166px',
[`& .${labelClassNames.root}`]: {
whiteSpace: "nowrap",
overflow: "hidden",
textOverflow: "ellipsis",
}
}
});
export const CardEX = React.forwardRef((props, ref) => {
var _a, _b;
const ctx = useKWIZFluentContext();
const classes = useStyles();
const hasDescription = isNotEmptyString(props.description);
const hasActions = isNotEmptyArray(props.menuItems) || !isNullOrUndefined(props.footer);
return (_jsxs(Card, { className: classes.card, onClick: props.onClick, ref: ref, children: [_jsx(CardPreview, { children: _jsxs("div", { className: hasDescription ? classes.previewContent : classes.previewContentNoDescription, children: [_jsx(props.icon, { className: classes.cardIcon }), !hasDescription && _jsxs(_Fragment, { children: [_jsx("br", {}), _jsx(Label, { children: props.title })] })] }) }), hasDescription && _jsx(CardHeader, { header: isNullOrUndefined(props.titleInfo)
? _jsx(Label, { title: props.title, className: classes.cardLabels, children: props.title })
: _jsx(InfoLabel, { title: props.title, infoButton: { onClick: e => stopEvent(e) }, className: classes.cardInfoLabel, info: props.titleInfo, children: props.title }), description: _jsx(Label, { className: classes.cardLabels, size: 'small', title: props.description || "", children: props.description || "" }) }), hasActions && _jsx(CardFooter, { action: isNullOrEmptyArray(props.menuItems)
? undefined
: _jsx(MenuEx, { trigger: { title: ((_b = (_a = ctx.strings) === null || _a === void 0 ? void 0 : _a.btn_more_dots) === null || _b === void 0 ? void 0 : _b.call(_a).toLowerCase()) || 'more...', icon: _jsx(MoreVerticalRegular, {}) }, items: props.menuItems }), children: props.footer })] }));
});
//# sourceMappingURL=card.js.map