@adyen/kyc-components
Version:
This guide assumes that you have already an account with Adyen. A legalEntity needs to be created, and you need to have a `legalEntityId` to instatiate a Component.
104 lines (103 loc) • 3.82 kB
JavaScript
try {
let e = "undefined" != typeof window ? window : "undefined" != typeof global ? global : "undefined" != typeof globalThis ? globalThis : "undefined" != typeof self ? self : {}, n = new e.Error().stack;
n && (e._sentryDebugIds = e._sentryDebugIds || {}, e._sentryDebugIds[n] = "f455c5b1-c22c-4cbe-a7cb-5d362217bb1e", e._sentryDebugIdIdentifier = "sentry-dbid-f455c5b1-c22c-4cbe-a7cb-5d362217bb1e");
} catch (e) {}
import { a as Icon } from "./translation-BFxyJ1c5.js";
import { n as IconButton, t as Button } from "./Button-oj6H8OrC.js";
import { t as ToastContext } from "./ToastContext-Cx99hkTh.js";
import { useEffect, useMemo, useState } from "preact/hooks";
import cx from "classnames";
import { jsx, jsxs } from "preact/jsx-runtime";
var Toast_module_default = {
toast: "adyen-kyc-toast",
"present-toast": "adyen-kyc-present-toast",
presentToast: "adyen-kyc-present-toast",
"toast-image": "adyen-kyc-toast-image",
toastImage: "adyen-kyc-toast-image",
"toast-image-success": "adyen-kyc-toast-image-success",
toastImageSuccess: "adyen-kyc-toast-image-success",
"toast-image-error": "adyen-kyc-toast-image-error",
toastImageError: "adyen-kyc-toast-image-error",
"toast-label": "adyen-kyc-toast-label",
toastLabel: "adyen-kyc-toast-label",
"toast-actions": "adyen-kyc-toast-actions",
toastActions: "adyen-kyc-toast-actions",
"toast-action-close": "adyen-kyc-toast-action-close",
toastActionClose: "adyen-kyc-toast-action-close"
};
//#endregion
//#region src/components/ui/molecules/Toast/Toast.tsx
var Toast = ({ action, duration = 1e4, label, onDismiss, variant = "info" }) => {
const hasIcon = variant === "success" || variant === "error";
const hasAction = action !== void 0;
const role = hasAction ? "alertdialog" : "alert";
const iconNames = {
error: "field-error",
success: "checkmark"
};
const imageClassname = cx(Toast_module_default.toastImage, {
[Toast_module_default.toastImageSuccess]: variant === "success",
[Toast_module_default.toastImageError]: variant === "error"
});
useEffect(() => {
let dismissToastTimer;
if (duration !== "indefinite") dismissToastTimer = setTimeout(() => {
onDismiss();
}, duration);
return () => {
clearTimeout(dismissToastTimer);
};
}, [duration, onDismiss]);
return /* @__PURE__ */ jsxs("div", {
"aria-label": label,
className: Toast_module_default.toast,
role,
children: [/* @__PURE__ */ jsxs("div", {
className: Toast_module_default.toastLabel,
children: [hasIcon && /* @__PURE__ */ jsx("div", {
className: imageClassname,
"data-testId": iconNames[variant],
children: /* @__PURE__ */ jsx(Icon, { name: iconNames[variant] })
}), label]
}), /* @__PURE__ */ jsxs("div", {
className: Toast_module_default.toastActions,
children: [hasAction && /* @__PURE__ */ jsx(Button, {
onClick: action.onClick,
children: action.label
}), /* @__PURE__ */ jsx("div", {
className: Toast_module_default.toastActionClose,
children: /* @__PURE__ */ jsx(IconButton, {
icon: "cross",
ariaLabel: "Close",
onClick: onDismiss
})
})]
})]
});
};
//#endregion
//#region src/context/ToastContext/ToastContextProvider.tsx
function ToastContextProvider({ children }) {
const [toastOptions, setToastOptions] = useState();
const clearToasts = () => {
setToastOptions(void 0);
};
const contextValue = useMemo(() => ({
showToast: (options) => {
setToastOptions(options);
},
clearToasts
}), []);
return /* @__PURE__ */ jsxs(ToastContext.Provider, {
value: contextValue,
children: [!!toastOptions && /* @__PURE__ */ jsx(Toast, {
label: toastOptions.label,
variant: toastOptions.variant,
action: toastOptions.action,
duration: toastOptions.duration,
onDismiss: clearToasts
}), children]
});
}
//#endregion
export { ToastContextProvider as t };