@kwiz/fluentui/dist/controls/card.js

KWIZ common controls for FluentUI

import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
import { Card, CardFooter, cardFooterClassNames, CardHeader, CardPreview, Label, makeStyles, tokens } from '@fluentui/react-components';
import { MoreVerticalRegular } from '@fluentui/react-icons';
import { isNotEmptyArray, isNotEmptyString, isNullOrEmptyArray, isNullOrUndefined } from '@kwiz/common';
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'
    },
});
export const CardEX = (props) => {
    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, 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: _jsx(Label, { className: classes.cardLabels, children: props.title }), description: _jsx(Label, { className: classes.cardLabels, size: 'small', children: props.description }) }), hasActions && _jsx(CardFooter, { action: isNullOrEmptyArray(props.menuItems)
                    ? undefined
                    : _jsx(MenuEx, { trigger: { title: 'more', icon: _jsx(MoreVerticalRegular, {}) }, items: props.menuItems }), children: props.footer })] }));
};
//# sourceMappingURL=card.js.map