design-react-kit
Version:
Componenti React per Bootstrap 5
67 lines • 2.89 kB
JavaScript
/* eslint-disable @typescript-eslint/no-explicit-any */
import classNames from 'classnames';
import React from 'react';
import { Button } from '../Button/Button';
import { Icon } from '../Icon/Icon';
import { usePosition } from './usePosition';
export const getBorderStyleFix = (fix) => {
const borderReset = ['top', 'bottom', 'right', 'left']
.filter((curPosition) => (fix === 'left' ? curPosition !== 'right' : curPosition !== 'left'))
.map((borderPosition) => `border${borderPosition[0].toUpperCase() + borderPosition.substring(1)}`);
const customStyle = {};
for (const borderPos of borderReset) {
customStyle[borderPos] = 'none';
}
return customStyle;
};
function pickIcon(state) {
switch (state) {
case 'error':
return 'it-close-circle';
case 'info':
return 'it-info-circle';
case 'warning':
return 'it-error';
case 'success':
return 'it-check-circle';
default:
return undefined;
}
}
function NotificationElement({ closeToast, toastProps, title, body, options }) {
const globalFix = usePosition();
const { icon: userIcon, state, fix: localFix, dismissable } = options;
const fixPosition = localFix == null && globalFix ? globalFix : localFix || globalFix;
const { autoClose, style } = toastProps;
const content = typeof body === 'string' ? React.createElement("p", null, body) : body;
const icon = userIcon || pickIcon(state);
const borderFixes = getBorderStyleFix(fixPosition);
const wrapperClass = classNames('notification', state, {
[`${fixPosition}-fix`]: fixPosition,
'with-icon': icon,
dismissable: dismissable || !autoClose
});
// Need to override some toast styling here
const customStyle = {
...style,
...borderFixes,
// force a display as the notification class has a "display: none" set
display: 'block'
};
return (React.createElement("div", { className: wrapperClass, style: customStyle },
React.createElement("h5", null,
title,
icon ? React.createElement(Icon, { icon: icon }) : null),
content,
(!autoClose || dismissable) && (React.createElement(Button, { className: 'notification-close', onClick: closeToast },
React.createElement(Icon, { icon: 'it-close' }),
React.createElement("span", { className: 'visually-hidden' },
"Chiudi notifica: ",
title)))));
}
/**
* Internal use only. Exported for documentation purposes.
* @internal
*/
export const createNotification = (title, body, options, closeToast, toastProps) => (React.createElement(NotificationElement, { title: title, body: body, options: options, closeToast: closeToast, toastProps: toastProps }));
//# sourceMappingURL=NotificationContent.js.map