@gravity-ui/uikit
Version:
Gravity UI base styling and components
46 lines (45 loc) • 2.27 kB
JavaScript
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import * as React from 'react';
import { Button } from "../Button/index.js";
import { block } from "../utils/cn.js";
import { componentClassName } from "./constants.js";
import "./PlaceholderContainer.css";
const b = block(componentClassName);
const PlaceholderContainerAction = ({ text, ...buttonProps }) => {
return (_jsx("div", { className: b('action'), children: _jsx(Button, { ...buttonProps, className: b('action-btn'), children: text }) }));
};
export const PlaceholderContainer = ({ direction = 'row', align = 'center', size = 'l', className, title, description, image, content, actions, qa, }) => {
const renderTitle = () => {
if (!title) {
return null;
}
return _jsx("div", { className: b('title'), children: title });
};
const renderDescription = () => {
if (!description) {
return null;
}
return _jsx("div", { className: b('description'), children: description });
};
const renderImage = () => {
if (typeof image === 'object' && 'src' in image) {
return _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 _jsx(React.Fragment, { children: actions });
}
return (_jsx("div", { className: b('actions'), children: actions.map((actionItem) => (_jsx(PlaceholderContainerAction, { ...actionItem }, actionItem.text))) }));
};
const renderContent = () => {
const contentNode = content || (_jsxs(React.Fragment, { children: [renderTitle(), renderDescription()] }));
return (_jsxs("div", { className: b('content', { size }), children: [contentNode, renderAction()] }));
};
return (_jsx("div", { className: b({ direction, align, size }, className || ''), "data-qa": qa, children: _jsxs("div", { className: b('body'), children: [_jsx("div", { className: b('image', { size }), children: renderImage() }), renderContent()] }) }));
};
//# sourceMappingURL=PlaceholderContainer.js.map