@gravity-ui/uikit
Version:
Gravity UI base styling and components
65 lines (64 loc) • 3.51 kB
JavaScript
'use client';
;
Object.defineProperty(exports, "__esModule", { value: true });
exports.Toast = void 0;
const tslib_1 = require("tslib");
const jsx_runtime_1 = require("react/jsx-runtime");
const React = tslib_1.__importStar(require("react"));
const icons_1 = require("@gravity-ui/icons");
const private_1 = require("../../../hooks/private/index.js");
const Button_1 = require("../../Button/index.js");
const Icon_1 = require("../../Icon/index.js");
const cn_1 = require("../../utils/cn.js");
const i18n_1 = tslib_1.__importDefault(require("../i18n/index.js"));
require("./Toast.css");
const b = (0, cn_1.block)('toast');
const DEFAULT_TIMEOUT = 5000;
const TITLE_ICONS = {
normal: null,
info: icons_1.CircleInfo,
success: icons_1.CircleCheck,
warning: icons_1.TriangleExclamation,
danger: icons_1.TriangleExclamation,
utility: icons_1.Thunderbolt,
};
function renderActions({ actions, onClose }) {
if (!actions || !actions.length) {
return null;
}
return ((0, jsx_runtime_1.jsx)("div", { className: b('actions'), children: actions.map(({ label, onClick, view = 'outlined', removeAfterClick = true }, index) => {
const onActionClick = () => {
onClick();
if (removeAfterClick) {
onClose();
}
};
return ((0, jsx_runtime_1.jsx)(Button_1.Button, { className: b('action'), onClick: onActionClick, type: "button", size: "l", view: view, width: "auto", children: label }, `${label}__${index}`));
}) }));
}
function renderIconByType({ theme }) {
if (!theme || !TITLE_ICONS[theme]) {
return null;
}
return (0, jsx_runtime_1.jsx)(Icon_1.Icon, { data: TITLE_ICONS[theme], size: 20, className: b('icon', { [theme]: true }) });
}
exports.Toast = React.forwardRef(function Toast(props, ref) {
const { name, content, actions, title, className, theme = 'normal', renderIcon, autoHiding: timeoutProp = DEFAULT_TIMEOUT, isClosable = true, mobile = false, onClose, removeCallback, } = props;
const handleClose = React.useCallback(() => {
removeCallback(name);
if (onClose) {
onClose();
}
}, [removeCallback, onClose, name]);
const timeout = typeof timeoutProp === 'number' ? timeoutProp : undefined;
const closeOnTimeoutProps = (0, private_1.useCloseOnTimeout)({ onClose: handleClose, timeout });
const mods = {
mobile,
theme,
};
const hasTitle = Boolean(title);
const hasContent = Boolean(content);
const icon = renderIcon ? renderIcon(props) : renderIconByType({ theme });
return ((0, jsx_runtime_1.jsxs)("div", { ref: ref, className: b(mods, className), ...closeOnTimeoutProps, "data-toast": true, children: [icon && (0, jsx_runtime_1.jsx)("div", { className: b('icon-container'), children: icon }), (0, jsx_runtime_1.jsxs)("div", { className: b('container'), children: [hasTitle && (0, jsx_runtime_1.jsx)("h3", { className: b('title'), children: title }), isClosable && ((0, jsx_runtime_1.jsx)(Button_1.Button, { size: "s", view: "flat", className: b('btn-close'), onClick: handleClose, "aria-label": (0, i18n_1.default)('label_close-button'), children: (0, jsx_runtime_1.jsx)(Icon_1.Icon, { data: icons_1.Xmark }) })), hasContent && ((0, jsx_runtime_1.jsx)("div", { className: b('content', { 'without-title': !hasTitle }), children: content })), renderActions({ actions, onClose: handleClose })] })] }));
});
//# sourceMappingURL=Toast.js.map