@neo4j-ndl/react
Version:
React implementation of Neo4j Design System
156 lines • 8.69 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;
};
var __importDefault = (this && this.__importDefault) || function (mod) {
return (mod && mod.__esModule) ? mod : { "default": mod };
};
Object.defineProperty(exports, "__esModule", { value: true });
exports.toast = exports.Toaster = void 0;
const jsx_runtime_1 = require("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/>.
*/
const react_1 = __importDefault(require("react"));
const sonner_1 = require("sonner");
const defaultImports_1 = require("../_common/defaultImports");
const button_1 = require("../button");
const icon_button_1 = require("../icon-button");
const icons_1 = require("../icons");
const loading_spinner_1 = require("../loading-spinner");
const progress_bar_1 = require("../progress-bar");
const Toaster = (props) => {
const { position = 'bottom-left', visibleToasts = 1, className, sonnerToasterProps, } = props;
const classes = (0, defaultImports_1.classNames)('ndl-toast-container', className);
return ((0, jsx_runtime_1.jsx)(sonner_1.Toaster, Object.assign({ className: classes, position: position, visibleToasts: visibleToasts }, sonnerToasterProps)));
};
exports.Toaster = Toaster;
function onCloseCallback(callback, id) {
if (callback) {
callback(id);
// Cleanup
delete sonner_1.toast.needle[id];
}
}
const Toast = react_1.default.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) {
sonner_1.toast.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) {
sonner_1.toast.dismiss(id);
onCloseCallback(onClose, id);
}
};
return ((0, jsx_runtime_1.jsxs)("div", Object.assign({ id: String(id), className: "ndl-toast", tabIndex: -1, ref: ref, "data-variant": variant, "data-testid": "ndl-toast" }, htmlAttributes, { children: [(0, jsx_runtime_1.jsxs)("div", { className: "ndl-toast-content", tabIndex: -1, children: [icon && ((0, jsx_runtime_1.jsx)("div", { className: `ndl-toast-icon ndl-toast-${variant}`, children: icon })), (0, jsx_runtime_1.jsx)("div", { className: "ndl-toast-text", children: text }), actionLabel && ((0, jsx_runtime_1.jsx)(button_1.Button, { className: "ndl-toast-action", fill: "outlined", size: "small", onClick: handleOnAction, onKeyDown: handleOnAction, children: actionLabel })), (isCloseable || actionLabel || isProgressBar) && ((0, jsx_runtime_1.jsx)(icon_button_1.IconButton, { isClean: true, className: "ndl-toast-close-button", onKeyDown: handleOnClose, onClick: handleOnClose, ariaLabel: "Close toast", size: "small", children: (0, jsx_runtime_1.jsx)(icons_1.XMarkIconOutline, {}) }))] }), isProgressBar && ((0, jsx_runtime_1.jsx)(progress_bar_1.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
sonner_1.toast.needle = {
[String(sonnerToastProps.id)]: {
onClose,
},
};
return sonner_1.toast.custom((id) => ((0, jsx_runtime_1.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 = (0, jsx_runtime_1.jsx)(icons_1.CheckCircleIconSolid, {});
return createToast(text, props, 'success', icon);
},
danger: (text, props = {}) => createToast(text, props, 'danger', (0, jsx_runtime_1.jsx)(icons_1.ExclamationCircleIconSolid, {})),
loadingSpinner: (text, props = {}) => createToast(text, props, 'loading-spinner', (0, jsx_runtime_1.jsx)(loading_spinner_1.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;
sonner_1.toast.dismiss(id);
onCloseCallback((_a = sonner_1.toast.needle[id]) === null || _a === void 0 ? void 0 : _a.onClose, id);
},
sonnerToast: sonner_1.toast, // If devs wish to directly access sonner toast.
};
exports.toast = toast;
//# sourceMappingURL=Toast.js.map