@gravity-ui/uikit
Version:
Gravity UI base styling and components
51 lines (50 loc) • 2.74 kB
JavaScript
;
Object.defineProperty(exports, "__esModule", { value: true });
exports.PlaceholderContainer = void 0;
const tslib_1 = require("tslib");
const jsx_runtime_1 = require("react/jsx-runtime");
const React = tslib_1.__importStar(require("react"));
const Button_1 = require("../Button/index.js");
const cn_1 = require("../utils/cn.js");
const constants_1 = require("./constants.js");
require("./PlaceholderContainer.css");
const b = (0, cn_1.block)(constants_1.componentClassName);
const PlaceholderContainerAction = ({ text, ...buttonProps }) => {
return ((0, jsx_runtime_1.jsx)("div", { className: b('action'), children: (0, jsx_runtime_1.jsx)(Button_1.Button, { ...buttonProps, className: b('action-btn'), children: text }) }));
};
const PlaceholderContainer = ({ direction = 'row', align = 'center', size = 'l', className, title, description, image, content, actions, qa, }) => {
const renderTitle = () => {
if (!title) {
return null;
}
return (0, jsx_runtime_1.jsx)("div", { className: b('title'), children: title });
};
const renderDescription = () => {
if (!description) {
return null;
}
return (0, jsx_runtime_1.jsx)("div", { className: b('description'), children: description });
};
const renderImage = () => {
if (typeof image === 'object' && 'src' in image) {
return (0, jsx_runtime_1.jsx)("img", { src: image.src, alt: image.alt || '' });
}
return image;
};
const renderAction = () => {
if (!actions || !(React.isValidElement(actions) || Array.isArray(actions))) {
return null;
}
if (React.isValidElement(actions)) {
return (0, jsx_runtime_1.jsx)(React.Fragment, { children: actions });
}
return ((0, jsx_runtime_1.jsx)("div", { className: b('actions'), children: actions.map((actionItem) => ((0, jsx_runtime_1.jsx)(PlaceholderContainerAction, { ...actionItem }, actionItem.text))) }));
};
const renderContent = () => {
const contentNode = content || ((0, jsx_runtime_1.jsxs)(React.Fragment, { children: [renderTitle(), renderDescription()] }));
return ((0, jsx_runtime_1.jsxs)("div", { className: b('content', { size }), children: [contentNode, renderAction()] }));
};
return ((0, jsx_runtime_1.jsx)("div", { className: b({ direction, align, size }, className || ''), "data-qa": qa, children: (0, jsx_runtime_1.jsxs)("div", { className: b('body'), children: [(0, jsx_runtime_1.jsx)("div", { className: b('image', { size }), children: renderImage() }), renderContent()] }) }));
};
exports.PlaceholderContainer = PlaceholderContainer;
//# sourceMappingURL=PlaceholderContainer.js.map