@neo4j-ndl/react
Version:
React implementation of Neo4j Design System
149 lines • 8.08 kB
JavaScript
var __rest = (this && this.__rest) || function (s, e) {
var t = {};
for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
t[p] = s[p];
if (s != null && typeof Object.getOwnPropertySymbols === "function")
for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
t[p[i]] = s[p[i]];
}
return t;
};
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
/**
*
* Copyright (c) "Neo4j"
* Neo4j Sweden AB [http://neo4j.com]
*
* This file is part of Neo4j.
*
* Neo4j is free software: you can redistribute it and/or modify
* it under the terms of the GNU General Public License as published by
* the Free Software Foundation, either version 3 of the License, or
* (at your option) any later version.
*
* This program is distributed in the hope that it will be useful,
* but WITHOUT ANY WARRANTY; without even the implied warranty of
* MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
* GNU General Public License for more details.
*
* You should have received a copy of the GNU General Public License
* along with this program. If not, see <http://www.gnu.org/licenses/>.
*/
import React from 'react';
import { toast as sonnerToast, Toaster as SonnerToaster, } from 'sonner';
import { classNames } from '../_common/defaultImports';
import { Button } from '../button';
import { IconButton } from '../icon-button';
import { CheckCircleIconSolid, ExclamationCircleIconSolid, XMarkIconOutline, } from '../icons';
import { LoadingSpinner } from '../loading-spinner';
import { ProgressBar } from '../progress-bar';
const Toaster = (props) => {
const { position = 'bottom-left', visibleToasts = 1, className, sonnerToasterProps, } = props;
const classes = classNames('ndl-toast-container', className);
return (_jsx(SonnerToaster, Object.assign({ className: classes, position: position, visibleToasts: visibleToasts }, sonnerToasterProps)));
};
function onCloseCallback(callback, id) {
if (callback) {
callback(id);
// Cleanup
delete sonnerToast.needle[id];
}
}
const Toast = React.forwardRef(function Toast({ icon, id, text, variant, isCloseable, onClose, actionLabel, onAction, shouldCloseOnAction, initialProgressBarValue, isControlled, htmlAttributes, }, ref) {
const isProgressBar = variant === 'progress-bar';
const handleOnClose = (event) => {
if (isControlled) {
onCloseCallback(onClose, id);
return;
}
const shouldTrigger = (event.type === 'keydown' &&
event.key === 'Enter') ||
event.key === 'Space' ||
event.type === 'click';
if (shouldTrigger) {
sonnerToast.dismiss(id);
onCloseCallback(onClose, id);
}
};
const handleOnAction = (event) => {
const shouldTrigger = (event.type === 'keydown' &&
event.key === 'Enter') ||
event.key === 'Space' ||
event.type === 'click';
if (!shouldTrigger)
return;
if (onAction)
onAction(id);
if (shouldCloseOnAction) {
sonnerToast.dismiss(id);
onCloseCallback(onClose, id);
}
};
return (_jsxs("div", Object.assign({ id: String(id), className: "ndl-toast", tabIndex: -1, ref: ref, "data-variant": variant, "data-testid": "ndl-toast" }, htmlAttributes, { children: [_jsxs("div", { className: "ndl-toast-content", tabIndex: -1, children: [icon && (_jsx("div", { className: `ndl-toast-icon ndl-toast-${variant}`, children: icon })), _jsx("div", { className: "ndl-toast-text", children: text }), actionLabel && (_jsx(Button, { className: "ndl-toast-action", fill: "outlined", size: "small", onClick: handleOnAction, onKeyDown: handleOnAction, children: actionLabel })), (isCloseable || actionLabel || isProgressBar) && (_jsx(IconButton, { isClean: true, className: "ndl-toast-close-button", onKeyDown: handleOnClose, onClick: handleOnClose, ariaLabel: "Close toast", size: "small", children: _jsx(XMarkIconOutline, {}) }))] }), isProgressBar && (_jsx(ProgressBar, { size: "small", value: initialProgressBarValue !== null && initialProgressBarValue !== void 0 ? initialProgressBarValue : 0 }))] })));
});
function getProps(onClose, shouldAutoClose, onAutoClose, onAction, sonnerToastProps, variant) {
const isProgressBar = variant === 'progress-bar';
// https://sonner.emilkowal.ski/toast#api-reference
return Object.assign({ duration: !isProgressBar && shouldAutoClose ? (!onAction ? 5000 : 8000) : Infinity, unstyled: true, onDismiss: (toast) => {
onCloseCallback(onClose, toast.id);
}, onAutoClose: (toast) => {
if (onAutoClose)
return onAutoClose(toast.id);
} }, sonnerToastProps);
}
function createToast(text, props, variant, icon) {
const { ref, sonnerToastProps = {}, onClose, shouldAutoClose, onAutoClose, onAction } = props, restProps = __rest(props, ["ref", "sonnerToastProps", "onClose", "shouldAutoClose", "onAutoClose", "onAction"]);
const { id: sonnerToastPropsId } = sonnerToastProps;
sonnerToastProps.id = sonnerToastPropsId !== null && sonnerToastPropsId !== void 0 ? sonnerToastPropsId : `ndl-toast-${Date.now()}`;
// Unfortunately calling sonnerToast.dismiss does not trigger the onDismiss
// callback (weird). So we need to save the onClose callback and call it manually
// when calling dismiss manually as we want an onClose callback.
// https://sonner.emilkowal.ski/toast#on-close-callback
// https://github.com/emilkowalski/sonner/blob/main/src/index.tsx#L320
// https://github.com/emilkowalski/sonner/blob/main/src/index.tsx#L359
sonnerToast.needle = {
[String(sonnerToastProps.id)]: {
onClose,
},
};
return sonnerToast.custom((id) => (_jsx(Toast, Object.assign({}, restProps, { ref: ref, id: id, text: text, variant: variant, icon: icon, onClose: onClose, onAction: onAction }))), Object.assign({}, getProps(onClose, shouldAutoClose, onAutoClose, onAction, sonnerToastProps, variant)));
}
const toast = {
neutral: (text, props = {}) => {
const { icon } = props, restProps = __rest(props, ["icon"]);
return createToast(text, restProps, 'neutral', icon);
},
success: (text, props = {}) => {
const icon = _jsx(CheckCircleIconSolid, {});
return createToast(text, props, 'success', icon);
},
danger: (text, props = {}) => createToast(text, props, 'danger', _jsx(ExclamationCircleIconSolid, {})),
loadingSpinner: (text, props = {}) => createToast(text, props, 'loading-spinner', _jsx(LoadingSpinner, { size: "medium" })),
progressBar: (text, props = {}) => {
const { icon } = props, restProps = __rest(props, ["icon"]);
return createToast(text, restProps, 'progress-bar', icon);
},
updateProgressBarValue: (id, givenValue) => {
const value = givenValue > 100 ? 100 : givenValue < 0 ? 0 : givenValue;
// Unable to use the sonner toast.update on custom toasts.
const widthValue = `${value}%`;
const toastElement = document.getElementById(String(id));
if (!toastElement)
return;
const progressBarContainerElement = toastElement.querySelector('.ndl-progress-bar-container');
progressBarContainerElement.ariaValueNow = String(value);
const progressBarElement = progressBarContainerElement.querySelector('.ndl-progress-bar');
if (!progressBarContainerElement)
return;
progressBarElement.style.setProperty('width', widthValue);
},
close: (id) => {
var _a;
sonnerToast.dismiss(id);
onCloseCallback((_a = sonnerToast.needle[id]) === null || _a === void 0 ? void 0 : _a.onClose, id);
},
sonnerToast, // If devs wish to directly access sonner toast.
};
export { Toaster, toast };
//# sourceMappingURL=Toast.js.map