@grandlinex/react-components
Version:
122 lines (121 loc) • 8.01 kB
JavaScript
"use strict";
var __importDefault = (this && this.__importDefault) || function (mod) {
return (mod && mod.__esModule) ? mod : { "default": mod };
};
Object.defineProperty(exports, "__esModule", { value: true });
exports.Card = void 0;
const react_1 = __importDefault(require("react"));
const react_icons_1 = require("@grandlinex/react-icons");
const HNavigator_1 = __importDefault(require("../Navigator/HNavigator"));
const Badge_1 = require("../other/Badge/Badge");
const util_1 = require("../../util");
const DropDownIconMenu_1 = __importDefault(require("../menu/DropDownIconMenu"));
const Grid_1 = require("../Grid/Grid");
const Tooltip_1 = __importDefault(require("../tooltip/Tooltip"));
const Card = (props) => {
const { className, children, imgUrl, icon, title, color, hoverButton, order, button, imgBase, noIcon, iconCover, menu, date, badges, skeleton, style, } = props;
let hover;
if (hoverButton) {
hover = hoverButton.map((c) => {
const cur = c;
if (typeof cur.icon === 'string') {
cur.key = cur.icon;
cur.icon = (0, react_icons_1.getIcon)(cur.icon)({ size: react_icons_1.ISize.MD });
}
return cur;
});
}
else {
hover = null;
}
const styleX = order ? { order, ...style } : style;
let url = null;
if (imgUrl) {
url = imgUrl;
}
else if (imgBase) {
url = `${imgBase}`;
}
return (react_1.default.createElement("div", { style: styleX, className: (0, util_1.cnx)(className, 'glx-card--item') },
react_1.default.createElement("div", null,
react_1.default.createElement("div", { className: "glx-card--head" },
url ? (react_1.default.createElement(react_1.default.Fragment, null,
react_1.default.createElement("div", { className: "glx-card--img glx-round-top", style: { backgroundImage: `url(${url})` } }),
react_1.default.createElement("div", { className: "glx-card--space" }))) : null,
!url && iconCover && icon ? (react_1.default.createElement(react_1.default.Fragment, null,
react_1.default.createElement("div", { className: "glx-card--iconCover glx-round-top", style: {
backgroundColor: color || 'blue',
} },
react_1.default.createElement("div", { className: "glx-card--effect glx-round-top" }, typeof icon === 'string'
? (0, react_icons_1.getIcon)(icon)({ width: 128, height: 128 })
: icon)),
react_1.default.createElement("div", { className: "glx-card--space" }))) : null,
skeleton ? (react_1.default.createElement(react_1.default.Fragment, null,
react_1.default.createElement("div", { className: "glx-card--skeleton glx-round-top" },
react_1.default.createElement("div", { className: "glx-card--effect glx-round-top" },
react_1.default.createElement("div", { className: "animated-background glx-w-full glx-h-full glx-round-top" }))),
react_1.default.createElement("div", { className: "glx-card--space" }))) : null,
hover ? (react_1.default.createElement("div", { className: "glx-card--hover" }, hover.map((el) => el.tooltip ? (react_1.default.createElement(Tooltip_1.default, { key: el.key, className: el.tooltip.className, text: el.tooltip.text, position: el.tooltip.position, width: el.tooltip.width },
react_1.default.createElement("div", { className: "glx-card--btn-wrap" },
react_1.default.createElement("button", { type: "button", onClick: el.onClick }, el.icon)))) : (react_1.default.createElement("div", { key: el.key, className: "glx-card--btn-wrap" },
react_1.default.createElement("button", { type: "button", onClick: el.onClick }, el.icon)))))) : null),
react_1.default.createElement("div", { className: "glx-card--title" },
title,
" ",
date ? react_1.default.createElement("span", { className: "glx-card--date" }, date) : null,
skeleton ? (react_1.default.createElement("div", { className: "animated-background glx-w-full glx-mt-4", style: {
height: '8px',
width: '180px',
borderRadius: '4px',
} })) : null),
react_1.default.createElement("div", { className: "glx-card--content" },
children,
skeleton ? (react_1.default.createElement(react_1.default.Fragment, null,
react_1.default.createElement("div", { className: "animated-background glx-w-full glx-mt-4", style: {
height: '8px',
width: '300px',
borderRadius: '4px',
} }),
react_1.default.createElement("div", { className: "animated-background glx-w-full glx-mt-8", style: {
height: '8px',
width: '300px',
borderRadius: '4px',
} }))) : null),
badges ? (react_1.default.createElement(HNavigator_1.default, { className: "glx-card--badges" }, badges?.map((el) => (
// eslint-disable-next-line react/jsx-props-no-spreading
react_1.default.createElement(Badge_1.Badge, { ...el }))))) : null,
skeleton ? (react_1.default.createElement(HNavigator_1.default, { className: "glx-card--badges" },
react_1.default.createElement("div", { className: "animated-background glx-w-full glx-ml-8", style: {
height: '28px',
width: '88px',
borderRadius: '16px',
} }),
react_1.default.createElement("div", { className: "animated-background glx-w-full glx-ml-8", style: {
height: '28px',
width: '88px',
borderRadius: '16px',
} }),
react_1.default.createElement("div", { className: "animated-background glx-w-full glx-ml-8", style: {
height: '28px',
width: '88px',
borderRadius: '16px',
} }))) : null),
react_1.default.createElement("div", null,
react_1.default.createElement("div", { className: "glx-card--footer" },
react_1.default.createElement("div", null,
icon && !noIcon ? (react_1.default.createElement("div", { className: (0, util_1.cnx)('glx-card--icon', [
!!color,
`glx-card--icon-${color}`,
]) }, typeof icon === 'string'
? (0, react_icons_1.getIcon)(icon)({ size: react_icons_1.ISize.SM })
: icon)) : null,
skeleton ? (react_1.default.createElement("div", { className: "animated-background glx-w-full glx-ml-8", style: {
height: '24px',
width: '24px',
borderRadius: '4px',
} })) : null),
react_1.default.createElement("div", null, button ? (react_1.default.createElement("button", { type: "button", onClick: button.onClick, className: ` button-link button--${color || 'blue'}` }, button.content)) : null),
react_1.default.createElement(Grid_1.Grid, { flex: true, flexR: true, flexEnd: true, vCenter: true }, menu ? (react_1.default.createElement(DropDownIconMenu_1.default, { top: true, menu: menu },
react_1.default.createElement(react_icons_1.IOEllipsisVertical, null))) : null)))));
};
exports.Card = Card;