@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.
190 lines (189 loc) • 7.45 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] = "9f2698da-8788-4de9-bd21-0203c8198843", e._sentryDebugIdIdentifier = "sentry-dbid-9f2698da-8788-4de9-bd21-0203c8198843");
} catch (e) {}
import { a as Icon, i as Typography, r as useTranslation } from "./translation-BFxyJ1c5.js";
import { useLayoutEffect } from "preact/hooks";
import cx from "classnames";
import { jsx, jsxs } from "preact/jsx-runtime";
import { useComputed, useSignal } from "@preact/signals";
var Loader_module_default = {
"loader-wrapper": "adyen-kyc-loader-wrapper",
loaderWrapper: "adyen-kyc-loader-wrapper",
"loader-text": "adyen-kyc-loader-text",
loaderText: "adyen-kyc-loader-text",
"loader-text-visible": "adyen-kyc-loader-text-visible",
loaderTextVisible: "adyen-kyc-loader-text-visible",
loader: "adyen-kyc-loader",
rotateLoader: "adyen-kyc-rotateLoader",
"loader-large": "adyen-kyc-loader-large",
loaderLarge: "adyen-kyc-loader-large",
"loader-small": "adyen-kyc-loader-small",
loaderSmall: "adyen-kyc-loader-small",
"loader-medium": "adyen-kyc-loader-medium",
loaderMedium: "adyen-kyc-loader-medium",
"loader-xsmall": "adyen-kyc-loader-xsmall",
loaderXsmall: "adyen-kyc-loader-xsmall",
fadeInText: "adyen-kyc-fadeInText"
};
//#endregion
//#region src/components/ui/atoms/Loader/Loader.tsx
var LOADER_TEXT_DELAY_MS = 5e3;
var LOADER_TEXT_LONG_DELAY_MS = 1e4;
var sizeMap = {
xsmall: Loader_module_default.loaderXsmall,
small: Loader_module_default.loaderSmall,
medium: Loader_module_default.loaderMedium,
large: Loader_module_default.loaderLarge
};
/**
* Default Loading Loader
* @param props -
*/
var Loader = ({ size = "large", defaultMessage, shortMessage, shortDelayMs = LOADER_TEXT_DELAY_MS, longMessage, longDelayMs = LOADER_TEXT_LONG_DELAY_MS }) => {
const { t } = useTranslation("common");
const loaderTextState = useSignal(defaultMessage ? "default" : "hidden");
const showText = size === "large";
useLayoutEffect(() => {
if (!showText) return;
const shortTimer = setTimeout(() => {
loaderTextState.value = "short";
}, shortDelayMs);
const longTimer = setTimeout(() => {
loaderTextState.value = "long";
}, longDelayMs);
return () => {
clearTimeout(shortTimer);
clearTimeout(longTimer);
};
}, [
showText,
shortDelayMs,
longDelayMs,
loaderTextState
]);
const resolvedMessage = useComputed(() => {
switch (loaderTextState.value) {
case "long": return longMessage ?? t(($) => $["justAMomentTakingLonger"]);
case "short": return shortMessage ?? t(($) => $["justAMoment"]);
case "default": return defaultMessage;
default: return;
}
});
const loaderTextVisible = useComputed(() => loaderTextState.value !== "hidden");
return /* @__PURE__ */ jsxs("div", {
className: Loader_module_default.loaderWrapper,
children: [/* @__PURE__ */ jsx("div", {
role: "progressbar",
className: cx(Loader_module_default.loader, sizeMap[size])
}), showText && /* @__PURE__ */ jsx("div", {
className: cx(Loader_module_default.loaderText, { [Loader_module_default.loaderTextVisible]: loaderTextVisible }),
children: /* @__PURE__ */ jsx(Typography, {
variant: "body",
color: "secondary",
el: "span",
children: resolvedMessage
})
})]
});
};
var Button_module_default = {
button: "adyen-kyc-button",
"button-full-width": "adyen-kyc-button-full-width",
buttonFullWidth: "adyen-kyc-button-full-width",
"button-label": "adyen-kyc-button-label",
buttonLabel: "adyen-kyc-button-label",
"button-label-padding": "adyen-kyc-button-label-padding",
buttonLabelPadding: "adyen-kyc-button-label-padding",
"button-shape-rectangle": "adyen-kyc-button-shape-rectangle",
buttonShapeRectangle: "adyen-kyc-button-shape-rectangle",
"button-shape-circle": "adyen-kyc-button-shape-circle",
buttonShapeCircle: "adyen-kyc-button-shape-circle",
"button-variant-primary": "adyen-kyc-button-variant-primary",
buttonVariantPrimary: "adyen-kyc-button-variant-primary",
"button-variant-secondary": "adyen-kyc-button-variant-secondary",
buttonVariantSecondary: "adyen-kyc-button-variant-secondary",
"button-variant-tertiary": "adyen-kyc-button-variant-tertiary",
buttonVariantTertiary: "adyen-kyc-button-variant-tertiary",
"button-variant-critical": "adyen-kyc-button-variant-critical",
buttonVariantCritical: "adyen-kyc-button-variant-critical",
"button-variant-link": "adyen-kyc-button-variant-link",
buttonVariantLink: "adyen-kyc-button-variant-link",
"button-variant-surface": "adyen-kyc-button-variant-surface",
buttonVariantSurface: "adyen-kyc-button-variant-surface",
"button-spinner": "adyen-kyc-button-spinner",
buttonSpinner: "adyen-kyc-button-spinner",
"present-spinner": "adyen-kyc-present-spinner",
presentSpinner: "adyen-kyc-present-spinner"
};
//#endregion
//#region src/components/ui/atoms/Button/Button.tsx
var ButtonBase = ({ ariaLabel, children, circle = false, disabled = false, fullWidth = false, loading = false, onClick, testId, type = "button", variant = "primary" }) => {
const isDisabled = disabled || loading;
const buttonVariantStyle = {
primary: Button_module_default.buttonVariantPrimary,
secondary: Button_module_default.buttonVariantSecondary,
tertiary: Button_module_default.buttonVariantTertiary,
critical: Button_module_default.buttonVariantCritical,
link: Button_module_default.buttonVariantLink,
surface: Button_module_default.buttonVariantSurface
};
const rootClassName = cx(Button_module_default.button, buttonVariantStyle[variant], variant !== "link" && {
[Button_module_default.buttonShapeRectangle]: !circle,
[Button_module_default.buttonShapeCircle]: circle,
[Button_module_default.buttonFullWidth]: fullWidth
});
const handleOnClick = (event) => {
event.preventDefault();
if (!isDisabled && onClick) onClick(event);
};
return /* @__PURE__ */ jsxs("button", {
"aria-label": ariaLabel,
className: rootClassName,
"data-testid": testId,
disabled: isDisabled,
onClick: handleOnClick,
type,
children: [loading && /* @__PURE__ */ jsx("div", {
className: Button_module_default.buttonSpinner,
children: /* @__PURE__ */ jsx(Loader, { size: "small" })
}), children]
});
};
var Button = ({ children, disabled = false, fullWidth, icon, loading = false, onClick, testId, type = "button", variant = "primary" }) => {
const buttonProps = {
disabled,
fullWidth,
icon,
loading,
onClick,
testId,
type,
variant
};
const labelClassname = cx(Button_module_default.buttonLabel, { [Button_module_default.buttonLabelPadding]: variant !== "link" });
return /* @__PURE__ */ jsx(ButtonBase, {
...buttonProps,
children: /* @__PURE__ */ jsxs("div", {
className: labelClassname,
children: [icon && /* @__PURE__ */ jsx(Icon, { name: icon }), children]
})
});
};
var IconButton = ({ ariaLabel, circle = false, disabled = false, icon, loading = false, onClick, testId, variant = "primary" }) => {
return /* @__PURE__ */ jsx(ButtonBase, {
ariaLabel,
circle,
disabled,
loading,
onClick,
testId,
variant,
children: /* @__PURE__ */ jsx("div", {
className: Button_module_default.buttonLabel,
children: /* @__PURE__ */ jsx(Icon, { name: icon })
})
});
};
//#endregion
export { IconButton as n, Loader as r, Button as t };