@neo4j-ndl/react
Version:
React implementation of Neo4j Design System
150 lines • 8.57 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 classnames_1 = __importDefault(require("classnames"));
const sonner_1 = require("sonner");
const clean_icon_button_1 = require("../clean-icon-button");
const CheckCircleIconSolid_1 = require("../icons/generated/heroIcons/CheckCircleIconSolid");
const ExclamationCircleIconSolid_1 = require("../icons/generated/heroIcons/ExclamationCircleIconSolid");
const XMarkIconOutline_1 = require("../icons/generated/heroIcons/XMarkIconOutline");
const outlined_button_1 = require("../outlined-button");
const progress_bar_1 = require("../progress-bar");
const Toaster = (props) => {
const { position = 'bottom-left', visibleToasts = 1, className, sonnerToasterProps, } = props;
const classes = (0, classnames_1.default)('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 = (_a) => {
var { icon, id, text, variant, isCloseable, onClose, actionLabel, onAction, shouldCloseOnAction, initialProgressBarValue, isControlled, htmlAttributes, ref } = _a, restProps = __rest(_a, ["icon", "id", "text", "variant", "isCloseable", "onClose", "actionLabel", "onAction", "shouldCloseOnAction", "initialProgressBarValue", "isControlled", "htmlAttributes", "ref"]);
const isProgressBar = variant === 'progress-bar';
const handleOnClose = () => {
if (isControlled === true) {
onCloseCallback(onClose, id);
return;
}
sonner_1.toast.dismiss(id);
onCloseCallback(onClose, id);
};
const handleOnAction = () => {
if (onAction) {
onAction(id);
}
if (shouldCloseOnAction === true) {
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" }, restProps, 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)(outlined_button_1.OutlinedButton, { className: "ndl-toast-action", size: "small", onClick: handleOnAction, children: actionLabel })), (isCloseable || actionLabel || isProgressBar) && ((0, jsx_runtime_1.jsx)(clean_icon_button_1.CleanIconButton, { className: "ndl-toast-close-button", onClick: handleOnClose, description: null, size: "small", htmlAttributes: {
'aria-label': 'Close',
}, children: (0, jsx_runtime_1.jsx)(XMarkIconOutline_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 = {
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);
},
danger: (text, props = {}) => createToast(text, props, 'danger', (0, jsx_runtime_1.jsx)(ExclamationCircleIconSolid_1.ExclamationCircleIconSolid, {})),
neutral: (text, props = {}) => {
const { icon } = props, restProps = __rest(props, ["icon"]);
return createToast(text, restProps, 'neutral', icon);
},
progressBar: (text, props = {}) => {
const { icon } = props, restProps = __rest(props, ["icon"]);
return createToast(text, restProps, 'progress-bar', icon);
},
sonnerToast: sonner_1.toast,
success: (text, props = {}) => {
const icon = (0, jsx_runtime_1.jsx)(CheckCircleIconSolid_1.CheckCircleIconSolid, {});
return createToast(text, props, 'success', 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);
}, // If devs wish to directly access sonner toast.
};
exports.toast = toast;
//# sourceMappingURL=Toast.js.map