@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.
81 lines (80 loc) • 3.78 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] = "4e1e51b6-3ba6-4821-89be-23aedb1e3136", e._sentryDebugIdIdentifier = "sentry-dbid-4e1e51b6-3ba6-4821-89be-23aedb1e3136");
} catch (e) {}
import { o as createLogger, r as useTranslation } from "./translation-BFxyJ1c5.js";
import { t as useAnalyticsContext } from "./useAnalyticsContext-BVFDMrVE.js";
import { t as debouncedInputEvent } from "./debouncedInputEvent-Dxv4-RAv.js";
import { t as convertFullToHalf } from "./formFieldsUtils-CR7j1k8e.js";
import { useState } from "preact/hooks";
import cx from "classnames";
import { Fragment, jsx, jsxs } from "preact/jsx-runtime";
//#region src/components/ui/atoms/TextArea/TextArea.tsx
var logger = createLogger();
function TextArea(props) {
const { autoCorrect, isInvalid, isValid, readonly = null, spellCheck, disabled, maxLength, className, trimOnBlur, enableTracking = false, name, value: propValue, "aria-describedby": ariaDescribedBy, "aria-invalid": ariaInvalid, "aria-labelledby": ariaLabelledBy } = props;
const { t } = useTranslation("ui");
const userEvents = useAnalyticsContext();
const [value, setValue] = useState("");
/**
* If preact/compat is used anywhere in the app then it will "normalise" the onChange event to use onInput behaviour (https://github.com/preactjs/preact/issues/1410#issuecomment-473470561)
* - in other words most onChange events will be internally converted to onInput events, (https://preactjs.com/guide/v10/differences-to-react/#use-oninput-instead-of-onchange)
*
* To avoid confusion with misplaced/misdirected onChange handlers - InputBase only accepts onInput, onBlur & onFocus handlers.
* The first 2 being the means by which we expect useForm--handleChangeFor validation functionality to be applied.
*/
if (Object.prototype.hasOwnProperty.call(props, "onChange")) logger.error("Error: Form fields that rely on InputBase may not have an onChange property");
const handleInput = (e) => {
if (enableTracking) debouncedInputEvent(userEvents, {
actionType: "input",
field: name
});
e.currentTarget.value = convertFullToHalf(e.currentTarget.value);
setValue(e.currentTarget.value);
props?.onInput?.(e);
};
const handleBlur = (e) => {
if (enableTracking) userEvents.addFieldEvent("Interacted with form field", {
actionType: "blur",
field: name
});
props?.onBlurHandler?.(e);
if (trimOnBlur) e.currentTarget.value = e.currentTarget.value.trim();
props?.onBlur?.(e);
};
const handleFocus = (e) => {
if (enableTracking) userEvents.addFieldEvent("Interacted with form field", {
actionType: "focus",
field: name
});
props?.onFocusHandler?.(e);
};
const inputClassNames = cx("adyen-kyc-input", "adyen-kyc-input--textarea", className, {
"adyen-kyc-input--invalid": isInvalid,
"adyen-kyc-field--valid": isValid,
"adyen-kyc-input--disabled": disabled
});
const characterCount = (propValue ?? value ?? "").length;
return /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx("textarea", {
...props,
className: inputClassNames,
readOnly: readonly,
spellCheck,
autoCorrect,
"aria-describedby": ariaDescribedBy,
"aria-invalid": ariaInvalid,
"aria-labelledby": ariaLabelledBy,
...disabled && { "aria-disabled": true },
onInput: handleInput,
onBlur: handleBlur,
onFocus: handleFocus
}), !isInvalid && maxLength ? /* @__PURE__ */ jsx("span", {
className: "adyen-kyc-input__counter",
children: t(($) => $["xOfYCharacters"], {
characterCount,
maxLength
})
}) : null] });
}
//#endregion
export { TextArea as t };